@storyshelf/app 0.7.0 → 0.9.0-next-d2cc082

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

@@ -7,7 +7,7 @@ import { Kbd } from "../ui/kbd.mjs";
 import { groupOf, neighbours, snapshotPageUrl } from "./build-diff-model.mjs";
 import { actionBar, actionGroup, actionHints, actionPosition } from "../ui/styles/review-layout.mjs";
 import { jsx, jsxs } from "hono/jsx/jsx-runtime";
-//#region src/pages/build-diff-actions.tsx
+// src/pages/build-diff-actions.tsx
 function apiBase(project, build) {
 	return `/api/v1/projects/${project.slug}/builds/${build.id}`;
 }
@@ -210,7 +210,6 @@ function DiffActionBar(props) {
 		]
 	});
 }
-//#endregion
 export { DiffActionBar };
 
 //# sourceMappingURL=build-diff-actions.mjs.map

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

@@ -9,7 +9,7 @@ import { VStack } from "../ui/stacks.mjs";
 import { csrfField } from "../ui/csrf-field.mjs";
 import { reviewComment, reviewCommentActions, reviewCommentBody, reviewCommentHead } from "../ui/styles/review.mjs";
 import { jsx, jsxs } from "hono/jsx/jsx-runtime";
-//#region src/pages/build-diff-comments.tsx
+// src/pages/build-diff-comments.tsx
 /** One comment with an optional resolve action. */
 function CommentCard(props) {
 	const { project, build, comment, canReview, anchor } = props;
@@ -100,7 +100,6 @@ function DiffComments(props) {
 		})
 	] });
 }
-//#endregion
 export { CommentCard, DiffComments };
 
 //# sourceMappingURL=build-diff-comments.mjs.map

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

