rvlib-shipkit 0.28.0 → 0.30.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 0.30.0
+
+- **The studio asset page is tools on one shared canvas, not tabs on a drawer.** Every metadata family is a toggleable TOOL: `oval`, `legs`, `size` (the geometry editor split into its parts), each repo `customPanel`, `asset json`, `roll meta`. Several can be on at once, the URL records the set (`#<assetId>?tools=a,b`, shareable, restored on load), and the last set per kind is remembered. Kit-declared TABS (`meta.tabs: [{ id, tools }]`) are one-click presets, validated at kit load (an undeclared panel OR an unknown tool id refuses, loud). Panel tools float as draggable cards ON the canvas (a drag clamps inside the stage), `customPanel({ anchor: 'bl' })` starts a card bottom-left, so switching a tab never reflows the stage, and the drawer, its tab row and the bottom json body are deleted. Toggling a custom editor on does fold the variants bar, the one deliberate reflow. Custom panels can draw on the art in place: `api.stageOverlay()` returns an element covering the displayed roll (the tint-mask painter paints THERE, controls stay in its floating card), `api.dropOverlays()` cleans up on unmount, and the host calls it. Variants (rolls) move to a thin resizable right bar (drag handle, width remembered, slim-rail collapse, auto-folds when a custom editor turns on). The prompt keeps its fold. The stage remeasures through a ResizeObserver, so overlays track the image through any layout change, not only window resizes.
+- **Legs are editable again, named, and depth-true.** The tools arc left every leg marker painted over its own drag box (the color pill intercepted the pointer and hid the slot label) and raised the whole family above the sprite. Restored to the original studio scheme: leg DRAG boxes all ride above the sprite and the mask host, so every leg is grabbable even with a mask canvas on; the pills alone carry the game depth preview (far pills behind the sprite, near pills over it) and take no pointer; slot labels (L·front … R·front) are bold and readable while dragging; the one-size resize handle sits on all four legs, not only L·front.
+- **A dedicated `legs` auto tab.** A kit tab that covers legs inside a wider preset suppressed any legs-only view. The studio now always offers a `legs` tab when legs are valid (unless the kit declares its own), because leg names read best with the oval out of the way. An uncovered geometry rest of exactly legs becomes the legs tab itself, never a twin pair.
+- **Floating card positions persist.** Per panel id in localStorage (`hub:panelpos`), re-clamped to the stage on first layout and whenever the stage resizes, so a spot saved on a bigger monitor stays reachable; the kit anchor stays the default for a card never dragged. Per panel rather than per kind: a card's spot is muscle memory about screen room, and resetting it on every kind switch helps nobody. Cards have no resize or collapse affordance, so position is the whole state.
+- **Floating cards are dense.** The hub's chunky default button leaked into panel bodies, which read as oversized controls with fat padding. Card bodies now compact buttons, inputs and labels, and the card frame lost its oversized minimum width and padding.
+
+## 0.29.0
+
+- **Creation output states facts instead of listing chores.** A fresh `start` ended on five lines that meant nothing to the person reading them: `skip: lint/typecheck/test (no … script)` about scripts a repo born one second ago has no use for, plus `next:` nags to fill venues and mint identity assets, neither of which anybody has decided on yet. `init` now reports the gate floor as ONE line naming what resolved, and `start` closes with one measured summary (`<name> is ready — N file(s) committed, pushed to <remote>`). Venues raise themselves through the contract checker the day one is declared, and identity through rule SK002 the day the repo grows a public surface. An output that lists undecided work trains the reader to skip all of it.
+
 ## 0.28.0
 
 - **The `.claude/` policy files are OPT-IN.** 0.27.0 wrote a pre-approved shell allowlist (`curl *`, `git push*`, `./deploy.sh`) and an attribution silencer into every started repo, gitignored and therefore invisible to review. Those are decisions about what an agent can do in a repo and what its git history says, so they now require the caller to declare a house (`claudePolicy`, which `start` enables when it seeds CLAUDE.md include lines), and the grant prints once by name when it lands. The verify skill still lands for everyone.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "rvlib-shipkit",
-    "version": "0.28.0",
+    "version": "0.30.0",
     "description": "All-in-one repo companion: ci gate (task DAG), auto-discovered health checks, release-contract fulfillness, asks queue, md-wiki tools, asset atelier, live tui",
     "license": "MIT",
     "type": "module",

package/src/assets/kit-config.ts

@@ -66,16 +66,24 @@ export type CustomPanelSpec = {
     id: string
     /** repo-root-relative ES module path (e.g. .rv-assets/panels/legs-editor.js) */
     script: string
+    /** default corner of the floating card on the canvas (drag overrides) */
+    anchor?: 'tl' | 'bl'
 }
 export type PanelSpec = GeometryPanelSpec | GridPanelSpec | CustomPanelSpec
 export const geometryPanel = (p: Omit<GeometryPanelSpec, 'panel'>): GeometryPanelSpec => ({ panel: 'geometry', ...p })
 export const gridPanel = (p: Omit<GridPanelSpec, 'panel'>): GridPanelSpec => ({ panel: 'grid', ...p })
 export const customPanel = (p: Omit<CustomPanelSpec, 'panel'>): CustomPanelSpec => ({ panel: 'custom', ...p })
 
