@storyshelf/app 0.7.0 → 0.8.0

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

@@ -7,7 +7,7 @@ import { Card, SectionTitle } from "../ui/layout.mjs";
 import { HStack, VStack } from "../ui/stacks.mjs";
 import { csrfField } from "../ui/csrf-field.mjs";
 import { Fragment, jsx, jsxs } from "hono/jsx/jsx-runtime";
-//#region src/pages/build-diff-insight.tsx
+// src/pages/build-diff-insight.tsx
 function itemsOf(output) {
 	const items = output?.items;
 	return Array.isArray(items) ? items : [];
@@ -107,7 +107,6 @@ function InsightSlot(props) {
 		data: props.data
 	}) : null;
 }
-//#endregion
 export { InsightPanel, InsightSlot };
 
 //# sourceMappingURL=build-diff-insight.mjs.map

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

@@ -1,7 +1,7 @@
 import "node:path";
 import "node:url";
 import.meta.url;
-//#region src/pages/build-diff-model.ts
+// src/pages/build-diff-model.ts
 const OPEN = /* @__PURE__ */ new Set(["new", "changed"]);
 const DECIDED = /* @__PURE__ */ new Set(["approved", "rejected"]);
 const browserOf = (snap) => snap.browser ?? "chromium";
@@ -87,7 +87,24 @@ function snapshotVariant(snap) {
 	const browser = snap.browser ?? "chromium";
 	return browser === "chromium" ? snap.viewportName : `${snap.viewportName} · ${browser}`;
 }