@@ -0,0 +1,53 @@
+import "node:path";
+import "node:url";
+import.meta.url;
+import { css } from "../ui/css.mjs";
+import { HStack } from "../ui/stacks.mjs";
+import { snapshotImageUrl } from "./build-diff-model.mjs";
+import { jsx, jsxs } from "hono/jsx/jsx-runtime";
+// src/pages/build-diff-default.tsx
+const comparisonImage = css`
+  /* default-comparison-image */
+  max-width: 100%;
+`;
+function DefaultComparisonView(props) {
+	const { project, build, snapshot, comparison } = props;
+	const params = new URLSearchParams({
+		reference: "default",
+		id: comparison.id,
+		version: comparison.version
+	});
+	const baseline = `${snapshotImageUrl(project, build, snapshot, "baseline")}?${params}`;
+	return /* @__PURE__ */ jsxs("details", { children: [
+		/* @__PURE__ */ jsxs("summary", { children: [
+			"Compare with current default branch (",
+			comparison.branch,
+			")"
+		] }),
+		/* @__PURE__ */ jsxs("p", { children: [
+			"This is a secondary comparison. Approval still uses the primary comparison above. Default baseline updated ",
+			comparison.version,
+			"."
+		] }),
+		/* @__PURE__ */ jsx("p", { children: comparison.environment === "different" ? "Recorded environment fingerprints differ; some components may be unknown and differences may be environmental." : comparison.environment === "unknown" ? "Capture environment information is unavailable." : "Recorded capture environment fingerprints match; some components may be unknown." }),
+		comparison.available ? /* @__PURE__ */ jsxs(HStack, {
+			align: "start",
+			children: [/* @__PURE__ */ jsx(BaselineImage, { src: baseline }), /* @__PURE__ */ jsxs("figure", { children: [/* @__PURE__ */ jsx("figcaption", { children: "This build" }), /* @__PURE__ */ jsx("img", {
+				src: snapshotImageUrl(project, build, snapshot, "image"),
+				alt: "This build's screenshot",
+				class: comparisonImage
+			})] })]
+		}) : /* @__PURE__ */ jsx("p", { children: "The current default-branch baseline image is unavailable." })
+	] });
+}
+function BaselineImage(props) {
+	return /* @__PURE__ */ jsxs("figure", { children: [/* @__PURE__ */ jsx("figcaption", { children: "Current default-branch baseline" }), /* @__PURE__ */ jsx("img", {
+		src: props.src,
+		alt: "Current default-branch baseline",
+		loading: "lazy",
+		class: comparisonImage
+	})] });
+}
+export { DefaultComparisonView };
+
+//# sourceMappingURL=build-diff-default.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"build-diff-default.mjs","names":[],"sources":["../../src/pages/build-diff-default.tsx"],"sourcesContent":["import type { Build, Project, Snapshot } from \"@storyshelf/core/schema\";\nimport type { HtmlEscapedString } from \"hono/utils/html\";\nimport type { DefaultComparison } from \"../routers/baseline-reference.ts\";\nimport { HStack } from \"../ui/components.tsx\";\nimport { css } from \"../ui/css.ts\";\nimport { snapshotImageUrl } from \"./build-diff-model.ts\";\n\nconst comparisonImage = css`\n  /* default-comparison-image */\n  max-width: 100%;\n`;\n\n/* eslint-disable promise-function-async -- Hono JSX components may return HTML or a promise */\nexport function DefaultComparisonView(props: {\n  project: Project;\n  build: Build;\n  snapshot: Snapshot;\n  comparison: DefaultComparison;\n}): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const { project, build, snapshot, comparison } = props;\n  const params = new URLSearchParams({\n    reference: \"default\",\n    id: comparison.id,\n    version: comparison.version,\n  });\n  const baseline = `${snapshotImageUrl(project, build, snapshot, \"baseline\")}?${params}`;\n  return (\n    <details>\n      <summary>Compare with current default branch ({comparison.branch})</summary>\n      <p>\n        This is a secondary comparison. Approval still uses the primary comparison above. Default\n        baseline updated {comparison.version}.\n      </p>\n      <p>\n        {comparison.environment === \"different\"\n          ? \"Recorded environment fingerprints differ; some components may be unknown and differences may be environmental.\"\n          : comparison.environment === \"unknown\"\n            ? \"Capture environment information is unavailable.\"\n            : \"Recorded capture environment fingerprints match; some components may be unknown.\"}\n      </p>\n      {comparison.available ? (\n        <HStack align=\"start\">\n          <BaselineImage src={baseline} />\n          <figure>\n            <figcaption>This build</figcaption>\n            <img\n              src={snapshotImageUrl(project, build, snapshot, \"image\")}\n              alt=\"This build's screenshot\"\n              class={comparisonImage}\n            />\n          </figure>\n        </HStack>\n      ) : (\n        <p>The current default-branch baseline image is unavailable.</p>\n      )}\n    </details>\n  );\n}\n\nfunction BaselineImage(props: { src: string }): HtmlEscapedString | Promise<HtmlEscapedString> {\n  return (\n    <figure>\n      <figcaption>Current default-branch baseline</figcaption>\n      <img\n        src={props.src}\n        alt=\"Current default-branch baseline\"\n        loading=\"lazy\"\n        class={comparisonImage}\n      />\n    </figure>\n  );\n}\n"],"mappings":";;;;;;;;AAOA,MAAM,kBAAkB,GAAG;;;;AAM3B,SAAgB,sBAAsB,OAKa;CACjD,MAAM,EAAE,SAAS,OAAO,UAAU,eAAe;CACjD,MAAM,SAAS,IAAI,gBAAgB;EACjC,WAAW;EACX,IAAI,WAAW;EACf,SAAS,WAAW;CACtB,CAAC;CACD,MAAM,WAAW,GAAG,iBAAiB,SAAS,OAAO,UAAU,UAAU,EAAE,GAAG;CAC9E,OACE,qBAAC,WAAD,EAAA,UAAA;EACE,qBAAC,WAAD,EAAA,UAAA;GAAS;GAAsC,WAAW;GAAO;EAAU,EAAA,CAAA;EAC3E,qBAAC,KAAD,EAAA,UAAA;GAAG;GAEiB,WAAW;GAAQ;EACpC,EAAA,CAAA;EACH,oBAAC,KAAD,EAAA,UACG,WAAW,gBAAgB,cACxB,mHACA,WAAW,gBAAgB,YACzB,oDACA,mFACL,CAAA;EACF,WAAW,YACV,qBAAC,QAAD;GAAQ,OAAM;GAAd,UAAA,CACE,oBAAC,eAAD,EAAe,KAAK,SAAW,CAAA,GAC/B,qBAAC,UAAD,EAAA,UAAA,CACE,oBAAC,cAAD,EAAA,UAAY,aAAsB,CAAA,GAClC,oBAAC,OAAD;IACE,KAAK,iBAAiB,SAAS,OAAO,UAAU,OAAO;IACvD,KAAI;IACJ,OAAO;GACR,CAAA,CACK,EAAA,CAAA,CACF;EAER,CAAA,IAAA,oBAAC,KAAD,EAAA,UAAG,4DAA4D,CAAA;CAE1D,EAAA,CAAA;AAEb;AAEA,SAAS,cAAc,OAAwE;CAC7F,OACE,qBAAC,UAAD,EAAA,UAAA,CACE,oBAAC,cAAD,EAAA,UAAY,kCAA2C,CAAA,GACvD,oBAAC,OAAD;EACE,KAAK,MAAM;EACX,KAAI;EACJ,SAAQ;EACR,OAAO;CACR,CAAA,CACK,EAAA,CAAA;AAEZ"}

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

