@storyshelf/app 0.6.1 → 0.7.0

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

@@ -0,0 +1,113 @@
+import "node:path";
+import "node:url";
+import.meta.url;
+import { Button } from "../ui/buttons.mjs";
+import { Alert, Badge, Meta } from "../ui/feedback.mjs";
+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
+function itemsOf(output) {
+	const items = output?.items;
+	return Array.isArray(items) ? items : [];
+}
+function verdictTone(verdict) {
+	if (verdict === "likely-intended") return "success";
+	if (verdict === "needs-review") return "warning";
+	return verdict === "likely-regression" ? "danger" : "neutral";
+}
+function InsightBody(props) {
+	const { latest } = props;
+	if (!latest) return /* @__PURE__ */ jsx(Meta, { children: "No AI triage yet for this build." });
+	if (latest.status === "failed") return /* @__PURE__ */ jsxs(Alert, {
+		tone: "warning",
+		title: "Triage failed",
+		children: [
+			"The model call did not finish (",
+			latest.errorCode,
+			"). You can try again."
+		]
+	});
+	if (latest.status !== "done") return /* @__PURE__ */ jsx(Meta, { children: "Working on it…" });
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("span", { children: latest.summary }),
+		/* @__PURE__ */ jsx("ul", { children: itemsOf(latest.output).map((item) => /* @__PURE__ */ jsxs("li", { children: [
+			/* @__PURE__ */ jsx("strong", { children: item.snapshotKey }),
+			" (",
+			item.severity,
+			"): ",
+			item.note
+		] })) }),
+		/* @__PURE__ */ jsxs(Meta, { children: [
+			latest.profile,
+			" · ",
+			latest.model,
+			" · ",
+			latest.createdAt.slice(0, 16).replace("T", " ")
+		] })
+	] });
+}
+/** AI triage panel: verdict, summary, per-snapshot notes (plain text) and regenerate. */
+function InsightPanel(props) {
+	const { project, build, data } = props;
+	const base = `/projects/${project.slug}/builds/${build.id}/insights`;
+	const latest = data.latest;
+	const inFlight = latest?.status === "pending" || latest?.status === "running";
+	const poll = inFlight ? {
+		"hx-get": `${base}/panel`,
+		"hx-trigger": "load delay:3s",
+		"hx-swap": "outerHTML"
+	} : {};
+	return /* @__PURE__ */ jsx("div", {
+		id: "insight-panel",
+		...poll,
+		children: /* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsxs(HStack, { children: [
+			/* @__PURE__ */ jsx(SectionTitle, {
+				level: 3,
+				children: "AI triage (advisory)"
+			}),
+			latest?.status === "done" ? /* @__PURE__ */ jsx(Badge, {
+				tone: verdictTone(latest.verdict),
+				children: latest.verdict
+			}) : null,
+			inFlight ? /* @__PURE__ */ jsx(Badge, {
+				tone: "info",
+				children: "generating…"
+			}) : null
+		] }), /* @__PURE__ */ jsxs(VStack, { children: [/* @__PURE__ */ jsx(InsightBody, { latest }), data.canGenerate && !inFlight ? /* @__PURE__ */ jsxs("form", {
+			method: "post",
+			action: `${base}/generate`,
+			"hx-post": `${base}/generate`,
+			"hx-target": "#insight-panel",
+			"hx-swap": "outerHTML",
+			children: [
+				csrfField(),
+				/* @__PURE__ */ jsx("input", {
+					type: "hidden",
+					name: "force",
+					value: latest ? "true" : "false"
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					variant: "secondary",
+					size: "sm",
+					type: "submit",
+					icon: "sparkles",
+					children: latest ? "Regenerate" : "Generate triage"
+				})
+			]
+		}) : null] })] })
+	});
+}
+/** Renders the panel when AI triage is available for the project, nothing otherwise. */
+function InsightSlot(props) {
+	return props.data ? /* @__PURE__ */ jsx(InsightPanel, {
+		project: props.project,
+		build: props.build,
+		data: props.data
+	}) : null;
+}
+//#endregion
+export { InsightPanel, InsightSlot };
+
+//# sourceMappingURL=build-diff-insight.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"build-diff-insight.mjs","names":[],"sources":["../../src/pages/build-diff-insight.tsx"],"sourcesContent":["import type { Build, Project } from \"@storyshelf/core/schema\";\nimport type { HtmlEscapedString } from \"hono/utils/html\";\nimport type { InsightPanelData } from \"../insights/panel.ts\";\nimport {\n  Alert,\n  Badge,\n  Button,\n  Card,\n  HStack,\n  Meta,\n  SectionTitle,\n  VStack,\n} from \"../ui/components.tsx\";\nimport { csrfField } from \"../ui/csrf-field.tsx\";\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\ninterface TriageItem {\n  snapshotKey: string;\n  note: string;\n  severity: string;\n}\n\nfunction itemsOf(output: unknown): TriageItem[] {\n  const items = (output as { items?: unknown } | null)?.items;\n  return Array.isArray(items) ? (items as TriageItem[]) : [];\n}\n\nfunction verdictTone(verdict: string | null): \"success\" | \"warning\" | \"danger\" | \"neutral\" {\n  if (verdict === \"likely-intended\") {\n    return \"success\";\n  }\n  if (verdict === \"needs-review\") {\n    return \"warning\";\n  }\n  return verdict === \"likely-regression\" ? \"danger\" : \"neutral\";\n}\n\nfunction InsightBody(props: {\n  latest: InsightPanelData[\"latest\"];\n}): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const { latest } = props;\n  if (!latest) {\n    return <Meta>No AI triage yet for this build.</Meta>;\n  }\n  if (latest.status === \"failed\") {\n    return (\n      <Alert tone=\"warning\" title=\"Triage failed\">\n        The model call did not finish ({latest.errorCode}). You can try again.\n      </Alert>\n    );\n  }\n  if (latest.status !== \"done\") {\n    return <Meta>Working on it…</Meta>;\n  }\n  return (\n    <>\n      <span>{latest.summary}</span>\n      <ul>\n        {itemsOf(latest.output).map((item) => (\n          <li>\n            <strong>{item.snapshotKey}</strong> ({item.severity}): {item.note}\n          </li>\n        ))}\n      </ul>\n      <Meta>\n        {latest.profile} · {latest.model} · {latest.createdAt.slice(0, 16).replace(\"T\", \" \")}\n      </Meta>\n    </>\n  );\n}\n\n/** Props for the AI triage panel on the build review page. */\nexport interface InsightPanelProps {\n  project: Project;\n  build: Build;\n  data: InsightPanelData;\n}\n\n/** AI triage panel: verdict, summary, per-snapshot notes (plain text) and regenerate. */\nexport function InsightPanel(\n  props: InsightPanelProps,\n): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const { project, build, data } = props;\n  const base = `/projects/${project.slug}/builds/${build.id}/insights`;\n  const latest = data.latest;\n  const inFlight = latest?.status === \"pending\" || latest?.status === \"running\";\n  const poll = inFlight\n    ? { \"hx-get\": `${base}/panel`, \"hx-trigger\": \"load delay:3s\", \"hx-swap\": \"outerHTML\" }\n    : {};\n  return (\n    <div id=\"insight-panel\" {...poll}>\n      <Card>\n        <HStack>\n          <SectionTitle level={3}>AI triage (advisory)</SectionTitle>\n          {latest?.status === \"done\" ? (\n            <Badge tone={verdictTone(latest.verdict)}>{latest.verdict}</Badge>\n          ) : null}\n          {inFlight ? <Badge tone=\"info\">generating…</Badge> : null}\n        </HStack>\n        <VStack>\n          <InsightBody latest={latest} />\n          {data.canGenerate && !inFlight ? (\n            <form\n              method=\"post\"\n              action={`${base}/generate`}\n              hx-post={`${base}/generate`}\n              hx-target=\"#insight-panel\"\n              hx-swap=\"outerHTML\"\n            >\n              {csrfField()}\n              <input type=\"hidden\" name=\"force\" value={latest ? \"true\" : \"false\"} />\n              <Button variant=\"secondary\" size=\"sm\" type=\"submit\" icon=\"sparkles\">\n                {latest ? \"Regenerate\" : \"Generate triage\"}\n              </Button>\n            </form>\n          ) : null}\n        </VStack>\n      </Card>\n    </div>\n  );\n}\n\n/** Renders the panel when AI triage is available for the project, nothing otherwise. */\nexport function InsightSlot(props: {\n  project: Project;\n  build: Build;\n  data: InsightPanelData | null | undefined;\n}): HtmlEscapedString | Promise<HtmlEscapedString> | null {\n  return props.data ? (\n    <InsightPanel project={props.project} build={props.build} data={props.data} />\n  ) : null;\n}\n"],"mappings":";;;;;;;;;;AAuBA,SAAS,QAAQ,QAA+B;CAC9C,MAAM,QAAS,QAAuC;CACtD,OAAO,MAAM,QAAQ,KAAK,IAAK,QAAyB,CAAC;AAC3D;AAEA,SAAS,YAAY,SAAsE;CACzF,IAAI,YAAY,mBACd,OAAO;CAET,IAAI,YAAY,gBACd,OAAO;CAET,OAAO,YAAY,sBAAsB,WAAW;AACtD;AAEA,SAAS,YAAY,OAE8B;CACjD,MAAM,EAAE,WAAW;CACnB,IAAI,CAAC,QACH,OAAO,oBAAC,MAAD,EAAA,UAAM,mCAAsC,CAAA;CAErD,IAAI,OAAO,WAAW,UACpB,OACE,qBAAC,OAAD;EAAO,MAAK;EAAU,OAAM;EAA5B,UAAA;GAA4C;GACV,OAAO;GAAU;EAC5C;;CAGX,IAAI,OAAO,WAAW,QACpB,OAAO,oBAAC,MAAD,EAAA,UAAM,iBAAoB,CAAA;CAEnC,OACE,qBAAA,UAAA,EAAA,UAAA;EACE,oBAAC,QAAD,EAAA,UAAO,OAAO,QAAc,CAAA;EAC5B,oBAAC,MAAD,EAAA,UACG,QAAQ,OAAO,MAAM,CAAC,CAAC,KAAK,SAC3B,qBAAC,MAAD,EAAA,UAAA;GACE,oBAAC,UAAD,EAAA,UAAS,KAAK,YAAoB,CAAA;GAAC;GAAG,KAAK;GAAS;GAAI,KAAK;EAC3D,EAAA,CAAA,CACL,EACC,CAAA;EACJ,qBAAC,MAAD,EAAA,UAAA;GACG,OAAO;GAAQ;GAAI,OAAO;GAAM;GAAI,OAAO,UAAU,MAAM,GAAG,EAAE,CAAC,CAAC,QAAQ,KAAK,GAAG;EAC/E,EAAA,CAAA;CACN,EAAA,CAAA;AAEN;;AAUA,SAAgB,aACd,OACgD;CAChD,MAAM,EAAE,SAAS,OAAO,SAAS;CACjC,MAAM,OAAO,aAAa,QAAQ,KAAK,UAAU,MAAM,GAAG;CAC1D,MAAM,SAAS,KAAK;CACpB,MAAM,WAAW,QAAQ,WAAW,aAAa,QAAQ,WAAW;CACpE,MAAM,OAAO,WACT;EAAE,UAAU,GAAG,KAAK;EAAS,cAAc;EAAiB,WAAW;CAAY,IACnF,CAAC;CACL,OACE,oBAAC,OAAD;EAAK,IAAG;EAAgB,GAAI;EAC1B,UAAA,qBAAC,MAAD,EAAA,UAAA,CACE,qBAAC,QAAD,EAAA,UAAA;GACE,oBAAC,cAAD;IAAc,OAAO;IAAG,UAAA;GAAkC,CAAA;GACzD,QAAQ,WAAW,SAClB,oBAAC,OAAD;IAAO,MAAM,YAAY,OAAO,OAAO;IAAI,UAAA,OAAO;GAAe,CAAA,IAC/D;GACH,WAAW,oBAAC,OAAD;IAAO,MAAK;IAAO,UAAA;GAAkB,CAAA,IAAI;EAC/C,EAAA,CAAA,GACR,qBAAC,QAAD,EAAA,UAAA,CACE,oBAAC,aAAD,EAAqB,OAAS,CAAA,GAC7B,KAAK,eAAe,CAAC,WACpB,qBAAC,QAAD;GACE,QAAO;GACP,QAAQ,GAAG,KAAK;GAChB,WAAS,GAAG,KAAK;GACjB,aAAU;GACV,WAAQ;GALV,UAAA;IAOG,UAAU;IACX,oBAAC,SAAD;KAAO,MAAK;KAAS,MAAK;KAAQ,OAAO,SAAS,SAAS;IAAU,CAAA;IACrE,oBAAC,QAAD;KAAQ,SAAQ;KAAY,MAAK;KAAK,MAAK;KAAS,MAAK;KACtD,UAAA,SAAS,eAAe;IACnB,CAAA;GACJ;EACJ,CAAA,IAAA,IACE,EAAA,CAAA,CACJ,EAAA,CAAA;CACH,CAAA;AAET;;AAGA,SAAgB,YAAY,OAI8B;CACxD,OAAO,MAAM,OACX,oBAAC,cAAD;EAAc,SAAS,MAAM;EAAS,OAAO,MAAM;EAAO,MAAM,MAAM;CAAO,CAAA,IAC3E;AACN"}

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

