@storyshelf/app 0.6.2 → 0.8.0

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 `
@@ -12,6 +12,27 @@ function csrfPart() {
       if(meta){ e.detail.headers['x-csrf-token']=meta.getAttribute('content'); }
     });`;
 }
+/**
+* System page: report the origin the admin opened it with, so a deployment learns its public URL
+* without a redeploy (ADR 0007, decision 6). The server keeps the first report and answers 201 only
+* when it stored a new one, which is when the page reloads to show it.
+*/
+function originPart() {
+	return `
+    function reportOrigin(){
+      var el=document.querySelector('[data-report-origin]');
+      if(!el || el.getAttribute('data-reported')) return;
+      el.setAttribute('data-reported','1');
+      var meta=document.querySelector('meta[name="csrf-token"]');
+      fetch(el.getAttribute('data-report-origin'),{
+        method:'POST',
+        credentials:'same-origin',
+        headers:{'content-type':'application/json','x-csrf-token':meta ? meta.getAttribute('content') : ''},
+        body:JSON.stringify({origin:location.origin})
+      }).then(function(r){ if(r.status===201) location.reload(); }).catch(function(){});
+    }
+    inits.push(reportOrigin);`;
+}
 /** Theme menu: apply, persist, and mark the current choice. */
 function themePart() {
 	return `
@@ -206,6 +227,67 @@ function filterPart() {
       scope.querySelectorAll('[data-filter-empty]').forEach(function(el){ el.hidden=shown>0; });
     });`;
 }
+/**
+* Click-to-load story previews: move the inert frame out of its template (nothing runs before). A
+* frame under a signed URL first asks for a fresh root, so a page left open for hours does not mount
+* an expired token; it keeps the rendered one when that request fails. Afterwards the root is renewed
+* every `data-preview-refresh-seconds`; a failed renewal is retried a few times a minute apart.
+*/
+function previewPart() {
+	return `
+    document.addEventListener('click',function(e){
+      var btn=e.target instanceof Element ? e.target.closest('[data-preview-load]') : null;
+      var host=btn ? btn.closest('[data-preview-embed]') : null;
+      var tpl=host ? host.querySelector('template[data-preview-template]') : null;
+      if(!host||!tpl||host.getAttribute('data-preview-loading')) return;
+      host.setAttribute('data-preview-loading','1');
+      var idle=host.querySelector('[data-preview-idle]');
+      var path=host.getAttribute('data-preview-path');
+      var fresh=fetchPreviewBase(host).catch(function(){ return null; });
+      fresh.then(function(base){
+        var content=document.importNode(tpl.content,true);
+        var frame=content.querySelector('iframe');
+        if(frame&&base&&path) frame.src=base+path;
+        if(idle) idle.hidden=true;
+        host.appendChild(content);
+        tpl.remove();
+        keepPreviewFresh(host);
+      });
+    });`;
+}
+/** Fetch a fresh signed root for a preview host and keep it renewed (see {@link previewPart}). */
+function previewRefreshPart() {
+	return `
+    function fetchPreviewBase(host){
+      var url=host.getAttribute('data-preview-refresh-url');
+      if(!url) return Promise.resolve(null);
+      return fetch(url,{headers:{accept:'application/json'}}).then(function(r){
+        if(!r.ok) throw new Error('preview-token');
+        return r.json();
+      }).then(function(body){ return body&&body.base ? body.base : null; });
+    }
+    function keepPreviewFresh(host){
+      var url=host.getAttribute('data-preview-refresh-url');
+      var path=host.getAttribute('data-preview-path');
+      var seconds=Number(host.getAttribute('data-preview-refresh-seconds'));
+      if(!url||!path||!(seconds>0)) return;
+      var RETRY_MS=60000, MAX_RETRIES=3;
+      function renew(tries){
+        var frame=host.querySelector('iframe');
+        if(!host.isConnected||!frame) return;
+        fetchPreviewBase(host).then(function(base){
+          if(base) frame.src=base+path;
+          else throw new Error('preview-token');
+        }).catch(function(){
+          if(tries<MAX_RETRIES) setTimeout(function(){ renew(tries+1); },RETRY_MS);
+        });
+      }
+      var timer=setInterval(function(){
+        if(!host.isConnected||!host.querySelector('iframe')){ clearInterval(timer); return; }
+        renew(0);
+      },seconds*1000);
+    }`;
+}
 /** Thin top progress bar while an HTMX request (e.g. snapshot navigation) is in flight. */
 function loadingPart() {
 	return `
@@ -237,6 +319,7 @@ function clientScript() {
     if(!shell) return;
     var inits=[];${[
 		csrfPart(),
+		originPart(),
 		themePart(),
 		sidebarPart(),
 		dropdownPart(),
@@ -244,6 +327,8 @@ function clientScript() {
 		formPart(),
 		copyPart(),
 		filterPart(),
+		previewPart(),
+		previewRefreshPart(),
 		loadingPart(),
 		focusPart(),
 		reviewScript()
@@ -253,7 +338,6 @@ function clientScript() {
   })();
   `.trim();
 }