-//#endregion
-export { diffPercent, groupOf, groupSnapshots, isOpenGroup, neighbours, reviewProgress, snapshotImageUrl, snapshotPageUrl, snapshotVariant };
+/**
+* The design links of a component that have a cached render, as comparison sources.
+* A link without a render is not offered (the design strip still lists it).
+*/
+function designSources(items) {
+	const rendered = items.flatMap((item) => item.renderUrl === null ? [] : [{
+		item,
+		src: item.renderUrl
+	}]);
+	const several = rendered.length > 1;
+	return rendered.map(({ item, src }, index) => ({
+		value: several ? `design-${index + 1}` : "design",
+		label: several ? `${item.providerName} ${index + 1}` : "Design",
+		src,
+		name: item.name,
+		providerName: item.providerName
+	}));
+}
+export { designSources, diffPercent, groupOf, groupSnapshots, isOpenGroup, neighbours, reviewProgress, snapshotImageUrl, snapshotPageUrl, snapshotVariant };
 
 //# sourceMappingURL=build-diff-model.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"build-diff-model.mjs","names":[],"sources":["../../src/pages/build-diff-model.ts"],"sourcesContent":["import type { Build, Project, Snapshot } from \"@storyshelf/core/schema\";\n\n/** How far a build's review has progressed, counted per story/mode (not per browser). */\nexport interface ReviewProgress {\n  /** Groups a human has to decide on (any open or decided member). */\n  reviewable: number;\n  /** Reviewable groups with no open member left. */\n  done: number;\n  /** Groups still waiting for a decision. */\n  pending: number;\n}\n\nconst OPEN = new Set([\"new\", \"changed\"]);\nconst DECIDED = new Set([\"approved\", \"rejected\"]);\n\n/**\n * One story in one mode, with its snapshot on every engine. Approval is shared:\n * a single decision covers all members.\n */\nexport interface SnapshotGroup {\n  /** Stable identity (story + mode). */\n  key: string;\n  storyId: string;\n  /** The mode key (`viewportName`). */\n  modeKey: string;\n  /** Member snapshots, chromium first, then by engine name. */\n  members: Snapshot[];\n  /** The primary engine's snapshot (chromium when present). */\n  primary: Snapshot;\n  /** Snapshot the filmstrip links to: first open member, else the first member. */\n  representative: Snapshot;\n}\n\nconst browserOf = (snap: Pick<Snapshot, \"browser\">): string => snap.browser ?? \"chromium\";\n\nfunction memberOrder(a: Snapshot, b: Snapshot): number {\n  const left = browserOf(a);\n  const right = browserOf(b);\n  if (left === right) return 0;\n  if (left === \"chromium\") return -1;\n  if (right === \"chromium\") return 1;\n  return left < right ? -1 : 1;\n}\n\n/** Group snapshots by story and mode, keeping first-appearance order. */\nexport function groupSnapshots(snapshots: Snapshot[]): SnapshotGroup[] {\n  const groups = new Map<string, Snapshot[]>();\n  for (const snap of snapshots) {\n    const key = `${snap.storyId}\\u0000${snap.viewportName}`;\n    groups.set(key, [...(groups.get(key) ?? []), snap]);\n  }\n  return [...groups.entries()].flatMap(([key, list]): SnapshotGroup[] => {\n    const members = list.toSorted(memberOrder);\n    const [primary] = members;\n    if (!primary) return [];\n    return [\n      {\n        key,\n        storyId: primary.storyId,\n        modeKey: primary.viewportName,\n        members,\n        primary,\n        representative: members.find((snap) => OPEN.has(snap.status)) ?? primary,\n      },\n    ];\n  });\n}\n\n/** Whether a group still has a snapshot waiting for a decision. */\nexport function isOpenGroup(group: SnapshotGroup): boolean {\n  return group.members.some((snap) => OPEN.has(snap.status));\n}\n\n/** Count review progress per group; groups of unchanged snapshots need no decision. */\nexport function reviewProgress(snapshots: Snapshot[]): ReviewProgress {\n  const groups = groupSnapshots(snapshots);\n  const pending = groups.filter((group) => isOpenGroup(group)).length;\n  const done = groups.filter(\n    (group) => !isOpenGroup(group) && group.members.some((snap) => DECIDED.has(snap.status)),\n  ).length;\n  return { reviewable: pending + done, done, pending };\n}\n\n/** Position of the selected group plus its neighbours in list order. */\nexport interface Neighbours {\n  /** 1-based group position, or 0 when nothing is selected. */\n  position: number;\n  /** Number of groups. */\n  total: number;\n  prev: Snapshot | null;\n  next: Snapshot | null;\n}\n\n/** Previous/next group (as its representative snapshot) around the selected snapshot. */\nexport function neighbours(snapshots: Snapshot[], selectedId?: string): Neighbours {\n  const groups = groupSnapshots(snapshots);\n  const index = groups.findIndex((group) => group.members.some((snap) => snap.id === selectedId));\n  if (index === -1) {\n    return { position: 0, total: groups.length, prev: null, next: null };\n  }\n  return {\n    position: index + 1,\n    total: groups.length,\n    prev: groups[index - 1]?.representative ?? null,\n    next: groups[index + 1]?.representative ?? null,\n  };\n}\n\n/** The group a snapshot belongs to. */\nexport function groupOf(snapshots: Snapshot[], snapshotId: string): SnapshotGroup | undefined {\n  return groupSnapshots(snapshots).find((group) =>\n    group.members.some((snap) => snap.id === snapshotId),\n  );\n}\n\n/** Diff size as a percentage string (\"3.1%\"), or null when not computed. */\nexport function diffPercent(snapshot: Pick<Snapshot, \"diffRatio\">): string | null {\n  return snapshot.diffRatio === null || snapshot.diffRatio === undefined\n    ? null\n    : `${(snapshot.diffRatio * 100).toFixed(1)}%`;\n}\n\n/** Review-page URL for one snapshot. */\nexport function snapshotPageUrl(project: Project, build: Build, snapshotId: string): string {\n  return `/projects/${project.slug}/builds/${build.id}/diff?snapshot=${snapshotId}`;\n}\n\n/** API URL of a snapshot image (`image`), its diff overlay, or its baseline. */\nexport function snapshotImageUrl(\n  project: Project,\n  build: Build,\n  snapshot: Snapshot,\n  kind: \"image\" | \"diff\" | \"baseline\",\n): string {\n  return `/api/v1/projects/${project.slug}/builds/${build.id}/snapshots/${snapshot.id}/${kind}`;\n}\n\n/** Mode and engine of a snapshot for labels: `dark`, `dark · firefox` (chromium is implicit). */\nexport function snapshotVariant(snap: Pick<Snapshot, \"viewportName\" | \"browser\">): string {\n  const browser = snap.browser ?? \"chromium\";\n  return browser === \"chromium\" ? snap.viewportName : `${snap.viewportName} · ${browser}`;\n}\n"],"mappings":"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"}
