@storyshelf/app 0.5.3

package/dist/ui/stacks.mjs

@@ -0,0 +1,82 @@
+import "node:path";
+import "node:url";
+import.meta.url;
+import { css } from "./css.mjs";
+import { jsx } from "hono/jsx/jsx-runtime";
+//#region src/ui/stacks.tsx
+const hGaps = {
+	sm: "0.5rem",
+	md: "0.75rem",
+	lg: "1rem"
+};
+const hAligns = {
+	center: "center",
+	start: "flex-start",
+	end: "flex-end",
+	baseline: "baseline"
+};
+const hJustifies = {
+	start: "flex-start",
+	center: "center",
+	end: "flex-end",
+	between: "space-between"
+};
+const vGaps = hGaps;
+const vAligns = {
+	stretch: "stretch",
+	start: "flex-start",
+	center: "center",
+	end: "flex-end"
+};
+function hstackClass(props) {
+	const { gap, align, justify, wrap } = props;
+	return css`
+    /* hstack */
+    display: flex;
+    gap: ${hGaps[gap]};
+    align-items: ${hAligns[align]};
+    justify-content: ${hJustifies[justify]};
+    flex-wrap: ${wrap ? "wrap" : "nowrap"};
+  `;
+}
+function vstackClass(props) {
+	const { gap, align } = props;
+	return css`
+    /* vstack */
+    display: grid;
+    gap: ${vGaps[gap]};
+    align-items: ${vAligns[align]};
+  `;
+}
+/**
+* Horizontal stack (replaces `row-actions` divs and ad-hoc flex rows).
+* Defaults match the old `row-actions` utility exactly.
+*/
+const HStack = ({ gap = "sm", align = "center", justify = "start", wrap = true, children }) => {
+	return /* @__PURE__ */ jsx("div", {
+		class: hstackClass({
+			gap,
+			align,
+			justify,
+			wrap
+		}),
+		children
+	});
+};
+/**
+* Vertical stack (replaces `stack` divs and ad-hoc grid rows).
+* Defaults match the old `stack` utility exactly.
+*/
+const VStack = ({ gap = "md", align = "stretch", children }) => {
+	return /* @__PURE__ */ jsx("div", {
+		class: vstackClass({
+			gap,
+			align
+		}),
+		children
+	});
+};
+//#endregion
+export { HStack, VStack };
+
+//# sourceMappingURL=stacks.mjs.map

package/dist/ui/stacks.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"stacks.mjs","names":[],"sources":["../../src/ui/stacks.tsx"],"sourcesContent":["import type { FC } from \"hono/jsx\";\nimport { css } from \"./css.ts\";\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\nconst hGaps = { sm: \"0.5rem\", md: \"0.75rem\", lg: \"1rem\" } as const;\nconst hAligns = {\n  center: \"center\",\n  start: \"flex-start\",\n  end: \"flex-end\",\n  baseline: \"baseline\",\n} as const;\nconst hJustifies = {\n  start: \"flex-start\",\n  center: \"center\",\n  end: \"flex-end\",\n  between: \"space-between\",\n} as const;\nconst vGaps = hGaps;\nconst vAligns = {\n  stretch: \"stretch\",\n  start: \"flex-start\",\n  center: \"center\",\n  end: \"flex-end\",\n} as const;\n\ntype HStackProps = {\n  gap?: keyof typeof hGaps;\n  align?: keyof typeof hAligns;\n  justify?: keyof typeof hJustifies;\n  wrap?: boolean;\n  children?: unknown;\n};\n\ntype VStackProps = {\n  gap?: keyof typeof vGaps;\n  align?: keyof typeof vAligns;\n  children?: unknown;\n};\n\nfunction hstackClass(props: Required<Omit<HStackProps, \"children\">>): Promise<string> {\n  const { gap, align, justify, wrap } = props;\n  return css`\n    /* hstack */\n    display: flex;\n    gap: ${hGaps[gap]};\n    align-items: ${hAligns[align]};\n    justify-content: ${hJustifies[justify]};\n    flex-wrap: ${wrap ? \"wrap\" : \"nowrap\"};\n  `;\n}\n\nfunction vstackClass(props: Required<Omit<VStackProps, \"children\">>): Promise<string> {\n  const { gap, align } = props;\n  return css`\n    /* vstack */\n    display: grid;\n    gap: ${vGaps[gap]};\n    align-items: ${vAligns[align]};\n  `;\n}\n\n/**\n * Horizontal stack (replaces `row-actions` divs and ad-hoc flex rows).\n * Defaults match the old `row-actions` utility exactly.\n */\n// eslint-disable-next-line promise-function-async -- JSX component return type\nexport const HStack: FC<HStackProps> = ({\n  gap = \"sm\",\n  align = \"center\",\n  justify = \"start\",\n  wrap = true,\n  children,\n}) => {\n  return <div class={hstackClass({ gap, align, justify, wrap })}>{children}</div>;\n};\n\n/**\n * Vertical stack (replaces `stack` divs and ad-hoc grid rows).\n * Defaults match the old `stack` utility exactly.\n */\n// eslint-disable-next-line promise-function-async -- JSX component return type\nexport const VStack: FC<VStackProps> = ({ gap = \"md\", align = \"stretch\", children }) => {\n  return <div class={vstackClass({ gap, align })}>{children}</div>;\n};\n"],"mappings":";;;;;;AAKA,MAAM,QAAQ;CAAE,IAAI;CAAU,IAAI;CAAW,IAAI;AAAO;AACxD,MAAM,UAAU;CACd,QAAQ;CACR,OAAO;CACP,KAAK;CACL,UAAU;AACZ;AACA,MAAM,aAAa;CACjB,OAAO;CACP,QAAQ;CACR,KAAK;CACL,SAAS;AACX;AACA,MAAM,QAAQ;AACd,MAAM,UAAU;CACd,SAAS;CACT,OAAO;CACP,QAAQ;CACR,KAAK;AACP;AAgBA,SAAS,YAAY,OAAiE;CACpF,MAAM,EAAE,KAAK,OAAO,SAAS,SAAS;CACtC,OAAO,GAAG;;;WAGD,MAAM,KAAK;mBACH,QAAQ,OAAO;uBACX,WAAW,SAAS;iBAC1B,OAAO,SAAS,SAAS;;AAE1C;AAEA,SAAS,YAAY,OAAiE;CACpF,MAAM,EAAE,KAAK,UAAU;CACvB,OAAO,GAAG;;;WAGD,MAAM,KAAK;mBACH,QAAQ,OAAO;;AAElC;;;;;AAOA,MAAa,UAA2B,EACtC,MAAM,MACN,QAAQ,UACR,UAAU,SACV,OAAO,MACP,eACI;CACJ,OAAO,oBAAC,OAAD;EAAK,OAAO,YAAY;GAAE;GAAK;GAAO;GAAS;EAAK,CAAC;EAAI;CAAc,CAAA;AAChF;;;;;AAOA,MAAa,UAA2B,EAAE,MAAM,MAAM,QAAQ,WAAW,eAAe;CACtF,OAAO,oBAAC,OAAD;EAAK,OAAO,YAAY;GAAE;GAAK;EAAM,CAAC;EAAI;CAAc,CAAA;AACjE"}

