@storyshelf/app 0.5.3

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

@@ -0,0 +1,104 @@
+import "node:path";
+import "node:url";
+import.meta.url;
+import { Button } from "../ui/buttons.mjs";
+import { Badge, Meta } from "../ui/feedback.mjs";
+import { TextareaField } from "../ui/forms.mjs";
+import { Card, SectionTitle } from "../ui/layout.mjs";
+import { VStack } from "../ui/stacks.mjs";
+import { reviewComment, reviewCommentActions, reviewCommentBody, reviewCommentHead } from "../ui/styles/review.mjs";
+import { jsx, jsxs } from "hono/jsx/jsx-runtime";
+//#region src/pages/build-diff-comments.tsx
+/** One comment with an optional resolve action. */
+function CommentCard(props) {
+	const { project, build, comment, canReview } = props;
+	return /* @__PURE__ */ jsxs("div", {
+		class: reviewComment,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				class: reviewCommentHead,
+				children: [
+					/* @__PURE__ */ jsx("strong", { children: comment.userId ?? "anonymous" }),
+					/* @__PURE__ */ jsxs("span", { children: ["· ", new Date(comment.createdAt).toLocaleString()] }),
+					comment.resolved ? /* @__PURE__ */ jsx(Badge, {
+						tone: "success",
+						children: "resolved"
+					}) : null
+				]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				class: reviewCommentBody,
+				children: comment.body
+			}),
+			!comment.resolved && canReview ? /* @__PURE__ */ jsx("form", {
+				method: "post",
+				action: `/api/v1/projects/${project.slug}/builds/${build.id}/comments/${comment.id}/resolve`,
+				"hx-post": `/api/v1/projects/${project.slug}/builds/${build.id}/comments/${comment.id}/resolve`,
+				"hx-target": "body",
+				class: reviewCommentActions,
+				children: /* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					size: "sm",
+					type: "submit",
+					children: "Mark resolved"
+				})
+			}) : null
+		]
+	}, comment.id);
+}
+/** Reply form scoped to the selected snapshot. */
+function CommentForm(props) {
+	const { project, build, selectedId } = props;
+	return /* @__PURE__ */ jsx("form", {
+		method: "post",
+		action: `/api/v1/projects/${project.slug}/builds/${build.id}/comments`,
+		"hx-post": `/api/v1/projects/${project.slug}/builds/${build.id}/comments`,
+		"hx-target": "body",
+		class: "mt-1",
+		children: /* @__PURE__ */ jsxs(VStack, { children: [
+			/* @__PURE__ */ jsx("input", {
+				type: "hidden",
+				name: "snapshotId",
+				value: selectedId
+			}),
+			/* @__PURE__ */ jsx(TextareaField, {
+				label: "Add comment",
+				name: "body",
+				rows: 3,
+				required: true,
+				placeholder: "Leave feedback on this snapshot…"
+			}),
+			/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button, {
+				variant: "primary",
+				type: "submit",
+				children: "Comment"
+			}) })
+		] })
+	});
+}
+/** Threaded comments for the selected snapshot plus the reply form. */
+function DiffComments(props) {
+	const { project, build, selectedId, comments, canReview } = props;
+	const visible = comments.filter((c) => !c.snapshotId || c.snapshotId === selectedId);
+	return /* @__PURE__ */ jsxs(Card, { children: [
+		/* @__PURE__ */ jsx(SectionTitle, {
+			level: 3,
+			children: "Comments"
+		}),
+		/* @__PURE__ */ jsxs(VStack, { children: [visible.map((comment) => /* @__PURE__ */ jsx(CommentCard, {
+			project,
+			build,
+			comment,
+			canReview
+		}, comment.id)), visible.length === 0 ? /* @__PURE__ */ jsx(Meta, { children: "No comments on this snapshot." }) : null] }),
+		/* @__PURE__ */ jsx(CommentForm, {
+			project,
+			build,
+			selectedId
+		})
+	] });
+}
+//#endregion
+export { DiffComments };
+
+//# sourceMappingURL=build-diff-comments.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"build-diff-comments.mjs","names":[],"sources":["../../src/pages/build-diff-comments.tsx"],"sourcesContent":["import type { Build } from \"@storyshelf/core/schema\";\nimport type { Comment } from \"@storyshelf/core/schema\";\nimport type { Project } from \"@storyshelf/core/schema\";\nimport type { HtmlEscapedString } from \"hono/utils/html\";\nimport {\n  Badge,\n  Button,\n  Card,\n  Meta,\n  SectionTitle,\n  TextareaField,\n  VStack,\n} from \"../ui/components.tsx\";\nimport {\n  reviewComment,\n  reviewCommentActions,\n  reviewCommentBody,\n  reviewCommentHead,\n} from \"../ui/styles/review.ts\";\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\n/** Snapshot comment thread props. */\nexport interface DiffCommentsProps {\n  project: Project;\n  build: Build;\n  selectedId: string;\n  comments: Comment[];\n  canReview: boolean;\n}\n\ninterface CommentCardProps {\n  project: Project;\n  build: Build;\n  comment: Comment;\n  canReview: boolean;\n}\n\n/** One comment with an optional resolve action. */\nfunction CommentCard(props: CommentCardProps): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const { project, build, comment, canReview } = props;\n  return (\n    <div key={comment.id} class={reviewComment}>\n      <div class={reviewCommentHead}>\n        <strong>{comment.userId ?? \"anonymous\"}</strong>\n        <span>· {new Date(comment.createdAt).toLocaleString()}</span>\n        {comment.resolved ? <Badge tone=\"success\">resolved</Badge> : null}\n      </div>\n      <p class={reviewCommentBody}>{comment.body}</p>\n      {!comment.resolved && canReview ? (\n        <form\n          method=\"post\"\n          action={`/api/v1/projects/${project.slug}/builds/${build.id}/comments/${comment.id}/resolve`}\n          hx-post={`/api/v1/projects/${project.slug}/builds/${build.id}/comments/${comment.id}/resolve`}\n          hx-target=\"body\"\n          class={reviewCommentActions}\n        >\n          <Button variant=\"ghost\" size=\"sm\" type=\"submit\">\n            Mark resolved\n          </Button>\n        </form>\n      ) : null}\n    </div>\n  );\n}\n\ninterface CommentFormProps {\n  project: Project;\n  build: Build;\n  selectedId: string;\n}\n\n/** Reply form scoped to the selected snapshot. */\nfunction CommentForm(props: CommentFormProps): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const { project, build, selectedId } = props;\n  return (\n    <form\n      method=\"post\"\n      action={`/api/v1/projects/${project.slug}/builds/${build.id}/comments`}\n      hx-post={`/api/v1/projects/${project.slug}/builds/${build.id}/comments`}\n      hx-target=\"body\"\n      class=\"mt-1\"\n    >\n      <VStack>\n        <input type=\"hidden\" name=\"snapshotId\" value={selectedId} />\n        <TextareaField\n          label=\"Add comment\"\n          name=\"body\"\n          rows={3}\n          required\n          placeholder=\"Leave feedback on this snapshot…\"\n        />\n        <div>\n          <Button variant=\"primary\" type=\"submit\">\n            Comment\n          </Button>\n        </div>\n      </VStack>\n    </form>\n  );\n}\n\n/** Threaded comments for the selected snapshot plus the reply form. */\nexport function DiffComments(\n  props: DiffCommentsProps,\n): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const { project, build, selectedId, comments, canReview } = props;\n  const visible = comments.filter((c) => !c.snapshotId || c.snapshotId === selectedId);\n  return (\n    <Card>\n      <SectionTitle level={3}>Comments</SectionTitle>\n      <VStack>\n        {visible.map((comment): HtmlEscapedString | Promise<HtmlEscapedString> => (\n          <CommentCard\n            key={comment.id}\n            project={project}\n            build={build}\n            comment={comment}\n            canReview={canReview}\n          />\n        ))}\n        {visible.length === 0 ? <Meta>No comments on this snapshot.</Meta> : null}\n      </VStack>\n\n      <CommentForm project={project} build={build} selectedId={selectedId} />\n    </Card>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAuCA,SAAS,YAAY,OAAyE;CAC5F,MAAM,EAAE,SAAS,OAAO,SAAS,cAAc;CAC/C,OACE,qBAAC,OAAD;EAAsB,OAAO;EAA7B,UAAA;GACE,qBAAC,OAAD;IAAK,OAAO;IAAZ,UAAA;KACE,oBAAC,UAAD,EAAA,UAAS,QAAQ,UAAU,YAAoB,CAAA;KAC/C,qBAAC,QAAD,EAAA,UAAA,CAAM,MAAG,IAAI,KAAK,QAAQ,SAAS,CAAC,CAAC,eAAe,CAAQ,EAAA,CAAA;KAC3D,QAAQ,WAAW,oBAAC,OAAD;MAAO,MAAK;MAAU,UAAA;KAAe,CAAA,IAAI;IAC1D;;GACL,oBAAC,KAAD;IAAG,OAAO;IAAoB,UAAA,QAAQ;GAAQ,CAAA;GAC7C,CAAC,QAAQ,YAAY,YACpB,oBAAC,QAAD;IACE,QAAO;IACP,QAAQ,oBAAoB,QAAQ,KAAK,UAAU,MAAM,GAAG,YAAY,QAAQ,GAAG;IACnF,WAAS,oBAAoB,QAAQ,KAAK,UAAU,MAAM,GAAG,YAAY,QAAQ,GAAG;IACpF,aAAU;IACV,OAAO;IAEP,UAAA,oBAAC,QAAD;KAAQ,SAAQ;KAAQ,MAAK;KAAK,MAAK;KAAS,UAAA;IAExC,CAAA;GACJ,CAAA,IACJ;EACD;CApBK,GAAA,QAAQ,EAoBb;AAET;;AASA,SAAS,YAAY,OAAyE;CAC5F,MAAM,EAAE,SAAS,OAAO,eAAe;CACvC,OACE,oBAAC,QAAD;EACE,QAAO;EACP,QAAQ,oBAAoB,QAAQ,KAAK,UAAU,MAAM,GAAG;EAC5D,WAAS,oBAAoB,QAAQ,KAAK,UAAU,MAAM,GAAG;EAC7D,aAAU;EACV,OAAM;EAEN,UAAA,qBAAC,QAAD,EAAA,UAAA;GACE,oBAAC,SAAD;IAAO,MAAK;IAAS,MAAK;IAAa,OAAO;GAAa,CAAA;GAC3D,oBAAC,eAAD;IACE,OAAM;IACN,MAAK;IACL,MAAM;IACN,UAAA;IACA,aAAY;GACb,CAAA;GACD,oBAAC,OAAD,EAAA,UACE,oBAAC,QAAD;IAAQ,SAAQ;IAAU,MAAK;IAAS,UAAA;GAEhC,CAAA,EACL,CAAA;EACC,EAAA,CAAA;CACJ,CAAA;AAEV;;AAGA,SAAgB,aACd,OACgD;CAChD,MAAM,EAAE,SAAS,OAAO,YAAY,UAAU,cAAc;CAC5D,MAAM,UAAU,SAAS,QAAQ,MAAM,CAAC,EAAE,cAAc,EAAE,eAAe,UAAU;CACnF,OACE,qBAAC,MAAD,EAAA,UAAA;EACE,oBAAC,cAAD;GAAc,OAAO;GAAG,UAAA;EAAsB,CAAA;EAC9C,qBAAC,QAAD,EAAA,UAAA,CACG,QAAQ,KAAK,YACZ,oBAAC,aAAD;GAEW;GACF;GACE;GACE;EACZ,GALM,QAAQ,EAKd,CACF,GACA,QAAQ,WAAW,IAAI,oBAAC,MAAD,EAAA,UAAM,gCAAmC,CAAA,IAAI,IAC/D,EAAA,CAAA;EAER,oBAAC,aAAD;GAAsB;GAAgB;GAAmB;EAAa,CAAA;CAClE,EAAA,CAAA;AAEV"}

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

