@storyshelf/app 0.6.2 → 0.8.0

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

@@ -0,0 +1,81 @@
+import "node:path";
+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 { Fragment, jsx, jsxs } from "hono/jsx/jsx-runtime";
+// 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 summary = summariseEnvironmentChanges(props.snapshots);
+	if (!summary) return null;
+	const { count, fields, browserVersion } = summary;
+	const what = `the ${fields.join(", ")} changed${browserVersion ? ` (${browserVersion.from} → ${browserVersion.to})` : ""}`;
+	return props.migrated ? /* @__PURE__ */ jsxs(Alert, {
+		tone: "info",
+		title: "Capture environment changed",
+		children: [
+			count,
+			" ",
+			count === 1 ? "snapshot was" : "snapshots were",
+			" accepted without a pixel diff because ",
+			what,
+			". The same code renders differently here, so a diff would only show the environment. The baselines were updated to match."
+		]
+	}) : /* @__PURE__ */ jsxs(Alert, {
+		tone: "info",
+		title: "Capture environment changed",
+		children: [
+			count,
+			" ",
+			count === 1 ? "snapshot was" : "snapshots were",
+			" compared against a baseline from a different capture environment: ",
+			what,
+			". A difference may come from the environment rather than the code; once the default branch captures in the new environment, a rebuild compares like with like."
+		]
+	});
+}
+/** Per-snapshot note shown above the viewer for a snapshot whose capture environment changed. */
+function EnvironmentChangeSnapshotNotice(props) {
+	const change = environmentChangeOf(props.snapshot);
+	if (!change) return null;
+	const what = change.changed.map((field) => labelOf(field)).join(", ");
+	return props.migrated ? /* @__PURE__ */ jsxs(Alert, {
+		tone: "info",
+		title: "No diff: capture environment changed",
+		children: [
+			"This snapshot was not compared pixel by pixel. What changed: ",
+			what,
+			"."
+		]
+	}) : /* @__PURE__ */ jsxs(Alert, {
+		tone: "info",
+		title: "Capture environment changed",
+		children: [
+			"The baseline was captured in a different environment (",
+			what,
+			"), so a difference may come from the environment rather than the code."
+		]
+	});
+}
+/** Build-level notices above the review grid: stale baselines and environment migrations. */
+function ReviewNotices(props) {
+	const { project, build, snapshots, drifted, canReview } = props;
+	const staleCount = Object.keys(drifted).length;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [staleCount > 0 ? /* @__PURE__ */ jsx(StaleBaselineNotice, {
+		project,
+		build,
+		staleCount,
+		canReview
+	}) : null, /* @__PURE__ */ jsx(EnvironmentChangeNotice, {
+		snapshots,
+		migrated: build.isDefault
+	})] });
+}
+export { EnvironmentChangeNotice, EnvironmentChangeSnapshotNotice, ReviewNotices };
+
+//# sourceMappingURL=build-diff-environment.mjs.map

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

@@ -0,0 +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"}

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

@@ -5,10 +5,11 @@ import { Button } from "../ui/buttons.mjs";
 import { Badge, Meta, statusTone } from "../ui/feedback.mjs";
 import { Avatar } from "../ui/avatar.mjs";
 import { Progress } from "../ui/progress.mjs";
