@storyshelf/app 0.6.2 → 0.8.0

package/dist/pages/build-diff-reference.mjs

@@ -0,0 +1,84 @@
+import "node:path";
+import "node:url";
+import.meta.url;
+import { Alert } from "../ui/feedback.mjs";
+import { Segmented } from "../ui/segmented.mjs";
+import { CompareStage } from "../ui/compare-stage.mjs";
+import { jsx, jsxs } from "hono/jsx/jsx-runtime";
+// src/pages/build-diff-reference.tsx
+function BaselineReferenceNotice(props) {
+	const reference = props.reference;
+	if (reference.kind === "none") return /* @__PURE__ */ jsx(Alert, {
+		tone: "info",
+		title: "No baseline at capture",
+		children: "This was a new comparison; no baseline existed when it was captured."
+	});
+	if (reference.kind === "unavailable") return /* @__PURE__ */ jsx(Alert, {
+		tone: "warning",
+		title: "Baseline reference unavailable",
+		children: "The original baseline details or image are unavailable or have changed since this diff was computed. For older records, any image shown may be the current baseline rather than the one used for the diff."
+	});
+	return /* @__PURE__ */ jsxs(Alert, {
+		tone: "info",
+		title: "Comparison baseline",
+		children: [
+			reference.defaultBranch ? "Default branch" : "Accepted branch",
+			": ",
+			reference.branch,
+			". Baseline updated ",
+			reference.updatedAt,
+			".",
+			reference.imageAvailable ? "" : " The baseline image is unavailable.",
+			reference.build ? ` Reference build ${reference.build.id}, commit ${reference.build.gitSha.slice(0, 7)}.` : " Reference build and commit are unavailable."
+		]
+	});
+}
+/** What the Design source is, shown under its controls. */
+const DESIGN_NOTE = "Design reference: not a test. Scaled to the screenshot’s width.";
+/**
+* The comparison stage with a source switch. The baseline stage is always there; each cached design
+* render adds a stage (hidden until chosen) that compares the screenshot with the design using the
+* same side-by-side, swipe and onion tools. A reference only: no diff, score or verdict. Without a
+* render, only the baseline stage is rendered.
+*/
+function ComparisonSources(props) {
+	const { baseline, sources, currentSrc, subject } = props;
+	if (sources.length === 0) return baseline;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-compare-sources": true,
+		children: [
+			/* @__PURE__ */ jsx(Segmented, {
+				label: "Compare against",
+				"data-compare-source-switch": true,
+				items: [{
+					label: "Baseline",
+					value: "baseline",
+					active: true
+				}, ...sources.map((source) => ({
+					label: source.label,
+					value: source.value
+				}))]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				"data-compare-source": "baseline",
+				children: baseline
+			}),
+			sources.map((source) => /* @__PURE__ */ jsx("div", {
+				"data-compare-source": source.value,
+				hidden: true,
+				children: /* @__PURE__ */ jsx(CompareStage, {
+					variant: "design",
+					baselineLabel: source.name ? `${source.providerName} · ${source.name}` : "Design",
+					baselineSrc: source.src,
+					currentSrc,
+					diffSrc: null,
+					subject,
+					note: DESIGN_NOTE
+				})
+			}, source.value))
+		]
+	});
+}
+export { BaselineReferenceNotice, ComparisonSources };
+
+//# sourceMappingURL=build-diff-reference.mjs.map

package/dist/pages/build-diff-reference.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"build-diff-reference.mjs","names":[],"sources":["../../src/pages/build-diff-reference.tsx"],"sourcesContent":["import type { HtmlEscapedString } from \"hono/utils/html\";\nimport type { BaselineReference } from \"../routers/baseline-reference.ts\";\nimport { Alert, CompareStage, Segmented } from \"../ui/components.tsx\";\nimport type { DesignSource } from \"./build-diff-model.ts\";\n\n/* eslint-disable promise-function-async -- Hono JSX components return HTML or a promise */\nexport function BaselineReferenceNotice(props: {\n  reference: BaselineReference;\n}): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const reference = props.reference;\n  if (reference.kind === \"none\")\n    return (\n      <Alert tone=\"info\" title=\"No baseline at capture\">\n        This was a new comparison; no baseline existed when it was captured.\n      </Alert>\n    );\n  if (reference.kind === \"unavailable\")\n    return (\n      <Alert tone=\"warning\" title=\"Baseline reference unavailable\">\n        The original baseline details or image are unavailable or have changed since this diff was\n        computed. For older records, any image shown may be the current baseline rather than the one\n        used for the diff.\n      </Alert>\n    );\n  return (\n    <Alert tone=\"info\" title=\"Comparison baseline\">\n      {reference.defaultBranch ? \"Default branch\" : \"Accepted branch\"}: {reference.branch}. Baseline\n      updated {reference.updatedAt}.\n      {reference.imageAvailable ? \"\" : \" The baseline image is unavailable.\"}\n      {reference.build\n        ? ` Reference build ${reference.build.id}, commit ${reference.build.gitSha.slice(0, 7)}.`\n        : \" Reference build and commit are unavailable.\"}\n    </Alert>\n  );\n}\n\n/** What the Design source is, shown under its controls. */\nconst DESIGN_NOTE = \"Design reference: not a test. Scaled to the screenshot’s width.\";\n\n/**\n * The comparison stage with a source switch. The baseline stage is always there; each cached design\n * render adds a stage (hidden until chosen) that compares the screenshot with the design using the\n * same side-by-side, swipe and onion tools. A reference only: no diff, score or verdict. Without a\n * render, only the baseline stage is rendered.\n */\nexport function ComparisonSources(props: {\n  /** The baseline comparison stage. */\n  baseline: HtmlEscapedString | Promise<HtmlEscapedString>;\n  sources: DesignSource[];\n  currentSrc: string;\n  /** Accessible description shared by the images, e.g. \"Button / Primary\". */\n  subject: string;\n}): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const { baseline, sources, currentSrc, subject } = props;\n  if (sources.length === 0) return baseline;\n  return (\n    <div data-compare-sources>\n      <Segmented\n        label=\"Compare against\"\n        data-compare-source-switch\n        items={[\n          { label: \"Baseline\", value: \"baseline\", active: true },\n          ...sources.map((source) => ({ label: source.label, value: source.value })),\n        ]}\n      />\n      <div data-compare-source=\"baseline\">{baseline}</div>\n      {sources.map((source) => (\n        <div key={source.value} data-compare-source={source.value} hidden>\n          <CompareStage\n            variant=\"design\"\n            baselineLabel={source.name ? `${source.providerName} · ${source.name}` : \"Design\"}\n            baselineSrc={source.src}\n            currentSrc={currentSrc}\n            diffSrc={null}\n            subject={subject}\n            note={DESIGN_NOTE}\n          />\n        </div>\n      ))}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;AAMA,SAAgB,wBAAwB,OAEW;CACjD,MAAM,YAAY,MAAM;CACxB,IAAI,UAAU,SAAS,QACrB,OACE,oBAAC,OAAD;EAAO,MAAK;EAAO,OAAM;EAAyB,UAAA;CAE3C,CAAA;CAEX,IAAI,UAAU,SAAS,eACrB,OACE,oBAAC,OAAD;EAAO,MAAK;EAAU,OAAM;EAAiC,UAAA;CAItD,CAAA;CAEX,OACE,qBAAC,OAAD;EAAO,MAAK;EAAO,OAAM;EAAzB,UAAA;GACG,UAAU,gBAAgB,mBAAmB;GAAkB;GAAG,UAAU;GAAO;GAC3E,UAAU;GAAU;GAC5B,UAAU,iBAAiB,KAAK;GAChC,UAAU,QACP,oBAAoB,UAAU,MAAM,GAAG,WAAW,UAAU,MAAM,OAAO,MAAM,GAAG,CAAC,EAAE,KACrF;EACC;;AAEX;;AAGA,MAAM,cAAc;;;;;;;AAQpB,SAAgB,kBAAkB,OAOiB;CACjD,MAAM,EAAE,UAAU,SAAS,YAAY,YAAY;CACnD,IAAI,QAAQ,WAAW,GAAG,OAAO;CACjC,OACE,qBAAC,OAAD;EAAK,wBAAA;EAAL,UAAA;GACE,oBAAC,WAAD;IACE,OAAM;IACN,8BAAA;IACA,OAAO,CACL;KAAE,OAAO;KAAY,OAAO;KAAY,QAAQ;IAAK,GACrD,GAAG,QAAQ,KAAK,YAAY;KAAE,OAAO,OAAO;KAAO,OAAO,OAAO;IAAM,EAAE,CAC3E;GACD,CAAA;GACD,oBAAC,OAAD;IAAK,uBAAoB;IAAY,UAAA;GAAc,CAAA;GAClD,QAAQ,KAAK,WACZ,oBAAC,OAAD;IAAwB,uBAAqB,OAAO;IAAO,QAAA;IACzD,UAAA,oBAAC,cAAD;KACE,SAAQ;KACR,eAAe,OAAO,OAAO,GAAG,OAAO,aAAa,KAAK,OAAO,SAAS;KACzE,aAAa,OAAO;KACR;KACZ,SAAS;KACA;KACT,MAAM;IACP,CAAA;GACE,GAVK,OAAO,KAUZ,CACN;EACE;;AAET"}

