@storyshelf/app 0.7.0 → 0.9.0-next-d2cc082

package/dist/ui/filter-input.mjs

@@ -4,7 +4,7 @@ import.meta.url;
 import { css } from "./css.mjs";
 import { Icon } from "./icons/icon.mjs";
 import { jsx, jsxs } from "hono/jsx/jsx-runtime";
-//#region src/ui/filter-input.tsx
+// src/ui/filter-input.tsx
 const filterWrap = css`
   /* filter-input */
   position: relative;
@@ -52,7 +52,6 @@ const FilterInput = ({ label, placeholder = "Filter…" }) => {
 		})]
 	});
 };
-//#endregion
 export { FilterInput };
 
 //# sourceMappingURL=filter-input.mjs.map

package/dist/ui/forms.mjs

@@ -4,7 +4,7 @@ import.meta.url;
 import { css } from "./css.mjs";
 import { Icon } from "./icons/icon.mjs";
 import { jsx, jsxs } from "hono/jsx/jsx-runtime";
-//#region src/ui/forms.tsx
+// src/ui/forms.tsx
 const fieldWrap = css`
   /* field */
   display: grid;
@@ -286,7 +286,6 @@ const SelectField = ({ label, name, value, options, hint, disabled, required, la
 		]
 	});
 };
-//#endregion
 export { CheckField, Field, FormActions, SelectField, TextareaField };
 
 //# sourceMappingURL=forms.mjs.map

package/dist/ui/icons/icon.mjs

@@ -4,7 +4,7 @@ import.meta.url;
 import { css } from "../css.mjs";
 import { iconHref } from "./sprite.mjs";
 import { jsx } from "hono/jsx/jsx-runtime";
-//#region src/ui/icons/icon.tsx
+// src/ui/icons/icon.tsx
 const iconBase = css`
   /* icon */
   flex: none;
@@ -47,7 +47,6 @@ const Icon = ({ name, size = "md", label }) => {
 		children: /* @__PURE__ */ jsx("use", { href: iconHref(name) })
 	});
 };
-//#endregion
 export { Icon };
 
 //# sourceMappingURL=icon.mjs.map

package/dist/ui/icons/paths.mjs

@@ -1,7 +1,7 @@
 import "node:path";
 import "node:url";
 import.meta.url;
-//#region src/ui/icons/paths.ts
+// src/ui/icons/paths.ts
 /**
 * Icon set: inner SVG markup per icon on a 24x24 grid, stroke-based
 * (Lucide-style, ISC). Add an icon here and it is in the sprite and the
@@ -56,7 +56,6 @@ const ICON_PATHS = {
 	book: "<path d=\"M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20\"/>",
 	server: "<rect width=\"20\" height=\"8\" x=\"2\" y=\"2\" rx=\"2\"/><rect width=\"20\" height=\"8\" x=\"2\" y=\"14\" rx=\"2\"/><path d=\"M6 6h.01M6 18h.01\"/>"
 };
-//#endregion
 export { ICON_PATHS };
 
 //# sourceMappingURL=paths.mjs.map

package/dist/ui/icons/sprite.mjs

@@ -3,7 +3,7 @@ import "node:url";
 import.meta.url;
 import { ICON_PATHS } from "./paths.mjs";
 import { createHash } from "node:crypto";
-//#region src/ui/icons/sprite.ts
+// src/ui/icons/sprite.ts
 /** Assembled `<svg>` sprite of `<symbol id="i-<name>">` entries. */
 function buildSprite(paths = ICON_PATHS) {
 	return `<svg xmlns="http://www.w3.org/2000/svg">${Object.entries(paths).toSorted(([a], [b]) => a.localeCompare(b)).map(([name, body]) => `<symbol id="i-${name}" viewBox="0 0 24 24">${body}</symbol>`).join("")}</svg>`;
@@ -20,7 +20,6 @@ const iconSpriteHref = `/assets/icons-${iconSpriteHash}.svg`;
 function iconHref(name) {
 	return `${iconSpriteHref}#i-${name}`;
 }
-//#endregion
 export { buildSprite, contentHash, iconHref, iconSprite, iconSpriteHash, iconSpriteHref };
 
 //# sourceMappingURL=sprite.mjs.map

package/dist/ui/kbd.mjs

@@ -3,7 +3,7 @@ import "node:url";
 import.meta.url;
 import { css } from "./css.mjs";
 import { Fragment, jsx } from "hono/jsx/jsx-runtime";
-//#region src/ui/kbd.tsx
+// src/ui/kbd.tsx
 const kbdKey = css`
   /* kbd */
   display: inline-flex;
@@ -27,7 +27,6 @@ const Kbd = ({ keys }) => {
 		children: key
 	}, String(index))) });
 };
-//#endregion
 export { Kbd };
 
 //# sourceMappingURL=kbd.mjs.map

package/dist/ui/layout.mjs

@@ -3,7 +3,7 @@ import "node:url";
 import.meta.url;
 import { css } from "./css.mjs";
 import { jsx, jsxs } from "hono/jsx/jsx-runtime";
-//#region src/ui/layout.tsx
+// src/ui/layout.tsx
 const cardBase = css`
   /* card */
   background: var(--surface-card);
@@ -167,7 +167,6 @@ const SectionTitle = ({ level = 2, tone = "neutral", children }) => {
 		children
 	});
 };
-//#endregion
 export { Card, CardSection, PageHeader, SectionTitle };
 
 //# sourceMappingURL=layout.mjs.map

package/dist/ui/preview-embed.mjs

@@ -5,7 +5,7 @@ import { css } from "./css.mjs";
 import { Button } from "./buttons.mjs";
 import { Meta } from "./feedback.mjs";
 import { jsx, jsxs } from "hono/jsx/jsx-runtime";