@@ -0,0 +1,117 @@
+import "node:path";
+import "node:url";
+import.meta.url;
+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 { reviewProgress } from "./build-diff-model.mjs";
+import { Fragment, jsx, jsxs } from "hono/jsx/jsx-runtime";
+//#region 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}`;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("form", {
+		method: "post",
+		action: `${base}/approve-all`,
+		"hx-post": `${base}/approve-all`,
+		"hx-target": "body",
+		"hx-confirm": `Approve all ${pendingCount} remaining changes?`,
+		"data-toast": `Approved ${pendingCount} ${pendingCount === 1 ? "change" : "changes"}`,
+		children: /* @__PURE__ */ jsxs(Button, {
+			variant: "primary",
+			size: "sm",
+			type: "submit",
+			icon: "check",
+			children: [
+				"Approve all (",
+				pendingCount,
+				")"
+			]
+		})
+	}), /* @__PURE__ */ jsx("form", {
+		method: "post",
+		action: `${base}/reject-all`,
+		"hx-post": `${base}/reject-all`,
+		"hx-target": "body",
+		"hx-confirm": `Reject all ${pendingCount} remaining changes?`,
+		"data-toast": `Rejected ${pendingCount} ${pendingCount === 1 ? "change" : "changes"}`,
+		"data-toast-tone": "warning",
+		children: /* @__PURE__ */ jsx(Button, {
+			variant: "secondary",
+			size: "sm",
+			type: "submit",
+			children: "Reject all"
+		})
+	})] });
+}
+function HeaderTitle({ build }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("h1", {
+		class: headerTitle,
+		children: [
+			/* @__PURE__ */ jsx("span", { children: build.gitBranch }),
+			/* @__PURE__ */ jsx(Meta, {
+				as: "span",
+				mono: true,
+				children: build.gitSha.slice(0, 7)
+			}),
+			/* @__PURE__ */ jsx(Badge, {
+				tone: statusTone(build.status),
+				icon: true,
+				children: build.status
+			})
+		]
+	}), /* @__PURE__ */ jsxs("p", {
+		class: headerMeta,
+		children: [
+			build.authorName ? /* @__PURE__ */ jsx(Avatar, {
+				name: build.authorName,
+				size: "sm"
+			}) : null,
+			build.authorName ? /* @__PURE__ */ jsx("span", { children: build.authorName }) : null,
+			/* @__PURE__ */ jsx("span", { children: build.message ?? "No message" })
+		]
+	})] });
+}
+function HeaderProgress({ snapshots }) {
+	const progress = reviewProgress(snapshots);
+	return /* @__PURE__ */ jsxs("div", {
+		class: headerProgress,
+		children: [/* @__PURE__ */ jsx("span", { children: progress.reviewable === 0 ? "No changes to review" : `${progress.done} of ${progress.reviewable} reviewed` }), /* @__PURE__ */ jsx(Progress, {
+			value: progress.done,
+			max: progress.reviewable,
+			label: "Review progress"
+		})]
+	});
+}
+/** Compact build summary with review progress and bulk actions. */
+function DiffHeader(props) {
+	const { project, build, snapshots, pendingCount, canReview } = props;
+	return /* @__PURE__ */ jsxs("header", {
+		class: reviewHeader,
+		children: [/* @__PURE__ */ jsx("div", {
+			class: headerMain,
+			children: /* @__PURE__ */ jsx(HeaderTitle, { build })
+		}), /* @__PURE__ */ jsxs("div", {
+			class: headerSide,
+			children: [/* @__PURE__ */ jsx(HeaderProgress, { snapshots }), /* @__PURE__ */ jsxs("div", {
+				class: headerActions,
+				children: [/* @__PURE__ */ jsx(Button, {
+					variant: "secondary",
+					size: "sm",
+					href: `/projects/${project.slug}/builds/${build.id}`,
+					children: "Build overview"
+				}), canReview && pendingCount > 0 ? /* @__PURE__ */ jsx(BulkActions, {
+					project,
+					build,
+					pendingCount
+				}) : null]
+			})]
+		})]
+	});
+}
+//#endregion
+export { DiffHeader };
+
+//# sourceMappingURL=build-diff-header.mjs.map

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

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

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