-import { headerActions, headerMain, headerMeta, headerProgress, headerSide, headerTitle, reviewHeader } from "../ui/styles/review-layout.mjs";
+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}`;
@@ -46,7 +47,8 @@ function BulkActions({ project, build, pendingCount }) {
 		})
 	})] });
 }
-function HeaderTitle({ build }) {
+function HeaderTitle({ build, snapshots }) {
+	const a11y = a11ySummaryOf(snapshots);
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("h1", {
 		class: headerTitle,
 		children: [
@@ -70,7 +72,20 @@ function HeaderTitle({ build }) {
 				size: "sm"
 			}) : null,
 			build.authorName ? /* @__PURE__ */ jsx("span", { children: build.authorName }) : null,
-			/* @__PURE__ */ jsx("span", { children: build.message ?? "No message" })
+			/* @__PURE__ */ jsx("span", { children: build.message ?? "No message" }),
+			a11y.findings > 0 ? /* @__PURE__ */ jsxs(Badge, {
+				tone: "warning",
+				icon: true,
+				children: [
+					"a11y ",
+					a11y.findings,
+					" (does not block)"
+				]
+			}) : null,
+			a11y.unavailable > 0 ? /* @__PURE__ */ jsx(Badge, {
+				tone: "neutral",
+				children: a11yUnavailableNote(a11y.unavailable)
+			}) : null
 		]
 	})] });
 }
@@ -92,7 +107,10 @@ function DiffHeader(props) {
 		class: reviewHeader,
 		children: [/* @__PURE__ */ jsx("div", {
 			class: headerMain,
-			children: /* @__PURE__ */ jsx(HeaderTitle, { build })
+			children: /* @__PURE__ */ jsx(HeaderTitle, {
+				build,
+				snapshots
+			})
 		}), /* @__PURE__ */ jsxs("div", {
 			class: headerSide,
 			children: [/* @__PURE__ */ jsx(HeaderProgress, { snapshots }), /* @__PURE__ */ jsxs("div", {
@@ -111,7 +129,6 @@ function DiffHeader(props) {
 		})]
 	});
 }
-//#endregion
 export { DiffHeader };
 
 //# sourceMappingURL=build-diff-header.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"build-diff-header.mjs","names":[],"sources":["../../src/pages/build-diff-header.tsx"],"sourcesContent":["import type { Build, Project, Snapshot } from \"@storyshelf/core/schema\";\nimport type { HtmlEscapedString } from \"hono/utils/html\";\nimport { Avatar, Badge, Button, Meta, Progress, statusTone } from \"../ui/components.tsx\";\nimport {\n  headerActions,\n  headerMain,\n  headerMeta,\n  headerProgress,\n  headerSide,\n  headerTitle,\n  reviewHeader,\n} from \"../ui/styles/review-layout.ts\";\nimport { reviewProgress } from \"./build-diff-model.ts\";\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\n/** Header props for the diff review page. */\nexport interface DiffHeaderProps {\n  project: Project;\n  build: Build;\n  snapshots: Snapshot[];\n  pendingCount: number;\n  canReview: boolean;\n}\n\ninterface BulkProps {\n  project: Project;\n  build: Build;\n  pendingCount: number;\n}\n\n/** Approve-all / reject-all bulk actions (each asks for confirmation). */\nfunction BulkActions({\n  project,\n  build,\n  pendingCount,\n}: BulkProps): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const base = `/api/v1/projects/${project.slug}/builds/${build.id}`;\n  return (\n    <>\n      <form\n        method=\"post\"\n        action={`${base}/approve-all`}\n        hx-post={`${base}/approve-all`}\n        hx-target=\"body\"\n        hx-confirm={`Approve all ${pendingCount} remaining changes?`}\n        data-toast={`Approved ${pendingCount} ${pendingCount === 1 ? \"change\" : \"changes\"}`}\n      >\n        <Button variant=\"primary\" size=\"sm\" type=\"submit\" icon=\"check\">\n          Approve all ({pendingCount})\n        </Button>\n      </form>\n      <form\n        method=\"post\"\n        action={`${base}/reject-all`}\n        hx-post={`${base}/reject-all`}\n        hx-target=\"body\"\n        hx-confirm={`Reject all ${pendingCount} remaining changes?`}\n        data-toast={`Rejected ${pendingCount} ${pendingCount === 1 ? \"change\" : \"changes\"}`}\n        data-toast-tone=\"warning\"\n      >\n        <Button variant=\"secondary\" size=\"sm\" type=\"submit\">\n          Reject all\n        </Button>\n      </form>\n    </>\n  );\n}\n\nfunction HeaderTitle({ build }: { build: Build }): HtmlEscapedString | Promise<HtmlEscapedString> {\n  return (\n    <>\n      <h1 class={headerTitle}>\n        <span>{build.gitBranch}</span>\n        <Meta as=\"span\" mono>\n          {build.gitSha.slice(0, 7)}\n        </Meta>\n        <Badge tone={statusTone(build.status)} icon>\n          {build.status}\n        </Badge>\n      </h1>\n      <p class={headerMeta}>\n        {build.authorName ? <Avatar name={build.authorName} size=\"sm\" /> : null}\n        {build.authorName ? <span>{build.authorName}</span> : null}\n        <span>{build.message ?? \"No message\"}</span>\n      </p>\n    </>\n  );\n}\n\nfunction HeaderProgress({\n  snapshots,\n}: {\n  snapshots: Snapshot[];\n}): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const progress = reviewProgress(snapshots);\n  return (\n    <div class={headerProgress}>\n      <span>\n        {progress.reviewable === 0\n          ? \"No changes to review\"\n          : `${progress.done} of ${progress.reviewable} reviewed`}\n      </span>\n      <Progress value={progress.done} max={progress.reviewable} label=\"Review progress\" />\n    </div>\n  );\n}\n\n/** Compact build summary with review progress and bulk actions. */\nexport function DiffHeader(props: DiffHeaderProps): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const { project, build, snapshots, pendingCount, canReview } = props;\n  return (\n    <header class={reviewHeader}>\n      <div class={headerMain}>\n        <HeaderTitle build={build} />\n      </div>\n      <div class={headerSide}>\n        <HeaderProgress snapshots={snapshots} />\n        <div class={headerActions}>\n          <Button\n            variant=\"secondary\"\n            size=\"sm\"\n            href={`/projects/${project.slug}/builds/${build.id}`}\n          >\n            Build overview\n          </Button>\n          {canReview && pendingCount > 0 ? (\n            <BulkActions project={project} build={build} pendingCount={pendingCount} />\n          ) : null}\n        </div>\n      </div>\n    </header>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAgCA,SAAS,YAAY,EACnB,SACA,OACA,gBAC4D;CAC5D,MAAM,OAAO,oBAAoB,QAAQ,KAAK,UAAU,MAAM;CAC9D,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD;EACE,QAAO;EACP,QAAQ,GAAG,KAAK;EAChB,WAAS,GAAG,KAAK;EACjB,aAAU;EACV,cAAY,eAAe,aAAa;EACxC,cAAY,YAAY,aAAa,GAAG,iBAAiB,IAAI,WAAW;EAExE,UAAA,qBAAC,QAAD;GAAQ,SAAQ;GAAU,MAAK;GAAK,MAAK;GAAS,MAAK;GAAvD,UAAA;IAA+D;IAC/C;IAAa;GACrB;;CACJ,CAAA,GACN,oBAAC,QAAD;EACE,QAAO;EACP,QAAQ,GAAG,KAAK;EAChB,WAAS,GAAG,KAAK;EACjB,aAAU;EACV,cAAY,cAAc,aAAa;EACvC,cAAY,YAAY,aAAa,GAAG,iBAAiB,IAAI,WAAW;EACxE,mBAAgB;EAEhB,UAAA,oBAAC,QAAD;GAAQ,SAAQ;GAAY,MAAK;GAAK,MAAK;GAAS,UAAA;EAE5C,CAAA;CACJ,CAAA,CACN,EAAA,CAAA;AAEN;AAEA,SAAS,YAAY,EAAE,SAA2E;CAChG,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,qBAAC,MAAD;EAAI,OAAO;EAAX,UAAA;GACE,oBAAC,QAAD,EAAA,UAAO,MAAM,UAAgB,CAAA;GAC7B,oBAAC,MAAD;IAAM,IAAG;IAAO,MAAA;IACb,UAAA,MAAM,OAAO,MAAM,GAAG,CAAC;GACpB,CAAA;GACN,oBAAC,OAAD;IAAO,MAAM,WAAW,MAAM,MAAM;IAAG,MAAA;IACpC,UAAA,MAAM;GACF,CAAA;EACL;CACJ,CAAA,GAAA,qBAAC,KAAD;EAAG,OAAO;EAAV,UAAA;GACG,MAAM,aAAa,oBAAC,QAAD;IAAQ,MAAM,MAAM;IAAY,MAAK;GAAM,CAAA,IAAI;GAClE,MAAM,aAAa,oBAAC,QAAD,EAAA,UAAO,MAAM,WAAiB,CAAA,IAAI;GACtD,oBAAC,QAAD,EAAA,UAAO,MAAM,WAAW,aAAmB,CAAA;EAC1C;CACH,CAAA,CAAA,EAAA,CAAA;AAEN;AAEA,SAAS,eAAe,EACtB,aAGiD;CACjD,MAAM,WAAW,eAAe,SAAS;CACzC,OACE,qBAAC,OAAD;EAAK,OAAO;EAAZ,UAAA,CACE,oBAAC,QAAD,EAAA,UACG,SAAS,eAAe,IACrB,yBACA,GAAG,SAAS,KAAK,MAAM,SAAS,WAAW,WAC3C,CAAA,GACN,oBAAC,UAAD;GAAU,OAAO,SAAS;GAAM,KAAK,SAAS;GAAY,OAAM;EAAmB,CAAA,CAChF;;AAET;;AAGA,SAAgB,WAAW,OAAwE;CACjG,MAAM,EAAE,SAAS,OAAO,WAAW,cAAc,cAAc;CAC/D,OACE,qBAAC,UAAD;EAAQ,OAAO;EAAf,UAAA,CACE,oBAAC,OAAD;GAAK,OAAO;GACV,UAAA,oBAAC,aAAD,EAAoB,MAAQ,CAAA;EACzB,CAAA,GACL,qBAAC,OAAD;GAAK,OAAO;GAAZ,UAAA,CACE,oBAAC,gBAAD,EAA2B,UAAY,CAAA,GACvC,qBAAC,OAAD;IAAK,OAAO;IAAZ,UAAA,CACE,oBAAC,QAAD;KACE,SAAQ;KACR,MAAK;KACL,MAAM,aAAa,QAAQ,KAAK,UAAU,MAAM;KACjD,UAAA;IAEO,CAAA,GACP,aAAa,eAAe,IAC3B,oBAAC,aAAD;KAAsB;KAAgB;KAAqB;IAAe,CAAA,IACxE,IACD;GACF,CAAA,CAAA;EACC,CAAA,CAAA;;AAEZ"}