+{"version":3,"file":"build-diff-model.mjs","names":[],"sources":["../../src/pages/build-diff-model.ts"],"sourcesContent":["import type { Build, Project, Snapshot } from \"@storyshelf/core/schema\";\nimport type { DesignItem } from \"./design-links.tsx\";\n\n/** How far a build's review has progressed, counted per story/mode (not per browser). */\nexport interface ReviewProgress {\n  /** Groups a human has to decide on (any open or decided member). */\n  reviewable: number;\n  /** Reviewable groups with no open member left. */\n  done: number;\n  /** Groups still waiting for a decision. */\n  pending: number;\n}\n\nconst OPEN = new Set([\"new\", \"changed\"]);\nconst DECIDED = new Set([\"approved\", \"rejected\"]);\n\n/**\n * One story in one mode, with its snapshot on every engine. Approval is shared:\n * a single decision covers all members.\n */\nexport interface SnapshotGroup {\n  /** Stable identity (story + mode). */\n  key: string;\n  storyId: string;\n  /** The mode key (`viewportName`). */\n  modeKey: string;\n  /** Member snapshots, chromium first, then by engine name. */\n  members: Snapshot[];\n  /** The primary engine's snapshot (chromium when present). */\n  primary: Snapshot;\n  /** Snapshot the filmstrip links to: first open member, else the first member. */\n  representative: Snapshot;\n}\n\nconst browserOf = (snap: Pick<Snapshot, \"browser\">): string => snap.browser ?? \"chromium\";\n\nfunction memberOrder(a: Snapshot, b: Snapshot): number {\n  const left = browserOf(a);\n  const right = browserOf(b);\n  if (left === right) return 0;\n  if (left === \"chromium\") return -1;\n  if (right === \"chromium\") return 1;\n  return left < right ? -1 : 1;\n}\n\n/** Group snapshots by story and mode, keeping first-appearance order. */\nexport function groupSnapshots(snapshots: Snapshot[]): SnapshotGroup[] {\n  const groups = new Map<string, Snapshot[]>();\n  for (const snap of snapshots) {\n    const key = `${snap.storyId}\\u0000${snap.viewportName}`;\n    groups.set(key, [...(groups.get(key) ?? []), snap]);\n  }\n  return [...groups.entries()].flatMap(([key, list]): SnapshotGroup[] => {\n    const members = list.toSorted(memberOrder);\n    const [primary] = members;\n    if (!primary) return [];\n    return [\n      {\n        key,\n        storyId: primary.storyId,\n        modeKey: primary.viewportName,\n        members,\n        primary,\n        representative: members.find((snap) => OPEN.has(snap.status)) ?? primary,\n      },\n    ];\n  });\n}\n\n/** Whether a group still has a snapshot waiting for a decision. */\nexport function isOpenGroup(group: SnapshotGroup): boolean {\n  return group.members.some((snap) => OPEN.has(snap.status));\n}\n\n/** Count review progress per group; groups of unchanged snapshots need no decision. */\nexport function reviewProgress(snapshots: Snapshot[]): ReviewProgress {\n  const groups = groupSnapshots(snapshots);\n  const pending = groups.filter((group) => isOpenGroup(group)).length;\n  const done = groups.filter(\n    (group) => !isOpenGroup(group) && group.members.some((snap) => DECIDED.has(snap.status)),\n  ).length;\n  return { reviewable: pending + done, done, pending };\n}\n\n/** Position of the selected group plus its neighbours in list order. */\nexport interface Neighbours {\n  /** 1-based group position, or 0 when nothing is selected. */\n  position: number;\n  /** Number of groups. */\n  total: number;\n  prev: Snapshot | null;\n  next: Snapshot | null;\n}\n\n/** Previous/next group (as its representative snapshot) around the selected snapshot. */\nexport function neighbours(snapshots: Snapshot[], selectedId?: string): Neighbours {\n  const groups = groupSnapshots(snapshots);\n  const index = groups.findIndex((group) => group.members.some((snap) => snap.id === selectedId));\n  if (index === -1) {\n    return { position: 0, total: groups.length, prev: null, next: null };\n  }\n  return {\n    position: index + 1,\n    total: groups.length,\n    prev: groups[index - 1]?.representative ?? null,\n    next: groups[index + 1]?.representative ?? null,\n  };\n}\n\n/** The group a snapshot belongs to. */\nexport function groupOf(snapshots: Snapshot[], snapshotId: string): SnapshotGroup | undefined {\n  return groupSnapshots(snapshots).find((group) =>\n    group.members.some((snap) => snap.id === snapshotId),\n  );\n}\n\n/** Diff size as a percentage string (\"3.1%\"), or null when not computed. */\nexport function diffPercent(snapshot: Pick<Snapshot, \"diffRatio\">): string | null {\n  return snapshot.diffRatio === null || snapshot.diffRatio === undefined\n    ? null\n    : `${(snapshot.diffRatio * 100).toFixed(1)}%`;\n}\n\n/** Review-page URL for one snapshot. */\nexport function snapshotPageUrl(project: Project, build: Build, snapshotId: string): string {\n  return `/projects/${project.slug}/builds/${build.id}/diff?snapshot=${snapshotId}`;\n}\n\n/** API URL of a snapshot image (`image`), its diff overlay, or its baseline. */\nexport function snapshotImageUrl(\n  project: Project,\n  build: Build,\n  snapshot: Snapshot,\n  kind: \"image\" | \"diff\" | \"baseline\",\n): string {\n  return `/api/v1/projects/${project.slug}/builds/${build.id}/snapshots/${snapshot.id}/${kind}`;\n}\n\n/** Mode and engine of a snapshot for labels: `dark`, `dark · firefox` (chromium is implicit). */\nexport function snapshotVariant(snap: Pick<Snapshot, \"viewportName\" | \"browser\">): string {\n  const browser = snap.browser ?? \"chromium\";\n  return browser === \"chromium\" ? snap.viewportName : `${snap.viewportName} · ${browser}`;\n}\n\n/** A cached design render the review stage can compare the screenshot with. */\nexport interface DesignSource {\n  /** Stage key: `design` for a lone render, `design-<n>` when the component links several. */\n  value: string;\n  /** Source switch label. */\n  label: string;\n  /** API URL of the cached render. */\n  src: string;\n  name: string | null;\n  providerName: string;\n}\n\n/**\n * The design links of a component that have a cached render, as comparison sources.\n * A link without a render is not offered (the design strip still lists it).\n */\nexport function designSources(items: readonly DesignItem[]): DesignSource[] {\n  const rendered = items.flatMap((item) =>\n    item.renderUrl === null ? [] : [{ item, src: item.renderUrl }],\n  );\n  const several = rendered.length > 1;\n  return rendered.map(({ item, src }, index) => ({\n    value: several ? `design-${index + 1}` : \"design\",\n    label: several ? `${item.providerName} ${index + 1}` : \"Design\",\n    src,\n    name: item.name,\n    providerName: item.providerName,\n  }));\n}\n"],"mappings":"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"}

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