+/** a named preset of studio tools — the studio shows tabs, a tab enables
+ *  its tool set on one shared canvas */
+export type KindTabTool = 'oval' | 'legs' | 'size' | 'json' | 'meta' | `c:${string}`
+export type KindTab = { id: string; tools: KindTabTool[] }
+
 export type KindMeta = {
     /** live write-through target, repo-root-relative (e.g. assets/heroes/ground-rects.json) */
     file?: string
     panels?: PanelSpec[]
+    tabs?: KindTab[]
     /** ships to an art-normalized folder: sizes are in art-height units */
     artNormalized?: boolean
     /** repo-owned semantics gate, run before any metadata write-through —
@@ -164,6 +172,24 @@ export function validateKit(k: KitConfig): string[] {
             if (typeof p.script !== 'string' || p.script === '') errs.push(`kind '${kind.id}' panel '${p.id}': script path required (repo-root-relative ES module)`)
             else if (p.script.startsWith('/') || p.script.split('/').includes('..'))
                 errs.push(`kind '${kind.id}' panel '${p.id}': script must be repo-root-relative without '..' (got '${p.script}')`)
+            if (p.anchor != null && !['tl', 'bl'].includes(p.anchor)) errs.push(`kind '${kind.id}' panel '${p.id}': anchor must be tl or bl (got '${p.anchor}')`)
+        }
+        const tabIds = new Set<string>()
+        for (const t of kind.meta?.tabs ?? []) {
+            if (!/^[a-z0-9][a-z0-9-]*$/.test(t.id ?? '')) errs.push(`kind '${kind.id}': tab id must be url-safe kebab-case (got '${t.id}')`)
+            if (tabIds.has(t.id)) errs.push(`kind '${kind.id}': duplicate tab id '${t.id}'`)
+            tabIds.add(t.id)
+            if (!Array.isArray(t.tools) || t.tools.length === 0 || t.tools.some((x) => typeof x !== 'string'))
+                errs.push(`kind '${kind.id}' tab '${t.id}': tools must be a non-empty string array`)
+            for (const x of t.tools ?? []) {
+                if (typeof x !== 'string') continue
+                // a typo must refuse LOUD — a silently dropped tool id makes the whole tab vanish
+                if (x.startsWith('c:')) {
+                    if (!panelIds.has(x.slice(2))) errs.push(`kind '${kind.id}' tab '${t.id}': names custom panel '${x.slice(2)}' which the kind does not declare`)
+                } else if (!['oval', 'legs', 'size', 'json', 'meta'].includes(x)) {
+                    errs.push(`kind '${kind.id}' tab '${t.id}': unknown tool '${x}' (oval | legs | size | json | meta | c:<panelId>)`)
+                }
+            }
         }
     }
     // derived-asset graph: every from-ref must exist, and the graph is a DAG

package/src/assets/server/studio-server.ts

@@ -251,8 +251,8 @@ export async function studioRoutes(deps: StudioDeps): Promise<StudioRoutes> {
             const dir = dirOf(f.asset.id)
             const pick = await readPick(dir)
             const rolls = listRolls(dir).map((name) => ({ name, picked: name === pick.pick, alt: pick.alts.includes(name), hasMeta: existsSync(metaPath(dir, name)) }))
-            const custom = customPanelsOf(f).map((p) => ({ id: p.id, kind: f.kind.id, url: `panel/${encodeURIComponent(f.kind.id)}/${encodeURIComponent(p.id)}.js` }))
-            return json({ asset: { ...f.asset, prompt: await promptOf(f), cat: f.kind.category, geometry: geometryOf(f) != null, custom }, info: infoOf(f), rolls, pick })
+            const custom = customPanelsOf(f).map((p) => ({ id: p.id, kind: f.kind.id, url: `panel/${encodeURIComponent(f.kind.id)}/${encodeURIComponent(p.id)}.js`, anchor: p.anchor }))
+            return json({ asset: { ...f.asset, prompt: await promptOf(f), cat: f.kind.category, geometry: geometryOf(f) != null, custom, tabs: f.kind.meta?.tabs ?? [] }, info: infoOf(f), rolls, pick })
         }
 
         if (pathname.startsWith('/panel/')) {

package/src/init-repo.ts

@@ -99,11 +99,15 @@ export async function initRepo(root: string, opts: InitOpts = {}): Promise<numbe
     // `shipkit check --fix SK004`, one code path
     const g = await gitignorePolicy.fix!({ root, config: defineRepo({ name }) })
     p(`ok: .gitignore policy block ${g.changed ? 'written' : 'already current'}`)
-    // show what the gate actually is — a thin floor must be seen at init
-    // time, not discovered after a bad commit slipped through
+    // what the gate actually runs, in ONE line: a thin floor must be seen at
+    // init time rather than discovered after a bad commit slipped through.
+    // The per-task resolution is diagnostics, and a `skip:` naming a script
+    // this repo has no use for yet reads as a chore list on a repo that was
+    // born a second ago. `shipkit ci` reports the same facts when they
+    // matter, and reports them about a repo that has code in it
     const floor = resolveFloor(defineRepo({ name }), root)
-    for (const t of floor.tasks) p(`ok: floor ${t.id} ← ${floor.sources[t.id] ?? 'unknown'}`)
-    for (const u of floor.unfilled) p(`skip: ${u.id} (${u.reason})`)
+    if (floor.tasks.length > 0) p(`ok: gate floor: ${floor.tasks.map((t) => t.id).join(', ')}`)
+    else p(`WARN the gate would check NOTHING here (${floor.unfilled.map((u) => u.id).join(', ')} all unresolved) — see \`shipkit rules\``)
     // every verb comes from the `shipkit` bin — dead on arrival unless the
     // package is actually installed (bunx runs without adding the dep)
     if (opts.bin == null) {
@@ -116,7 +120,11 @@ export async function initRepo(root: string, opts: InitOpts = {}): Promise<numbe
     }
     // last, so the first commit carries repo.config.ts and the scripts above
     if (wired && opts.noPublish !== true) await publishRepo(root, { github: opts.github, gh: opts.gh, print: p })
-    p('next: fill venues/social in repo.config.ts, then `shipkit ci`')
-    p('next: identity+assets — mint .rv-identity/brand.ts + .rv-assets/kit.ts, `shipkit assets identity` (the identity contract expects public/ favicon+og+logo)')
+    // no chore list here. Venues belong in repo.config the day a venue is
+    // CHOSEN, and the contract checker fails the gate from that day on.
+    // Identity is needed once the repo has a public surface, and rule SK002
+    // warns exactly then. Both told at creation time are noise about a
+    // decision nobody has made yet. `start` owns the one closing line
+    if (opts.noPublish !== true) p('next: `shipkit ci` is the gate — run it to check your work')
     return 0
 }

package/src/serve/hub-app/geometry-view.tsx

@@ -10,7 +10,7 @@ import { useRef } from 'react'
 import type { HubSt } from './hub-st.ts'
 import type { Leg } from './hub-types.ts'
 
-export type Box = { scale: number; x: number; y: number }
+export type Box = { scale: number; x: number; y: number; w: number; h: number }
 
 /** vanilla imgBox(): where the letterboxed image actually sits in the stage */
 export function measureBox(stage: HTMLElement | null, img: HTMLImageElement | null): Box | null {
@@ -20,7 +20,7 @@ export function measureBox(stage: HTMLElement | null, img: HTMLImageElement | nu
     const scale = Math.min(b.width / img.naturalWidth, b.height / img.naturalHeight)
     const w = img.naturalWidth * scale
     const h = img.naturalHeight * scale
-    return { scale, x: b.left - st.left + (b.width - w) / 2, y: b.top - st.top + (b.height - h) / 2 }
+    return { scale, x: b.left - st.left + (b.width - w) / 2, y: b.top - st.top + (b.height - h) / 2, w, h }
 }
 
 const LEG_TAGS = ['L·front', 'L·back', 'R·back', 'R·front']
@@ -69,7 +69,8 @@ const LegBox = observer(({ app, box, i, leg }: { app: HubSt; box: Box; i: number
                 <div className="hip" />
                 <div className="foot" />
                 <div className="tag">{LEG_TAGS[i]}</div>
-                {i === 0 ? <div className="lh" /> : null}
+                {/* one-size-for-all resize, reachable from ANY leg */}
+                <div className="lh" />
             </div>
             <div
                 className={`pill${far ? '' : ' near'}`}
@@ -83,8 +84,11 @@ export const GeometryLayer = observer(({ app, box }: { app: HubSt; box: Box | nu
     const m = app.media
     const start = useRef<DragStart | null>(null)
     const rect = m.rect
-    if (!m.hasGeom || rect == null || box == null) return null
+    const showOval = m.tools.has('oval')
+    const showLegs = m.tools.has('legs')
+    if (!m.hasGeom || rect == null || box == null || (!showOval && !showLegs)) return null
     const px = (v: number): number => v * box.scale
+    if (!showOval) return <>{(rect.legs ?? []).map((l, i) => <LegBox key={i} app={app} box={box} i={i} leg={l} />)}</>
     return (
         <>
             <div className="plumb" style={{ display: 'block', left: box.x + px(rect.x) }} />
@@ -128,7 +132,7 @@ export const GeometryLayer = observer(({ app, box }: { app: HubSt; box: Box | nu
                 <div className="arrow" />
                 <div className="sz">{+rect.size.toFixed(2)}m</div>
             </div>
-            {(rect.legs ?? []).map((l, i) => <LegBox key={i} app={app} box={box} i={i} leg={l} />)}
+            {showLegs ? (rect.legs ?? []).map((l, i) => <LegBox key={i} app={app} box={box} i={i} leg={l} />) : null}
         </>
     )
 })
@@ -136,19 +140,23 @@ export const GeometryLayer = observer(({ app, box }: { app: HubSt; box: Box | nu
 export const Rectbar = observer(({ app }: { app: HubSt }) => {
     const m = app.media
     const rect = m.rect
-    if (!m.hasGeom || rect == null) return null
+    const showSize = m.tools.has('size')
+    const showLegs = m.tools.has('legs')
+    if (!m.hasGeom || rect == null || (!showSize && !showLegs)) return null
     const cx = Math.round(rect.x + rect.w / 2)
     const cy = Math.round(rect.y + rect.h / 2)
     return (
         <div id="rectbar" style={{ display: 'flex' }}>
-            <label>size <input type="number" step={0.1} min={0.1} value={rect.size}
-                onChange={(e) => { runInAction(() => { rect.size = Math.max(0.1, +e.target.value || rect.size) }); m.saveRect() }} /></label>
-            <button className="ghost" onClick={() => void m.legsDefault()}>legs</button>
-            <input type="color" title="leg color" value={/^#[0-9a-f]{6}$/i.test(rect.legColor ?? '') ? rect.legColor : '#c8a070'}
-                onChange={(e) => { runInAction(() => { rect.legColor = e.target.value }); m.saveRect() }} />
-            {rect.legs != null
-                ? <button className="ghost" title="remove legs" onClick={() => { if (confirm('remove all 4 legs?')) m.removeLegs() }}>✕</button>
-                : null}
+            {showSize ? <label>size <input type="number" step={0.1} min={0.1} value={rect.size}
+                onChange={(e) => { runInAction(() => { rect.size = Math.max(0.1, +e.target.value || rect.size) }); m.saveRect() }} /></label> : null}
+            {showLegs ? <>
+                <button className="ghost" onClick={() => void m.legsDefault()}>legs</button>
+                <input type="color" title="leg color" value={/^#[0-9a-f]{6}$/i.test(rect.legColor ?? '') ? rect.legColor : '#c8a070'}
+                    onChange={(e) => { runInAction(() => { rect.legColor = e.target.value }); m.saveRect() }} />
+                {rect.legs != null
+                    ? <button className="ghost" title="remove legs" onClick={() => { if (confirm('remove all 4 legs?')) m.removeLegs() }}>✕</button>
+                    : null}
+            </> : null}
             <span className="ro">cx{cx} cy{cy} w{Math.round(rect.w)}px</span>
         </div>
     )

package/src/serve/hub-app/hub-app.tsx

@@ -10,7 +10,7 @@ import { StrictMode, useEffect } from 'react'
 import { createRoot } from 'react-dom/client'
 import { ColCard, ColGrid, GraphView, StatusCard } from './col-card.tsx'
 import { HubSt } from './hub-st.ts'
-import { AssetStage, CatGrid, Drawer, InfoChips, MediaTopbar, RollStrip } from './media-view.tsx'
+import { AssetStage, CatGrid, InfoChips, MediaTopbar, ToolsBar, VariantsBar } from './media-view.tsx'
 import type { SideAsset } from './hub-types.ts'
 
 const app = new HubSt()
@@ -212,10 +212,12 @@ const Main = observer(() => {
             {errs}
             <MediaTopbar app={app} />
             <InfoChips app={app} />
-            <AssetStage app={app} />
-            <RollStrip app={app} />
+            <ToolsBar app={app} />
+            <div className="centerrow">
+                <AssetStage app={app} />
+                <VariantsBar app={app} />
+            </div>
             <AssetRemarks />
-            <Drawer app={app} />
             <div className="help"><kbd>←</kbd><kbd>→</kbd> roll · <kbd>Enter</kbd> pick · <kbd>A</kbd> alt · <kbd>X</kbd> discard — picks ship via the kit's ship hook when present · category title = grid view</div>
         </main>
     )

package/src/serve/hub-app/hub-st.ts

@@ -148,14 +148,26 @@ export class HubSt {
         if (location.hash.slice(1) !== h) location.hash = h
     }
     applyHash(): void {
-        const h = decodeURIComponent(location.hash.slice(1))
-        if (h === '') return
+        const raw = decodeURIComponent(location.hash.slice(1))
+        if (raw === '') return
+        // #<assetId>?tools=a,b — the query half is the media tool state
+        const qi = raw.indexOf('?')
+        const h = qi === -1 ? raw : raw.slice(0, qi)
         if (h.startsWith('cat-')) {
             const c = h.slice(4)
             if (this.media.assets.some((a) => a.cat === c) && this.media.catMode !== c) this.showCat(c, false)
             return
         }
-        if (this.media.assets.some((a) => a.id === h) && this.media.curId !== h) this.selectAsset(h, false)
+        const tools = qi === -1 ? null : new URLSearchParams(raw.slice(qi + 1)).get('tools')
+        const list = tools == null ? null : tools === '' ? [] : tools.split(',')
+        if (this.media.assets.some((a) => a.id === h) && this.media.curId !== h) {
+            this.media.pendingTools = list
+            this.selectAsset(h, false)
+        } else if (this.media.curId === h && list != null) {
+            // same asset, new tool set (a pasted share link) — apply NOW; a
+            // parked pendingTools would hijack the next selection instead
+            this.media.applyTab(list)
+        }
     }
     /** first heartbeat has the asset list — only then can a hash resolve */
     afterFirstBeat(): void {

package/src/serve/hub-app/hub-types.ts

@@ -28,10 +28,12 @@ export type AssetInfo = {
     kitSource: string
 }
 
-export type CustomPanelRef = { id: string; kind: string; url: string }
+export type CustomPanelRef = { id: string; kind: string; url: string; anchor?: 'tl' | 'bl' }
+/** a kit-declared preset of tools shown as a studio tab */
+export type KindTabRef = { id: string; tools: string[] }
 
 export type AssetDetail = {
-    asset: { id: string; label?: string; prompt: string; cat: string; geometry: boolean; custom: CustomPanelRef[] } & Record<string, unknown>
+    asset: { id: string; label?: string; prompt: string; cat: string; geometry: boolean; custom: CustomPanelRef[]; tabs: KindTabRef[] } & Record<string, unknown>
     info: AssetInfo
     rolls: RollRow[]
 }

package/src/serve/hub-app/hub.css

@@ -118,14 +118,21 @@ kbd{background:var(--panel2);border:1px solid var(--line);border-radius:4px;padd
 #ov .sz{position:absolute;left:50%;top:50%;transform:translate(-50%,-120%);font-size:11px;color:var(--gold);
  background:#000a;padding:0 5px;border-radius:4px;white-space:nowrap}
 .plumb{position:absolute;width:0;border-left:1px dashed rgba(255,207,92,.5);top:-2000px;bottom:-2000px;z-index:9}
+/* leg DRAG boxes all ride at 10, above the sprite (5) and the mask host
+   (.ovlhost 6) — every leg grabbable even with a mask canvas on. depth is
+   the PILLS' job, never theirs */
 .leg{position:absolute;z-index:10;border:1px solid;border-radius:3px}
-.leg.far{border-color:var(--blue);z-index:3}
-.leg.near{border-color:var(--red);z-index:7}
+.leg.far{border-color:var(--blue)}
+.leg.near{border-color:var(--red)}
 .leg .hip{position:absolute;top:-3px;left:50%;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background:currentColor}
 .leg .foot{position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);width:12px;height:7px;border-radius:50%;background:var(--gold)}
 .leg .lh{position:absolute;right:-6px;top:-6px;width:11px;height:11px;background:currentColor;border-radius:3px;cursor:nesw-resize}
-.leg .tag{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:9px;opacity:.85;white-space:nowrap}
-.pill{position:absolute;border-radius:999px;z-index:3;opacity:.9}
+.leg .tag{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:10px;font-weight:700;color:#eaf2ff;
+ text-shadow:0 1px 2px #000c;pointer-events:none;white-space:nowrap}
+.leg.near .tag{color:#ffecec}
+/* resting-pose pill preview, game z-order sandwich: far pills (3) behind
+   the sprite (5), near pills (7) over it — never intercept a drag */
+.pill{position:absolute;border-radius:999px;z-index:3;opacity:.9;pointer-events:none}
 .pill.near{z-index:7}
 #rectbar{position:absolute;left:14px;bottom:14px;z-index:11;gap:8px;align-items:center;
  background:#000b;border:1px solid var(--line);border-radius:10px;padding:7px 10px;font-size:12px}
@@ -166,8 +173,7 @@ kbd{background:var(--panel2);border:1px solid var(--line);border-radius:4px;padd
 .rlabel{position:absolute;left:4px;font-size:9px;color:var(--dim)}
 .rlabel.b{font-weight:700;color:var(--ink)}
 
-/* ── roll strip ── */
-.strip{height:150px;flex:none;border-top:1px solid var(--line);background:var(--panel);display:flex;gap:10px;padding:12px;overflow-x:auto}
+/* ── roll vignettes (shared by the variants bar + category cards) ── */
 .vig{position:relative;height:100%;aspect-ratio:1;flex:none;border:2px solid var(--line);border-radius:10px;overflow:hidden;cursor:pointer;
  background:conic-gradient(var(--chk1) 90deg,var(--chk2) 0 180deg,var(--chk1) 0 270deg,var(--chk2) 0) 0/12px 12px}
 .vig img{width:100%;height:100%;object-fit:contain}
@@ -183,18 +189,40 @@ kbd{background:var(--panel2);border:1px solid var(--line);border-radius:4px;padd
 .vig.aud{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-size:20px}
 .vig.aud audio{width:100%;height:24px}
 .vig.gen{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--dim);font-size:11px}
-.strip .ph{color:var(--dim);align-self:center;padding:0 12px}
 
-/* ── drawer ── */
-.drawer{flex:none;border-top:1px solid var(--line);background:var(--panel)}
-.tabs{display:flex;gap:2px;padding:6px 12px 0}
-.tabs button{background:var(--panel2);color:var(--dim);border:1px solid var(--line);border-bottom:0;border-radius:8px 8px 0 0;
- padding:5px 12px;font-size:12px;font-weight:400}
-.tabs button.on{color:var(--ink);background:var(--bg)}
-.tabs .sp{flex:1}
-.tabs .ghost{border:1px solid var(--line);border-radius:8px;font-size:12px;padding:5px 12px}
-#drawerbody{padding:10px 12px}
-#jsonta{min-height:140px}
+/* ── tools bar + center row (stage column + variants side bar) ── */
+.toolsbar{display:flex;gap:6px;align-items:center;padding:7px 16px;border-bottom:1px solid var(--line);background:var(--panel)}
+.toolsbar .tab{background:transparent;color:var(--dim);border:0;border-bottom:2px solid transparent;border-radius:0;padding:4px 10px;font-size:12.5px;font-weight:650}
+.toolsbar .tab.on{color:var(--ink);border-bottom-color:var(--accent)}
+.toolsbar .tdiv{width:1px;align-self:stretch;background:var(--line);margin:0 8px}
+.toolsbar .tlab{font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.06em;margin-right:4px}
+.toolsbar .chip{background:var(--panel2);color:var(--dim);border:1px solid var(--line);border-radius:999px;padding:4px 13px;font-size:12px;font-weight:600}
+.toolsbar .chip.on{color:var(--ink);background:var(--bg);border-color:var(--accent)}
+.toolsbar .sp{flex:1}
+.toolsbar .ghost{font-size:12px;padding:4px 11px}
+.centerrow{display:flex;flex:1;min-height:0}
+.ovlhost{position:absolute;z-index:6;pointer-events:none}
+.fpanel{position:absolute;z-index:12;min-width:230px;max-width:520px;background:var(--panel);border:1px solid var(--line);
+ border-radius:10px;box-shadow:0 10px 30px #000a;display:flex;flex-direction:column}
+.fhead{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 9px;border-bottom:1px solid var(--line);
+ cursor:grab;font-size:10.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.06em;user-select:none}
+.fhead .x{background:transparent;color:var(--dim);border:0;padding:0 2px;font-size:12px}
+.fhead .x:hover{color:var(--ink)}
+.fbody{padding:6px 9px;max-height:46vh;overflow:auto}
+/* panel content inherits the hub's chunky default button — inside a card
+   everything is DENSE, repo panel scripts get this for free */
+.fbody button{padding:3px 9px;font-size:11.5px;font-weight:600;border-radius:6px}
+.fbody input:not([type=color]),.fbody select{padding:3px 6px;font-size:11.5px}
+.fbody label{font-size:11.5px}
+.fbody .jsonta{width:100%;min-height:160px}
+.vbar{flex:none;border-left:1px solid var(--line);background:var(--panel);display:flex;min-height:0;position:relative}
+.vbar.closed{width:26px;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;color:var(--dim);font-size:11px}
+.vbar .vcount{background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:2px 6px;font-size:10px}
+.vhandle{position:absolute;left:0;top:0;bottom:0;width:6px;cursor:col-resize;z-index:3}
+.vhandle:hover{background:var(--accent);opacity:.4}
+.vscroll{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:10px 8px 10px 12px}
+.vbar .vig{width:100%;height:auto}
+.vbar .ph{color:var(--dim);font-size:12px;padding:8px}
 
 /* ── asset remark row ── */
 .assetrem{flex:none;border-top:1px solid var(--line);background:var(--panel);padding:8px 12px}

package/src/serve/hub-app/media-svc.ts

@@ -54,25 +54,51 @@ export class MediaSvc {
     allMsg = ''
 
     openCats = new Set<string>()
-    tab: string = 'asset'
-    drawerOpen = false
+    /** active TOOLS — 'oval' | 'legs' | 'size' | 'json' | 'meta' | 'c:<panelId>'.
+     *  several can be on at once; recorded in the URL (?tools=) and remembered
+     *  per kind in localStorage */
+    tools = new Set<string>()
+    /** tools requested by the URL hash, applied by the next select() */
+    pendingTools: string[] | null = null
+    /** variants side bar: open flag + width (drag-resizable) */
+    variantsOpen = true
+    variantsW = 150
+    /** floating panel positions ON the canvas — per panel id, persisted
+     *  (hub:panelpos): a card's spot is muscle memory about screen room,
+     *  shared across kinds. the kit anchor is only the never-dragged default */
+    panelPos = new Map<string, { x: number; y: number }>()
     jsonText = ''
     jsonMsg = ''
     /** prompt folded to one ellipsized line (session state, click toggles) */
     promptOpen = false
 
-    /** latched by picking a NON-default tab, until then a sole custom panel is the default */
-    private tabPicked = false
-
     private hbTimer: ReturnType<typeof setInterval> | null = null
     private rectTimer: ReturnType<typeof setTimeout> | null = null
     private promptTimer: ReturnType<typeof setTimeout> | null = null
     /** last text known saved for the CURRENT asset — an equal edit is not a save */
     private savedPrompt = ''
+    /** stage overlay root (the image box) — registered by AssetStage, DOM only */
+    overlayHost: HTMLElement | null = null
 
     constructor(private st: HubSt) {
-        makeAutoObservable<this, 'st' | 'hbTimer' | 'rectTimer' | 'promptTimer' | 'savedPrompt' | 'tabPicked'>(
-            this, { st: false, hbTimer: false, rectTimer: false, promptTimer: false, savedPrompt: false, tabPicked: false })
+        makeAutoObservable<this, 'st' | 'hbTimer' | 'rectTimer' | 'promptTimer' | 'savedPrompt' | 'overlayHost'>(
+            this, { st: false, hbTimer: false, rectTimer: false, promptTimer: false, savedPrompt: false, overlayHost: false })
+        if (typeof localStorage !== 'undefined') {
+            const w = +(localStorage.getItem('hub:variantsW') ?? '')
+            if (w > 0) this.variantsW = Math.min(420, Math.max(90, w))
+            const pp = localStorage.getItem('hub:panelpos')
+            if (pp != null) {
+                // no clamp here: positions are STAGE-relative and the stage is not
+                // measured yet — FloatPanel re-clamps through movePanel on layout
+                try {
+                    for (const [k, p] of Object.entries(JSON.parse(pp) as Record<string, { x: number; y: number }>))
+                        if (typeof p?.x === 'number' && typeof p?.y === 'number')
+                            this.panelPos.set(k, { x: Math.max(0, p.x), y: Math.max(0, p.y) })
+                } catch {
+                    localStorage.removeItem('hub:panelpos') // corrupt blob: drop it, cards fall back to the anchor cascade
+                }
+            }
+        }
     }
 
     start(): void {
@@ -166,15 +192,10 @@ export class MediaSvc {
             this.savedPrompt = r.asset.prompt
             this.promptMsg = ''
             if (this.deterministic) this.n = '1'
-            // custom panels are the working surfaces, a kind with exactly one
-            // gets it as the default tab (setTab latches an explicit divergence)
-            const sole = r.asset.custom.length === 1 ? `c:${r.asset.custom[0]!.id}` : null
-            if (this.tab.startsWith('c:') && !r.asset.custom.some((c) => `c:${c.id}` === this.tab)) this.tab = sole ?? 'asset'
-            else if (!this.tabPicked && sole != null) this.tab = sole
+            this.applyTools(r)
             this.pickActive(r)
         })
         if (this.hasGeom) await this.loadRect()
-        void this.loadTab()
     }
 
     private pickActive(r: AssetDetail): void {
@@ -197,7 +218,7 @@ export class MediaSvc {
     setActive(name: string): void {
         this.active = name
         if (this.hasGeom) void this.loadRect()
-        if (this.tab !== 'asset') void this.loadTab()
+        if (this.tools.has('meta')) void this.loadMeta()
     }
 
     async generate(): Promise<void> {
@@ -382,28 +403,101 @@ export class MediaSvc {
         await this.fillCat()
     }
 
-    // ── drawer: custom panels · asset json (read-only) · roll meta sidecar ─
-    setTab(tab: string): void {
-        this.tab = tab
-        // clicking the sole panel IS the default, only a different pick latches
-        const c = this.detail?.asset.custom ?? []
-        if (tab !== (c.length === 1 ? `c:${c[0]!.id}` : null)) this.tabPicked = true
-        this.drawerOpen = true
-        void this.loadTab()
-    }
-    async loadTab(): Promise<void> {
+    // ── tools: which editors are ON — several at once, per-kind memory ────
+    private applyTools(r: AssetDetail): void {
+        const valid = this.validTools(r)
+        const want = this.pendingTools ?? this.prefTools(r.info.kindId) ?? this.defaultTools(r)
+        this.pendingTools = null
+        this.tools = new Set(want.filter((t) => valid.includes(t)))
+        this.syncHash()
+        if (this.tools.has('meta')) void this.loadMeta()
+    }
+    validTools(r: AssetDetail): string[] {
+        const geom = r.asset.geometry === true && this.cur?.icon !== true
+        return [...(geom ? ['oval', 'legs', 'size'] : []), ...r.asset.custom.map((c) => `c:${c.id}`), 'json', 'meta']
+    }
+    private defaultTools(r: AssetDetail): string[] {
+        return r.asset.geometry === true ? ['oval', 'legs', 'size'] : []
+    }
+    private prefTools(kindId: string): string[] | null {
+        if (typeof localStorage === 'undefined') return null
+        const v = localStorage.getItem(`hub:tools:${kindId}`)
+        return v == null ? null : v === '' ? [] : v.split(',')
+    }
+    toggleTool(id: string): void {
+        this.tools.has(id) ? this.tools.delete(id) : this.tools.add(id)
+        // a custom editor takes the room: variants fold away (reopen by hand)
+        if (id.startsWith('c:') && this.tools.has(id)) this.variantsOpen = false
+        if (id === 'meta' && this.tools.has('meta')) void this.loadMeta()
+        const kind = this.detail?.info.kindId
+        if (kind != null && typeof localStorage !== 'undefined') localStorage.setItem(`hub:tools:${kind}`, [...this.tools].join(','))
+        this.syncHash()
+    }
+    /** the hash carries the working state: #<assetId>?tools=a,b — shareable, restored on load */
+    private syncHash(): void {
+        if (typeof location === 'undefined' || this.curId == null) return
+        const t = [...this.tools].join(',')
+        const h = `${this.curId}${t === '' ? '' : `?tools=${t}`}`
+        if (location.hash.slice(1) !== h) history.replaceState(null, '', `#${h}`)
+    }
+    /** tabs = kit-declared presets first, then autos for tools no tab covers.
+     *  a tab swaps the enabled tool SET — the canvas underneath never moves */
+    tabsFor(r: AssetDetail): { id: string; tools: string[] }[] {
+        const valid = this.validTools(r)
+        const declared = r.asset.tabs
+            .map((t) => ({ id: t.id, tools: t.tools.filter((x) => valid.includes(x)) }))
+            .filter((t) => t.tools.length > 0)
+        const covered = new Set(declared.flatMap((t) => t.tools))
+        const auto: { id: string; tools: string[] }[] = []
+        const geo = ['oval', 'legs', 'size'].filter((t) => valid.includes(t) && !covered.has(t))
+        // an uncovered rest of exactly [legs] IS the legs tab — never two identical tabs
+        if (geo.length > 0) auto.push({ id: geo.length === 1 && geo[0] === 'legs' ? 'legs' : 'geometry', tools: geo })
+        // legs-only view even when a declared preset covers legs — leg names
+        // read best with the oval out of the way. a kit-declared legs tab wins
+        if (valid.includes('legs') && !declared.some((t) => t.id === 'legs') && !auto.some((t) => t.id === 'legs'))
+            auto.push({ id: 'legs', tools: ['legs'] })
+        for (const c of r.asset.custom) if (!covered.has(`c:${c.id}`)) auto.push({ id: c.id, tools: [`c:${c.id}`] })
+        const data = ['json', 'meta'].filter((t) => !covered.has(t))
+        if (data.length > 0) auto.push({ id: 'data', tools: data })
+        return [...declared, ...auto]
+    }
+    applyTab(tools: string[]): void {
+        const d = this.detail
+        if (d == null) return
+        const valid = this.validTools(d)
+        this.tools = new Set(tools.filter((t) => valid.includes(t)))
+        if (this.tools.has('meta')) void this.loadMeta()
+        if (typeof localStorage !== 'undefined') localStorage.setItem(`hub:tools:${d.info.kindId}`, [...this.tools].join(','))
+        this.syncHash()
+    }
+    movePanel(id: string, x: number, y: number): void {
+        // clamp INSIDE the stage — a card dragged off-screen has no recovery
+        const st = this.overlayHost?.parentElement
+        const mx = st != null ? Math.max(0, st.clientWidth - 80) : Number.MAX_SAFE_INTEGER
+        const my = st != null ? Math.max(0, st.clientHeight - 40) : Number.MAX_SAFE_INTEGER
+        this.panelPos.set(id, { x: Math.min(mx, Math.max(0, x)), y: Math.min(my, Math.max(0, y)) })
+        // same per-move write the variants width uses — tiny blob, no debounce needed
+        if (typeof localStorage !== 'undefined') localStorage.setItem('hub:panelpos', JSON.stringify(Object.fromEntries(this.panelPos)))
+    }
+    toggleVariants(): void {
+        this.variantsOpen = !this.variantsOpen
+    }
+    setVariantsW(w: number): void {
+        this.variantsW = Math.min(420, Math.max(90, w))
+        if (typeof localStorage !== 'undefined') localStorage.setItem('hub:variantsW', String(this.variantsW))
+    }
+
+    // ── docked panels: asset json (read-only) · roll meta sidecar ─────────
+    get assetJson(): string {
+        return this.detail != null ? JSON.stringify(this.detail.asset, null, 2) : ''
+    }
+    async loadMeta(): Promise<void> {
         this.jsonMsg = ''
-        if (this.tab.startsWith('c:')) return // panel host owns that surface
-        if (this.tab === 'asset') {
-            const text = this.detail != null ? JSON.stringify(this.detail.asset, null, 2) : ''
-            runInAction(() => { this.jsonText = text })
-        } else {
-            const r = this.curId != null && this.active != null ? await post('/api/meta', { id: this.curId, name: this.active }) : { text: '' }
-            runInAction(() => { this.jsonText = r.text ?? '' })
-        }
+        const r = this.curId != null && this.active != null ? await post('/api/meta', { id: this.curId, name: this.active }) : { text: '' }
+        runInAction(() => { this.jsonText = r.text ?? '' })
     }
     async saveMeta(): Promise<void> {
-        if (this.tab !== 'meta' || this.curId == null || this.active == null) return
+        if (this.curId == null || this.active == null) return
         const r = await post('/api/meta', { id: this.curId, name: this.active, text: this.jsonText })
         runInAction(() => { this.jsonMsg = r.error != null ? `FAIL: ${r.error}` : 'saved' })
     }
@@ -411,10 +505,14 @@ export class MediaSvc {
     panelApi(c: { kind: string }): Record<string, unknown> {
         const id = this.curId!
         const name = this.active!
+        const made: HTMLElement[] = []
         return {
             assetId: id,
             kindId: c.kind,
             roll: name,
+            /** the PICKED roll's name (null before any pick) — editors that
+             *  target shipped art can warn when the shown roll differs */
+            picked: this.detail?.rolls.find((x) => x.picked)?.name ?? null,
             imgUrl: rollUrl(id, name),
             getMeta: async () => {
                 const r = await post('/api/meta', { id, name })
@@ -425,6 +523,24 @@ export class MediaSvc {
                 const r = await post('/api/meta', { id, name, text: JSON.stringify(data) })
                 if (r.error != null) throw new Error(r.error)
             },
+            // an element covering the DISPLAYED roll image, so an editor can
+            // draw ON the art in place while its card keeps the controls.
+            // null when no image is on stage (audio, empty)
+            stageOverlay: (): HTMLElement | null => {
+                if (this.overlayHost == null || this.active == null || isAud(this.active)) return null
+                const d = document.createElement('div')
+                d.style.position = 'absolute'
+                d.style.inset = '0'
+                d.style.pointerEvents = 'auto'
+                this.overlayHost.appendChild(d)
+                made.push(d)
+                return d
+            },
+            /** host calls it on unmount — panels never leak stage overlays */
+            dropOverlays: (): void => {
+                for (const d of made) d.remove()
+                made.length = 0
+            },
         }
     }
 

package/src/serve/hub-app/media-view.tsx

@@ -1,14 +1,14 @@
-// Media views — topbar, info chips, stage (image/audio + geometry), roll
-// strip, category grid + size-true lineup, drawer (repo-defined custom
-// panels · asset json · roll meta). Feature parity with the deleted vanilla
-// studio SPA; state lives in MediaSvc (components read and call).
+// Media views — topbar, info chips, tools bar (toggleable editor chips),
+// stage (image/audio + tool overlays), variants side bar (resizable), dock
+// (custom panels · asset json · roll meta), category grid + size-true
+// lineup. State lives in MediaSvc (components read and call).
 import { runInAction } from 'mobx'
 import { observer } from 'mobx-react-lite'
 import { useEffect, useRef, useState, type DragEvent, type ReactNode } from 'react'
 import type { HubSt } from './hub-st.ts'
 import { isAud, rollUrl, thumbUrl } from './media-svc.ts'
 import { GeometryLayer, Rectbar, measureBox, type Box } from './geometry-view.tsx'
-import type { CatRow } from './hub-types.ts'
+import type { CatRow, CustomPanelRef } from './hub-types.ts'
 
 const TEX = 1024
 const MIX_UNIT = 24
@@ -53,7 +53,7 @@ export const MediaTopbar = observer(({ app }: { app: HubSt }) => {
                         </select>
                     </label>
                 ) : null}
-                <button className="ghost" title="add files as rolls (or drag-drop onto the strip)" onClick={() => fileRef.current?.click()}>upload</button>
+                <button className="ghost" title="add files as rolls (or drag-drop onto the variants bar)" onClick={() => fileRef.current?.click()}>upload</button>
                 <input type="file" ref={fileRef} multiple style={{ display: 'none' }}
                     accept={m.cur?.media === 'audio' ? '.mp3,.wav,.ogg,.m4a' : '.png,.webp'}
                     onChange={(e) => { if (e.target.files != null) void m.upload(e.target.files); e.target.value = '' }} />
@@ -99,7 +99,14 @@ export const AssetStage = observer(({ app }: { app: HubSt }) => {
     const remeasure = (): void => setBox(measureBox(stageRef.current, imgRef.current))
     useEffect(() => {
         window.addEventListener('resize', remeasure)
-        return () => window.removeEventListener('resize', remeasure)
+        // the stage resizes without a window resize too (dock toggles,
+        // variants bar drag) — overlays must follow the letterboxed image
+        const ro = new ResizeObserver(remeasure)
+        if (stageRef.current != null) ro.observe(stageRef.current)
+        return () => {
+            window.removeEventListener('resize', remeasure)
+            ro.disconnect()
+        }
     }, [])
     const rolls = m.detail?.rolls ?? []
     const genHere = m.curId != null && m.pending.includes(m.curId)
@@ -112,46 +119,100 @@ export const AssetStage = observer(({ app }: { app: HubSt }) => {
         <div className="stageaud" key={`${m.curId}/${shown}`}>🔊<audio controls src={rollUrl(m.curId!, shown)} /></div>
     )
     else content = <img className="roll" src={rollUrl(m.curId!, shown)} ref={imgRef} onLoad={remeasure} />
+    const imgShown = shown != null && !isAud(shown)
+    const measured = imgShown && box != null
     return (
         <div className="stage" ref={stageRef}>
             {content}
-            {shown != null && !isAud(shown) ? <GeometryLayer app={app} box={box} /> : null}
+            {/* overlay root over the letterboxed image — custom panels draw
+                editors HERE via api.stageOverlay() (mask painting in place).
+                ALWAYS mounted so a panel mounting before the image measures
+                still gets its host; it snaps into place on measure */}
+            <div className="ovlhost" ref={(el) => { m.overlayHost = el }}
+                style={measured ? { left: box.x, top: box.y, width: box.w, height: box.h } : { display: 'none' }} />
+            {imgShown ? <GeometryLayer app={app} box={box} /> : null}
             <Rectbar app={app} />
+            <FloatPanels app={app} />
         </div>
     )
 })
 
-export const RollStrip = observer(({ app }: { app: HubSt }) => {
+export const ToolsBar = observer(({ app }: { app: HubSt }) => {
+    const m = app.media
+    const d = m.detail
+    if (d == null || m.curId == null) return null
+    const label = (id: string): string =>
+        id === 'json' ? 'asset json' : id === 'meta' ? 'roll meta' : id.startsWith('c:') ? id.slice(2) : id
+    const cur = [...m.tools].sort().join(',')
+    return (
+        <div className="toolsbar">
+            {/* tabs = tool presets (kit-declared first) — switching swaps the
+                enabled set, the canvas underneath never moves */}
+            {m.tabsFor(d).map((t) => (
+                <button key={t.id} className={`tab${[...t.tools].sort().join(',') === cur ? ' on' : ''}`}
+                    onClick={() => m.applyTab(t.tools)}>{t.id}</button>
+            ))}
+            <span className="tdiv" />
+            <span className="tlab">tools</span>
+            {m.validTools(d).map((id) => (
+                <button key={id} className={`chip${m.tools.has(id) ? ' on' : ''}`} onClick={() => m.toggleTool(id)}>{label(id)}</button>
+            ))}
+            <span className="sp" />
+            <button className="ghost" onClick={() => m.toggleVariants()}>
+                {m.variantsOpen ? 'variants ▸' : `variants (${d.rolls.length}) ◂`}
+            </button>
+        </div>
+    )
+})
+
+// variants live in a THIN resizable side bar — the stage keeps the room.
+// closed = a slim rail with the count; the drag handle resizes; drop = upload
+export const VariantsBar = observer(({ app }: { app: HubSt }) => {
     const m = app.media
     const rolls = m.detail?.rolls ?? []
     const genHere = m.curId != null && m.pending.includes(m.curId)
+    const drag = useRef<{ px: number; w: number } | null>(null)
     const onDrop = (e: DragEvent<HTMLDivElement>): void => { e.preventDefault(); void m.upload(e.dataTransfer.files) }
-    if (rolls.length === 0) return (
-        <div className="strip" onDragOver={(e) => e.preventDefault()} onDrop={onDrop}>
-            {genHere ? <div className="vig gen"><div className="spin" />generating…</div>
-                : <div className="ph">{m.cur?.manual === true ? 'no files — upload (or drag-drop here)' : 'no rolls — hit Generate'}</div>}
+    if (m.curId == null) return null
+    if (!m.variantsOpen) return (
+        <div className="vbar closed" title="open the variants bar" onClick={() => m.toggleVariants()}>
+            <span className="vcount">{rolls.length}</span>◂
         </div>
     )
     return (
-        <div className="strip" onDragOver={(e) => e.preventDefault()} onDrop={onDrop}>
-            {/* rolls are newest-first; generation lands where the eye is */}
-            {genHere ? <div className="vig gen"><div className="spin" />generating…</div> : null}
-            {rolls.map((x) => (
-                <div key={x.name}
-                    className={`vig${isAud(x.name) ? ' aud' : ''}${x.name === m.active ? ' active' : ''}${x.picked ? ' picked' : ''}${x.alt ? ' alt' : ''}`}
-                    // hover-preview stays image-only — swapping an <audio> mid-playback would cut the sound
-                    onMouseEnter={() => { if (!isAud(x.name)) runInAction(() => { m.hover = x.name }) }}
-                    onMouseLeave={() => runInAction(() => { m.hover = null })}
-                    onClick={() => m.setActive(x.name)}>
-                    {isAud(x.name) ? <>🔊<audio controls src={rollUrl(m.curId!, x.name)} /></> : <img src={rollUrl(m.curId!, x.name)} />}
-                    {x.picked ? <span className="st">★</span> : null}
-                    <div className="btns">
-                        <button className="b-pick" onClick={(e) => { e.stopPropagation(); void m.pick(x.name) }}>pick</button>
-                        <button className="b-alt" onClick={(e) => { e.stopPropagation(); void m.alt(x.name) }}>alt</button>
-                        <button className="b-del" onClick={(e) => { e.stopPropagation(); void m.discard(x.name) }}>✕</button>
+        <div className="vbar" style={{ width: m.variantsW }} onDragOver={(e) => e.preventDefault()} onDrop={onDrop}>
+            <div className="vhandle"
+                onPointerDown={(e) => {
+                    drag.current = { px: e.clientX, w: m.variantsW }
+                    ;(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId)
+                }}
+                onPointerMove={(e) => {
+                    const s = drag.current
+                    if (s != null) m.setVariantsW(s.w + (s.px - e.clientX))
+                }}
+                onPointerUp={() => { drag.current = null }} />
+            <div className="vscroll">
+                {genHere ? <div className="vig gen"><div className="spin" />generating…</div> : null}
+                {rolls.length === 0 && !genHere
+                    ? <div className="ph">{m.cur?.manual === true ? 'no files — drop here' : 'no rolls'}</div> : null}
+                {/* rolls are newest-first; generation lands where the eye is */}
+                {rolls.map((x) => (
+                    <div key={x.name}
+                        className={`vig${isAud(x.name) ? ' aud' : ''}${x.name === m.active ? ' active' : ''}${x.picked ? ' picked' : ''}${x.alt ? ' alt' : ''}`}
+                        // hover-preview stays image-only — swapping an <audio> mid-playback would cut the sound
+                        onMouseEnter={() => { if (!isAud(x.name)) runInAction(() => { m.hover = x.name }) }}
+                        onMouseLeave={() => runInAction(() => { m.hover = null })}
+                        onClick={() => m.setActive(x.name)}>
+                        {isAud(x.name) ? <>🔊<audio controls src={rollUrl(m.curId!, x.name)} /></> : <img src={rollUrl(m.curId!, x.name)} />}
+                        {x.picked ? <span className="st">★</span> : null}
+                        <div className="btns">
+                            <button className="b-pick" onClick={(e) => { e.stopPropagation(); void m.pick(x.name) }}>pick</button>
+                            <button className="b-alt" onClick={(e) => { e.stopPropagation(); void m.alt(x.name) }}>alt</button>
+                            <button className="b-del" onClick={(e) => { e.stopPropagation(); void m.discard(x.name) }}>✕</button>
+                        </div>
                     </div>
-                </div>
-            ))}
+                ))}
+            </div>
         </div>
     )
 })
@@ -243,70 +304,135 @@ export const CatGrid = observer(({ app }: { app: HubSt }) => {
     )
 })
 
-// ── drawer: custom panels · asset json (read-only) · roll meta ───────────
-const PanelHost = observer(({ app }: { app: HubSt }) => {
+// ── dock: the active tools' panels, side by side under the stage ─────────
+const PanelHost = observer(({ app, c }: { app: HubSt; c: CustomPanelRef }) => {
     const m = app.media
     const ref = useRef<HTMLDivElement>(null)
-    const c = m.detail?.asset.custom.find((x) => `c:${x.id}` === m.tab) ?? null
-    const key = `${m.curId}|${m.active}|${c?.id ?? ''}`
+    const key = `${m.curId}|${m.active}|${c.id}`
     useEffect(() => {
         const host = ref.current
         if (host == null) return
-        if (c == null || m.curId == null || m.active == null) {
-            host.textContent = c == null ? 'panel not on this asset' : 'no roll selected — generate or pick one first'
+        if (m.curId == null || m.active == null) {
+            host.textContent = 'no roll selected — generate or pick one first'
             return
         }
         let dead = false
         let mod: Record<string, unknown> | null = null
+        const api = m.panelApi(c)
         void (async () => {
             try {
                 // repo-defined editor module, served by the media API
                 mod = (await import(`/media/${c.url}`)) as Record<string, unknown>
                 if (typeof mod.mount !== 'function') throw new Error(`${c.url} must export mount(el, api)`)
-                if (!dead) await (mod.mount as (el: HTMLElement, api: unknown) => unknown)(host, m.panelApi(c))
+                if (!dead) await (mod.mount as (el: HTMLElement, api: unknown) => unknown)(host, api)
             } catch (e) {
-                host.textContent = `panel FAILED: ${(e as Error).message}` // loud in the drawer, never blank
+                host.textContent = `panel FAILED: ${(e as Error).message}` // loud in the dock, never blank
             }
         })()
         return () => {
             dead = true
             if (typeof mod?.unmount === 'function') void (mod.unmount as () => unknown)()
+            ;(api.dropOverlays as () => void)()
             host.innerHTML = ''
         }
     }, [key])
     return <div ref={ref} />
 })
 
-export const Drawer = observer(({ app }: { app: HubSt }) => {
+// floating panels sit ON the canvas (drag by the title bar), so toggling
+// them never reflows the stage — canvas size/position survive tab switches
+const FloatPanel = observer(({ app, id, title, dx, dy, anchor, children }: {
+    app: HubSt; id: string; title: string; dx: number; dy: number; anchor?: 'tl' | 'bl'; children: ReactNode
+}) => {
     const m = app.media
-    const customs = m.detail?.asset.custom ?? []
-    const isCustom = m.tab.startsWith('c:')
+    const ref = useRef<HTMLDivElement>(null)
+    const drag = useRef<{ px: number; py: number; x: number; y: number } | null>(null)
+    const pos = m.panelPos.get(id) ?? null
+    // a restored position may come from a bigger stage — re-clamp through
+    // movePanel on first layout and on every stage resize, so a card is
+    // never restored off screen (RO fires once at observe)
+    useEffect(() => {
+        const st = ref.current?.parentElement
+        if (st == null) return
+        const ro = new ResizeObserver(() => {
+            const p = m.panelPos.get(id)
+            if (p != null) m.movePanel(id, p.x, p.y)
+        })
+        ro.observe(st)
+        return () => ro.disconnect()
+    }, [id])
+    // no stored position: the anchor decides the corner (bl = bottom-left),
+    // both corners keep the anti-collision cascade; the first drag converts
+    // to a stored left/top seeded from the measured rect
+    const style = pos != null ? { left: pos.x, top: pos.y }
+        : anchor === 'bl' ? { left: dx, bottom: dy } : { left: dx, top: dy }
     return (
-        <div className="drawer">
-            <div className="tabs">
-                {/* customs lead: they are the working surfaces, json tabs are diagnostics */}
-                {[...customs.map((c) => ({ id: `c:${c.id}`, label: c.id })), { id: 'asset', label: 'asset' }, { id: 'meta', label: 'roll meta' }].map((t) => (
-                    <button key={t.id} className={m.tab === t.id ? 'on' : ''} onClick={() => m.setTab(t.id)}>{t.label}</button>
-                ))}
-                <span className="sp" />
-                {/* names the drawer, not the tab set (a sole custom panel is the default content) */}
-                <button className="ghost" onClick={() => runInAction(() => { m.drawerOpen = !m.drawerOpen })}>drawer ▾</button>
+        <div className="fpanel" style={style} ref={ref}>
+            <div className="fhead"
+                onPointerDown={(e) => {
+                    const el = ref.current
+                    const st = el?.parentElement
+                    if (el == null || st == null) return
+                    const cur = pos ?? {
+                        x: el.getBoundingClientRect().left - st.getBoundingClientRect().left,
+                        y: el.getBoundingClientRect().top - st.getBoundingClientRect().top,
+                    }
+                    drag.current = { px: e.clientX, py: e.clientY, x: cur.x, y: cur.y }
+                    ;(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId)
+                }}
+                onPointerMove={(e) => {
+                    const s = drag.current
+                    if (s != null) m.movePanel(id, s.x + e.clientX - s.px, s.y + e.clientY - s.py)
+                }}
+                onPointerUp={() => { drag.current = null }}>
+                <span>{title}</span>
+                <button className="x" title="disable this tool" onClick={() => m.toggleTool(id)}>✕</button>
             </div>
-            {m.drawerOpen ? (
-                <div id="drawerbody" className="on">
-                    {isCustom ? <PanelHost app={app} /> : (
-                        <div>
-                            <textarea id="jsonta" spellCheck={false} readOnly={m.tab === 'asset'} value={m.jsonText}
-                                onChange={(e) => runInAction(() => { m.jsonText = e.target.value })} />
-                            <div className="jrow">
-                                {/* kind/asset structure is git-reviewed TS — read-only here */}
-                                <button disabled={m.tab === 'asset'} onClick={() => void m.saveMeta()}>save</button>
-                                <span className="jmsg">{m.jsonMsg}</span>
-                            </div>
-                        </div>
-                    )}
-                </div>
-            ) : null}
+            <div className="fbody">{children}</div>
         </div>
     )
 })
+
+export const FloatPanels = observer(({ app }: { app: HubSt }) => {
+    const m = app.media
+    const customs = (m.detail?.asset.custom ?? []).filter((c) => m.tools.has(`c:${c.id}`))
+    const showJson = m.tools.has('json')
+    const showMeta = m.tools.has('meta')
+    if (m.curId == null) return null
+    let i = -1
+    const at = (): { dx: number; dy: number } => { i += 1; return { dx: 14 + i * 34, dy: 14 + i * 34 } }
+    return (
+        <>
+            {customs.map((c) => {
+                const p = at()
+                return (
+                    <FloatPanel app={app} key={c.id} id={`c:${c.id}`} title={c.id} dx={p.dx} dy={p.dy} anchor={c.anchor}>
+                        <PanelHost app={app} c={c} />
+                    </FloatPanel>
+                )
+            })}
+            {showJson ? (() => {
+                const p = at()
+                return (
+                    <FloatPanel app={app} id="json" title="asset json (read-only)" dx={p.dx} dy={p.dy}>
+                        {/* kind/asset structure is git-reviewed TS — read-only here */}
+                        <textarea className="jsonta" spellCheck={false} readOnly value={m.assetJson} />
+                    </FloatPanel>
+                )
+            })() : null}
+            {showMeta ? (() => {
+                const p = at()
+                return (
+                    <FloatPanel app={app} id="meta" title="roll meta" dx={p.dx} dy={p.dy}>
+                        <textarea className="jsonta" spellCheck={false} value={m.jsonText}
+                            onChange={(e) => runInAction(() => { m.jsonText = e.target.value })} />
+                        <div className="jrow">
+                            <button onClick={() => void m.saveMeta()}>save</button>
+                            <span className="jmsg">{m.jsonMsg}</span>
+                        </div>
+                    </FloatPanel>
+                )
+            })() : null}
+        </>
+    )
+})

package/src/start-repo.ts

@@ -148,6 +148,7 @@ export async function startRepo(name: string, opts: StartOpts = {}): Promise<num
         }
         // last line, so what to do next is the last thing read
         if (unscaffolded) console.error(`next: scaffold the app in ${dir} (package.json), then \`shipkit init\` inside it — the commit gates arm on the first ci run`)
+        else console.error(`ok: ${name} is ready — ${await summarize(dir)}`)
     }
     // a child process cannot cd its parent shell, so the dir goes to stdout
     // and a sourced wrapper does the move. Without one, say the move out
@@ -157,3 +158,20 @@ export async function startRepo(name: string, opts: StartOpts = {}): Promise<num
     console.log(dir)
     return 0
 }
+
+/** the one closing fact: what this repo IS now, measured rather than
+ *  narrated. Everything a repo still needs is reported by the gate, about a
+ *  repo with code in it, on the day it matters */
+async function summarize(dir: string): Promise<string> {
+    const git = runner('git', dir, 30_000)
+    const files = (await git(['ls-files'])).out.trim().split('\n').filter((l) => l !== '').length
+    const head = await git(['log', '-1', '--format=%h'])
+    // git merges stderr into stdout, so a missing remote answers with its
+    // error text: only a zero exit means that output is a url
+    const origin = await git(['remote', 'get-url', 'origin'])
+    const pushed = (await git(['rev-parse', '--verify', '@{upstream}'])).code === 0
+    const bits = [head.code === 0 ? `${files} file(s) committed` : 'not committed yet']
+    if (origin.code === 0) bits.push(pushed ? `pushed to ${origin.out.trim()}` : `remote wired, nothing pushed yet`)
+    else bits.push('local only, no remote')
+    return bits.join(', ')
+}