+{"version":3,"file":"build-diff-header.mjs","names":[],"sources":["../../src/pages/build-diff-header.tsx"],"sourcesContent":["import type { Build, Project, Snapshot } from \"@storyshelf/core/schema\";\nimport type { HtmlEscapedString } from \"hono/utils/html\";\nimport { Avatar, Badge, Button, Meta, Progress, statusTone } from \"../ui/components.tsx\";\nimport {\n  headerActions,\n  headerMain,\n  headerMeta,\n  headerProgress,\n  headerSide,\n  headerTitle,\n  reviewHeader,\n} from \"../ui/styles/review-layout.ts\";\nimport { a11ySummaryOf, a11yUnavailableNote } from \"./a11y-violations.tsx\";\nimport { reviewProgress } from \"./build-diff-model.ts\";\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\n/** Header props for the diff review page. */\nexport interface DiffHeaderProps {\n  project: Project;\n  build: Build;\n  snapshots: Snapshot[];\n  pendingCount: number;\n  canReview: boolean;\n}\n\ninterface BulkProps {\n  project: Project;\n  build: Build;\n  pendingCount: number;\n}\n\n/** Approve-all / reject-all bulk actions (each asks for confirmation). */\nfunction BulkActions({\n  project,\n  build,\n  pendingCount,\n}: BulkProps): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const base = `/api/v1/projects/${project.slug}/builds/${build.id}`;\n  return (\n    <>\n      <form\n        method=\"post\"\n        action={`${base}/approve-all`}\n        hx-post={`${base}/approve-all`}\n        hx-target=\"body\"\n        hx-confirm={`Approve all ${pendingCount} remaining changes?`}\n        data-toast={`Approved ${pendingCount} ${pendingCount === 1 ? \"change\" : \"changes\"}`}\n      >\n        <Button variant=\"primary\" size=\"sm\" type=\"submit\" icon=\"check\">\n          Approve all ({pendingCount})\n        </Button>\n      </form>\n      <form\n        method=\"post\"\n        action={`${base}/reject-all`}\n        hx-post={`${base}/reject-all`}\n        hx-target=\"body\"\n        hx-confirm={`Reject all ${pendingCount} remaining changes?`}\n        data-toast={`Rejected ${pendingCount} ${pendingCount === 1 ? \"change\" : \"changes\"}`}\n        data-toast-tone=\"warning\"\n      >\n        <Button variant=\"secondary\" size=\"sm\" type=\"submit\">\n          Reject all\n        </Button>\n      </form>\n    </>\n  );\n}\n\nfunction HeaderTitle({\n  build,\n  snapshots,\n}: {\n  build: Build;\n  snapshots: Snapshot[];\n}): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const a11y = a11ySummaryOf(snapshots);\n  return (\n    <>\n      <h1 class={headerTitle}>\n        <span>{build.gitBranch}</span>\n        <Meta as=\"span\" mono>\n          {build.gitSha.slice(0, 7)}\n        </Meta>\n        <Badge tone={statusTone(build.status)} icon>\n          {build.status}\n        </Badge>\n      </h1>\n      <p class={headerMeta}>\n        {build.authorName ? <Avatar name={build.authorName} size=\"sm\" /> : null}\n        {build.authorName ? <span>{build.authorName}</span> : null}\n        <span>{build.message ?? \"No message\"}</span>\n        {a11y.findings > 0 ? (\n          <Badge tone=\"warning\" icon>\n            a11y {a11y.findings} (does not block)\n          </Badge>\n        ) : null}\n        {a11y.unavailable > 0 ? (\n          <Badge tone=\"neutral\">{a11yUnavailableNote(a11y.unavailable)}</Badge>\n        ) : null}\n      </p>\n    </>\n  );\n}\n\nfunction HeaderProgress({\n  snapshots,\n}: {\n  snapshots: Snapshot[];\n}): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const progress = reviewProgress(snapshots);\n  return (\n    <div class={headerProgress}>\n      <span>\n        {progress.reviewable === 0\n          ? \"No changes to review\"\n          : `${progress.done} of ${progress.reviewable} reviewed`}\n      </span>\n      <Progress value={progress.done} max={progress.reviewable} label=\"Review progress\" />\n    </div>\n  );\n}\n\n/** Compact build summary with review progress and bulk actions. */\nexport function DiffHeader(props: DiffHeaderProps): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const { project, build, snapshots, pendingCount, canReview } = props;\n  return (\n    <header class={reviewHeader}>\n      <div class={headerMain}>\n        <HeaderTitle build={build} snapshots={snapshots} />\n      </div>\n      <div class={headerSide}>\n        <HeaderProgress snapshots={snapshots} />\n        <div class={headerActions}>\n          <Button\n            variant=\"secondary\"\n            size=\"sm\"\n            href={`/projects/${project.slug}/builds/${build.id}`}\n          >\n            Build overview\n          </Button>\n          {canReview && pendingCount > 0 ? (\n            <BulkActions project={project} build={build} pendingCount={pendingCount} />\n          ) : null}\n        </div>\n      </div>\n    </header>\n  );\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,112 @@
+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";
+// 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;
+}
+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

@@ -1,35 +1,75 @@
 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"]);
-/** 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,29 @@ function snapshotPageUrl(project, build, snapshotId) {
 function snapshotImageUrl(project, build, snapshot, kind) {
 	return `/api/v1/projects/${project.slug}/builds/${build.id}/snapshots/${snapshot.id}/${kind}`;
 }
-//#endregion
-export { diffPercent, neighbours, reviewProgress, snapshotImageUrl, snapshotPageUrl };
+/** 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}`;
+}
+/**
+* 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. */\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\";\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

@@ -5,10 +5,11 @@ 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
+// 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.
@@ -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,16 +123,15 @@ 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))
 		})]
 	});
 }
-//#endregion
 export { DiffNav };
 
 //# sourceMappingURL=build-diff-nav.mjs.map

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