@storyshelf/app 0.6.2 → 0.8.0

package/dist/pages/library-grid.mjs

@@ -0,0 +1,104 @@
+import "node:path";
+import "node:url";
+import.meta.url;
+import { getStore } from "../store.mjs";
+import { Button } from "../ui/buttons.mjs";
+import { Badge, Meta } from "../ui/feedback.mjs";
+import { Card, CardSection, SectionTitle } from "../ui/layout.mjs";
+import { HStack, VStack } from "../ui/stacks.mjs";
+import { SnapshotCards } from "./library-snapshots.mjs";
+import { jsx, jsxs } from "hono/jsx/jsx-runtime";
+import { createUrlBuilder } from "@storyshelf/core/urls";
+// src/pages/library-grid.tsx
+/** The component cards of a build; `layer` is present only with `testing` and captured snapshots. */
+function LibraryGrid(props) {
+	return /* @__PURE__ */ jsx(VStack, { children: props.groups.map((group) => /* @__PURE__ */ jsx(LibraryCard, {
+		group,
+		project: props.project,
+		build: props.build,
+		layer: props.layer
+	}, group.title)) });
+}
+function LibraryCard(props) {
+	const { group, project, build, layer } = props;
+	const href = componentHref(project, group);
+	const captured = layer ? group.stories.flatMap((story) => layer.byStory.get(story.id) ?? []) : [];
+	const plain = group.stories.filter((story) => !layer?.byStory.has(story.id));
+	return /* @__PURE__ */ jsxs(Card, {
+		padded: false,
+		"data-filter-item": true,
+		"data-filter-text": `${group.title} ${group.stories.map((story) => story.name).join(" ")}`,
+		children: [/* @__PURE__ */ jsxs(CardSection, {
+			divider: true,
+			children: [/* @__PURE__ */ jsx(SectionTitle, { children: href ? /* @__PURE__ */ jsx("a", {
+				href,
+				children: group.title
+			}) : group.title }), /* @__PURE__ */ jsxs(HStack, { children: [
+				group.tags.map((tag) => /* @__PURE__ */ jsx(Badge, {
+					tone: "neutral",
+					children: tag
+				}, tag)),
+				/* @__PURE__ */ jsxs(Meta, {
+					as: "span",
+					children: [
+						group.stories.length,
+						" ",
+						group.stories.length === 1 ? "story" : "stories"
+					]
+				}),
+				/* @__PURE__ */ jsx(DocsLink, {
+					group,
+					project,
+					build
+				})
+			] })]
+		}), /* @__PURE__ */ jsx(CardSection, { children: /* @__PURE__ */ jsxs(VStack, { children: [layer && captured.length > 0 ? /* @__PURE__ */ jsx(SnapshotCards, {
+			snapshots: captured,
+			project,
+			buildId: build.id,
+			layer,
+			componentHref: href
+		}) : null, plain.length > 0 ? /* @__PURE__ */ jsx(StoryLinks, {
+			stories: plain,
+			project,
+			build
+		}) : null] }) })]
+	});
+}
+/** Component page of a group (its story file), when the index names one. */
+function componentHref(project, group) {
+	return group.importPath ? createUrlBuilder("/", getStore().config.publishedBaseDomain).component(project.slug, group.importPath) : void 0;
+}
+function DocsLink(props) {
+	const docs = props.group.docs[0];
+	if (!docs) return null;
+	return /* @__PURE__ */ jsx(Button, {
+		variant: "ghost",
+		size: "sm",
+		icon: "book",
+		href: `/projects/${props.project.slug}/storybook/build/${props.build.id}/?storyId=${encodeURIComponent(docs.id)}&viewMode=docs`,
+		target: "_blank",
+		rel: "noopener",
+		children: "Docs"
+	});
+}
+/** Links into the published Storybook, one per story, for stories without a snapshot. */
+function StoryLinks(props) {
+	const base = createUrlBuilder("/", getStore().config.publishedBaseDomain).storybookBuild(props.project.slug, props.build.id);
+	return /* @__PURE__ */ jsx(HStack, { children: props.stories.map((story) => /* @__PURE__ */ jsx("span", {
+		"data-filter-item": true,
+		"data-filter-text": `${story.title} ${story.name}`,
+		children: /* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			size: "sm",
+			icon: "external-link",
+			href: `${base}/?storyId=${encodeURIComponent(story.id)}`,
+			target: "_blank",
+			rel: "noopener",
+			children: story.name
+		})
+	}, story.id)) });
+}
+export { LibraryGrid };
+
+//# sourceMappingURL=library-grid.mjs.map

package/dist/pages/library-grid.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"library-grid.mjs","names":[],"sources":["../../src/pages/library-grid.tsx"],"sourcesContent":["/** The library's component list: one card per title, from the catalog, with snapshots layered on. */\nimport type { Build, Project } from \"@storyshelf/core/schema\";\nimport { createUrlBuilder } from \"@storyshelf/core/urls\";\nimport type { HtmlEscapedString } from \"hono/utils/html\";\nimport { getStore } from \"../store.ts\";\nimport {\n  Badge,\n  Button,\n  Card,\n  CardSection,\n  HStack,\n  Meta,\n  SectionTitle,\n  VStack,\n} from \"../ui/components.tsx\";\nimport type { LibraryGroup } from \"./library-model.ts\";\nimport { SnapshotCards, type SnapshotLayer } from \"./library-snapshots.tsx\";\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\ntype Rendered = HtmlEscapedString | Promise<HtmlEscapedString>;\n\n/** The component cards of a build; `layer` is present only with `testing` and captured snapshots. */\nexport function LibraryGrid(props: {\n  groups: LibraryGroup[];\n  project: Project;\n  build: Build;\n  layer: SnapshotLayer | null;\n}): Rendered {\n  return (\n    <VStack>\n      {props.groups.map((group): Rendered => (\n        <LibraryCard\n          key={group.title}\n          group={group}\n          project={props.project}\n          build={props.build}\n          layer={props.layer}\n        />\n      ))}\n    </VStack>\n  );\n}\n\nfunction LibraryCard(props: {\n  group: LibraryGroup;\n  project: Project;\n  build: Build;\n  layer: SnapshotLayer | null;\n}): Rendered {\n  const { group, project, build, layer } = props;\n  const href = componentHref(project, group);\n  const captured = layer ? group.stories.flatMap((story) => layer.byStory.get(story.id) ?? []) : [];\n  const plain = group.stories.filter((story) => !layer?.byStory.has(story.id));\n  return (\n    <Card\n      padded={false}\n      data-filter-item\n      data-filter-text={`${group.title} ${group.stories.map((story) => story.name).join(\" \")}`}\n    >\n      <CardSection divider>\n        <SectionTitle>{href ? <a href={href}>{group.title}</a> : group.title}</SectionTitle>\n        <HStack>\n          {group.tags.map((tag) => (\n            <Badge key={tag} tone=\"neutral\">\n              {tag}\n            </Badge>\n          ))}\n          <Meta as=\"span\">\n            {group.stories.length} {group.stories.length === 1 ? \"story\" : \"stories\"}\n          </Meta>\n          <DocsLink group={group} project={project} build={build} />\n        </HStack>\n      </CardSection>\n      <CardSection>\n        <VStack>\n          {layer && captured.length > 0 ? (\n            <SnapshotCards\n              snapshots={captured}\n              project={project}\n              buildId={build.id}\n              layer={layer}\n              componentHref={href}\n            />\n          ) : null}\n          {plain.length > 0 ? <StoryLinks stories={plain} project={project} build={build} /> : null}\n        </VStack>\n      </CardSection>\n    </Card>\n  );\n}\n\n/** Component page of a group (its story file), when the index names one. */\nfunction componentHref(project: Project, group: LibraryGroup): string | undefined {\n  return group.importPath\n    ? createUrlBuilder(\"/\", getStore().config.publishedBaseDomain).component(\n        project.slug,\n        group.importPath,\n      )\n    : undefined;\n}\n\nfunction DocsLink(props: { group: LibraryGroup; project: Project; build: Build }): Rendered | null {\n  const docs = props.group.docs[0];\n  if (!docs) {\n    return null;\n  }\n  return (\n    <Button\n      variant=\"ghost\"\n      size=\"sm\"\n      icon=\"book\"\n      href={`/projects/${props.project.slug}/storybook/build/${props.build.id}/?storyId=${encodeURIComponent(docs.id)}&viewMode=docs`}\n      target=\"_blank\"\n      rel=\"noopener\"\n    >\n      Docs\n    </Button>\n  );\n}\n\n/** Links into the published Storybook, one per story, for stories without a snapshot. */\nfunction StoryLinks(props: {\n  stories: LibraryGroup[\"stories\"];\n  project: Project;\n  build: Build;\n}): Rendered {\n  const base = createUrlBuilder(\"/\", getStore().config.publishedBaseDomain).storybookBuild(\n    props.project.slug,\n    props.build.id,\n  );\n  return (\n    <HStack>\n      {props.stories.map((story): Rendered => (\n        <span key={story.id} data-filter-item data-filter-text={`${story.title} ${story.name}`}>\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            icon=\"external-link\"\n            href={`${base}/?storyId=${encodeURIComponent(story.id)}`}\n            target=\"_blank\"\n            rel=\"noopener\"\n          >\n            {story.name}\n          </Button>\n        </span>\n      ))}\n    </HStack>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAuBA,SAAgB,YAAY,OAKf;CACX,OACE,oBAAC,QAAD,EAAA,UACG,MAAM,OAAO,KAAK,UACjB,oBAAC,aAAD;EAES;EACP,SAAS,MAAM;EACf,OAAO,MAAM;EACb,OAAO,MAAM;CACd,GALM,MAAM,KAKZ,CACF,EACK,CAAA;AAEZ;AAEA,SAAS,YAAY,OAKR;CACX,MAAM,EAAE,OAAO,SAAS,OAAO,UAAU;CACzC,MAAM,OAAO,cAAc,SAAS,KAAK;CACzC,MAAM,WAAW,QAAQ,MAAM,QAAQ,SAAS,UAAU,MAAM,QAAQ,IAAI,MAAM,EAAE,KAAK,CAAC,CAAC,IAAI,CAAC;CAChG,MAAM,QAAQ,MAAM,QAAQ,QAAQ,UAAU,CAAC,OAAO,QAAQ,IAAI,MAAM,EAAE,CAAC;CAC3E,OACE,qBAAC,MAAD;EACE,QAAQ;EACR,oBAAA;EACA,oBAAkB,GAAG,MAAM,MAAM,GAAG,MAAM,QAAQ,KAAK,UAAU,MAAM,IAAI,CAAC,CAAC,KAAK,GAAG;EAHvF,UAAA,CAKE,qBAAC,aAAD;GAAa,SAAA;GAAb,UAAA,CACE,oBAAC,cAAD,EAAA,UAAe,OAAO,oBAAC,KAAD;IAAS;IAAO,UAAA,MAAM;GAAS,CAAA,IAAI,MAAM,MAAoB,CAAA,GACnF,qBAAC,QAAD,EAAA,UAAA;IACG,MAAM,KAAK,KAAK,QACf,oBAAC,OAAD;KAAiB,MAAK;KACnB,UAAA;IACI,GAFK,GAEL,CACR;IACD,qBAAC,MAAD;KAAM,IAAG;KAAT,UAAA;MACG,MAAM,QAAQ;MAAO;MAAE,MAAM,QAAQ,WAAW,IAAI,UAAU;KAC3D;;IACN,oBAAC,UAAD;KAAiB;KAAgB;KAAgB;IAAQ,CAAA;GACnD,EAAA,CAAA,CACG;EACb,CAAA,GAAA,oBAAC,aAAD,EAAA,UACE,qBAAC,QAAD,EAAA,UAAA,CACG,SAAS,SAAS,SAAS,IAC1B,oBAAC,eAAD;GACE,WAAW;GACF;GACT,SAAS,MAAM;GACR;GACP,eAAe;EAChB,CAAA,IACC,MACH,MAAM,SAAS,IAAI,oBAAC,YAAD;GAAY,SAAS;GAAgB;GAAgB;EAAQ,CAAA,IAAI,IAC/E,EAAA,CAAA,EACG,CAAA,CACT;;AAEV;;AAGA,SAAS,cAAc,SAAkB,OAAyC;CAChF,OAAO,MAAM,aACT,iBAAiB,KAAK,SAAS,CAAC,CAAC,OAAO,mBAAmB,CAAC,CAAC,UAC3D,QAAQ,MACR,MAAM,UACR,IACA,KAAA;AACN;AAEA,SAAS,SAAS,OAAiF;CACjG,MAAM,OAAO,MAAM,MAAM,KAAK;CAC9B,IAAI,CAAC,MACH,OAAO;CAET,OACE,oBAAC,QAAD;EACE,SAAQ;EACR,MAAK;EACL,MAAK;EACL,MAAM,aAAa,MAAM,QAAQ,KAAK,mBAAmB,MAAM,MAAM,GAAG,YAAY,mBAAmB,KAAK,EAAE,EAAE;EAChH,QAAO;EACP,KAAI;EACL,UAAA;CAEO,CAAA;AAEZ;;AAGA,SAAS,WAAW,OAIP;CACX,MAAM,OAAO,iBAAiB,KAAK,SAAS,CAAC,CAAC,OAAO,mBAAmB,CAAC,CAAC,eACxE,MAAM,QAAQ,MACd,MAAM,MAAM,EACd;CACA,OACE,oBAAC,QAAD,EAAA,UACG,MAAM,QAAQ,KAAK,UAClB,oBAAC,QAAD;EAAqB,oBAAA;EAAiB,oBAAkB,GAAG,MAAM,MAAM,GAAG,MAAM;EAC9E,UAAA,oBAAC,QAAD;GACE,SAAQ;GACR,MAAK;GACL,MAAK;GACL,MAAM,GAAG,KAAK,YAAY,mBAAmB,MAAM,EAAE;GACrD,QAAO;GACP,KAAI;GAEH,UAAA,MAAM;EACD,CAAA;CACJ,GAXK,MAAM,EAWX,CACP,EACK,CAAA;AAEZ"}

package/dist/pages/library-model.mjs

@@ -0,0 +1,46 @@
+import "node:path";
+import "node:url";
+import.meta.url;
+import { normalizeImportPath } from "@storyshelf/core/models";
+// src/pages/library-model.ts
+/** Tags Storybook adds on its own; they say nothing about the component. */
+const STORYBOOK_TAGS = /* @__PURE__ */ new Set([
+	"dev",
+	"test",
+	"autodocs",
+	"play-fn",
+	"manifest",
+	"attached-mdx",
+	"unattached-mdx"
+]);
+/** Group catalog entries by title, ordered by title; stories keep index order. */
+function groupLibrary(entries) {
+	return [...Map.groupBy(entries, (entry) => entry.title).entries()].map(([title, group]) => {
+		return {
+			title,
+			importPath: group.find((entry) => entry.importPath !== "")?.importPath ?? "",
+			stories: group.filter((entry) => entry.type === "story"),
+			docs: group.filter((entry) => entry.type === "docs"),
+			tags: [...new Set(group.flatMap((entry) => entry.tags))].filter((tag) => !STORYBOOK_TAGS.has(tag))
+		};
+	}).toSorted((a, b) => a.title.localeCompare(b.title));
+}
+/**
+* Entries rebuilt from a build's snapshots, for a captured build whose Storybook index is gone
+* (statics purged): the pages still list what was captured.
+*/
+function entriesFromSnapshots(snapshots) {
+	const seen = /* @__PURE__ */ new Map();
+	for (const snap of snapshots) if (!seen.has(snap.storyId)) seen.set(snap.storyId, {
+		id: snap.storyId,
+		title: snap.storyTitle || "Untitled",
+		name: snap.storyName,
+		importPath: snap.storyImportPath ? normalizeImportPath(snap.storyImportPath) : "",
+		type: "story",
+		tags: []
+	});
+	return [...seen.values()];
+}
+export { entriesFromSnapshots, groupLibrary };
+
+//# sourceMappingURL=library-model.mjs.map

package/dist/pages/library-model.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"library-model.mjs","names":[],"sources":["../../src/pages/library-model.ts"],"sourcesContent":["import type { CatalogEntry } from \"@storyshelf/core/capture\";\nimport { normalizeImportPath } from \"@storyshelf/core/models\";\nimport type { Snapshot } from \"@storyshelf/core/schema\";\n\n/** Tags Storybook adds on its own; they say nothing about the component. */\nconst STORYBOOK_TAGS: ReadonlySet<string> = new Set([\n  \"dev\",\n  \"test\",\n  \"autodocs\",\n  \"play-fn\",\n  \"manifest\",\n  \"attached-mdx\",\n  \"unattached-mdx\",\n]);\n\n/** The library's unit: every entry that shares a title, grouped like Storybook's sidebar. */\nexport interface LibraryGroup {\n  title: string;\n  /** Story file of the first entry that has one; empty when the index names none. */\n  importPath: string;\n  stories: CatalogEntry[];\n  /** Docs entries; the first is the component's docs page. */\n  docs: CatalogEntry[];\n  /** Tags worth showing, in first-seen order. */\n  tags: string[];\n}\n\n/** Group catalog entries by title, ordered by title; stories keep index order. */\nexport function groupLibrary(entries: readonly CatalogEntry[]): LibraryGroup[] {\n  const groups = Map.groupBy(entries, (entry) => entry.title);\n  return [...groups.entries()]\n    .map(([title, group]): LibraryGroup => {\n      return {\n        title,\n        importPath: group.find((entry) => entry.importPath !== \"\")?.importPath ?? \"\",\n        stories: group.filter((entry) => entry.type === \"story\"),\n        docs: group.filter((entry) => entry.type === \"docs\"),\n        tags: [...new Set(group.flatMap((entry) => entry.tags))].filter(\n          (tag) => !STORYBOOK_TAGS.has(tag),\n        ),\n      };\n    })\n    .toSorted((a, b) => a.title.localeCompare(b.title));\n}\n\n/**\n * Entries rebuilt from a build's snapshots, for a captured build whose Storybook index is gone\n * (statics purged): the pages still list what was captured.\n */\nexport function entriesFromSnapshots(snapshots: readonly Snapshot[]): CatalogEntry[] {\n  const seen = new Map<string, CatalogEntry>();\n  for (const snap of snapshots) {\n    if (!seen.has(snap.storyId)) {\n      seen.set(snap.storyId, {\n        id: snap.storyId,\n        title: snap.storyTitle || \"Untitled\",\n        name: snap.storyName,\n        importPath: snap.storyImportPath ? normalizeImportPath(snap.storyImportPath) : \"\",\n        type: \"story\",\n        tags: [],\n      });\n    }\n  }\n  return [...seen.values()];\n}\n"],"mappings":";;;;;;AAKA,MAAM,iCAAsC,IAAI,IAAI;CAClD;CACA;CACA;CACA;CACA;CACA;CACA;AACF,CAAC;;AAeD,SAAgB,aAAa,SAAkD;CAE7E,OAAO,CAAC,GADO,IAAI,QAAQ,UAAU,UAAU,MAAM,KACrC,CAAC,CAAC,QAAQ,CAAC,CAAC,CACzB,KAAK,CAAC,OAAO,WAAyB;EACrC,OAAO;GACL;GACA,YAAY,MAAM,MAAM,UAAU,MAAM,eAAe,EAAE,CAAC,EAAE,cAAc;GAC1E,SAAS,MAAM,QAAQ,UAAU,MAAM,SAAS,OAAO;GACvD,MAAM,MAAM,QAAQ,UAAU,MAAM,SAAS,MAAM;GACnD,MAAM,CAAC,GAAG,IAAI,IAAI,MAAM,SAAS,UAAU,MAAM,IAAI,CAAC,CAAC,CAAC,CAAC,QACtD,QAAQ,CAAC,eAAe,IAAI,GAAG,CAClC;EACF;CACF,CAAC,CAAC,CACD,UAAU,GAAG,MAAM,EAAE,MAAM,cAAc,EAAE,KAAK,CAAC;AACtD;;;;;AAMA,SAAgB,qBAAqB,WAAgD;CACnF,MAAM,uBAAO,IAAI,IAA0B;CAC3C,KAAK,MAAM,QAAQ,WACjB,IAAI,CAAC,KAAK,IAAI,KAAK,OAAO,GACxB,KAAK,IAAI,KAAK,SAAS;EACrB,IAAI,KAAK;EACT,OAAO,KAAK,cAAc;EAC1B,MAAM,KAAK;EACX,YAAY,KAAK,kBAAkB,oBAAoB,KAAK,eAAe,IAAI;EAC/E,MAAM;EACN,MAAM,CAAC;CACT,CAAC;CAGL,OAAO,CAAC,GAAG,KAAK,OAAO,CAAC;AAC1B"}

package/dist/pages/library-snapshots.mjs

@@ -0,0 +1,129 @@
+import "node:path";
+import "node:url";
+import.meta.url;
+import { getStore } from "../store.mjs";
+import { css } from "../ui/css.mjs";
+import { Button } from "../ui/buttons.mjs";
+import { Badge, statusTone } from "../ui/feedback.mjs";
+import { SectionTitle } from "../ui/layout.mjs";
+import { HStack } from "../ui/stacks.mjs";
+import { designUrlsFor, loadDesignPreviews, loadDesignResolutions, loadProjectDesignLinks, providerNameFor } from "../routers/design.handlers.mjs";
+import { diffPaneImg, snapshotCard, snapshotCardBody, snapshotCardHead, snapshotCardMeta, snapshotGrid } from "../ui/styles/review.mjs";
+import { A11yViolationsDetails } from "./a11y-violations.mjs";
+import { groupSnapshots } from "./build-diff-model.mjs";
+import { DesignButtons } from "./design-links.mjs";
+import { Fragment, jsx, jsxs } from "hono/jsx/jsx-runtime";
+import { createUrlBuilder } from "@storyshelf/core/urls";
+// src/pages/library-snapshots.tsx
+/** Snapshot image with library height cap, extending the shared diff pane image. */
+const snapshotImg = css`
+  /* snapshot-img */
+  ${diffPaneImg}
+  max-height: 240px;
+  object-fit: contain;
+`;
+const NO_DESIGN = {
+	bySnapshot: /* @__PURE__ */ new Map(),
+	previews: /* @__PURE__ */ new Map(),
+	projectLinks: []
+};
+/** The layer for a build's snapshots; design data that cannot be loaded leaves the library plain. */
+async function loadSnapshotLayer(project, snapshots) {
+	const primary = groupSnapshots(snapshots).map((group) => group.primary);
+	const design = await loadLibraryDesign(project, primary).catch(() => NO_DESIGN);
+	return {
+		byStory: Map.groupBy(primary, (snap) => snap.storyId),
+		design,
+		multipleViewports: new Set(primary.map((snap) => snap.viewportName)).size > 1
+	};
+}
+async function loadLibraryDesign(project, snapshots) {
+	const [resolutions, projectLinks] = await Promise.all([loadDesignResolutions(project, snapshots), loadProjectDesignLinks(project)]);
+	const bySnapshot = new Map(snapshots.map((snap) => [snap.id, designUrlsFor(resolutions, snap)]));
+	return {
+		bySnapshot,
+		previews: await loadDesignPreviews(project, [...bySnapshot.values()].flat()),
+		projectLinks
+	};
+}
+/** Snapshot cards of a component's captured stories, one grid per viewport. */
+function SnapshotCards(props) {
+	const byViewport = Map.groupBy(props.snapshots, (snap) => snap.viewportName);
+	return /* @__PURE__ */ jsx(Fragment, { children: [...byViewport.keys()].toSorted().map((name) => /* @__PURE__ */ jsxs("div", { children: [props.layer.multipleViewports ? /* @__PURE__ */ jsx(SectionTitle, {
+		level: 3,
+		children: name
+	}) : null, /* @__PURE__ */ jsx("div", {
+		class: snapshotGrid,
+		children: (byViewport.get(name) ?? []).toSorted((a, b) => a.storyName.localeCompare(b.storyName)).map((snap) => /* @__PURE__ */ jsx(SnapshotCardItem, {
+			snap,
+			...props
+		}, snap.id))
+	})] }, name)) });
+}
+function SnapshotCardItem(props) {
+	const { snap, project, buildId } = props;
+	return /* @__PURE__ */ jsxs("div", {
+		class: snapshotCard,
+		"data-filter-item": true,
+		"data-filter-text": `${snap.storyTitle} ${snap.storyName}`,
+		children: [/* @__PURE__ */ jsxs("div", {
+			class: snapshotCardHead,
+			children: [/* @__PURE__ */ jsx("strong", { children: snap.storyName }), /* @__PURE__ */ jsxs("span", {
+				class: snapshotCardMeta,
+				children: [
+					/* @__PURE__ */ jsx(Badge, {
+						tone: statusTone(snap.status),
+						children: snap.status
+					}),
+					" ",
+					snap.viewportWidth,
+					"×",
+					snap.viewportHeight
+				]
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			class: snapshotCardBody,
+			children: [
+				/* @__PURE__ */ jsx("img", {
+					class: snapshotImg,
+					src: `/api/v1/projects/${project.slug}/builds/${buildId}/snapshots/${snap.id}/image`,
+					alt: `${snap.storyTitle} / ${snap.storyName}`,
+					loading: "lazy"
+				}),
+				/* @__PURE__ */ jsx(A11yViolationsDetails, { snapshot: snap }),
+				/* @__PURE__ */ jsx(SnapshotActions, { ...props })
+			]
+		})]
+	});
+}
+function SnapshotActions(props) {
+	const { snap, project, buildId, layer } = props;
+	const urls = createUrlBuilder("/", getStore().config.publishedBaseDomain);
+	return /* @__PURE__ */ jsxs(HStack, { children: [
+		/* @__PURE__ */ jsx(Button, {
+			variant: "secondary",
+			size: "sm",
+			icon: "columns",
+			href: `${urls.buildDiff(project.slug, buildId)}?snapshot=${snap.id}`,
+			children: "Review"
+		}),
+		/* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			size: "sm",
+			icon: "external-link",
+			href: `${urls.storybookBuild(project.slug, buildId)}/?storyId=${encodeURIComponent(snap.storyId)}`,
+			target: "_blank",
+			rel: "noopener",
+			children: "Preview"
+		}),
+		/* @__PURE__ */ jsx(DesignButtons, {
+			urls: layer.design.bySnapshot.get(snap.id) ?? [],
+			providerName: providerNameFor,
+			previews: layer.design.previews,
+			componentHref: props.componentHref
+		})
+	] });
+}
+export { SnapshotCards, loadSnapshotLayer };
+
+//# sourceMappingURL=library-snapshots.mjs.map

package/dist/pages/library-snapshots.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"library-snapshots.mjs","names":[],"sources":["../../src/pages/library-snapshots.tsx"],"sourcesContent":["/** The snapshot layer of the library: what `testing` adds on top of the catalog (ADR 0006, decision 9). */\nimport type { Project, Snapshot } from \"@storyshelf/core/schema\";\nimport { createUrlBuilder } from \"@storyshelf/core/urls\";\nimport type { HtmlEscapedString } from \"hono/utils/html\";\nimport {\n  loadDesignResolutions,\n  designUrlsFor,\n  loadDesignPreviews,\n  loadProjectDesignLinks,\n  providerNameFor,\n} from \"../routers/design.handlers.ts\";\nimport { getStore } from \"../store.ts\";\nimport { Badge, Button, HStack, SectionTitle, statusTone } from \"../ui/components.tsx\";\nimport { css } from \"../ui/css.ts\";\nimport {\n  diffPaneImg,\n  snapshotCard,\n  snapshotCardBody,\n  snapshotCardHead,\n  snapshotCardMeta,\n  snapshotGrid,\n} from \"../ui/styles/review.ts\";\nimport { A11yViolationsDetails } from \"./a11y-violations.tsx\";\nimport { groupSnapshots } from \"./build-diff-model.ts\";\nimport { DesignButtons, type DesignPreviewInfo, type ProjectDesignLink } from \"./design-links.tsx\";\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\ntype Rendered = HtmlEscapedString | Promise<HtmlEscapedString>;\n\n/** Snapshot image with library height cap, extending the shared diff pane image. */\nconst snapshotImg = css`\n  /* snapshot-img */\n  ${diffPaneImg}\n  max-height: 240px;\n  object-fit: contain;\n`;\n\n/** Design data of the library: per-snapshot component links plus project-level file links. */\nexport interface LibraryDesign {\n  bySnapshot: Map<string, string[]>;\n  previews: Map<string, DesignPreviewInfo>;\n  projectLinks: ProjectDesignLink[];\n}\n\n/** Snapshots and design links of the build, by story; layered onto the catalog's stories. */\nexport interface SnapshotLayer {\n  /** One snapshot per story and mode (the primary engine's; other browsers are review detail). */\n  byStory: Map<string, Snapshot[]>;\n  design: LibraryDesign;\n  /** Whether the build has more than one viewport (so the cards name theirs). */\n  multipleViewports: boolean;\n}\n\nconst NO_DESIGN: LibraryDesign = { bySnapshot: new Map(), previews: new Map(), projectLinks: [] };\n\n/** The layer for a build's snapshots; design data that cannot be loaded leaves the library plain. */\nexport async function loadSnapshotLayer(\n  project: Project,\n  snapshots: Snapshot[],\n): Promise<SnapshotLayer> {\n  const primary = groupSnapshots(snapshots).map((group) => group.primary);\n  const design = await loadLibraryDesign(project, primary).catch(() => NO_DESIGN);\n  return {\n    byStory: Map.groupBy(primary, (snap) => snap.storyId),\n    design,\n    multipleViewports: new Set(primary.map((snap) => snap.viewportName)).size > 1,\n  };\n}\n\nasync function loadLibraryDesign(project: Project, snapshots: Snapshot[]): Promise<LibraryDesign> {\n  const [resolutions, projectLinks] = await Promise.all([\n    loadDesignResolutions(project, snapshots),\n    loadProjectDesignLinks(project),\n  ]);\n  const bySnapshot = new Map(\n    snapshots.map((snap) => [snap.id, designUrlsFor(resolutions, snap)] as const),\n  );\n  const previews = await loadDesignPreviews(project, [...bySnapshot.values()].flat());\n  return { bySnapshot, previews, projectLinks };\n}\n\n/** Snapshot cards of a component's captured stories, one grid per viewport. */\nexport function SnapshotCards(props: {\n  snapshots: Snapshot[];\n  project: Project;\n  buildId: string;\n  layer: SnapshotLayer;\n  componentHref: string | undefined;\n}): Rendered {\n  const byViewport = Map.groupBy(props.snapshots, (snap) => snap.viewportName);\n  return (\n    <>\n      {[...byViewport.keys()].toSorted().map((name): Rendered => (\n        <div key={name}>\n          {props.layer.multipleViewports ? <SectionTitle level={3}>{name}</SectionTitle> : null}\n          <div class={snapshotGrid}>\n            {(byViewport.get(name) ?? [])\n              .toSorted((a, b) => a.storyName.localeCompare(b.storyName))\n              .map((snap) => (\n                <SnapshotCardItem key={snap.id} snap={snap} {...props} />\n              ))}\n          </div>\n        </div>\n      ))}\n    </>\n  );\n}\n\nfunction SnapshotCardItem(props: {\n  snap: Snapshot;\n  project: Project;\n  buildId: string;\n  layer: SnapshotLayer;\n  componentHref: string | undefined;\n}): Rendered {\n  const { snap, project, buildId } = props;\n  return (\n    <div\n      class={snapshotCard}\n      data-filter-item\n      data-filter-text={`${snap.storyTitle} ${snap.storyName}`}\n    >\n      <div class={snapshotCardHead}>\n        <strong>{snap.storyName}</strong>\n        <span class={snapshotCardMeta}>\n          <Badge tone={statusTone(snap.status)}>{snap.status}</Badge> {snap.viewportWidth}×\n          {snap.viewportHeight}\n        </span>\n      </div>\n      <div class={snapshotCardBody}>\n        <img\n          class={snapshotImg}\n          src={`/api/v1/projects/${project.slug}/builds/${buildId}/snapshots/${snap.id}/image`}\n          alt={`${snap.storyTitle} / ${snap.storyName}`}\n          loading=\"lazy\"\n        />\n        <A11yViolationsDetails snapshot={snap} />\n        <SnapshotActions {...props} />\n      </div>\n    </div>\n  );\n}\n\nfunction SnapshotActions(props: {\n  snap: Snapshot;\n  project: Project;\n  buildId: string;\n  layer: SnapshotLayer;\n  componentHref: string | undefined;\n}): Rendered {\n  const { snap, project, buildId, layer } = props;\n  const urls = createUrlBuilder(\"/\", getStore().config.publishedBaseDomain);\n  return (\n    <HStack>\n      <Button\n        variant=\"secondary\"\n        size=\"sm\"\n        icon=\"columns\"\n        href={`${urls.buildDiff(project.slug, buildId)}?snapshot=${snap.id}`}\n      >\n        Review\n      </Button>\n      <Button\n        variant=\"ghost\"\n        size=\"sm\"\n        icon=\"external-link\"\n        href={`${urls.storybookBuild(project.slug, buildId)}/?storyId=${encodeURIComponent(snap.storyId)}`}\n        target=\"_blank\"\n        rel=\"noopener\"\n      >\n        Preview\n      </Button>\n      <DesignButtons\n        urls={layer.design.bySnapshot.get(snap.id) ?? []}\n        providerName={providerNameFor}\n        previews={layer.design.previews}\n        componentHref={props.componentHref}\n      />\n    </HStack>\n  );\n}\n"],"mappings":"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"}