@@ -4,32 +4,72 @@ import.meta.url;
 //#region src/pages/build-diff-model.ts
 const OPEN = /* @__PURE__ */ new Set(["new", "changed"]);
 const DECIDED = /* @__PURE__ */ new Set(["approved", "rejected"]);
-/** Count review progress; unchanged snapshots need no decision and are excluded. */
+const browserOf = (snap) => snap.browser ?? "chromium";
+function memberOrder(a, b) {
+	const left = browserOf(a);
+	const right = browserOf(b);
+	if (left === right) return 0;
+	if (left === "chromium") return -1;
+	if (right === "chromium") return 1;
+	return left < right ? -1 : 1;
+}
+/** Group snapshots by story and mode, keeping first-appearance order. */
+function groupSnapshots(snapshots) {
+	const groups = /* @__PURE__ */ new Map();
+	for (const snap of snapshots) {
+		const key = `${snap.storyId}\u0000${snap.viewportName}`;
+		groups.set(key, [...groups.get(key) ?? [], snap]);
+	}
+	return [...groups.entries()].flatMap(([key, list]) => {
+		const members = list.toSorted(memberOrder);
+		const [primary] = members;
+		if (!primary) return [];
+		return [{
+			key,
+			storyId: primary.storyId,
+			modeKey: primary.viewportName,
+			members,
+			primary,
+			representative: members.find((snap) => OPEN.has(snap.status)) ?? primary
+		}];
+	});
+}
+/** Whether a group still has a snapshot waiting for a decision. */
+function isOpenGroup(group) {
+	return group.members.some((snap) => OPEN.has(snap.status));
+}
+/** Count review progress per group; groups of unchanged snapshots need no decision. */
 function reviewProgress(snapshots) {
-	const pending = snapshots.filter((snap) => OPEN.has(snap.status)).length;
-	const done = snapshots.filter((snap) => DECIDED.has(snap.status)).length;
+	const groups = groupSnapshots(snapshots);
+	const pending = groups.filter((group) => isOpenGroup(group)).length;
+	const done = groups.filter((group) => !isOpenGroup(group) && group.members.some((snap) => DECIDED.has(snap.status))).length;
 	return {
 		reviewable: pending + done,
 		done,
 		pending
 	};
 }