-//#endregion
 export { clientScript };
 
 //# sourceMappingURL=client-script.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"client-script.mjs","names":[],"sources":["../../../src/ui/shell/client-script.ts"],"sourcesContent":["import { iconSpriteHref } from \"../icons/sprite.ts\";\nimport { reviewScript } from \"./review-script.ts\";\n\n/*\n * The page-end script is re-executed whenever HTMX swaps `body` (review\n * navigation does). So it is split in two: listeners are bound ONCE on\n * `document` and look elements up lazily; `inits` are re-run per render for\n * anything that needs wiring to freshly swapped elements.\n */\n\n/** Attach the CSRF token to every HTMX request. */\nfunction csrfPart(): string {\n  return `\n    document.addEventListener('htmx:configRequest',function(e){\n      var meta=document.querySelector('meta[name=\"csrf-token\"]');\n      if(meta){ e.detail.headers['x-csrf-token']=meta.getAttribute('content'); }\n    });`;\n}\n\n/** Theme menu: apply, persist, and mark the current choice. */\nfunction themePart(): string {\n  return `\n    function markTheme(){\n      var cur=document.documentElement.getAttribute('data-theme')||'system';\n      document.querySelectorAll('[data-theme-set]').forEach(function(item){\n        item.setAttribute('aria-current', item.getAttribute('data-theme-set')===cur ? 'true' : 'false');\n      });\n    }\n    inits.push(markTheme);\n    document.addEventListener('click',function(e){\n      var item=e.target instanceof Element ? e.target.closest('[data-theme-set]') : null;\n      if(!item) return;\n      var next=item.getAttribute('data-theme-set');\n      shell.applyTheme(next);\n      shell.writeCookie(shell.themeCookie,next);\n      markTheme();\n    });`;\n}\n\n/** Desktop rail collapse (persisted) and the mobile drawer. */\nfunction sidebarPart(): string {\n  return `\n    function setDrawer(open){\n      var sidebar=document.getElementById('sidebar');\n      if(!sidebar) return;\n      sidebar.classList.toggle('sidebar--open',open);\n      var backdrop=document.querySelector('[data-sidebar-backdrop]');\n      if(backdrop){ backdrop.hidden=!open; }\n      var btn=document.querySelector('[data-sidebar-toggle]');\n      if(btn){ btn.setAttribute('aria-expanded',open?'true':'false'); }\n    }\n    document.addEventListener('click',function(e){\n      var t=e.target instanceof Element ? e.target : null;\n      if(!t) return;\n      if(t.closest('[data-sidebar-toggle]')){\n        var sidebar=document.getElementById('sidebar');\n        setDrawer(!(sidebar&&sidebar.classList.contains('sidebar--open')));\n      } else if(t.closest('[data-sidebar-backdrop]')){\n        setDrawer(false);\n      } else if(t.closest('[data-sidebar-collapse]')){\n        var next=document.documentElement.getAttribute('data-sidebar')==='rail' ? 'full' : 'rail';\n        shell.applySidebar(next);\n        shell.writeCookie(shell.sidebarCookie,next);\n      }\n    });\n    document.addEventListener('keydown',function(e){\n      var sidebar=document.getElementById('sidebar');\n      if(e.key==='Escape'&&sidebar&&sidebar.classList.contains('sidebar--open')){\n        setDrawer(false);\n        var btn=document.querySelector('[data-sidebar-toggle]');\n        if(btn) btn.focus();\n      }\n    });`;\n}\n\n/** Native <details> dropdowns: close on outside click, Escape, or choosing an item. */\nfunction dropdownPart(): string {\n  return `\n    document.addEventListener('click',function(e){\n      var target=e.target instanceof Element ? e.target : null;\n      var owner=target ? target.closest('details[data-dropdown]') : null;\n      document.querySelectorAll('details[data-dropdown][open]').forEach(function(d){\n        if(d!==owner) d.removeAttribute('open');\n      });\n      if(owner&&target&&target.closest('[role=\"menuitem\"]')){ owner.removeAttribute('open'); }\n    });\n    document.addEventListener('keydown',function(e){\n      if(e.key!=='Escape') return;\n      var open=document.querySelector('details[data-dropdown][open]');\n      if(!open) return;\n      open.removeAttribute('open');\n      var summary=open.querySelector('summary');\n      if(summary) summary.focus();\n    });`;\n}\n\n/** Build and show one toast element (text only, never HTML). */\nfunction toastRenderPart(): string {\n  return `\n    var toastIcons={success:'check-circle',danger:'x-circle',warning:'alert-triangle',info:'info'};\n    function toastIcon(tone){\n      var ns='http://www.w3.org/2000/svg';\n      var svg=document.createElementNS(ns,'svg');\n      var attrs={viewBox:'0 0 24 24',width:'18',height:'18','aria-hidden':'true',fill:'none',\n        stroke:'currentColor','stroke-width':'2','stroke-linecap':'round','stroke-linejoin':'round'};\n      Object.keys(attrs).forEach(function(name){ svg.setAttribute(name,attrs[name]); });\n      var use=document.createElementNS(ns,'use');\n      use.setAttribute('href','${iconSpriteHref}#i-'+toastIcons[tone]);\n      svg.appendChild(use);\n      return svg;\n    }\n    function toast(detail){\n      var region=document.querySelector('[data-toast-region]');\n      if(!region||!detail||!detail.message) return;\n      var tone=toastIcons[detail.tone] ? detail.tone : 'info';\n      var el=document.createElement('div');\n      el.className='toast';\n      el.setAttribute('data-tone',tone);\n      el.setAttribute('role',tone==='danger'?'alert':'status');\n      var text=document.createElement('span');\n      text.textContent=String(detail.message);\n      el.appendChild(toastIcon(tone));\n      el.appendChild(text);\n      region.appendChild(el);\n      setTimeout(function(){ el.remove(); },tone==='danger'?8000:4000);\n    }`;\n}\n\n/**\n * Toasts. Sources: an HX-Trigger(-After-Swap) \"showToast\" event, and a toast\n * queued in sessionStorage by a form with data-toast (review actions reload\n * or redirect, so the message has to survive the navigation).\n */\nfunction toastPart(): string {\n  return `${toastRenderPart()}\n    var TOAST_KEY='ss_toast';\n    function queueToast(detail){ try{ sessionStorage.setItem(TOAST_KEY,JSON.stringify(detail)); }catch(_){} }\n    function clearToast(){ try{ sessionStorage.removeItem(TOAST_KEY); }catch(_){} }\n    function flushQueued(){\n      try{\n        var raw=sessionStorage.getItem(TOAST_KEY);\n        if(!raw) return;\n        sessionStorage.removeItem(TOAST_KEY);\n        toast(JSON.parse(raw));\n      }catch(_){}\n    }\n    function flushFlash(){\n      var raw=shell.readCookie('storyshelf_flash');\n      if(!raw) return;\n      document.cookie='storyshelf_flash=; Path=/; Max-Age=0; SameSite=Lax';\n      try{ toast(JSON.parse(raw)); }catch(_){}\n    }\n    function flushToast(){ flushQueued(); flushFlash(); }\n    inits.push(flushToast);\n    document.addEventListener('htmx:beforeRequest',function(e){\n      var form=e.detail && e.detail.elt && e.detail.elt.closest ? e.detail.elt.closest('[data-toast]') : null;\n      if(form){ queueToast({message:form.getAttribute('data-toast'),tone:form.getAttribute('data-toast-tone')||'success'}); }\n    });\n    function failed(){ clearToast(); toast({message:'Something went wrong. Please try again.',tone:'danger'}); }\n    document.addEventListener('htmx:responseError',failed);\n    document.addEventListener('htmx:sendError',failed);`;\n}\n\n/**\n * Forms and body swaps. HTMX does not swap 4xx responses, but this app answers validation\n * failures with the re-rendered page (400/409/422) so field errors show.\n * \\`data-confirm\\` asks before submitting plain (non-HTMX) forms.\n */\nfunction formPart(): string {\n  return `\n    document.addEventListener('htmx:beforeSwap',function(e){\n      // A body swap only replaces <body>, so classes first used by the new page\n      // would be unstyled: adopt the stylesheet the server collected for it.\n      var match=/<style id=\"storyshelf-css\">([\\\\s\\\\S]*?)<\\\\/style>/.exec(e.detail.serverResponse||'');\n      var sheet=document.getElementById('storyshelf-css');\n      if(match&&sheet&&e.detail.target===document.body){ sheet.textContent=match[1]; }\n      var status=e.detail.xhr ? e.detail.xhr.status : 0;\n      if(status===400||status===409||status===422){\n        e.detail.shouldSwap=true;\n        e.detail.isError=false;\n        clearToast();\n      }\n    });\n    document.addEventListener('submit',function(e){\n      var form=e.target instanceof Element ? e.target.closest('form[data-confirm]') : null;\n      if(form&&!window.confirm(form.getAttribute('data-confirm')||'Are you sure?')){ e.preventDefault(); }\n    });`;\n}\n\n/** Copy buttons: `data-copy` holds the text; confirm with a toast. */\nfunction copyPart(): string {\n  return `\n    document.addEventListener('click',function(e){\n      var btn=e.target instanceof Element ? e.target.closest('[data-copy]') : null;\n      if(!btn||!navigator.clipboard) return;\n      navigator.clipboard.writeText(btn.getAttribute('data-copy')||'').then(function(){\n        toast({message:'Copied to clipboard',tone:'success'});\n      },function(){\n        toast({message:'Could not copy',tone:'danger'});\n      });\n    });`;\n}\n\n/** Client-side list filtering for `[data-filter-input]` boxes. */\nfunction filterPart(): string {\n  return `\n    document.addEventListener('input',function(e){\n      var input=e.target instanceof Element ? e.target.closest('[data-filter-input]') : null;\n      if(!input) return;\n      var scope=input.closest('[data-filter-scope]')||document;\n      var query=input.value.trim().toLowerCase();\n      var shown=0;\n      scope.querySelectorAll('[data-filter-item]').forEach(function(item){\n        var match=!query||(item.getAttribute('data-filter-text')||'').toLowerCase().indexOf(query)>-1;\n        item.hidden=!match;\n        if(match) shown++;\n      });\n      scope.querySelectorAll('[data-filter-empty]').forEach(function(el){ el.hidden=shown>0; });\n    });`;\n}\n\n/** Thin top progress bar while an HTMX request (e.g. snapshot navigation) is in flight. */\nfunction loadingPart(): string {\n  return `\n    var pending=0;\n    function setLoading(delta){\n      pending=Math.max(0,pending+delta);\n      document.documentElement.classList.toggle('ss-loading',pending>0);\n    }\n    document.addEventListener('htmx:beforeRequest',function(){ setLoading(1); });\n    document.addEventListener('htmx:afterRequest',function(){ setLoading(-1); });`;\n}\n\n/** Keep keyboard focus sensible after HTMX swaps. */\nfunction focusPart(): string {\n  return `\n    document.addEventListener('htmx:afterSwap',function(e){\n      var target=e.detail && e.detail.target;\n      if(target&&target.querySelector&&target!==document.body){\n        var focusable=target.querySelector('[autofocus], input, select, textarea, button');\n        if(focusable) try{ focusable.focus(); }catch(_){}\n      }\n    });`;\n}\n\n/** Page-end script wiring up the shell's interactive behavior (idempotent). */\nexport function clientScript(): string {\n  const parts = [\n    csrfPart(),\n    themePart(),\n    sidebarPart(),\n    dropdownPart(),\n    toastPart(),\n    formPart(),\n    copyPart(),\n    filterPart(),\n    loadingPart(),\n    focusPart(),\n    reviewScript(),\n  ];\n  return `\n  (function(){\n    if(window.__ssInit){ window.__ssInit(); return; }\n    var shell=window.__storyshelfShell;\n    if(!shell) return;\n    var inits=[];${parts.join(\"\\n\")}\n    window.__ssInit=function(){ inits.forEach(function(fn){ fn(); }); };\n    window.__ssInit();\n  })();\n  `.trim();\n}\n"],"mappings":";;;;;;;AAWA,SAAS,WAAmB;CAC1B,OAAO;;;;;AAKT;;AAGA,SAAS,YAAoB;CAC3B,OAAO;;;;;;;;;;;;;;;;AAgBT;;AAGA,SAAS,cAAsB;CAC7B,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCT;;AAGA,SAAS,eAAuB;CAC9B,OAAO;;;;;;;;;;;;;;;;;AAiBT;;AAGA,SAAS,kBAA0B;CACjC,OAAO;;;;;;;;;iCASwB,eAAe;;;;;;;;;;;;;;;;;;;AAmBhD;;;;;;AAOA,SAAS,YAAoB;CAC3B,OAAO,GAAG,gBAAgB,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2B9B;;;;;;AAOA,SAAS,WAAmB;CAC1B,OAAO;;;;;;;;;;;;;;;;;;AAkBT;;AAGA,SAAS,WAAmB;CAC1B,OAAO;;;;;;;;;;AAUT;;AAGA,SAAS,aAAqB;CAC5B,OAAO;;;;;;;;;;;;;;AAcT;;AAGA,SAAS,cAAsB;CAC7B,OAAO;;;;;;;;AAQT;;AAGA,SAAS,YAAoB;CAC3B,OAAO;;;;;;;;AAQT;;AAGA,SAAgB,eAAuB;CAcrC,OAAO;;;;;mBAKU;EAjBf,SAAS;EACT,UAAU;EACV,YAAY;EACZ,aAAa;EACb,UAAU;EACV,SAAS;EACT,SAAS;EACT,WAAW;EACX,YAAY;EACZ,UAAU;EACV,aAAa;CAOM,CAAC,CAAC,KAAK,IAAI,EAAE;;;;IAIhC,KAAK;AACT"}