-//#region src/ui/preview-embed.tsx
+// src/ui/preview-embed.tsx
 /**
 * Sandbox of the embedded story frame (ADR 0006, decision 9). Scripts only: no `allow-same-origin`,
 * so a customer's Storybook never runs with the app's origin and its cookies, and no top navigation,
@@ -76,7 +76,6 @@ const PreviewEmbed = ({ src, title, refresh }) => /* @__PURE__ */ jsxs("div", {
 		})
 	})]
 });
-//#endregion
 export { PREVIEW_SANDBOX, PreviewEmbed };
 
 //# sourceMappingURL=preview-embed.mjs.map

package/dist/ui/progress.mjs

@@ -3,7 +3,7 @@ import "node:url";
 import.meta.url;
 import { css } from "./css.mjs";
 import { jsx } from "hono/jsx/jsx-runtime";
-//#region src/ui/progress.tsx
+// src/ui/progress.tsx
 const track = css`
   /* progress */
   height: 6px;
@@ -38,7 +38,6 @@ const Progress = ({ value, max, label }) => {
 		children: /* @__PURE__ */ jsx("span", { style: `width:${percent}%` })
 	});
 };
-//#endregion
 export { Progress };
 
 //# sourceMappingURL=progress.mjs.map

package/dist/ui/segmented.mjs

@@ -3,7 +3,7 @@ import "node:url";
 import.meta.url;
 import { css } from "./css.mjs";
 import { jsx } from "hono/jsx/jsx-runtime";
-//#region src/ui/segmented.tsx
+// src/ui/segmented.tsx
 const segmentedRoot = css`
   /* segmented */
   display: inline-flex;
@@ -71,7 +71,6 @@ const Segmented = ({ items, label, ...rest }) => {
 		}, item.value))
 	});
 };
-//#endregion
 export { Segmented };
 
 //# sourceMappingURL=segmented.mjs.map

package/dist/ui/shell/account.mjs

@@ -10,7 +10,7 @@ import { Dropdown, DropdownDivider, DropdownItem } from "../dropdown.mjs";
 import { csrfField } from "../csrf-field.mjs";
 import { Fragment, jsx, jsxs } from "hono/jsx/jsx-runtime";
 import { safeImageUrl } from "@storyshelf/core/urls";
-//#region src/ui/shell/account.tsx
+// src/ui/shell/account.tsx
 /** Styles for the account widgets that live in the sidebar footer. */
 const accountRoot = css`
   /* account */
@@ -155,7 +155,6 @@ const UserMenu = () => {
 		})
 	});
 };
-//#endregion
 export { ThemeMenu, UserMenu };
 
 //# sourceMappingURL=account.mjs.map

package/dist/ui/shell/bare.mjs

@@ -5,7 +5,7 @@ import { css } from "../css.mjs";
 import { Icon } from "../icons/icon.mjs";
 import { jsx, jsxs } from "hono/jsx/jsx-runtime";
 import { safeImageUrl } from "@storyshelf/core/urls";
-//#region src/ui/shell/bare.tsx
+// src/ui/shell/bare.tsx
 /** Chrome-free page for signed-out flows: brand over a centered column. */
 const bareRoot = css`
   /* bare */
@@ -63,7 +63,6 @@ const BareShell = ({ name, logo, children }) => {
 		})]
 	});
 };
-//#endregion
 export { BareShell };
 
 //# sourceMappingURL=bare.mjs.map

package/dist/ui/shell/boot-script.mjs

@@ -1,7 +1,7 @@
 import "node:path";
 import "node:url";
 import.meta.url;
-//#region src/ui/shell/boot-script.ts
+// src/ui/shell/boot-script.ts
 /**
 * Runs in `<head>` before first paint so the saved theme and sidebar state
 * apply without a flash. Exposes cookie helpers to the client script.
@@ -40,7 +40,6 @@ function bootScript() {
   })();
   `.trim();
 }
-//#endregion
 export { bootScript };
 
 //# sourceMappingURL=boot-script.mjs.map

package/dist/ui/shell/client-script.mjs

@@ -3,7 +3,7 @@ import "node:url";
 import.meta.url;
 import { iconSpriteHref } from "../icons/sprite.mjs";
 import { reviewScript } from "./review-script.mjs";
-//#region src/ui/shell/client-script.ts
+// src/ui/shell/client-script.ts
 /** Attach the CSRF token to every HTMX request. */
 function csrfPart() {
 	return `
@@ -338,7 +338,6 @@ function clientScript() {
   })();
   `.trim();
 }
-//#endregion
 export { clientScript };
 
 //# sourceMappingURL=client-script.mjs.map

package/dist/ui/shell/nav.mjs

@@ -1,7 +1,7 @@
 import "node:path";
 import "node:url";
 import.meta.url;
