orgchain/index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>Orgchain · Lineage</title>
<meta name="description" content="Found and operate lineage holdings on a toy chain in your browser: birth orgs and agents, award belts, decide, graduate and close, one beat at a time. Test coins only.">
<meta name="color-scheme" content="light dark">
<link rel="icon" href="./favicon.svg" type="image/svg+xml">
<script src="./theme.js"></script>
<script type="module" src="/src/main.js"></script>
</head>
<body>
<header class="band">
  <div class="band-in">
    <div>
      <p class="kicker"><a href="../">Lineage</a> /</p>
      <h1 class="wordmark">Orgchain</h1>
      <p class="lede">Found a <b>holding</b>, then birth its orgs and agents, award belts, record decisions, graduate and close. Each act is an inscription whose parent is the node that authorizes it, and each <b>beat</b> is a block. Lineage gives the structure; the chain adds time.</p>
    </div>
    <div class="flags">
      <span class="flag hz">Test coins only</span>
      <span class="flag proto">lineage/v0</span>
      <button class="flag" id="theme" type="button">Theme: system</button>
    </div>
  </div>
</header>
<section class="clock" aria-label="Time">
  <div class="clock-in">
    <p class="tab">Time</p>
    <div class="tempo" role="group" aria-labelledby="tempo-l">
      <span class="lab" id="tempo-l">Tempo</span>
      <button type="button" class="seg" data-tempo="each" aria-pressed="true">Each act</button><button type="button" class="seg" data-tempo="10" aria-pressed="false">10s</button><button type="button" class="seg" data-tempo="30" aria-pressed="false">30s</button><button type="button" class="seg" data-tempo="60" aria-pressed="false">60s</button><button type="button" class="seg" data-tempo="manual" aria-pressed="false">Manual</button>
    </div>
    <p class="beatno">Beat <b id="clock-beat">0</b> · <span id="clock-cued">nothing cued</span></p>
    <button type="button" class="btn primary" id="beat-now" disabled>Beat now</button>
    <div class="scrub">
      <label class="lab" for="beat">View</label>
      <input type="range" id="beat" min="0" max="0" value="0" step="1">
      <output id="beat-label" for="beat">Now · beat 0</output>
      <button type="button" class="btn sm" id="replay">Replay</button>
      <button type="button" class="btn sm" id="to-now">Now</button>
    </div>
  </div>
  <p id="say" class="say" role="status" aria-live="polite"></p>
