@marver-design/marver 0.2.0

package/src/client/shell/styles.css

@@ -0,0 +1,508 @@
+/* Theme-aware glass shell. Tokens live on .sh-app; .sh-app.dark overrides them.
+   Light board -> light glass chrome over a paper canvas; dark board -> dark glass
+   chrome over a dark canvas. Frames are cards; chrome is glass. */
+
+.sh-app {
+  --ground: #e7e9ef; --dot: #c9cbd5;
+  --accent: #0088ff; --accent-ring: rgba(0, 136, 255, .2); --beam: rgba(0, 136, 255, .42); --beam-blur: 6px; --beam-bottom: -13px; --beam-h: 12px; --beam-inset: 12%; --edge-accent: rgba(0, 136, 255, .8); --inner-tint: rgba(0, 136, 255, .13); --tip-bg: #18181b; --tip-ink: #fafafa; --accent-wash: rgba(0, 136, 255, .07);
+
+  --glass: rgba(255, 255, 255, .64);
+  --glass-brd: rgba(24, 24, 27, .1);
+  --glass-ink: #18181b;
+  --glass-ink-2: rgba(24, 24, 27, .66);
+  --glass-ink-3: rgba(24, 24, 27, .4);
+  --glass-hover: rgba(24, 24, 27, .06);
+  --glass-accent: #0077e6;
+  --glass-accent-bg: rgba(0, 136, 255, .13);
+  --glass-good: #0e6b57;
+  --glass-warn: #7a4a00;
+  --shadow-glass: inset 0 1px 0 rgba(255, 255, 255, .65), 0 1px 2px rgba(24, 24, 27, .05), 0 4px 12px -6px rgba(24, 24, 27, .12);
+
+  --node-bg: #fff; --node-brd: #dddee5;
+  --head-bg: rgba(255, 255, 255, .55);
+  --head-sheen: linear-gradient(100deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .1) 45%, rgba(255, 255, 255, .45));
+  --edge-light: linear-gradient(155deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .2) 30%, rgba(24, 24, 27, .04) 65%, rgba(255, 255, 255, .55));
+  --head-ink: #18181b; --head-dim: rgba(24, 24, 27, .4);
+  --card-err-ink: #b3261e; --card-err-bg: #fceceb;
+  --card-warn-ink: #7a4a00; --card-warn-bg: #fdf3e1;
+  --interact: #db35f2; --interact-ring: rgba(219, 53, 242, .16);
+  --interact-strong: rgba(219, 53, 242, 1); --interact-soft: rgba(234, 141, 255, .95);
+  --interact-deep: rgba(176, 47, 194, .85); --interact-spark: rgba(255, 255, 255, .95);
+
+  --r-node: 10px; --r-panel: 24px; --edge: 10px;
+  --blur: blur(20px) saturate(150%);
+  --shadow-node: 0 1px 2px rgba(24, 24, 27, .05);   /* tailwind shadow-sm: present, not loud */
+  --morph: .26s cubic-bezier(.32, .72, .35, 1);
+}
+.sh-app.dark {
+  --ground: #1b1c23; --dot: #35363f;
+  --accent: #0088ff; --accent-ring: rgba(0, 136, 255, .32); --beam: rgba(0, 136, 255, .5); --beam-blur: 3px; --beam-bottom: -13px; --beam-h: 16px; --beam-inset: 20%; --edge-accent: rgba(92, 179, 255, .85); --inner-tint: rgba(92, 179, 255, .16); --tip-bg: #f4f4f5; --tip-ink: #18181b; --accent-wash: rgba(0, 136, 255, .14);
+
+  --glass: rgba(12, 12, 17, .72);
+  --glass-brd: rgba(255, 255, 255, .16);
+  --glass-ink: #f5f5f7;
+  --glass-ink-2: rgba(245, 245, 247, .64);
+  --glass-ink-3: rgba(245, 245, 247, .4);
+  --glass-hover: rgba(255, 255, 255, .1);
+  --glass-accent: #5cb3ff;
+  --glass-accent-bg: rgba(0, 136, 255, .28);
+  --glass-good: #7fe0c3;
+  --glass-warn: #ffd9a0;
+  --shadow-glass: inset 0 1px 0 rgba(255, 255, 255, .09), 0 1px 2px rgba(10, 10, 16, .2), 0 4px 14px -8px rgba(10, 10, 16, .4);
+
+  --node-bg: #0f1015; --node-brd: #2c2d38;
+  --head-bg: rgba(22, 23, 30, .6);
+  --head-sheen: linear-gradient(100deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .015) 45%, rgba(255, 255, 255, .06));
+  --edge-light: linear-gradient(155deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .05) 30%, rgba(255, 255, 255, .02) 65%, rgba(255, 255, 255, .16));
+  --head-ink: #ececf1; --head-dim: rgba(236, 236, 241, .42);
+  --card-err-ink: #ff9d94; --card-err-bg: #2a1512;
+  --card-warn-ink: #ffd9a0; --card-warn-bg: #2a2113;
+  --interact: #ea8dff; --interact-ring: rgba(219, 53, 242, .3);
+  --interact-strong: rgba(219, 53, 242, 1); --interact-soft: rgba(234, 141, 255, .95);
+  --interact-deep: rgba(203, 48, 224, .8); --interact-spark: rgba(255, 255, 255, .9);
+
+  --shadow-node: 0 1px 2px rgba(0, 0, 0, .35);   /* shadow-sm, alpha raised to read on dark */
+}
+
+@property --ground { syntax: '<color>'; inherits: true; initial-value: #e7e9ef; }
+@property --dot { syntax: '<color>'; inherits: true; initial-value: #c9cbd5; }
+@property --glass { syntax: '<color>'; inherits: true; initial-value: rgba(255, 255, 255, .64); }
+@property --glass-brd { syntax: '<color>'; inherits: true; initial-value: rgba(24, 24, 27, .1); }
+@property --glass-ink { syntax: '<color>'; inherits: true; initial-value: #18181b; }
+@property --glass-ink-2 { syntax: '<color>'; inherits: true; initial-value: rgba(24, 24, 27, .66); }
+@property --glass-ink-3 { syntax: '<color>'; inherits: true; initial-value: rgba(24, 24, 27, .4); }
+@property --glass-hover { syntax: '<color>'; inherits: true; initial-value: rgba(24, 24, 27, .06); }
+@property --node-bg { syntax: '<color>'; inherits: true; initial-value: #ffffff; }
+@property --node-brd { syntax: '<color>'; inherits: true; initial-value: #dddee5; }
+@property --head-bg { syntax: '<color>'; inherits: true; initial-value: rgba(255, 255, 255, .55); }
+@property --head-ink { syntax: '<color>'; inherits: true; initial-value: #18181b; }
+@property --head-dim { syntax: '<color>'; inherits: true; initial-value: rgba(24, 24, 27, .4); }
+@property --tip-bg { syntax: '<color>'; inherits: true; initial-value: #18181b; }
+@property --tip-ink { syntax: '<color>'; inherits: true; initial-value: #fafafa; }
+@property --accent { syntax: '<color>'; inherits: true; initial-value: #0088ff; }
+@property --accent-ring { syntax: '<color>'; inherits: true; initial-value: rgba(0, 136, 255, .2); }
+@property --beam { syntax: '<color>'; inherits: true; initial-value: rgba(0, 136, 255, .42); }
+@property --edge-accent { syntax: '<color>'; inherits: true; initial-value: rgba(0, 136, 255, .8); }
+@property --inner-tint { syntax: '<color>'; inherits: true; initial-value: rgba(0, 136, 255, .13); }
+@property --accent-wash { syntax: '<color>'; inherits: true; initial-value: rgba(0, 136, 255, .07); }
+@property --glass-accent { syntax: '<color>'; inherits: true; initial-value: #0077e6; }
+@property --glass-accent-bg { syntax: '<color>'; inherits: true; initial-value: rgba(0, 136, 255, .13); }
+
+/* interact mode: the whole shell shifts to the interactive purple - one token override,
+   and every accent-derived surface (mark, sidebar actives, selection bar, beams, rings,
+   handles, device chips) follows without knowing the mode exists */
+.sh-app.interacting {
+  --accent: #db35f2; --accent-ring: rgba(219, 53, 242, .2); --beam: rgba(219, 53, 242, .42);
+  --edge-accent: rgba(219, 53, 242, .8); --inner-tint: rgba(219, 53, 242, .13);
+  --accent-wash: rgba(219, 53, 242, .07);
+  --glass-accent: #b02fc2; --glass-accent-bg: rgba(219, 53, 242, .13);
+}
+.sh-app.dark.interacting {
+  --accent: #db35f2; --accent-ring: rgba(219, 53, 242, .32); --beam: rgba(219, 53, 242, .5);
+  --edge-accent: rgba(234, 141, 255, .85); --inner-tint: rgba(234, 141, 255, .16);
+  --accent-wash: rgba(219, 53, 242, .14);
+  --glass-accent: #ea8dff; --glass-accent-bg: rgba(219, 53, 242, .28);
+}
+
+* { box-sizing: border-box }
+html, body, #root { height: 100%; margin: 0 }
+body { font-family: -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow: hidden }
+button { font-family: inherit }
+button svg { pointer-events: none }   /* event targets stay on the button - pan exclusion depends on it */
+@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important } }
+
+.sh-app { position: relative; height: 100%; color: var(--glass-ink); outline: none;
+  transition: --accent .4s ease, --accent-ring .4s ease, --beam .4s ease,
+    --edge-accent .4s ease, --inner-tint .4s ease, --accent-wash .4s ease,
+    --glass-accent .4s ease, --glass-accent-bg .4s ease,
+    --ground .4s ease, --dot .4s ease, --glass .4s ease, --glass-brd .4s ease,
+    --glass-ink .4s ease, --glass-ink-2 .4s ease, --glass-ink-3 .4s ease,
+    --glass-hover .4s ease, --node-bg .4s ease, --node-brd .4s ease,
+    --head-bg .4s ease, --head-ink .4s ease, --head-dim .4s ease,
+    --tip-bg .4s ease, --tip-ink .4s ease }
+.sh-canvas { width: 100% !important; height: 100% !important;
+  background-color: var(--ground) }
+/* world-space dot grid: size/position/alpha driven per-frame from the transform */
+.sh-canvas::before { content: ''; position: absolute; inset: 0; pointer-events: none;
+  background-image: radial-gradient(var(--dot) 1px, transparent 1px);
+  background-size: var(--grid-size, 20px 20px);
+  background-position: var(--grid-pos, 0 0);
+  opacity: var(--grid-alpha, 1) }
+.sh-content { will-change: auto }
+#sh-world { position: relative; width: 1px; height: 1px }
+#sh-world.sh-gesturing iframe { pointer-events: none }            /* law G-4 */
+.sh-gesturing .sh-content { will-change: transform }              /* law G-3: gesture-scoped only */
+/* preset transitions: armed by animateLayout() around device/tidy mutations - nodes ease
+   to their new frame on the same 320ms ease-out the camera fit animates with */
+#sh-world.sh-preset .sh-node { transition: transform .32s cubic-bezier(.25,.46,.45,.94),
+  width .32s cubic-bezier(.25,.46,.45,.94), height .32s cubic-bezier(.25,.46,.45,.94) }
+#sh-world.sh-preset .sh-node-body,
+#sh-world.sh-preset .sh-node iframe { transition: width .32s cubic-bezier(.25,.46,.45,.94),
+  height .32s cubic-bezier(.25,.46,.45,.94) }
+
+/* cursor conventions (Figma): arrow everywhere; grab only while space is held */
+body.sh-space .sh-canvas { cursor: grab }
+body.sh-space.sh-panning .sh-canvas { cursor: grabbing }
+body.sh-space .sh-node { pointer-events: none }                   /* space-drag pans from anywhere */
+
+/* frame nodes: theme-aware cards with a glass header strip. Each node re-declares its
+   card tokens from its OWN theme, so a dark frame on a light board wears a dark header
+   (easier on the eyes than light chrome over a dark page) - and vice versa. */
+.sh-node { position: absolute; top: 0; left: 0; border-radius: var(--r-node); background: transparent;
+  border: 1px solid var(--node-brd); box-shadow: var(--shadow-node); display: flex; flex-direction: column;
+  transition: border-color .3s ease, --node-bg .4s ease, --node-brd .4s ease,
+    --head-bg .4s ease, --head-ink .4s ease, --head-dim .4s ease }
+.sh-node[data-theme="light"] {
+  --node-bg: #fff; --node-brd: #dddee5;
+  --head-bg: rgba(255, 255, 255, .55);
+  --head-sheen: linear-gradient(100deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .1) 45%, rgba(255, 255, 255, .45));
+  --head-ink: #18181b; --head-dim: rgba(24, 24, 27, .4);
+}
+.sh-node[data-theme="dark"] {
+  --node-bg: #0f1015; --node-brd: #2c2d38;
+  --head-bg: rgba(22, 23, 30, .6);
+  --head-sheen: linear-gradient(100deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .015) 45%, rgba(255, 255, 255, .06));
+  --head-ink: #ececf1; --head-dim: rgba(236, 236, 241, .42);
+}
+/* selection + interact indicators live in world space but keep constant SCREEN width
+   via --sh-inv (1/zoom): 2 screen px at every zoom level */
+.sh-node.sel { border-color: var(--accent);
+  outline: calc(2px * var(--sh-inv, 1)) solid var(--accent);
+  outline-offset: calc(-1px * var(--sh-inv, 1));
+  box-shadow: 0 0 0 calc(4px * var(--sh-inv, 1)) var(--accent-ring), var(--shadow-node) }
+.sh-node-head { height: 28px; display: flex; align-items: center; gap: 8px; padding: 0 11px;
+  font-size: 11px; color: var(--head-dim);
+  border-bottom: 1px solid var(--node-brd); cursor: default; user-select: none;
+  border-radius: var(--r-node) var(--r-node) 0 0;
+  background-color: var(--head-bg); background-image: var(--head-sheen);
+  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur) }
+.sh-node-head .id { font-weight: 600; color: var(--head-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
+.sh-node-head .dim { margin-left: auto; color: var(--head-dim); flex: none; font-variant-numeric: tabular-nums }
+.sh-node-body { position: relative; background: var(--node-bg); border-radius: 0 0 var(--r-node) var(--r-node); overflow: hidden }
+.sh-node iframe { border: 0; display: block }
+.sh-overlay { position: absolute; inset: 0; cursor: default }
+.sh-node.interact { border-color: var(--interact);
+  outline: calc(2px * var(--sh-inv, 1)) solid var(--interact);
+  outline-offset: calc(-1px * var(--sh-inv, 1));
+  box-shadow: 0 0 0 calc(4px * var(--sh-inv, 1)) var(--interact-ring), var(--shadow-node) }
+
+.sh-handle { position: absolute; background: var(--node-bg); border: 1.5px solid var(--accent); border-radius: 4px; z-index: 3;
+  transform: scale(var(--sh-inv, 1)) }   /* constant screen size; hit target grows as you zoom out */
+.sh-handle.e { right: -5px; top: 50%; width: 9px; height: 26px; margin-top: -13px; cursor: ew-resize }
+.sh-handle.s { bottom: -5px; left: 50%; width: 26px; height: 9px; margin-left: -13px; cursor: ns-resize }
+.sh-handle.se { right: -5px; bottom: -5px; width: 11px; height: 11px; cursor: nwse-resize }
+
+/* glass surfaces share one recipe; chrome text is never selectable (shift-click = multi-select) */
+.sh-ctx, .sh-panel, .sh-fab, .sh-pill, .sh-pill-fab, .sh-menu, .sh-banner, .sh-toast {
+  background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
+  border: 1px solid var(--glass-brd); box-shadow: var(--shadow-glass); position: relative;
+  user-select: none; -webkit-user-select: none }
+
+/* edge light: a 1px gradient ring over the border, so glass reads as glass even
+   with nothing behind it to blur (masked-border technique) */
+.sh-ctx::after, .sh-panel::after, .sh-fab::after, .sh-pill::after, .sh-pill-fab::after,
+.sh-menu::after, .sh-banner::after, .sh-toast::after, .sh-node::after {
+  content: ''; position: absolute; inset: -1px; padding: 1px; border-radius: inherit;
+  background: var(--edge-light); pointer-events: none;
+  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  mask-composite: exclude }
+.sh-node.sel::after { display: none }   /* the accent ring owns the selected edge */
+@property --sh-rot { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
+/* one orbiting light, two intensities: a faint shimmer riding ON the solid border
+   (::before, low opacity over the still outline) and the clear glow just outside
+   (::after, lightly blurred, sharp glints). Same duration = perfectly in sync. */
+.sh-node.interact::before, .sh-node.interact::after {
+  content: ''; position: absolute; border-radius: inherit; pointer-events: none;
+  background: conic-gradient(from var(--sh-rot),
+    var(--interact-strong) 0deg,
+    var(--interact-strong) 105deg,
+    var(--interact-spark) 135deg,
+    var(--interact-strong) 165deg,
+    var(--interact-strong) 285deg,
+    var(--interact-spark) 315deg,
+    var(--interact-strong) 345deg,
+    var(--interact-strong) 360deg);
+  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  mask-composite: exclude;
+  animation: sh-orbit 4.2s linear infinite;
+}
+.sh-node.interact::before {
+  inset: calc(-2.5px * var(--sh-inv, 1));
+  padding: calc(2.5px * var(--sh-inv, 1));
+  border-radius: calc(var(--r-node) + 2px * var(--sh-inv, 1));
+  opacity: .6;
+}
+.sh-node.interact::after {
+  inset: calc(-9px * var(--sh-inv, 1));
+  padding: calc(5px * var(--sh-inv, 1));
+  border-radius: calc(var(--r-node) + 8px * var(--sh-inv, 1));
+  filter: blur(calc(2px * var(--sh-inv, 1)));
+  opacity: .95;
+}
+@keyframes sh-orbit { to { --sh-rot: 360deg } }
+@media (prefers-reduced-motion: reduce) {
+  .sh-node.interact::before, .sh-node.interact::after { animation: none } }
+
+/* selection toolbar: screen-space overlay, constant size at any zoom */
+.sh-ctx { position: absolute; display: flex; align-items: center; gap: 1px;
+  border-radius: 999px; padding: 4px; z-index: 9; white-space: nowrap;
+  /* a teeny inner glow hugging the bottom edge - 8px tall, cannot climb into the body */
+  background-image: radial-gradient(46% 8px at 50% calc(100% + 1px), var(--inner-tint), transparent 80%) }
+/* the accent lives ON the border line, not in the body: layered into the masked 1px
+   edge ring, so the bottom border glows blue at center and fades along the arc -
+   the bar's surface stays untouched */
+.sh-ctx::after {
+  background:
+    radial-gradient(52% 16px at 50% 100%, var(--edge-accent), transparent 75%),
+    var(--edge-light) }
+/* connection glow: a soft accent beam under the middle ~60% of the bar - deepest and
+   tallest at the center, fading to nothing at the edges - ties the bar to its frame */
+.sh-ctx::before { content: ''; position: absolute; left: var(--beam-inset); right: var(--beam-inset);
+  bottom: var(--beam-bottom); height: var(--beam-h);
+  background: radial-gradient(50% 100% at 50% 0%, var(--beam), transparent 70%);
+  filter: blur(var(--beam-blur, 4px)); pointer-events: none; z-index: -1 }
+.sh-ctx button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 28px;
+  font: 600 12px -apple-system, system-ui, sans-serif; color: var(--glass-ink-2); background: none; border: 0;
+  padding: 0 11px; border-radius: 999px; cursor: pointer }
+.sh-ctx button.icon { min-width: 28px; width: 30px; padding: 0 }
+.sh-ctx .cnt { font: 600 11px -apple-system, system-ui, sans-serif; font-variant-numeric: tabular-nums; color: var(--glass-ink-2); background: var(--glass-hover);
+  border-radius: 999px; min-width: 22px; height: 22px; display: inline-flex; align-items: center;
+  justify-content: center; padding: 0 6px; margin: 0 2px 0 3px }
+.sh-ctx button.on { background: var(--glass-accent-bg); color: var(--glass-accent) }
+.sh-ctx button:hover:not(.on) { background: var(--glass-hover); color: var(--glass-ink) }
+.sh-ctx .sep { width: 1px; height: 14px; background: var(--glass-brd); margin: 0 3px }
+
+/* error / missing cards (inside the frame body) */
+.sh-card { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; gap: 6px;
+  padding: 14px; font-size: 12px; background: var(--node-bg) }
+.sh-card.err { color: var(--card-err-ink); background: var(--card-err-bg) }
+.sh-card.warn { color: var(--card-warn-ink); background: var(--card-warn-bg) }
+.sh-card b { font-size: 12px }
+.sh-card .msg { white-space: pre-wrap; overflow: auto }
+.sh-card .dim { opacity: .55 }
+.sh-card .row { display: flex; gap: 6px; margin-top: auto }
+.sh-card button { display: inline-flex; align-items: center; gap: 5px; font: 600 11px -apple-system, system-ui, sans-serif;
+  border: 1px solid currentColor; background: transparent; color: inherit; border-radius: 999px;
+  padding: 4px 10px; cursor: pointer }
+
+/* shared icon button (glass surfaces) */
+.sh-ibtn { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px;
+  border: 0; background: none; color: var(--glass-ink-3); cursor: pointer }
+.sh-ibtn:hover { background: var(--glass-hover); color: var(--glass-ink) }
+
+/* floating glass panel; collapses into the fab with a scale-fade morph */
+.sh-panel { position: absolute; left: var(--edge); top: var(--edge); width: 236px;
+  max-height: calc(100% - 2 * var(--edge)); z-index: 10;
+  border-radius: var(--r-panel); padding: 10px; display: flex; flex-direction: column;
+  font-size: 13px; color: var(--glass-ink);
+  transform-origin: 22px 22px; transition: transform var(--morph), opacity .2s ease }
+.sh-panel.closed { transform: scale(.16); opacity: 0; pointer-events: none }
+.sh-panel-top { display: flex; align-items: center; gap: 8px; padding: 2px 2px 8px 8px }
+.sh-panel-top .mark { flex: none; color: var(--accent) }
+.sh-panel-top .name { font-weight: 700; font-size: 15px; flex: 1; letter-spacing: -0.01em }
+.sh-panel-scroll { overflow-y: auto; min-height: 0; padding-bottom: 2px; scrollbar-width: thin;
+  scrollbar-color: var(--glass-ink-3) transparent }
+/* Sidebar list system (macOS-sidebar conventions): every row is 28px tall with an
+   8px radius and a fixed 16px icon column, so all labels share one vertical line.
+   Hierarchy is carried by section labels + indent + ink - never bold-on-bold:
+   boards and scene folders read at 500/primary, frames at 400/secondary one indent
+   in, counts and idle icons tertiary. Actives use the accent wash + accent ink. */
+.sh-panel .hd { font: 600 11px -apple-system, system-ui, sans-serif; letter-spacing: .02em;
+  color: var(--glass-ink-3); margin: 16px 10px 5px }
+.sh-panel .hd:first-child { margin-top: 2px }
+.sh-panel .it { width: 100%; height: 28px; padding: 0 8px; border-radius: 8px; color: var(--glass-ink);
+  font: 500 13px -apple-system, system-ui, sans-serif; background: none; border: 0; cursor: pointer; text-align: left;
+  display: flex; align-items: center; gap: 7px; margin-bottom: 1px }
+/* a scene holding a selected frame keeps a half-strength wash (Xcode-style ancestor
+   highlight) so the selection's home stays visible even with the group collapsed;
+   same specificity as :hover but declared first, so hover still wins under pointer */
+.sh-panel .it.held { background: color-mix(in srgb, var(--glass-hover) 55%, transparent) }
+.sh-panel .it:hover { background: var(--glass-hover) }
+.sh-panel .it .tw { color: var(--glass-ink-3); flex: none; margin: 0 2.5px; transition: transform .15s ease }
+.sh-panel .it span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
+.sh-panel .it small { color: var(--glass-ink-3); font: 500 11px -apple-system, system-ui, sans-serif; font-variant-numeric: tabular-nums }
+/* board rows: places, not folders - icon idles tertiary, lights accent when active */
+.sh-panel .it.board svg { color: var(--glass-ink-3); flex: none; margin: 0 1px; transition: color .2s ease }
+.sh-panel .it.board.cur { background: var(--accent-wash); color: var(--glass-accent); font-weight: 600 }
+.sh-panel .it.board.cur svg { color: var(--glass-accent) }
+/* frame rows: one indent in (aligned to the label line), quieter ink */
+.sh-panel .sub { display: flex; align-items: center; height: 28px; padding: 0 8px 0 31px; margin-bottom: 1px;
+  color: var(--glass-ink-2); font-size: 13px; font-weight: 400; border-radius: 8px; cursor: pointer }
+.sh-panel .sub:hover { background: var(--glass-hover); color: var(--glass-ink) }
+.sh-panel .sub.on { background: var(--accent-wash); color: var(--glass-accent); font-weight: 500 }
+.sh-panel .sub.dim { color: var(--glass-ink-3); cursor: default; line-height: 1.4; height: auto; padding-top: 4px; padding-bottom: 4px }
+.sh-panel .sub.dim:hover { background: none; color: var(--glass-ink-3) }
+
+/* collapsed panel: a round glass button; morphs against the panel */
+.sh-fab { position: absolute; left: var(--edge); top: var(--edge); z-index: 11; width: 44px; height: 44px;
+  display: grid; place-items: center; border-radius: 999px;
+  color: var(--glass-ink-2); cursor: pointer;
+  transition: transform var(--morph), opacity .2s ease }
+.sh-fab:hover { color: var(--glass-ink); background: var(--glass-hover) }
+.sh-fab.hidden { transform: scale(.5); opacity: 0; pointer-events: none }
+
+/* pill nav */
+/* uniform 5px inset on every side: 34px buttons + 2*5px = 44px, same as the fab */
+.sh-pill { position: absolute; right: var(--edge); top: var(--edge); z-index: 10; display: flex; align-items: center; gap: 1px;
+  border-radius: 999px; padding: 5px;
+  transform-origin: calc(100% - 22px) 22px; transition: transform var(--morph), opacity .2s ease }
+.sh-pill.closed { transform: scale(.16); opacity: 0; pointer-events: none }
+/* the pill's expand chip - the sidebar fab, mirrored top-right: same glass (shared
+   surface rule above), same morph, the bar shrinking into the chip's spot */
+.sh-pill-fab { position: absolute; right: var(--edge); top: var(--edge); z-index: 11; width: 44px; height: 44px;
+  display: grid; place-items: center; border-radius: 999px;
+  color: var(--glass-ink-2); cursor: pointer;
+  transition: transform var(--morph), opacity .2s ease }
+.sh-pill-fab:hover { color: var(--glass-ink); background: var(--glass-hover) }
+.sh-pill-fab.hidden { transform: scale(.5); opacity: 0; pointer-events: none }
+.sh-pill-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 34px;
+  min-width: 34px; font: 500 12px -apple-system, system-ui, sans-serif; color: var(--glass-ink-2); background: none; border: 0;
+  padding: 0 10px; border-radius: 999px; cursor: pointer; white-space: nowrap }
+.sh-pill-btn:hover { background: var(--glass-hover); color: var(--glass-ink) }
+.sh-pill-btn.pct { font-variant-numeric: tabular-nums; min-width: 46px }
+.sh-pill-btn.off { color: var(--glass-ink-3); cursor: default }
+.sh-pill-btn.off:hover { background: none; color: var(--glass-ink-3) }
+.sh-pill .sep { width: 1px; height: 16px; background: var(--glass-brd); margin: 0 3px }
+
+/* dropdown menu (theme) - portaled to .sh-app (its own backdrop root), left-aligned to its trigger */
+.sh-theme { position: relative }
+.sh-menu { position: absolute; min-width: 136px; z-index: 20;
+  border-radius: 16px; padding: 5px; display: flex; flex-direction: column;
+  transform-origin: top left; animation: sh-pop .14s ease }
+@keyframes sh-pop { from { opacity: 0; transform: scale(.95) translateY(-4px) } }
+.sh-menu button { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px;
+  font: 500 12px -apple-system, system-ui, sans-serif; color: var(--glass-ink); background: none; border: 0; border-radius: 12px;
+  cursor: pointer; text-align: left }
+.sh-menu button:hover { background: var(--glass-hover) }
+.sh-menu button span { flex: 1; text-transform: capitalize }
+.sh-menu .chk { color: var(--glass-accent) }
+.sh-menu kbd { font: 500 10.5px -apple-system, system-ui, sans-serif; color: var(--glass-ink-3); background: none; border: 0 }
+.sh-menu .div { height: 1px; background: var(--glass-brd); margin: 4px 6px }
+
+/* shadcn-style tooltip: contrast-flipped solid, zoom-fade in */
+.sh-tip { position: absolute; z-index: 40; pointer-events: none; padding: 5px 10px; border-radius: 8px;
+  font: 500 12px -apple-system, system-ui, sans-serif; white-space: nowrap; transform: translate(-50%, -100%);
+  display: flex; flex-direction: row; align-items: center; gap: 10px;
+  background: var(--tip-bg); color: var(--tip-ink);
+  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, .25);
+  animation: sh-tip-pop .12s ease }
+@keyframes sh-tip-pop { from { opacity: 0; transform: translate(-50%, -100%) scale(.95) } }
+/* top-of-screen chrome flips its tooltip below the trigger */
+.sh-tip.below { transform: translate(-50%, 0); animation-name: sh-tip-pop-b }
+@keyframes sh-tip-pop-b { from { opacity: 0; transform: translate(-50%, 0) scale(.95) } }
+/* play chrome is fixed dark glass regardless of board theme - its tips pin the light bubble */
+.sh-tip.inv { background: #f4f4f5; color: #18181b }
+.sh-tip b { font-weight: 600 }
+.sh-tip span { opacity: .55; font-size: 11px; margin-left: auto }
+.sh-tip span.k { opacity: .4; margin-left: 0; font-weight: 600 }
+
+.sh-banner { position: absolute; bottom: var(--edge); right: var(--edge); z-index: 10; font: 500 12px -apple-system, system-ui, sans-serif;
+  color: var(--glass-warn); border-radius: 999px; padding: 8px 14px }
+
+.sh-toasts { position: absolute; left: var(--edge); bottom: var(--edge); z-index: 12; display: flex; flex-direction: column; gap: 6px }
+.sh-toast { display: flex; align-items: center; gap: 6px; font: 500 12px -apple-system, system-ui, sans-serif;
+  color: var(--glass-ink-2); border-radius: 999px; padding: 7px 13px }
+.sh-toast svg { color: var(--glass-good); flex: none }
+
+/* ---- Play mode (SPEC-M2 §1): near-black stage, one centered device, auto-hiding bar.
+   Fixed dark palette - the backdrop never follows the board theme, so no tokens here. */
+.sh-play { position: absolute; inset: 0; z-index: 30; background: #0a0a0b; display: flex;
+  align-items: center; justify-content: center; animation: sh-play-in .28s ease-out }
+@keyframes sh-play-in { from { opacity: 0 } }
+/* the device wears the frame-node card language: same theme border tokens, the same
+   masked 1px edge-light gradient ring (glass catching light), and a real drop shadow
+   below. Radius + clipping live on the WRAPPER at whole pixels - the iframe is
+   transparent and scaled to land exactly on its edges, which killed the corner seams.
+   The ring is an inside overlay, not a border: border-box would clip a pixel of content. */
+/* LIGHT device: its own treatment, fully separate from dark - no masked border, just a
+   soft gray RING hugging the outside edge plus the luminous halo lifting it off black */
+.sh-play .dev { position: relative; overflow: hidden; border-radius: 14px;
+  --pdev-bg: #fff;
+  background: var(--pdev-bg);
+  box-shadow: 0 0 0 1px rgba(148, 152, 164, .6), 0 0 54px rgba(255, 255, 255, .12),
+    0 30px 70px -16px rgba(0, 0, 0, .85), 0 8px 24px rgba(0, 0, 0, .45);
+  transition: width .28s ease, height .28s ease }
+/* DARK device: the original glint recipe, verbatim - do not touch */
+.sh-play .dev[data-theme="dark"] { --pdev-bg: #0f1015;
+  box-shadow: 0 30px 70px -16px rgba(0, 0, 0, .85), 0 8px 24px rgba(0, 0, 0, .45) }
+.sh-play .dev[data-theme="dark"]::after { content: ''; position: absolute; inset: 0; padding: 1px; border-radius: inherit;
+  background-color: #2c2d38;
+  background-image: linear-gradient(155deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .05) 30%, rgba(255, 255, 255, .02) 65%, rgba(255, 255, 255, .16));
+  pointer-events: none;
+  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  mask-composite: exclude }
+.sh-play .dev iframe { display: block; border: 0; background: transparent; transform-origin: 0 0 }
+.sh-play.fill .dev { border-radius: 0; box-shadow: none; transition: none }
+.sh-play.fill .dev::after { display: none }
+
+/* the two floating chrome pieces share one glass language and one idle behavior */
+.sh-play-bar, .sh-play-nav { position: absolute; display: flex; align-items: center; gap: 1px;
+  padding: 4px; border-radius: 999px;
+  background: rgba(18, 18, 24, .82); border: 1px solid rgba(255, 255, 255, .12);
+  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
+  transition: opacity .35s ease; font: 500 12px -apple-system, system-ui, sans-serif; color: #f5f5f7 }
+.sh-play-bar { top: 14px; right: 16px }
+.sh-play-nav { bottom: 16px; left: 16px }
+.sh-play-bar.idle, .sh-play-nav.idle { opacity: 0; pointer-events: none }
+.sh-play-bar .sep, .sh-play-nav .sep { width: 1px; height: 16px; background: rgba(255, 255, 255, .14); margin: 0 4px }
+.sh-play-bar button, .sh-play-nav button { display: flex; align-items: center; justify-content: center;
+  width: 30px; height: 30px; border: 0; border-radius: 999px; background: transparent;
+  color: rgba(245, 245, 247, .64); cursor: pointer }
+.sh-play-bar button:hover, .sh-play-nav button:hover { background: rgba(255, 255, 255, .1); color: #f5f5f7 }
+.sh-play-bar button.on { background: rgba(255, 255, 255, .14); color: #f5f5f7 }
+
+/* board switcher */
+.sh-play-bar .bd-wrap { position: relative }
+.sh-play-bar .bd { width: auto; gap: 6px; padding: 0 10px 0 12px; white-space: nowrap; font: inherit }
+/* no backdrop-filter here: the menu nests inside the blurred bar, and glass never nests
+   (a nested backdrop-filter samples the bar, not the page) - near-opaque ink instead */
+.sh-play-menu { position: absolute; top: calc(100% + 10px); left: 0; min-width: 150px; padding: 4px;
+  border-radius: 12px; background: rgba(20, 20, 26, .97); border: 1px solid rgba(255, 255, 255, .12);
+  box-shadow: 0 12px 40px rgba(0, 0, 0, .5); display: flex; flex-direction: column; gap: 1px }
+.sh-play-menu button { width: 100%; height: 28px; justify-content: flex-start; gap: 8px; padding: 0 10px;
+  border-radius: 8px; font: inherit }
+.sh-play-menu button span { flex: 1; text-align: left; white-space: nowrap }
+
+/* walk position readout */
+.sh-play-nav .pos { padding: 0 8px; color: rgba(245, 245, 247, .64); font-variant-numeric: tabular-nums; white-space: nowrap }
+.sh-play-nav .pos em { font-style: normal; opacity: .45; margin: 0 2px }
+
+/* collapsed chip - the bar's fab. Always mounted so collapse/expand crossfades. */
+.sh-play-chip { position: absolute; top: 14px; right: 16px; width: 38px; height: 38px;
+  display: grid; place-items: center; border-radius: 999px;
+  background: rgba(18, 18, 24, .82); border: 1px solid rgba(255, 255, 255, .12);
+  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
+  color: rgba(245, 245, 247, .64); cursor: pointer;
+  transition: opacity .35s ease, transform .35s ease }
+.sh-play-chip:hover { color: #f5f5f7 }
+.sh-play-chip.idle { opacity: 0; pointer-events: none; transform: scale(.6) }
+
+/* the H coach bubble: hairline, translucent, teaches the way back from immersive mode.
+   Same pill geometry and separators as the bar it stands in for. */
+.sh-play-hint { position: absolute; top: 14px; right: 16px; display: flex; align-items: center; gap: 3px;
+  padding: 4px 4px 4px 14px; border-radius: 999px;
+  background: rgba(18, 18, 24, .6); border: 1px solid rgba(255, 255, 255, .14);
+  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
+  font: 500 12px -apple-system, system-ui, sans-serif; color: rgba(245, 245, 247, .85);
+  animation: sh-play-in .3s ease-out }
+.sh-play-hint .sep { width: 1px; height: 16px; background: rgba(255, 255, 255, .14); margin: 0 8px }
+.sh-play-hint kbd { font: 600 11px -apple-system, system-ui, sans-serif; padding: 1px 6px; border-radius: 5px;
+  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .16) }
+.sh-play-hint button { height: 30px; padding: 0 12px; border: 0; border-radius: 999px; cursor: pointer;
+  font: 600 11px -apple-system, system-ui, sans-serif; background: rgba(255, 255, 255, .14); color: #f5f5f7 }
+.sh-play-hint button:hover { background: rgba(255, 255, 255, .22) }
+.sh-play-hint button.dim { background: transparent; color: rgba(245, 245, 247, .5); font-weight: 500 }
+.sh-play-hint button.dim:hover { color: rgba(245, 245, 247, .8); background: rgba(255, 255, 255, .08) }
+
+/* ---- Focus: silent for pointer + shortcut use; ONE branded inset ring, and only while
+   the user is actually Tab-navigating (body.sh-kbd, armed by Tab, disarmed by pointer).
+   Inset so scroll containers can never clip it; outline follows the border radius. */
+.sh-app :focus { outline: none }
+body.sh-kbd .sh-app :focus-visible { outline: 2px solid var(--accent); outline-offset: -2px }

package/src/client/shell/tidy.ts

@@ -0,0 +1,24 @@
+export interface TidyNode { key: string; scene: string; w: number; h: number }
+export interface Placed { key: string; x: number; y: number }
+
+const GUTTER = 72
+const SCENE_GAP = 96
+
+/** Pure: rows per scene (scenes alphabetical, node order preserved within a scene). Spec §7. */
+export function tidy(nodes: TidyNode[]): Placed[] {
+  const scenes = [...new Set(nodes.map((n) => n.scene))].sort()
+  const out: Placed[] = []
+  let y = 0
+  for (const scene of scenes) {
+    const row = nodes.filter((n) => n.scene === scene)
+    let x = 0
+    let rowH = 0
+    for (const n of row) {
+      out.push({ key: n.key, x, y })
+      x += n.w + GUTTER
+      rowH = Math.max(rowH, n.h)
+    }
+    y += rowH + SCENE_GAP
+  }
+  return out
+}

package/src/client/stage/index.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="{{ENTRY}}"></script>
+  </body>
+</html>