-//#region src/ui/shell/nav.ts
+// src/ui/shell/nav.ts
 /**
 * Entries shown for the current project. Entries for `testing` routes (Jobs) drop out on a
 * hosting-only instance, where those routes answer 404.
@@ -109,7 +109,6 @@ function sectionCrumb(nav, urls) {
 		}
 	}[nav?.active ?? ""] ?? null;
 }
-//#endregion
 export { adminNavItems, breadcrumbs, developerNavItems, projectNavItems };
 
 //# sourceMappingURL=nav.mjs.map

package/dist/ui/shell/review-script.mjs

@@ -1,7 +1,7 @@
 import "node:path";
 import "node:url";
 import.meta.url;
-//#region src/ui/shell/review-script.ts
+// src/ui/shell/review-script.ts
 /**
 * Review workspace behavior: comparison modes, zoom, synchronized scrolling,
 * list filters, keyboard review, and the shortcuts dialog. Runs inside the
@@ -29,12 +29,18 @@ function stateHelpers() {
         b.setAttribute('aria-pressed', b.getAttribute('data-view-value')===value ? 'true' : 'false');
       });
     }
+    function allows(stage,attr,value){
+      var list=stage.getAttribute(attr);
+      return !list || list.split(',').indexOf(value)>-1;
+    }
     function setMode(stage,mode,persist){
+      if(!allows(stage,'data-modes',mode)) return;
       stage.setAttribute('data-view',mode);
       press(stage.querySelector('[data-compare-mode]'),mode);
       if(persist) remember('ss_compare_mode',mode);
     }
     function setZoom(stage,zoom,persist){
+      if(!allows(stage,'data-zooms',zoom)) return;
       stage.setAttribute('data-zoom',zoom);
       press(stage.querySelector('[data-compare-zoom]'),zoom);
       if(persist) remember('ss_compare_zoom',zoom);
@@ -135,11 +141,20 @@ function clickControls() {
       var dialog=document.querySelector('dialog[data-shortcuts]');
       if(dialog&&typeof dialog.showModal==='function'&&!dialog.open){ dialog.showModal(); }
     }
+    function chooseSource(btn,value){
+      var root=btn.closest('[data-compare-sources]');
+      if(!root) return;
+      root.querySelectorAll('[data-compare-source]').forEach(function(pane){
+        pane.hidden = pane.getAttribute('data-compare-source')!==value;
+      });
+      press(btn.closest('[data-compare-source-switch]'),value);
+    }
     function chooseSegment(btn){
       var value=btn.getAttribute('data-view-value');
       var stage=btn.closest('[data-compare]');
       if(stage&&btn.closest('[data-compare-mode]')){ setMode(stage,value,true); }
       else if(stage&&btn.closest('[data-compare-zoom]')){ setZoom(stage,value,true); }
+      else if(btn.closest('[data-compare-source-switch]')){ chooseSource(btn,value); }
       else if(btn.closest('[data-filter-switch]')){
         var list=document.querySelector('[data-diff-nav]');
         if(list){ list.setAttribute('data-filter',value); }
@@ -192,12 +207,11 @@ function keyboardShortcuts() {
     }
     document.addEventListener('keydown',function(e){
       if(e.metaKey||e.ctrlKey||e.altKey||typing(e.target)) return;
-      var stage=document.querySelector('[data-compare]');
+      var stage=document.querySelector('[data-compare-source]:not([hidden]) [data-compare]')||document.querySelector('[data-compare]');
       if(!stage||document.querySelector('dialog[open]')) return;
       if(handleKey(e.key,stage)){ e.preventDefault(); }
     });`;
 }
-//#endregion
 export { reviewScript };
 
 //# sourceMappingURL=review-script.mjs.map

package/dist/ui/shell/review-script.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"review-script.mjs","names":[],"sources":["../../../src/ui/shell/review-script.ts"],"sourcesContent":["/**\n * Review workspace behavior: comparison modes, zoom, synchronized scrolling,\n * list filters, keyboard review, and the shortcuts dialog. Runs inside the\n * shell's once-only closure (`inits`, `shell` are in scope).\n */\nexport function reviewScript(): string {\n  return [stateHelpers(), stageSetup(), wipeDrag(), clickControls(), keyboardShortcuts()].join(\n    \"\\n\",\n  );\n}\n\n/** Mode/zoom state on the stage root, remembered across snapshots. */\nfunction stateHelpers(): string {\n  return `\n    var MODES=['split','swipe','onion','diff','flip'];\n    var ZOOMS=['fit','100','200','400'];\n    function remember(key,value){ try{ localStorage.setItem(key,value); }catch(_){} }\n    function recall(key){ try{ return localStorage.getItem(key); }catch(_){ return null; } }\n    function press(group,value){\n      if(!group) return;\n      group.querySelectorAll('[data-view-value]').forEach(function(b){\n        b.setAttribute('aria-pressed', b.getAttribute('data-view-value')===value ? 'true' : 'false');\n      });\n    }\n    function setMode(stage,mode,persist){\n      stage.setAttribute('data-view',mode);\n      press(stage.querySelector('[data-compare-mode]'),mode);\n      if(persist) remember('ss_compare_mode',mode);\n    }\n    function setZoom(stage,zoom,persist){\n      stage.setAttribute('data-zoom',zoom);\n      press(stage.querySelector('[data-compare-zoom]'),zoom);\n      if(persist) remember('ss_compare_zoom',zoom);\n    }\n    function flip(stage){\n      stage.setAttribute('data-flip', stage.getAttribute('data-flip')==='baseline' ? 'current' : 'baseline');\n    }\n    function nextZoom(stage){\n      var cur=stage.getAttribute('data-zoom')||'fit';\n      setZoom(stage,ZOOMS[(ZOOMS.indexOf(cur)+1)%ZOOMS.length],true);\n    }\n    function stepZoom(stage,delta){\n      var cur=ZOOMS.indexOf(stage.getAttribute('data-zoom')||'fit');\n      var next=Math.max(0,Math.min(ZOOMS.length-1,cur+delta));\n      setZoom(stage,ZOOMS[next],true);\n    }`;\n}\n\n/** Per-render wiring of a freshly swapped-in comparison stage. */\nfunction stageSetup(): string {\n  return `\n    function syncScroll(stage){\n      var panes=Array.from(stage.querySelectorAll('.stage__pane'));\n      var lock=false;\n      panes.forEach(function(pane){\n        pane.addEventListener('scroll',function(){\n          if(lock) return;\n          lock=true;\n          panes.forEach(function(other){\n            if(other!==pane){ other.scrollTop=pane.scrollTop; other.scrollLeft=pane.scrollLeft; }\n          });\n          requestAnimationFrame(function(){ lock=false; });\n        });\n      });\n    }\n    function bindRange(stage,selector,prop,scale){\n      var input=stage.querySelector(selector);\n      if(!input) return;\n      input.addEventListener('input',function(){ stage.style.setProperty(prop,String(input.value*scale)+(scale===1?'%':'')); });\n    }\n    function initStage(stage){\n      if(stage.getAttribute('data-ready')) return;\n      stage.setAttribute('data-ready','1');\n      var mode=recall('ss_compare_mode');\n      if(MODES.indexOf(mode)>-1) setMode(stage,mode,false);\n      var zoom=recall('ss_compare_zoom');\n      if(ZOOMS.indexOf(zoom)>-1) setZoom(stage,zoom,false);\n      bindRange(stage,'[data-compare-swipe]','--swipe',1);\n      bindRange(stage,'[data-compare-onion]','--onion',0.01);\n      var grid=stage.querySelector('.stage__grid');\n      if(grid){ grid.addEventListener('click',function(){ if(stage.getAttribute('data-view')==='flip'){ flip(stage); } }); }\n      syncScroll(stage);\n    }\n    inits.push(function(){ document.querySelectorAll('[data-compare]').forEach(initStage); });`;\n}\n\n/**\n * Drag the wipe handle to move the swipe divider. Uses pointer capture so the\n * drag keeps working when the pointer leaves the handle, and mirrors the value\n * into the (accessible) range slider.\n */\nfunction wipeDrag(): string {\n  return `\n    function wipePercent(stage,clientX){\n      var pane=stage.querySelector('.stage__pane[data-pane=\"current\"]');\n      if(!pane) return 50;\n      var rect=pane.getBoundingClientRect();\n      return Math.max(0,Math.min(100,(clientX-rect.left)/rect.width*100));\n    }\n    function setWipe(stage,percent){\n      stage.style.setProperty('--swipe',percent+'%');\n      var range=stage.querySelector('[data-compare-swipe]');\n      if(range){ range.value=String(Math.round(percent)); }\n    }\n    function bindKnob(stage){\n      var knob=stage.querySelector('[data-compare-knob]');\n      if(!knob||knob.getAttribute('data-bound')) return;\n      knob.setAttribute('data-bound','1');\n      knob.addEventListener('pointerdown',function(e){\n        e.preventDefault();\n        knob.setPointerCapture(e.pointerId);\n        setWipe(stage,wipePercent(stage,e.clientX));\n        function move(ev){ setWipe(stage,wipePercent(stage,ev.clientX)); }\n        function stop(){\n          knob.removeEventListener('pointermove',move);\n          knob.removeEventListener('pointerup',stop);\n          knob.removeEventListener('pointercancel',stop);\n        }\n        knob.addEventListener('pointermove',move);\n        knob.addEventListener('pointerup',stop);\n        knob.addEventListener('pointercancel',stop);\n      });\n    }\n    inits.push(function(){ document.querySelectorAll('[data-compare]').forEach(bindKnob); });`;\n}\n\n/** Delegated clicks: mode/zoom/filter segments and the shortcuts button. */\nfunction clickControls(): string {\n  return `\n    function openShortcuts(){\n      var dialog=document.querySelector('dialog[data-shortcuts]');\n      if(dialog&&typeof dialog.showModal==='function'&&!dialog.open){ dialog.showModal(); }\n    }\n    function chooseSegment(btn){\n      var value=btn.getAttribute('data-view-value');\n      var stage=btn.closest('[data-compare]');\n      if(stage&&btn.closest('[data-compare-mode]')){ setMode(stage,value,true); }\n      else if(stage&&btn.closest('[data-compare-zoom]')){ setZoom(stage,value,true); }\n      else if(btn.closest('[data-filter-switch]')){\n        var list=document.querySelector('[data-diff-nav]');\n        if(list){ list.setAttribute('data-filter',value); }\n        press(btn.closest('[data-filter-switch]'),value);\n      }\n    }\n    document.addEventListener('click',function(e){\n      var t=e.target instanceof Element ? e.target : null;\n      if(!t) return;\n      var btn=t.closest('[data-view-value]');\n      if(btn){ chooseSegment(btn); }\n      if(t.closest('[data-shortcuts-open]')){ openShortcuts(); }\n    });`;\n}\n\n/** Global review shortcuts; ignored while typing or with modifier keys held. */\nfunction keyboardShortcuts(): string {\n  return `\n    function typing(target){\n      return target instanceof HTMLElement &&\n        (target.tagName==='INPUT'||target.tagName==='TEXTAREA'||target.tagName==='SELECT'||target.isContentEditable);\n    }\n    function press1(selector){\n      var el=document.querySelector(selector);\n      if(el&&!el.disabled){ el.click(); return true; }\n      return false;\n    }\n    function stepBrowser(dir){\n      var tabs=[].slice.call(document.querySelectorAll('[data-browser-tabs] a'));\n      var at=tabs.findIndex(function(a){ return a.getAttribute('aria-current')==='page'; });\n      var target=at===-1?null:tabs[at+dir];\n      if(target){ target.click(); return true; }\n      return false;\n    }\n    function handleKey(key,stage){\n      if(key==='['||key===']') return stepBrowser(key===']'?1:-1);\n      if(key==='j'||key==='ArrowRight') return press1('[data-snap-next]');\n      if(key==='k'||key==='ArrowLeft') return press1('[data-snap-prev]');\n      if(key==='a'||key==='A') return press1('[data-approve]');\n      if(key==='r'||key==='R') return press1('[data-reject]');\n      if(key>='1'&&key<='5'){ setMode(stage,MODES[Number(key)-1],true); return true; }\n      if(key==='f'){ nextZoom(stage); return true; }\n      if(key==='+'||key==='='){ stepZoom(stage,1); return true; }\n      if(key==='-'||key==='_'){ stepZoom(stage,-1); return true; }\n      if(key==='t'){\n        if(stage.getAttribute('data-view')==='flip'){ flip(stage); } else { setMode(stage,'flip',true); }\n        return true;\n      }\n      if(key==='?'){ openShortcuts(); return true; }\n      return false;\n    }\n    document.addEventListener('keydown',function(e){\n      if(e.metaKey||e.ctrlKey||e.altKey||typing(e.target)) return;\n      var stage=document.querySelector('[data-compare]');\n      if(!stage||document.querySelector('dialog[open]')) return;\n      if(handleKey(e.key,stage)){ e.preventDefault(); }\n    });`;\n}\n"],"mappings":";;;;;;;;;AAKA,SAAgB,eAAuB;CACrC,OAAO;EAAC,aAAa;EAAG,WAAW;EAAG,SAAS;EAAG,cAAc;EAAG,kBAAkB;CAAC,CAAC,CAAC,KACtF,IACF;AACF;;AAGA,SAAS,eAAuB;CAC9B,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCT;;AAGA,SAAS,aAAqB;CAC5B,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCT;;;;;;AAOA,SAAS,WAAmB;CAC1B,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCT;;AAGA,SAAS,gBAAwB;CAC/B,OAAO;;;;;;;;;;;;;;;;;;;;;;;AAuBT;;AAGA,SAAS,oBAA4B;CACnC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCT"}
+{"version":3,"file":"review-script.mjs","names":[],"sources":["../../../src/ui/shell/review-script.ts"],"sourcesContent":["/**\n * Review workspace behavior: comparison modes, zoom, synchronized scrolling,\n * list filters, keyboard review, and the shortcuts dialog. Runs inside the\n * shell's once-only closure (`inits`, `shell` are in scope).\n */\nexport function reviewScript(): string {\n  return [stateHelpers(), stageSetup(), wipeDrag(), clickControls(), keyboardShortcuts()].join(\n    \"\\n\",\n  );\n}\n\n/** Mode/zoom state on the stage root, remembered across snapshots. */\nfunction stateHelpers(): string {\n  return `\n    var MODES=['split','swipe','onion','diff','flip'];\n    var ZOOMS=['fit','100','200','400'];\n    function remember(key,value){ try{ localStorage.setItem(key,value); }catch(_){} }\n    function recall(key){ try{ return localStorage.getItem(key); }catch(_){ return null; } }\n    function press(group,value){\n      if(!group) return;\n      group.querySelectorAll('[data-view-value]').forEach(function(b){\n        b.setAttribute('aria-pressed', b.getAttribute('data-view-value')===value ? 'true' : 'false');\n      });\n    }\n    function allows(stage,attr,value){\n      var list=stage.getAttribute(attr);\n      return !list || list.split(',').indexOf(value)>-1;\n    }\n    function setMode(stage,mode,persist){\n      if(!allows(stage,'data-modes',mode)) return;\n      stage.setAttribute('data-view',mode);\n      press(stage.querySelector('[data-compare-mode]'),mode);\n      if(persist) remember('ss_compare_mode',mode);\n    }\n    function setZoom(stage,zoom,persist){\n      if(!allows(stage,'data-zooms',zoom)) return;\n      stage.setAttribute('data-zoom',zoom);\n      press(stage.querySelector('[data-compare-zoom]'),zoom);\n      if(persist) remember('ss_compare_zoom',zoom);\n    }\n    function flip(stage){\n      stage.setAttribute('data-flip', stage.getAttribute('data-flip')==='baseline' ? 'current' : 'baseline');\n    }\n    function nextZoom(stage){\n      var cur=stage.getAttribute('data-zoom')||'fit';\n      setZoom(stage,ZOOMS[(ZOOMS.indexOf(cur)+1)%ZOOMS.length],true);\n    }\n    function stepZoom(stage,delta){\n      var cur=ZOOMS.indexOf(stage.getAttribute('data-zoom')||'fit');\n      var next=Math.max(0,Math.min(ZOOMS.length-1,cur+delta));\n      setZoom(stage,ZOOMS[next],true);\n    }`;\n}\n\n/** Per-render wiring of a freshly swapped-in comparison stage. */\nfunction stageSetup(): string {\n  return `\n    function syncScroll(stage){\n      var panes=Array.from(stage.querySelectorAll('.stage__pane'));\n      var lock=false;\n      panes.forEach(function(pane){\n        pane.addEventListener('scroll',function(){\n          if(lock) return;\n          lock=true;\n          panes.forEach(function(other){\n            if(other!==pane){ other.scrollTop=pane.scrollTop; other.scrollLeft=pane.scrollLeft; }\n          });\n          requestAnimationFrame(function(){ lock=false; });\n        });\n      });\n    }\n    function bindRange(stage,selector,prop,scale){\n      var input=stage.querySelector(selector);\n      if(!input) return;\n      input.addEventListener('input',function(){ stage.style.setProperty(prop,String(input.value*scale)+(scale===1?'%':'')); });\n    }\n    function initStage(stage){\n      if(stage.getAttribute('data-ready')) return;\n      stage.setAttribute('data-ready','1');\n      var mode=recall('ss_compare_mode');\n      if(MODES.indexOf(mode)>-1) setMode(stage,mode,false);\n      var zoom=recall('ss_compare_zoom');\n      if(ZOOMS.indexOf(zoom)>-1) setZoom(stage,zoom,false);\n      bindRange(stage,'[data-compare-swipe]','--swipe',1);\n      bindRange(stage,'[data-compare-onion]','--onion',0.01);\n      var grid=stage.querySelector('.stage__grid');\n      if(grid){ grid.addEventListener('click',function(){ if(stage.getAttribute('data-view')==='flip'){ flip(stage); } }); }\n      syncScroll(stage);\n    }\n    inits.push(function(){ document.querySelectorAll('[data-compare]').forEach(initStage); });`;\n}\n\n/**\n * Drag the wipe handle to move the swipe divider. Uses pointer capture so the\n * drag keeps working when the pointer leaves the handle, and mirrors the value\n * into the (accessible) range slider.\n */\nfunction wipeDrag(): string {\n  return `\n    function wipePercent(stage,clientX){\n      var pane=stage.querySelector('.stage__pane[data-pane=\"current\"]');\n      if(!pane) return 50;\n      var rect=pane.getBoundingClientRect();\n      return Math.max(0,Math.min(100,(clientX-rect.left)/rect.width*100));\n    }\n    function setWipe(stage,percent){\n      stage.style.setProperty('--swipe',percent+'%');\n      var range=stage.querySelector('[data-compare-swipe]');\n      if(range){ range.value=String(Math.round(percent)); }\n    }\n    function bindKnob(stage){\n      var knob=stage.querySelector('[data-compare-knob]');\n      if(!knob||knob.getAttribute('data-bound')) return;\n      knob.setAttribute('data-bound','1');\n      knob.addEventListener('pointerdown',function(e){\n        e.preventDefault();\n        knob.setPointerCapture(e.pointerId);\n        setWipe(stage,wipePercent(stage,e.clientX));\n        function move(ev){ setWipe(stage,wipePercent(stage,ev.clientX)); }\n        function stop(){\n          knob.removeEventListener('pointermove',move);\n          knob.removeEventListener('pointerup',stop);\n          knob.removeEventListener('pointercancel',stop);\n        }\n        knob.addEventListener('pointermove',move);\n        knob.addEventListener('pointerup',stop);\n        knob.addEventListener('pointercancel',stop);\n      });\n    }\n    inits.push(function(){ document.querySelectorAll('[data-compare]').forEach(bindKnob); });`;\n}\n\n/** Delegated clicks: mode/zoom/filter segments and the shortcuts button. */\nfunction clickControls(): string {\n  return `\n    function openShortcuts(){\n      var dialog=document.querySelector('dialog[data-shortcuts]');\n      if(dialog&&typeof dialog.showModal==='function'&&!dialog.open){ dialog.showModal(); }\n    }\n    function chooseSource(btn,value){\n      var root=btn.closest('[data-compare-sources]');\n      if(!root) return;\n      root.querySelectorAll('[data-compare-source]').forEach(function(pane){\n        pane.hidden = pane.getAttribute('data-compare-source')!==value;\n      });\n      press(btn.closest('[data-compare-source-switch]'),value);\n    }\n    function chooseSegment(btn){\n      var value=btn.getAttribute('data-view-value');\n      var stage=btn.closest('[data-compare]');\n      if(stage&&btn.closest('[data-compare-mode]')){ setMode(stage,value,true); }\n      else if(stage&&btn.closest('[data-compare-zoom]')){ setZoom(stage,value,true); }\n      else if(btn.closest('[data-compare-source-switch]')){ chooseSource(btn,value); }\n      else if(btn.closest('[data-filter-switch]')){\n        var list=document.querySelector('[data-diff-nav]');\n        if(list){ list.setAttribute('data-filter',value); }\n        press(btn.closest('[data-filter-switch]'),value);\n      }\n    }\n    document.addEventListener('click',function(e){\n      var t=e.target instanceof Element ? e.target : null;\n      if(!t) return;\n      var btn=t.closest('[data-view-value]');\n      if(btn){ chooseSegment(btn); }\n      if(t.closest('[data-shortcuts-open]')){ openShortcuts(); }\n    });`;\n}\n\n/** Global review shortcuts; ignored while typing or with modifier keys held. */\nfunction keyboardShortcuts(): string {\n  return `\n    function typing(target){\n      return target instanceof HTMLElement &&\n        (target.tagName==='INPUT'||target.tagName==='TEXTAREA'||target.tagName==='SELECT'||target.isContentEditable);\n    }\n    function press1(selector){\n      var el=document.querySelector(selector);\n      if(el&&!el.disabled){ el.click(); return true; }\n      return false;\n    }\n    function stepBrowser(dir){\n      var tabs=[].slice.call(document.querySelectorAll('[data-browser-tabs] a'));\n      var at=tabs.findIndex(function(a){ return a.getAttribute('aria-current')==='page'; });\n      var target=at===-1?null:tabs[at+dir];\n      if(target){ target.click(); return true; }\n      return false;\n    }\n    function handleKey(key,stage){\n      if(key==='['||key===']') return stepBrowser(key===']'?1:-1);\n      if(key==='j'||key==='ArrowRight') return press1('[data-snap-next]');\n      if(key==='k'||key==='ArrowLeft') return press1('[data-snap-prev]');\n      if(key==='a'||key==='A') return press1('[data-approve]');\n      if(key==='r'||key==='R') return press1('[data-reject]');\n      if(key>='1'&&key<='5'){ setMode(stage,MODES[Number(key)-1],true); return true; }\n      if(key==='f'){ nextZoom(stage); return true; }\n      if(key==='+'||key==='='){ stepZoom(stage,1); return true; }\n      if(key==='-'||key==='_'){ stepZoom(stage,-1); return true; }\n      if(key==='t'){\n        if(stage.getAttribute('data-view')==='flip'){ flip(stage); } else { setMode(stage,'flip',true); }\n        return true;\n      }\n      if(key==='?'){ openShortcuts(); return true; }\n      return false;\n    }\n    document.addEventListener('keydown',function(e){\n      if(e.metaKey||e.ctrlKey||e.altKey||typing(e.target)) return;\n      var stage=document.querySelector('[data-compare-source]:not([hidden]) [data-compare]')||document.querySelector('[data-compare]');\n      if(!stage||document.querySelector('dialog[open]')) return;\n      if(handleKey(e.key,stage)){ e.preventDefault(); }\n    });`;\n}\n"],"mappings":";;;;;;;;;AAKA,SAAgB,eAAuB;CACrC,OAAO;EAAC,aAAa;EAAG,WAAW;EAAG,SAAS;EAAG,cAAc;EAAG,kBAAkB;CAAC,CAAC,CAAC,KACtF,IACF;AACF;;AAGA,SAAS,eAAuB;CAC9B,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCT;;AAGA,SAAS,aAAqB;CAC5B,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCT;;;;;;AAOA,SAAS,WAAmB;CAC1B,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCT;;AAGA,SAAS,gBAAwB;CAC/B,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCT;;AAGA,SAAS,oBAA4B;CACnC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCT"}

