@storyshelf/app 0.7.0 → 0.8.0

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storyshelf/app",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "StoryShelf app: Hono app, API routes, and server-rendered UI over @storyshelf/core.",
   "keywords": [
     "chromatic-alternative",
@@ -58,29 +58,29 @@
   "dependencies": {
     "@hono/swagger-ui": "^0.6.1",
     "@hono/zod-openapi": "^1.1.5",
-    "@storyshelf/core": "0.7.0",
-    "@storyshelf/observability": "0.7.0",
+    "@storyshelf/core": "0.8.0",
+    "@storyshelf/observability": "0.8.0",
     "hono": "^4.11.0",
-    "zod": "^4.2.0"
+    "zod": "^4.6.7"
   },
   "devDependencies": {
     "@opentelemetry/api": "^1.9.0",
     "@opentelemetry/context-async-hooks": "^2.11.0",
     "@opentelemetry/core": "^2.11.0",
     "@opentelemetry/sdk-trace-base": "^2.11.0",
-    "@storyshelf/auth": "0.7.0",
-    "@storyshelf/db-sqlite": "0.7.0",
-    "@storyshelf/design-figma": "0.7.0",
+    "@storyshelf/auth": "0.8.0",
+    "@storyshelf/db-sqlite": "0.8.0",
+    "@storyshelf/design-figma": "0.8.0",
     "@types/node": "^26.0.0",
     "@vitest/coverage-v8": "^4.0.0",
-    "adm-zip": "0.6.0",
+    "adm-zip": "0.6.1",
     "oxfmt": "^0.65.0",
     "oxlint": "^1.80.0",
     "oxlint-tsgolint": "^7.0.2001",
     "pino": "^10.3.1",
     "tsdown": "^0.22.14",
     "typescript": "^7.0.2",
-    "vitest": "^5.0.0"
+    "vitest": "^5.0.5"
   },
   "engines": {
     "node": ">=24"