@@ -0,0 +1,48 @@
+import "node:path";
+import "node:url";
+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. */
+function reviewProgress(snapshots) {
+	const pending = snapshots.filter((snap) => OPEN.has(snap.status)).length;
+	const done = snapshots.filter((snap) => DECIDED.has(snap.status)).length;
+	return {
+		reviewable: pending + done,
+		done,
+		pending
+	};
+}
+/** Previous/next snapshot around the selected one. */
+function neighbours(snapshots, selectedId) {
+	const index = snapshots.findIndex((snap) => snap.id === selectedId);
+	if (index === -1) return {
+		position: 0,
+		total: snapshots.length,
+		prev: null,
+		next: null
+	};
+	return {
+		position: index + 1,
+		total: snapshots.length,
+		prev: snapshots[index - 1] ?? null,
+		next: snapshots[index + 1] ?? null
+	};
+}
+/** 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)}%`;
+}
+/** Review-page URL for one snapshot. */
+function snapshotPageUrl(project, build, snapshotId) {
+	return `/projects/${project.slug}/builds/${build.id}/diff?snapshot=${snapshotId}`;
+}
+/** API URL of a snapshot image (`image`), its diff overlay, or its baseline. */
+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 };
+
+//# sourceMappingURL=build-diff-model.mjs.map

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

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

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