package/dist/ui/styles/base.mjs

@@ -0,0 +1,41 @@
+import "node:path";
+import "node:url";
+import.meta.url;
+//#region src/ui/styles/base.ts
+/** Base reset, typography, focus ring, and shared utilities. */
+function baseCss() {
+	return `${resetCss()}\n${utilityCss()}`;
+}
+function resetCss() {
+	return `
+    * { box-sizing: border-box; }
+    html { scroll-behavior: smooth; }
+    body { margin: 0; font-size: 14px; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; background: var(--surface-base); color: var(--text-primary); line-height: 1.5; -webkit-font-smoothing: antialiased; }
+    a { color: var(--accent); text-decoration: none; }
+    a:hover { text-decoration: underline; }
+    a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-sm); }
+    code, kbd, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; }
+    kbd { display: inline-block; padding: .1rem .35rem; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: var(--radius-sm); background: var(--surface-muted); color: var(--text-secondary); font-size: .75rem; line-height: 1.2; }
+    [hidden] { display: none !important; }
+    .skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
+    .skip-link:focus { left: 1rem; top: 1rem; width: auto; height: auto; background: var(--surface-card); color: var(--text-primary); padding: .5rem .75rem; border-radius: var(--radius-sm); box-shadow: var(--shadow); z-index: 100; }`;
+}
+function utilityCss() {
+	return `
+    .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
+    .min-w-0 { min-width: 0; }
+    .max-w-cell { max-width: 32ch; }
+    .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .muted { color: var(--text-secondary); }
+    .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
+    .max-w-form { max-width: 880px; }
+    .max-w-prose { max-width: 640px; }
+    .table-gap { margin-top: .75rem; }
+    .mt-1 { margin-top: 1rem; }
+    .mb-1 { margin-bottom: 1rem; }
+    @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }`;
+}
+//#endregion
+export { baseCss };
+
+//# sourceMappingURL=base.mjs.map

package/dist/ui/styles/base.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"base.mjs","names":[],"sources":["../../../src/ui/styles/base.ts"],"sourcesContent":["/** Base reset, typography, focus ring, and shared utilities. */\nexport function baseCss(): string {\n  return `${resetCss()}\\n${utilityCss()}`;\n}\n\nfunction resetCss(): string {\n  return `\n    * { box-sizing: border-box; }\n    html { scroll-behavior: smooth; }\n    body { margin: 0; font-size: 14px; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; background: var(--surface-base); color: var(--text-primary); line-height: 1.5; -webkit-font-smoothing: antialiased; }\n    a { color: var(--accent); text-decoration: none; }\n    a:hover { text-decoration: underline; }\n    a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-sm); }\n    code, kbd, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; }\n    kbd { display: inline-block; padding: .1rem .35rem; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: var(--radius-sm); background: var(--surface-muted); color: var(--text-secondary); font-size: .75rem; line-height: 1.2; }\n    [hidden] { display: none !important; }\n    .skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }\n    .skip-link:focus { left: 1rem; top: 1rem; width: auto; height: auto; background: var(--surface-card); color: var(--text-primary); padding: .5rem .75rem; border-radius: var(--radius-sm); box-shadow: var(--shadow); z-index: 100; }`;\n}\n\nfunction utilityCss(): string {\n  return `\n    .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }\n    .min-w-0 { min-width: 0; }\n    .max-w-cell { max-width: 32ch; }\n    .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n    .muted { color: var(--text-secondary); }\n    .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }\n    .max-w-form { max-width: 880px; }\n    .max-w-prose { max-width: 640px; }\n    .table-gap { margin-top: .75rem; }\n    .mt-1 { margin-top: 1rem; }\n    .mb-1 { margin-bottom: 1rem; }\n    @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }`;\n}\n"],"mappings":";;;;;AACA,SAAgB,UAAkB;CAChC,OAAO,GAAG,SAAS,EAAE,IAAI,WAAW;AACtC;AAEA,SAAS,WAAmB;CAC1B,OAAO;;;;;;;;;;;;AAYT;AAEA,SAAS,aAAqB;CAC5B,OAAO;;;;;;;;;;;;;AAaT"}