package/dist/pages/build-diff-shortcuts.mjs

@@ -5,7 +5,7 @@ import { Button } from "../ui/buttons.mjs";
 import { Kbd } from "../ui/kbd.mjs";
 import { shortcutsDialog } from "../ui/styles/review-layout.mjs";
 import { Fragment, jsx, jsxs } from "hono/jsx/jsx-runtime";
-//#region src/pages/build-diff-shortcuts.tsx
+// src/pages/build-diff-shortcuts.tsx
 const SHORTCUTS = [
 	{
 		keys: ["j", "→"],
@@ -15,9 +15,13 @@ const SHORTCUTS = [
 		keys: ["k", "←"],
 		action: "Previous snapshot"
 	},
+	{
+		keys: ["[", "]"],
+		action: "Previous / next browser of this story"
+	},
 	{
 		keys: ["a"],
-		action: "Approve"
+		action: "Approve (all browsers of the story and mode)"
 	},
 	{
 		keys: ["r"],
@@ -72,7 +76,6 @@ function ShortcutsDialog() {
 		]
 	});
 }
-//#endregion
 export { ShortcutsDialog };
 
 //# sourceMappingURL=build-diff-shortcuts.mjs.map

package/dist/pages/build-diff-shortcuts.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"build-diff-shortcuts.mjs","names":[],"sources":["../../src/pages/build-diff-shortcuts.tsx"],"sourcesContent":["import type { HtmlEscapedString } from \"hono/utils/html\";\nimport { Button, Kbd } from \"../ui/components.tsx\";\nimport { shortcutsDialog } from \"../ui/styles/review-layout.ts\";\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\nconst SHORTCUTS: { keys: string[]; action: string }[] = [\n  { keys: [\"j\", \"→\"], action: \"Next snapshot\" },\n  { keys: [\"k\", \"←\"], action: \"Previous snapshot\" },\n  { keys: [\"a\"], action: \"Approve\" },\n  { keys: [\"r\"], action: \"Reject\" },\n  { keys: [\"1\", \"–\", \"5\"], action: \"Side by side, swipe, onion skin, diff, flip\" },\n  { keys: [\"f\"], action: \"Cycle zoom (fit, 100%, 200%, 400%)\" },\n  { keys: [\"+\", \"–\"], action: \"Zoom in / out\" },\n  { keys: [\"t\"], action: \"Flip baseline / current\" },\n  { keys: [\"?\"], action: \"Show this help\" },\n];\n\n/** Native dialog listing the review keyboard shortcuts (opened with `?`). */\nexport function ShortcutsDialog(): HtmlEscapedString | Promise<HtmlEscapedString> {\n  return (\n    <dialog class={shortcutsDialog} data-shortcuts aria-labelledby=\"shortcuts-title\">\n      <h2 id=\"shortcuts-title\">Keyboard shortcuts</h2>\n      <dl>\n        {SHORTCUTS.map((item) => (\n          <>\n            <dt>\n              <Kbd keys={item.keys} />\n            </dt>\n            <dd>{item.action}</dd>\n          </>\n        ))}\n      </dl>\n      <form method=\"dialog\">\n        <Button variant=\"secondary\" size=\"sm\" type=\"submit\">\n          Close\n        </Button>\n      </form>\n    </dialog>\n  );\n}\n"],"mappings":";;;;;;;;AAMA,MAAM,YAAkD;CACtD;EAAE,MAAM,CAAC,KAAK,GAAG;EAAG,QAAQ;CAAgB;CAC5C;EAAE,MAAM,CAAC,KAAK,GAAG;EAAG,QAAQ;CAAoB;CAChD;EAAE,MAAM,CAAC,GAAG;EAAG,QAAQ;CAAU;CACjC;EAAE,MAAM,CAAC,GAAG;EAAG,QAAQ;CAAS;CAChC;EAAE,MAAM;GAAC;GAAK;GAAK;EAAG;EAAG,QAAQ;CAA8C;CAC/E;EAAE,MAAM,CAAC,GAAG;EAAG,QAAQ;CAAqC;CAC5D;EAAE,MAAM,CAAC,KAAK,GAAG;EAAG,QAAQ;CAAgB;CAC5C;EAAE,MAAM,CAAC,GAAG;EAAG,QAAQ;CAA0B;CACjD;EAAE,MAAM,CAAC,GAAG;EAAG,QAAQ;CAAiB;AAC1C;;AAGA,SAAgB,kBAAkE;CAChF,OACE,qBAAC,UAAD;EAAQ,OAAO;EAAiB,kBAAA;EAAe,mBAAgB;EAA/D,UAAA;GACE,oBAAC,MAAD;IAAI,IAAG;IAAkB,UAAA;GAAsB,CAAA;GAC/C,oBAAC,MAAD,EAAA,UACG,UAAU,KAAK,SACd,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,MAAD,EAAA,UACE,oBAAC,KAAD,EAAK,MAAM,KAAK,KAAO,CAAA,EACrB,CAAA,GACJ,oBAAC,MAAD,EAAA,UAAK,KAAK,OAAW,CAAA,CACrB,EAAA,CAAA,CACH,EACC,CAAA;GACJ,oBAAC,QAAD;IAAM,QAAO;IACX,UAAA,oBAAC,QAAD;KAAQ,SAAQ;KAAY,MAAK;KAAK,MAAK;KAAS,UAAA;IAE5C,CAAA;GACJ,CAAA;EACA;;AAEZ"}
+{"version":3,"file":"build-diff-shortcuts.mjs","names":[],"sources":["../../src/pages/build-diff-shortcuts.tsx"],"sourcesContent":["import type { HtmlEscapedString } from \"hono/utils/html\";\nimport { Button, Kbd } from \"../ui/components.tsx\";\nimport { shortcutsDialog } from \"../ui/styles/review-layout.ts\";\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\nconst SHORTCUTS: { keys: string[]; action: string }[] = [\n  { keys: [\"j\", \"→\"], action: \"Next snapshot\" },\n  { keys: [\"k\", \"←\"], action: \"Previous snapshot\" },\n  { keys: [\"[\", \"]\"], action: \"Previous / next browser of this story\" },\n  { keys: [\"a\"], action: \"Approve (all browsers of the story and mode)\" },\n  { keys: [\"r\"], action: \"Reject\" },\n  { keys: [\"1\", \"–\", \"5\"], action: \"Side by side, swipe, onion skin, diff, flip\" },\n  { keys: [\"f\"], action: \"Cycle zoom (fit, 100%, 200%, 400%)\" },\n  { keys: [\"+\", \"–\"], action: \"Zoom in / out\" },\n  { keys: [\"t\"], action: \"Flip baseline / current\" },\n  { keys: [\"?\"], action: \"Show this help\" },\n];\n\n/** Native dialog listing the review keyboard shortcuts (opened with `?`). */\nexport function ShortcutsDialog(): HtmlEscapedString | Promise<HtmlEscapedString> {\n  return (\n    <dialog class={shortcutsDialog} data-shortcuts aria-labelledby=\"shortcuts-title\">\n      <h2 id=\"shortcuts-title\">Keyboard shortcuts</h2>\n      <dl>\n        {SHORTCUTS.map((item) => (\n          <>\n            <dt>\n              <Kbd keys={item.keys} />\n            </dt>\n            <dd>{item.action}</dd>\n          </>\n        ))}\n      </dl>\n      <form method=\"dialog\">\n        <Button variant=\"secondary\" size=\"sm\" type=\"submit\">\n          Close\n        </Button>\n      </form>\n    </dialog>\n  );\n}\n"],"mappings":";;;;;;;;AAMA,MAAM,YAAkD;CACtD;EAAE,MAAM,CAAC,KAAK,GAAG;EAAG,QAAQ;CAAgB;CAC5C;EAAE,MAAM,CAAC,KAAK,GAAG;EAAG,QAAQ;CAAoB;CAChD;EAAE,MAAM,CAAC,KAAK,GAAG;EAAG,QAAQ;CAAwC;CACpE;EAAE,MAAM,CAAC,GAAG;EAAG,QAAQ;CAA+C;CACtE;EAAE,MAAM,CAAC,GAAG;EAAG,QAAQ;CAAS;CAChC;EAAE,MAAM;GAAC;GAAK;GAAK;EAAG;EAAG,QAAQ;CAA8C;CAC/E;EAAE,MAAM,CAAC,GAAG;EAAG,QAAQ;CAAqC;CAC5D;EAAE,MAAM,CAAC,KAAK,GAAG;EAAG,QAAQ;CAAgB;CAC5C;EAAE,MAAM,CAAC,GAAG;EAAG,QAAQ;CAA0B;CACjD;EAAE,MAAM,CAAC,GAAG;EAAG,QAAQ;CAAiB;AAC1C;;AAGA,SAAgB,kBAAkE;CAChF,OACE,qBAAC,UAAD;EAAQ,OAAO;EAAiB,kBAAA;EAAe,mBAAgB;EAA/D,UAAA;GACE,oBAAC,MAAD;IAAI,IAAG;IAAkB,UAAA;GAAsB,CAAA;GAC/C,oBAAC,MAAD,EAAA,UACG,UAAU,KAAK,SACd,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,MAAD,EAAA,UACE,oBAAC,KAAD,EAAK,MAAM,KAAK,KAAO,CAAA,EACrB,CAAA,GACJ,oBAAC,MAAD,EAAA,UAAK,KAAK,OAAW,CAAA,CACrB,EAAA,CAAA,CACH,EACC,CAAA;GACJ,oBAAC,QAAD;IAAM,QAAO;IACX,UAAA,oBAAC,QAAD;KAAQ,SAAQ;KAAY,MAAK;KAAK,MAAK;KAAS,UAAA;IAE5C,CAAA;GACJ,CAAA;EACA;;AAEZ"}