@@ -3,14 +3,38 @@ import "node:url";
 import.meta.url;
 import { Alert } from "../ui/feedback.mjs";
 import { StaleBaselineNotice } from "./build-diff-stale.mjs";
-import { environmentChangeOf, labelOf, summariseEnvironmentChanges } from "./environment-change.mjs";
+import { environmentChangeOf, labelOf, summariseEnvironmentChanges, summarisePartlyUnknown } from "./environment-change.mjs";
 import { Fragment, jsx, jsxs } from "hono/jsx/jsx-runtime";
-//#region src/pages/build-diff-environment.tsx
+// src/pages/build-diff-environment.tsx
 /**
 * Build-level note: some snapshots were captured in a different environment than their baseline.
 * The default branch migrates them without a diff; a feature branch still diffs them (ADR 0005).
 */
 function EnvironmentChangeNotice(props) {
+	const unknown = summarisePartlyUnknown(props.snapshots);
+	const changed = /* @__PURE__ */ jsx(EnvironmentMigrationNotice, { ...props });
+	return unknown ? /* @__PURE__ */ jsxs(Fragment, { children: [changed, /* @__PURE__ */ jsx(PartlyUnknownNotice, {
+		count: unknown.count,
+		fields: unknown.fields
+	})] }) : changed;
+}
+/** The measurement version changed: some components were compared as unknown, not as different. */
+function PartlyUnknownNotice(props) {
+	const { count, fields } = props;
+	return /* @__PURE__ */ jsxs(Alert, {
+		tone: "info",
+		title: "Environment partly unknown (measurement updated)",
+		children: [
+			count,
+			" ",
+			count === 1 ? "snapshot has" : "snapshots have",
+			" a baseline whose environment was measured an older way, so the ",
+			fields.join(", "),
+			" could not be compared. They are not treated as a change, and nothing was migrated because of them."
+		]
+	});
+}
+function EnvironmentMigrationNotice(props) {
 	const summary = summariseEnvironmentChanges(props.snapshots);
 	if (!summary) return null;
 	const { count, fields, browserVersion } = summary;
@@ -43,8 +67,14 @@ function EnvironmentChangeNotice(props) {
 function EnvironmentChangeSnapshotNotice(props) {
 	const change = environmentChangeOf(props.snapshot);
 	if (!change) return null;
+	const unknown = (change.unknown ?? []).map((field) => labelOf(field));
+	const note = unknown.length > 0 ? /* @__PURE__ */ jsx(PartlyUnknownNotice, {
+		count: 1,
+		fields: unknown
+	}) : null;
+	if (change.changed.length === 0) return note;
 	const what = change.changed.map((field) => labelOf(field)).join(", ");
-	return props.migrated ? /* @__PURE__ */ jsxs(Alert, {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [props.migrated ? /* @__PURE__ */ jsxs(Alert, {
 		tone: "info",
 		title: "No diff: capture environment changed",
 		children: [
@@ -60,7 +90,7 @@ function EnvironmentChangeSnapshotNotice(props) {
 			what,
 			"), so a difference may come from the environment rather than the code."
 		]
-	});
+	}), note] });
 }
 /** Build-level notices above the review grid: stale baselines and environment migrations. */
 function ReviewNotices(props) {
@@ -76,7 +106,6 @@ function ReviewNotices(props) {
 		migrated: build.isDefault
 	})] });
 }