@@ -0,0 +1,122 @@
+import "node:path";
+import "node:url";
+import.meta.url;
+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 { 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
+/**
+* The list filters purely in CSS off `data-filter`, so it works before the
+* review script runs. The selected snapshot always stays visible.
+*/
+const filteredList = css`
+  /* filmstrip-filtered */
+  ${filmstripList}
+  &[data-filter="review"]
+    [data-status]:not([data-status="new"]):not([data-status="changed"]):not([aria-current="true"]) {
+    display: none;
+  }
+  &[data-filter="done"]
+    [data-status]:not([data-status="approved"]):not([data-status="rejected"]):not(
+      [aria-current="true"]
+    ) {
+    display: none;
+  }
+`;
+function FilmItem(props) {
+	const { project, build, snap, active } = props;
+	const url = snapshotPageUrl(project, build, snap.id);
+	const percent = diffPercent(snap);
+	return /* @__PURE__ */ jsxs("a", {
+		href: url,
+		class: active ? filmItemActive : filmItem,
+		"data-snapshot-link": true,
+		"data-snapshot-id": snap.id,
+		"data-status": snap.status,
+		"aria-current": active ? "true" : void 0,
+		"hx-get": url,
+		"hx-target": "body",
+		"hx-push-url": "true",
+		children: [/* @__PURE__ */ jsx(Thumbnail, {
+			src: snapshotImageUrl(project, build, snap, "image"),
+			alt: "",
+			placeholder: "…"
+		}), /* @__PURE__ */ jsxs("span", {
+			class: filmBody,
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					class: filmTitle,
+					title: `${snap.storyTitle} / ${snap.storyName}`,
+					children: snap.storyName
+				}),
+				/* @__PURE__ */ jsx("span", {
+					class: filmSub,
+					children: snap.storyTitle
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					class: filmStatus,
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							class: statusDots[statusTone(snap.status)],
+							"aria-hidden": "true"
+						}),
+						snap.status,
+						percent ? ` · ${percent}` : ""
+					]
+				})
+			]
+		})]
+	});
+}
+/** Left filmstrip: filter chips plus a thumbnail per snapshot. */
+function DiffNav(props) {
+	const { project, build, snapshots, selectedId } = props;
+	const progress = reviewProgress(snapshots);
+	const filter = progress.pending > 0 ? "review" : "all";
+	return /* @__PURE__ */ jsxs("aside", {
+		class: filmstrip,
+		"aria-label": "Snapshots",
+		children: [/* @__PURE__ */ jsx("div", {
+			class: filmstripHead,
+			children: /* @__PURE__ */ jsx(Segmented, {
+				label: "Filter snapshots",
+				"data-filter-switch": true,
+				items: [
+					{
+						label: `Needs review ${progress.pending}`,
+						value: "review",
+						active: filter === "review"
+					},
+					{
+						label: `All ${snapshots.length}`,
+						value: "all",
+						active: filter === "all"
+					},
+					{
+						label: `Done ${progress.done}`,
+						value: "done"
+					}
+				]
+			})
+		}), /* @__PURE__ */ jsx("div", {
+			"data-diff-nav": true,
+			"data-current": selectedId,
+			"data-filter": filter,
+			class: filteredList,
+			children: snapshots.map((snap) => /* @__PURE__ */ jsx(FilmItem, {
+				project,
+				build,
+				snap,
+				active: selectedId === snap.id
+			}, snap.id))
+		})]
+	});
+}
+//#endregion
+export { DiffNav };
+
+//# sourceMappingURL=build-diff-nav.mjs.map

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

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

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