-/** Previous/next snapshot around the selected one. */
+/** Previous/next group (as its representative snapshot) around the selected snapshot. */
 function neighbours(snapshots, selectedId) {
-	const index = snapshots.findIndex((snap) => snap.id === selectedId);
+	const groups = groupSnapshots(snapshots);
+	const index = groups.findIndex((group) => group.members.some((snap) => snap.id === selectedId));
 	if (index === -1) return {
 		position: 0,
-		total: snapshots.length,
+		total: groups.length,
 		prev: null,
 		next: null
 	};
 	return {
 		position: index + 1,
-		total: snapshots.length,
-		prev: snapshots[index - 1] ?? null,
-		next: snapshots[index + 1] ?? null
+		total: groups.length,
+		prev: groups[index - 1]?.representative ?? null,
+		next: groups[index + 1]?.representative ?? null
 	};
 }
+/** The group a snapshot belongs to. */
+function groupOf(snapshots, snapshotId) {
+	return groupSnapshots(snapshots).find((group) => group.members.some((snap) => snap.id === snapshotId));
+}
 /** Diff size as a percentage string ("3.1%"), or null when not computed. */
 function diffPercent(snapshot) {
 	return snapshot.diffRatio === null || snapshot.diffRatio === void 0 ? null : `${(snapshot.diffRatio * 100).toFixed(1)}%`;
@@ -42,7 +82,12 @@ function snapshotPageUrl(project, build, snapshotId) {
 function snapshotImageUrl(project, build, snapshot, kind) {
 	return `/api/v1/projects/${project.slug}/builds/${build.id}/snapshots/${snapshot.id}/${kind}`;
 }
+/** Mode and engine of a snapshot for labels: `dark`, `dark · firefox` (chromium is implicit). */
+function snapshotVariant(snap) {
+	const browser = snap.browser ?? "chromium";
+	return browser === "chromium" ? snap.viewportName : `${snap.viewportName} · ${browser}`;
+}
 //#endregion
-export { diffPercent, neighbours, reviewProgress, snapshotImageUrl, snapshotPageUrl };
+export { 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. */\nexport interface ReviewProgress {\n  /** Snapshots a human has to decide on (changed/new, or already decided). */\n  reviewable: number;\n  /** Reviewable snapshots that are approved or rejected. */\n  done: number;\n  /** Snapshots still waiting for a decision. */\n  pending: number;\n}\n\nconst OPEN = new Set([\"new\", \"changed\"]);\nconst DECIDED = new Set([\"approved\", \"rejected\"]);\n\n/** Count review progress; unchanged snapshots need no decision and are excluded. */\nexport function reviewProgress(snapshots: Snapshot[]): ReviewProgress {\n  const pending = snapshots.filter((snap) => OPEN.has(snap.status)).length;\n  const done = snapshots.filter((snap) => DECIDED.has(snap.status)).length;\n  return { reviewable: pending + done, done, pending };\n}\n\n/** Position of the selected snapshot plus its neighbours in list order. */\nexport interface Neighbours {\n  /** 1-based position, or 0 when nothing is selected. */\n  position: number;\n  total: number;\n  prev: Snapshot | null;\n  next: Snapshot | null;\n}\n\n/** Previous/next snapshot around the selected one. */\nexport function neighbours(snapshots: Snapshot[], selectedId?: string): Neighbours {\n  const index = snapshots.findIndex((snap) => snap.id === selectedId);\n  if (index === -1) {\n    return { position: 0, total: snapshots.length, prev: null, next: null };\n  }\n  return {\n    position: index + 1,\n    total: snapshots.length,\n    prev: snapshots[index - 1] ?? null,\n    next: snapshots[index + 1] ?? null,\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"],"mappings":";;;;AAYA,MAAM,uBAAO,IAAI,IAAI,CAAC,OAAO,SAAS,CAAC;AACvC,MAAM,0BAAU,IAAI,IAAI,CAAC,YAAY,UAAU,CAAC;;AAGhD,SAAgB,eAAe,WAAuC;CACpE,MAAM,UAAU,UAAU,QAAQ,SAAS,KAAK,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC;CAClE,MAAM,OAAO,UAAU,QAAQ,SAAS,QAAQ,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC;CAClE,OAAO;EAAE,YAAY,UAAU;EAAM;EAAM;CAAQ;AACrD;;AAYA,SAAgB,WAAW,WAAuB,YAAiC;CACjF,MAAM,QAAQ,UAAU,WAAW,SAAS,KAAK,OAAO,UAAU;CAClE,IAAI,UAAU,IACZ,OAAO;EAAE,UAAU;EAAG,OAAO,UAAU;EAAQ,MAAM;EAAM,MAAM;CAAK;CAExE,OAAO;EACL,UAAU,QAAQ;EAClB,OAAO,UAAU;EACjB,MAAM,UAAU,QAAQ,MAAM;EAC9B,MAAM,UAAU,QAAQ,MAAM;CAChC;AACF;;AAGA,SAAgB,YAAY,UAAsD;CAChF,OAAO,SAAS,cAAc,QAAQ,SAAS,cAAc,KAAA,IACzD,OACA,IAAI,SAAS,YAAY,IAAA,CAAK,QAAQ,CAAC,EAAE;AAC/C;;AAGA,SAAgB,gBAAgB,SAAkB,OAAc,YAA4B;CAC1F,OAAO,aAAa,QAAQ,KAAK,UAAU,MAAM,GAAG,iBAAiB;AACvE;;AAGA,SAAgB,iBACd,SACA,OACA,UACA,MACQ;CACR,OAAO,oBAAoB,QAAQ,KAAK,UAAU,MAAM,GAAG,aAAa,SAAS,GAAG,GAAG;AACzF"}
+{"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":";;;;AAYA,MAAM,uBAAO,IAAI,IAAI,CAAC,OAAO,SAAS,CAAC;AACvC,MAAM,0BAAU,IAAI,IAAI,CAAC,YAAY,UAAU,CAAC;AAoBhD,MAAM,aAAa,SAA4C,KAAK,WAAW;AAE/E,SAAS,YAAY,GAAa,GAAqB;CACrD,MAAM,OAAO,UAAU,CAAC;CACxB,MAAM,QAAQ,UAAU,CAAC;CACzB,IAAI,SAAS,OAAO,OAAO;CAC3B,IAAI,SAAS,YAAY,OAAO;CAChC,IAAI,UAAU,YAAY,OAAO;CACjC,OAAO,OAAO,QAAQ,KAAK;AAC7B;;AAGA,SAAgB,eAAe,WAAwC;CACrE,MAAM,yBAAS,IAAI,IAAwB;CAC3C,KAAK,MAAM,QAAQ,WAAW;EAC5B,MAAM,MAAM,GAAG,KAAK,QAAQ,QAAQ,KAAK;EACzC,OAAO,IAAI,KAAK,CAAC,GAAI,OAAO,IAAI,GAAG,KAAK,CAAC,GAAI,IAAI,CAAC;CACpD;CACA,OAAO,CAAC,GAAG,OAAO,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,UAA2B;EACrE,MAAM,UAAU,KAAK,SAAS,WAAW;EACzC,MAAM,CAAC,WAAW;EAClB,IAAI,CAAC,SAAS,OAAO,CAAC;EACtB,OAAO,CACL;GACE;GACA,SAAS,QAAQ;GACjB,SAAS,QAAQ;GACjB;GACA;GACA,gBAAgB,QAAQ,MAAM,SAAS,KAAK,IAAI,KAAK,MAAM,CAAC,KAAK;EACnE,CACF;CACF,CAAC;AACH;;AAGA,SAAgB,YAAY,OAA+B;CACzD,OAAO,MAAM,QAAQ,MAAM,SAAS,KAAK,IAAI,KAAK,MAAM,CAAC;AAC3D;;AAGA,SAAgB,eAAe,WAAuC;CACpE,MAAM,SAAS,eAAe,SAAS;CACvC,MAAM,UAAU,OAAO,QAAQ,UAAU,YAAY,KAAK,CAAC,CAAC,CAAC;CAC7D,MAAM,OAAO,OAAO,QACjB,UAAU,CAAC,YAAY,KAAK,KAAK,MAAM,QAAQ,MAAM,SAAS,QAAQ,IAAI,KAAK,MAAM,CAAC,CACzF,CAAC,CAAC;CACF,OAAO;EAAE,YAAY,UAAU;EAAM;EAAM;CAAQ;AACrD;;AAaA,SAAgB,WAAW,WAAuB,YAAiC;CACjF,MAAM,SAAS,eAAe,SAAS;CACvC,MAAM,QAAQ,OAAO,WAAW,UAAU,MAAM,QAAQ,MAAM,SAAS,KAAK,OAAO,UAAU,CAAC;CAC9F,IAAI,UAAU,IACZ,OAAO;EAAE,UAAU;EAAG,OAAO,OAAO;EAAQ,MAAM;EAAM,MAAM;CAAK;CAErE,OAAO;EACL,UAAU,QAAQ;EAClB,OAAO,OAAO;EACd,MAAM,OAAO,QAAQ,EAAE,EAAE,kBAAkB;EAC3C,MAAM,OAAO,QAAQ,EAAE,EAAE,kBAAkB;CAC7C;AACF;;AAGA,SAAgB,QAAQ,WAAuB,YAA+C;CAC5F,OAAO,eAAe,SAAS,CAAC,CAAC,MAAM,UACrC,MAAM,QAAQ,MAAM,SAAS,KAAK,OAAO,UAAU,CACrD;AACF;;AAGA,SAAgB,YAAY,UAAsD;CAChF,OAAO,SAAS,cAAc,QAAQ,SAAS,cAAc,KAAA,IACzD,OACA,IAAI,SAAS,YAAY,IAAA,CAAK,QAAQ,CAAC,EAAE;AAC/C;;AAGA,SAAgB,gBAAgB,SAAkB,OAAc,YAA4B;CAC1F,OAAO,aAAa,QAAQ,KAAK,UAAU,MAAM,GAAG,iBAAiB;AACvE;;AAGA,SAAgB,iBACd,SACA,OACA,UACA,MACQ;CACR,OAAO,oBAAoB,QAAQ,KAAK,UAAU,MAAM,GAAG,aAAa,SAAS,GAAG,GAAG;AACzF;;AAGA,SAAgB,gBAAgB,MAA0D;CACxF,MAAM,UAAU,KAAK,WAAW;CAChC,OAAO,YAAY,aAAa,KAAK,eAAe,GAAG,KAAK,aAAa,KAAK;AAChF"}

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

@@ -5,8 +5,9 @@ import { css } from "../ui/css.mjs";
 import { statusTone } from "../ui/feedback.mjs";
 import { Segmented } from "../ui/segmented.mjs";
 import { Thumbnail } from "../ui/thumbnail.mjs";
+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 { diffPercent, reviewProgress, snapshotImageUrl, snapshotPageUrl } from "./build-diff-model.mjs";
 import { jsx, jsxs } from "hono/jsx/jsx-runtime";
 //#region src/pages/build-diff-nav.tsx
 /**
@@ -20,6 +21,9 @@ const filteredList = css`
     [data-status]:not([data-status="new"]):not([data-status="changed"]):not([aria-current="true"]) {
     display: none;
   }
+  &[data-filter="a11y"] [data-snapshot-link]:not([data-a11y]):not([aria-current="true"]) {
+    display: none;
+  }
   &[data-filter="done"]
     [data-status]:not([data-status="approved"]):not([data-status="rejected"]):not(
       [aria-current="true"]
@@ -28,15 +32,20 @@ const filteredList = css`
   }
 `;
 function FilmItem(props) {
-	const { project, build, snap, active } = props;
+	const { project, build, group, active } = props;
+	const snap = group.representative;
 	const url = snapshotPageUrl(project, build, snap.id);
 	const percent = diffPercent(snap);
+	const carrier = a11yCarrierOf(snap, group.members);
+	const a11yCount = a11yFindingsOf(carrier).length;
+	const tags = [group.modeKey === "desktop" ? "" : group.modeKey, group.members.length > 1 ? `${group.members.length} browsers` : ""].filter((tag) => tag !== "");
 	return /* @__PURE__ */ jsxs("a", {
 		href: url,
 		class: active ? filmItemActive : filmItem,
 		"data-snapshot-link": true,
 		"data-snapshot-id": snap.id,
-		"data-status": snap.status,
+		"data-status": isOpenGroup(group) ? "changed" : snap.status,
+		"data-a11y": a11yCount > 0 ? "" : void 0,
 		"aria-current": active ? "true" : void 0,
 		"hx-get": url,
 		"hx-target": "body",
@@ -55,7 +64,7 @@ function FilmItem(props) {
 				}),
 				/* @__PURE__ */ jsx("span", {
 					class: filmSub,
-					children: snap.storyTitle
+					children: [snap.storyTitle, ...tags].join(" · ")
 				}),
 				/* @__PURE__ */ jsxs("span", {
 					class: filmStatus,
@@ -65,18 +74,21 @@ function FilmItem(props) {
 							"aria-hidden": "true"
 						}),
 						snap.status,
-						percent ? ` · ${percent}` : ""
+						percent ? ` · ${percent}` : "",
+						a11yCount > 0 ? ` · a11y ${a11yCount}${carrier.browser ? ` (${carrier.browser})` : ""}` : ""
 					]
 				})
 			]
 		})]
 	});
 }