package/dist/ui/shell/sidebar.mjs

@@ -8,7 +8,7 @@ import { ThemeMenu, UserMenu } from "./account.mjs";
 import { adminNavItems, developerNavItems, projectNavItems } from "./nav.mjs";
 import { Fragment, jsx, jsxs } from "hono/jsx/jsx-runtime";
 import { createUrlBuilder, safeImageUrl } from "@storyshelf/core/urls";
-//#region src/ui/shell/sidebar.tsx
+// src/ui/shell/sidebar.tsx
 /**
 * Left rail. Collapses to icons only on desktop (`html[data-sidebar="rail"]`)
 * and becomes an off-canvas drawer on small screens.
@@ -317,7 +317,6 @@ const Sidebar = ({ nav, name, logo }) => {
 		]
 	});
 };
-//#endregion
 export { Sidebar };
 
 //# sourceMappingURL=sidebar.mjs.map

package/dist/ui/shell/topbar.mjs

@@ -10,7 +10,7 @@ import { breadcrumbs } from "./nav.mjs";
 import { ProjectModel } from "@storyshelf/core/models";
 import { Fragment, jsx, jsxs } from "hono/jsx/jsx-runtime";
 import { createUrlBuilder } from "@storyshelf/core/urls";
-//#region src/ui/shell/topbar.tsx
+// src/ui/shell/topbar.tsx
 /** Slim, translucent bar: project picker plus breadcrumbs (account lives in the sidebar). */
 const shellTopbar = css`
   /* shell-topbar */
@@ -262,7 +262,6 @@ const ToastRegion = () => {
 		"aria-atomic": "false"
 	});
 };
-//#endregion
 export { ToastRegion, TopBar };
 
 //# sourceMappingURL=topbar.mjs.map

package/dist/ui/stacks.mjs

@@ -3,7 +3,7 @@ import "node:url";
 import.meta.url;
 import { css } from "./css.mjs";
 import { jsx } from "hono/jsx/jsx-runtime";
-//#region src/ui/stacks.tsx
+// src/ui/stacks.tsx
 const hGaps = {
 	sm: "0.5rem",
 	md: "0.75rem",
@@ -76,7 +76,6 @@ const VStack = ({ gap = "md", align = "stretch", children }) => {
 		children
 	});
 };
-//#endregion
 export { HStack, VStack };
 
 //# sourceMappingURL=stacks.mjs.map

package/dist/ui/styles/base.mjs

@@ -1,7 +1,7 @@
 import "node:path";
 import "node:url";
 import.meta.url;
-//#region src/ui/styles/base.ts
+// src/ui/styles/base.ts
 /** Base reset, typography, focus ring, and shared utilities. */
 function baseCss() {
 	return `${resetCss()}\n${utilityCss()}`;
@@ -35,7 +35,6 @@ function utilityCss() {
     .mb-1 { margin-bottom: 1rem; }
     @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }`;
 }