package/dist/ui/styles/behavior.mjs

@@ -0,0 +1,43 @@
+import "node:path";
+import "node:url";
+import.meta.url;
+//#region src/ui/styles/behavior.ts
+/** Behavioral CSS: HTMX indicators, skeletons, tables, stats. */
+function behaviorCss() {
+	return `${htmxCss()}\n${dataCss()}\n${chromeCss()}`;
+}
+function htmxCss() {
+	return `
+    html.ss-loading::before { content: ""; position: fixed; top: 0; left: 0; z-index: 90; height: 2px; width: 100%; background: var(--accent); transform-origin: left; animation: ss-load 1.2s var(--ease) infinite; }
+    @keyframes ss-load { 0% { transform: scaleX(0); } 70% { transform: scaleX(0.85); } 100% { transform: scaleX(1); opacity: 0; } }
+    @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }
+    .htmx-indicator { opacity: 0; transition: opacity 150ms ease; }
+    .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
+    button.htmx-request, form.htmx-request button, [hx-post].htmx-request { pointer-events: none; opacity: .7; }
+    form.htmx-request { opacity: .9; }
+    form.htmx-request button[type="submit"]::after { content: ""; width: .85em; height: .85em; margin-left: .4rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ss-spin .7s linear infinite; }
+    @keyframes ss-spin { to { transform: rotate(360deg); } }
+    .skeleton { position: relative; overflow: hidden; background: var(--surface-muted); border-radius: var(--radius-sm); min-height: 1rem; }
+    .skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); animation: skeleton 1.4s infinite; }
+    [data-theme="dark"] .skeleton::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent); }
+    @keyframes skeleton { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
+    @media (prefers-reduced-motion: reduce) { .htmx-indicator, .htmx-request { transition: none; } .skeleton::after { animation: none; } }`;
+}
+function dataCss() {
+	return `
+    .grid { display: grid; gap: 1rem; }
+    .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+    @media (max-width: 880px) { .grid--2, .grid--3 { grid-template-columns: 1fr; } }`;
+}
+/** Truly global chrome rules (depend on ancestors outside any one subtree). */
+function chromeCss() {
+	return `
+    @media (min-width: 881px) { html[data-sidebar="rail"] { --sidebar-width: 68px; } }
+    [data-theme-icon] { display: none; }
+    [data-theme="light"] [data-theme-icon="light"], [data-theme="dark"] [data-theme-icon="dark"], [data-theme="system"] [data-theme-icon="system"] { display: inline-flex; }`;
+}
+//#endregion
+export { behaviorCss };
+
+//# sourceMappingURL=behavior.mjs.map

package/dist/ui/styles/behavior.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"behavior.mjs","names":[],"sources":["../../../src/ui/styles/behavior.ts"],"sourcesContent":["/** Behavioral CSS: HTMX indicators, skeletons, tables, stats. */\nexport function behaviorCss(): string {\n  return `${htmxCss()}\\n${dataCss()}\\n${chromeCss()}`;\n}\n\nfunction htmxCss(): string {\n  return `\n    html.ss-loading::before { content: \"\"; position: fixed; top: 0; left: 0; z-index: 90; height: 2px; width: 100%; background: var(--accent); transform-origin: left; animation: ss-load 1.2s var(--ease) infinite; }\n    @keyframes ss-load { 0% { transform: scaleX(0); } 70% { transform: scaleX(0.85); } 100% { transform: scaleX(1); opacity: 0; } }\n    @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }\n    .htmx-indicator { opacity: 0; transition: opacity 150ms ease; }\n    .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }\n    button.htmx-request, form.htmx-request button, [hx-post].htmx-request { pointer-events: none; opacity: .7; }\n    form.htmx-request { opacity: .9; }\n    form.htmx-request button[type=\"submit\"]::after { content: \"\"; width: .85em; height: .85em; margin-left: .4rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ss-spin .7s linear infinite; }\n    @keyframes ss-spin { to { transform: rotate(360deg); } }\n    .skeleton { position: relative; overflow: hidden; background: var(--surface-muted); border-radius: var(--radius-sm); min-height: 1rem; }\n    .skeleton::after { content: \"\"; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); animation: skeleton 1.4s infinite; }\n    [data-theme=\"dark\"] .skeleton::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent); }\n    @keyframes skeleton { from { transform: translateX(-100%); } to { transform: translateX(100%); } }\n    @media (prefers-reduced-motion: reduce) { .htmx-indicator, .htmx-request { transition: none; } .skeleton::after { animation: none; } }`;\n}\n\nfunction dataCss(): string {\n  return `\n    .grid { display: grid; gap: 1rem; }\n    .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n    .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }\n    @media (max-width: 880px) { .grid--2, .grid--3 { grid-template-columns: 1fr; } }`;\n}\n\n/** Truly global chrome rules (depend on ancestors outside any one subtree). */\nfunction chromeCss(): string {\n  return `\n    @media (min-width: 881px) { html[data-sidebar=\"rail\"] { --sidebar-width: 68px; } }\n    [data-theme-icon] { display: none; }\n    [data-theme=\"light\"] [data-theme-icon=\"light\"], [data-theme=\"dark\"] [data-theme-icon=\"dark\"], [data-theme=\"system\"] [data-theme-icon=\"system\"] { display: inline-flex; }`;\n}\n"],"mappings":";;;;;AACA,SAAgB,cAAsB;CACpC,OAAO,GAAG,QAAQ,EAAE,IAAI,QAAQ,EAAE,IAAI,UAAU;AAClD;AAEA,SAAS,UAAkB;CACzB,OAAO;;;;;;;;;;;;;;;AAeT;AAEA,SAAS,UAAkB;CACzB,OAAO;;;;;AAKT;;AAGA,SAAS,YAAoB;CAC3B,OAAO;;;;AAIT"}