@@ -9,7 +9,7 @@ import { a11yCarrierOf, a11yFindingsOf } from "./a11y-violations.mjs";
 import { diffPercent, groupSnapshots, isOpenGroup, reviewProgress, snapshotImageUrl, snapshotPageUrl } from "./build-diff-model.mjs";
 import { filmBody, filmItem, filmItemActive, filmStatus, filmSub, filmTitle, filmstrip, filmstripHead, filmstripList, statusDots } from "../ui/styles/review-layout.mjs";
 import { jsx, jsxs } from "hono/jsx/jsx-runtime";
-//#region src/pages/build-diff-nav.tsx
+// src/pages/build-diff-nav.tsx
 /**
 * The list filters purely in CSS off `data-filter`, so it works before the
 * review script runs. The selected snapshot always stays visible.
@@ -132,7 +132,6 @@ function DiffNav(props) {
 		})]
 	});
 }
-//#endregion
 export { DiffNav };
 
 //# sourceMappingURL=build-diff-nav.mjs.map

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", "→"],
@@ -76,7 +76,6 @@ function ShortcutsDialog() {
 		]
 	});
 }
-//#endregion
 export { ShortcutsDialog };
 
 //# sourceMappingURL=build-diff-shortcuts.mjs.map

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

@@ -6,7 +6,7 @@ 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";
-//#region src/pages/build-diff-usage.tsx
+// 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;
@@ -57,7 +57,6 @@ function LinkedUsage(props) {
 		}, item.package);
 	}) });
 }
-//#endregion
 export { LinkedUsage, upstreamPreviewUrl };
 
 //# sourceMappingURL=build-diff-usage.mjs.map

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

@@ -7,15 +7,17 @@ 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 { diffPercent, snapshotImageUrl, snapshotPageUrl, snapshotVariant } from "./build-diff-model.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 { 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";
 import { createUrlBuilder } from "@storyshelf/core/urls";
-//#region src/pages/build-diff-viewer.tsx
+// 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";
@@ -49,7 +51,7 @@ function ViewComponentButton(props) {
 }
 /** Story heading plus the comparison stage for the selected snapshot. */
 function DiffViewer(props) {
-	const { project, build, selected, hasBaseline, drifted, usage, design, publishedBaseDomain } = props;
+	const { project, build, selected, drifted, usage, design, publishedBaseDomain } = props;
 	const siblings = props.siblings ?? [selected];
 	const percent = diffPercent(selected);
 	return /* @__PURE__ */ jsxs(VStack, { children: [
@@ -93,6 +95,7 @@ function DiffViewer(props) {
 				]
 			})]
 		}),
