@storyshelf/app 0.5.3

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

@@ -0,0 +1,259 @@
+import "node:path";
+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
+/** Attach the CSRF token to every HTMX request. */
+function csrfPart() {
+	return `
+    document.addEventListener('htmx:configRequest',function(e){
+      var meta=document.querySelector('meta[name="csrf-token"]');
+      if(meta){ e.detail.headers['x-csrf-token']=meta.getAttribute('content'); }
+    });`;
+}
+/** Theme menu: apply, persist, and mark the current choice. */
+function themePart() {
+	return `
+    function markTheme(){
+      var cur=document.documentElement.getAttribute('data-theme')||'system';
+      document.querySelectorAll('[data-theme-set]').forEach(function(item){
+        item.setAttribute('aria-current', item.getAttribute('data-theme-set')===cur ? 'true' : 'false');
+      });
+    }
+    inits.push(markTheme);
+    document.addEventListener('click',function(e){
+      var item=e.target instanceof Element ? e.target.closest('[data-theme-set]') : null;
+      if(!item) return;
+      var next=item.getAttribute('data-theme-set');
+      shell.applyTheme(next);
+      shell.writeCookie(shell.themeCookie,next);
+      markTheme();
+    });`;
+}
+/** Desktop rail collapse (persisted) and the mobile drawer. */
+function sidebarPart() {
+	return `
+    function setDrawer(open){
+      var sidebar=document.getElementById('sidebar');
+      if(!sidebar) return;
+      sidebar.classList.toggle('sidebar--open',open);
+      var backdrop=document.querySelector('[data-sidebar-backdrop]');
+      if(backdrop){ backdrop.hidden=!open; }
+      var btn=document.querySelector('[data-sidebar-toggle]');
+      if(btn){ btn.setAttribute('aria-expanded',open?'true':'false'); }
+    }
+    document.addEventListener('click',function(e){
+      var t=e.target instanceof Element ? e.target : null;
+      if(!t) return;
+      if(t.closest('[data-sidebar-toggle]')){
+        var sidebar=document.getElementById('sidebar');
+        setDrawer(!(sidebar&&sidebar.classList.contains('sidebar--open')));
+      } else if(t.closest('[data-sidebar-backdrop]')){
+        setDrawer(false);
+      } else if(t.closest('[data-sidebar-collapse]')){
+        var next=document.documentElement.getAttribute('data-sidebar')==='rail' ? 'full' : 'rail';
+        shell.applySidebar(next);
+        shell.writeCookie(shell.sidebarCookie,next);
+      }
+    });
+    document.addEventListener('keydown',function(e){
+      var sidebar=document.getElementById('sidebar');
+      if(e.key==='Escape'&&sidebar&&sidebar.classList.contains('sidebar--open')){
+        setDrawer(false);
+        var btn=document.querySelector('[data-sidebar-toggle]');
+        if(btn) btn.focus();
+      }
+    });`;
+}
+/** Native <details> dropdowns: close on outside click, Escape, or choosing an item. */
+function dropdownPart() {
+	return `
+    document.addEventListener('click',function(e){
+      var target=e.target instanceof Element ? e.target : null;
+      var owner=target ? target.closest('details[data-dropdown]') : null;
+      document.querySelectorAll('details[data-dropdown][open]').forEach(function(d){
+        if(d!==owner) d.removeAttribute('open');
+      });
+      if(owner&&target&&target.closest('[role="menuitem"]')){ owner.removeAttribute('open'); }
+    });
+    document.addEventListener('keydown',function(e){
+      if(e.key!=='Escape') return;
+      var open=document.querySelector('details[data-dropdown][open]');
+      if(!open) return;
+      open.removeAttribute('open');
+      var summary=open.querySelector('summary');
+      if(summary) summary.focus();
+    });`;
+}
+/** Build and show one toast element (text only, never HTML). */
+function toastRenderPart() {
+	return `
+    var toastIcons={success:'check-circle',danger:'x-circle',warning:'alert-triangle',info:'info'};
+    function toastIcon(tone){
+      var ns='http://www.w3.org/2000/svg';
+      var svg=document.createElementNS(ns,'svg');
+      var attrs={viewBox:'0 0 24 24',width:'18',height:'18','aria-hidden':'true',fill:'none',
+        stroke:'currentColor','stroke-width':'2','stroke-linecap':'round','stroke-linejoin':'round'};
+      Object.keys(attrs).forEach(function(name){ svg.setAttribute(name,attrs[name]); });
+      var use=document.createElementNS(ns,'use');
+      use.setAttribute('href','${iconSpriteHref}#i-'+toastIcons[tone]);
+      svg.appendChild(use);
+      return svg;
+    }
+    function toast(detail){
+      var region=document.querySelector('[data-toast-region]');
+      if(!region||!detail||!detail.message) return;
+      var tone=toastIcons[detail.tone] ? detail.tone : 'info';
+      var el=document.createElement('div');
+      el.className='toast';
+      el.setAttribute('data-tone',tone);
+      el.setAttribute('role',tone==='danger'?'alert':'status');
+      var text=document.createElement('span');
+      text.textContent=String(detail.message);
+      el.appendChild(toastIcon(tone));
+      el.appendChild(text);
+      region.appendChild(el);
+      setTimeout(function(){ el.remove(); },tone==='danger'?8000:4000);
+    }`;
+}
+/**
+* Toasts. Sources: an HX-Trigger(-After-Swap) "showToast" event, and a toast
+* queued in sessionStorage by a form with data-toast (review actions reload
+* or redirect, so the message has to survive the navigation).
+*/
+function toastPart() {
+	return `${toastRenderPart()}
+    var TOAST_KEY='ss_toast';
+    function queueToast(detail){ try{ sessionStorage.setItem(TOAST_KEY,JSON.stringify(detail)); }catch(_){} }
+    function clearToast(){ try{ sessionStorage.removeItem(TOAST_KEY); }catch(_){} }
+    function flushQueued(){
+      try{
+        var raw=sessionStorage.getItem(TOAST_KEY);
+        if(!raw) return;
+        sessionStorage.removeItem(TOAST_KEY);
+        toast(JSON.parse(raw));
+      }catch(_){}
+    }
+    function flushFlash(){
+      var raw=shell.readCookie('storyshelf_flash');
+      if(!raw) return;
+      document.cookie='storyshelf_flash=; Path=/; Max-Age=0; SameSite=Lax';
+      try{ toast(JSON.parse(raw)); }catch(_){}
+    }
+    function flushToast(){ flushQueued(); flushFlash(); }
+    inits.push(flushToast);
+    document.addEventListener('htmx:beforeRequest',function(e){
+      var form=e.detail && e.detail.elt && e.detail.elt.closest ? e.detail.elt.closest('[data-toast]') : null;
+      if(form){ queueToast({message:form.getAttribute('data-toast'),tone:form.getAttribute('data-toast-tone')||'success'}); }
+    });
+    function failed(){ clearToast(); toast({message:'Something went wrong. Please try again.',tone:'danger'}); }
+    document.addEventListener('htmx:responseError',failed);
+    document.addEventListener('htmx:sendError',failed);`;
+}
+/**
+* Forms and body swaps. HTMX does not swap 4xx responses, but this app answers validation
+* failures with the re-rendered page (400/409/422) so field errors show.
+* \`data-confirm\` asks before submitting plain (non-HTMX) forms.
+*/
+function formPart() {
+	return `
+    document.addEventListener('htmx:beforeSwap',function(e){
+      // A body swap only replaces <body>, so classes first used by the new page
+      // would be unstyled: adopt the stylesheet the server collected for it.
+      var match=/<style id="storyshelf-css">([\\s\\S]*?)<\\/style>/.exec(e.detail.serverResponse||'');
+      var sheet=document.getElementById('storyshelf-css');
+      if(match&&sheet&&e.detail.target===document.body){ sheet.textContent=match[1]; }
+      var status=e.detail.xhr ? e.detail.xhr.status : 0;
+      if(status===400||status===409||status===422){
+        e.detail.shouldSwap=true;
+        e.detail.isError=false;
+        clearToast();
+      }
+    });
+    document.addEventListener('submit',function(e){
+      var form=e.target instanceof Element ? e.target.closest('form[data-confirm]') : null;
+      if(form&&!window.confirm(form.getAttribute('data-confirm')||'Are you sure?')){ e.preventDefault(); }
+    });`;
+}
+/** Copy buttons: `data-copy` holds the text; confirm with a toast. */
+function copyPart() {
+	return `
+    document.addEventListener('click',function(e){
+      var btn=e.target instanceof Element ? e.target.closest('[data-copy]') : null;
+      if(!btn||!navigator.clipboard) return;
+      navigator.clipboard.writeText(btn.getAttribute('data-copy')||'').then(function(){
+        toast({message:'Copied to clipboard',tone:'success'});
+      },function(){
+        toast({message:'Could not copy',tone:'danger'});
+      });
+    });`;
+}
+/** Client-side list filtering for `[data-filter-input]` boxes. */
+function filterPart() {
+	return `
+    document.addEventListener('input',function(e){
+      var input=e.target instanceof Element ? e.target.closest('[data-filter-input]') : null;
+      if(!input) return;
+      var scope=input.closest('[data-filter-scope]')||document;
+      var query=input.value.trim().toLowerCase();
+      var shown=0;
+      scope.querySelectorAll('[data-filter-item]').forEach(function(item){
+        var match=!query||(item.getAttribute('data-filter-text')||'').toLowerCase().indexOf(query)>-1;
+        item.hidden=!match;
+        if(match) shown++;
+      });
+      scope.querySelectorAll('[data-filter-empty]').forEach(function(el){ el.hidden=shown>0; });
+    });`;
+}
+/** Thin top progress bar while an HTMX request (e.g. snapshot navigation) is in flight. */
+function loadingPart() {
+	return `
+    var pending=0;
+    function setLoading(delta){
+      pending=Math.max(0,pending+delta);
+      document.documentElement.classList.toggle('ss-loading',pending>0);
+    }
+    document.addEventListener('htmx:beforeRequest',function(){ setLoading(1); });
+    document.addEventListener('htmx:afterRequest',function(){ setLoading(-1); });`;
+}
+/** Keep keyboard focus sensible after HTMX swaps. */
+function focusPart() {
+	return `
+    document.addEventListener('htmx:afterSwap',function(e){
+      var target=e.detail && e.detail.target;
+      if(target&&target.querySelector&&target!==document.body){
+        var focusable=target.querySelector('[autofocus], input, select, textarea, button');
+        if(focusable) try{ focusable.focus(); }catch(_){}
+      }
+    });`;
+}
+/** Page-end script wiring up the shell's interactive behavior (idempotent). */
+function clientScript() {
+	return `
+  (function(){
+    if(window.__ssInit){ window.__ssInit(); return; }
+    var shell=window.__storyshelfShell;
+    if(!shell) return;
+    var inits=[];${[
+		csrfPart(),
+		themePart(),
+		sidebarPart(),
+		dropdownPart(),
+		toastPart(),
+		formPart(),
+		copyPart(),
+		filterPart(),
+		loadingPart(),
+		focusPart(),
+		reviewScript()
+	].join("\n")}
+    window.__ssInit=function(){ inits.forEach(function(fn){ fn(); }); };
+    window.__ssInit();
+  })();
+  `.trim();
+}
+//#endregion
+export { clientScript };
+
+//# sourceMappingURL=client-script.mjs.map

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