-/** Left filmstrip: filter chips plus a thumbnail per snapshot. */
+/** Left filmstrip: filter chips plus a thumbnail per story/mode (browsers share one entry). */
 function DiffNav(props) {
 	const { project, build, snapshots, selectedId } = props;
+	const groups = groupSnapshots(snapshots);
 	const progress = reviewProgress(snapshots);
 	const filter = progress.pending > 0 ? "review" : "all";
+	const withA11y = groups.filter((group) => a11yFindingsOf(a11yCarrierOf(group.representative, group.members)).length > 0).length;
 	return /* @__PURE__ */ jsxs("aside", {
 		class: filmstrip,
 		"aria-label": "Snapshots",
@@ -92,14 +104,18 @@ function DiffNav(props) {
 						active: filter === "review"
 					},
 					{
-						label: `All ${snapshots.length}`,
+						label: `All ${groups.length}`,
 						value: "all",
 						active: filter === "all"
 					},
 					{
 						label: `Done ${progress.done}`,
 						value: "done"
-					}
+					},
+					...withA11y > 0 ? [{
+						label: `A11y ${withA11y}`,
+						value: "a11y"
+					}] : []
 				]
 			})
 		}), /* @__PURE__ */ jsx("div", {
@@ -107,12 +123,12 @@ function DiffNav(props) {
 			"data-current": selectedId,
 			"data-filter": filter,
 			class: filteredList,
-			children: snapshots.map((snap) => /* @__PURE__ */ jsx(FilmItem, {
+			children: groups.map((group) => /* @__PURE__ */ jsx(FilmItem, {
 				project,
 				build,
-				snap,
-				active: selectedId === snap.id
-			}, snap.id))
+				group,
+				active: group.members.some((snap) => snap.id === selectedId)
+			}, group.key))
 		})]
 	});
 }

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

