@storyshelf/app 0.7.0 → 0.8.0

package/dist/ui/compare-stage.mjs

@@ -4,7 +4,7 @@ import.meta.url;
 import { css } from "./css.mjs";
 import { Segmented } from "./segmented.mjs";
 import { Fragment, jsx, jsxs } from "hono/jsx/jsx-runtime";
-//#region src/ui/compare-stage.tsx
+// src/ui/compare-stage.tsx
 /**
 * Screenshot comparison surface. All modes share one set of images; the
 * `data-view` / `data-zoom` / `data-flip` attributes on the root (driven by
@@ -70,6 +70,10 @@ const stageRoot = css`
     font-size: var(--text-sm);
     text-align: center;
   }
+  .stage__note {
+    color: var(--text-secondary);
+    font-size: var(--text-sm);
+  }
   .stage__divider,
   .stage__controls {
     display: none;
@@ -103,6 +107,10 @@ const stageRoot = css`
   &[data-zoom="400"] .stage__img {
     image-rendering: pixelated;
   }
+  /* Design variant: screenshot against a render, two panes and no diff. */
+  &[data-variant="design"][data-view="split"] .stage__grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
   &[data-view="diff"] .stage__grid,
   &[data-view="flip"] .stage__grid,
   &[data-view="swipe"] .stage__grid,
@@ -218,6 +226,12 @@ const ZOOMS = [
 		value: "400"
 	}
 ];
