tabs/dojo.drawer.html

<aside id="kimodo-dojo-drawer" class="kimodo-drawer" aria-label="Dojo drawer">

  <!-- ============ LIBRARY VIEW: list of dojos (Mine / Community) ============ -->
  <div id="kimodo-dojo-library" class="kimodo-dojo-view">
    <!-- Anchored (sticky) browse header — same pattern as the kata library: pill + Add
         (Mine only) + search (Community only). Toggled per scope in renderLibrary. -->
    <div class="kimodo-libhead">
      <div class="kimodo-cz-seg kimodo-cz-seg--sub kimodo-dojo-seg" id="kimodo-dojo-scope" aria-label="Dojo scope">
        <button type="button" class="kimodo-cz-segbtn active" data-scope="mine">Mine</button>
        <button type="button" class="kimodo-cz-segbtn" data-scope="community">Community</button>
      </div>
      <button id="kimodo-dojo-add" class="kimodo-dojo-addbtn" type="button">＋ Add dojo</button>
      <input id="kimodo-dojo-search" class="kimodo-libsearch" type="text" placeholder="🔍 search" autocomplete="off" />
    </div>
    <div id="kimodo-dojo-grid" class="kimodo-dojo-cards" aria-label="Dojo list"></div>
    <div id="kimodo-dojo-empty" class="kimodo-drawer-sub kimodo-dojo-empty"></div>
  </div>

  <!-- ============ CREATE VIEW: prompt + suggest + generate + progress ======= -->
  <div id="kimodo-dojo-create" class="kimodo-dojo-view" hidden>
    <button id="kimodo-dojo-back" class="kimodo-dojo-back" type="button" title="Back to dojos">‹</button>

    <div class="kimodo-dojo-promptrow">
      <label class="kimodo-dojo-label" for="kimodo-dojo-prompt">Describe the dojo</label>
      <button id="kimodo-dojo-erase" class="kimodo-dojo-erase" type="button" title="Clear the prompt" aria-label="Clear the prompt">⌫</button>
    </div>
    <textarea id="kimodo-dojo-prompt" class="kimodo-dojo-prompt" rows="5"
      spellcheck="true" placeholder="a random dojo"></textarea>
    <button id="kimodo-dojo-improve" class="kimodo-dojo-improve" type="button"
      title="Let tiny-aya write or reroll the prompt">let tiny-aya decide 🎲</button>

    <div class="kimodo-dojo-actions">
      <button id="kimodo-dojo-generate" class="kimodo-dojo-primary" type="button">Generate Scene</button>
    </div>

    <!-- Generation stage: the flux isometric image fades in, then a "converting to 3D"
         scan effect plays over it while TripoSplat runs. Status text sits below. -->
    <div id="kimodo-dojo-stage" class="kimodo-dojo-stage" hidden>
      <div id="kimodo-dojo-iso" class="kimodo-dojo-iso">
        <img id="kimodo-dojo-iso-img" class="kimodo-dojo-iso-img" alt="Generated isometric scene" />
        <div class="kimodo-dojo-iso-scan" aria-hidden="true"></div>
        <div class="kimodo-dojo-iso-3d" aria-hidden="true">converting to 3D…</div>
      </div>
    </div>
    <div id="kimodo-dojo-status" class="kimodo-drawer-sub kimodo-dojo-status">Ready.</div>
    <button id="kimodo-dojo-save" class="kimodo-dojo-save" type="button" hidden>☁ Save to my dojos</button>

    <details class="kimodo-dojo-adv">
      <summary>Advanced settings</summary>
      <div class="kimodo-dojo-adv-body">
        <div class="kimodo-cz-seg kimodo-dojo-mode kimodo-dojo-panoctl" id="kimodo-dojo-mode" aria-label="Dojo scene type">
          <button type="button" class="kimodo-cz-segbtn active" data-mode="splat">Splat</button>
          <button type="button" class="kimodo-cz-segbtn" data-mode="panorama">Panorama</button>
        </div>
        <div class="kimodo-dojo-settings" aria-label="Dojo room settings">
          <label class="kimodo-dojo-check kimodo-dojo-panoctl">
            <input id="kimodo-dojo-skybox" type="checkbox" />
            <span>Use panorama as skybox in splat</span>
          </label>
          <label class="kimodo-dojo-range" for="kimodo-dojo-room-size">
            <span>Room size <output id="kimodo-dojo-room-size-value">6.5</output>m <small style="color:#8a7a5a">(≈ char ×<span id="kimodo-dojo-room-ratio">3.8</span>)</small></span>
            <input id="kimodo-dojo-room-size" type="range" min="3" max="14" value="6.5" step="0.5" />
          </label>
          <label class="kimodo-dojo-range" for="kimodo-dojo-room-height">
            <span>Room height <output id="kimodo-dojo-room-height-value">3.2</output>m</span>
            <input id="kimodo-dojo-room-height" type="range" min="2" max="6" value="3.2" step="0.2" />
          </label>
        </div>
        <div class="kimodo-dojo-grid2">
          <label><span>Seed</span><input id="kimodo-dojo-seed" type="number" value="-1" step="1" /></label>
          <label><span>Steps</span><input id="kimodo-dojo-steps" type="number" value="28" min="1" max="100" step="1" /></label>
        </div>
      </div>
    </details>
  </div>
</aside>