+		props.reference ? /* @__PURE__ */ jsx(BaselineReferenceNotice, { reference: props.reference }) : null,
 		/* @__PURE__ */ jsx(BrowserTabs, {
 			project,
 			build,
@@ -110,18 +113,41 @@ function DiffViewer(props) {
 			publishedBaseDomain
 		}) : null,
 		design && design.length > 0 ? /* @__PURE__ */ jsx(DesignStrip, { items: design }) : 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(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 { createUrlBuilder } from \"@storyshelf/core/urls\";\nimport type { HtmlEscapedString } from \"hono/utils/html\";\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 { EnvironmentChangeSnapshotNotice } from \"./build-diff-environment.tsx\";\nimport {\n  diffPercent,\n  snapshotImageUrl,\n  snapshotPageUrl,\n  snapshotVariant,\n} from \"./build-diff-model.ts\";\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  /** 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, hasBaseline, drifted, usage, design, publishedBaseDomain } =\n    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      <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      <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      {design && design.length > 0 ? <DesignReferences items={design} /> : null}\n    </VStack>\n  );\n}\n"],"mappings":"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"}
+{"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

@@ -14,7 +14,7 @@ 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];
@@ -39,6 +39,8 @@ function DiffReviewGrid(props) {
 					selected,
 					siblings: groupOf(snapshots, selected.id)?.members,
 					hasBaseline,
+					reference: props.reference,
+					defaultComparison: props.defaultComparison,
 					drifted: drifted[selected.id],
 					usage,
 					design,
@@ -78,7 +80,7 @@ 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 { project, build, snapshots, selectedId, canReview, drifted } = data;
 	const selected = selectedSnapshot(snapshots, selectedId);
 	const pendingGroups = reviewProgress(snapshots).pending;
 	return /* @__PURE__ */ jsxs(DocumentLayout, {
@@ -109,23 +111,15 @@ function renderBuildDiffPage(data) {
 				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 ?? [],
-				publishedBaseDomain: data.publishedBaseDomain
+				design: data.design ?? []
 			}),
 			/* @__PURE__ */ jsx(ShortcutsDialog, {})
 		]
 	});
 }