+{"version":3,"file":"client-script.mjs","names":[],"sources":["../../../src/ui/shell/client-script.ts"],"sourcesContent":["import { iconSpriteHref } from \"../icons/sprite.ts\";\nimport { reviewScript } from \"./review-script.ts\";\n\n/*\n * The page-end script is re-executed whenever HTMX swaps `body` (review\n * navigation does). So it is split in two: listeners are bound ONCE on\n * `document` and look elements up lazily; `inits` are re-run per render for\n * anything that needs wiring to freshly swapped elements.\n */\n\n/** Attach the CSRF token to every HTMX request. */\nfunction csrfPart(): string {\n  return `\n    document.addEventListener('htmx:configRequest',function(e){\n      var meta=document.querySelector('meta[name=\"csrf-token\"]');\n      if(meta){ e.detail.headers['x-csrf-token']=meta.getAttribute('content'); }\n    });`;\n}\n\n/**\n * System page: report the origin the admin opened it with, so a deployment learns its public URL\n * without a redeploy (ADR 0007, decision 6). The server keeps the first report and answers 201 only\n * when it stored a new one, which is when the page reloads to show it.\n */\nfunction originPart(): string {\n  return `\n    function reportOrigin(){\n      var el=document.querySelector('[data-report-origin]');\n      if(!el || el.getAttribute('data-reported')) return;\n      el.setAttribute('data-reported','1');\n      var meta=document.querySelector('meta[name=\"csrf-token\"]');\n      fetch(el.getAttribute('data-report-origin'),{\n        method:'POST',\n        credentials:'same-origin',\n        headers:{'content-type':'application/json','x-csrf-token':meta ? meta.getAttribute('content') : ''},\n        body:JSON.stringify({origin:location.origin})\n      }).then(function(r){ if(r.status===201) location.reload(); }).catch(function(){});\n    }\n    inits.push(reportOrigin);`;\n}\n\n/** Theme menu: apply, persist, and mark the current choice. */\nfunction themePart(): string {\n  return `\n    function markTheme(){\n      var cur=document.documentElement.getAttribute('data-theme')||'system';\n      document.querySelectorAll('[data-theme-set]').forEach(function(item){\n        item.setAttribute('aria-current', item.getAttribute('data-theme-set')===cur ? 'true' : 'false');\n      });\n    }\n    inits.push(markTheme);\n    document.addEventListener('click',function(e){\n      var item=e.target instanceof Element ? e.target.closest('[data-theme-set]') : null;\n      if(!item) return;\n      var next=item.getAttribute('data-theme-set');\n      shell.applyTheme(next);\n      shell.writeCookie(shell.themeCookie,next);\n      markTheme();\n    });`;\n}\n\n/** Desktop rail collapse (persisted) and the mobile drawer. */\nfunction sidebarPart(): string {\n  return `\n    function setDrawer(open){\n      var sidebar=document.getElementById('sidebar');\n      if(!sidebar) return;\n      sidebar.classList.toggle('sidebar--open',open);\n      var backdrop=document.querySelector('[data-sidebar-backdrop]');\n      if(backdrop){ backdrop.hidden=!open; }\n      var btn=document.querySelector('[data-sidebar-toggle]');\n      if(btn){ btn.setAttribute('aria-expanded',open?'true':'false'); }\n    }\n    document.addEventListener('click',function(e){\n      var t=e.target instanceof Element ? e.target : null;\n      if(!t) return;\n      if(t.closest('[data-sidebar-toggle]')){\n        var sidebar=document.getElementById('sidebar');\n        setDrawer(!(sidebar&&sidebar.classList.contains('sidebar--open')));\n      } else if(t.closest('[data-sidebar-backdrop]')){\n        setDrawer(false);\n      } else if(t.closest('[data-sidebar-collapse]')){\n        var next=document.documentElement.getAttribute('data-sidebar')==='rail' ? 'full' : 'rail';\n        shell.applySidebar(next);\n        shell.writeCookie(shell.sidebarCookie,next);\n      }\n    });\n    document.addEventListener('keydown',function(e){\n      var sidebar=document.getElementById('sidebar');\n      if(e.key==='Escape'&&sidebar&&sidebar.classList.contains('sidebar--open')){\n        setDrawer(false);\n        var btn=document.querySelector('[data-sidebar-toggle]');\n        if(btn) btn.focus();\n      }\n    });`;\n}\n\n/** Native <details> dropdowns: close on outside click, Escape, or choosing an item. */\nfunction dropdownPart(): string {\n  return `\n    document.addEventListener('click',function(e){\n      var target=e.target instanceof Element ? e.target : null;\n      var owner=target ? target.closest('details[data-dropdown]') : null;\n      document.querySelectorAll('details[data-dropdown][open]').forEach(function(d){\n        if(d!==owner) d.removeAttribute('open');\n      });\n      if(owner&&target&&target.closest('[role=\"menuitem\"]')){ owner.removeAttribute('open'); }\n    });\n    document.addEventListener('keydown',function(e){\n      if(e.key!=='Escape') return;\n      var open=document.querySelector('details[data-dropdown][open]');\n      if(!open) return;\n      open.removeAttribute('open');\n      var summary=open.querySelector('summary');\n      if(summary) summary.focus();\n    });`;\n}\n\n/** Build and show one toast element (text only, never HTML). */\nfunction toastRenderPart(): string {\n  return `\n    var toastIcons={success:'check-circle',danger:'x-circle',warning:'alert-triangle',info:'info'};\n    function toastIcon(tone){\n      var ns='http://www.w3.org/2000/svg';\n      var svg=document.createElementNS(ns,'svg');\n      var attrs={viewBox:'0 0 24 24',width:'18',height:'18','aria-hidden':'true',fill:'none',\n        stroke:'currentColor','stroke-width':'2','stroke-linecap':'round','stroke-linejoin':'round'};\n      Object.keys(attrs).forEach(function(name){ svg.setAttribute(name,attrs[name]); });\n      var use=document.createElementNS(ns,'use');\n      use.setAttribute('href','${iconSpriteHref}#i-'+toastIcons[tone]);\n      svg.appendChild(use);\n      return svg;\n    }\n    function toast(detail){\n      var region=document.querySelector('[data-toast-region]');\n      if(!region||!detail||!detail.message) return;\n      var tone=toastIcons[detail.tone] ? detail.tone : 'info';\n      var el=document.createElement('div');\n      el.className='toast';\n      el.setAttribute('data-tone',tone);\n      el.setAttribute('role',tone==='danger'?'alert':'status');\n      var text=document.createElement('span');\n      text.textContent=String(detail.message);\n      el.appendChild(toastIcon(tone));\n      el.appendChild(text);\n      region.appendChild(el);\n      setTimeout(function(){ el.remove(); },tone==='danger'?8000:4000);\n    }`;\n}\n\n/**\n * Toasts. Sources: an HX-Trigger(-After-Swap) \"showToast\" event, and a toast\n * queued in sessionStorage by a form with data-toast (review actions reload\n * or redirect, so the message has to survive the navigation).\n */\nfunction toastPart(): string {\n  return `${toastRenderPart()}\n    var TOAST_KEY='ss_toast';\n    function queueToast(detail){ try{ sessionStorage.setItem(TOAST_KEY,JSON.stringify(detail)); }catch(_){} }\n    function clearToast(){ try{ sessionStorage.removeItem(TOAST_KEY); }catch(_){} }\n    function flushQueued(){\n      try{\n        var raw=sessionStorage.getItem(TOAST_KEY);\n        if(!raw) return;\n        sessionStorage.removeItem(TOAST_KEY);\n        toast(JSON.parse(raw));\n      }catch(_){}\n    }\n    function flushFlash(){\n      var raw=shell.readCookie('storyshelf_flash');\n      if(!raw) return;\n      document.cookie='storyshelf_flash=; Path=/; Max-Age=0; SameSite=Lax';\n      try{ toast(JSON.parse(raw)); }catch(_){}\n    }\n    function flushToast(){ flushQueued(); flushFlash(); }\n    inits.push(flushToast);\n    document.addEventListener('htmx:beforeRequest',function(e){\n      var form=e.detail && e.detail.elt && e.detail.elt.closest ? e.detail.elt.closest('[data-toast]') : null;\n      if(form){ queueToast({message:form.getAttribute('data-toast'),tone:form.getAttribute('data-toast-tone')||'success'}); }\n    });\n    function failed(){ clearToast(); toast({message:'Something went wrong. Please try again.',tone:'danger'}); }\n    document.addEventListener('htmx:responseError',failed);\n    document.addEventListener('htmx:sendError',failed);`;\n}\n\n/**\n * Forms and body swaps. HTMX does not swap 4xx responses, but this app answers validation\n * failures with the re-rendered page (400/409/422) so field errors show.\n * \\`data-confirm\\` asks before submitting plain (non-HTMX) forms.\n */\nfunction formPart(): string {\n  return `\n    document.addEventListener('htmx:beforeSwap',function(e){\n      // A body swap only replaces <body>, so classes first used by the new page\n      // would be unstyled: adopt the stylesheet the server collected for it.\n      var match=/<style id=\"storyshelf-css\">([\\\\s\\\\S]*?)<\\\\/style>/.exec(e.detail.serverResponse||'');\n      var sheet=document.getElementById('storyshelf-css');\n      if(match&&sheet&&e.detail.target===document.body){ sheet.textContent=match[1]; }\n      var status=e.detail.xhr ? e.detail.xhr.status : 0;\n      if(status===400||status===409||status===422){\n        e.detail.shouldSwap=true;\n        e.detail.isError=false;\n        clearToast();\n      }\n    });\n    document.addEventListener('submit',function(e){\n      var form=e.target instanceof Element ? e.target.closest('form[data-confirm]') : null;\n      if(form&&!window.confirm(form.getAttribute('data-confirm')||'Are you sure?')){ e.preventDefault(); }\n    });`;\n}\n\n/** Copy buttons: `data-copy` holds the text; confirm with a toast. */\nfunction copyPart(): string {\n  return `\n    document.addEventListener('click',function(e){\n      var btn=e.target instanceof Element ? e.target.closest('[data-copy]') : null;\n      if(!btn||!navigator.clipboard) return;\n      navigator.clipboard.writeText(btn.getAttribute('data-copy')||'').then(function(){\n        toast({message:'Copied to clipboard',tone:'success'});\n      },function(){\n        toast({message:'Could not copy',tone:'danger'});\n      });\n    });`;\n}\n\n/** Client-side list filtering for `[data-filter-input]` boxes. */\nfunction filterPart(): string {\n  return `\n    document.addEventListener('input',function(e){\n      var input=e.target instanceof Element ? e.target.closest('[data-filter-input]') : null;\n      if(!input) return;\n      var scope=input.closest('[data-filter-scope]')||document;\n      var query=input.value.trim().toLowerCase();\n      var shown=0;\n      scope.querySelectorAll('[data-filter-item]').forEach(function(item){\n        var match=!query||(item.getAttribute('data-filter-text')||'').toLowerCase().indexOf(query)>-1;\n        item.hidden=!match;\n        if(match) shown++;\n      });\n      scope.querySelectorAll('[data-filter-empty]').forEach(function(el){ el.hidden=shown>0; });\n    });`;\n}\n\n/**\n * Click-to-load story previews: move the inert frame out of its template (nothing runs before). A\n * frame under a signed URL first asks for a fresh root, so a page left open for hours does not mount\n * an expired token; it keeps the rendered one when that request fails. Afterwards the root is renewed\n * every `data-preview-refresh-seconds`; a failed renewal is retried a few times a minute apart.\n */\nfunction previewPart(): string {\n  return `\n    document.addEventListener('click',function(e){\n      var btn=e.target instanceof Element ? e.target.closest('[data-preview-load]') : null;\n      var host=btn ? btn.closest('[data-preview-embed]') : null;\n      var tpl=host ? host.querySelector('template[data-preview-template]') : null;\n      if(!host||!tpl||host.getAttribute('data-preview-loading')) return;\n      host.setAttribute('data-preview-loading','1');\n      var idle=host.querySelector('[data-preview-idle]');\n      var path=host.getAttribute('data-preview-path');\n      var fresh=fetchPreviewBase(host).catch(function(){ return null; });\n      fresh.then(function(base){\n        var content=document.importNode(tpl.content,true);\n        var frame=content.querySelector('iframe');\n        if(frame&&base&&path) frame.src=base+path;\n        if(idle) idle.hidden=true;\n        host.appendChild(content);\n        tpl.remove();\n        keepPreviewFresh(host);\n      });\n    });`;\n}\n\n/** Fetch a fresh signed root for a preview host and keep it renewed (see {@link previewPart}). */\nfunction previewRefreshPart(): string {\n  return `\n    function fetchPreviewBase(host){\n      var url=host.getAttribute('data-preview-refresh-url');\n      if(!url) return Promise.resolve(null);\n      return fetch(url,{headers:{accept:'application/json'}}).then(function(r){\n        if(!r.ok) throw new Error('preview-token');\n        return r.json();\n      }).then(function(body){ return body&&body.base ? body.base : null; });\n    }\n    function keepPreviewFresh(host){\n      var url=host.getAttribute('data-preview-refresh-url');\n      var path=host.getAttribute('data-preview-path');\n      var seconds=Number(host.getAttribute('data-preview-refresh-seconds'));\n      if(!url||!path||!(seconds>0)) return;\n      var RETRY_MS=60000, MAX_RETRIES=3;\n      function renew(tries){\n        var frame=host.querySelector('iframe');\n        if(!host.isConnected||!frame) return;\n        fetchPreviewBase(host).then(function(base){\n          if(base) frame.src=base+path;\n          else throw new Error('preview-token');\n        }).catch(function(){\n          if(tries<MAX_RETRIES) setTimeout(function(){ renew(tries+1); },RETRY_MS);\n        });\n      }\n      var timer=setInterval(function(){\n        if(!host.isConnected||!host.querySelector('iframe')){ clearInterval(timer); return; }\n        renew(0);\n      },seconds*1000);\n    }`;\n}\n\n/** Thin top progress bar while an HTMX request (e.g. snapshot navigation) is in flight. */\nfunction loadingPart(): string {\n  return `\n    var pending=0;\n    function setLoading(delta){\n      pending=Math.max(0,pending+delta);\n      document.documentElement.classList.toggle('ss-loading',pending>0);\n    }\n    document.addEventListener('htmx:beforeRequest',function(){ setLoading(1); });\n    document.addEventListener('htmx:afterRequest',function(){ setLoading(-1); });`;\n}\n\n/** Keep keyboard focus sensible after HTMX swaps. */\nfunction focusPart(): string {\n  return `\n    document.addEventListener('htmx:afterSwap',function(e){\n      var target=e.detail && e.detail.target;\n      if(target&&target.querySelector&&target!==document.body){\n        var focusable=target.querySelector('[autofocus], input, select, textarea, button');\n        if(focusable) try{ focusable.focus(); }catch(_){}\n      }\n    });`;\n}\n\n/** Page-end script wiring up the shell's interactive behavior (idempotent). */\nexport function clientScript(): string {\n  const parts = [\n    csrfPart(),\n    originPart(),\n    themePart(),\n    sidebarPart(),\n    dropdownPart(),\n    toastPart(),\n    formPart(),\n    copyPart(),\n    filterPart(),\n    previewPart(),\n    previewRefreshPart(),\n    loadingPart(),\n    focusPart(),\n    reviewScript(),\n  ];\n  return `\n  (function(){\n    if(window.__ssInit){ window.__ssInit(); return; }\n    var shell=window.__storyshelfShell;\n    if(!shell) return;\n    var inits=[];${parts.join(\"\\n\")}\n    window.__ssInit=function(){ inits.forEach(function(fn){ fn(); }); };\n    window.__ssInit();\n  })();\n  `.trim();\n}\n"],"mappings":";;;;;;;AAWA,SAAS,WAAmB;CAC1B,OAAO;;;;;AAKT;;;;;;AAOA,SAAS,aAAqB;CAC5B,OAAO;;;;;;;;;;;;;;AAcT;;AAGA,SAAS,YAAoB;CAC3B,OAAO;;;;;;;;;;;;;;;;AAgBT;;AAGA,SAAS,cAAsB;CAC7B,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCT;;AAGA,SAAS,eAAuB;CAC9B,OAAO;;;;;;;;;;;;;;;;;AAiBT;;AAGA,SAAS,kBAA0B;CACjC,OAAO;;;;;;;;;iCASwB,eAAe;;;;;;;;;;;;;;;;;;;AAmBhD;;;;;;AAOA,SAAS,YAAoB;CAC3B,OAAO,GAAG,gBAAgB,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2B9B;;;;;;AAOA,SAAS,WAAmB;CAC1B,OAAO;;;;;;;;;;;;;;;;;;AAkBT;;AAGA,SAAS,WAAmB;CAC1B,OAAO;;;;;;;;;;AAUT;;AAGA,SAAS,aAAqB;CAC5B,OAAO;;;;;;;;;;;;;;AAcT;;;;;;;AAQA,SAAS,cAAsB;CAC7B,OAAO;;;;;;;;;;;;;;;;;;;;AAoBT;;AAGA,SAAS,qBAA6B;CACpC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BT;;AAGA,SAAS,cAAsB;CAC7B,OAAO;;;;;;;;AAQT;;AAGA,SAAS,YAAoB;CAC3B,OAAO;;;;;;;;AAQT;;AAGA,SAAgB,eAAuB;CAiBrC,OAAO;;;;;mBAKU;EApBf,SAAS;EACT,WAAW;EACX,UAAU;EACV,YAAY;EACZ,aAAa;EACb,UAAU;EACV,SAAS;EACT,SAAS;EACT,WAAW;EACX,YAAY;EACZ,mBAAmB;EACnB,YAAY;EACZ,UAAU;EACV,aAAa;CAOM,CAAC,CAAC,KAAK,IAAI,EAAE;;;;IAIhC,KAAK;AACT"}