package/dist/pages/build-diff-stale.mjs

@@ -5,7 +5,7 @@ import { Button } from "../ui/buttons.mjs";
 import { Alert, Meta } from "../ui/feedback.mjs";
 import { HStack, VStack } from "../ui/stacks.mjs";
 import { jsx, jsxs } from "hono/jsx/jsx-runtime";
-//#region src/pages/build-diff-stale.tsx
+// src/pages/build-diff-stale.tsx
 /**
 * Warns that undecided snapshots were compared with a baseline that has since changed.
 * Builds are never recaptured automatically, so the reviewer chooses how to refresh.
@@ -64,7 +64,6 @@ function StaleSnapshotNotice(props) {
 		]
 	});
 }
-//#endregion
 export { StaleBaselineNotice, StaleSnapshotNotice };
 
 //# sourceMappingURL=build-diff-stale.mjs.map

package/dist/pages/build-diff-usage.mjs

@@ -0,0 +1,62 @@
+import "node:path";
+import "node:url";
+import.meta.url;
+import { Button } from "../ui/buttons.mjs";
+import { Badge } from "../ui/feedback.mjs";
+import { HStack } from "../ui/stacks.mjs";
+import { Fragment, jsx, jsxs } from "hono/jsx/jsx-runtime";
+import { createUrlBuilder } from "@storyshelf/core/urls";
+// src/pages/build-diff-usage.tsx
+/** Deep link to the upstream component's published story (or its Storybook root). */
+function upstreamPreviewUrl(item, publishedBaseDomain) {
+	if (!item.upstreamBuildId) return null;
+	const base = createUrlBuilder("/", publishedBaseDomain).storybookBuild(item.upstreamSlug, item.upstreamBuildId);
+	return item.upstreamStoryId ? `${base}?storyId=${encodeURIComponent(item.upstreamStoryId)}` : base;
+}
+/** "Uses @acme/ds v2.4.0" provenance badge with Preview and History deep links. */
+function LinkedUsage(props) {
+	const urls = createUrlBuilder("/", props.publishedBaseDomain);
+	return /* @__PURE__ */ jsx(Fragment, { children: props.usage.map((item) => {
+		const preview = upstreamPreviewUrl(item, props.publishedBaseDomain);
+		return /* @__PURE__ */ jsxs(HStack, {
+			wrap: false,
+			children: [
+				/* @__PURE__ */ jsxs(Badge, {
+					tone: "info",
+					children: [
+						"Uses ",
+						item.package,
+						item.version ? ` v${item.version}` : ""
+					]
+				}),
+				preview ? /* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					size: "sm",
+					href: preview,
+					target: "_blank",
+					rel: "noreferrer",
+					children: "Preview"
+				}) : null,
+				item.upstreamImportPath ? /* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					size: "sm",
+					href: urls.component(item.upstreamSlug, item.upstreamImportPath),
+					target: "_blank",
+					rel: "noreferrer",
+					children: "Story →"
+				}) : null,
+				/* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					size: "sm",
+					href: urls.library(item.upstreamSlug),
+					target: "_blank",
+					rel: "noreferrer",
+					children: "History"
+				})
+			]
+		}, item.package);
+	}) });
+}
+export { LinkedUsage, upstreamPreviewUrl };
+
+//# sourceMappingURL=build-diff-usage.mjs.map

package/dist/pages/build-diff-usage.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"build-diff-usage.mjs","names":[],"sources":["../../src/pages/build-diff-usage.tsx"],"sourcesContent":["import { createUrlBuilder } from \"@storyshelf/core/urls\";\nimport type { HtmlEscapedString } from \"hono/utils/html\";\nimport { Badge, Button, HStack } from \"../ui/components.tsx\";\n\n/** A linked package a story uses, resolved against its upstream project. */\nexport interface LinkedUsageItem {\n  package: string;\n  version: string | null;\n  upstreamSlug: string;\n  /** Latest approved default build of the upstream project, when it has one. */\n  upstreamBuildId: string | null;\n  /** Upstream story the package module maps to; null when nothing matched. */\n  upstreamStoryId: string | null;\n  /** Story file of the matched upstream story, for its component page. */\n  upstreamImportPath?: string | null;\n}\n\n/** Deep link to the upstream component's published story (or its Storybook root). */\nexport function upstreamPreviewUrl(\n  item: LinkedUsageItem,\n  publishedBaseDomain?: string,\n): string | null {\n  if (!item.upstreamBuildId) {\n    return null;\n  }\n  const base = createUrlBuilder(\"/\", publishedBaseDomain).storybookBuild(\n    item.upstreamSlug,\n    item.upstreamBuildId,\n  );\n  return item.upstreamStoryId\n    ? `${base}?storyId=${encodeURIComponent(item.upstreamStoryId)}`\n    : base;\n}\n\n/** \"Uses @acme/ds v2.4.0\" provenance badge with Preview and History deep links. */\nexport function LinkedUsage(props: {\n  usage: LinkedUsageItem[];\n  publishedBaseDomain?: string;\n}): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const urls = createUrlBuilder(\"/\", props.publishedBaseDomain);\n  return (\n    <>\n      {props.usage.map((item): HtmlEscapedString | Promise<HtmlEscapedString> => {\n        const preview = upstreamPreviewUrl(item, props.publishedBaseDomain);\n        return (\n          <HStack key={item.package} wrap={false}>\n            <Badge tone=\"info\">\n              Uses {item.package}\n              {item.version ? ` v${item.version}` : \"\"}\n            </Badge>\n            {preview ? (\n              <Button variant=\"ghost\" size=\"sm\" href={preview} target=\"_blank\" rel=\"noreferrer\">\n                Preview\n              </Button>\n            ) : null}\n            {item.upstreamImportPath ? (\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                href={urls.component(item.upstreamSlug, item.upstreamImportPath)}\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                Story →\n              </Button>\n            ) : null}\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              href={urls.library(item.upstreamSlug)}\n              target=\"_blank\"\n              rel=\"noreferrer\"\n            >\n              History\n            </Button>\n          </HStack>\n        );\n      })}\n    </>\n  );\n}\n"],"mappings":";;;;;;;;;;AAkBA,SAAgB,mBACd,MACA,qBACe;CACf,IAAI,CAAC,KAAK,iBACR,OAAO;CAET,MAAM,OAAO,iBAAiB,KAAK,mBAAmB,CAAC,CAAC,eACtD,KAAK,cACL,KAAK,eACP;CACA,OAAO,KAAK,kBACR,GAAG,KAAK,WAAW,mBAAmB,KAAK,eAAe,MAC1D;AACN;;AAGA,SAAgB,YAAY,OAGuB;CACjD,MAAM,OAAO,iBAAiB,KAAK,MAAM,mBAAmB;CAC5D,OACE,oBAAA,UAAA,EAAA,UACG,MAAM,MAAM,KAAK,SAAyD;EACzE,MAAM,UAAU,mBAAmB,MAAM,MAAM,mBAAmB;EAClE,OACE,qBAAC,QAAD;GAA2B,MAAM;GAAjC,UAAA;IACE,qBAAC,OAAD;KAAO,MAAK;KAAZ,UAAA;MAAmB;MACX,KAAK;MACV,KAAK,UAAU,KAAK,KAAK,YAAY;KACjC;;IACN,UACC,oBAAC,QAAD;KAAQ,SAAQ;KAAQ,MAAK;KAAK,MAAM;KAAS,QAAO;KAAS,KAAI;KAAa,UAAA;IAE1E,CAAA,IACN;IACH,KAAK,qBACJ,oBAAC,QAAD;KACE,SAAQ;KACR,MAAK;KACL,MAAM,KAAK,UAAU,KAAK,cAAc,KAAK,kBAAkB;KAC/D,QAAO;KACP,KAAI;KACL,UAAA;IAEO,CAAA,IACN;IACJ,oBAAC,QAAD;KACE,SAAQ;KACR,MAAK;KACL,MAAM,KAAK,QAAQ,KAAK,YAAY;KACpC,QAAO;KACP,KAAI;KACL,UAAA;IAEO,CAAA;GACF;EA9BK,GAAA,KAAK,OA8BV;CAEZ,CAAC,EACD,CAAA;AAEN"}

package/dist/pages/build-diff-viewer.mjs

@@ -1,21 +1,58 @@
 import "node:path";
 import "node:url";
 import.meta.url;
+import { Button } from "../ui/buttons.mjs";
 import { Badge, statusTone } from "../ui/feedback.mjs";
 import { VStack } from "../ui/stacks.mjs";
+import { Segmented } from "../ui/segmented.mjs";
 import { CompareStage } from "../ui/compare-stage.mjs";
+import { A11yViolationsNotice, a11yCarrierOf } from "./a11y-violations.mjs";
+import { designSources, diffPercent, snapshotImageUrl, snapshotPageUrl, snapshotVariant } from "./build-diff-model.mjs";
 import { StaleSnapshotNotice } from "./build-diff-stale.mjs";
+import { LinkedUsage } from "./build-diff-usage.mjs";
+import { DesignReferences, DesignStrip } from "./design-links.mjs";
 import { viewerHead, viewerMeta, viewerTitle } from "../ui/styles/review-layout.mjs";
-import { diffPercent, snapshotImageUrl } from "./build-diff-model.mjs";
+import { EnvironmentChangeSnapshotNotice } from "./build-diff-environment.mjs";
+import { DefaultComparisonView } from "./build-diff-default.mjs";
+import { BaselineReferenceNotice, ComparisonSources } from "./build-diff-reference.mjs";
 import { jsx, jsxs } from "hono/jsx/jsx-runtime";
-//#region src/pages/build-diff-viewer.tsx
+import { createUrlBuilder } from "@storyshelf/core/urls";
+// src/pages/build-diff-viewer.tsx
 /** Why a snapshot has no diff image, phrased for the empty pane. */
 function diffEmptyText(status) {
 	return status === "unchanged" || status === "approved" ? "No diff — within threshold" : "No diff yet";
 }
+/** Browser tabs (one link per engine) when the story/mode was captured on several. */
+function BrowserTabs(props) {
+	const { project, build, selected, siblings } = props;
+	if (siblings.length < 2) return null;
+	return /* @__PURE__ */ jsx(Segmented, {
+		label: "Browser",
+		"data-browser-tabs": true,
+		items: siblings.map((snap) => ({
+			label: `${snap.browser ?? "chromium"} · ${snap.status}`,
+			value: snap.id,
+			href: snapshotPageUrl(project, build, snap.id),
+			active: snap.id === selected.id
+		}))
+	});
+}
+/** Link to the story file's component page, anchored at the story. */
+function ViewComponentButton(props) {
+	const { project, selected, base } = props;
+	if (!selected.storyImportPath) return null;
+	const urls = createUrlBuilder("/", base);
+	return /* @__PURE__ */ jsx(Button, {
+		variant: "ghost",
+		size: "sm",
+		href: `${urls.component(project.slug, selected.storyImportPath)}#${selected.storyId}`,
+		children: "View component"
+	});
+}
 /** Story heading plus the comparison stage for the selected snapshot. */
 function DiffViewer(props) {
-	const { project, build, selected, hasBaseline, drifted } = props;
+	const { project, build, selected, drifted, usage, design, publishedBaseDomain } = props;
+	const siblings = props.siblings ?? [selected];
 	const percent = diffPercent(selected);
 	return /* @__PURE__ */ jsxs(VStack, { children: [
 		/* @__PURE__ */ jsxs("div", {
@@ -36,7 +73,7 @@ function DiffViewer(props) {
 						children: selected.status
 					}),
 					/* @__PURE__ */ jsxs("span", { children: [
-						selected.viewportName,
+						snapshotVariant(selected),
 						" · ",
 						selected.viewportWidth,
 						"×",
@@ -49,22 +86,68 @@ function DiffViewer(props) {
 					percent ? /* @__PURE__ */ jsx("span", {
 						class: "mono",
 						children: percent
-					}) : null
+					}) : null,
+					/* @__PURE__ */ jsx(ViewComponentButton, {
+						project,
+						selected,
+						base: publishedBaseDomain
+					})
 				]
 			})]
 		}),
+		props.reference ? /* @__PURE__ */ jsx(BaselineReferenceNotice, { reference: props.reference }) : null,
+		/* @__PURE__ */ jsx(BrowserTabs, {
+			project,
+			build,
+			selected,
+			siblings
+		}),
 		drifted ? /* @__PURE__ */ jsx(StaleSnapshotNotice, { status: drifted }) : null,
-		/* @__PURE__ */ jsx(CompareStage, {
-			baselineSrc: hasBaseline[selected.id] ? snapshotImageUrl(project, build, selected, "baseline") : null,
-			currentSrc: snapshotImageUrl(project, build, selected, "image"),
-			diffSrc: selected.diffPath ? snapshotImageUrl(project, build, selected, "diff") : null,
-			subject: `${selected.storyTitle} / ${selected.storyName}`,
-			diffEmpty: diffEmptyText(selected.status),
-			diffMeta: percent ?? void 0
-		})
+		/* @__PURE__ */ jsx(EnvironmentChangeSnapshotNotice, {
+			snapshot: selected,
+			migrated: build.isDefault
+		}),
+		/* @__PURE__ */ jsx(A11yViolationsNotice, { snapshot: a11yCarrierOf(selected, siblings) }),
+		usage && usage.length > 0 ? /* @__PURE__ */ jsx(LinkedUsage, {
+			usage,
+			publishedBaseDomain
+		}) : null,
+		design && design.length > 0 ? /* @__PURE__ */ jsx(DesignStrip, { items: design }) : null,
+		/* @__PURE__ */ jsx(PrimaryComparison, { ...props }),
+		/* @__PURE__ */ jsx(SecondaryComparison, { ...props }),
+		design && design.length > 0 ? /* @__PURE__ */ jsx(DesignReferences, { items: design }) : null
 	] });
 }
-//#endregion
+function SecondaryComparison(props) {
+	if (!props.defaultComparison) return null;
+	return /* @__PURE__ */ jsx(DefaultComparisonView, {
+		...props,
+		snapshot: props.selected,
+		comparison: props.defaultComparison
+	});
+}
+function baselineUrl(props) {
+	const { hasBaseline, selected, reference, project, build } = props;
+	return hasBaseline[selected.id] && reference?.kind !== "none" && !(reference?.kind === "known" && !reference.imageAvailable) && !(reference?.kind === "unavailable" && selected.baselineVersion !== null) ? snapshotImageUrl(project, build, selected, "baseline") : null;
+}
+function PrimaryComparison(props) {
+	const { project, build, selected, reference } = props;
+	const stage = /* @__PURE__ */ jsx(CompareStage, {
+		baselineSrc: baselineUrl(props),
+		baselineEmpty: reference?.kind === "unavailable" || reference?.kind === "known" && !reference.imageAvailable ? "The original baseline image is unavailable." : void 0,
+		currentSrc: snapshotImageUrl(project, build, selected, "image"),
+		diffSrc: selected.diffPath ? snapshotImageUrl(project, build, selected, "diff") : null,
+		subject: `${selected.storyTitle} / ${selected.storyName}`,
+		diffEmpty: diffEmptyText(selected.status),
+		diffMeta: diffPercent(selected) ?? void 0
+	});
+	return /* @__PURE__ */ jsx(ComparisonSources, {
+		baseline: stage,
+		sources: designSources(props.design ?? []),
+		currentSrc: snapshotImageUrl(project, build, selected, "image"),
+		subject: `${selected.storyTitle} / ${selected.storyName}`
+	});
+}
 export { DiffViewer };
 
 //# sourceMappingURL=build-diff-viewer.mjs.map

package/dist/pages/build-diff-viewer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"build-diff-viewer.mjs","names":[],"sources":["../../src/pages/build-diff-viewer.tsx"],"sourcesContent":["import type { Build, Project, Snapshot } from \"@storyshelf/core/schema\";\nimport type { HtmlEscapedString } from \"hono/utils/html\";\nimport { Badge, CompareStage, VStack, statusTone } from \"../ui/components.tsx\";\nimport { viewerHead, viewerMeta, viewerTitle } from \"../ui/styles/review-layout.ts\";\nimport { diffPercent, snapshotImageUrl } from \"./build-diff-model.ts\";\nimport { StaleSnapshotNotice } from \"./build-diff-stale.tsx\";\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\n/** Viewer props for the selected snapshot. */\nexport interface DiffViewerProps {\n  project: Project;\n  build: Build;\n  selected: Snapshot;\n  hasBaseline: Record<string, boolean>;\n  /** Set when the baseline changed after this snapshot's diff was computed. */\n  drifted?: \"stale\" | \"removed\";\n}\n\n/** Why a snapshot has no diff image, phrased for the empty pane. */\nfunction diffEmptyText(status: string): string {\n  return status === \"unchanged\" || status === \"approved\"\n    ? \"No diff — within threshold\"\n    : \"No diff yet\";\n}\n\n/** Story heading plus the comparison stage for the selected snapshot. */\nexport function DiffViewer(props: DiffViewerProps): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const { project, build, selected, hasBaseline, drifted } = props;\n  const percent = diffPercent(selected);\n  return (\n    <VStack>\n      <div class={viewerHead}>\n        <h2 class={viewerTitle}>\n          {selected.storyTitle} / {selected.storyName}\n        </h2>\n        <p class={viewerMeta}>\n          <Badge tone={statusTone(selected.status)} icon>\n            {selected.status}\n          </Badge>\n          <span>\n            {selected.viewportName} · {selected.viewportWidth}×{selected.viewportHeight}\n          </span>\n          {selected.diffPixels === null || selected.diffPixels === undefined ? null : (\n            <span class=\"mono\">{selected.diffPixels} px</span>\n          )}\n          {percent ? <span class=\"mono\">{percent}</span> : null}\n        </p>\n      </div>\n      {drifted ? <StaleSnapshotNotice status={drifted} /> : null}\n      <CompareStage\n        baselineSrc={\n          hasBaseline[selected.id] ? snapshotImageUrl(project, build, selected, \"baseline\") : null\n        }\n        currentSrc={snapshotImageUrl(project, build, selected, \"image\")}\n        diffSrc={selected.diffPath ? snapshotImageUrl(project, build, selected, \"diff\") : null}\n        subject={`${selected.storyTitle} / ${selected.storyName}`}\n        diffEmpty={diffEmptyText(selected.status)}\n        diffMeta={percent ?? undefined}\n      />\n    </VStack>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAoBA,SAAS,cAAc,QAAwB;CAC7C,OAAO,WAAW,eAAe,WAAW,aACxC,+BACA;AACN;;AAGA,SAAgB,WAAW,OAAwE;CACjG,MAAM,EAAE,SAAS,OAAO,UAAU,aAAa,YAAY;CAC3D,MAAM,UAAU,YAAY,QAAQ;CACpC,OACE,qBAAC,QAAD,EAAA,UAAA;EACE,qBAAC,OAAD;GAAK,OAAO;GAAZ,UAAA,CACE,qBAAC,MAAD;IAAI,OAAO;IAAX,UAAA;KACG,SAAS;KAAW;KAAI,SAAS;IAChC;GACJ,CAAA,GAAA,qBAAC,KAAD;IAAG,OAAO;IAAV,UAAA;KACE,oBAAC,OAAD;MAAO,MAAM,WAAW,SAAS,MAAM;MAAG,MAAA;MACvC,UAAA,SAAS;KACL,CAAA;KACP,qBAAC,QAAD,EAAA,UAAA;MACG,SAAS;MAAa;MAAI,SAAS;MAAc;MAAE,SAAS;KACzD,EAAA,CAAA;KACL,SAAS,eAAe,QAAQ,SAAS,eAAe,KAAA,IAAY,OACnE,qBAAC,QAAD;MAAM,OAAM;MAAZ,UAAA,CAAoB,SAAS,YAAW,KAAS;;KAElD,UAAU,oBAAC,QAAD;MAAM,OAAM;MAAQ,UAAA;KAAc,CAAA,IAAI;IAChD;GACA,CAAA,CAAA;;EACJ,UAAU,oBAAC,qBAAD,EAAqB,QAAQ,QAAU,CAAA,IAAI;EACtD,oBAAC,cAAD;GACE,aACE,YAAY,SAAS,MAAM,iBAAiB,SAAS,OAAO,UAAU,UAAU,IAAI;GAEtF,YAAY,iBAAiB,SAAS,OAAO,UAAU,OAAO;GAC9D,SAAS,SAAS,WAAW,iBAAiB,SAAS,OAAO,UAAU,MAAM,IAAI;GAClF,SAAS,GAAG,SAAS,WAAW,KAAK,SAAS;GAC9C,WAAW,cAAc,SAAS,MAAM;GACxC,UAAU,WAAW,KAAA;EACtB,CAAA;CACK,EAAA,CAAA;AAEZ"}
+{"version":3,"file":"build-diff-viewer.mjs","names":[],"sources":["../../src/pages/build-diff-viewer.tsx"],"sourcesContent":["import type { Build, Project, Snapshot } from \"@storyshelf/core/schema\";\nimport { createUrlBuilder } from \"@storyshelf/core/urls\";\nimport type { HtmlEscapedString } from \"hono/utils/html\";\nimport type { BaselineReference, DefaultComparison } from \"../routers/baseline-reference.ts\";\nimport { Badge, Button, CompareStage, Segmented, VStack, statusTone } from \"../ui/components.tsx\";\nimport { viewerHead, viewerMeta, viewerTitle } from \"../ui/styles/review-layout.ts\";\nimport { A11yViolationsNotice, a11yCarrierOf } from \"./a11y-violations.tsx\";\nimport { DefaultComparisonView } from \"./build-diff-default.tsx\";\nimport { EnvironmentChangeSnapshotNotice } from \"./build-diff-environment.tsx\";\nimport {\n  designSources,\n  diffPercent,\n  snapshotImageUrl,\n  snapshotPageUrl,\n  snapshotVariant,\n} from \"./build-diff-model.ts\";\nimport { BaselineReferenceNotice, ComparisonSources } from \"./build-diff-reference.tsx\";\nimport { StaleSnapshotNotice } from \"./build-diff-stale.tsx\";\nimport { LinkedUsage, type LinkedUsageItem } from \"./build-diff-usage.tsx\";\nimport { DesignReferences, DesignStrip, type DesignItem } from \"./design-links.tsx\";\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\n/** Viewer props for the selected snapshot. */\nexport interface DiffViewerProps {\n  project: Project;\n  build: Build;\n  selected: Snapshot;\n  /** The selected story/mode's snapshots on every engine (browser tabs when more than one). */\n  siblings?: Snapshot[];\n  hasBaseline: Record<string, boolean>;\n  reference?: BaselineReference;\n  defaultComparison?: DefaultComparison | null;\n  /** Set when the baseline changed after this snapshot's diff was computed. */\n  drifted?: \"stale\" | \"removed\";\n  /** Linked packages the story uses (provenance badges + upstream deep links). */\n  usage?: LinkedUsageItem[];\n  /** Resolved design links of the story's component (open-in-Figma + stale/deleted notices). */\n  design?: DesignItem[];\n  publishedBaseDomain?: string;\n}\n\n/** Why a snapshot has no diff image, phrased for the empty pane. */\nfunction diffEmptyText(status: string): string {\n  return status === \"unchanged\" || status === \"approved\"\n    ? \"No diff — within threshold\"\n    : \"No diff yet\";\n}\n\n/** Browser tabs (one link per engine) when the story/mode was captured on several. */\nfunction BrowserTabs(props: {\n  project: Project;\n  build: Build;\n  selected: Snapshot;\n  siblings: Snapshot[];\n}): HtmlEscapedString | Promise<HtmlEscapedString> | null {\n  const { project, build, selected, siblings } = props;\n  if (siblings.length < 2) return null;\n  return (\n    <Segmented\n      label=\"Browser\"\n      data-browser-tabs\n      items={siblings.map((snap) => ({\n        label: `${snap.browser ?? \"chromium\"} · ${snap.status}`,\n        value: snap.id,\n        href: snapshotPageUrl(project, build, snap.id),\n        active: snap.id === selected.id,\n      }))}\n    />\n  );\n}\n\n/** Link to the story file's component page, anchored at the story. */\nfunction ViewComponentButton(props: {\n  project: Project;\n  selected: Snapshot;\n  base?: string;\n}): HtmlEscapedString | Promise<HtmlEscapedString> | null {\n  const { project, selected, base } = props;\n  if (!selected.storyImportPath) return null;\n  const urls = createUrlBuilder(\"/\", base);\n  return (\n    <Button\n      variant=\"ghost\"\n      size=\"sm\"\n      href={`${urls.component(project.slug, selected.storyImportPath)}#${selected.storyId}`}\n    >\n      View component\n    </Button>\n  );\n}\n\n/** Story heading plus the comparison stage for the selected snapshot. */\nexport function DiffViewer(props: DiffViewerProps): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const { project, build, selected, drifted, usage, design, publishedBaseDomain } = props;\n  const siblings = props.siblings ?? [selected];\n  const percent = diffPercent(selected);\n  return (\n    <VStack>\n      <div class={viewerHead}>\n        <h2 class={viewerTitle}>\n          {selected.storyTitle} / {selected.storyName}\n        </h2>\n        <p class={viewerMeta}>\n          <Badge tone={statusTone(selected.status)} icon>\n            {selected.status}\n          </Badge>\n          <span>\n            {snapshotVariant(selected)} · {selected.viewportWidth}×{selected.viewportHeight}\n          </span>\n          {selected.diffPixels === null || selected.diffPixels === undefined ? null : (\n            <span class=\"mono\">{selected.diffPixels} px</span>\n          )}\n          {percent ? <span class=\"mono\">{percent}</span> : null}\n          <ViewComponentButton project={project} selected={selected} base={publishedBaseDomain} />\n        </p>\n      </div>\n      {props.reference ? <BaselineReferenceNotice reference={props.reference} /> : null}\n      <BrowserTabs project={project} build={build} selected={selected} siblings={siblings} />\n      {drifted ? <StaleSnapshotNotice status={drifted} /> : null}\n      <EnvironmentChangeSnapshotNotice snapshot={selected} migrated={build.isDefault} />\n      <A11yViolationsNotice snapshot={a11yCarrierOf(selected, siblings)} />\n      {usage && usage.length > 0 ? (\n        <LinkedUsage usage={usage} publishedBaseDomain={publishedBaseDomain} />\n      ) : null}\n      {design && design.length > 0 ? <DesignStrip items={design} /> : null}\n      <PrimaryComparison {...props} />\n      <SecondaryComparison {...props} />\n      {design && design.length > 0 ? <DesignReferences items={design} /> : null}\n    </VStack>\n  );\n}\n\nfunction SecondaryComparison(\n  props: DiffViewerProps,\n): HtmlEscapedString | Promise<HtmlEscapedString> | null {\n  if (!props.defaultComparison) return null;\n  return (\n    <DefaultComparisonView\n      {...props}\n      snapshot={props.selected}\n      comparison={props.defaultComparison}\n    />\n  );\n}\n\nfunction baselineUrl(props: DiffViewerProps): string | null {\n  const { hasBaseline, selected, reference, project, build } = props;\n  return hasBaseline[selected.id] &&\n    reference?.kind !== \"none\" &&\n    !(reference?.kind === \"known\" && !reference.imageAvailable) &&\n    !(reference?.kind === \"unavailable\" && selected.baselineVersion !== null)\n    ? snapshotImageUrl(project, build, selected, \"baseline\")\n    : null;\n}\n\nfunction PrimaryComparison(props: DiffViewerProps): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const { project, build, selected, reference } = props;\n  const stage = (\n    <CompareStage\n      baselineSrc={baselineUrl(props)}\n      baselineEmpty={\n        reference?.kind === \"unavailable\" ||\n        (reference?.kind === \"known\" && !reference.imageAvailable)\n          ? \"The original baseline image is unavailable.\"\n          : undefined\n      }\n      currentSrc={snapshotImageUrl(project, build, selected, \"image\")}\n      diffSrc={selected.diffPath ? snapshotImageUrl(project, build, selected, \"diff\") : null}\n      subject={`${selected.storyTitle} / ${selected.storyName}`}\n      diffEmpty={diffEmptyText(selected.status)}\n      diffMeta={diffPercent(selected) ?? undefined}\n    />\n  );\n  return (\n    <ComparisonSources\n      baseline={stage}\n      sources={designSources(props.design ?? [])}\n      currentSrc={snapshotImageUrl(project, build, selected, \"image\")}\n      subject={`${selected.storyTitle} / ${selected.storyName}`}\n    />\n  );\n}\n"],"mappings":"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"}

package/dist/pages/build-diff.mjs

@@ -3,19 +3,26 @@ import "node:url";
 import.meta.url;
 import { EmptyState } from "../ui/feedback.mjs";
 import { DocumentLayout } from "../ui/document.mjs";
-import { StaleBaselineNotice } from "./build-diff-stale.mjs";
+import { InsightSlot } from "./build-diff-insight.mjs";
+import { groupOf, reviewProgress } from "./build-diff-model.mjs";
+import { DiffComments } from "./build-diff-comments.mjs";
 import { canvasColumn, workspace } from "../ui/styles/review-layout.mjs";
 import { DiffActionBar } from "./build-diff-actions.mjs";
-import { DiffComments } from "./build-diff-comments.mjs";
+import { ReviewNotices } from "./build-diff-environment.mjs";
 import { DiffHeader } from "./build-diff-header.mjs";
 import { DiffNav } from "./build-diff-nav.mjs";
 import { ShortcutsDialog } from "./build-diff-shortcuts.mjs";
 import { DiffViewer } from "./build-diff-viewer.mjs";
 import { Fragment, jsx, jsxs } from "hono/jsx/jsx-runtime";
-//#region src/pages/build-diff.tsx
+// src/pages/build-diff.tsx
+/** The snapshot the review page shows: the requested one, else the first needing review. */
+function selectedSnapshot(snapshots, selectedId) {
+	return snapshots.find((s) => s.id === selectedId) ?? snapshots.find((s) => s.status === "changed" || s.status === "new") ?? snapshots[0];
+}
 /** Snapshot nav plus the viewer/comments column for the selected snapshot. */
 function DiffReviewGrid(props) {
 	const { project, build, snapshots, comments, selected, canReview, hasBaseline, drifted } = props;
+	const { usage, design, publishedBaseDomain } = props;
 	return /* @__PURE__ */ jsxs("div", {
 		class: workspace,
 		children: [/* @__PURE__ */ jsx(DiffNav, {
@@ -30,13 +37,20 @@ function DiffReviewGrid(props) {
 					project,
 					build,
 					selected,
+					siblings: groupOf(snapshots, selected.id)?.members,
 					hasBaseline,
-					drifted: drifted[selected.id]
+					reference: props.reference,
+					defaultComparison: props.defaultComparison,
+					drifted: drifted[selected.id],
+					usage,
+					design,
+					publishedBaseDomain
 				}),
-				/* @__PURE__ */ jsx(DiffComments, {
+				project.reviewEnabled === false ? null : /* @__PURE__ */ jsx(DiffComments, {
 					project,
 					build,
 					selectedId: selected.id,
+					selectedStoryId: selected.storyId,
 					comments,
 					canReview
 				}),
@@ -46,7 +60,7 @@ function DiffReviewGrid(props) {
 					snapshots,
 					selected,
 					canReview,
-					drifted: drifted[selected.id] !== void 0
+					drifted
 				})
 			] }) : /* @__PURE__ */ jsx(EmptyState, { description: "Select a snapshot to review." })
 		})]
@@ -66,9 +80,9 @@ function reviewNav(project, build) {
 }
 /** Three-up diff review page: baseline, current, and diff with keyboard review. */
 function renderBuildDiffPage(data) {
-	const { project, build, snapshots, comments, selectedId, canReview, hasBaseline, drifted } = data;
-	const selected = snapshots.find((s) => s.id === selectedId) ?? snapshots.find((s) => s.status === "changed" || s.status === "new") ?? snapshots[0];
-	const pending = snapshots.filter((s) => s.status === "new" || s.status === "changed");
+	const { project, build, snapshots, selectedId, canReview, drifted } = data;
+	const selected = selectedSnapshot(snapshots, selectedId);
+	const pendingGroups = reviewProgress(snapshots).pending;
 	return /* @__PURE__ */ jsxs(DocumentLayout, {
 		title: `Review · ${build.gitBranch}`,
 		nav: reviewNav(project, build),
@@ -78,33 +92,34 @@ function renderBuildDiffPage(data) {
 				project,
 				build,
 				snapshots,
-				pendingCount: pending.length,
+				pendingCount: pendingGroups,
 				canReview
 			}),
-			Object.keys(drifted).length > 0 ? /* @__PURE__ */ jsx(StaleBaselineNotice, {
+			/* @__PURE__ */ jsx(ReviewNotices, {
 				project,
 				build,
-				staleCount: Object.keys(drifted).length,
+				snapshots,
+				drifted,
 				canReview
-			}) : null,
+			}),
+			/* @__PURE__ */ jsx(InsightSlot, {
+				project,
+				build,
+				data: data.insight
+			}),
 			snapshots.length === 0 ? /* @__PURE__ */ jsx(EmptyState, {
 				title: "No snapshots",
 				description: "This build has no snapshots yet. Capture may still be running."
 			}) : /* @__PURE__ */ jsx(DiffReviewGrid, {
-				project,
-				build,
-				snapshots,
-				comments,
+				...data,
 				selected,
-				canReview,
-				hasBaseline,
-				drifted
+				usage: data.usage ?? [],
+				design: data.design ?? []
 			}),
 			/* @__PURE__ */ jsx(ShortcutsDialog, {})
 		]
 	});
 }
-//#endregion
-export { renderBuildDiffPage };
+export { renderBuildDiffPage, selectedSnapshot };
 
 //# sourceMappingURL=build-diff.mjs.map

package/dist/pages/build-diff.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"build-diff.mjs","names":[],"sources":["../../src/pages/build-diff.tsx"],"sourcesContent":["import type { Build } from \"@storyshelf/core/schema\";\nimport type { Comment } from \"@storyshelf/core/schema\";\nimport type { Project } from \"@storyshelf/core/schema\";\nimport type { Snapshot } from \"@storyshelf/core/schema\";\nimport type { HtmlEscapedString } from \"hono/utils/html\";\nimport { EmptyState } from \"../ui/components.tsx\";\nimport { DocumentLayout, type NavConfig, type RenderedContent } from \"../ui/document.tsx\";\nimport { canvasColumn, workspace } from \"../ui/styles/review-layout.ts\";\nimport { DiffActionBar } from \"./build-diff-actions.tsx\";\nimport { DiffComments } from \"./build-diff-comments.tsx\";\nimport { DiffHeader } from \"./build-diff-header.tsx\";\nimport { DiffNav } from \"./build-diff-nav.tsx\";\nimport { ShortcutsDialog } from \"./build-diff-shortcuts.tsx\";\nimport { StaleBaselineNotice } from \"./build-diff-stale.tsx\";\nimport { DiffViewer } from \"./build-diff-viewer.tsx\";\n\n/** Data required to render the three-up build diff review page. */\nexport interface BuildDiffData {\n  project: Project;\n  build: Build;\n  snapshots: Snapshot[];\n  comments: Comment[];\n  selectedId?: string;\n  canReview: boolean;\n  hasBaseline: Record<string, boolean>;\n  /** Open snapshots whose baseline changed after their diff was computed. */\n  drifted: Record<string, \"stale\" | \"removed\">;\n}\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\ninterface DiffReviewGridProps {\n  project: Project;\n  build: Build;\n  snapshots: Snapshot[];\n  comments: Comment[];\n  selected?: Snapshot;\n  canReview: boolean;\n  hasBaseline: Record<string, boolean>;\n  drifted: Record<string, \"stale\" | \"removed\">;\n}\n\n/** Snapshot nav plus the viewer/comments column for the selected snapshot. */\nfunction DiffReviewGrid(\n  props: DiffReviewGridProps,\n): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const { project, build, snapshots, comments, selected, canReview, hasBaseline, drifted } = props;\n  return (\n    <div class={workspace}>\n      <DiffNav project={project} build={build} snapshots={snapshots} selectedId={selected?.id} />\n      <div class={canvasColumn}>\n        {selected ? (\n          <>\n            <DiffViewer\n              project={project}\n              build={build}\n              selected={selected}\n              hasBaseline={hasBaseline}\n              drifted={drifted[selected.id]}\n            />\n            <DiffComments\n              project={project}\n              build={build}\n              selectedId={selected.id}\n              comments={comments}\n              canReview={canReview}\n            />\n            <DiffActionBar\n              project={project}\n              build={build}\n              snapshots={snapshots}\n              selected={selected}\n              canReview={canReview}\n              drifted={drifted[selected.id] !== undefined}\n            />\n          </>\n        ) : (\n          <EmptyState description=\"Select a snapshot to review.\" />\n        )}\n      </div>\n    </div>\n  );\n}\n\n/** Sidebar/breadcrumb context for the review page: Builds / <build> / Review. */\nfunction reviewNav(project: Project, build: Build): NavConfig {\n  return {\n    active: \"builds\",\n    projectSlug: project.slug,\n    projectName: project.name,\n    trail: [\n      {\n        label: `${build.gitBranch} · ${build.gitSha.slice(0, 7)}`,\n        href: `/projects/${project.slug}/builds/${build.id}`,\n      },\n      { label: \"Review\" },\n    ],\n  };\n}\n\n/** Three-up diff review page: baseline, current, and diff with keyboard review. */\nexport function renderBuildDiffPage(data: BuildDiffData): RenderedContent {\n  const { project, build, snapshots, comments, selectedId, canReview, hasBaseline, drifted } = data;\n  const selected =\n    snapshots.find((s) => s.id === selectedId) ??\n    snapshots.find((s) => s.status === \"changed\" || s.status === \"new\") ??\n    snapshots[0];\n  const pending = snapshots.filter((s) => s.status === \"new\" || s.status === \"changed\");\n\n  return (\n    <DocumentLayout\n      title={`Review · ${build.gitBranch}`}\n      nav={reviewNav(project, build)}\n      layout=\"wide\"\n    >\n      <DiffHeader\n        project={project}\n        build={build}\n        snapshots={snapshots}\n        pendingCount={pending.length}\n        canReview={canReview}\n      />\n\n      {Object.keys(drifted).length > 0 ? (\n        <StaleBaselineNotice\n          project={project}\n          build={build}\n          staleCount={Object.keys(drifted).length}\n          canReview={canReview}\n        />\n      ) : null}\n\n      {snapshots.length === 0 ? (\n        <EmptyState\n          title=\"No snapshots\"\n          description=\"This build has no snapshots yet. Capture may still be running.\"\n        />\n      ) : (\n        <DiffReviewGrid\n          project={project}\n          build={build}\n          snapshots={snapshots}\n          comments={comments}\n          selected={selected}\n          canReview={canReview}\n          hasBaseline={hasBaseline}\n          drifted={drifted}\n        />\n      )}\n      <ShortcutsDialog />\n    </DocumentLayout>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;AA2CA,SAAS,eACP,OACgD;CAChD,MAAM,EAAE,SAAS,OAAO,WAAW,UAAU,UAAU,WAAW,aAAa,YAAY;CAC3F,OACE,qBAAC,OAAD;EAAK,OAAO;EAAZ,UAAA,CACE,oBAAC,SAAD;GAAkB;GAAgB;GAAkB;GAAW,YAAY,UAAU;EAAK,CAAA,GAC1F,oBAAC,OAAD;GAAK,OAAO;GACT,UAAA,WACC,qBAAA,UAAA,EAAA,UAAA;IACE,oBAAC,YAAD;KACW;KACF;KACG;KACG;KACb,SAAS,QAAQ,SAAS;IAC3B,CAAA;IACD,oBAAC,cAAD;KACW;KACF;KACP,YAAY,SAAS;KACX;KACC;IACZ,CAAA;IACD,oBAAC,eAAD;KACW;KACF;KACI;KACD;KACC;KACX,SAAS,QAAQ,SAAS,QAAQ,KAAA;IACnC,CAAA;GACD,EAAA,CAAA,IAEF,oBAAC,YAAD,EAAY,aAAY,+BAAgC,CAAA;EAEvD,CAAA,CACF;;AAET;;AAGA,SAAS,UAAU,SAAkB,OAAyB;CAC5D,OAAO;EACL,QAAQ;EACR,aAAa,QAAQ;EACrB,aAAa,QAAQ;EACrB,OAAO,CACL;GACE,OAAO,GAAG,MAAM,UAAU,KAAK,MAAM,OAAO,MAAM,GAAG,CAAC;GACtD,MAAM,aAAa,QAAQ,KAAK,UAAU,MAAM;EAClD,GACA,EAAE,OAAO,SAAS,CACpB;CACF;AACF;;AAGA,SAAgB,oBAAoB,MAAsC;CACxE,MAAM,EAAE,SAAS,OAAO,WAAW,UAAU,YAAY,WAAW,aAAa,YAAY;CAC7F,MAAM,WACJ,UAAU,MAAM,MAAM,EAAE,OAAO,UAAU,KACzC,UAAU,MAAM,MAAM,EAAE,WAAW,aAAa,EAAE,WAAW,KAAK,KAClE,UAAU;CACZ,MAAM,UAAU,UAAU,QAAQ,MAAM,EAAE,WAAW,SAAS,EAAE,WAAW,SAAS;CAEpF,OACE,qBAAC,gBAAD;EACE,OAAO,YAAY,MAAM;EACzB,KAAK,UAAU,SAAS,KAAK;EAC7B,QAAO;EAHT,UAAA;GAKE,oBAAC,YAAD;IACW;IACF;IACI;IACX,cAAc,QAAQ;IACX;GACZ,CAAA;GAEA,OAAO,KAAK,OAAO,CAAC,CAAC,SAAS,IAC7B,oBAAC,qBAAD;IACW;IACF;IACP,YAAY,OAAO,KAAK,OAAO,CAAC,CAAC;IACtB;GACZ,CAAA,IACC;GAEH,UAAU,WAAW,IACpB,oBAAC,YAAD;IACE,OAAM;IACN,aAAY;GACb,CAAA,IAED,oBAAC,gBAAD;IACW;IACF;IACI;IACD;IACA;IACC;IACE;IACJ;GACV,CAAA;GAEH,oBAAC,iBAAD,CAAkB,CAAA;EACJ;;AAEpB"}
+{"version":3,"file":"build-diff.mjs","names":[],"sources":["../../src/pages/build-diff.tsx"],"sourcesContent":["import type { Build } from \"@storyshelf/core/schema\";\nimport type { Comment } from \"@storyshelf/core/schema\";\nimport type { Project } from \"@storyshelf/core/schema\";\nimport type { Snapshot } from \"@storyshelf/core/schema\";\nimport type { HtmlEscapedString } from \"hono/utils/html\";\nimport type { InsightPanelData } from \"../insights/panel.ts\";\nimport type { BaselineReference, DefaultComparison } from \"../routers/baseline-reference.ts\";\nimport { EmptyState } from \"../ui/components.tsx\";\nimport { DocumentLayout, type NavConfig, type RenderedContent } from \"../ui/document.tsx\";\nimport { canvasColumn, workspace } from \"../ui/styles/review-layout.ts\";\nimport { DiffActionBar } from \"./build-diff-actions.tsx\";\nimport { DiffComments } from \"./build-diff-comments.tsx\";\nimport { ReviewNotices } from \"./build-diff-environment.tsx\";\nimport { DiffHeader } from \"./build-diff-header.tsx\";\nimport { InsightSlot } from \"./build-diff-insight.tsx\";\nimport { groupOf, reviewProgress } from \"./build-diff-model.ts\";\nimport { DiffNav } from \"./build-diff-nav.tsx\";\nimport { ShortcutsDialog } from \"./build-diff-shortcuts.tsx\";\nimport type { LinkedUsageItem } from \"./build-diff-usage.tsx\";\nimport { DiffViewer } from \"./build-diff-viewer.tsx\";\nimport type { DesignItem } from \"./design-links.tsx\";\n\n/** Data required to render the three-up build diff review page. */\nexport interface BuildDiffData {\n  project: Project;\n  build: Build;\n  snapshots: Snapshot[];\n  comments: Comment[];\n  selectedId?: string;\n  canReview: boolean;\n  hasBaseline: Record<string, boolean>;\n  reference?: BaselineReference;\n  defaultComparison?: DefaultComparison | null;\n  /** Open snapshots whose baseline changed after their diff was computed. */\n  drifted: Record<string, \"stale\" | \"removed\">;\n  /** AI triage panel data; omitted/null hides the panel. */\n  insight?: InsightPanelData | null;\n  /** Linked packages the selected snapshot's story uses; omitted/empty hides the badges. */\n  usage?: LinkedUsageItem[];\n  /** Design links the selected snapshot's component resolves to; omitted/empty hides the strip. */\n  design?: DesignItem[];\n  /** Base domain for published Storybook deep links. */\n  publishedBaseDomain?: string;\n}\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\ninterface DiffReviewGridProps {\n  project: Project;\n  build: Build;\n  snapshots: Snapshot[];\n  comments: Comment[];\n  selected?: Snapshot;\n  canReview: boolean;\n  hasBaseline: Record<string, boolean>;\n  reference?: BaselineReference;\n  defaultComparison?: DefaultComparison | null;\n  drifted: Record<string, \"stale\" | \"removed\">;\n  usage: LinkedUsageItem[];\n  design: DesignItem[];\n  publishedBaseDomain?: string;\n}\n\n/** The snapshot the review page shows: the requested one, else the first needing review. */\nexport function selectedSnapshot(snapshots: Snapshot[], selectedId?: string): Snapshot | undefined {\n  return (\n    snapshots.find((s) => s.id === selectedId) ??\n    snapshots.find((s) => s.status === \"changed\" || s.status === \"new\") ??\n    snapshots[0]\n  );\n}\n\n/** Snapshot nav plus the viewer/comments column for the selected snapshot. */\nfunction DiffReviewGrid(\n  props: DiffReviewGridProps,\n): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const { project, build, snapshots, comments, selected, canReview, hasBaseline, drifted } = props;\n  const { usage, design, publishedBaseDomain } = props;\n  return (\n    <div class={workspace}>\n      <DiffNav project={project} build={build} snapshots={snapshots} selectedId={selected?.id} />\n      <div class={canvasColumn}>\n        {selected ? (\n          <>\n            <DiffViewer\n              project={project}\n              build={build}\n              selected={selected}\n              siblings={groupOf(snapshots, selected.id)?.members}\n              hasBaseline={hasBaseline}\n              reference={props.reference}\n              defaultComparison={props.defaultComparison}\n              drifted={drifted[selected.id]}\n              usage={usage}\n              design={design}\n              publishedBaseDomain={publishedBaseDomain}\n            />\n            {project.reviewEnabled === false ? null : (\n              <DiffComments\n                project={project}\n                build={build}\n                selectedId={selected.id}\n                selectedStoryId={selected.storyId}\n                comments={comments}\n                canReview={canReview}\n              />\n            )}\n            <DiffActionBar\n              project={project}\n              build={build}\n              snapshots={snapshots}\n              selected={selected}\n              canReview={canReview}\n              drifted={drifted}\n            />\n          </>\n        ) : (\n          <EmptyState description=\"Select a snapshot to review.\" />\n        )}\n      </div>\n    </div>\n  );\n}\n\n/** Sidebar/breadcrumb context for the review page: Builds / <build> / Review. */\nfunction reviewNav(project: Project, build: Build): NavConfig {\n  return {\n    active: \"builds\",\n    projectSlug: project.slug,\n    projectName: project.name,\n    trail: [\n      {\n        label: `${build.gitBranch} · ${build.gitSha.slice(0, 7)}`,\n        href: `/projects/${project.slug}/builds/${build.id}`,\n      },\n      { label: \"Review\" },\n    ],\n  };\n}\n\n/** Three-up diff review page: baseline, current, and diff with keyboard review. */\nexport function renderBuildDiffPage(data: BuildDiffData): RenderedContent {\n  const { project, build, snapshots, selectedId, canReview, drifted } = data;\n  const selected = selectedSnapshot(snapshots, selectedId);\n  const pendingGroups = reviewProgress(snapshots).pending;\n  return (\n    <DocumentLayout\n      title={`Review · ${build.gitBranch}`}\n      nav={reviewNav(project, build)}\n      layout=\"wide\"\n    >\n      <DiffHeader\n        project={project}\n        build={build}\n        snapshots={snapshots}\n        pendingCount={pendingGroups}\n        canReview={canReview}\n      />\n      <ReviewNotices\n        project={project}\n        build={build}\n        snapshots={snapshots}\n        drifted={drifted}\n        canReview={canReview}\n      />\n      <InsightSlot project={project} build={build} data={data.insight} />\n      {snapshots.length === 0 ? (\n        <EmptyState\n          title=\"No snapshots\"\n          description=\"This build has no snapshots yet. Capture may still be running.\"\n        />\n      ) : (\n        <DiffReviewGrid\n          {...data}\n          selected={selected}\n          usage={data.usage ?? []}\n          design={data.design ?? []}\n        />\n      )}\n      <ShortcutsDialog />\n    </DocumentLayout>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAgEA,SAAgB,iBAAiB,WAAuB,YAA2C;CACjG,OACE,UAAU,MAAM,MAAM,EAAE,OAAO,UAAU,KACzC,UAAU,MAAM,MAAM,EAAE,WAAW,aAAa,EAAE,WAAW,KAAK,KAClE,UAAU;AAEd;;AAGA,SAAS,eACP,OACgD;CAChD,MAAM,EAAE,SAAS,OAAO,WAAW,UAAU,UAAU,WAAW,aAAa,YAAY;CAC3F,MAAM,EAAE,OAAO,QAAQ,wBAAwB;CAC/C,OACE,qBAAC,OAAD;EAAK,OAAO;EAAZ,UAAA,CACE,oBAAC,SAAD;GAAkB;GAAgB;GAAkB;GAAW,YAAY,UAAU;EAAK,CAAA,GAC1F,oBAAC,OAAD;GAAK,OAAO;GACT,UAAA,WACC,qBAAA,UAAA,EAAA,UAAA;IACE,oBAAC,YAAD;KACW;KACF;KACG;KACV,UAAU,QAAQ,WAAW,SAAS,EAAE,CAAC,EAAE;KAC9B;KACb,WAAW,MAAM;KACjB,mBAAmB,MAAM;KACzB,SAAS,QAAQ,SAAS;KACnB;KACC;KACa;IACtB,CAAA;IACA,QAAQ,kBAAkB,QAAQ,OACjC,oBAAC,cAAD;KACW;KACF;KACP,YAAY,SAAS;KACrB,iBAAiB,SAAS;KAChB;KACC;IACZ,CAAA;IAEH,oBAAC,eAAD;KACW;KACF;KACI;KACD;KACC;KACF;IACV,CAAA;GACD,EAAA,CAAA,IAEF,oBAAC,YAAD,EAAY,aAAY,+BAAgC,CAAA;EAEvD,CAAA,CACF;;AAET;;AAGA,SAAS,UAAU,SAAkB,OAAyB;CAC5D,OAAO;EACL,QAAQ;EACR,aAAa,QAAQ;EACrB,aAAa,QAAQ;EACrB,OAAO,CACL;GACE,OAAO,GAAG,MAAM,UAAU,KAAK,MAAM,OAAO,MAAM,GAAG,CAAC;GACtD,MAAM,aAAa,QAAQ,KAAK,UAAU,MAAM;EAClD,GACA,EAAE,OAAO,SAAS,CACpB;CACF;AACF;;AAGA,SAAgB,oBAAoB,MAAsC;CACxE,MAAM,EAAE,SAAS,OAAO,WAAW,YAAY,WAAW,YAAY;CACtE,MAAM,WAAW,iBAAiB,WAAW,UAAU;CACvD,MAAM,gBAAgB,eAAe,SAAS,CAAC,CAAC;CAChD,OACE,qBAAC,gBAAD;EACE,OAAO,YAAY,MAAM;EACzB,KAAK,UAAU,SAAS,KAAK;EAC7B,QAAO;EAHT,UAAA;GAKE,oBAAC,YAAD;IACW;IACF;IACI;IACX,cAAc;IACH;GACZ,CAAA;GACD,oBAAC,eAAD;IACW;IACF;IACI;IACF;IACE;GACZ,CAAA;GACD,oBAAC,aAAD;IAAsB;IAAgB;IAAO,MAAM,KAAK;GAAU,CAAA;GACjE,UAAU,WAAW,IACpB,oBAAC,YAAD;IACE,OAAM;IACN,aAAY;GACb,CAAA,IAED,oBAAC,gBAAD;IACE,GAAI;IACM;IACV,OAAO,KAAK,SAAS,CAAC;IACtB,QAAQ,KAAK,UAAU,CAAC;GACzB,CAAA;GAEH,oBAAC,iBAAD,CAAkB,CAAA;EACJ;;AAEpB"}