-//#endregion
 export { EnvironmentChangeNotice, EnvironmentChangeSnapshotNotice, ReviewNotices };
 
 //# sourceMappingURL=build-diff-environment.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"build-diff-environment.mjs","names":[],"sources":["../../src/pages/build-diff-environment.tsx"],"sourcesContent":["import type { Build, Project, Snapshot } from \"@storyshelf/core/schema\";\nimport type { HtmlEscapedString } from \"hono/utils/html\";\nimport { Alert } from \"../ui/components.tsx\";\nimport { StaleBaselineNotice } from \"./build-diff-stale.tsx\";\nimport { environmentChangeOf, labelOf, summariseEnvironmentChanges } from \"./environment-change.ts\";\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\n/**\n * Build-level note: some snapshots were captured in a different environment than their baseline.\n * The default branch migrates them without a diff; a feature branch still diffs them (ADR 0005).\n */\nexport function EnvironmentChangeNotice(props: {\n  snapshots: readonly Snapshot[];\n  migrated: boolean;\n}): HtmlEscapedString | Promise<HtmlEscapedString> | null {\n  const summary = summariseEnvironmentChanges(props.snapshots);\n  if (!summary) {\n    return null;\n  }\n  const { count, fields, browserVersion } = summary;\n  const what = `the ${fields.join(\", \")} changed${\n    browserVersion ? ` (${browserVersion.from} → ${browserVersion.to})` : \"\"\n  }`;\n  return props.migrated ? (\n    <Alert tone=\"info\" title=\"Capture environment changed\">\n      {count} {count === 1 ? \"snapshot was\" : \"snapshots were\"} accepted without a pixel diff\n      because {what}. The same code renders differently here, so a diff would only show the\n      environment. The baselines were updated to match.\n    </Alert>\n  ) : (\n    <Alert tone=\"info\" title=\"Capture environment changed\">\n      {count} {count === 1 ? \"snapshot was\" : \"snapshots were\"} compared against a baseline from a\n      different capture environment: {what}. A difference may come from the environment rather than\n      the code; once the default branch captures in the new environment, a rebuild compares like\n      with like.\n    </Alert>\n  );\n}\n\n/** Per-snapshot note shown above the viewer for a snapshot whose capture environment changed. */\nexport function EnvironmentChangeSnapshotNotice(props: {\n  snapshot: Pick<Snapshot, \"envChange\">;\n  migrated: boolean;\n}): HtmlEscapedString | Promise<HtmlEscapedString> | null {\n  const change = environmentChangeOf(props.snapshot);\n  if (!change) {\n    return null;\n  }\n  const what = change.changed.map((field) => labelOf(field)).join(\", \");\n  return props.migrated ? (\n    <Alert tone=\"info\" title=\"No diff: capture environment changed\">\n      This snapshot was not compared pixel by pixel. What changed: {what}.\n    </Alert>\n  ) : (\n    <Alert tone=\"info\" title=\"Capture environment changed\">\n      The baseline was captured in a different environment ({what}), so a difference may come from\n      the environment rather than the code.\n    </Alert>\n  );\n}\n\n/** Build-level notices above the review grid: stale baselines and environment migrations. */\nexport function ReviewNotices(props: {\n  project: Project;\n  build: Build;\n  snapshots: readonly Snapshot[];\n  drifted: Record<string, unknown>;\n  canReview: boolean;\n}): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const { project, build, snapshots, drifted, canReview } = props;\n  const staleCount = Object.keys(drifted).length;\n  return (\n    <>\n      {staleCount > 0 ? (\n        <StaleBaselineNotice\n          project={project}\n          build={build}\n          staleCount={staleCount}\n          canReview={canReview}\n        />\n      ) : null}\n      <EnvironmentChangeNotice snapshots={snapshots} migrated={build.isDefault} />\n    </>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAYA,SAAgB,wBAAwB,OAGkB;CACxD,MAAM,UAAU,4BAA4B,MAAM,SAAS;CAC3D,IAAI,CAAC,SACH,OAAO;CAET,MAAM,EAAE,OAAO,QAAQ,mBAAmB;CAC1C,MAAM,OAAO,OAAO,OAAO,KAAK,IAAI,EAAE,UACpC,iBAAiB,KAAK,eAAe,KAAK,KAAK,eAAe,GAAG,KAAK;CAExE,OAAO,MAAM,WACX,qBAAC,OAAD;EAAO,MAAK;EAAO,OAAM;EAAzB,UAAA;GACG;GAAM;GAAE,UAAU,IAAI,iBAAiB;GAAiB;GAChD;GAAK;EAET;CAEP,CAAA,IAAA,qBAAC,OAAD;EAAO,MAAK;EAAO,OAAM;EAAzB,UAAA;GACG;GAAM;GAAE,UAAU,IAAI,iBAAiB;GAAiB;GACzB;GAAK;EAGhC;;AAEX;;AAGA,SAAgB,gCAAgC,OAGU;CACxD,MAAM,SAAS,oBAAoB,MAAM,QAAQ;CACjD,IAAI,CAAC,QACH,OAAO;CAET,MAAM,OAAO,OAAO,QAAQ,KAAK,UAAU,QAAQ,KAAK,CAAC,CAAC,CAAC,KAAK,IAAI;CACpE,OAAO,MAAM,WACX,qBAAC,OAAD;EAAO,MAAK;EAAO,OAAM;EAAzB,UAAA;GAAgE;GACA;GAAK;EAC9D;CAEP,CAAA,IAAA,qBAAC,OAAD;EAAO,MAAK;EAAO,OAAM;EAAzB,UAAA;GAAuD;GACE;GAAK;EAEvD;;AAEX;;AAGA,SAAgB,cAAc,OAMqB;CACjD,MAAM,EAAE,SAAS,OAAO,WAAW,SAAS,cAAc;CAC1D,MAAM,aAAa,OAAO,KAAK,OAAO,CAAC,CAAC;CACxC,OACE,qBAAA,UAAA,EAAA,UAAA,CACG,aAAa,IACZ,oBAAC,qBAAD;EACW;EACF;EACK;EACD;CACZ,CAAA,IACC,MACJ,oBAAC,yBAAD;EAAoC;EAAW,UAAU,MAAM;CAAY,CAAA,CAC3E,EAAA,CAAA;AAEN"}