-//#endregion
 export { baseCss };
 
 //# sourceMappingURL=base.mjs.map

package/dist/ui/styles/behavior.mjs

@@ -1,7 +1,7 @@
 import "node:path";
 import "node:url";
 import.meta.url;
-//#region src/ui/styles/behavior.ts
+// src/ui/styles/behavior.ts
 /** Behavioral CSS: HTMX indicators, skeletons, tables, stats. */
 function behaviorCss() {
 	return `${htmxCss()}\n${dataCss()}\n${chromeCss()}`;
@@ -37,7 +37,6 @@ function chromeCss() {
     [data-theme-icon] { display: none; }
     [data-theme="light"] [data-theme-icon="light"], [data-theme="dark"] [data-theme-icon="dark"], [data-theme="system"] [data-theme-icon="system"] { display: inline-flex; }`;
 }
-//#endregion
 export { behaviorCss };
 
 //# sourceMappingURL=behavior.mjs.map

package/dist/ui/styles/review-layout.mjs

@@ -2,7 +2,7 @@ import "node:path";
 import "node:url";
 import.meta.url;
 import { css } from "../css.mjs";
-//#region src/ui/styles/review-layout.ts
+// src/ui/styles/review-layout.ts
 /**
 * Review workspace layout styles: header, filmstrip, canvas column, action
 * bar, and shortcuts dialog. Shared by the `build-diff-*` page sections, so
@@ -341,7 +341,6 @@ const shortcutsDialog = css`
     color: var(--text-secondary);
   }
 `;
-//#endregion
 export { actionBar, actionGroup, actionHints, actionPosition, canvasColumn, filmBody, filmItem, filmItemActive, filmStatus, filmSub, filmTitle, filmstrip, filmstripHead, filmstripList, headerActions, headerMain, headerMeta, headerProgress, headerSide, headerTitle, reviewHeader, shortcutsDialog, statusDots, viewerHead, viewerMeta, viewerTitle, workspace };
 
 //# sourceMappingURL=review-layout.mjs.map

package/dist/ui/styles/review.mjs

@@ -2,7 +2,7 @@ import "node:path";
 import "node:url";
 import.meta.url;
 import { css } from "../css.mjs";
-//#region src/ui/styles/review.ts
+// src/ui/styles/review.ts
 /**
 * Snapshot-card and comment styles shared by the build detail, library, and
 * review pages (the review workspace layout lives in `review-layout.ts`).
@@ -80,7 +80,6 @@ const reviewCommentActions = css`
   /* review-comment-actions */
   margin-top: 0.5rem;
 `;
-//#endregion
 export { diffPaneImg, reviewComment, reviewCommentActions, reviewCommentBody, reviewCommentHead, snapshotCard, snapshotCardBody, snapshotCardHead, snapshotCardMeta, snapshotGrid };
 
 //# sourceMappingURL=review.mjs.map

package/dist/ui/styles/tokens.mjs

@@ -1,7 +1,7 @@
 import "node:path";
 import "node:url";
 import.meta.url;
-//#region src/ui/styles/tokens.ts
+// src/ui/styles/tokens.ts
 /**
 * CSS variable tokens: brand-driven colors (per theme), theme-independent
 * scales (type, space, radius, motion), and tokens derived from the brand
@@ -126,7 +126,6 @@ function derivedVars(fb) {
       --status-rejected-border: ${mix("--status-rejected", "32%", "--border")};
       --status-info-border: ${mix("--status-info", "32%", "--border")};`;
 }