@@ -1 +1 @@
-{"version":3,"file":"build-diff-nav.mjs","names":[],"sources":["../../src/pages/build-diff-nav.tsx"],"sourcesContent":["import type { Build, Project, Snapshot } from \"@storyshelf/core/schema\";\nimport type { HtmlEscapedString } from \"hono/utils/html\";\nimport { Segmented, Thumbnail, statusTone } from \"../ui/components.tsx\";\nimport { css } from \"../ui/css.ts\";\nimport {\n  filmBody,\n  filmItem,\n  filmItemActive,\n  filmStatus,\n  filmSub,\n  filmTitle,\n  filmstrip,\n  filmstripHead,\n  filmstripList,\n  statusDots,\n} from \"../ui/styles/review-layout.ts\";\nimport {\n  diffPercent,\n  reviewProgress,\n  snapshotImageUrl,\n  snapshotPageUrl,\n} from \"./build-diff-model.ts\";\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\n/**\n * The list filters purely in CSS off `data-filter`, so it works before the\n * review script runs. The selected snapshot always stays visible.\n */\nconst filteredList = css`\n  /* filmstrip-filtered */\n  ${filmstripList}\n  &[data-filter=\"review\"]\n    [data-status]:not([data-status=\"new\"]):not([data-status=\"changed\"]):not([aria-current=\"true\"]) {\n    display: none;\n  }\n  &[data-filter=\"done\"]\n    [data-status]:not([data-status=\"approved\"]):not([data-status=\"rejected\"]):not(\n      [aria-current=\"true\"]\n    ) {\n    display: none;\n  }\n`;\n\n/** Snapshot navigator props for the diff review page. */\nexport interface DiffNavProps {\n  project: Project;\n  build: Build;\n  snapshots: Snapshot[];\n  selectedId?: string;\n}\n\nfunction FilmItem(props: {\n  project: Project;\n  build: Build;\n  snap: Snapshot;\n  active: boolean;\n}): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const { project, build, snap, active } = props;\n  const url = snapshotPageUrl(project, build, snap.id);\n  const percent = diffPercent(snap);\n  return (\n    <a\n      href={url}\n      class={active ? filmItemActive : filmItem}\n      data-snapshot-link\n      data-snapshot-id={snap.id}\n      data-status={snap.status}\n      aria-current={active ? \"true\" : undefined}\n      hx-get={url}\n      hx-target=\"body\"\n      hx-push-url=\"true\"\n    >\n      <Thumbnail src={snapshotImageUrl(project, build, snap, \"image\")} alt=\"\" placeholder=\"…\" />\n      <span class={filmBody}>\n        <span class={filmTitle} title={`${snap.storyTitle} / ${snap.storyName}`}>\n          {snap.storyName}\n        </span>\n        <span class={filmSub}>{snap.storyTitle}</span>\n        <span class={filmStatus}>\n          <span class={statusDots[statusTone(snap.status)]} aria-hidden=\"true\" />\n          {snap.status}\n          {percent ? ` · ${percent}` : \"\"}\n        </span>\n      </span>\n    </a>\n  );\n}\n\n/** Left filmstrip: filter chips plus a thumbnail per snapshot. */\nexport function DiffNav(props: DiffNavProps): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const { project, build, snapshots, selectedId } = props;\n  const progress = reviewProgress(snapshots);\n  const filter = progress.pending > 0 ? \"review\" : \"all\";\n  return (\n    <aside class={filmstrip} aria-label=\"Snapshots\">\n      <div class={filmstripHead}>\n        <Segmented\n          label=\"Filter snapshots\"\n          data-filter-switch\n          items={[\n            {\n              label: `Needs review ${progress.pending}`,\n              value: \"review\",\n              active: filter === \"review\",\n            },\n            { label: `All ${snapshots.length}`, value: \"all\", active: filter === \"all\" },\n            { label: `Done ${progress.done}`, value: \"done\" },\n          ]}\n        />\n      </div>\n      <div data-diff-nav data-current={selectedId} data-filter={filter} class={filteredList}>\n        {snapshots.map((snap): HtmlEscapedString | Promise<HtmlEscapedString> => (\n          <FilmItem\n            key={snap.id}\n            project={project}\n            build={build}\n            snap={snap}\n            active={selectedId === snap.id}\n          />\n        ))}\n      </div>\n    </aside>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;AA6BA,MAAM,eAAe,GAAG;;IAEpB,cAAc;;;;;;;;;;;;AAqBlB,SAAS,SAAS,OAKiC;CACjD,MAAM,EAAE,SAAS,OAAO,MAAM,WAAW;CACzC,MAAM,MAAM,gBAAgB,SAAS,OAAO,KAAK,EAAE;CACnD,MAAM,UAAU,YAAY,IAAI;CAChC,OACE,qBAAC,KAAD;EACE,MAAM;EACN,OAAO,SAAS,iBAAiB;EACjC,sBAAA;EACA,oBAAkB,KAAK;EACvB,eAAa,KAAK;EAClB,gBAAc,SAAS,SAAS,KAAA;EAChC,UAAQ;EACR,aAAU;EACV,eAAY;EATd,UAAA,CAWE,oBAAC,WAAD;GAAW,KAAK,iBAAiB,SAAS,OAAO,MAAM,OAAO;GAAG,KAAI;GAAG,aAAY;EAAK,CAAA,GACzF,qBAAC,QAAD;GAAM,OAAO;GAAb,UAAA;IACE,oBAAC,QAAD;KAAM,OAAO;KAAW,OAAO,GAAG,KAAK,WAAW,KAAK,KAAK;KACzD,UAAA,KAAK;IACF,CAAA;IACN,oBAAC,QAAD;KAAM,OAAO;KAAU,UAAA,KAAK;IAAiB,CAAA;IAC7C,qBAAC,QAAD;KAAM,OAAO;KAAb,UAAA;MACE,oBAAC,QAAD;OAAM,OAAO,WAAW,WAAW,KAAK,MAAM;OAAI,eAAY;MAAQ,CAAA;MACrE,KAAK;MACL,UAAU,MAAM,YAAY;KACzB;;GACF;EACL,CAAA,CAAA;;AAEP;;AAGA,SAAgB,QAAQ,OAAqE;CAC3F,MAAM,EAAE,SAAS,OAAO,WAAW,eAAe;CAClD,MAAM,WAAW,eAAe,SAAS;CACzC,MAAM,SAAS,SAAS,UAAU,IAAI,WAAW;CACjD,OACE,qBAAC,SAAD;EAAO,OAAO;EAAW,cAAW;EAApC,UAAA,CACE,oBAAC,OAAD;GAAK,OAAO;GACV,UAAA,oBAAC,WAAD;IACE,OAAM;IACN,sBAAA;IACA,OAAO;KACL;MACE,OAAO,gBAAgB,SAAS;MAChC,OAAO;MACP,QAAQ,WAAW;KACrB;KACA;MAAE,OAAO,OAAO,UAAU;MAAU,OAAO;MAAO,QAAQ,WAAW;KAAM;KAC3E;MAAE,OAAO,QAAQ,SAAS;MAAQ,OAAO;KAAO;IAClD;GACD,CAAA;EACE,CAAA,GACL,oBAAC,OAAD;GAAK,iBAAA;GAAc,gBAAc;GAAY,eAAa;GAAQ,OAAO;GACtE,UAAA,UAAU,KAAK,SACd,oBAAC,UAAD;IAEW;IACF;IACD;IACN,QAAQ,eAAe,KAAK;GAC7B,GALM,KAAK,EAKX,CACF;EACE,CAAA,CACA;;AAEX"}
+{"version":3,"file":"build-diff-nav.mjs","names":[],"sources":["../../src/pages/build-diff-nav.tsx"],"sourcesContent":["import type { Build, Project, Snapshot } from \"@storyshelf/core/schema\";\nimport type { HtmlEscapedString } from \"hono/utils/html\";\nimport { Segmented, Thumbnail, statusTone } from \"../ui/components.tsx\";\nimport { css } from \"../ui/css.ts\";\nimport {\n  filmBody,\n  filmItem,\n  filmItemActive,\n  filmStatus,\n  filmSub,\n  filmTitle,\n  filmstrip,\n  filmstripHead,\n  filmstripList,\n  statusDots,\n} from \"../ui/styles/review-layout.ts\";\nimport { a11yCarrierOf, a11yFindingsOf } from \"./a11y-violations.tsx\";\nimport {\n  diffPercent,\n  groupSnapshots,\n  isOpenGroup,\n  reviewProgress,\n  snapshotImageUrl,\n  snapshotPageUrl,\n  type SnapshotGroup,\n} from \"./build-diff-model.ts\";\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\n/**\n * The list filters purely in CSS off `data-filter`, so it works before the\n * review script runs. The selected snapshot always stays visible.\n */\nconst filteredList = css`\n  /* filmstrip-filtered */\n  ${filmstripList}\n  &[data-filter=\"review\"]\n    [data-status]:not([data-status=\"new\"]):not([data-status=\"changed\"]):not([aria-current=\"true\"]) {\n    display: none;\n  }\n  &[data-filter=\"a11y\"] [data-snapshot-link]:not([data-a11y]):not([aria-current=\"true\"]) {\n    display: none;\n  }\n  &[data-filter=\"done\"]\n    [data-status]:not([data-status=\"approved\"]):not([data-status=\"rejected\"]):not(\n      [aria-current=\"true\"]\n    ) {\n    display: none;\n  }\n`;\n\n/** Snapshot navigator props for the diff review page. */\nexport interface DiffNavProps {\n  project: Project;\n  build: Build;\n  snapshots: Snapshot[];\n  selectedId?: string;\n}\n\nfunction FilmItem(props: {\n  project: Project;\n  build: Build;\n  group: SnapshotGroup;\n  active: boolean;\n}): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const { project, build, group, active } = props;\n  const snap = group.representative;\n  const url = snapshotPageUrl(project, build, snap.id);\n  const percent = diffPercent(snap);\n  const carrier = a11yCarrierOf(snap, group.members);\n  const a11yCount = a11yFindingsOf(carrier).length;\n  const tags = [\n    group.modeKey === \"desktop\" ? \"\" : group.modeKey,\n    group.members.length > 1 ? `${group.members.length} browsers` : \"\",\n  ].filter((tag) => tag !== \"\");\n  return (\n    <a\n      href={url}\n      class={active ? filmItemActive : filmItem}\n      data-snapshot-link\n      data-snapshot-id={snap.id}\n      data-status={isOpenGroup(group) ? \"changed\" : snap.status}\n      data-a11y={a11yCount > 0 ? \"\" : undefined}\n      aria-current={active ? \"true\" : undefined}\n      hx-get={url}\n      hx-target=\"body\"\n      hx-push-url=\"true\"\n    >\n      <Thumbnail src={snapshotImageUrl(project, build, snap, \"image\")} alt=\"\" placeholder=\"…\" />\n      <span class={filmBody}>\n        <span class={filmTitle} title={`${snap.storyTitle} / ${snap.storyName}`}>\n          {snap.storyName}\n        </span>\n        <span class={filmSub}>{[snap.storyTitle, ...tags].join(\" · \")}</span>\n        <span class={filmStatus}>\n          <span class={statusDots[statusTone(snap.status)]} aria-hidden=\"true\" />\n          {snap.status}\n          {percent ? ` · ${percent}` : \"\"}\n          {a11yCount > 0\n            ? ` · a11y ${a11yCount}${carrier.browser ? ` (${carrier.browser})` : \"\"}`\n            : \"\"}\n        </span>\n      </span>\n    </a>\n  );\n}\n\n/** Left filmstrip: filter chips plus a thumbnail per story/mode (browsers share one entry). */\nexport function DiffNav(props: DiffNavProps): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const { project, build, snapshots, selectedId } = props;\n  const groups = groupSnapshots(snapshots);\n  const progress = reviewProgress(snapshots);\n  const filter = progress.pending > 0 ? \"review\" : \"all\";\n  const withA11y = groups.filter(\n    (group) => a11yFindingsOf(a11yCarrierOf(group.representative, group.members)).length > 0,\n  ).length;\n  return (\n    <aside class={filmstrip} aria-label=\"Snapshots\">\n      <div class={filmstripHead}>\n        <Segmented\n          label=\"Filter snapshots\"\n          data-filter-switch\n          items={[\n            {\n              label: `Needs review ${progress.pending}`,\n              value: \"review\",\n              active: filter === \"review\",\n            },\n            { label: `All ${groups.length}`, value: \"all\", active: filter === \"all\" },\n            { label: `Done ${progress.done}`, value: \"done\" },\n            ...(withA11y > 0 ? [{ label: `A11y ${withA11y}`, value: \"a11y\" }] : []),\n          ]}\n        />\n      </div>\n      <div data-diff-nav data-current={selectedId} data-filter={filter} class={filteredList}>\n        {groups.map((group): HtmlEscapedString | Promise<HtmlEscapedString> => (\n          <FilmItem\n            key={group.key}\n            project={project}\n            build={build}\n            group={group}\n            active={group.members.some((snap) => snap.id === selectedId)}\n          />\n        ))}\n      </div>\n    </aside>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAiCA,MAAM,eAAe,GAAG;;IAEpB,cAAc;;;;;;;;;;;;;;;AAwBlB,SAAS,SAAS,OAKiC;CACjD,MAAM,EAAE,SAAS,OAAO,OAAO,WAAW;CAC1C,MAAM,OAAO,MAAM;CACnB,MAAM,MAAM,gBAAgB,SAAS,OAAO,KAAK,EAAE;CACnD,MAAM,UAAU,YAAY,IAAI;CAChC,MAAM,UAAU,cAAc,MAAM,MAAM,OAAO;CACjD,MAAM,YAAY,eAAe,OAAO,CAAC,CAAC;CAC1C,MAAM,OAAO,CACX,MAAM,YAAY,YAAY,KAAK,MAAM,SACzC,MAAM,QAAQ,SAAS,IAAI,GAAG,MAAM,QAAQ,OAAO,aAAa,EAClE,CAAC,CAAC,QAAQ,QAAQ,QAAQ,EAAE;CAC5B,OACE,qBAAC,KAAD;EACE,MAAM;EACN,OAAO,SAAS,iBAAiB;EACjC,sBAAA;EACA,oBAAkB,KAAK;EACvB,eAAa,YAAY,KAAK,IAAI,YAAY,KAAK;EACnD,aAAW,YAAY,IAAI,KAAK,KAAA;EAChC,gBAAc,SAAS,SAAS,KAAA;EAChC,UAAQ;EACR,aAAU;EACV,eAAY;EAVd,UAAA,CAYE,oBAAC,WAAD;GAAW,KAAK,iBAAiB,SAAS,OAAO,MAAM,OAAO;GAAG,KAAI;GAAG,aAAY;EAAK,CAAA,GACzF,qBAAC,QAAD;GAAM,OAAO;GAAb,UAAA;IACE,oBAAC,QAAD;KAAM,OAAO;KAAW,OAAO,GAAG,KAAK,WAAW,KAAK,KAAK;KACzD,UAAA,KAAK;IACF,CAAA;IACN,oBAAC,QAAD;KAAM,OAAO;KAAU,UAAA,CAAC,KAAK,YAAY,GAAG,IAAI,CAAC,CAAC,KAAK,KAAK;IAAQ,CAAA;IACpE,qBAAC,QAAD;KAAM,OAAO;KAAb,UAAA;MACE,oBAAC,QAAD;OAAM,OAAO,WAAW,WAAW,KAAK,MAAM;OAAI,eAAY;MAAQ,CAAA;MACrE,KAAK;MACL,UAAU,MAAM,YAAY;MAC5B,YAAY,IACT,WAAW,YAAY,QAAQ,UAAU,KAAK,QAAQ,QAAQ,KAAK,OACnE;KACA;;GACF;EACL,CAAA,CAAA;;AAEP;;AAGA,SAAgB,QAAQ,OAAqE;CAC3F,MAAM,EAAE,SAAS,OAAO,WAAW,eAAe;CAClD,MAAM,SAAS,eAAe,SAAS;CACvC,MAAM,WAAW,eAAe,SAAS;CACzC,MAAM,SAAS,SAAS,UAAU,IAAI,WAAW;CACjD,MAAM,WAAW,OAAO,QACrB,UAAU,eAAe,cAAc,MAAM,gBAAgB,MAAM,OAAO,CAAC,CAAC,CAAC,SAAS,CACzF,CAAC,CAAC;CACF,OACE,qBAAC,SAAD;EAAO,OAAO;EAAW,cAAW;EAApC,UAAA,CACE,oBAAC,OAAD;GAAK,OAAO;GACV,UAAA,oBAAC,WAAD;IACE,OAAM;IACN,sBAAA;IACA,OAAO;KACL;MACE,OAAO,gBAAgB,SAAS;MAChC,OAAO;MACP,QAAQ,WAAW;KACrB;KACA;MAAE,OAAO,OAAO,OAAO;MAAU,OAAO;MAAO,QAAQ,WAAW;KAAM;KACxE;MAAE,OAAO,QAAQ,SAAS;MAAQ,OAAO;KAAO;KAChD,GAAI,WAAW,IAAI,CAAC;MAAE,OAAO,QAAQ;MAAY,OAAO;KAAO,CAAC,IAAI,CAAC;IACvE;GACD,CAAA;EACE,CAAA,GACL,oBAAC,OAAD;GAAK,iBAAA;GAAc,gBAAc;GAAY,eAAa;GAAQ,OAAO;GACtE,UAAA,OAAO,KAAK,UACX,oBAAC,UAAD;IAEW;IACF;IACA;IACP,QAAQ,MAAM,QAAQ,MAAM,SAAS,KAAK,OAAO,UAAU;GAC5D,GALM,MAAM,GAKZ,CACF;EACE,CAAA,CACA;;AAEX"}

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

@@ -15,9 +15,13 @@ const SHORTCUTS = [
 		keys: ["k", "←"],
 		action: "Previous snapshot"
 	},
+	{
+		keys: ["[", "]"],
+		action: "Previous / next browser of this story"
+	},
 	{
 		keys: ["a"],
-		action: "Approve"
+		action: "Approve (all browsers of the story and mode)"
 	},
 	{
 		keys: ["r"],

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

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

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

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

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

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

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

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