package/dist/ui/styles/review-layout.mjs

@@ -0,0 +1,347 @@
+import "node:path";
+import "node:url";
+import.meta.url;
+import { css } from "../css.mjs";
+//#region src/ui/styles/review-layout.ts
+/**
+* Review workspace layout styles: header, filmstrip, canvas column, action
+* bar, and shortcuts dialog. Shared by the `build-diff-*` page sections, so
+* they live here (the documented exception to colocation).
+*/
+const workspace = css`
+  /* review-workspace */
+  display: grid;
+  grid-template-columns: 300px minmax(0, 1fr);
+  gap: var(--space-4);
+  align-items: start;
+  @media (max-width: 1024px) {
+    & {
+      grid-template-columns: minmax(0, 1fr);
+    }
+  }
+`;
+const canvasColumn = css`
+  /* review-canvas */
+  display: grid;
+  gap: var(--space-4);
+  min-width: 0;
+`;
+const reviewHeader = css`
+  /* review-header */
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-4);
+  align-items: flex-start;
+  justify-content: space-between;
+  margin-bottom: var(--space-4);
+  padding: var(--space-4);
+  background: linear-gradient(var(--accent-wash), var(--accent-wash)), var(--surface-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow);
+`;
+const headerMain = css`
+  /* review-header-main */
+  display: grid;
+  gap: var(--space-1);
+  min-width: 0;
+`;
+const headerTitle = css`
+  /* review-header-title */
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  align-items: center;
+  margin: 0;
+  font-size: var(--text-xl);
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  line-height: var(--leading-tight);
+`;
+const headerMeta = css`
+  /* review-header-meta */
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  align-items: center;
+  margin: 0;
+  color: var(--text-secondary);
+  font-size: var(--text-sm);
+`;
+const headerSide = css`
+  /* review-header-side */
+  display: grid;
+  gap: var(--space-3);
+  justify-items: end;
+  min-width: min(100%, 280px);
+  @media (max-width: 720px) {
+    & {
+      justify-items: stretch;
+      width: 100%;
+    }
+  }
+`;
+const headerProgress = css`
+  /* review-header-progress */
+  display: grid;
+  gap: var(--space-1);
+  width: 100%;
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
+  font-variant-numeric: tabular-nums;
+`;
+const headerActions = css`
+  /* review-header-actions */
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  align-items: center;
+  justify-content: flex-end;
+`;
+const filmstrip = css`
+  /* filmstrip */
+  position: sticky;
+  top: calc(var(--topbar-height) + var(--space-4));
+  display: flex;
+  flex-direction: column;
+  max-height: calc(100vh - var(--topbar-height) - var(--space-8) - var(--space-4));
+  overflow: hidden;
+  background: var(--surface-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow);
+  @media (max-width: 1024px) {
+    & {
+      position: static;
+      max-height: none;
+    }
+  }
+`;
+const filmstripHead = css`
+  /* filmstrip-head */
+  display: grid;
+  gap: var(--space-2);
+  padding: var(--space-3);
+  border-bottom: 1px solid var(--border);
+`;
+const filmstripList = css`
+  /* filmstrip-list */
+  overflow: auto;
+  overscroll-behavior: contain;
+  @media (max-width: 1024px) {
+    & {
+      display: flex;
+      overflow-x: auto;
+      overflow-y: hidden;
+    }
+  }
+`;
+const filmItem = css`
+  /* film-item */
+  display: grid;
+  grid-template-columns: 72px minmax(0, 1fr);
+  gap: var(--space-3);
+  align-items: center;
+  padding: var(--space-2) var(--space-3);
+  border-bottom: 1px solid var(--border-subtle);
+  border-left: 3px solid transparent;
+  color: inherit;
+  text-decoration: none;
+  transition: background var(--dur-fast) var(--ease);
+  &:hover {
+    background: var(--surface-subtle);
+    text-decoration: none;
+  }
+  @media (max-width: 1024px) {
+    & {
+      flex: none;
+      width: 240px;
+      border-bottom: 0;
+      border-left: 0;
+      border-right: 1px solid var(--border-subtle);
+      border-top: 3px solid transparent;
+    }
+  }
+`;
+const filmItemActive = css`
+  /* film-item-active */
+  ${filmItem}
+  background: var(--accent-subtle);
+  border-left-color: var(--accent);
+  &:hover {
+    background: var(--accent-subtle);
+  }
+  @media (max-width: 1024px) {
+    & {
+      border-left-color: transparent;
+      border-top-color: var(--accent);
+    }
+  }
+`;
+const filmBody = css`
+  /* film-body */
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+`;
+const filmTitle = css`
+  /* film-title */
+  overflow: hidden;
+  font-size: var(--text-base);
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+const filmSub = css`
+  /* film-sub */
+  overflow: hidden;
+  color: var(--text-secondary);
+  font-size: var(--text-xs);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+const filmStatus = css`
+  /* film-status */
+  display: inline-flex;
+  gap: var(--space-1);
+  align-items: center;
+  font-size: var(--text-xs);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+`;
+const dot = css`
+  /* status-dot */
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: var(--radius-pill);
+  background: var(--text-muted);
+`;
+const statusDots = {
+	neutral: dot,
+	success: css`
+    /* status-dot-success */
+    ${dot}
+    background: var(--status-approved);
+  `,
+	warning: css`
+    /* status-dot-warning */
+    ${dot}
+    background: var(--status-new);
+  `,
+	danger: css`
+    /* status-dot-danger */
+    ${dot}
+    background: var(--status-rejected);
+  `,
+	info: css`
+    /* status-dot-info */
+    ${dot}
+    background: var(--status-info);
+  `
+};
+const viewerHead = css`
+  /* viewer-head */
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2) var(--space-4);
+  align-items: baseline;
+  justify-content: space-between;
+`;
+const viewerTitle = css`
+  /* viewer-title */
+  margin: 0;
+  font-size: var(--text-lg);
+  font-weight: 650;
+  letter-spacing: -0.01em;
+`;
+const viewerMeta = css`
+  /* viewer-meta */
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  align-items: center;
+  margin: 0;
+  color: var(--text-secondary);
+  font-size: var(--text-sm);
+`;
+const actionBar = css`
+  /* review-action-bar */
+  position: sticky;
+  bottom: var(--space-4);
+  z-index: 20;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-3);
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-2) var(--space-3);
+  background: color-mix(in srgb, var(--surface-card) 92%, transparent);
+  backdrop-filter: blur(10px);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-2);
+`;
+const actionGroup = css`
+  /* review-action-group */
+  display: flex;
+  gap: var(--space-2);
+  align-items: center;
+`;
+const actionPosition = css`
+  /* review-action-position */
+  min-width: 4.5rem;
+  color: var(--text-secondary);
+  font-size: var(--text-sm);
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+`;
+const actionHints = css`
+  /* review-action-hints */
+  display: flex;
+  gap: var(--space-2);
+  align-items: center;
+  color: var(--text-secondary);
+  font-size: var(--text-xs);
+  @media (max-width: 720px) {
+    & {
+      display: none;
+    }
+  }
+`;
+const shortcutsDialog = css`
+  /* shortcuts-dialog */
+  width: min(440px, calc(100vw - 2rem));
+  padding: var(--space-5);
+  color: var(--text-primary);
+  background: var(--surface-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-3);
+  &::backdrop {
+    background: rgb(0 0 0 / 0.45);
+  }
+  h2 {
+    margin: 0 0 var(--space-3);
+    font-size: var(--text-lg);
+  }
+  dl {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: var(--space-2) var(--space-4);
+    margin: 0 0 var(--space-4);
+    font-size: var(--text-base);
+  }
+  dt {
+    display: flex;
+    gap: var(--space-1);
+  }
+  dd {
+    margin: 0;
+    color: var(--text-secondary);
+  }
+`;
+//#endregion
+export { actionBar, actionGroup, actionHints, actionPosition, canvasColumn, filmBody, filmItem, filmItemActive, filmStatus, filmSub, filmTitle, filmstrip, filmstripHead, filmstripList, headerActions, headerMain, headerMeta, headerProgress, headerSide, headerTitle, reviewHeader, shortcutsDialog, statusDots, viewerHead, viewerMeta, viewerTitle, workspace };
+
+//# sourceMappingURL=review-layout.mjs.map