-//#endregion
 export { tokenCss };
 
 //# sourceMappingURL=tokens.mjs.map

package/dist/ui/styles.mjs

@@ -4,7 +4,7 @@ import.meta.url;
 import { baseCss } from "./styles/base.mjs";
 import { behaviorCss } from "./styles/behavior.mjs";
 import { tokenCss } from "./styles/tokens.mjs";
-//#region src/ui/styles.ts
+// src/ui/styles.ts
 /** Build the global CSS stylesheet from the light and dark brand themes. */
 function baseStyle(light, dark) {
 	return [
@@ -13,7 +13,6 @@ function baseStyle(light, dark) {
 		behaviorCss()
 	].join("\n");
 }
-//#endregion
 export { baseStyle };
 
 //# sourceMappingURL=styles.mjs.map

package/dist/ui/subnav.mjs

@@ -4,7 +4,7 @@ import.meta.url;
 import { css } from "./css.mjs";
 import { Icon } from "./icons/icon.mjs";
 import { jsx, jsxs } from "hono/jsx/jsx-runtime";
-//#region src/ui/subnav.tsx
+// src/ui/subnav.tsx
 const layout = css`
   /* subnav-layout */
   display: grid;
@@ -85,7 +85,6 @@ const SubNavLayout = ({ items, label, children }) => {
 		}), /* @__PURE__ */ jsx("div", { children })]
 	});
 };
-//#endregion
 export { SubNavLayout };
 
 //# sourceMappingURL=subnav.mjs.map

package/dist/ui/table.mjs

@@ -3,7 +3,7 @@ import "node:url";
 import.meta.url;
 import { css } from "./css.mjs";
 import { jsx } from "hono/jsx/jsx-runtime";
-//#region src/ui/table.tsx
+// src/ui/table.tsx
 const tableWrap = css`
   /* table */
   overflow: auto;
@@ -67,7 +67,6 @@ const Table = ({ dense = false, children }) => {
 		children
 	});
 };