@@ -0,0 +1,78 @@
+import "node:path";
+import "node:url";
+import.meta.url;
+import { Button } from "../ui/buttons.mjs";
+import { Kbd } from "../ui/kbd.mjs";
+import { shortcutsDialog } from "../ui/styles/review-layout.mjs";
+import { Fragment, jsx, jsxs } from "hono/jsx/jsx-runtime";
+//#region src/pages/build-diff-shortcuts.tsx
+const SHORTCUTS = [
+	{
+		keys: ["j", "→"],
+		action: "Next snapshot"
+	},
+	{
+		keys: ["k", "←"],
+		action: "Previous snapshot"
+	},
+	{
+		keys: ["a"],
+		action: "Approve"
+	},
+	{
+		keys: ["r"],
+		action: "Reject"
+	},
+	{
+		keys: [
+			"1",
+			"–",
+			"5"
+		],
+		action: "Side by side, swipe, onion skin, diff, flip"
+	},
+	{
+		keys: ["f"],
+		action: "Cycle zoom (fit, 100%, 200%, 400%)"
+	},
+	{
+		keys: ["+", "–"],
+		action: "Zoom in / out"
+	},
+	{
+		keys: ["t"],
+		action: "Flip baseline / current"
+	},
+	{
+		keys: ["?"],
+		action: "Show this help"
+	}
+];
+/** Native dialog listing the review keyboard shortcuts (opened with `?`). */
+function ShortcutsDialog() {
+	return /* @__PURE__ */ jsxs("dialog", {
+		class: shortcutsDialog,
+		"data-shortcuts": true,
+		"aria-labelledby": "shortcuts-title",
+		children: [
+			/* @__PURE__ */ jsx("h2", {
+				id: "shortcuts-title",
+				children: "Keyboard shortcuts"
+			}),
+			/* @__PURE__ */ jsx("dl", { children: SHORTCUTS.map((item) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("dt", { children: /* @__PURE__ */ jsx(Kbd, { keys: item.keys }) }), /* @__PURE__ */ jsx("dd", { children: item.action })] })) }),
+			/* @__PURE__ */ jsx("form", {
+				method: "dialog",
+				children: /* @__PURE__ */ jsx(Button, {
+					variant: "secondary",
+					size: "sm",
+					type: "submit",
+					children: "Close"
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { ShortcutsDialog };
+
+//# sourceMappingURL=build-diff-shortcuts.mjs.map

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

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

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

@@ -0,0 +1,70 @@
+import "node:path";
+import "node:url";
+import.meta.url;
+import { Button } from "../ui/buttons.mjs";
+import { Alert, Meta } from "../ui/feedback.mjs";
+import { HStack, VStack } from "../ui/stacks.mjs";
+import { jsx, jsxs } from "hono/jsx/jsx-runtime";
+//#region src/pages/build-diff-stale.tsx
+/**
+* Warns that undecided snapshots were compared with a baseline that has since changed.
+* Builds are never recaptured automatically, so the reviewer chooses how to refresh.
+*/
+function StaleBaselineNotice(props) {
+	const { project, build, staleCount, canReview } = props;
+	const base = `/api/v1/projects/${project.slug}/builds/${build.id}`;
+	return /* @__PURE__ */ jsx(Alert, {
+		tone: "warning",
+		title: "Baseline changed since this build was captured",
+		children: /* @__PURE__ */ jsxs(VStack, { children: [
+			/* @__PURE__ */ jsxs("span", { children: [
+				staleCount,
+				" undecided ",
+				staleCount === 1 ? "snapshot was" : "snapshots were",
+				" compared against a baseline that has since changed, so ",
+				staleCount === 1 ? "its" : "their",
+				" diff may be out of date. Builds are not recaptured automatically."
+			] }),
+			canReview ? /* @__PURE__ */ jsxs(HStack, { children: [/* @__PURE__ */ jsx("form", {
+				method: "post",
+				action: `${base}/rediff`,
+				"hx-post": `${base}/rediff`,
+				"hx-target": "body",
+				children: /* @__PURE__ */ jsx(Button, {
+					variant: "primary",
+					size: "sm",
+					type: "submit",
+					children: "Re-diff against current baselines"
+				})
+			}), /* @__PURE__ */ jsx("form", {
+				method: "post",
+				action: `${base}/retry`,
+				"hx-post": `${base}/retry`,
+				"hx-target": "body",
+				children: /* @__PURE__ */ jsx(Button, {
+					variant: "secondary",
+					size: "sm",
+					type: "submit",
+					children: "Retry capture"
+				})
+			})] }) : null,
+			/* @__PURE__ */ jsx(Meta, { children: "Re-diff reuses the stored screenshots and is quick. Retry capture re-renders every story." })
+		] })
+	});
+}
+/** Explains why a single snapshot's diff can no longer be trusted. */
+function StaleSnapshotNotice(props) {
+	return /* @__PURE__ */ jsxs(Alert, {
+		tone: "warning",
+		title: "This diff is out of date",
+		children: [
+			props.status === "removed" ? "The baseline it was compared against no longer exists." : "The baseline changed after this diff was computed.",
+			" ",
+			"Re-diff the build before approving, or approve anyway to replace the current baseline with this screenshot."
+		]
+	});
+}
+//#endregion
+export { StaleBaselineNotice, StaleSnapshotNotice };
+
+//# sourceMappingURL=build-diff-stale.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"build-diff-stale.mjs","names":[],"sources":["../../src/pages/build-diff-stale.tsx"],"sourcesContent":["import type { Build } from \"@storyshelf/core/schema\";\nimport type { Project } from \"@storyshelf/core/schema\";\nimport type { HtmlEscapedString } from \"hono/utils/html\";\nimport { Alert, Button, HStack, Meta, VStack } from \"../ui/components.tsx\";\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\n/** Props for the build-level notice about diffs computed against an outdated baseline. */\nexport interface StaleBaselineNoticeProps {\n  project: Project;\n  build: Build;\n  staleCount: number;\n  canReview: boolean;\n}\n\n/**\n * Warns that undecided snapshots were compared with a baseline that has since changed.\n * Builds are never recaptured automatically, so the reviewer chooses how to refresh.\n */\nexport function StaleBaselineNotice(\n  props: StaleBaselineNoticeProps,\n): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const { project, build, staleCount, canReview } = props;\n  const base = `/api/v1/projects/${project.slug}/builds/${build.id}`;\n  return (\n    <Alert tone=\"warning\" title=\"Baseline changed since this build was captured\">\n      <VStack>\n        <span>\n          {staleCount} undecided {staleCount === 1 ? \"snapshot was\" : \"snapshots were\"} compared\n          against a baseline that has since changed, so {staleCount === 1 ? \"its\" : \"their\"} diff\n          may be out of date. Builds are not recaptured automatically.\n        </span>\n        {canReview ? (\n          <HStack>\n            <form\n              method=\"post\"\n              action={`${base}/rediff`}\n              hx-post={`${base}/rediff`}\n              hx-target=\"body\"\n            >\n              <Button variant=\"primary\" size=\"sm\" type=\"submit\">\n                Re-diff against current baselines\n              </Button>\n            </form>\n            <form method=\"post\" action={`${base}/retry`} hx-post={`${base}/retry`} hx-target=\"body\">\n              <Button variant=\"secondary\" size=\"sm\" type=\"submit\">\n                Retry capture\n              </Button>\n            </form>\n          </HStack>\n        ) : null}\n        <Meta>\n          Re-diff reuses the stored screenshots and is quick. Retry capture re-renders every story.\n        </Meta>\n      </VStack>\n    </Alert>\n  );\n}\n\n/** Props for the per-snapshot notice shown above the three-up viewer. */\nexport interface StaleSnapshotNoticeProps {\n  status: \"stale\" | \"removed\";\n}\n\n/** Explains why a single snapshot's diff can no longer be trusted. */\nexport function StaleSnapshotNotice(\n  props: StaleSnapshotNoticeProps,\n): HtmlEscapedString | Promise<HtmlEscapedString> {\n  return (\n    <Alert tone=\"warning\" title=\"This diff is out of date\">\n      {props.status === \"removed\"\n        ? \"The baseline it was compared against no longer exists.\"\n        : \"The baseline changed after this diff was computed.\"}{\" \"}\n      Re-diff the build before approving, or approve anyway to replace the current baseline with\n      this screenshot.\n    </Alert>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAmBA,SAAgB,oBACd,OACgD;CAChD,MAAM,EAAE,SAAS,OAAO,YAAY,cAAc;CAClD,MAAM,OAAO,oBAAoB,QAAQ,KAAK,UAAU,MAAM;CAC9D,OACE,oBAAC,OAAD;EAAO,MAAK;EAAU,OAAM;EAC1B,UAAA,qBAAC,QAAD,EAAA,UAAA;GACE,qBAAC,QAAD,EAAA,UAAA;IACG;IAAW;IAAY,eAAe,IAAI,iBAAiB;IAAiB;IAC9B,eAAe,IAAI,QAAQ;IAAQ;GAE9E,EAAA,CAAA;GACL,YACC,qBAAC,QAAD,EAAA,UAAA,CACE,oBAAC,QAAD;IACE,QAAO;IACP,QAAQ,GAAG,KAAK;IAChB,WAAS,GAAG,KAAK;IACjB,aAAU;IAEV,UAAA,oBAAC,QAAD;KAAQ,SAAQ;KAAU,MAAK;KAAK,MAAK;KAAS,UAAA;IAE1C,CAAA;GACJ,CAAA,GACN,oBAAC,QAAD;IAAM,QAAO;IAAO,QAAQ,GAAG,KAAK;IAAS,WAAS,GAAG,KAAK;IAAS,aAAU;IAC/E,UAAA,oBAAC,QAAD;KAAQ,SAAQ;KAAY,MAAK;KAAK,MAAK;KAAS,UAAA;IAE5C,CAAA;GACJ,CAAA,CACA,EAAA,CAAA,IACN;GACJ,oBAAC,MAAD,EAAA,UAAM,4FAEA,CAAA;EACA,EAAA,CAAA;CACH,CAAA;AAEX;;AAQA,SAAgB,oBACd,OACgD;CAChD,OACE,qBAAC,OAAD;EAAO,MAAK;EAAU,OAAM;EAA5B,UAAA;GACG,MAAM,WAAW,YACd,2DACA;GAAsD;GAAI;EAGzD;;AAEX"}