package/dist/ui/styles/review-layout.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"review-layout.mjs","names":[],"sources":["../../../src/ui/styles/review-layout.ts"],"sourcesContent":["/**\n * Review workspace layout styles: header, filmstrip, canvas column, action\n * bar, and shortcuts dialog. Shared by the `build-diff-*` page sections, so\n * they live here (the documented exception to colocation).\n */\nimport { css } from \"../css.ts\";\n\nexport const workspace = css`\n  /* review-workspace */\n  display: grid;\n  grid-template-columns: 300px minmax(0, 1fr);\n  gap: var(--space-4);\n  align-items: start;\n  @media (max-width: 1024px) {\n    & {\n      grid-template-columns: minmax(0, 1fr);\n    }\n  }\n`;\n\nexport const canvasColumn = css`\n  /* review-canvas */\n  display: grid;\n  gap: var(--space-4);\n  min-width: 0;\n`;\n\n/* ---- header ---- */\n\nexport const reviewHeader = css`\n  /* review-header */\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-4);\n  align-items: flex-start;\n  justify-content: space-between;\n  margin-bottom: var(--space-4);\n  padding: var(--space-4);\n  background: linear-gradient(var(--accent-wash), var(--accent-wash)), var(--surface-card);\n  border: 1px solid var(--border);\n  border-radius: var(--radius-lg);\n  box-shadow: var(--shadow);\n`;\n\nexport const headerMain = css`\n  /* review-header-main */\n  display: grid;\n  gap: var(--space-1);\n  min-width: 0;\n`;\n\nexport const headerTitle = css`\n  /* review-header-title */\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2);\n  align-items: center;\n  margin: 0;\n  font-size: var(--text-xl);\n  font-weight: 700;\n  letter-spacing: -0.02em;\n  line-height: var(--leading-tight);\n`;\n\nexport const headerMeta = css`\n  /* review-header-meta */\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2);\n  align-items: center;\n  margin: 0;\n  color: var(--text-secondary);\n  font-size: var(--text-sm);\n`;\n\nexport const headerSide = css`\n  /* review-header-side */\n  display: grid;\n  gap: var(--space-3);\n  justify-items: end;\n  min-width: min(100%, 280px);\n  @media (max-width: 720px) {\n    & {\n      justify-items: stretch;\n      width: 100%;\n    }\n  }\n`;\n\nexport const headerProgress = css`\n  /* review-header-progress */\n  display: grid;\n  gap: var(--space-1);\n  width: 100%;\n  font-size: var(--text-sm);\n  color: var(--text-secondary);\n  font-variant-numeric: tabular-nums;\n`;\n\nexport const headerActions = css`\n  /* review-header-actions */\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2);\n  align-items: center;\n  justify-content: flex-end;\n`;\n\n/* ---- filmstrip ---- */\n\nexport const filmstrip = css`\n  /* filmstrip */\n  position: sticky;\n  top: calc(var(--topbar-height) + var(--space-4));\n  display: flex;\n  flex-direction: column;\n  max-height: calc(100vh - var(--topbar-height) - var(--space-8) - var(--space-4));\n  overflow: hidden;\n  background: var(--surface-card);\n  border: 1px solid var(--border);\n  border-radius: var(--radius-lg);\n  box-shadow: var(--shadow);\n  @media (max-width: 1024px) {\n    & {\n      position: static;\n      max-height: none;\n    }\n  }\n`;\n\nexport const filmstripHead = css`\n  /* filmstrip-head */\n  display: grid;\n  gap: var(--space-2);\n  padding: var(--space-3);\n  border-bottom: 1px solid var(--border);\n`;\n\nexport const filmstripList = css`\n  /* filmstrip-list */\n  overflow: auto;\n  overscroll-behavior: contain;\n  @media (max-width: 1024px) {\n    & {\n      display: flex;\n      overflow-x: auto;\n      overflow-y: hidden;\n    }\n  }\n`;\n\nexport const filmItem = css`\n  /* film-item */\n  display: grid;\n  grid-template-columns: 72px minmax(0, 1fr);\n  gap: var(--space-3);\n  align-items: center;\n  padding: var(--space-2) var(--space-3);\n  border-bottom: 1px solid var(--border-subtle);\n  border-left: 3px solid transparent;\n  color: inherit;\n  text-decoration: none;\n  transition: background var(--dur-fast) var(--ease);\n  &:hover {\n    background: var(--surface-subtle);\n    text-decoration: none;\n  }\n  @media (max-width: 1024px) {\n    & {\n      flex: none;\n      width: 240px;\n      border-bottom: 0;\n      border-left: 0;\n      border-right: 1px solid var(--border-subtle);\n      border-top: 3px solid transparent;\n    }\n  }\n`;\n\nexport const filmItemActive = css`\n  /* film-item-active */\n  ${filmItem}\n  background: var(--accent-subtle);\n  border-left-color: var(--accent);\n  &:hover {\n    background: var(--accent-subtle);\n  }\n  @media (max-width: 1024px) {\n    & {\n      border-left-color: transparent;\n      border-top-color: var(--accent);\n    }\n  }\n`;\n\nexport const filmBody = css`\n  /* film-body */\n  display: grid;\n  gap: 2px;\n  min-width: 0;\n`;\n\nexport const filmTitle = css`\n  /* film-title */\n  overflow: hidden;\n  font-size: var(--text-base);\n  font-weight: 600;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n`;\n\nexport const filmSub = css`\n  /* film-sub */\n  overflow: hidden;\n  color: var(--text-secondary);\n  font-size: var(--text-xs);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n`;\n\nexport const filmStatus = css`\n  /* film-status */\n  display: inline-flex;\n  gap: var(--space-1);\n  align-items: center;\n  font-size: var(--text-xs);\n  font-weight: 600;\n  font-variant-numeric: tabular-nums;\n`;\n\nconst dot = css`\n  /* status-dot */\n  display: inline-block;\n  width: 8px;\n  height: 8px;\n  border-radius: var(--radius-pill);\n  background: var(--text-muted);\n`;\n\nexport const statusDots = {\n  neutral: dot,\n  success: css`\n    /* status-dot-success */\n    ${dot}\n    background: var(--status-approved);\n  `,\n  warning: css`\n    /* status-dot-warning */\n    ${dot}\n    background: var(--status-new);\n  `,\n  danger: css`\n    /* status-dot-danger */\n    ${dot}\n    background: var(--status-rejected);\n  `,\n  info: css`\n    /* status-dot-info */\n    ${dot}\n    background: var(--status-info);\n  `,\n};\n\n/* ---- viewer ---- */\n\nexport const viewerHead = css`\n  /* viewer-head */\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2) var(--space-4);\n  align-items: baseline;\n  justify-content: space-between;\n`;\n\nexport const viewerTitle = css`\n  /* viewer-title */\n  margin: 0;\n  font-size: var(--text-lg);\n  font-weight: 650;\n  letter-spacing: -0.01em;\n`;\n\nexport const viewerMeta = css`\n  /* viewer-meta */\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2);\n  align-items: center;\n  margin: 0;\n  color: var(--text-secondary);\n  font-size: var(--text-sm);\n`;\n\n/* ---- action bar ---- */\n\nexport const actionBar = css`\n  /* review-action-bar */\n  position: sticky;\n  bottom: var(--space-4);\n  z-index: 20;\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-3);\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--space-2) var(--space-3);\n  background: color-mix(in srgb, var(--surface-card) 92%, transparent);\n  backdrop-filter: blur(10px);\n  border: 1px solid var(--border);\n  border-radius: var(--radius-lg);\n  box-shadow: var(--shadow-2);\n`;\n\nexport const actionGroup = css`\n  /* review-action-group */\n  display: flex;\n  gap: var(--space-2);\n  align-items: center;\n`;\n\nexport const actionPosition = css`\n  /* review-action-position */\n  min-width: 4.5rem;\n  color: var(--text-secondary);\n  font-size: var(--text-sm);\n  font-variant-numeric: tabular-nums;\n  text-align: center;\n`;\n\nexport const actionHints = css`\n  /* review-action-hints */\n  display: flex;\n  gap: var(--space-2);\n  align-items: center;\n  color: var(--text-secondary);\n  font-size: var(--text-xs);\n  @media (max-width: 720px) {\n    & {\n      display: none;\n    }\n  }\n`;\n\n/* ---- shortcuts dialog ---- */\n\nexport const shortcutsDialog = css`\n  /* shortcuts-dialog */\n  width: min(440px, calc(100vw - 2rem));\n  padding: var(--space-5);\n  color: var(--text-primary);\n  background: var(--surface-card);\n  border: 1px solid var(--border);\n  border-radius: var(--radius-lg);\n  box-shadow: var(--shadow-3);\n  &::backdrop {\n    background: rgb(0 0 0 / 0.45);\n  }\n  h2 {\n    margin: 0 0 var(--space-3);\n    font-size: var(--text-lg);\n  }\n  dl {\n    display: grid;\n    grid-template-columns: auto 1fr;\n    gap: var(--space-2) var(--space-4);\n    margin: 0 0 var(--space-4);\n    font-size: var(--text-base);\n  }\n  dt {\n    display: flex;\n    gap: var(--space-1);\n  }\n  dd {\n    margin: 0;\n    color: var(--text-secondary);\n  }\n`;\n"],"mappings":";;;;;;;;;;AAOA,MAAa,YAAY,GAAG;;;;;;;;;;;;AAa5B,MAAa,eAAe,GAAG;;;;;;AAS/B,MAAa,eAAe,GAAG;;;;;;;;;;;;;;AAe/B,MAAa,aAAa,GAAG;;;;;;AAO7B,MAAa,cAAc,GAAG;;;;;;;;;;;;AAa9B,MAAa,aAAa,GAAG;;;;;;;;;;AAW7B,MAAa,aAAa,GAAG;;;;;;;;;;;;;AAc7B,MAAa,iBAAiB,GAAG;;;;;;;;;AAUjC,MAAa,gBAAgB,GAAG;;;;;;;;AAWhC,MAAa,YAAY,GAAG;;;;;;;;;;;;;;;;;;;AAoB5B,MAAa,gBAAgB,GAAG;;;;;;;AAQhC,MAAa,gBAAgB,GAAG;;;;;;;;;;;;AAahC,MAAa,WAAW,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4B3B,MAAa,iBAAiB,GAAG;;IAE7B,SAAS;;;;;;;;;;;;;AAcb,MAAa,WAAW,GAAG;;;;;;AAO3B,MAAa,YAAY,GAAG;;;;;;;;AAS5B,MAAa,UAAU,GAAG;;;;;;;;AAS1B,MAAa,aAAa,GAAG;;;;;;;;;AAU7B,MAAM,MAAM,GAAG;;;;;;;;AASf,MAAa,aAAa;CACxB,SAAS;CACT,SAAS,GAAG;;MAER,IAAI;;;CAGR,SAAS,GAAG;;MAER,IAAI;;;CAGR,QAAQ,GAAG;;MAEP,IAAI;;;CAGR,MAAM,GAAG;;MAEL,IAAI;;;AAGV;AAIA,MAAa,aAAa,GAAG;;;;;;;;AAS7B,MAAa,cAAc,GAAG;;;;;;;AAQ9B,MAAa,aAAa,GAAG;;;;;;;;;;AAa7B,MAAa,YAAY,GAAG;;;;;;;;;;;;;;;;;AAkB5B,MAAa,cAAc,GAAG;;;;;;AAO9B,MAAa,iBAAiB,GAAG;;;;;;;;AASjC,MAAa,cAAc,GAAG;;;;;;;;;;;;;AAgB9B,MAAa,kBAAkB,GAAG"}

