@storyshelf/app 0.5.3

package/dist/ui/buttons.mjs

@@ -0,0 +1,205 @@
+import "node:path";
+import "node:url";
+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/buttons.tsx
+const btnBase = css`
+  /* btn */
+  appearance: none;
+  border: 1px solid transparent;
+  border-radius: var(--radius);
+  padding: 0.55rem 0.9rem;
+  font-weight: 600;
+  font-size: var(--text-base);
+  cursor: pointer;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.4rem;
+  line-height: 1.2;
+  /* Top-aligned so a button in a <form> (a block with a line box) is exactly
+     as tall as the button instead of picking up a baseline strut. */
+  vertical-align: top;
+  min-height: 40px;
+  transition:
+    background var(--dur-fast) var(--ease),
+    border-color var(--dur-fast) var(--ease),
+    filter var(--dur-fast) var(--ease),
+    transform var(--dur-fast) var(--ease);
+  &:active:not(:disabled) {
+    transform: translateY(1px);
+  }
+  &:disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
+`;
+const btnPrimary = css`
+  /* btn-primary */
+  ${btnBase}
+  background: var(--accent);
+  color: var(--accent-contrast);
+  border-color: var(--accent);
+  box-shadow: var(--shadow);
+  &:hover {
+    filter: brightness(1.06);
+    text-decoration: none;
+  }
+`;
+const btnPrimarySm = css`
+  /* btn-primary-sm */
+  ${btnPrimary}
+  padding: 0.35rem 0.6rem;
+  font-size: 0.8rem;
+  min-height: 32px;
+`;
+const btnSecondary = css`
+  /* btn-secondary */
+  ${btnBase}
+  background: var(--surface-card);
+  color: var(--text-primary);
+  border-color: var(--border);
+  box-shadow: var(--shadow);
+  &:hover {
+    background: var(--surface-subtle);
+    text-decoration: none;
+  }
+`;
+const btnSecondarySm = css`
+  /* btn-secondary-sm */
+  ${btnSecondary}
+  padding: 0.35rem 0.6rem;
+  font-size: 0.8rem;
+  min-height: 32px;
+`;
+const btnOutline = css`
+  /* btn-outline */
+  ${btnSecondary}
+  &:hover {
+    background: var(--surface-subtle);
+    text-decoration: none;
+  }
+`;
+const btnOutlineSm = css`
+  /* btn-outline-sm */
+  ${btnOutline}
+  padding: 0.35rem 0.6rem;
+  font-size: 0.8rem;
+  min-height: 32px;
+`;
+const btnGhost = css`
+  /* btn-ghost */
+  ${btnBase}
+  background: transparent;
+  color: var(--text-secondary);
+  border-color: transparent;
+  &:hover {
+    background: var(--surface-muted);
+    color: var(--text-primary);
+    text-decoration: none;
+  }
+`;
+const btnGhostSm = css`
+  /* btn-ghost-sm */
+  ${btnGhost}
+  padding: 0.35rem 0.6rem;
+  font-size: 0.8rem;
+  min-height: 32px;
+`;
+const btnDanger = css`
+  /* btn-danger */
+  ${btnBase}
+  background: color-mix(in srgb, var(--status-rejected) 82%, #000);
+  color: #fff;
+  border-color: color-mix(in srgb, var(--status-rejected) 82%, #000);
+  &:hover {
+    filter: brightness(1.06);
+    text-decoration: none;
+  }
+`;
+const btnDangerSm = css`
+  /* btn-danger-sm */
+  ${btnDanger}
+  padding: 0.35rem 0.6rem;
+  font-size: 0.8rem;
+  min-height: 32px;
+`;
+const btnClasses = {
+	primary: {
+		md: btnPrimary,
+		sm: btnPrimarySm
+	},
+	secondary: {
+		md: btnSecondary,
+		sm: btnSecondarySm
+	},
+	outline: {
+		md: btnOutline,
+		sm: btnOutlineSm
+	},
+	ghost: {
+		md: btnGhost,
+		sm: btnGhostSm
+	},
+	danger: {
+		md: btnDanger,
+		sm: btnDangerSm
+	}
+};
+css`
+  /* tabs */
+  display: flex;
+  gap: 0.25rem;
+  border-bottom: 1px solid var(--border);
+  margin-bottom: 1rem;
+  overflow-x: auto;
+`;
+const tabsLink = css`
+  /* tabs-link */
+  padding: 0.55rem 0.75rem;
+  border-bottom: 2px solid transparent;
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+  text-decoration: none;
+  white-space: nowrap;
+  font-weight: 600;
+  &:hover {
+    color: var(--text-primary);
+    text-decoration: none;
+  }
+`;
+css`
+  /* tabs-link-active */
+  ${tabsLink}
+  color: var(--text-primary);
+  border-bottom-color: var(--accent);
+`;
+/** Button or link styled as a button (renders an anchor when `href` is set). */
+const Button = ({ variant = "primary", size = "md", type = "button", href, disabled, icon, children, ...rest }) => {
+	const cls = btnClasses[variant][size];
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [icon ? /* @__PURE__ */ jsx(Icon, {
+		name: icon,
+		size: size === "sm" ? "sm" : "md"
+	}) : null, children] });
+	if (href) return /* @__PURE__ */ jsx("a", {
+		class: cls,
+		href,
+		"aria-disabled": disabled ? "true" : void 0,
+		...rest,
+		children: content
+	});
+	return /* @__PURE__ */ jsx("button", {
+		class: cls,
+		type,
+		disabled,
+		...rest,
+		children: content
+	});
+};
+//#endregion
+export { Button };
+
+//# sourceMappingURL=buttons.mjs.map