package/dist/ui/shell/nav.mjs

@@ -1,9 +1,18 @@
 import "node:path";
 import "node:url";
 import.meta.url;
-//#region src/ui/shell/nav.ts
-/** Entries shown for the current project. */
-function projectNavItems(urls, slug) {
+// 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.
+*/
+function projectNavItems(urls, slug, testing = true) {
+	const jobs = {
+		key: "jobs",
+		label: "Jobs",
+		href: urls.jobs(slug),
+		icon: "activity"
+	};
 	return [
 		{
 			key: "library",
@@ -17,12 +26,7 @@ function projectNavItems(urls, slug) {
 			href: urls.buildsList(slug),
 			icon: "layers"
 		},
-		{
-			key: "jobs",
-			label: "Jobs",
-			href: urls.jobs(slug),
-			icon: "activity"
-		},
+		...testing ? [jobs] : [],
 		{
 			key: "labels",
 			label: "Labels",
@@ -105,7 +109,6 @@ function sectionCrumb(nav, urls) {
 		}
 	}[nav?.active ?? ""] ?? null;
 }
-//#endregion
 export { adminNavItems, breadcrumbs, developerNavItems, projectNavItems };
 
 //# sourceMappingURL=nav.mjs.map

package/dist/ui/shell/nav.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"nav.mjs","names":[],"sources":["../../../src/ui/shell/nav.ts"],"sourcesContent":["import type { IconName } from \"../icons/paths.ts\";\n\n/** Which nav entry is active and which project (if any) the page belongs to. */\nexport interface NavConfig {\n  active?: string;\n  projectSlug?: string;\n  projectName?: string;\n  /** Levels below the section, ending with the current page (e.g. a build, then \"Review\"). */\n  trail?: NavCrumb[];\n}\n\n/** One breadcrumb level; the last trail item is the current page (it needs no `href`). */\nexport interface NavCrumb {\n  label: string;\n  href?: string;\n}\n\n/** One sidebar entry. */\nexport interface NavItem {\n  key: string;\n  label: string;\n  href: string;\n  icon: IconName;\n  /** Opens in a new tab (raw API output). */\n  external?: boolean;\n}\n\n/** Subset of the URL builder the nav needs (keeps this module pure). */\nexport interface NavUrls {\n  projects(): string;\n  library(slug: string): string;\n  buildsList(slug: string): string;\n  jobs(slug: string): string;\n  labels(slug: string): string;\n  settings(slug: string): string;\n}\n\n/** Entries shown for the current project. */\nexport function projectNavItems(urls: NavUrls, slug: string): NavItem[] {\n  return [\n    { key: \"library\", label: \"Library\", href: urls.library(slug), icon: \"image\" },\n    { key: \"builds\", label: \"Builds\", href: urls.buildsList(slug), icon: \"layers\" },\n    { key: \"jobs\", label: \"Jobs\", href: urls.jobs(slug), icon: \"activity\" },\n    { key: \"labels\", label: \"Labels\", href: urls.labels(slug), icon: \"tag\" },\n    { key: \"settings\", label: \"Settings\", href: urls.settings(slug), icon: \"settings\" },\n  ];\n}\n\n/** Developer entries (API reference). */\nexport function developerNavItems(): NavItem[] {\n  return [\n    { key: \"api-docs\", label: \"API docs\", href: \"/api/v1/docs\", icon: \"book\" },\n    {\n      key: \"openapi\",\n      label: \"OpenAPI spec\",\n      href: \"/api/v1/openapi.json\",\n      icon: \"code\",\n      external: true,\n    },\n  ];\n}\n\n/** Administration entries (admins only). */\nexport function adminNavItems(): NavItem[] {\n  return [{ key: \"admin\", label: \"System\", href: \"/admin\", icon: \"server\" }];\n}\n\n/**\n * Breadcrumbs after the project picker: the *ancestors* of the current page.\n * The page itself is named by its heading, so it is never repeated here —\n * the section plus `nav.trail` describe where the page is, and the last item\n * (the current page) is dropped. Every returned crumb links somewhere, and\n * the last one is the page's parent.\n */\nexport function breadcrumbs(nav: NavConfig | undefined, urls: NavUrls): NavCrumb[] {\n  const section = sectionCrumb(nav, urls);\n  const path = section ? [section, ...(nav?.trail ?? [])] : [...(nav?.trail ?? [])];\n  return path.slice(0, -1).filter((crumb) => crumb.href !== undefined);\n}\n\nfunction sectionCrumb(nav: NavConfig | undefined, urls: NavUrls): NavCrumb | null {\n  const slug = nav?.projectSlug;\n  const table: Record<string, NavCrumb | undefined> = {\n    library: slug ? { label: \"Library\", href: urls.library(slug) } : undefined,\n    builds: slug ? { label: \"Builds\", href: urls.buildsList(slug) } : undefined,\n    jobs: slug ? { label: \"Jobs\", href: urls.jobs(slug) } : undefined,\n    labels: slug ? { label: \"Labels\", href: urls.labels(slug) } : undefined,\n    settings: slug ? { label: \"Settings\", href: urls.settings(slug) } : undefined,\n    admin: { label: \"System\", href: \"/admin\" },\n    profile: { label: \"Profile\", href: \"/profile\" },\n  };\n  return table[nav?.active ?? \"\"] ?? null;\n}\n"],"mappings":";;;;;AAsCA,SAAgB,gBAAgB,MAAe,MAAyB;CACtE,OAAO;EACL;GAAE,KAAK;GAAW,OAAO;GAAW,MAAM,KAAK,QAAQ,IAAI;GAAG,MAAM;EAAQ;EAC5E;GAAE,KAAK;GAAU,OAAO;GAAU,MAAM,KAAK,WAAW,IAAI;GAAG,MAAM;EAAS;EAC9E;GAAE,KAAK;GAAQ,OAAO;GAAQ,MAAM,KAAK,KAAK,IAAI;GAAG,MAAM;EAAW;EACtE;GAAE,KAAK;GAAU,OAAO;GAAU,MAAM,KAAK,OAAO,IAAI;GAAG,MAAM;EAAM;EACvE;GAAE,KAAK;GAAY,OAAO;GAAY,MAAM,KAAK,SAAS,IAAI;GAAG,MAAM;EAAW;CACpF;AACF;;AAGA,SAAgB,oBAA+B;CAC7C,OAAO,CACL;EAAE,KAAK;EAAY,OAAO;EAAY,MAAM;EAAgB,MAAM;CAAO,GACzE;EACE,KAAK;EACL,OAAO;EACP,MAAM;EACN,MAAM;EACN,UAAU;CACZ,CACF;AACF;;AAGA,SAAgB,gBAA2B;CACzC,OAAO,CAAC;EAAE,KAAK;EAAS,OAAO;EAAU,MAAM;EAAU,MAAM;CAAS,CAAC;AAC3E;;;;;;;;AASA,SAAgB,YAAY,KAA4B,MAA2B;CACjF,MAAM,UAAU,aAAa,KAAK,IAAI;CAEtC,QADa,UAAU,CAAC,SAAS,GAAI,KAAK,SAAS,CAAC,CAAE,IAAI,CAAC,GAAI,KAAK,SAAS,CAAC,CAAE,EAAA,CACpE,MAAM,GAAG,EAAE,CAAC,CAAC,QAAQ,UAAU,MAAM,SAAS,KAAA,CAAS;AACrE;AAEA,SAAS,aAAa,KAA4B,MAAgC;CAChF,MAAM,OAAO,KAAK;CAUlB,OAAO;EARL,SAAS,OAAO;GAAE,OAAO;GAAW,MAAM,KAAK,QAAQ,IAAI;EAAE,IAAI,KAAA;EACjE,QAAQ,OAAO;GAAE,OAAO;GAAU,MAAM,KAAK,WAAW,IAAI;EAAE,IAAI,KAAA;EAClE,MAAM,OAAO;GAAE,OAAO;GAAQ,MAAM,KAAK,KAAK,IAAI;EAAE,IAAI,KAAA;EACxD,QAAQ,OAAO;GAAE,OAAO;GAAU,MAAM,KAAK,OAAO,IAAI;EAAE,IAAI,KAAA;EAC9D,UAAU,OAAO;GAAE,OAAO;GAAY,MAAM,KAAK,SAAS,IAAI;EAAE,IAAI,KAAA;EACpE,OAAO;GAAE,OAAO;GAAU,MAAM;EAAS;EACzC,SAAS;GAAE,OAAO;GAAW,MAAM;EAAW;CAErC,EAAE,KAAK,UAAU,OAAO;AACrC"}
+{"version":3,"file":"nav.mjs","names":[],"sources":["../../../src/ui/shell/nav.ts"],"sourcesContent":["import type { IconName } from \"../icons/paths.ts\";\n\n/** Which nav entry is active and which project (if any) the page belongs to. */\nexport interface NavConfig {\n  active?: string;\n  projectSlug?: string;\n  projectName?: string;\n  /** Levels below the section, ending with the current page (e.g. a build, then \"Review\"). */\n  trail?: NavCrumb[];\n}\n\n/** One breadcrumb level; the last trail item is the current page (it needs no `href`). */\nexport interface NavCrumb {\n  label: string;\n  href?: string;\n}\n\n/** One sidebar entry. */\nexport interface NavItem {\n  key: string;\n  label: string;\n  href: string;\n  icon: IconName;\n  /** Opens in a new tab (raw API output). */\n  external?: boolean;\n}\n\n/** Subset of the URL builder the nav needs (keeps this module pure). */\nexport interface NavUrls {\n  projects(): string;\n  library(slug: string): string;\n  buildsList(slug: string): string;\n  jobs(slug: string): string;\n  labels(slug: string): string;\n  settings(slug: string): string;\n}\n\n/**\n * Entries shown for the current project. Entries for `testing` routes (Jobs) drop out on a\n * hosting-only instance, where those routes answer 404.\n */\nexport function projectNavItems(urls: NavUrls, slug: string, testing = true): NavItem[] {\n  const jobs: NavItem = { key: \"jobs\", label: \"Jobs\", href: urls.jobs(slug), icon: \"activity\" };\n  return [\n    { key: \"library\", label: \"Library\", href: urls.library(slug), icon: \"image\" },\n    { key: \"builds\", label: \"Builds\", href: urls.buildsList(slug), icon: \"layers\" },\n    ...(testing ? [jobs] : []),\n    { key: \"labels\", label: \"Labels\", href: urls.labels(slug), icon: \"tag\" },\n    { key: \"settings\", label: \"Settings\", href: urls.settings(slug), icon: \"settings\" },\n  ];\n}\n\n/** Developer entries (API reference). */\nexport function developerNavItems(): NavItem[] {\n  return [\n    { key: \"api-docs\", label: \"API docs\", href: \"/api/v1/docs\", icon: \"book\" },\n    {\n      key: \"openapi\",\n      label: \"OpenAPI spec\",\n      href: \"/api/v1/openapi.json\",\n      icon: \"code\",\n      external: true,\n    },\n  ];\n}\n\n/** Administration entries (admins only). */\nexport function adminNavItems(): NavItem[] {\n  return [{ key: \"admin\", label: \"System\", href: \"/admin\", icon: \"server\" }];\n}\n\n/**\n * Breadcrumbs after the project picker: the *ancestors* of the current page.\n * The page itself is named by its heading, so it is never repeated here —\n * the section plus `nav.trail` describe where the page is, and the last item\n * (the current page) is dropped. Every returned crumb links somewhere, and\n * the last one is the page's parent.\n */\nexport function breadcrumbs(nav: NavConfig | undefined, urls: NavUrls): NavCrumb[] {\n  const section = sectionCrumb(nav, urls);\n  const path = section ? [section, ...(nav?.trail ?? [])] : [...(nav?.trail ?? [])];\n  return path.slice(0, -1).filter((crumb) => crumb.href !== undefined);\n}\n\nfunction sectionCrumb(nav: NavConfig | undefined, urls: NavUrls): NavCrumb | null {\n  const slug = nav?.projectSlug;\n  const table: Record<string, NavCrumb | undefined> = {\n    library: slug ? { label: \"Library\", href: urls.library(slug) } : undefined,\n    builds: slug ? { label: \"Builds\", href: urls.buildsList(slug) } : undefined,\n    jobs: slug ? { label: \"Jobs\", href: urls.jobs(slug) } : undefined,\n    labels: slug ? { label: \"Labels\", href: urls.labels(slug) } : undefined,\n    settings: slug ? { label: \"Settings\", href: urls.settings(slug) } : undefined,\n    admin: { label: \"System\", href: \"/admin\" },\n    profile: { label: \"Profile\", href: \"/profile\" },\n  };\n  return table[nav?.active ?? \"\"] ?? null;\n}\n"],"mappings":";;;;;;;;AAyCA,SAAgB,gBAAgB,MAAe,MAAc,UAAU,MAAiB;CACtF,MAAM,OAAgB;EAAE,KAAK;EAAQ,OAAO;EAAQ,MAAM,KAAK,KAAK,IAAI;EAAG,MAAM;CAAW;CAC5F,OAAO;EACL;GAAE,KAAK;GAAW,OAAO;GAAW,MAAM,KAAK,QAAQ,IAAI;GAAG,MAAM;EAAQ;EAC5E;GAAE,KAAK;GAAU,OAAO;GAAU,MAAM,KAAK,WAAW,IAAI;GAAG,MAAM;EAAS;EAC9E,GAAI,UAAU,CAAC,IAAI,IAAI,CAAC;EACxB;GAAE,KAAK;GAAU,OAAO;GAAU,MAAM,KAAK,OAAO,IAAI;GAAG,MAAM;EAAM;EACvE;GAAE,KAAK;GAAY,OAAO;GAAY,MAAM,KAAK,SAAS,IAAI;GAAG,MAAM;EAAW;CACpF;AACF;;AAGA,SAAgB,oBAA+B;CAC7C,OAAO,CACL;EAAE,KAAK;EAAY,OAAO;EAAY,MAAM;EAAgB,MAAM;CAAO,GACzE;EACE,KAAK;EACL,OAAO;EACP,MAAM;EACN,MAAM;EACN,UAAU;CACZ,CACF;AACF;;AAGA,SAAgB,gBAA2B;CACzC,OAAO,CAAC;EAAE,KAAK;EAAS,OAAO;EAAU,MAAM;EAAU,MAAM;CAAS,CAAC;AAC3E;;;;;;;;AASA,SAAgB,YAAY,KAA4B,MAA2B;CACjF,MAAM,UAAU,aAAa,KAAK,IAAI;CAEtC,QADa,UAAU,CAAC,SAAS,GAAI,KAAK,SAAS,CAAC,CAAE,IAAI,CAAC,GAAI,KAAK,SAAS,CAAC,CAAE,EAAA,CACpE,MAAM,GAAG,EAAE,CAAC,CAAC,QAAQ,UAAU,MAAM,SAAS,KAAA,CAAS;AACrE;AAEA,SAAS,aAAa,KAA4B,MAAgC;CAChF,MAAM,OAAO,KAAK;CAUlB,OAAO;EARL,SAAS,OAAO;GAAE,OAAO;GAAW,MAAM,KAAK,QAAQ,IAAI;EAAE,IAAI,KAAA;EACjE,QAAQ,OAAO;GAAE,OAAO;GAAU,MAAM,KAAK,WAAW,IAAI;EAAE,IAAI,KAAA;EAClE,MAAM,OAAO;GAAE,OAAO;GAAQ,MAAM,KAAK,KAAK,IAAI;EAAE,IAAI,KAAA;EACxD,QAAQ,OAAO;GAAE,OAAO;GAAU,MAAM,KAAK,OAAO,IAAI;EAAE,IAAI,KAAA;EAC9D,UAAU,OAAO;GAAE,OAAO;GAAY,MAAM,KAAK,SAAS,IAAI;EAAE,IAAI,KAAA;EACpE,OAAO;GAAE,OAAO;GAAU,MAAM;EAAS;EACzC,SAAS;GAAE,OAAO;GAAW,MAAM;EAAW;CAErC,EAAE,KAAK,UAAU,OAAO;AACrC"}

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); }
@@ -166,7 +181,15 @@ function keyboardShortcuts() {
       if(el&&!el.disabled){ el.click(); return true; }
       return false;
     }