package/dist/ui/styles/review.mjs

@@ -0,0 +1,86 @@
+import "node:path";
+import "node:url";
+import.meta.url;
+import { css } from "../css.mjs";
+//#region src/ui/styles/review.ts
+/**
+* Snapshot-card and comment styles shared by the build detail, library, and
+* review pages (the review workspace layout lives in `review-layout.ts`).
+* Shared across pages, so they live here rather than colocated in one file —
+* the documented exception to colocation (see the `ui-building-blocks`
+* skill). Labels keep class names readable.
+*/
+const diffPaneImg = css`
+  /* diff-pane-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;
+`;
+const snapshotGrid = css`
+  /* snapshot-grid */
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+`;
+const snapshotCard = css`
+  /* snapshot-card */
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  overflow: hidden;
+  background: var(--surface-card);
+  display: flex;
+  flex-direction: column;
+`;
+const snapshotCardHead = css`
+  /* snapshot-card-head */
+  padding: 0.6rem 0.75rem;
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  justify-content: space-between;
+  gap: 0.5rem;
+  align-items: center;
+`;
+const snapshotCardMeta = css`
+  /* snapshot-card-meta */
+  font-size: 0.78rem;
+  color: var(--text-secondary);
+`;
+const snapshotCardBody = css`
+  /* snapshot-card-body */
+  padding: 0.5rem;
+  display: grid;
+  gap: 0.5rem;
+`;
+const reviewComment = css`
+  /* review-comment */
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 0.75rem;
+  background: var(--surface-card);
+`;
+const reviewCommentHead = css`
+  /* review-comment-head */
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  font-size: 0.82rem;
+  color: var(--text-secondary);
+  flex-wrap: wrap;
+`;
+const reviewCommentBody = css`
+  /* review-comment-body */
+  margin: 0.5rem 0 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-size: 0.875rem;
+`;
+const reviewCommentActions = css`
+  /* review-comment-actions */
+  margin-top: 0.5rem;
+`;
+//#endregion
+export { diffPaneImg, reviewComment, reviewCommentActions, reviewCommentBody, reviewCommentHead, snapshotCard, snapshotCardBody, snapshotCardHead, snapshotCardMeta, snapshotGrid };
+
+//# sourceMappingURL=review.mjs.map