package/dist/ui/buttons.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"buttons.mjs","names":[],"sources":["../../src/ui/buttons.tsx"],"sourcesContent":["import type { FC } from \"hono/jsx\";\nimport { css } from \"./css.ts\";\nimport { Icon } from \"./icons/icon.tsx\";\nimport type { IconName } from \"./icons/paths.ts\";\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\ntype ButtonVariant = \"primary\" | \"secondary\" | \"ghost\" | \"danger\" | \"outline\";\ntype ButtonSize = \"md\" | \"sm\";\n\nconst btnBase = css`\n  /* btn */\n  appearance: none;\n  border: 1px solid transparent;\n  border-radius: var(--radius);\n  padding: 0.55rem 0.9rem;\n  font-weight: 600;\n  font-size: var(--text-base);\n  cursor: pointer;\n  text-decoration: none;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.4rem;\n  line-height: 1.2;\n  /* Top-aligned so a button in a <form> (a block with a line box) is exactly\n     as tall as the button instead of picking up a baseline strut. */\n  vertical-align: top;\n  min-height: 40px;\n  transition:\n    background var(--dur-fast) var(--ease),\n    border-color var(--dur-fast) var(--ease),\n    filter var(--dur-fast) var(--ease),\n    transform var(--dur-fast) var(--ease);\n  &:active:not(:disabled) {\n    transform: translateY(1px);\n  }\n  &:disabled {\n    opacity: 0.55;\n    cursor: not-allowed;\n  }\n`;\n\nconst btnPrimary = css`\n  /* btn-primary */\n  ${btnBase}\n  background: var(--accent);\n  color: var(--accent-contrast);\n  border-color: var(--accent);\n  box-shadow: var(--shadow);\n  &:hover {\n    filter: brightness(1.06);\n    text-decoration: none;\n  }\n`;\n\nconst btnPrimarySm = css`\n  /* btn-primary-sm */\n  ${btnPrimary}\n  padding: 0.35rem 0.6rem;\n  font-size: 0.8rem;\n  min-height: 32px;\n`;\n\nconst btnSecondary = css`\n  /* btn-secondary */\n  ${btnBase}\n  background: var(--surface-card);\n  color: var(--text-primary);\n  border-color: var(--border);\n  box-shadow: var(--shadow);\n  &:hover {\n    background: var(--surface-subtle);\n    text-decoration: none;\n  }\n`;\n\nconst btnSecondarySm = css`\n  /* btn-secondary-sm */\n  ${btnSecondary}\n  padding: 0.35rem 0.6rem;\n  font-size: 0.8rem;\n  min-height: 32px;\n`;\n\nconst btnOutline = css`\n  /* btn-outline */\n  ${btnSecondary}\n  &:hover {\n    background: var(--surface-subtle);\n    text-decoration: none;\n  }\n`;\n\nconst btnOutlineSm = css`\n  /* btn-outline-sm */\n  ${btnOutline}\n  padding: 0.35rem 0.6rem;\n  font-size: 0.8rem;\n  min-height: 32px;\n`;\n\nconst btnGhost = css`\n  /* btn-ghost */\n  ${btnBase}\n  background: transparent;\n  color: var(--text-secondary);\n  border-color: transparent;\n  &:hover {\n    background: var(--surface-muted);\n    color: var(--text-primary);\n    text-decoration: none;\n  }\n`;\n\nconst btnGhostSm = css`\n  /* btn-ghost-sm */\n  ${btnGhost}\n  padding: 0.35rem 0.6rem;\n  font-size: 0.8rem;\n  min-height: 32px;\n`;\n\nconst btnDanger = css`\n  /* btn-danger */\n  ${btnBase}\n  background: color-mix(in srgb, var(--status-rejected) 82%, #000);\n  color: #fff;\n  border-color: color-mix(in srgb, var(--status-rejected) 82%, #000);\n  &:hover {\n    filter: brightness(1.06);\n    text-decoration: none;\n  }\n`;\n\nconst btnDangerSm = css`\n  /* btn-danger-sm */\n  ${btnDanger}\n  padding: 0.35rem 0.6rem;\n  font-size: 0.8rem;\n  min-height: 32px;\n`;\n\nconst btnClasses: Record<ButtonVariant, Record<ButtonSize, Promise<string>>> = {\n  primary: { md: btnPrimary, sm: btnPrimarySm },\n  secondary: { md: btnSecondary, sm: btnSecondarySm },\n  outline: { md: btnOutline, sm: btnOutlineSm },\n  ghost: { md: btnGhost, sm: btnGhostSm },\n  danger: { md: btnDanger, sm: btnDangerSm },\n};\n\nconst tabsNav = css`\n  /* tabs */\n  display: flex;\n  gap: 0.25rem;\n  border-bottom: 1px solid var(--border);\n  margin-bottom: 1rem;\n  overflow-x: auto;\n`;\n\nconst tabsLink = css`\n  /* tabs-link */\n  padding: 0.55rem 0.75rem;\n  border-bottom: 2px solid transparent;\n  color: var(--text-secondary);\n  font-size: 0.875rem;\n  text-decoration: none;\n  white-space: nowrap;\n  font-weight: 600;\n  &:hover {\n    color: var(--text-primary);\n    text-decoration: none;\n  }\n`;\n\nconst tabsLinkActive = css`\n  /* tabs-link-active */\n  ${tabsLink}\n  color: var(--text-primary);\n  border-bottom-color: var(--accent);\n`;\n\n/** Button or link styled as a button (renders an anchor when `href` is set). */\nexport const Button: FC<{\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  type?: \"button\" | \"submit\" | \"reset\";\n  href?: string;\n  disabled?: boolean;\n  /** Leading icon from the sprite. */\n  icon?: IconName;\n  children?: unknown;\n  [key: string]: unknown;\n}> = ({\n  variant = \"primary\",\n  size = \"md\",\n  type = \"button\",\n  href,\n  disabled,\n  icon,\n  children,\n  ...rest\n}) => {\n  const cls = btnClasses[variant][size];\n  const content = (\n    <>\n      {icon ? <Icon name={icon} size={size === \"sm\" ? \"sm\" : \"md\"} /> : null}\n      {children}\n    </>\n  );\n  if (href) {\n    return (\n      <a class={cls} href={href} aria-disabled={disabled ? \"true\" : undefined} {...rest}>\n        {content}\n      </a>\n    );\n  }\n  return (\n    <button class={cls} type={type} disabled={disabled} {...rest}>\n      {content}\n    </button>\n  );\n};\n\n/** Tab navigation bar for section switching. */\n// eslint-disable-next-line promise-function-async -- JSX component return type\nexport const Tabs: FC<{\n  tabs: { label: string; href: string; active?: boolean }[];\n  label?: string;\n}> = ({ tabs, label = \"Sections\" }) => {\n  return (\n    <nav class={tabsNav} aria-label={label}>\n      {tabs.map((tab) => (\n        <a\n          class={tab.active ? tabsLinkActive : tabsLink}\n          href={tab.href}\n          aria-current={tab.active ? \"page\" : undefined}\n        >\n          {tab.label}\n        </a>\n      ))}\n    </nav>\n  );\n};\n"],"mappings":";;;;;;;AAUA,MAAM,UAAU,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCnB,MAAM,aAAa,GAAG;;IAElB,QAAQ;;;;;;;;;;AAWZ,MAAM,eAAe,GAAG;;IAEpB,WAAW;;;;;AAMf,MAAM,eAAe,GAAG;;IAEpB,QAAQ;;;;;;;;;;AAWZ,MAAM,iBAAiB,GAAG;;IAEtB,aAAa;;;;;AAMjB,MAAM,aAAa,GAAG;;IAElB,aAAa;;;;;;AAOjB,MAAM,eAAe,GAAG;;IAEpB,WAAW;;;;;AAMf,MAAM,WAAW,GAAG;;IAEhB,QAAQ;;;;;;;;;;AAWZ,MAAM,aAAa,GAAG;;IAElB,SAAS;;;;;AAMb,MAAM,YAAY,GAAG;;IAEjB,QAAQ;;;;;;;;;AAUZ,MAAM,cAAc,GAAG;;IAEnB,UAAU;;;;;AAMd,MAAM,aAAyE;CAC7E,SAAS;EAAE,IAAI;EAAY,IAAI;CAAa;CAC5C,WAAW;EAAE,IAAI;EAAc,IAAI;CAAe;CAClD,SAAS;EAAE,IAAI;EAAY,IAAI;CAAa;CAC5C,OAAO;EAAE,IAAI;EAAU,IAAI;CAAW;CACtC,QAAQ;EAAE,IAAI;EAAW,IAAI;CAAY;AAC3C;AAEgB,GAAG;;;;;;;;AASnB,MAAM,WAAW,GAAG;;;;;;;;;;;;;;AAeG,GAAG;;IAEtB,SAAS;;;;;AAMb,MAAa,UAUP,EACJ,UAAU,WACV,OAAO,MACP,OAAO,UACP,MACA,UACA,MACA,UACA,GAAG,WACC;CACJ,MAAM,MAAM,WAAW,QAAQ,CAAC;CAChC,MAAM,UACJ,qBAAA,UAAA,EAAA,UAAA,CACG,OAAO,oBAAC,MAAD;EAAM,MAAM;EAAM,MAAM,SAAS,OAAO,OAAO;CAAO,CAAA,IAAI,MACjE,QACD,EAAA,CAAA;CAEJ,IAAI,MACF,OACE,oBAAC,KAAD;EAAG,OAAO;EAAW;EAAM,iBAAe,WAAW,SAAS,KAAA;EAAW,GAAI;EAC1E,UAAA;CACA,CAAA;CAGP,OACE,oBAAC,UAAD;EAAQ,OAAO;EAAW;EAAgB;EAAU,GAAI;EACrD,UAAA;CACK,CAAA;AAEZ"}