-//#endregion
 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 type { InsightPanelData } from \"../insights/panel.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  /** 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  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              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, comments, selectedId, canReview, hasBaseline, drifted } = data;\n  const selected = selectedSnapshot(snapshots, selectedId);\n  const pendingGroups = reviewProgress(snapshots).pending;\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={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\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          usage={data.usage ?? []}\n          design={data.design ?? []}\n          publishedBaseDomain={data.publishedBaseDomain}\n        />\n      )}\n      <ShortcutsDialog />\n    </DocumentLayout>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AA2DA,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,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,UAAU,YAAY,WAAW,aAAa,YAAY;CAC7F,MAAM,WAAW,iBAAiB,WAAW,UAAU;CACvD,MAAM,gBAAgB,eAAe,SAAS,CAAC,CAAC;CAEhD,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;GAEjE,UAAU,WAAW,IACpB,oBAAC,YAAD;IACE,OAAM;IACN,aAAY;GACb,CAAA,IAED,oBAAC,gBAAD;IACW;IACF;IACI;IACD;IACA;IACC;IACE;IACJ;IACT,OAAO,KAAK,SAAS,CAAC;IACtB,QAAQ,KAAK,UAAU,CAAC;IACxB,qBAAqB,KAAK;GAC3B,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"}

package/dist/pages/build-tests.mjs

@@ -6,7 +6,7 @@ import { Card, SectionTitle } from "../ui/layout.mjs";
 import { HStack, VStack } from "../ui/stacks.mjs";
 import { summarizeTests } from "@storyshelf/core/capture";
 import { jsx, jsxs } from "hono/jsx/jsx-runtime";
-//#region src/pages/build-tests.tsx
+// src/pages/build-tests.tsx
 /** The line under the card title: counts, and what a failure means for the build. */
 function testsSummaryNote(results) {
 	const { total, passed, failed } = summarizeTests(results);
@@ -68,7 +68,6 @@ function TestRow(props) {
 		}) : null]
 	});
 }
-//#endregion
 export { TestsCard, testsSummaryNote };
 
 //# sourceMappingURL=build-tests.mjs.map

package/dist/pages/component-detail.mjs

@@ -16,7 +16,7 @@ import { ComponentBuilds, StoriesTab } from "./component-stories.mjs";
 import { worstStatus } from "@storyshelf/core/models";
 import { Fragment, jsx, jsxs } from "hono/jsx/jsx-runtime";
 import { createUrlBuilder } from "@storyshelf/core/urls";
-//#region src/pages/component-detail.tsx
+// src/pages/component-detail.tsx
 const TAB_LABELS = {
 	stories: "Stories",
 	states: "States",
@@ -243,7 +243,6 @@ function LinkedTab(props) {
 		publishedBaseDomain: data.publishedBaseDomain
 	})] });
 }
-//#endregion
 export { componentTabs, renderComponentPage };
 
 //# sourceMappingURL=component-detail.mjs.map

package/dist/pages/component-stories.mjs

@@ -11,7 +11,7 @@ import { PREVIEW_TOKEN_REFRESH, isSignedPreviewBase } from "../routers/preview-b
 import { StoryComments } from "./review-comments.mjs";
 import { jsx, jsxs } from "hono/jsx/jsx-runtime";
 import { createUrlBuilder } from "@storyshelf/core/urls";