-//#endregion
 export { Table };
 
 //# sourceMappingURL=table.mjs.map

package/dist/ui/theme.mjs

@@ -1,7 +1,7 @@
 import "node:path";
 import "node:url";
 import.meta.url;
-//#region src/ui/theme.ts
+// src/ui/theme.ts
 /** Default light brand theme (shadcn-like zinc, content-first). */
 const LIGHT_THEME = {
 	accent: "#1d5fcf",
@@ -58,7 +58,6 @@ const DARK_THEME = {
 	radiusSm: "0.375rem",
 	shadow: "0 1px 2px rgba(0,0,0,.3)"
 };
-//#endregion
 export { DARK_THEME, LIGHT_THEME };
 
 //# sourceMappingURL=theme.mjs.map

package/dist/ui/thumbnail.mjs

@@ -3,7 +3,7 @@ import "node:url";
 import.meta.url;
 import { css } from "./css.mjs";
 import { jsx } from "hono/jsx/jsx-runtime";
-//#region src/ui/thumbnail.tsx
+// src/ui/thumbnail.tsx
 const thumbFrame = css`
   /* thumbnail */
   position: relative;
@@ -45,7 +45,6 @@ const Thumbnail = ({ src, alt, placeholder = "No preview" }) => {
 		})
 	});
 };
-//#endregion
 export { Thumbnail };
 
 //# sourceMappingURL=thumbnail.mjs.map

package/dist/ui/time.mjs

@@ -2,7 +2,7 @@ import "node:path";
 import "node:url";
 import.meta.url;
 import { jsx } from "hono/jsx/jsx-runtime";
-//#region src/ui/time.tsx
+// src/ui/time.tsx
 const MINUTE = 60;
 const HOUR = 3600;
 const DAY = 86400;
@@ -44,7 +44,6 @@ const RelativeTime = ({ value }) => {
 		children: formatRelative(value)
 	});
 };
-//#endregion
 export { RelativeTime, formatRelative };
 
 //# sourceMappingURL=time.mjs.map