package/dist/ui/code-block.mjs

@@ -0,0 +1,47 @@
+import "node:path";
+import "node:url";
+import.meta.url;
+import { css } from "./css.mjs";
+import { Button } from "./buttons.mjs";
+import { jsx, jsxs } from "hono/jsx/jsx-runtime";
+//#region src/ui/code-block.tsx
+const codeWrap = css`
+  /* code-block */
+  display: flex;
+  gap: var(--space-2);
+  align-items: flex-start;
+  justify-content: space-between;
+  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
+  background: var(--surface-subtle);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  & pre {
+    flex: 1;
+    min-width: 0;
+    margin: 0;
+    padding: 0.3rem 0;
+    overflow-x: auto;
+    font-family: var(--font-mono);
+    font-size: var(--text-sm);
+    line-height: var(--leading-normal);
+    white-space: pre;
+  }
+`;
+/** Monospace command/snippet with a copy button (wired by the shell script). */
+const CodeBlock = ({ code, label = "Copy" }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		class: codeWrap,
+		children: [/* @__PURE__ */ jsx("pre", { children: /* @__PURE__ */ jsx("code", { children: code }) }), /* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			size: "sm",
+			icon: "copy",
+			"data-copy": code,
+			"aria-label": label,
+			children: label
+		})]
+	});
+};
+//#endregion
+export { CodeBlock };
+
+//# sourceMappingURL=code-block.mjs.map

package/dist/ui/code-block.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-block.mjs","names":[],"sources":["../../src/ui/code-block.tsx"],"sourcesContent":["import type { FC } from \"hono/jsx\";\nimport { Button } from \"./buttons.tsx\";\nimport { css } from \"./css.ts\";\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\nconst codeWrap = css`\n  /* code-block */\n  display: flex;\n  gap: var(--space-2);\n  align-items: flex-start;\n  justify-content: space-between;\n  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);\n  background: var(--surface-subtle);\n  border: 1px solid var(--border);\n  border-radius: var(--radius);\n  & pre {\n    flex: 1;\n    min-width: 0;\n    margin: 0;\n    padding: 0.3rem 0;\n    overflow-x: auto;\n    font-family: var(--font-mono);\n    font-size: var(--text-sm);\n    line-height: var(--leading-normal);\n    white-space: pre;\n  }\n`;\n\n/** Monospace command/snippet with a copy button (wired by the shell script). */\nexport const CodeBlock: FC<{ code: string; label?: string }> = ({ code, label = \"Copy\" }) => {\n  return (\n    <div class={codeWrap}>\n      <pre>\n        <code>{code}</code>\n      </pre>\n      <Button variant=\"ghost\" size=\"sm\" icon=\"copy\" data-copy={code} aria-label={label}>\n        {label}\n      </Button>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;AAMA,MAAM,WAAW,GAAG;;;;;;;;;;;;;;;;;;;;;;;AAwBpB,MAAa,aAAmD,EAAE,MAAM,QAAQ,aAAa;CAC3F,OACE,qBAAC,OAAD;EAAK,OAAO;EAAZ,UAAA,CACE,oBAAC,OAAD,EAAA,UACE,oBAAC,QAAD,EAAA,UAAO,KAAW,CAAA,EACf,CAAA,GACL,oBAAC,QAAD;GAAQ,SAAQ;GAAQ,MAAK;GAAK,MAAK;GAAO,aAAW;GAAM,cAAY;GACxE,UAAA;EACK,CAAA,CACL;;AAET"}

package/dist/ui/compare-stage.mjs

@@ -0,0 +1,344 @@
+import "node:path";
+import "node:url";
+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
+/**
+* Screenshot comparison surface. All modes share one set of images; the
+* `data-view` / `data-zoom` / `data-flip` attributes on the root (driven by
+* the review script) decide what is shown. Without JS it stays side-by-side.
+*/
+const stageRoot = css`
+  /* compare-stage */
+  display: grid;
+  gap: var(--space-3);
+  .stage__bar {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-3);
+    align-items: center;
+    justify-content: space-between;
+  }
+  .stage__grid {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: var(--space-3);
+    align-items: start;
+  }
+  .stage__pane {
+    position: relative;
+    min-width: 0;
+    max-height: 78vh;
+    overflow: auto;
+    background: var(--surface-card);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+  }
+  .stage__label {
+    position: sticky;
+    top: 0;
+    left: 0;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.35rem 0.6rem;
+    background: var(--surface-subtle);
+    border-bottom: 1px solid var(--border);
+    color: var(--text-secondary);
+    font-size: var(--text-xs);
+    font-weight: 600;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+  }
+  .stage__img {
+    display: block;
+    width: 100%;
+    height: auto;
+    background: repeating-conic-gradient(var(--surface-muted) 0% 25%, var(--surface-subtle) 0% 50%)
+      0 0 / 16px 16px;
+  }
+  .stage__empty {
+    display: grid;
+    place-items: center;
+    aspect-ratio: 16 / 9;
+    padding: var(--space-4);
+    background: var(--surface-subtle);
+    color: var(--text-secondary);
+    font-size: var(--text-sm);
+    text-align: center;
+  }
+  .stage__divider,
+  .stage__controls {
+    display: none;
+  }
+  .stage__controls {
+    align-items: center;
+    gap: var(--space-3);
+    color: var(--text-secondary);
+    font-size: var(--text-sm);
+  }
+  .stage__controls input {
+    flex: 1;
+    accent-color: var(--accent);
+  }
+  &[data-zoom="100"] .stage__img {
+    width: auto;
+    max-width: none;
+  }
+  &[data-zoom="200"] .stage__img {
+    width: auto;
+    max-width: none;
+    zoom: 2;
+  }
+  &[data-zoom="400"] .stage__img {
+    width: auto;
+    max-width: none;
+    zoom: 4;
+  }
+  /* Zoomed in, show real pixels instead of a smoothed blur. */
+  &[data-zoom="200"] .stage__img,
+  &[data-zoom="400"] .stage__img {
+    image-rendering: pixelated;
+  }
+  &[data-view="diff"] .stage__grid,
+  &[data-view="flip"] .stage__grid,
+  &[data-view="swipe"] .stage__grid,
+  &[data-view="onion"] .stage__grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  &[data-view="diff"] .stage__pane:not([data-pane="diff"]) {
+    display: none;
+  }
+  &[data-view="flip"][data-flip="baseline"] .stage__pane:not([data-pane="baseline"]),
+  &[data-view="flip"]:not([data-flip="baseline"]) .stage__pane:not([data-pane="current"]) {
+    display: none;
+  }
+  &[data-view="swipe"] .stage__pane[data-pane="diff"],
+  &[data-view="onion"] .stage__pane[data-pane="diff"] {
+    display: none;
+  }
+  &[data-view="swipe"] .stage__pane,
+  &[data-view="onion"] .stage__pane,
+  &[data-view="swipe"] .stage__divider {
+    grid-area: 1 / 1;
+  }
+  &[data-view="swipe"] .stage__label,
+  &[data-view="onion"] .stage__label {
+    display: none;
+  }
+  &[data-view="swipe"] .stage__pane[data-pane="current"] {
+    clip-path: inset(0 0 0 var(--swipe, 50%));
+    background: transparent;
+  }
+  &[data-view="onion"] .stage__pane[data-pane="current"] {
+    opacity: var(--onion, 0.5);
+    background: transparent;
+  }
+  &[data-view="swipe"] .stage__divider {
+    position: relative;
+    display: block;
+    z-index: 3;
+    justify-self: start;
+    width: 2px;
+    height: 100%;
+    margin-left: var(--swipe, 50%);
+    background: var(--accent);
+    pointer-events: none;
+  }
+  /* The only part of the divider that takes pointer input: drag it to wipe. */
+  .stage__knob {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    display: grid;
+    place-items: center;
+    width: 32px;
+    height: 32px;
+    transform: translate(-50%, -50%);
+    background: var(--accent);
+    color: var(--accent-contrast);
+    border: 2px solid var(--surface-card);
+    border-radius: var(--radius-pill);
+    box-shadow: var(--shadow-2);
+    font-size: var(--text-lg);
+    line-height: 1;
+    cursor: ew-resize;
+    pointer-events: auto;
+    touch-action: none;
+    user-select: none;
+  }
+  &[data-view="flip"] .stage__grid {
+    cursor: pointer;
+  }
+  &[data-view="swipe"] .stage__controls[data-for="swipe"],
+  &[data-view="onion"] .stage__controls[data-for="onion"] {
+    display: flex;
+  }
+`;
+const MODES = [
+	{
+		label: "Side by side",
+		value: "split"
+	},
+	{
+		label: "Swipe",
+		value: "swipe"
+	},
+	{
+		label: "Onion skin",
+		value: "onion"
+	},
+	{
+		label: "Diff",
+		value: "diff"
+	},
+	{
+		label: "Flip",
+		value: "flip"
+	}
+];
+const ZOOMS = [
+	{
+		label: "Fit",
+		value: "fit"
+	},
+	{
+		label: "100%",
+		value: "100"
+	},
+	{
+		label: "200%",
+		value: "200"
+	},
+	{
+		label: "400%",
+		value: "400"
+	}
+];
+function withActive(items, active) {
+	return items.map((item) => ({
+		...item,
+		active: item.value === active
+	}));
+}
+const Pane = ({ kind, label, src, alt, empty, meta }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		class: "stage__pane",
+		"data-pane": kind,
+		children: [/* @__PURE__ */ jsxs("div", {
+			class: "stage__label",
+			children: [/* @__PURE__ */ jsx("span", { children: label }), meta ? /* @__PURE__ */ jsx("span", { children: meta }) : null]
+		}), src ? /* @__PURE__ */ jsx("img", {
+			class: "stage__img",
+			src,
+			alt,
+			loading: "lazy",
+			decoding: "async"
+		}) : /* @__PURE__ */ jsx("div", {
+			class: "stage__empty",
+			children: empty
+		})]
+	});
+};
+/** Swipe and onion-skin sliders; each is shown only in its own mode (CSS). */
+const RangeControls = () => {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("label", {
+		class: "stage__controls",
+		"data-for": "swipe",
+		children: [
+			/* @__PURE__ */ jsx("span", { children: "Baseline" }),
+			/* @__PURE__ */ jsx("input", {
+				type: "range",
+				min: "0",
+				max: "100",
+				value: "50",
+				"data-compare-swipe": true,
+				"aria-label": "Swipe"
+			}),
+			/* @__PURE__ */ jsx("span", { children: "Current" })
+		]
+	}), /* @__PURE__ */ jsxs("label", {
+		class: "stage__controls",
+		"data-for": "onion",
+		children: [
+			/* @__PURE__ */ jsx("span", { children: "Baseline" }),
+			/* @__PURE__ */ jsx("input", {
+				type: "range",
+				min: "0",
+				max: "100",
+				value: "50",
+				"data-compare-onion": true,
+				"aria-label": "Opacity"
+			}),
+			/* @__PURE__ */ jsx("span", { children: "Current" })
+		]
+	})] });
+};
+/** 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 }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		class: stageRoot,
+		"data-compare": true,
+		"data-view": "split",
+		"data-zoom": "fit",
+		"data-flip": "current",
+		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(RangeControls, {})
+		]
+	});
+};
+//#endregion
+export { CompareStage };
+
+//# sourceMappingURL=compare-stage.mjs.map

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

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

package/dist/ui/csrf-field.mjs

@@ -0,0 +1,20 @@
+import "node:path";
+import "node:url";
+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
+/** Hidden CSRF token so native (non-HTMX) form posts pass the csrf middleware. */
+function csrfField() {
+	const { config, sessionId } = getStore();
+	return /* @__PURE__ */ jsx("input", {
+		type: "hidden",
+		name: "csrf_token",
+		value: getCsrfToken(config.secret, sessionId)
+	});
+}
+//#endregion
+export { csrfField };
+
+//# sourceMappingURL=csrf-field.mjs.map

package/dist/ui/csrf-field.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"csrf-field.mjs","names":[],"sources":["../../src/ui/csrf-field.tsx"],"sourcesContent":["import { getCsrfToken } from \"../middleware/csrf.ts\";\nimport { getStore } from \"../store.ts\";\n\n/** Hidden CSRF token so native (non-HTMX) form posts pass the csrf middleware. */\nexport function csrfField(): unknown {\n  const { config, sessionId } = getStore();\n  return <input type=\"hidden\" name=\"csrf_token\" value={getCsrfToken(config.secret, sessionId)} />;\n}\n"],"mappings":";;;;;;;;AAIA,SAAgB,YAAqB;CACnC,MAAM,EAAE,QAAQ,cAAc,SAAS;CACvC,OAAO,oBAAC,SAAD;EAAO,MAAK;EAAS,MAAK;EAAa,OAAO,aAAa,OAAO,QAAQ,SAAS;CAAI,CAAA;AAChG"}