+/** Modes and zoom a design comparison offers: no pixel diff, and the render always fits the stage. */
+const DESIGN_MODES = [
+	"split",
+	"swipe",
+	"onion"
+];
 function withActive(items, active) {
 	return items.map((item) => ({
 		...item,
@@ -244,12 +258,12 @@ const Pane = ({ kind, label, src, alt, empty, meta }) => {
 	});
 };
 /** Swipe and onion-skin sliders; each is shown only in its own mode (CSS). */
-const RangeControls = () => {
+const RangeControls = ({ baselineLabel }) => {
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("label", {
 		class: "stage__controls",
 		"data-for": "swipe",
 		children: [
-			/* @__PURE__ */ jsx("span", { children: "Baseline" }),
+			/* @__PURE__ */ jsx("span", { children: baselineLabel }),
 			/* @__PURE__ */ jsx("input", {
 				type: "range",
 				min: "0",
@@ -264,7 +278,7 @@ const RangeControls = () => {
 		class: "stage__controls",
 		"data-for": "onion",
 		children: [
-			/* @__PURE__ */ jsx("span", { children: "Baseline" }),
+			/* @__PURE__ */ jsx("span", { children: baselineLabel }),
 			/* @__PURE__ */ jsx("input", {
 				type: "range",
 				min: "0",
@@ -277,68 +291,86 @@ const RangeControls = () => {
 		]
 	})] });
 };
+/** Mode switch, plus the zoom switch (a design comparison always fits, so it has none). */
+const StageBar = ({ design }) => {
+	const modes = design ? MODES.filter((mode) => DESIGN_MODES.includes(mode.value)) : MODES;
+	return /* @__PURE__ */ jsxs("div", {
+		class: "stage__bar",
+		children: [/* @__PURE__ */ jsx(Segmented, {
+			label: "Comparison mode",
+			"data-compare-mode": true,
+			items: withActive(modes, "split")
+		}), design ? null : /* @__PURE__ */ jsx(Segmented, {
+			label: "Zoom",
+			"data-compare-zoom": true,
+			items: withActive(ZOOMS, "fit")
+		})]
+	});
+};
+/** The panes (baseline or design, current, diff) and the swipe divider. */
+const StageGrid = ({ baselineSrc, currentSrc, diffSrc, subject, baselineEmpty = "New story — no baseline yet. Approve to set the baseline.", diffEmpty = "No diff", diffMeta, design, baselineLabel }) => /* @__PURE__ */ jsxs("div", {
+	class: "stage__grid",
+	children: [
+		/* @__PURE__ */ jsx(Pane, {
+			kind: "baseline",
+			label: baselineLabel,
+			src: baselineSrc,
+			alt: `${baselineLabel} for ${subject}`,
+			empty: baselineEmpty
+		}),
+		/* @__PURE__ */ jsx(Pane, {
+			kind: "current",
+			label: "Current",
+			src: currentSrc,
+			alt: `Current for ${subject}`,
+			empty: "No screenshot"
+		}),
+		design ? null : /* @__PURE__ */ jsx(Pane, {
+			kind: "diff",
+			label: "Diff",
+			src: diffSrc,
+			alt: `Diff for ${subject}`,
+			empty: diffEmpty,
+			meta: diffMeta
+		}),
+		/* @__PURE__ */ jsx("span", {
+			class: "stage__divider",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx("span", {
+				class: "stage__knob",
+				"data-compare-knob": true,
+				children: "↔"
+			})
+		})
+	]
+});
 /** Baseline / current / diff comparison with swipe, onion-skin, flip, and zoom. */
-const CompareStage = ({ baselineSrc, currentSrc, diffSrc, subject, baselineEmpty = "New story — no baseline yet. Approve to set the baseline.", diffEmpty = "No diff", diffMeta }) => {
+const CompareStage = ({ variant = "baseline", baselineLabel = "Baseline", note, ...images }) => {
+	const design = variant === "design";
 	return /* @__PURE__ */ jsxs("div", {
 		class: stageRoot,
 		"data-compare": true,
 		"data-view": "split",
 		"data-zoom": "fit",
 		"data-flip": "current",
+		"data-variant": variant,
+		"data-modes": design ? DESIGN_MODES.join(",") : void 0,
+		"data-zooms": design ? "fit" : void 0,
 		children: [
-			/* @__PURE__ */ jsxs("div", {
-				class: "stage__bar",
-				children: [/* @__PURE__ */ jsx(Segmented, {
-					label: "Comparison mode",
-					"data-compare-mode": true,
-					items: withActive(MODES, "split")
-				}), /* @__PURE__ */ jsx(Segmented, {
-					label: "Zoom",
-					"data-compare-zoom": true,
-					items: withActive(ZOOMS, "fit")
-				})]
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				class: "stage__grid",
-				children: [
-					/* @__PURE__ */ jsx(Pane, {
-						kind: "baseline",
-						label: "Baseline",
-						src: baselineSrc,
-						alt: `Baseline for ${subject}`,
-						empty: baselineEmpty
-					}),
-					/* @__PURE__ */ jsx(Pane, {
-						kind: "current",
-						label: "Current",
-						src: currentSrc,
-						alt: `Current for ${subject}`,
-						empty: "No screenshot"
-					}),
-					/* @__PURE__ */ jsx(Pane, {
-						kind: "diff",
-						label: "Diff",
-						src: diffSrc,
-						alt: `Diff for ${subject}`,
-						empty: diffEmpty,
-						meta: diffMeta
-					}),
-					/* @__PURE__ */ jsx("span", {
-						class: "stage__divider",
-						"aria-hidden": "true",
-						children: /* @__PURE__ */ jsx("span", {
-							class: "stage__knob",
-							"data-compare-knob": true,
-							children: "↔"
-						})
-					})
-				]
+			/* @__PURE__ */ jsx(StageBar, { design }),
+			note ? /* @__PURE__ */ jsx("p", {
+				class: "stage__note",
+				children: note
+			}) : null,
+			/* @__PURE__ */ jsx(StageGrid, {
+				...images,
+				design,
+				baselineLabel
 			}),
-			/* @__PURE__ */ jsx(RangeControls, {})
+			/* @__PURE__ */ jsx(RangeControls, { baselineLabel })
 		]
 	});
 };
-//#endregion
 export { CompareStage };
 
 //# sourceMappingURL=compare-stage.mjs.map

package/dist/ui/compare-stage.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"compare-stage.mjs","names":[],"sources":["../../src/ui/compare-stage.tsx"],"sourcesContent":["import type { FC } from \"hono/jsx\";\nimport { css } from \"./css.ts\";\nimport { Segmented } from \"./segmented.tsx\";\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\n/**\n * Screenshot comparison surface. All modes share one set of images; the\n * `data-view` / `data-zoom` / `data-flip` attributes on the root (driven by\n * the review script) decide what is shown. Without JS it stays side-by-side.\n */\nconst stageRoot = css`\n  /* compare-stage */\n  display: grid;\n  gap: var(--space-3);\n  .stage__bar {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--space-3);\n    align-items: center;\n    justify-content: space-between;\n  }\n  .stage__grid {\n    display: grid;\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n    gap: var(--space-3);\n    align-items: start;\n  }\n  .stage__pane {\n    position: relative;\n    min-width: 0;\n    max-height: 78vh;\n    overflow: auto;\n    background: var(--surface-card);\n    border: 1px solid var(--border);\n    border-radius: var(--radius);\n  }\n  .stage__label {\n    position: sticky;\n    top: 0;\n    left: 0;\n    z-index: 2;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 0.35rem 0.6rem;\n    background: var(--surface-subtle);\n    border-bottom: 1px solid var(--border);\n    color: var(--text-secondary);\n    font-size: var(--text-xs);\n    font-weight: 600;\n    letter-spacing: 0.06em;\n    text-transform: uppercase;\n  }\n  .stage__img {\n    display: block;\n    width: 100%;\n    height: auto;\n    background: repeating-conic-gradient(var(--surface-muted) 0% 25%, var(--surface-subtle) 0% 50%)\n      0 0 / 16px 16px;\n  }\n  .stage__empty {\n    display: grid;\n    place-items: center;\n    aspect-ratio: 16 / 9;\n    padding: var(--space-4);\n    background: var(--surface-subtle);\n    color: var(--text-secondary);\n    font-size: var(--text-sm);\n    text-align: center;\n  }\n  .stage__divider,\n  .stage__controls {\n    display: none;\n  }\n  .stage__controls {\n    align-items: center;\n    gap: var(--space-3);\n    color: var(--text-secondary);\n    font-size: var(--text-sm);\n  }\n  .stage__controls input {\n    flex: 1;\n    accent-color: var(--accent);\n  }\n  &[data-zoom=\"100\"] .stage__img {\n    width: auto;\n    max-width: none;\n  }\n  &[data-zoom=\"200\"] .stage__img {\n    width: auto;\n    max-width: none;\n    zoom: 2;\n  }\n  &[data-zoom=\"400\"] .stage__img {\n    width: auto;\n    max-width: none;\n    zoom: 4;\n  }\n  /* Zoomed in, show real pixels instead of a smoothed blur. */\n  &[data-zoom=\"200\"] .stage__img,\n  &[data-zoom=\"400\"] .stage__img {\n    image-rendering: pixelated;\n  }\n  &[data-view=\"diff\"] .stage__grid,\n  &[data-view=\"flip\"] .stage__grid,\n  &[data-view=\"swipe\"] .stage__grid,\n  &[data-view=\"onion\"] .stage__grid {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  &[data-view=\"diff\"] .stage__pane:not([data-pane=\"diff\"]) {\n    display: none;\n  }\n  &[data-view=\"flip\"][data-flip=\"baseline\"] .stage__pane:not([data-pane=\"baseline\"]),\n  &[data-view=\"flip\"]:not([data-flip=\"baseline\"]) .stage__pane:not([data-pane=\"current\"]) {\n    display: none;\n  }\n  &[data-view=\"swipe\"] .stage__pane[data-pane=\"diff\"],\n  &[data-view=\"onion\"] .stage__pane[data-pane=\"diff\"] {\n    display: none;\n  }\n  &[data-view=\"swipe\"] .stage__pane,\n  &[data-view=\"onion\"] .stage__pane,\n  &[data-view=\"swipe\"] .stage__divider {\n    grid-area: 1 / 1;\n  }\n  &[data-view=\"swipe\"] .stage__label,\n  &[data-view=\"onion\"] .stage__label {\n    display: none;\n  }\n  &[data-view=\"swipe\"] .stage__pane[data-pane=\"current\"] {\n    clip-path: inset(0 0 0 var(--swipe, 50%));\n    background: transparent;\n  }\n  &[data-view=\"onion\"] .stage__pane[data-pane=\"current\"] {\n    opacity: var(--onion, 0.5);\n    background: transparent;\n  }\n  &[data-view=\"swipe\"] .stage__divider {\n    position: relative;\n    display: block;\n    z-index: 3;\n    justify-self: start;\n    width: 2px;\n    height: 100%;\n    margin-left: var(--swipe, 50%);\n    background: var(--accent);\n    pointer-events: none;\n  }\n  /* The only part of the divider that takes pointer input: drag it to wipe. */\n  .stage__knob {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    display: grid;\n    place-items: center;\n    width: 32px;\n    height: 32px;\n    transform: translate(-50%, -50%);\n    background: var(--accent);\n    color: var(--accent-contrast);\n    border: 2px solid var(--surface-card);\n    border-radius: var(--radius-pill);\n    box-shadow: var(--shadow-2);\n    font-size: var(--text-lg);\n    line-height: 1;\n    cursor: ew-resize;\n    pointer-events: auto;\n    touch-action: none;\n    user-select: none;\n  }\n  &[data-view=\"flip\"] .stage__grid {\n    cursor: pointer;\n  }\n  &[data-view=\"swipe\"] .stage__controls[data-for=\"swipe\"],\n  &[data-view=\"onion\"] .stage__controls[data-for=\"onion\"] {\n    display: flex;\n  }\n`;\n\nconst MODES = [\n  { label: \"Side by side\", value: \"split\" },\n  { label: \"Swipe\", value: \"swipe\" },\n  { label: \"Onion skin\", value: \"onion\" },\n  { label: \"Diff\", value: \"diff\" },\n  { label: \"Flip\", value: \"flip\" },\n];\n\nconst ZOOMS = [\n  { label: \"Fit\", value: \"fit\" },\n  { label: \"100%\", value: \"100\" },\n  { label: \"200%\", value: \"200\" },\n  { label: \"400%\", value: \"400\" },\n];\n\nfunction withActive(\n  items: { label: string; value: string }[],\n  active: string,\n): { label: string; value: string; active: boolean }[] {\n  return items.map((item) => ({ ...item, active: item.value === active }));\n}\n\ninterface PaneProps {\n  kind: \"baseline\" | \"current\" | \"diff\";\n  label: string;\n  src: string | null;\n  alt: string;\n  empty: unknown;\n  meta?: string;\n}\n\nconst Pane: FC<PaneProps> = ({ kind, label, src, alt, empty, meta }) => {\n  return (\n    <div class=\"stage__pane\" data-pane={kind}>\n      <div class=\"stage__label\">\n        <span>{label}</span>\n        {meta ? <span>{meta}</span> : null}\n      </div>\n      {src ? (\n        <img class=\"stage__img\" src={src} alt={alt} loading=\"lazy\" decoding=\"async\" />\n      ) : (\n        <div class=\"stage__empty\">{empty}</div>\n      )}\n    </div>\n  );\n};\n\n/** Swipe and onion-skin sliders; each is shown only in its own mode (CSS). */\nconst RangeControls: FC = () => {\n  return (\n    <>\n      <label class=\"stage__controls\" data-for=\"swipe\">\n        <span>Baseline</span>\n        <input type=\"range\" min=\"0\" max=\"100\" value=\"50\" data-compare-swipe aria-label=\"Swipe\" />\n        <span>Current</span>\n      </label>\n      <label class=\"stage__controls\" data-for=\"onion\">\n        <span>Baseline</span>\n        <input type=\"range\" min=\"0\" max=\"100\" value=\"50\" data-compare-onion aria-label=\"Opacity\" />\n        <span>Current</span>\n      </label>\n    </>\n  );\n};\n\n/** Props for the screenshot comparison surface. */\nexport interface CompareStageProps {\n  /** Baseline image URL, or null when the story has no baseline yet. */\n  baselineSrc: string | null;\n  currentSrc: string;\n  /** Diff overlay URL, or null when none was produced. */\n  diffSrc: string | null;\n  /** Accessible description shared by the images, e.g. \"Button / Primary\". */\n  subject: string;\n  baselineEmpty?: unknown;\n  diffEmpty?: unknown;\n  diffMeta?: string;\n}\n\n/** Baseline / current / diff comparison with swipe, onion-skin, flip, and zoom. */\nexport const CompareStage: FC<CompareStageProps> = ({\n  baselineSrc,\n  currentSrc,\n  diffSrc,\n  subject,\n  baselineEmpty = \"New story — no baseline yet. Approve to set the baseline.\",\n  diffEmpty = \"No diff\",\n  diffMeta,\n}) => {\n  return (\n    <div class={stageRoot} data-compare data-view=\"split\" data-zoom=\"fit\" data-flip=\"current\">\n      <div class=\"stage__bar\">\n        <Segmented label=\"Comparison mode\" data-compare-mode items={withActive(MODES, \"split\")} />\n        <Segmented label=\"Zoom\" data-compare-zoom items={withActive(ZOOMS, \"fit\")} />\n      </div>\n      <div class=\"stage__grid\">\n        <Pane\n          kind=\"baseline\"\n          label=\"Baseline\"\n          src={baselineSrc}\n          alt={`Baseline for ${subject}`}\n          empty={baselineEmpty}\n        />\n        <Pane\n          kind=\"current\"\n          label=\"Current\"\n          src={currentSrc}\n          alt={`Current for ${subject}`}\n          empty=\"No screenshot\"\n        />\n        <Pane\n          kind=\"diff\"\n          label=\"Diff\"\n          src={diffSrc}\n          alt={`Diff for ${subject}`}\n          empty={diffEmpty}\n          meta={diffMeta}\n        />\n        <span class=\"stage__divider\" aria-hidden=\"true\">\n          <span class=\"stage__knob\" data-compare-knob>\n            ↔\n          </span>\n        </span>\n      </div>\n      <RangeControls />\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAWA,MAAM,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyKrB,MAAM,QAAQ;CACZ;EAAE,OAAO;EAAgB,OAAO;CAAQ;CACxC;EAAE,OAAO;EAAS,OAAO;CAAQ;CACjC;EAAE,OAAO;EAAc,OAAO;CAAQ;CACtC;EAAE,OAAO;EAAQ,OAAO;CAAO;CAC/B;EAAE,OAAO;EAAQ,OAAO;CAAO;AACjC;AAEA,MAAM,QAAQ;CACZ;EAAE,OAAO;EAAO,OAAO;CAAM;CAC7B;EAAE,OAAO;EAAQ,OAAO;CAAM;CAC9B;EAAE,OAAO;EAAQ,OAAO;CAAM;CAC9B;EAAE,OAAO;EAAQ,OAAO;CAAM;AAChC;AAEA,SAAS,WACP,OACA,QACqD;CACrD,OAAO,MAAM,KAAK,UAAU;EAAE,GAAG;EAAM,QAAQ,KAAK,UAAU;CAAO,EAAE;AACzE;AAWA,MAAM,QAAuB,EAAE,MAAM,OAAO,KAAK,KAAK,OAAO,WAAW;CACtE,OACE,qBAAC,OAAD;EAAK,OAAM;EAAc,aAAW;EAApC,UAAA,CACE,qBAAC,OAAD;GAAK,OAAM;GAAX,UAAA,CACE,oBAAC,QAAD,EAAA,UAAO,MAAY,CAAA,GAClB,OAAO,oBAAC,QAAD,EAAA,UAAO,KAAW,CAAA,IAAI,IAC3B;EACJ,CAAA,GAAA,MACC,oBAAC,OAAD;GAAK,OAAM;GAAkB;GAAU;GAAK,SAAQ;GAAO,UAAS;EAAS,CAAA,IAE7E,oBAAC,OAAD;GAAK,OAAM;GAAgB,UAAA;EAAW,CAAA,CAErC;;AAET;;AAGA,MAAM,sBAA0B;CAC9B,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,qBAAC,SAAD;EAAO,OAAM;EAAkB,YAAS;EAAxC,UAAA;GACE,oBAAC,QAAD,EAAA,UAAM,WAAc,CAAA;GACpB,oBAAC,SAAD;IAAO,MAAK;IAAQ,KAAI;IAAI,KAAI;IAAM,OAAM;IAAK,sBAAA;IAAmB,cAAW;GAAS,CAAA;GACxF,oBAAC,QAAD,EAAA,UAAM,UAAa,CAAA;EACd;CACP,CAAA,GAAA,qBAAC,SAAD;EAAO,OAAM;EAAkB,YAAS;EAAxC,UAAA;GACE,oBAAC,QAAD,EAAA,UAAM,WAAc,CAAA;GACpB,oBAAC,SAAD;IAAO,MAAK;IAAQ,KAAI;IAAI,KAAI;IAAM,OAAM;IAAK,sBAAA;IAAmB,cAAW;GAAW,CAAA;GAC1F,oBAAC,QAAD,EAAA,UAAM,UAAa,CAAA;EACd;CACP,CAAA,CAAA,EAAA,CAAA;AAEN;;AAiBA,MAAa,gBAAuC,EAClD,aACA,YACA,SACA,SACA,gBAAgB,6DAChB,YAAY,WACZ,eACI;CACJ,OACE,qBAAC,OAAD;EAAK,OAAO;EAAW,gBAAA;EAAa,aAAU;EAAQ,aAAU;EAAM,aAAU;EAAhF,UAAA;GACE,qBAAC,OAAD;IAAK,OAAM;IAAX,UAAA,CACE,oBAAC,WAAD;KAAW,OAAM;KAAkB,qBAAA;KAAkB,OAAO,WAAW,OAAO,OAAO;IAAI,CAAA,GACzF,oBAAC,WAAD;KAAW,OAAM;KAAO,qBAAA;KAAkB,OAAO,WAAW,OAAO,KAAK;IAAI,CAAA,CACzE;;GACL,qBAAC,OAAD;IAAK,OAAM;IAAX,UAAA;KACE,oBAAC,MAAD;MACE,MAAK;MACL,OAAM;MACN,KAAK;MACL,KAAK,gBAAgB;MACrB,OAAO;KACR,CAAA;KACD,oBAAC,MAAD;MACE,MAAK;MACL,OAAM;MACN,KAAK;MACL,KAAK,eAAe;MACpB,OAAM;KACP,CAAA;KACD,oBAAC,MAAD;MACE,MAAK;MACL,OAAM;MACN,KAAK;MACL,KAAK,YAAY;MACjB,OAAO;MACP,MAAM;KACP,CAAA;KACD,oBAAC,QAAD;MAAM,OAAM;MAAiB,eAAY;MACvC,UAAA,oBAAC,QAAD;OAAM,OAAM;OAAc,qBAAA;OAAkB,UAAA;MAEtC,CAAA;KACF,CAAA;IACH;;GACL,oBAAC,eAAD,CAAgB,CAAA;EACb;;AAET"}
+{"version":3,"file":"compare-stage.mjs","names":[],"sources":["../../src/ui/compare-stage.tsx"],"sourcesContent":["import type { FC } from \"hono/jsx\";\nimport { css } from \"./css.ts\";\nimport { Segmented } from \"./segmented.tsx\";\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\n/**\n * Screenshot comparison surface. All modes share one set of images; the\n * `data-view` / `data-zoom` / `data-flip` attributes on the root (driven by\n * the review script) decide what is shown. Without JS it stays side-by-side.\n */\nconst stageRoot = css`\n  /* compare-stage */\n  display: grid;\n  gap: var(--space-3);\n  .stage__bar {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--space-3);\n    align-items: center;\n    justify-content: space-between;\n  }\n  .stage__grid {\n    display: grid;\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n    gap: var(--space-3);\n    align-items: start;\n  }\n  .stage__pane {\n    position: relative;\n    min-width: 0;\n    max-height: 78vh;\n    overflow: auto;\n    background: var(--surface-card);\n    border: 1px solid var(--border);\n    border-radius: var(--radius);\n  }\n  .stage__label {\n    position: sticky;\n    top: 0;\n    left: 0;\n    z-index: 2;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 0.35rem 0.6rem;\n    background: var(--surface-subtle);\n    border-bottom: 1px solid var(--border);\n    color: var(--text-secondary);\n    font-size: var(--text-xs);\n    font-weight: 600;\n    letter-spacing: 0.06em;\n    text-transform: uppercase;\n  }\n  .stage__img {\n    display: block;\n    width: 100%;\n    height: auto;\n    background: repeating-conic-gradient(var(--surface-muted) 0% 25%, var(--surface-subtle) 0% 50%)\n      0 0 / 16px 16px;\n  }\n  .stage__empty {\n    display: grid;\n    place-items: center;\n    aspect-ratio: 16 / 9;\n    padding: var(--space-4);\n    background: var(--surface-subtle);\n    color: var(--text-secondary);\n    font-size: var(--text-sm);\n    text-align: center;\n  }\n  .stage__note {\n    color: var(--text-secondary);\n    font-size: var(--text-sm);\n  }\n  .stage__divider,\n  .stage__controls {\n    display: none;\n  }\n  .stage__controls {\n    align-items: center;\n    gap: var(--space-3);\n    color: var(--text-secondary);\n    font-size: var(--text-sm);\n  }\n  .stage__controls input {\n    flex: 1;\n    accent-color: var(--accent);\n  }\n  &[data-zoom=\"100\"] .stage__img {\n    width: auto;\n    max-width: none;\n  }\n  &[data-zoom=\"200\"] .stage__img {\n    width: auto;\n    max-width: none;\n    zoom: 2;\n  }\n  &[data-zoom=\"400\"] .stage__img {\n    width: auto;\n    max-width: none;\n    zoom: 4;\n  }\n  /* Zoomed in, show real pixels instead of a smoothed blur. */\n  &[data-zoom=\"200\"] .stage__img,\n  &[data-zoom=\"400\"] .stage__img {\n    image-rendering: pixelated;\n  }\n  /* Design variant: screenshot against a render, two panes and no diff. */\n  &[data-variant=\"design\"][data-view=\"split\"] .stage__grid {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  &[data-view=\"diff\"] .stage__grid,\n  &[data-view=\"flip\"] .stage__grid,\n  &[data-view=\"swipe\"] .stage__grid,\n  &[data-view=\"onion\"] .stage__grid {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  &[data-view=\"diff\"] .stage__pane:not([data-pane=\"diff\"]) {\n    display: none;\n  }\n  &[data-view=\"flip\"][data-flip=\"baseline\"] .stage__pane:not([data-pane=\"baseline\"]),\n  &[data-view=\"flip\"]:not([data-flip=\"baseline\"]) .stage__pane:not([data-pane=\"current\"]) {\n    display: none;\n  }\n  &[data-view=\"swipe\"] .stage__pane[data-pane=\"diff\"],\n  &[data-view=\"onion\"] .stage__pane[data-pane=\"diff\"] {\n    display: none;\n  }\n  &[data-view=\"swipe\"] .stage__pane,\n  &[data-view=\"onion\"] .stage__pane,\n  &[data-view=\"swipe\"] .stage__divider {\n    grid-area: 1 / 1;\n  }\n  &[data-view=\"swipe\"] .stage__label,\n  &[data-view=\"onion\"] .stage__label {\n    display: none;\n  }\n  &[data-view=\"swipe\"] .stage__pane[data-pane=\"current\"] {\n    clip-path: inset(0 0 0 var(--swipe, 50%));\n    background: transparent;\n  }\n  &[data-view=\"onion\"] .stage__pane[data-pane=\"current\"] {\n    opacity: var(--onion, 0.5);\n    background: transparent;\n  }\n  &[data-view=\"swipe\"] .stage__divider {\n    position: relative;\n    display: block;\n    z-index: 3;\n    justify-self: start;\n    width: 2px;\n    height: 100%;\n    margin-left: var(--swipe, 50%);\n    background: var(--accent);\n    pointer-events: none;\n  }\n  /* The only part of the divider that takes pointer input: drag it to wipe. */\n  .stage__knob {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    display: grid;\n    place-items: center;\n    width: 32px;\n    height: 32px;\n    transform: translate(-50%, -50%);\n    background: var(--accent);\n    color: var(--accent-contrast);\n    border: 2px solid var(--surface-card);\n    border-radius: var(--radius-pill);\n    box-shadow: var(--shadow-2);\n    font-size: var(--text-lg);\n    line-height: 1;\n    cursor: ew-resize;\n    pointer-events: auto;\n    touch-action: none;\n    user-select: none;\n  }\n  &[data-view=\"flip\"] .stage__grid {\n    cursor: pointer;\n  }\n  &[data-view=\"swipe\"] .stage__controls[data-for=\"swipe\"],\n  &[data-view=\"onion\"] .stage__controls[data-for=\"onion\"] {\n    display: flex;\n  }\n`;\n\nconst MODES = [\n  { label: \"Side by side\", value: \"split\" },\n  { label: \"Swipe\", value: \"swipe\" },\n  { label: \"Onion skin\", value: \"onion\" },\n  { label: \"Diff\", value: \"diff\" },\n  { label: \"Flip\", value: \"flip\" },\n];\n\nconst ZOOMS = [\n  { label: \"Fit\", value: \"fit\" },\n  { label: \"100%\", value: \"100\" },\n  { label: \"200%\", value: \"200\" },\n  { label: \"400%\", value: \"400\" },\n];\n\n/** Modes and zoom a design comparison offers: no pixel diff, and the render always fits the stage. */\nconst DESIGN_MODES = [\"split\", \"swipe\", \"onion\"];\n\nfunction withActive(\n  items: { label: string; value: string }[],\n  active: string,\n): { label: string; value: string; active: boolean }[] {\n  return items.map((item) => ({ ...item, active: item.value === active }));\n}\n\ninterface PaneProps {\n  kind: \"baseline\" | \"current\" | \"diff\";\n  label: string;\n  src: string | null;\n  alt: string;\n  empty: unknown;\n  meta?: string;\n}\n\nconst Pane: FC<PaneProps> = ({ kind, label, src, alt, empty, meta }) => {\n  return (\n    <div class=\"stage__pane\" data-pane={kind}>\n      <div class=\"stage__label\">\n        <span>{label}</span>\n        {meta ? <span>{meta}</span> : null}\n      </div>\n      {src ? (\n        <img class=\"stage__img\" src={src} alt={alt} loading=\"lazy\" decoding=\"async\" />\n      ) : (\n        <div class=\"stage__empty\">{empty}</div>\n      )}\n    </div>\n  );\n};\n\n/** Swipe and onion-skin sliders; each is shown only in its own mode (CSS). */\nconst RangeControls: FC<{ baselineLabel: string }> = ({ baselineLabel }) => {\n  return (\n    <>\n      <label class=\"stage__controls\" data-for=\"swipe\">\n        <span>{baselineLabel}</span>\n        <input type=\"range\" min=\"0\" max=\"100\" value=\"50\" data-compare-swipe aria-label=\"Swipe\" />\n        <span>Current</span>\n      </label>\n      <label class=\"stage__controls\" data-for=\"onion\">\n        <span>{baselineLabel}</span>\n        <input type=\"range\" min=\"0\" max=\"100\" value=\"50\" data-compare-onion aria-label=\"Opacity\" />\n        <span>Current</span>\n      </label>\n    </>\n  );\n};\n\n/** Props for the screenshot comparison surface. */\nexport interface CompareStageProps {\n  /** Baseline image URL, or null when the story has no baseline yet. */\n  baselineSrc: string | null;\n  currentSrc: string;\n  /** Diff overlay URL, or null when none was produced. */\n  diffSrc: string | null;\n  /** Accessible description shared by the images, e.g. \"Button / Primary\". */\n  subject: string;\n  baselineEmpty?: unknown;\n  diffEmpty?: unknown;\n  diffMeta?: string;\n  /**\n   * `design` compares the screenshot with a design render instead of a baseline: side by side,\n   * swipe and onion only (no diff, no flip), fit zoom only.\n   */\n  variant?: \"baseline\" | \"design\";\n  /** Name of the left-hand image in labels and sliders (default \"Baseline\"). */\n  baselineLabel?: string;\n  /** A line under the controls, e.g. what the left-hand image is. */\n  note?: string;\n}\n\n/** Mode switch, plus the zoom switch (a design comparison always fits, so it has none). */\nconst StageBar: FC<{ design: boolean }> = ({ design }) => {\n  const modes = design ? MODES.filter((mode) => DESIGN_MODES.includes(mode.value)) : MODES;\n  return (\n    <div class=\"stage__bar\">\n      <Segmented label=\"Comparison mode\" data-compare-mode items={withActive(modes, \"split\")} />\n      {design ? null : (\n        <Segmented label=\"Zoom\" data-compare-zoom items={withActive(ZOOMS, \"fit\")} />\n      )}\n    </div>\n  );\n};\n\n/** The panes (baseline or design, current, diff) and the swipe divider. */\nconst StageGrid: FC<CompareStageProps & { design: boolean; baselineLabel: string }> = ({\n  baselineSrc,\n  currentSrc,\n  diffSrc,\n  subject,\n  baselineEmpty = \"New story — no baseline yet. Approve to set the baseline.\",\n  diffEmpty = \"No diff\",\n  diffMeta,\n  design,\n  baselineLabel,\n}) => (\n  <div class=\"stage__grid\">\n    <Pane\n      kind=\"baseline\"\n      label={baselineLabel}\n      src={baselineSrc}\n      alt={`${baselineLabel} for ${subject}`}\n      empty={baselineEmpty}\n    />\n    <Pane\n      kind=\"current\"\n      label=\"Current\"\n      src={currentSrc}\n      alt={`Current for ${subject}`}\n      empty=\"No screenshot\"\n    />\n    {design ? null : (\n      <Pane\n        kind=\"diff\"\n        label=\"Diff\"\n        src={diffSrc}\n        alt={`Diff for ${subject}`}\n        empty={diffEmpty}\n        meta={diffMeta}\n      />\n    )}\n    <span class=\"stage__divider\" aria-hidden=\"true\">\n      <span class=\"stage__knob\" data-compare-knob>\n        ↔\n      </span>\n    </span>\n  </div>\n);\n\n/** Baseline / current / diff comparison with swipe, onion-skin, flip, and zoom. */\nexport const CompareStage: FC<CompareStageProps> = ({\n  variant = \"baseline\",\n  baselineLabel = \"Baseline\",\n  note,\n  ...images\n}) => {\n  const design = variant === \"design\";\n  return (\n    <div\n      class={stageRoot}\n      data-compare\n      data-view=\"split\"\n      data-zoom=\"fit\"\n      data-flip=\"current\"\n      data-variant={variant}\n      data-modes={design ? DESIGN_MODES.join(\",\") : undefined}\n      data-zooms={design ? \"fit\" : undefined}\n    >\n      <StageBar design={design} />\n      {note ? <p class=\"stage__note\">{note}</p> : null}\n      <StageGrid {...images} design={design} baselineLabel={baselineLabel} />\n      <RangeControls baselineLabel={baselineLabel} />\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/ui/csrf-field.mjs

@@ -4,7 +4,7 @@ import.meta.url;
 import { getStore } from "../store.mjs";
 import { getCsrfToken } from "../middleware/csrf.mjs";
 import { jsx } from "hono/jsx/jsx-runtime";
-//#region src/ui/csrf-field.tsx
+// src/ui/csrf-field.tsx
 /** Hidden CSRF token so native (non-HTMX) form posts pass the csrf middleware. */
 function csrfField() {
 	const { config, sessionId } = getStore();
@@ -14,7 +14,6 @@ function csrfField() {
 		value: getCsrfToken(config.secret, sessionId)
 	});
 }
-//#endregion
 export { csrfField };
 
 //# sourceMappingURL=csrf-field.mjs.map

package/dist/ui/css.mjs

@@ -2,7 +2,7 @@ import "node:path";
 import "node:url";
 import.meta.url;
 import { createCssContext } from "hono/css";
-//#region src/ui/css.ts
+// src/ui/css.ts
 /**
 * hono/css building blocks for the server-rendered UI.
 *
@@ -30,7 +30,6 @@ const context = createCssContext({
 const css = (strings, ...values) => context.css(strings, ...values);
 /** Collects every used class into `<style id="storyshelf-css">`. */
 const Style = (args) => context.Style(args);
-//#endregion
 export { Style, css };
 
 //# sourceMappingURL=css.mjs.map

package/dist/ui/design-reference.mjs

@@ -4,7 +4,7 @@ import.meta.url;
 import { css } from "./css.mjs";
 import { Icon } from "./icons/icon.mjs";
 import { Fragment, jsx, jsxs } from "hono/jsx/jsx-runtime";
-//#region src/ui/design-reference.tsx
+// src/ui/design-reference.tsx
 const referenceRoot = css`
   /* design-reference */
   display: grid;
@@ -91,7 +91,6 @@ const DesignPreview = ({ src, name, providerName }) => /* @__PURE__ */ jsxs(Frag
 	class: previewCaption,
 	children: name
 }) : null] });
-//#endregion
 export { DesignPreview, DesignReference };
 
 //# sourceMappingURL=design-reference.mjs.map

package/dist/ui/document.mjs

@@ -13,7 +13,7 @@ import { baseStyle } from "./styles.mjs";
 import { DARK_THEME, LIGHT_THEME } from "./theme.mjs";
 import { Fragment, jsx, jsxs } from "hono/jsx/jsx-runtime";
 import { raw } from "hono/html";
-//#region src/ui/document.tsx
+// src/ui/document.tsx
 const shellRoot = css`
   /* shell */
   display: grid;
@@ -123,7 +123,6 @@ const DocumentLayout = ({ title, nav, layout = "default", children }) => {
 		] })]
 	})] });
 };
-//#endregion
 export { DocumentLayout };
 
 //# sourceMappingURL=document.mjs.map

package/dist/ui/dropdown.mjs

@@ -4,7 +4,7 @@ import.meta.url;
 import { css } from "./css.mjs";
 import { Icon } from "./icons/icon.mjs";
 import { Fragment, jsx, jsxs } from "hono/jsx/jsx-runtime";
-//#region src/ui/dropdown.tsx
+// src/ui/dropdown.tsx
 const dropdownRoot = css`
   /* dropdown */
   position: relative;
@@ -175,7 +175,6 @@ const DropdownDivider = () => {
 		role: "separator"
 	});
 };
-//#endregion
 export { Dropdown, DropdownDivider, DropdownItem };
 
 //# sourceMappingURL=dropdown.mjs.map

package/dist/ui/feedback.mjs

@@ -4,7 +4,7 @@ import.meta.url;
 import { css } from "./css.mjs";
 import { Icon } from "./icons/icon.mjs";
 import { jsx, jsxs } from "hono/jsx/jsx-runtime";
-//#region src/ui/feedback.tsx
+// src/ui/feedback.tsx
 const badgeBase = css`
   /* badge */
   display: inline-flex;
@@ -335,7 +335,6 @@ const Meta = ({ as = "p", mono = false, tone = "neutral", center = false, childr
 		children
 	});
 };
-//#endregion
 export { Alert, Badge, EmptyState, Meta, Stat, statusTone };
 
 //# sourceMappingURL=feedback.mjs.map

package/dist/ui/filter-input.mjs

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

package/dist/ui/forms.mjs

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

package/dist/ui/icons/icon.mjs

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

package/dist/ui/icons/paths.mjs

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

package/dist/ui/icons/sprite.mjs

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

package/dist/ui/kbd.mjs

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

package/dist/ui/layout.mjs

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

package/dist/ui/preview-embed.mjs

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

package/dist/ui/progress.mjs

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

package/dist/ui/segmented.mjs

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

package/dist/ui/shell/account.mjs

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

package/dist/ui/shell/bare.mjs

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

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

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

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

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

package/dist/ui/shell/nav.mjs

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