-//#region src/pages/component-stories.tsx
+// src/pages/component-stories.tsx
 /** Stories tab: the selected story in a sandboxed preview, and every story and docs entry. */
 function StoriesTab(props) {
 	const { data } = props;
@@ -162,7 +162,6 @@ function changeParts(row) {
 function storybookBase(data) {
 	return createUrlBuilder("/", data.publishedBaseDomain).storybookBuild(data.project.slug, data.catalog.build.id);
 }
-//#endregion
 export { ComponentBuilds, StoriesTab };
 
 //# sourceMappingURL=component-stories.mjs.map

package/dist/pages/compute-jobs.mjs

@@ -10,7 +10,7 @@ import { Table } from "../ui/table.mjs";
 import { DocumentLayout } from "../ui/document.mjs";
 import { BuildModel, ProjectModel } from "@storyshelf/core/models";
 import { jsx, jsxs } from "hono/jsx/jsx-runtime";
-//#region src/pages/compute-jobs.tsx
+// src/pages/compute-jobs.tsx
 /** Build statuses the retry button of the jobs table offers. */
 const RETRYABLE = /* @__PURE__ */ new Set([
 	"failed",
@@ -146,7 +146,6 @@ async function renderComputeJobsPage(slug, queueView, canRetry) {
 		]
 	});
 }
-//#endregion
 export { renderActiveQueue, renderComputeJobsPage };
 
 //# sourceMappingURL=compute-jobs.mjs.map

package/dist/pages/design-links.mjs

@@ -8,7 +8,7 @@ import { Dropdown, DropdownItem } from "../ui/dropdown.mjs";
 import { DesignPreview, DesignReference } from "../ui/design-reference.mjs";
 import { csrfField } from "../ui/csrf-field.mjs";
 import { Fragment, jsx, jsxs } from "hono/jsx/jsx-runtime";
-//#region src/pages/design-links.tsx
+// src/pages/design-links.tsx
 /**
 * Design actions for a component's link(s). A link with a cached render opens a
 * click popover (preview + `Open in <provider>`); others are plain deep links.
@@ -176,7 +176,6 @@ function ProjectDesignLinks(props) {
 		children: link.label
 	}, link.url)) });
 }
-//#endregion
 export { DesignButtons, DesignReferences, DesignStrip, ProjectDesignLinks };
 
 //# sourceMappingURL=design-links.mjs.map

package/dist/pages/environment-change.mjs

@@ -1,7 +1,7 @@
 import "node:path";
 import "node:url";
 import.meta.url;
-//#region src/pages/environment-change.ts
+// src/pages/environment-change.ts
 /** What changed, in words a reviewer recognises. */
 const FIELD_LABELS = {
 	engine: "browser engine",
@@ -47,7 +47,6 @@ function browserVersionOf(changes) {
 		to
 	} } : {};
 }
-//#endregion
 export { environmentChangeOf, labelOf, summariseEnvironmentChanges };
 
 //# sourceMappingURL=environment-change.mjs.map

package/dist/pages/health-panel.mjs

@@ -7,7 +7,7 @@ import { Card, SectionTitle } from "../ui/layout.mjs";
 import { HStack, VStack } from "../ui/stacks.mjs";
 import { csrfField } from "../ui/csrf-field.mjs";
 import { Fragment, jsx, jsxs } from "hono/jsx/jsx-runtime";
-//#region src/pages/health-panel.tsx
+// src/pages/health-panel.tsx
 /** Badge tone for a health verdict. */
 function healthTone(verdict) {
 	if (verdict === "healthy") return "success";
@@ -120,7 +120,6 @@ function HealthSlot(props) {
 		data: props.data
 	}) : null;
 }
-//#endregion
 export { HealthPanel, HealthSlot, healthTone };
 
 //# sourceMappingURL=health-panel.mjs.map