@@ -0,0 +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"}

package/dist/ui/shell/nav.mjs

@@ -0,0 +1,111 @@
+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) {
+	return [
+		{
+			key: "library",
+			label: "Library",
+			href: urls.library(slug),
+			icon: "image"
+		},
+		{
+			key: "builds",
+			label: "Builds",
+			href: urls.buildsList(slug),
+			icon: "layers"
+		},
+		{
+			key: "jobs",
+			label: "Jobs",
+			href: urls.jobs(slug),
+			icon: "activity"
+		},
+		{
+			key: "labels",
+			label: "Labels",
+			href: urls.labels(slug),
+			icon: "tag"
+		},
+		{
+			key: "settings",
+			label: "Settings",
+			href: urls.settings(slug),
+			icon: "settings"
+		}
+	];
+}
+/** Developer entries (API reference). */
+function developerNavItems() {
+	return [{
+		key: "api-docs",
+		label: "API docs",
+		href: "/api/v1/docs",
+		icon: "book"
+	}, {
+		key: "openapi",
+		label: "OpenAPI spec",
+		href: "/api/v1/openapi.json",
+		icon: "code",
+		external: true
+	}];
+}
+/** Administration entries (admins only). */
+function adminNavItems() {
+	return [{
+		key: "admin",
+		label: "System",
+		href: "/admin",
+		icon: "server"
+	}];
+}
+/**
+* Breadcrumbs after the project picker: the *ancestors* of the current page.
+* The page itself is named by its heading, so it is never repeated here —
+* the section plus `nav.trail` describe where the page is, and the last item
+* (the current page) is dropped. Every returned crumb links somewhere, and
+* the last one is the page's parent.
+*/
+function breadcrumbs(nav, urls) {
+	const section = sectionCrumb(nav, urls);
+	return (section ? [section, ...nav?.trail ?? []] : [...nav?.trail ?? []]).slice(0, -1).filter((crumb) => crumb.href !== void 0);
+}
+function sectionCrumb(nav, urls) {
+	const slug = nav?.projectSlug;
+	return {
+		library: slug ? {
+			label: "Library",
+			href: urls.library(slug)
+		} : void 0,
+		builds: slug ? {
+			label: "Builds",
+			href: urls.buildsList(slug)
+		} : void 0,
+		jobs: slug ? {
+			label: "Jobs",
+			href: urls.jobs(slug)
+		} : void 0,
+		labels: slug ? {
+			label: "Labels",
+			href: urls.labels(slug)
+		} : void 0,
+		settings: slug ? {
+			label: "Settings",
+			href: urls.settings(slug)
+		} : void 0,
+		admin: {
+			label: "System",
+			href: "/admin"
+		},
+		profile: {
+			label: "Profile",
+			href: "/profile"
+		}
+	}[nav?.active ?? ""] ?? null;
+}
+//#endregion
+export { adminNavItems, breadcrumbs, developerNavItems, projectNavItems };
+
+//# sourceMappingURL=nav.mjs.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,195 @@
+import "node:path";
+import "node:url";
+import.meta.url;
+//#region 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
+* shell's once-only closure (`inits`, `shell` are in scope).
+*/
+function reviewScript() {
+	return [
+		stateHelpers(),
+		stageSetup(),
+		wipeDrag(),
+		clickControls(),
+		keyboardShortcuts()
+	].join("\n");
+}
+/** Mode/zoom state on the stage root, remembered across snapshots. */
+function stateHelpers() {
+	return `
+    var MODES=['split','swipe','onion','diff','flip'];
+    var ZOOMS=['fit','100','200','400'];
+    function remember(key,value){ try{ localStorage.setItem(key,value); }catch(_){} }
+    function recall(key){ try{ return localStorage.getItem(key); }catch(_){ return null; } }
+    function press(group,value){
+      if(!group) return;
+      group.querySelectorAll('[data-view-value]').forEach(function(b){
+        b.setAttribute('aria-pressed', b.getAttribute('data-view-value')===value ? 'true' : 'false');
+      });
+    }
+    function setMode(stage,mode,persist){
+      stage.setAttribute('data-view',mode);
+      press(stage.querySelector('[data-compare-mode]'),mode);
+      if(persist) remember('ss_compare_mode',mode);
+    }
+    function setZoom(stage,zoom,persist){
+      stage.setAttribute('data-zoom',zoom);
+      press(stage.querySelector('[data-compare-zoom]'),zoom);
+      if(persist) remember('ss_compare_zoom',zoom);
+    }
+    function flip(stage){
+      stage.setAttribute('data-flip', stage.getAttribute('data-flip')==='baseline' ? 'current' : 'baseline');
+    }
+    function nextZoom(stage){
+      var cur=stage.getAttribute('data-zoom')||'fit';
+      setZoom(stage,ZOOMS[(ZOOMS.indexOf(cur)+1)%ZOOMS.length],true);
+    }
+    function stepZoom(stage,delta){
+      var cur=ZOOMS.indexOf(stage.getAttribute('data-zoom')||'fit');
+      var next=Math.max(0,Math.min(ZOOMS.length-1,cur+delta));
+      setZoom(stage,ZOOMS[next],true);
+    }`;
+}
+/** Per-render wiring of a freshly swapped-in comparison stage. */
+function stageSetup() {
+	return `
+    function syncScroll(stage){
+      var panes=Array.from(stage.querySelectorAll('.stage__pane'));
+      var lock=false;
+      panes.forEach(function(pane){
+        pane.addEventListener('scroll',function(){
+          if(lock) return;
+          lock=true;
+          panes.forEach(function(other){
+            if(other!==pane){ other.scrollTop=pane.scrollTop; other.scrollLeft=pane.scrollLeft; }
+          });
+          requestAnimationFrame(function(){ lock=false; });
+        });
+      });
+    }
+    function bindRange(stage,selector,prop,scale){
+      var input=stage.querySelector(selector);
+      if(!input) return;
+      input.addEventListener('input',function(){ stage.style.setProperty(prop,String(input.value*scale)+(scale===1?'%':'')); });
+    }
+    function initStage(stage){
+      if(stage.getAttribute('data-ready')) return;
+      stage.setAttribute('data-ready','1');
+      var mode=recall('ss_compare_mode');
+      if(MODES.indexOf(mode)>-1) setMode(stage,mode,false);
+      var zoom=recall('ss_compare_zoom');
+      if(ZOOMS.indexOf(zoom)>-1) setZoom(stage,zoom,false);
+      bindRange(stage,'[data-compare-swipe]','--swipe',1);
+      bindRange(stage,'[data-compare-onion]','--onion',0.01);
+      var grid=stage.querySelector('.stage__grid');
+      if(grid){ grid.addEventListener('click',function(){ if(stage.getAttribute('data-view')==='flip'){ flip(stage); } }); }
+      syncScroll(stage);
+    }
+    inits.push(function(){ document.querySelectorAll('[data-compare]').forEach(initStage); });`;
+}
+/**
+* Drag the wipe handle to move the swipe divider. Uses pointer capture so the
+* drag keeps working when the pointer leaves the handle, and mirrors the value
+* into the (accessible) range slider.
+*/
+function wipeDrag() {
+	return `
+    function wipePercent(stage,clientX){
+      var pane=stage.querySelector('.stage__pane[data-pane="current"]');
+      if(!pane) return 50;
+      var rect=pane.getBoundingClientRect();
+      return Math.max(0,Math.min(100,(clientX-rect.left)/rect.width*100));
+    }
+    function setWipe(stage,percent){
+      stage.style.setProperty('--swipe',percent+'%');
+      var range=stage.querySelector('[data-compare-swipe]');
+      if(range){ range.value=String(Math.round(percent)); }
+    }
+    function bindKnob(stage){
+      var knob=stage.querySelector('[data-compare-knob]');
+      if(!knob||knob.getAttribute('data-bound')) return;
+      knob.setAttribute('data-bound','1');
+      knob.addEventListener('pointerdown',function(e){
+        e.preventDefault();
+        knob.setPointerCapture(e.pointerId);
+        setWipe(stage,wipePercent(stage,e.clientX));
+        function move(ev){ setWipe(stage,wipePercent(stage,ev.clientX)); }
+        function stop(){
+          knob.removeEventListener('pointermove',move);
+          knob.removeEventListener('pointerup',stop);
+          knob.removeEventListener('pointercancel',stop);
+        }
+        knob.addEventListener('pointermove',move);
+        knob.addEventListener('pointerup',stop);
+        knob.addEventListener('pointercancel',stop);
+      });
+    }
+    inits.push(function(){ document.querySelectorAll('[data-compare]').forEach(bindKnob); });`;
+}
+/** Delegated clicks: mode/zoom/filter segments and the shortcuts button. */
+function clickControls() {
+	return `
+    function openShortcuts(){
+      var dialog=document.querySelector('dialog[data-shortcuts]');
+      if(dialog&&typeof dialog.showModal==='function'&&!dialog.open){ dialog.showModal(); }
+    }
+    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-filter-switch]')){
+        var list=document.querySelector('[data-diff-nav]');
+        if(list){ list.setAttribute('data-filter',value); }
+        press(btn.closest('[data-filter-switch]'),value);
+      }
+    }
+    document.addEventListener('click',function(e){
+      var t=e.target instanceof Element ? e.target : null;
+      if(!t) return;
+      var btn=t.closest('[data-view-value]');
+      if(btn){ chooseSegment(btn); }
+      if(t.closest('[data-shortcuts-open]')){ openShortcuts(); }
+    });`;
+}
+/** Global review shortcuts; ignored while typing or with modifier keys held. */
+function keyboardShortcuts() {
+	return `
+    function typing(target){
+      return target instanceof HTMLElement &&
+        (target.tagName==='INPUT'||target.tagName==='TEXTAREA'||target.tagName==='SELECT'||target.isContentEditable);
+    }
+    function press1(selector){
+      var el=document.querySelector(selector);
+      if(el&&!el.disabled){ el.click(); return true; }
+      return false;
+    }
+    function handleKey(key,stage){
+      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]');
+      if(key==='r'||key==='R') return press1('[data-reject]');
+      if(key>='1'&&key<='5'){ setMode(stage,MODES[Number(key)-1],true); return true; }
+      if(key==='f'){ nextZoom(stage); return true; }
+      if(key==='+'||key==='='){ stepZoom(stage,1); return true; }
+      if(key==='-'||key==='_'){ stepZoom(stage,-1); return true; }
+      if(key==='t'){
+        if(stage.getAttribute('data-view')==='flip'){ flip(stage); } else { setMode(stage,'flip',true); }
+        return true;
+      }
+      if(key==='?'){ openShortcuts(); return true; }
+      return false;
+    }
+    document.addEventListener('keydown',function(e){
+      if(e.metaKey||e.ctrlKey||e.altKey||typing(e.target)) return;
+      var stage=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

@@ -0,0 +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"}