</section>
<main class="wrap">
  <div class="work">
    <section class="blk hold-blk" aria-labelledby="h-holdings">
      <h2 class="tab" id="h-holdings">Holdings <span class="sub" id="holdings-sub"></span></h2>
      <div class="panel">
        <ul class="holds" id="holdings-list"></ul>
        <div class="pad empty" id="holdings-empty"><p>A holding is the root of a lineage tree: the LLC that births orgs and agents. Found one, or load the sample, the yolopreneur tree from the Lineage docs over six beats.</p></div>
        <form class="pad found" id="f-found" autocomplete="off">
          <label class="lab" for="found-name">Found a holding</label>
          <div class="line"><input id="found-name" name="name" maxlength="60" spellcheck="false" placeholder="acme-holdings"><button class="btn primary" type="submit">Found</button></div>
          <p class="hint">Names become domains: lowercase letters, digits and hyphens. Each holding gets its own 24-word lab root (test keys only).</p>
        </form>
        <div class="pad sample"><button class="btn" type="button" id="sample">Load the yolopreneur sample</button></div>
      </div>
    </section>
    <section class="blk tree-blk" aria-labelledby="h-tree">
      <h2 class="tab" id="h-tree">Tree <span class="sub" id="tree-sub"></span></h2>
      <div class="panel"><div class="tree" id="tree-rows"></div></div>
    </section>
    <section class="blk time-blk" aria-labelledby="h-timeline">
      <h2 class="tab" id="h-timeline">Timeline <span class="sub" id="timeline-sub"></span></h2>
      <div class="panel">
        <ol class="beats" id="timeline-list"></ol>
      </div>
    </section>
    <div class="side">
      <section class="blk" aria-labelledby="h-act">
        <h2 class="tab" id="h-act">Act <span class="sub" id="act-sub"></span></h2>
        <div class="panel">
          <p class="pad note" id="act-none">Select a holding, or a node in its tree, to act through it.</p>
          <div class="pad note" id="act-past" hidden><p>You are looking at beat <b id="past-beat"></b>. History is read-only.</p><button type="button" class="btn sm" id="past-now">Back to now</button></div>
          <div id="act-on" hidden>
            <div class="verbs" role="group" aria-label="Verb"><button type="button" data-verb="birth" aria-pressed="true">Birth</button><button type="button" data-verb="award" aria-pressed="false">Award</button><button type="button" data-verb="decide" aria-pressed="false">Decide</button><button type="button" data-verb="graduate" aria-pressed="false">Graduate</button><button type="button" data-verb="close" aria-pressed="false">Close</button></div>
            <p class="keyline" id="act-key"></p>
            <p class="why pad" id="act-why"></p>
            <form class="vf pad" id="f-birth" data-form="birth" autocomplete="off">
              <p class="vh">A child of <b data-name></b>. Its birth spends <b data-name></b>'s inscription.</p>
              <label class="lab" for="birth-name">Name</label>
              <input id="birth-name" name="name" maxlength="60" spellcheck="false" placeholder="docscope">
              <fieldset class="kinds"><legend class="lab">Kind</legend>
                <label><input type="radio" name="kind" value="org" checked> Org <span>has its own children</span></label>
                <label><input type="radio" name="kind" value="agent"> Agent <span>a seat that holds belts</span></label>
              </fieldset>
              <button class="btn primary go" type="submit">Birth</button>
            </form>
            <form class="vf pad" id="f-award" data-form="award" autocomplete="off" hidden>
              <p class="vh"><b data-name></b> awards a belt: one skill, one seat.</p>
              <label class="lab" for="award-to">To</label>
              <select id="award-to" name="to"></select>
              <label class="lab" for="award-skill">Skill</label>
              <input id="award-skill" name="skill" list="skills" maxlength="40" spellcheck="false" placeholder="launch">
              <datalist id="skills"><option value="context"><option value="launch"><option value="post"><option value="article"><option value="listen"><option value="loop"><option value="video"></datalist>
              <label class="lab" for="award-belt">Belt</label>
              <select id="award-belt" name="belt"><option value="white">White</option><option value="green">Green</option><option value="black">Black</option></select>
              <button class="btn primary go" type="submit">Award</button>
            </form>
            <form class="vf pad" id="f-decide" data-form="decide" autocomplete="off" hidden>
              <p class="vh">A decision on <b data-name></b>'s record, signed by spending its inscription.</p>
              <label class="lab" for="decide-title">Decision</label>
              <input id="decide-title" name="title" maxlength="140" placeholder="Every venture gets a page">
              <label class="lab" for="decide-why">Why <span>optional</span></label>
              <textarea id="decide-why" name="why" maxlength="400" rows="3"></textarea>
              <button class="btn primary go" type="submit">Decide</button>
            </form>
            <form class="vf pad" id="f-graduate" data-form="graduate" hidden>
              <p class="vh"><b data-parent></b> vouches for <b data-name></b>, and the edge flips from derived to adopted. A graduated org holds its own root, so it stays open if <b data-parent></b> closes. The event spends <b data-parent></b>'s inscription.</p>
              <button class="btn primary go" type="submit" id="graduate-go">Graduate</button>
            </form>
            <form class="vf pad" id="f-close" data-form="close" hidden>
              <p class="vh" id="close-note"></p>
              <div class="line"><button class="btn danger go" type="submit" id="close-go">Close</button><button class="btn" type="button" id="close-keep" hidden>Keep it open</button></div>
            </form>
          </div>
        </div>
      </section>
      <section class="blk" aria-labelledby="h-inspect">
        <h2 class="tab" id="h-inspect">Inspect <span class="sub" id="inspect-sub"></span></h2>
        <div class="panel" id="inspect-body"></div>
      </section>
    </div>
  </div>
  <footer class="foot">
    <div class="labrow">
      <span class="lab">This lab</span>
      <button type="button" class="btn sm" id="save">Save backup</button>
      <button type="button" class="btn sm" id="load">Load backup</button>
      <button type="button" class="btn sm" id="reset">Reset</button>
      <input type="file" id="load-file" accept="application/json,.json" hidden>
      <div id="confirm" class="confirm" hidden></div>
    </div>
    <p>Everything here lives in this browser: test keys (a lab root per holding), a private toy chain, pretend money. Nothing is a real key, and minting a real root is the operator's call.</p>
    <p>Orgchain is lineage's app, built on <a href="https://supertestnet.lol">Super Testnet</a>'s chain and inscriptions, where the full lab lives. Source: <a href="https://teahub.xyz/lineage/orgchain">lineage/orgchain</a>. Licenses: <a href="./licenses/supertestnet-CC0.txt">Super Testnet (CC0)</a>, <a href="./licenses/tapscript.txt">tapscript</a>, <a href="./licenses/noble-curves.txt">noble-curves</a>, <a href="./licenses/noble-hashes.txt">noble-hashes</a>.</p>
  </footer>
</main>
</body>
</html>