+{"version":3,"file":"build-diff-environment.mjs","names":[],"sources":["../../src/pages/build-diff-environment.tsx"],"sourcesContent":["import type { Build, Project, Snapshot } from \"@storyshelf/core/schema\";\nimport type { HtmlEscapedString } from \"hono/utils/html\";\nimport { Alert } from \"../ui/components.tsx\";\nimport { StaleBaselineNotice } from \"./build-diff-stale.tsx\";\nimport {\n  environmentChangeOf,\n  labelOf,\n  summariseEnvironmentChanges,\n  summarisePartlyUnknown,\n} from \"./environment-change.ts\";\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\n/**\n * Build-level note: some snapshots were captured in a different environment than their baseline.\n * The default branch migrates them without a diff; a feature branch still diffs them (ADR 0005).\n */\nexport function EnvironmentChangeNotice(props: {\n  snapshots: readonly Snapshot[];\n  migrated: boolean;\n}): HtmlEscapedString | Promise<HtmlEscapedString> | null {\n  const unknown = summarisePartlyUnknown(props.snapshots);\n  const changed = <EnvironmentMigrationNotice {...props} />;\n  return unknown ? (\n    <>\n      {changed}\n      <PartlyUnknownNotice count={unknown.count} fields={unknown.fields} />\n    </>\n  ) : (\n    changed\n  );\n}\n\n/** The measurement version changed: some components were compared as unknown, not as different. */\nfunction PartlyUnknownNotice(props: {\n  count: number;\n  fields: string[];\n}): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const { count, fields } = props;\n  return (\n    <Alert tone=\"info\" title=\"Environment partly unknown (measurement updated)\">\n      {count} {count === 1 ? \"snapshot has\" : \"snapshots have\"} a baseline whose environment was\n      measured an older way, so the {fields.join(\", \")} could not be compared. They are not treated\n      as a change, and nothing was migrated because of them.\n    </Alert>\n  );\n}\n\nfunction EnvironmentMigrationNotice(props: {\n  snapshots: readonly Snapshot[];\n  migrated: boolean;\n}): HtmlEscapedString | Promise<HtmlEscapedString> | null {\n  const summary = summariseEnvironmentChanges(props.snapshots);\n  if (!summary) {\n    return null;\n  }\n  const { count, fields, browserVersion } = summary;\n  const what = `the ${fields.join(\", \")} changed${\n    browserVersion ? ` (${browserVersion.from} → ${browserVersion.to})` : \"\"\n  }`;\n  return props.migrated ? (\n    <Alert tone=\"info\" title=\"Capture environment changed\">\n      {count} {count === 1 ? \"snapshot was\" : \"snapshots were\"} accepted without a pixel diff\n      because {what}. The same code renders differently here, so a diff would only show the\n      environment. The baselines were updated to match.\n    </Alert>\n  ) : (\n    <Alert tone=\"info\" title=\"Capture environment changed\">\n      {count} {count === 1 ? \"snapshot was\" : \"snapshots were\"} compared against a baseline from a\n      different capture environment: {what}. A difference may come from the environment rather than\n      the code; once the default branch captures in the new environment, a rebuild compares like\n      with like.\n    </Alert>\n  );\n}\n\n/** Per-snapshot note shown above the viewer for a snapshot whose capture environment changed. */\nexport function EnvironmentChangeSnapshotNotice(props: {\n  snapshot: Pick<Snapshot, \"envChange\">;\n  migrated: boolean;\n}): HtmlEscapedString | Promise<HtmlEscapedString> | null {\n  const change = environmentChangeOf(props.snapshot);\n  if (!change) {\n    return null;\n  }\n  const unknown = (change.unknown ?? []).map((field) => labelOf(field));\n  const note = unknown.length > 0 ? <PartlyUnknownNotice count={1} fields={unknown} /> : null;\n  if (change.changed.length === 0) {\n    return note;\n  }\n  const what = change.changed.map((field) => labelOf(field)).join(\", \");\n  return (\n    <>\n      {props.migrated ? (\n        <Alert tone=\"info\" title=\"No diff: capture environment changed\">\n          This snapshot was not compared pixel by pixel. What changed: {what}.\n        </Alert>\n      ) : (\n        <Alert tone=\"info\" title=\"Capture environment changed\">\n          The baseline was captured in a different environment ({what}), so a difference may come\n          from the environment rather than the code.\n        </Alert>\n      )}\n      {note}\n    </>\n  );\n}\n\n/** Build-level notices above the review grid: stale baselines and environment migrations. */\nexport function ReviewNotices(props: {\n  project: Project;\n  build: Build;\n  snapshots: readonly Snapshot[];\n  drifted: Record<string, unknown>;\n  canReview: boolean;\n}): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const { project, build, snapshots, drifted, canReview } = props;\n  const staleCount = Object.keys(drifted).length;\n  return (\n    <>\n      {staleCount > 0 ? (\n        <StaleBaselineNotice\n          project={project}\n          build={build}\n          staleCount={staleCount}\n          canReview={canReview}\n        />\n      ) : null}\n      <EnvironmentChangeNotice snapshots={snapshots} migrated={build.isDefault} />\n    </>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAiBA,SAAgB,wBAAwB,OAGkB;CACxD,MAAM,UAAU,uBAAuB,MAAM,SAAS;CACtD,MAAM,UAAU,oBAAC,4BAAD,EAA4B,GAAI,MAAQ,CAAA;CACxD,OAAO,UACL,qBAAA,UAAA,EAAA,UAAA,CACG,SACD,oBAAC,qBAAD;EAAqB,OAAO,QAAQ;EAAO,QAAQ,QAAQ;CAAS,CAAA,CACpE,EAAA,CAAA,IAEF;AAEJ;;AAGA,SAAS,oBAAoB,OAGsB;CACjD,MAAM,EAAE,OAAO,WAAW;CAC1B,OACE,qBAAC,OAAD;EAAO,MAAK;EAAO,OAAM;EAAzB,UAAA;GACG;GAAM;GAAE,UAAU,IAAI,iBAAiB;GAAiB;GAC1B,OAAO,KAAK,IAAI;GAAE;EAE5C;;AAEX;AAEA,SAAS,2BAA2B,OAGsB;CACxD,MAAM,UAAU,4BAA4B,MAAM,SAAS;CAC3D,IAAI,CAAC,SACH,OAAO;CAET,MAAM,EAAE,OAAO,QAAQ,mBAAmB;CAC1C,MAAM,OAAO,OAAO,OAAO,KAAK,IAAI,EAAE,UACpC,iBAAiB,KAAK,eAAe,KAAK,KAAK,eAAe,GAAG,KAAK;CAExE,OAAO,MAAM,WACX,qBAAC,OAAD;EAAO,MAAK;EAAO,OAAM;EAAzB,UAAA;GACG;GAAM;GAAE,UAAU,IAAI,iBAAiB;GAAiB;GAChD;GAAK;EAET;CAEP,CAAA,IAAA,qBAAC,OAAD;EAAO,MAAK;EAAO,OAAM;EAAzB,UAAA;GACG;GAAM;GAAE,UAAU,IAAI,iBAAiB;GAAiB;GACzB;GAAK;EAGhC;;AAEX;;AAGA,SAAgB,gCAAgC,OAGU;CACxD,MAAM,SAAS,oBAAoB,MAAM,QAAQ;CACjD,IAAI,CAAC,QACH,OAAO;CAET,MAAM,WAAW,OAAO,WAAW,CAAC,EAAA,CAAG,KAAK,UAAU,QAAQ,KAAK,CAAC;CACpE,MAAM,OAAO,QAAQ,SAAS,IAAI,oBAAC,qBAAD;EAAqB,OAAO;EAAG,QAAQ;CAAU,CAAA,IAAI;CACvF,IAAI,OAAO,QAAQ,WAAW,GAC5B,OAAO;CAET,MAAM,OAAO,OAAO,QAAQ,KAAK,UAAU,QAAQ,KAAK,CAAC,CAAC,CAAC,KAAK,IAAI;CACpE,OACE,qBAAA,UAAA,EAAA,UAAA,CACG,MAAM,WACL,qBAAC,OAAD;EAAO,MAAK;EAAO,OAAM;EAAzB,UAAA;GAAgE;GACA;GAAK;EAC9D;CAEP,CAAA,IAAA,qBAAC,OAAD;EAAO,MAAK;EAAO,OAAM;EAAzB,UAAA;GAAuD;GACE;GAAK;EAEvD;CAER,CAAA,GAAA,IACD,EAAA,CAAA;AAEN;;AAGA,SAAgB,cAAc,OAMqB;CACjD,MAAM,EAAE,SAAS,OAAO,WAAW,SAAS,cAAc;CAC1D,MAAM,aAAa,OAAO,KAAK,OAAO,CAAC,CAAC;CACxC,OACE,qBAAA,UAAA,EAAA,UAAA,CACG,aAAa,IACZ,oBAAC,qBAAD;EACW;EACF;EACK;EACD;CACZ,CAAA,IACC,MACJ,oBAAC,yBAAD;EAAoC;EAAW,UAAU,MAAM;CAAY,CAAA,CAC3E,EAAA,CAAA;AAEN"}

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

@@ -9,7 +9,7 @@ import { a11ySummaryOf, a11yUnavailableNote } from "./a11y-violations.mjs";
 import { reviewProgress } from "./build-diff-model.mjs";
 import { headerActions, headerMain, headerMeta, headerProgress, headerSide, headerTitle, reviewHeader } from "../ui/styles/review-layout.mjs";
 import { Fragment, jsx, jsxs } from "hono/jsx/jsx-runtime";
-//#region src/pages/build-diff-header.tsx
+// src/pages/build-diff-header.tsx
 /** Approve-all / reject-all bulk actions (each asks for confirmation). */
 function BulkActions({ project, build, pendingCount }) {
 	const base = `/api/v1/projects/${project.slug}/builds/${build.id}`;
@@ -129,7 +129,6 @@ function DiffHeader(props) {
 		})]
 	});
 }
-//#endregion
 export { DiffHeader };
 
 //# sourceMappingURL=build-diff-header.mjs.map

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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"}