+    function stepBrowser(dir){
+      var tabs=[].slice.call(document.querySelectorAll('[data-browser-tabs] a'));
+      var at=tabs.findIndex(function(a){ return a.getAttribute('aria-current')==='page'; });
+      var target=at===-1?null:tabs[at+dir];
+      if(target){ target.click(); return true; }
+      return false;
+    }
     function handleKey(key,stage){
+      if(key==='['||key===']') return stepBrowser(key===']'?1:-1);
       if(key==='j'||key==='ArrowRight') return press1('[data-snap-next]');
       if(key==='k'||key==='ArrowLeft') return press1('[data-snap-prev]');
       if(key==='a'||key==='A') return press1('[data-approve]');
@@ -184,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 handleKey(key,stage){\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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCT"}
+{"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.
@@ -253,7 +253,7 @@ const Brand = ({ name, logo, href }) => {
 };
 /** Primary navigation: brand, workspace, project, developer, and admin entries. */
 const Sidebar = ({ nav, name, logo }) => {
-	const { user, authEnabled, config } = getStore();
+	const { user, authEnabled, config, testing } = getStore();
 	const urls = createUrlBuilder("/", config.publishedBaseDomain);
 	const showAdmin = !authEnabled || user?.role === "admin";
 	const projects = {
@@ -282,7 +282,7 @@ const Sidebar = ({ nav, name, logo }) => {
 					}),
 					nav?.projectSlug ? /* @__PURE__ */ jsx(NavSection, {
 						title: "Project",
-						items: projectNavItems(urls, nav.projectSlug),
+						items: projectNavItems(urls, nav.projectSlug, testing),
 						active: nav.active
 					}) : null,
 					/* @__PURE__ */ jsx(NavSection, {
@@ -317,7 +317,6 @@ const Sidebar = ({ nav, name, logo }) => {
 		]
 	});
 };
-//#endregion
 export { Sidebar };
 
 //# sourceMappingURL=sidebar.mjs.map

package/dist/ui/shell/sidebar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.mjs","names":[],"sources":["../../../src/ui/shell/sidebar.tsx"],"sourcesContent":["import { createUrlBuilder, safeImageUrl } from \"@storyshelf/core/urls\";\nimport type { FC } from \"hono/jsx\";\nimport { getStore } from \"../../store.ts\";\nimport { css } from \"../css.ts\";\nimport { Icon } from \"../icons/icon.tsx\";\nimport { ThemeMenu, UserMenu } from \"./account.tsx\";\nimport {\n  adminNavItems,\n  developerNavItems,\n  projectNavItems,\n  type NavConfig,\n  type NavItem,\n} from \"./nav.ts\";\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\n/**\n * Left rail. Collapses to icons only on desktop (`html[data-sidebar=\"rail\"]`)\n * and becomes an off-canvas drawer on small screens.\n */\nconst shellSidebar = css`\n  /* shell-sidebar */\n  position: sticky;\n  top: 0;\n  height: 100vh;\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-2);\n  padding: var(--space-3) var(--space-2);\n  background: var(--sidebar-bg);\n  border-right: 1px solid var(--border);\n  .sidebar__brand {\n    display: flex;\n    align-items: center;\n    gap: 0.6rem;\n    min-height: 40px;\n    padding: 0 var(--space-2);\n    color: var(--text-primary);\n    font-weight: 650;\n    font-size: var(--text-lg);\n    letter-spacing: -0.01em;\n    text-decoration: none;\n  }\n  .sidebar__brand:hover {\n    text-decoration: none;\n  }\n  .sidebar__mark {\n    flex: none;\n    display: inline-grid;\n    place-items: center;\n    width: 28px;\n    height: 28px;\n    border-radius: var(--radius);\n    background: var(--accent);\n    color: var(--accent-contrast);\n  }\n  .sidebar__logo {\n    flex: none;\n    border-radius: var(--radius-sm);\n    object-fit: contain;\n  }\n  .sidebar__nav {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    flex: 1;\n    min-height: 0;\n    overflow-x: hidden;\n    overflow-y: auto;\n  }\n  .sidebar__section {\n    margin: var(--space-4) 0 var(--space-1);\n    padding: 0 var(--space-3);\n    color: var(--text-secondary);\n    font-size: 0.68rem;\n    font-weight: 600;\n    letter-spacing: 0.08em;\n    text-transform: uppercase;\n    white-space: nowrap;\n  }\n  .sidebar__link {\n    display: flex;\n    align-items: center;\n    gap: 0.65rem;\n    min-height: 38px;\n    padding: 0.4rem var(--space-3);\n    border-radius: var(--radius);\n    color: var(--text-secondary);\n    font-size: var(--text-base);\n    font-weight: 500;\n    text-decoration: none;\n    white-space: nowrap;\n    transition:\n      background var(--dur-fast) var(--ease),\n      color var(--dur-fast) var(--ease);\n  }\n  .sidebar__link:hover {\n    background: var(--surface-muted);\n    color: var(--text-primary);\n    text-decoration: none;\n  }\n  .sidebar__link--active {\n    background: var(--accent-subtle);\n    color: var(--accent-fg);\n    font-weight: 600;\n  }\n  .sidebar__link--active:hover {\n    background: var(--accent-subtle);\n    color: var(--accent-fg);\n  }\n  .sidebar__link--active svg {\n    color: var(--accent);\n  }\n  .sidebar__ext {\n    margin-left: auto;\n    opacity: 0.6;\n  }\n  .sidebar__footer {\n    display: grid;\n    gap: var(--space-1);\n    padding-top: var(--space-2);\n    border-top: 1px solid var(--border-subtle);\n  }\n  .sidebar__tools {\n    display: flex;\n    align-items: center;\n    gap: var(--space-1);\n  }\n  .sidebar__tools > details {\n    flex: none;\n    width: auto;\n  }\n  .sidebar__tools .sidebar__collapse {\n    flex: 1;\n    width: auto;\n  }\n  .sidebar__collapse {\n    appearance: none;\n    display: flex;\n    align-items: center;\n    gap: 0.65rem;\n    min-height: 36px;\n    padding: 0.4rem var(--space-3);\n    border: 0;\n    border-radius: var(--radius);\n    background: transparent;\n    color: var(--text-secondary);\n    font: inherit;\n    font-size: var(--text-sm);\n    cursor: pointer;\n  }\n  .sidebar__collapse:hover {\n    background: var(--surface-muted);\n    color: var(--text-primary);\n  }\n  @media (min-width: 881px) {\n    html[data-sidebar=\"rail\"] & .sidebar__label,\n    html[data-sidebar=\"rail\"] & .sidebar__section,\n    html[data-sidebar=\"rail\"] & .sidebar__ext {\n      display: none;\n    }\n    html[data-sidebar=\"rail\"] & .sidebar__link,\n    html[data-sidebar=\"rail\"] & .sidebar__collapse,\n    html[data-sidebar=\"rail\"] & .sidebar__brand {\n      justify-content: center;\n      padding-inline: 0;\n    }\n    html[data-sidebar=\"rail\"] & .sidebar__collapse svg {\n      transform: rotate(180deg);\n    }\n    html[data-sidebar=\"rail\"] & .sidebar__footer summary {\n      justify-content: center;\n    }\n    html[data-sidebar=\"rail\"] & .sidebar__footer summary > svg:last-child {\n      display: none;\n    }\n    html[data-sidebar=\"rail\"] & .sidebar__tools {\n      flex-direction: column;\n    }\n  }\n  @media (max-width: 880px) {\n    & {\n      position: fixed;\n      inset: 0 auto 0 0;\n      z-index: 60;\n      width: min(280px, 85vw);\n      height: 100dvh;\n      transform: translateX(-100%);\n      transition: transform var(--dur-base) var(--ease);\n      box-shadow: var(--shadow-3);\n    }\n    &.sidebar--open {\n      transform: translateX(0);\n    }\n    & .sidebar__collapse {\n      display: none;\n    }\n  }\n`;\n\nconst NavLink: FC<{ item: NavItem; active?: string }> = ({ item, active }) => {\n  const current = active === item.key;\n  return (\n    <a\n      class={`sidebar__link${current ? \" sidebar__link--active\" : \"\"}`}\n      href={item.href}\n      title={item.label}\n      aria-current={current ? \"page\" : undefined}\n      target={item.external ? \"_blank\" : undefined}\n      rel={item.external ? \"noopener\" : undefined}\n    >\n      <Icon name={item.icon} />\n      <span class=\"sidebar__label\">{item.label}</span>\n      {item.external ? (\n        <span class=\"sidebar__ext\">\n          <Icon name=\"external-link\" size=\"sm\" />\n        </span>\n      ) : null}\n    </a>\n  );\n};\n\nconst NavSection: FC<{ title: string; items: NavItem[]; active?: string }> = ({\n  title,\n  items,\n  active,\n}) => {\n  return (\n    <>\n      <div class=\"sidebar__section\">{title}</div>\n      {items.map((item) => (\n        <NavLink key={item.key} item={item} active={active} />\n      ))}\n    </>\n  );\n};\n\nconst Brand: FC<{ name: string; logo?: string; href: string }> = ({ name, logo, href }) => {\n  const safeLogo = safeImageUrl(logo);\n  return (\n    <a class=\"sidebar__brand\" href={href} title={name}>\n      {safeLogo ? (\n        <img class=\"sidebar__logo\" src={safeLogo} alt=\"\" width=\"28\" height=\"28\" />\n      ) : (\n        <span class=\"sidebar__mark\" aria-hidden=\"true\">\n          <Icon name=\"layers\" size=\"sm\" />\n        </span>\n      )}\n      <span class=\"sidebar__label\">{name}</span>\n    </a>\n  );\n};\n\n/** Primary navigation: brand, workspace, project, developer, and admin entries. */\nexport const Sidebar: FC<{ nav?: NavConfig; name: string; logo?: string }> = ({\n  nav,\n  name,\n  logo,\n}) => {\n  const { user, authEnabled, config } = getStore();\n  const urls = createUrlBuilder(\"/\", config.publishedBaseDomain);\n  const showAdmin = !authEnabled || user?.role === \"admin\";\n  const projects: NavItem = {\n    key: \"projects\",\n    label: \"Projects\",\n    href: urls.projects(),\n    icon: \"folder\",\n  };\n  return (\n    <aside id=\"sidebar\" class={shellSidebar} aria-label=\"Primary\" data-sidebar>\n      <Brand name={name} logo={logo} href={urls.projects()} />\n      <nav class=\"sidebar__nav\">\n        <NavLink item={projects} active={nav?.active} />\n        {nav?.projectSlug ? (\n          <NavSection\n            title=\"Project\"\n            items={projectNavItems(urls, nav.projectSlug)}\n            active={nav.active}\n          />\n        ) : null}\n        <NavSection title=\"Developer\" items={developerNavItems()} active={nav?.active} />\n        {showAdmin ? (\n          <NavSection title=\"Administration\" items={adminNavItems()} active={nav?.active} />\n        ) : null}\n      </nav>\n      <div class=\"sidebar__footer\">\n        <UserMenu />\n        <div class=\"sidebar__tools\">\n          <ThemeMenu />\n          <button\n            class=\"sidebar__collapse\"\n            type=\"button\"\n            data-sidebar-collapse\n            aria-label=\"Collapse or expand sidebar\"\n            title=\"Collapse or expand sidebar\"\n          >\n            <Icon name=\"chevrons-left\" />\n            <span class=\"sidebar__label\">Collapse</span>\n          </button>\n        </div>\n      </div>\n    </aside>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"sidebar.mjs","names":[],"sources":["../../../src/ui/shell/sidebar.tsx"],"sourcesContent":["import { createUrlBuilder, safeImageUrl } from \"@storyshelf/core/urls\";\nimport type { FC } from \"hono/jsx\";\nimport { getStore } from \"../../store.ts\";\nimport { css } from \"../css.ts\";\nimport { Icon } from \"../icons/icon.tsx\";\nimport { ThemeMenu, UserMenu } from \"./account.tsx\";\nimport {\n  adminNavItems,\n  developerNavItems,\n  projectNavItems,\n  type NavConfig,\n  type NavItem,\n} from \"./nav.ts\";\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\n/**\n * Left rail. Collapses to icons only on desktop (`html[data-sidebar=\"rail\"]`)\n * and becomes an off-canvas drawer on small screens.\n */\nconst shellSidebar = css`\n  /* shell-sidebar */\n  position: sticky;\n  top: 0;\n  height: 100vh;\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-2);\n  padding: var(--space-3) var(--space-2);\n  background: var(--sidebar-bg);\n  border-right: 1px solid var(--border);\n  .sidebar__brand {\n    display: flex;\n    align-items: center;\n    gap: 0.6rem;\n    min-height: 40px;\n    padding: 0 var(--space-2);\n    color: var(--text-primary);\n    font-weight: 650;\n    font-size: var(--text-lg);\n    letter-spacing: -0.01em;\n    text-decoration: none;\n  }\n  .sidebar__brand:hover {\n    text-decoration: none;\n  }\n  .sidebar__mark {\n    flex: none;\n    display: inline-grid;\n    place-items: center;\n    width: 28px;\n    height: 28px;\n    border-radius: var(--radius);\n    background: var(--accent);\n    color: var(--accent-contrast);\n  }\n  .sidebar__logo {\n    flex: none;\n    border-radius: var(--radius-sm);\n    object-fit: contain;\n  }\n  .sidebar__nav {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    flex: 1;\n    min-height: 0;\n    overflow-x: hidden;\n    overflow-y: auto;\n  }\n  .sidebar__section {\n    margin: var(--space-4) 0 var(--space-1);\n    padding: 0 var(--space-3);\n    color: var(--text-secondary);\n    font-size: 0.68rem;\n    font-weight: 600;\n    letter-spacing: 0.08em;\n    text-transform: uppercase;\n    white-space: nowrap;\n  }\n  .sidebar__link {\n    display: flex;\n    align-items: center;\n    gap: 0.65rem;\n    min-height: 38px;\n    padding: 0.4rem var(--space-3);\n    border-radius: var(--radius);\n    color: var(--text-secondary);\n    font-size: var(--text-base);\n    font-weight: 500;\n    text-decoration: none;\n    white-space: nowrap;\n    transition:\n      background var(--dur-fast) var(--ease),\n      color var(--dur-fast) var(--ease);\n  }\n  .sidebar__link:hover {\n    background: var(--surface-muted);\n    color: var(--text-primary);\n    text-decoration: none;\n  }\n  .sidebar__link--active {\n    background: var(--accent-subtle);\n    color: var(--accent-fg);\n    font-weight: 600;\n  }\n  .sidebar__link--active:hover {\n    background: var(--accent-subtle);\n    color: var(--accent-fg);\n  }\n  .sidebar__link--active svg {\n    color: var(--accent);\n  }\n  .sidebar__ext {\n    margin-left: auto;\n    opacity: 0.6;\n  }\n  .sidebar__footer {\n    display: grid;\n    gap: var(--space-1);\n    padding-top: var(--space-2);\n    border-top: 1px solid var(--border-subtle);\n  }\n  .sidebar__tools {\n    display: flex;\n    align-items: center;\n    gap: var(--space-1);\n  }\n  .sidebar__tools > details {\n    flex: none;\n    width: auto;\n  }\n  .sidebar__tools .sidebar__collapse {\n    flex: 1;\n    width: auto;\n  }\n  .sidebar__collapse {\n    appearance: none;\n    display: flex;\n    align-items: center;\n    gap: 0.65rem;\n    min-height: 36px;\n    padding: 0.4rem var(--space-3);\n    border: 0;\n    border-radius: var(--radius);\n    background: transparent;\n    color: var(--text-secondary);\n    font: inherit;\n    font-size: var(--text-sm);\n    cursor: pointer;\n  }\n  .sidebar__collapse:hover {\n    background: var(--surface-muted);\n    color: var(--text-primary);\n  }\n  @media (min-width: 881px) {\n    html[data-sidebar=\"rail\"] & .sidebar__label,\n    html[data-sidebar=\"rail\"] & .sidebar__section,\n    html[data-sidebar=\"rail\"] & .sidebar__ext {\n      display: none;\n    }\n    html[data-sidebar=\"rail\"] & .sidebar__link,\n    html[data-sidebar=\"rail\"] & .sidebar__collapse,\n    html[data-sidebar=\"rail\"] & .sidebar__brand {\n      justify-content: center;\n      padding-inline: 0;\n    }\n    html[data-sidebar=\"rail\"] & .sidebar__collapse svg {\n      transform: rotate(180deg);\n    }\n    html[data-sidebar=\"rail\"] & .sidebar__footer summary {\n      justify-content: center;\n    }\n    html[data-sidebar=\"rail\"] & .sidebar__footer summary > svg:last-child {\n      display: none;\n    }\n    html[data-sidebar=\"rail\"] & .sidebar__tools {\n      flex-direction: column;\n    }\n  }\n  @media (max-width: 880px) {\n    & {\n      position: fixed;\n      inset: 0 auto 0 0;\n      z-index: 60;\n      width: min(280px, 85vw);\n      height: 100dvh;\n      transform: translateX(-100%);\n      transition: transform var(--dur-base) var(--ease);\n      box-shadow: var(--shadow-3);\n    }\n    &.sidebar--open {\n      transform: translateX(0);\n    }\n    & .sidebar__collapse {\n      display: none;\n    }\n  }\n`;\n\nconst NavLink: FC<{ item: NavItem; active?: string }> = ({ item, active }) => {\n  const current = active === item.key;\n  return (\n    <a\n      class={`sidebar__link${current ? \" sidebar__link--active\" : \"\"}`}\n      href={item.href}\n      title={item.label}\n      aria-current={current ? \"page\" : undefined}\n      target={item.external ? \"_blank\" : undefined}\n      rel={item.external ? \"noopener\" : undefined}\n    >\n      <Icon name={item.icon} />\n      <span class=\"sidebar__label\">{item.label}</span>\n      {item.external ? (\n        <span class=\"sidebar__ext\">\n          <Icon name=\"external-link\" size=\"sm\" />\n        </span>\n      ) : null}\n    </a>\n  );\n};\n\nconst NavSection: FC<{ title: string; items: NavItem[]; active?: string }> = ({\n  title,\n  items,\n  active,\n}) => {\n  return (\n    <>\n      <div class=\"sidebar__section\">{title}</div>\n      {items.map((item) => (\n        <NavLink key={item.key} item={item} active={active} />\n      ))}\n    </>\n  );\n};\n\nconst Brand: FC<{ name: string; logo?: string; href: string }> = ({ name, logo, href }) => {\n  const safeLogo = safeImageUrl(logo);\n  return (\n    <a class=\"sidebar__brand\" href={href} title={name}>\n      {safeLogo ? (\n        <img class=\"sidebar__logo\" src={safeLogo} alt=\"\" width=\"28\" height=\"28\" />\n      ) : (\n        <span class=\"sidebar__mark\" aria-hidden=\"true\">\n          <Icon name=\"layers\" size=\"sm\" />\n        </span>\n      )}\n      <span class=\"sidebar__label\">{name}</span>\n    </a>\n  );\n};\n\n/** Primary navigation: brand, workspace, project, developer, and admin entries. */\nexport const Sidebar: FC<{ nav?: NavConfig; name: string; logo?: string }> = ({\n  nav,\n  name,\n  logo,\n}) => {\n  const { user, authEnabled, config, testing } = getStore();\n  const urls = createUrlBuilder(\"/\", config.publishedBaseDomain);\n  const showAdmin = !authEnabled || user?.role === \"admin\";\n  const projects: NavItem = {\n    key: \"projects\",\n    label: \"Projects\",\n    href: urls.projects(),\n    icon: \"folder\",\n  };\n  return (\n    <aside id=\"sidebar\" class={shellSidebar} aria-label=\"Primary\" data-sidebar>\n      <Brand name={name} logo={logo} href={urls.projects()} />\n      <nav class=\"sidebar__nav\">\n        <NavLink item={projects} active={nav?.active} />\n        {nav?.projectSlug ? (\n          <NavSection\n            title=\"Project\"\n            items={projectNavItems(urls, nav.projectSlug, testing)}\n            active={nav.active}\n          />\n        ) : null}\n        <NavSection title=\"Developer\" items={developerNavItems()} active={nav?.active} />\n        {showAdmin ? (\n          <NavSection title=\"Administration\" items={adminNavItems()} active={nav?.active} />\n        ) : null}\n      </nav>\n      <div class=\"sidebar__footer\">\n        <UserMenu />\n        <div class=\"sidebar__tools\">\n          <ThemeMenu />\n          <button\n            class=\"sidebar__collapse\"\n            type=\"button\"\n            data-sidebar-collapse\n            aria-label=\"Collapse or expand sidebar\"\n            title=\"Collapse or expand sidebar\"\n          >\n            <Icon name=\"chevrons-left\" />\n            <span class=\"sidebar__label\">Collapse</span>\n          </button>\n        </div>\n      </div>\n    </aside>\n  );\n};\n"],"mappings":"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"}

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