package/dist/ui/styles/review.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"review.mjs","names":[],"sources":["../../../src/ui/styles/review.ts"],"sourcesContent":["/**\n * Snapshot-card and comment styles shared by the build detail, library, and\n * review pages (the review workspace layout lives in `review-layout.ts`).\n * Shared across pages, so they live here rather than colocated in one file —\n * the documented exception to colocation (see the `ui-building-blocks`\n * skill). Labels keep class names readable.\n */\nimport { css } from \"../css.ts\";\n\nexport const diffPaneImg = css`\n  /* diff-pane-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%) 0\n    0 / 16px 16px;\n`;\n\nexport const snapshotGrid = css`\n  /* snapshot-grid */\n  display: grid;\n  gap: 1rem;\n  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n`;\n\nexport const snapshotCard = css`\n  /* snapshot-card */\n  border: 1px solid var(--border);\n  border-radius: var(--radius);\n  overflow: hidden;\n  background: var(--surface-card);\n  display: flex;\n  flex-direction: column;\n`;\n\nexport const snapshotCardHead = css`\n  /* snapshot-card-head */\n  padding: 0.6rem 0.75rem;\n  border-bottom: 1px solid var(--border);\n  display: flex;\n  justify-content: space-between;\n  gap: 0.5rem;\n  align-items: center;\n`;\n\nexport const snapshotCardMeta = css`\n  /* snapshot-card-meta */\n  font-size: 0.78rem;\n  color: var(--text-secondary);\n`;\n\nexport const snapshotCardBody = css`\n  /* snapshot-card-body */\n  padding: 0.5rem;\n  display: grid;\n  gap: 0.5rem;\n`;\n\nexport const reviewComment = css`\n  /* review-comment */\n  border: 1px solid var(--border);\n  border-radius: var(--radius);\n  padding: 0.75rem;\n  background: var(--surface-card);\n`;\n\nexport const reviewCommentHead = css`\n  /* review-comment-head */\n  display: flex;\n  gap: 0.5rem;\n  align-items: center;\n  font-size: 0.82rem;\n  color: var(--text-secondary);\n  flex-wrap: wrap;\n`;\n\nexport const reviewCommentBody = css`\n  /* review-comment-body */\n  margin: 0.5rem 0 0;\n  white-space: pre-wrap;\n  word-break: break-word;\n  font-size: 0.875rem;\n`;\n\nexport const reviewCommentActions = css`\n  /* review-comment-actions */\n  margin-top: 0.5rem;\n`;\n"],"mappings":";;;;;;;;;;;;AASA,MAAa,cAAc,GAAG;;;;;;;;AAS9B,MAAa,eAAe,GAAG;;;;;;AAO/B,MAAa,eAAe,GAAG;;;;;;;;;AAU/B,MAAa,mBAAmB,GAAG;;;;;;;;;AAUnC,MAAa,mBAAmB,GAAG;;;;;AAMnC,MAAa,mBAAmB,GAAG;;;;;;AAOnC,MAAa,gBAAgB,GAAG;;;;;;;AAQhC,MAAa,oBAAoB,GAAG;;;;;;;;;AAUpC,MAAa,oBAAoB,GAAG;;;;;;;AAQpC,MAAa,uBAAuB,GAAG"}