@storyshelf/core 0.1.3 → 0.3.2

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

@@ -0,0 +1,197 @@
+import "node:path";
+import "node:url";
+import.meta.url;
+import { Badge, statusTone } from "../ui/feedback.mjs";
+import { jsx, jsxs } from "hono/jsx/jsx-runtime";
+//#region src/pages/build-diff-viewer.tsx
+function imageUrl(project, build, snapshot, kind) {
+	return `/api/v1/projects/${project.slug}/builds/${build.id}/snapshots/${snapshot.id}/${kind}`;
+}
+/** Approve/reject buttons for a reviewable snapshot. */
+function SnapshotActions(props) {
+	const { project, build, selected } = props;
+	return /* @__PURE__ */ jsxs("div", {
+		style: "display:flex; gap:.5rem;",
+		children: [/* @__PURE__ */ jsx("form", {
+			method: "post",
+			action: `/api/v1/projects/${project.slug}/builds/${build.id}/snapshots/${selected.id}/approve`,
+			"hx-post": `/api/v1/projects/${project.slug}/builds/${build.id}/snapshots/${selected.id}/approve`,
+			"hx-target": "body",
+			children: /* @__PURE__ */ jsx("button", {
+				class: "btn btn--primary",
+				type: "submit",
+				accesskey: "a",
+				title: "Approve (a)",
+				children: "Approve"
+			})
+		}), /* @__PURE__ */ jsx("form", {
+			method: "post",
+			action: `/api/v1/projects/${project.slug}/builds/${build.id}/snapshots/${selected.id}/reject`,
+			"hx-post": `/api/v1/projects/${project.slug}/builds/${build.id}/snapshots/${selected.id}/reject`,
+			"hx-target": "body",
+			children: /* @__PURE__ */ jsx("button", {
+				class: "btn btn--danger",
+				type: "submit",
+				accesskey: "r",
+				title: "Reject (r)",
+				children: "Reject"
+			})
+		})]
+	});
+}
+/** Baseline image pane (or a first-capture placeholder). */
+function BaselinePane(props) {
+	const { project, build, selected, hasBaseline } = props;
+	return /* @__PURE__ */ jsxs("div", {
+		class: "diff-pane",
+		children: [/* @__PURE__ */ jsx("div", {
+			class: "diff-pane__label",
+			children: "Baseline"
+		}), hasBaseline[selected.id] ? /* @__PURE__ */ jsx("img", {
+			class: "diff-pane__img",
+			src: imageUrl(project, build, selected, "baseline"),
+			alt: `Baseline for ${selected.storyTitle} / ${selected.storyName}`,
+			loading: "lazy"
+		}) : /* @__PURE__ */ jsxs("div", {
+			style: "aspect-ratio: 16/9; display:grid; place-items:center; background:var(--surface-muted); color:var(--text-secondary); font-size:.85rem;",
+			children: [
+				"No baseline",
+				/* @__PURE__ */ jsx("br", {}),
+				/* @__PURE__ */ jsx("span", {
+					class: "field__hint",
+					children: "first capture for this story"
+				})
+			]
+		})]
+	});
+}
+/** Current screenshot pane. */
+function CurrentPane(props) {
+	const { project, build, selected } = props;
+	return /* @__PURE__ */ jsxs("div", {
+		class: "diff-pane",
+		children: [/* @__PURE__ */ jsx("div", {
+			class: "diff-pane__label",
+			children: "Current"
+		}), /* @__PURE__ */ jsx("img", {
+			class: "diff-pane__img",
+			src: imageUrl(project, build, selected, "image"),
+			alt: `Current for ${selected.storyTitle} / ${selected.storyName}`,
+			loading: "lazy"
+		})]
+	});
+}
+/** Diff overlay pane (or a within-threshold note). */
+function DiffPane(props) {
+	const { project, build, selected } = props;
+	return /* @__PURE__ */ jsxs("div", {
+		class: "diff-pane",
+		children: [/* @__PURE__ */ jsxs("div", {
+			class: "diff-pane__label",
+			children: ["Diff ", selected.diffRatio === null ? "" : `· ${(selected.diffRatio * 100).toFixed(2)}%`]
+		}), selected.diffPath ? /* @__PURE__ */ jsx("img", {
+			class: "diff-pane__img",
+			src: imageUrl(project, build, selected, "diff"),
+			alt: `Diff for ${selected.storyTitle} / ${selected.storyName}`,
+			loading: "lazy"
+		}) : /* @__PURE__ */ jsx("div", {
+			style: "aspect-ratio: 16/9; display:grid; place-items:center; color:var(--text-secondary);",
+			children: selected.status === "unchanged" || selected.status === "approved" ? "No diff — within threshold" : "No diff yet"
+		})]
+	});
+}
+/** Baseline | current | diff image panes. */
+function DiffPaneGrid(props) {
+	const { project, build, selected, hasBaseline } = props;
+	return /* @__PURE__ */ jsxs("div", {
+		class: "diff-grid",
+		style: "margin-top:1rem;",
+		children: [
+			/* @__PURE__ */ jsx(BaselinePane, {
+				project,
+				build,
+				selected,
+				hasBaseline
+			}),
+			/* @__PURE__ */ jsx(CurrentPane, {
+				project,
+				build,
+				selected
+			}),
+			/* @__PURE__ */ jsx(DiffPane, {
+				project,
+				build,
+				selected
+			})
+		]
+	});
+}
+/** Baseline | current | diff panes with approve/reject actions. */
+function DiffViewer(props) {
+	const { project, build, selected, canReview, hasBaseline } = props;
+	return /* @__PURE__ */ jsxs("div", {
+		class: "card card--padded",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				style: "display:flex; justify-content:space-between; gap:.5rem; align-items:center; flex-wrap:wrap;",
+				children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("h2", {
+					style: "margin:0; font-size:1.05rem;",
+					children: [
+						selected.storyTitle,
+						" — ",
+						selected.storyName
+					]
+				}), /* @__PURE__ */ jsxs("p", {
+					class: "field__hint",
+					style: "margin:.2rem 0 0;",
+					children: [
+						selected.viewportName,
+						" · ",
+						selected.viewportWidth,
+						"×",
+						selected.viewportHeight,
+						" ·",
+						" ",
+						/* @__PURE__ */ jsx(Badge, {
+							tone: statusTone(selected.status),
+							children: selected.status
+						}),
+						selected.diffPixels === null ? "" : ` · ${selected.diffPixels} px`
+					]
+				})] }), canReview && (selected.status === "new" || selected.status === "changed") ? /* @__PURE__ */ jsx(SnapshotActions, {
+					project,
+					build,
+					selected
+				}) : null]
+			}),
+			/* @__PURE__ */ jsx(DiffPaneGrid, {
+				project,
+				build,
+				selected,
+				hasBaseline
+			}),
+			/* @__PURE__ */ jsxs("p", {
+				class: "field__hint",
+				style: "margin-top:.6rem;",
+				children: [
+					"Keyboard: ",
+					/* @__PURE__ */ jsx("kbd", { children: "←" }),
+					" ",
+					/* @__PURE__ */ jsx("kbd", { children: "→" }),
+					" navigate · ",
+					/* @__PURE__ */ jsx("kbd", { children: "a" }),
+					" approve · ",
+					/* @__PURE__ */ jsx("kbd", { children: "r" }),
+					" reject ·",
+					" ",
+					/* @__PURE__ */ jsx("kbd", { children: "?" }),
+					" help"
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { DiffViewer };
+
+//# sourceMappingURL=build-diff-viewer.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"build-diff-viewer.mjs","names":[],"sources":["../../src/pages/build-diff-viewer.tsx"],"sourcesContent":["import type { HtmlEscapedString } from \"hono/utils/html\";\nimport type { Build } from \"../schema/build.ts\";\nimport type { Project } from \"../schema/project.ts\";\nimport type { Snapshot } from \"../schema/snapshot.ts\";\nimport { Badge, statusTone } from \"../ui/components.tsx\";\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\n/** Three-up viewer props for the selected snapshot. */\nexport interface DiffViewerProps {\n  project: Project;\n  build: Build;\n  selected: Snapshot;\n  canReview: boolean;\n  hasBaseline: Record<string, boolean>;\n}\n\nfunction imageUrl(\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\ninterface SnapshotActionsProps {\n  project: Project;\n  build: Build;\n  selected: Snapshot;\n}\n\n/** Approve/reject buttons for a reviewable snapshot. */\nfunction SnapshotActions(\n  props: SnapshotActionsProps,\n): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const { project, build, selected } = props;\n  return (\n    <div style=\"display:flex; gap:.5rem;\">\n      <form\n        method=\"post\"\n        action={`/api/v1/projects/${project.slug}/builds/${build.id}/snapshots/${selected.id}/approve`}\n        hx-post={`/api/v1/projects/${project.slug}/builds/${build.id}/snapshots/${selected.id}/approve`}\n        hx-target=\"body\"\n      >\n        <button class=\"btn btn--primary\" type=\"submit\" accesskey=\"a\" title=\"Approve (a)\">\n          Approve\n        </button>\n      </form>\n      <form\n        method=\"post\"\n        action={`/api/v1/projects/${project.slug}/builds/${build.id}/snapshots/${selected.id}/reject`}\n        hx-post={`/api/v1/projects/${project.slug}/builds/${build.id}/snapshots/${selected.id}/reject`}\n        hx-target=\"body\"\n      >\n        <button class=\"btn btn--danger\" type=\"submit\" accesskey=\"r\" title=\"Reject (r)\">\n          Reject\n        </button>\n      </form>\n    </div>\n  );\n}\n\ninterface DiffPaneGridProps {\n  project: Project;\n  build: Build;\n  selected: Snapshot;\n  hasBaseline: Record<string, boolean>;\n}\n\ninterface SinglePaneProps {\n  project: Project;\n  build: Build;\n  selected: Snapshot;\n}\n\n/** Baseline image pane (or a first-capture placeholder). */\nfunction BaselinePane(props: SinglePaneProps & { hasBaseline: Record<string, boolean> }): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const { project, build, selected, hasBaseline } = props;\n  return (\n    <div class=\"diff-pane\">\n      <div class=\"diff-pane__label\">Baseline</div>\n      {hasBaseline[selected.id] ? (\n        <img\n          class=\"diff-pane__img\"\n          src={imageUrl(project, build, selected, \"baseline\")}\n          alt={`Baseline for ${selected.storyTitle} / ${selected.storyName}`}\n          loading=\"lazy\"\n        />\n      ) : (\n        <div style=\"aspect-ratio: 16/9; display:grid; place-items:center; background:var(--surface-muted); color:var(--text-secondary); font-size:.85rem;\">\n          No baseline\n          <br />\n          <span class=\"field__hint\">first capture for this story</span>\n        </div>\n      )}\n    </div>\n  );\n}\n\n/** Current screenshot pane. */\nfunction CurrentPane(props: SinglePaneProps): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const { project, build, selected } = props;\n  return (\n    <div class=\"diff-pane\">\n      <div class=\"diff-pane__label\">Current</div>\n      <img\n        class=\"diff-pane__img\"\n        src={imageUrl(project, build, selected, \"image\")}\n        alt={`Current for ${selected.storyTitle} / ${selected.storyName}`}\n        loading=\"lazy\"\n      />\n    </div>\n  );\n}\n\n/** Diff overlay pane (or a within-threshold note). */\nfunction DiffPane(props: SinglePaneProps): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const { project, build, selected } = props;\n  return (\n    <div class=\"diff-pane\">\n      <div class=\"diff-pane__label\">\n        Diff {selected.diffRatio === null ? \"\" : `· ${(selected.diffRatio * 100).toFixed(2)}%`}\n      </div>\n      {selected.diffPath ? (\n        <img\n          class=\"diff-pane__img\"\n          src={imageUrl(project, build, selected, \"diff\")}\n          alt={`Diff for ${selected.storyTitle} / ${selected.storyName}`}\n          loading=\"lazy\"\n        />\n      ) : (\n        <div style=\"aspect-ratio: 16/9; display:grid; place-items:center; color:var(--text-secondary);\">\n          {selected.status === \"unchanged\" || selected.status === \"approved\"\n            ? \"No diff — within threshold\"\n            : \"No diff yet\"}\n        </div>\n      )}\n    </div>\n  );\n}\n\n/** Baseline | current | diff image panes. */\nfunction DiffPaneGrid(props: DiffPaneGridProps): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const { project, build, selected, hasBaseline } = props;\n  return (\n    <div class=\"diff-grid\" style=\"margin-top:1rem;\">\n      <BaselinePane project={project} build={build} selected={selected} hasBaseline={hasBaseline} />\n      <CurrentPane project={project} build={build} selected={selected} />\n      <DiffPane project={project} build={build} selected={selected} />\n    </div>\n  );\n}\n\n/** Baseline | current | diff panes with approve/reject actions. */\nexport function DiffViewer(props: DiffViewerProps): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const { project, build, selected, canReview, hasBaseline } = props;\n  return (\n    <div class=\"card card--padded\">\n      <div style=\"display:flex; justify-content:space-between; gap:.5rem; align-items:center; flex-wrap:wrap;\">\n        <div>\n          <h2 style=\"margin:0; font-size:1.05rem;\">\n            {selected.storyTitle} — {selected.storyName}\n          </h2>\n          <p class=\"field__hint\" style=\"margin:.2rem 0 0;\">\n            {selected.viewportName} · {selected.viewportWidth}×{selected.viewportHeight} ·{\" \"}\n            <Badge tone={statusTone(selected.status)}>{selected.status}</Badge>\n            {selected.diffPixels === null ? \"\" : ` · ${selected.diffPixels} px`}\n          </p>\n        </div>\n        {canReview && (selected.status === \"new\" || selected.status === \"changed\") ? (\n          <SnapshotActions project={project} build={build} selected={selected} />\n        ) : null}\n      </div>\n      <DiffPaneGrid project={project} build={build} selected={selected} hasBaseline={hasBaseline} />\n      <p class=\"field__hint\" style=\"margin-top:.6rem;\">\n        Keyboard: <kbd>←</kbd> <kbd>→</kbd> navigate · <kbd>a</kbd> approve · <kbd>r</kbd> reject ·{\" \"}\n        <kbd>?</kbd> help\n      </p>\n    </div>\n  );\n}\n"],"mappings":"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"}