@storyshelf/app 0.6.1 → 0.7.0

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

@@ -1 +1 @@
-{"version":3,"file":"build-diff-viewer.mjs","names":[],"sources":["../../src/pages/build-diff-viewer.tsx"],"sourcesContent":["import type { Build, Project, Snapshot } from \"@storyshelf/core/schema\";\nimport type { HtmlEscapedString } from \"hono/utils/html\";\nimport { Badge, CompareStage, VStack, statusTone } from \"../ui/components.tsx\";\nimport { viewerHead, viewerMeta, viewerTitle } from \"../ui/styles/review-layout.ts\";\nimport { diffPercent, snapshotImageUrl } from \"./build-diff-model.ts\";\nimport { StaleSnapshotNotice } from \"./build-diff-stale.tsx\";\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\n/** Viewer props for the selected snapshot. */\nexport interface DiffViewerProps {\n  project: Project;\n  build: Build;\n  selected: Snapshot;\n  hasBaseline: Record<string, boolean>;\n  /** Set when the baseline changed after this snapshot's diff was computed. */\n  drifted?: \"stale\" | \"removed\";\n}\n\n/** Why a snapshot has no diff image, phrased for the empty pane. */\nfunction diffEmptyText(status: string): string {\n  return status === \"unchanged\" || status === \"approved\"\n    ? \"No diff — within threshold\"\n    : \"No diff yet\";\n}\n\n/** Story heading plus the comparison stage for the selected snapshot. */\nexport function DiffViewer(props: DiffViewerProps): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const { project, build, selected, hasBaseline, drifted } = props;\n  const percent = diffPercent(selected);\n  return (\n    <VStack>\n      <div class={viewerHead}>\n        <h2 class={viewerTitle}>\n          {selected.storyTitle} / {selected.storyName}\n        </h2>\n        <p class={viewerMeta}>\n          <Badge tone={statusTone(selected.status)} icon>\n            {selected.status}\n          </Badge>\n          <span>\n            {selected.viewportName} · {selected.viewportWidth}×{selected.viewportHeight}\n          </span>\n          {selected.diffPixels === null || selected.diffPixels === undefined ? null : (\n            <span class=\"mono\">{selected.diffPixels} px</span>\n          )}\n          {percent ? <span class=\"mono\">{percent}</span> : null}\n        </p>\n      </div>\n      {drifted ? <StaleSnapshotNotice status={drifted} /> : null}\n      <CompareStage\n        baselineSrc={\n          hasBaseline[selected.id] ? snapshotImageUrl(project, build, selected, \"baseline\") : null\n        }\n        currentSrc={snapshotImageUrl(project, build, selected, \"image\")}\n        diffSrc={selected.diffPath ? snapshotImageUrl(project, build, selected, \"diff\") : null}\n        subject={`${selected.storyTitle} / ${selected.storyName}`}\n        diffEmpty={diffEmptyText(selected.status)}\n        diffMeta={percent ?? undefined}\n      />\n    </VStack>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAoBA,SAAS,cAAc,QAAwB;CAC7C,OAAO,WAAW,eAAe,WAAW,aACxC,+BACA;AACN;;AAGA,SAAgB,WAAW,OAAwE;CACjG,MAAM,EAAE,SAAS,OAAO,UAAU,aAAa,YAAY;CAC3D,MAAM,UAAU,YAAY,QAAQ;CACpC,OACE,qBAAC,QAAD,EAAA,UAAA;EACE,qBAAC,OAAD;GAAK,OAAO;GAAZ,UAAA,CACE,qBAAC,MAAD;IAAI,OAAO;IAAX,UAAA;KACG,SAAS;KAAW;KAAI,SAAS;IAChC;GACJ,CAAA,GAAA,qBAAC,KAAD;IAAG,OAAO;IAAV,UAAA;KACE,oBAAC,OAAD;MAAO,MAAM,WAAW,SAAS,MAAM;MAAG,MAAA;MACvC,UAAA,SAAS;KACL,CAAA;KACP,qBAAC,QAAD,EAAA,UAAA;MACG,SAAS;MAAa;MAAI,SAAS;MAAc;MAAE,SAAS;KACzD,EAAA,CAAA;KACL,SAAS,eAAe,QAAQ,SAAS,eAAe,KAAA,IAAY,OACnE,qBAAC,QAAD;MAAM,OAAM;MAAZ,UAAA,CAAoB,SAAS,YAAW,KAAS;;KAElD,UAAU,oBAAC,QAAD;MAAM,OAAM;MAAQ,UAAA;KAAc,CAAA,IAAI;IAChD;GACA,CAAA,CAAA;;EACJ,UAAU,oBAAC,qBAAD,EAAqB,QAAQ,QAAU,CAAA,IAAI;EACtD,oBAAC,cAAD;GACE,aACE,YAAY,SAAS,MAAM,iBAAiB,SAAS,OAAO,UAAU,UAAU,IAAI;GAEtF,YAAY,iBAAiB,SAAS,OAAO,UAAU,OAAO;GAC9D,SAAS,SAAS,WAAW,iBAAiB,SAAS,OAAO,UAAU,MAAM,IAAI;GAClF,SAAS,GAAG,SAAS,WAAW,KAAK,SAAS;GAC9C,WAAW,cAAc,SAAS,MAAM;GACxC,UAAU,WAAW,KAAA;EACtB,CAAA;CACK,EAAA,CAAA;AAEZ"}
+{"version":3,"file":"build-diff-viewer.mjs","names":[],"sources":["../../src/pages/build-diff-viewer.tsx"],"sourcesContent":["import type { Build, Project, Snapshot } from \"@storyshelf/core/schema\";\nimport { createUrlBuilder } from \"@storyshelf/core/urls\";\nimport type { HtmlEscapedString } from \"hono/utils/html\";\nimport { Badge, Button, CompareStage, Segmented, VStack, statusTone } from \"../ui/components.tsx\";\nimport { viewerHead, viewerMeta, viewerTitle } from \"../ui/styles/review-layout.ts\";\nimport { A11yViolationsNotice, a11yCarrierOf } from \"./a11y-violations.tsx\";\nimport { EnvironmentChangeSnapshotNotice } from \"./build-diff-environment.tsx\";\nimport {\n  diffPercent,\n  snapshotImageUrl,\n  snapshotPageUrl,\n  snapshotVariant,\n} from \"./build-diff-model.ts\";\nimport { StaleSnapshotNotice } from \"./build-diff-stale.tsx\";\nimport { LinkedUsage, type LinkedUsageItem } from \"./build-diff-usage.tsx\";\nimport { DesignReferences, DesignStrip, type DesignItem } from \"./design-links.tsx\";\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\n/** Viewer props for the selected snapshot. */\nexport interface DiffViewerProps {\n  project: Project;\n  build: Build;\n  selected: Snapshot;\n  /** The selected story/mode's snapshots on every engine (browser tabs when more than one). */\n  siblings?: Snapshot[];\n  hasBaseline: Record<string, boolean>;\n  /** Set when the baseline changed after this snapshot's diff was computed. */\n  drifted?: \"stale\" | \"removed\";\n  /** Linked packages the story uses (provenance badges + upstream deep links). */\n  usage?: LinkedUsageItem[];\n  /** Resolved design links of the story's component (open-in-Figma + stale/deleted notices). */\n  design?: DesignItem[];\n  publishedBaseDomain?: string;\n}\n\n/** Why a snapshot has no diff image, phrased for the empty pane. */\nfunction diffEmptyText(status: string): string {\n  return status === \"unchanged\" || status === \"approved\"\n    ? \"No diff — within threshold\"\n    : \"No diff yet\";\n}\n\n/** Browser tabs (one link per engine) when the story/mode was captured on several. */\nfunction BrowserTabs(props: {\n  project: Project;\n  build: Build;\n  selected: Snapshot;\n  siblings: Snapshot[];\n}): HtmlEscapedString | Promise<HtmlEscapedString> | null {\n  const { project, build, selected, siblings } = props;\n  if (siblings.length < 2) return null;\n  return (\n    <Segmented\n      label=\"Browser\"\n      data-browser-tabs\n      items={siblings.map((snap) => ({\n        label: `${snap.browser ?? \"chromium\"} · ${snap.status}`,\n        value: snap.id,\n        href: snapshotPageUrl(project, build, snap.id),\n        active: snap.id === selected.id,\n      }))}\n    />\n  );\n}\n\n/** Link to the story file's component page, anchored at the story. */\nfunction ViewComponentButton(props: {\n  project: Project;\n  selected: Snapshot;\n  base?: string;\n}): HtmlEscapedString | Promise<HtmlEscapedString> | null {\n  const { project, selected, base } = props;\n  if (!selected.storyImportPath) return null;\n  const urls = createUrlBuilder(\"/\", base);\n  return (\n    <Button\n      variant=\"ghost\"\n      size=\"sm\"\n      href={`${urls.component(project.slug, selected.storyImportPath)}#${selected.storyId}`}\n    >\n      View component\n    </Button>\n  );\n}\n\n/** Story heading plus the comparison stage for the selected snapshot. */\nexport function DiffViewer(props: DiffViewerProps): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const { project, build, selected, hasBaseline, drifted, usage, design, publishedBaseDomain } =\n    props;\n  const siblings = props.siblings ?? [selected];\n  const percent = diffPercent(selected);\n  return (\n    <VStack>\n      <div class={viewerHead}>\n        <h2 class={viewerTitle}>\n          {selected.storyTitle} / {selected.storyName}\n        </h2>\n        <p class={viewerMeta}>\n          <Badge tone={statusTone(selected.status)} icon>\n            {selected.status}\n          </Badge>\n          <span>\n            {snapshotVariant(selected)} · {selected.viewportWidth}×{selected.viewportHeight}\n          </span>\n          {selected.diffPixels === null || selected.diffPixels === undefined ? null : (\n            <span class=\"mono\">{selected.diffPixels} px</span>\n          )}\n          {percent ? <span class=\"mono\">{percent}</span> : null}\n          <ViewComponentButton project={project} selected={selected} base={publishedBaseDomain} />\n        </p>\n      </div>\n      <BrowserTabs project={project} build={build} selected={selected} siblings={siblings} />\n      {drifted ? <StaleSnapshotNotice status={drifted} /> : null}\n      <EnvironmentChangeSnapshotNotice snapshot={selected} migrated={build.isDefault} />\n      <A11yViolationsNotice snapshot={a11yCarrierOf(selected, siblings)} />\n      {usage && usage.length > 0 ? (\n        <LinkedUsage usage={usage} publishedBaseDomain={publishedBaseDomain} />\n      ) : null}\n      {design && design.length > 0 ? <DesignStrip items={design} /> : null}\n      <CompareStage\n        baselineSrc={\n          hasBaseline[selected.id] ? snapshotImageUrl(project, build, selected, \"baseline\") : null\n        }\n        currentSrc={snapshotImageUrl(project, build, selected, \"image\")}\n        diffSrc={selected.diffPath ? snapshotImageUrl(project, build, selected, \"diff\") : null}\n        subject={`${selected.storyTitle} / ${selected.storyName}`}\n        diffEmpty={diffEmptyText(selected.status)}\n        diffMeta={percent ?? undefined}\n      />\n      {design && design.length > 0 ? <DesignReferences items={design} /> : null}\n    </VStack>\n  );\n}\n"],"mappings":"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"}

package/dist/pages/build-diff.mjs

@@ -3,19 +3,26 @@ import "node:url";
 import.meta.url;
 import { EmptyState } from "../ui/feedback.mjs";
 import { DocumentLayout } from "../ui/document.mjs";
-import { StaleBaselineNotice } from "./build-diff-stale.mjs";
+import { InsightSlot } from "./build-diff-insight.mjs";
+import { groupOf, reviewProgress } from "./build-diff-model.mjs";
+import { DiffComments } from "./build-diff-comments.mjs";
 import { canvasColumn, workspace } from "../ui/styles/review-layout.mjs";
 import { DiffActionBar } from "./build-diff-actions.mjs";
-import { DiffComments } from "./build-diff-comments.mjs";
+import { ReviewNotices } from "./build-diff-environment.mjs";
 import { DiffHeader } from "./build-diff-header.mjs";
 import { DiffNav } from "./build-diff-nav.mjs";
 import { ShortcutsDialog } from "./build-diff-shortcuts.mjs";
 import { DiffViewer } from "./build-diff-viewer.mjs";
 import { Fragment, jsx, jsxs } from "hono/jsx/jsx-runtime";
 //#region src/pages/build-diff.tsx
+/** The snapshot the review page shows: the requested one, else the first needing review. */
+function selectedSnapshot(snapshots, selectedId) {
+	return snapshots.find((s) => s.id === selectedId) ?? snapshots.find((s) => s.status === "changed" || s.status === "new") ?? snapshots[0];
+}
 /** Snapshot nav plus the viewer/comments column for the selected snapshot. */
 function DiffReviewGrid(props) {
 	const { project, build, snapshots, comments, selected, canReview, hasBaseline, drifted } = props;
+	const { usage, design, publishedBaseDomain } = props;
 	return /* @__PURE__ */ jsxs("div", {
 		class: workspace,
 		children: [/* @__PURE__ */ jsx(DiffNav, {
@@ -30,13 +37,18 @@ function DiffReviewGrid(props) {
 					project,
 					build,
 					selected,
+					siblings: groupOf(snapshots, selected.id)?.members,
 					hasBaseline,
-					drifted: drifted[selected.id]
+					drifted: drifted[selected.id],
+					usage,
+					design,
+					publishedBaseDomain
 				}),
-				/* @__PURE__ */ jsx(DiffComments, {
+				project.reviewEnabled === false ? null : /* @__PURE__ */ jsx(DiffComments, {
 					project,
 					build,
 					selectedId: selected.id,
+					selectedStoryId: selected.storyId,
 					comments,
 					canReview
 				}),
@@ -46,7 +58,7 @@ function DiffReviewGrid(props) {
 					snapshots,
 					selected,
 					canReview,
-					drifted: drifted[selected.id] !== void 0
+					drifted
 				})
 			] }) : /* @__PURE__ */ jsx(EmptyState, { description: "Select a snapshot to review." })
 		})]
@@ -67,8 +79,8 @@ function reviewNav(project, build) {
 /** Three-up diff review page: baseline, current, and diff with keyboard review. */
 function renderBuildDiffPage(data) {
 	const { project, build, snapshots, comments, selectedId, canReview, hasBaseline, drifted } = data;
-	const selected = snapshots.find((s) => s.id === selectedId) ?? snapshots.find((s) => s.status === "changed" || s.status === "new") ?? snapshots[0];
-	const pending = snapshots.filter((s) => s.status === "new" || s.status === "changed");
+	const selected = selectedSnapshot(snapshots, selectedId);
+	const pendingGroups = reviewProgress(snapshots).pending;
 	return /* @__PURE__ */ jsxs(DocumentLayout, {
 		title: `Review · ${build.gitBranch}`,
 		nav: reviewNav(project, build),
@@ -78,15 +90,21 @@ function renderBuildDiffPage(data) {
 				project,
 				build,
 				snapshots,
-				pendingCount: pending.length,
+				pendingCount: pendingGroups,
 				canReview
 			}),
-			Object.keys(drifted).length > 0 ? /* @__PURE__ */ jsx(StaleBaselineNotice, {
+			/* @__PURE__ */ jsx(ReviewNotices, {
 				project,
 				build,
-				staleCount: Object.keys(drifted).length,
+				snapshots,
+				drifted,
 				canReview
-			}) : null,
+			}),
+			/* @__PURE__ */ jsx(InsightSlot, {
+				project,
+				build,
+				data: data.insight
+			}),
 			snapshots.length === 0 ? /* @__PURE__ */ jsx(EmptyState, {
 				title: "No snapshots",
 				description: "This build has no snapshots yet. Capture may still be running."
@@ -98,13 +116,16 @@ function renderBuildDiffPage(data) {
 				selected,
 				canReview,
 				hasBaseline,
-				drifted
+				drifted,
+				usage: data.usage ?? [],
+				design: data.design ?? [],
+				publishedBaseDomain: data.publishedBaseDomain
 			}),
 			/* @__PURE__ */ jsx(ShortcutsDialog, {})
 		]
 	});
 }
 //#endregion
-export { renderBuildDiffPage };
+export { renderBuildDiffPage, selectedSnapshot };
 
 //# sourceMappingURL=build-diff.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"build-diff.mjs","names":[],"sources":["../../src/pages/build-diff.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 { Snapshot } from \"@storyshelf/core/schema\";\nimport type { HtmlEscapedString } from \"hono/utils/html\";\nimport { EmptyState } from \"../ui/components.tsx\";\nimport { DocumentLayout, type NavConfig, type RenderedContent } from \"../ui/document.tsx\";\nimport { canvasColumn, workspace } from \"../ui/styles/review-layout.ts\";\nimport { DiffActionBar } from \"./build-diff-actions.tsx\";\nimport { DiffComments } from \"./build-diff-comments.tsx\";\nimport { DiffHeader } from \"./build-diff-header.tsx\";\nimport { DiffNav } from \"./build-diff-nav.tsx\";\nimport { ShortcutsDialog } from \"./build-diff-shortcuts.tsx\";\nimport { StaleBaselineNotice } from \"./build-diff-stale.tsx\";\nimport { DiffViewer } from \"./build-diff-viewer.tsx\";\n\n/** Data required to render the three-up build diff review page. */\nexport interface BuildDiffData {\n  project: Project;\n  build: Build;\n  snapshots: Snapshot[];\n  comments: Comment[];\n  selectedId?: string;\n  canReview: boolean;\n  hasBaseline: Record<string, boolean>;\n  /** Open snapshots whose baseline changed after their diff was computed. */\n  drifted: Record<string, \"stale\" | \"removed\">;\n}\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\ninterface DiffReviewGridProps {\n  project: Project;\n  build: Build;\n  snapshots: Snapshot[];\n  comments: Comment[];\n  selected?: Snapshot;\n  canReview: boolean;\n  hasBaseline: Record<string, boolean>;\n  drifted: Record<string, \"stale\" | \"removed\">;\n}\n\n/** Snapshot nav plus the viewer/comments column for the selected snapshot. */\nfunction DiffReviewGrid(\n  props: DiffReviewGridProps,\n): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const { project, build, snapshots, comments, selected, canReview, hasBaseline, drifted } = props;\n  return (\n    <div class={workspace}>\n      <DiffNav project={project} build={build} snapshots={snapshots} selectedId={selected?.id} />\n      <div class={canvasColumn}>\n        {selected ? (\n          <>\n            <DiffViewer\n              project={project}\n              build={build}\n              selected={selected}\n              hasBaseline={hasBaseline}\n              drifted={drifted[selected.id]}\n            />\n            <DiffComments\n              project={project}\n              build={build}\n              selectedId={selected.id}\n              comments={comments}\n              canReview={canReview}\n            />\n            <DiffActionBar\n              project={project}\n              build={build}\n              snapshots={snapshots}\n              selected={selected}\n              canReview={canReview}\n              drifted={drifted[selected.id] !== undefined}\n            />\n          </>\n        ) : (\n          <EmptyState description=\"Select a snapshot to review.\" />\n        )}\n      </div>\n    </div>\n  );\n}\n\n/** Sidebar/breadcrumb context for the review page: Builds / <build> / Review. */\nfunction reviewNav(project: Project, build: Build): NavConfig {\n  return {\n    active: \"builds\",\n    projectSlug: project.slug,\n    projectName: project.name,\n    trail: [\n      {\n        label: `${build.gitBranch} · ${build.gitSha.slice(0, 7)}`,\n        href: `/projects/${project.slug}/builds/${build.id}`,\n      },\n      { label: \"Review\" },\n    ],\n  };\n}\n\n/** Three-up diff review page: baseline, current, and diff with keyboard review. */\nexport function renderBuildDiffPage(data: BuildDiffData): RenderedContent {\n  const { project, build, snapshots, comments, selectedId, canReview, hasBaseline, drifted } = data;\n  const selected =\n    snapshots.find((s) => s.id === selectedId) ??\n    snapshots.find((s) => s.status === \"changed\" || s.status === \"new\") ??\n    snapshots[0];\n  const pending = snapshots.filter((s) => s.status === \"new\" || s.status === \"changed\");\n\n  return (\n    <DocumentLayout\n      title={`Review · ${build.gitBranch}`}\n      nav={reviewNav(project, build)}\n      layout=\"wide\"\n    >\n      <DiffHeader\n        project={project}\n        build={build}\n        snapshots={snapshots}\n        pendingCount={pending.length}\n        canReview={canReview}\n      />\n\n      {Object.keys(drifted).length > 0 ? (\n        <StaleBaselineNotice\n          project={project}\n          build={build}\n          staleCount={Object.keys(drifted).length}\n          canReview={canReview}\n        />\n      ) : null}\n\n      {snapshots.length === 0 ? (\n        <EmptyState\n          title=\"No snapshots\"\n          description=\"This build has no snapshots yet. Capture may still be running.\"\n        />\n      ) : (\n        <DiffReviewGrid\n          project={project}\n          build={build}\n          snapshots={snapshots}\n          comments={comments}\n          selected={selected}\n          canReview={canReview}\n          hasBaseline={hasBaseline}\n          drifted={drifted}\n        />\n      )}\n      <ShortcutsDialog />\n    </DocumentLayout>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;AA2CA,SAAS,eACP,OACgD;CAChD,MAAM,EAAE,SAAS,OAAO,WAAW,UAAU,UAAU,WAAW,aAAa,YAAY;CAC3F,OACE,qBAAC,OAAD;EAAK,OAAO;EAAZ,UAAA,CACE,oBAAC,SAAD;GAAkB;GAAgB;GAAkB;GAAW,YAAY,UAAU;EAAK,CAAA,GAC1F,oBAAC,OAAD;GAAK,OAAO;GACT,UAAA,WACC,qBAAA,UAAA,EAAA,UAAA;IACE,oBAAC,YAAD;KACW;KACF;KACG;KACG;KACb,SAAS,QAAQ,SAAS;IAC3B,CAAA;IACD,oBAAC,cAAD;KACW;KACF;KACP,YAAY,SAAS;KACX;KACC;IACZ,CAAA;IACD,oBAAC,eAAD;KACW;KACF;KACI;KACD;KACC;KACX,SAAS,QAAQ,SAAS,QAAQ,KAAA;IACnC,CAAA;GACD,EAAA,CAAA,IAEF,oBAAC,YAAD,EAAY,aAAY,+BAAgC,CAAA;EAEvD,CAAA,CACF;;AAET;;AAGA,SAAS,UAAU,SAAkB,OAAyB;CAC5D,OAAO;EACL,QAAQ;EACR,aAAa,QAAQ;EACrB,aAAa,QAAQ;EACrB,OAAO,CACL;GACE,OAAO,GAAG,MAAM,UAAU,KAAK,MAAM,OAAO,MAAM,GAAG,CAAC;GACtD,MAAM,aAAa,QAAQ,KAAK,UAAU,MAAM;EAClD,GACA,EAAE,OAAO,SAAS,CACpB;CACF;AACF;;AAGA,SAAgB,oBAAoB,MAAsC;CACxE,MAAM,EAAE,SAAS,OAAO,WAAW,UAAU,YAAY,WAAW,aAAa,YAAY;CAC7F,MAAM,WACJ,UAAU,MAAM,MAAM,EAAE,OAAO,UAAU,KACzC,UAAU,MAAM,MAAM,EAAE,WAAW,aAAa,EAAE,WAAW,KAAK,KAClE,UAAU;CACZ,MAAM,UAAU,UAAU,QAAQ,MAAM,EAAE,WAAW,SAAS,EAAE,WAAW,SAAS;CAEpF,OACE,qBAAC,gBAAD;EACE,OAAO,YAAY,MAAM;EACzB,KAAK,UAAU,SAAS,KAAK;EAC7B,QAAO;EAHT,UAAA;GAKE,oBAAC,YAAD;IACW;IACF;IACI;IACX,cAAc,QAAQ;IACX;GACZ,CAAA;GAEA,OAAO,KAAK,OAAO,CAAC,CAAC,SAAS,IAC7B,oBAAC,qBAAD;IACW;IACF;IACP,YAAY,OAAO,KAAK,OAAO,CAAC,CAAC;IACtB;GACZ,CAAA,IACC;GAEH,UAAU,WAAW,IACpB,oBAAC,YAAD;IACE,OAAM;IACN,aAAY;GACb,CAAA,IAED,oBAAC,gBAAD;IACW;IACF;IACI;IACD;IACA;IACC;IACE;IACJ;GACV,CAAA;GAEH,oBAAC,iBAAD,CAAkB,CAAA;EACJ;;AAEpB"}
+{"version":3,"file":"build-diff.mjs","names":[],"sources":["../../src/pages/build-diff.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 { Snapshot } from \"@storyshelf/core/schema\";\nimport type { HtmlEscapedString } from \"hono/utils/html\";\nimport type { InsightPanelData } from \"../insights/panel.ts\";\nimport { EmptyState } from \"../ui/components.tsx\";\nimport { DocumentLayout, type NavConfig, type RenderedContent } from \"../ui/document.tsx\";\nimport { canvasColumn, workspace } from \"../ui/styles/review-layout.ts\";\nimport { DiffActionBar } from \"./build-diff-actions.tsx\";\nimport { DiffComments } from \"./build-diff-comments.tsx\";\nimport { ReviewNotices } from \"./build-diff-environment.tsx\";\nimport { DiffHeader } from \"./build-diff-header.tsx\";\nimport { InsightSlot } from \"./build-diff-insight.tsx\";\nimport { groupOf, reviewProgress } from \"./build-diff-model.ts\";\nimport { DiffNav } from \"./build-diff-nav.tsx\";\nimport { ShortcutsDialog } from \"./build-diff-shortcuts.tsx\";\nimport type { LinkedUsageItem } from \"./build-diff-usage.tsx\";\nimport { DiffViewer } from \"./build-diff-viewer.tsx\";\nimport type { DesignItem } from \"./design-links.tsx\";\n\n/** Data required to render the three-up build diff review page. */\nexport interface BuildDiffData {\n  project: Project;\n  build: Build;\n  snapshots: Snapshot[];\n  comments: Comment[];\n  selectedId?: string;\n  canReview: boolean;\n  hasBaseline: Record<string, boolean>;\n  /** Open snapshots whose baseline changed after their diff was computed. */\n  drifted: Record<string, \"stale\" | \"removed\">;\n  /** AI triage panel data; omitted/null hides the panel. */\n  insight?: InsightPanelData | null;\n  /** Linked packages the selected snapshot's story uses; omitted/empty hides the badges. */\n  usage?: LinkedUsageItem[];\n  /** Design links the selected snapshot's component resolves to; omitted/empty hides the strip. */\n  design?: DesignItem[];\n  /** Base domain for published Storybook deep links. */\n  publishedBaseDomain?: string;\n}\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\ninterface DiffReviewGridProps {\n  project: Project;\n  build: Build;\n  snapshots: Snapshot[];\n  comments: Comment[];\n  selected?: Snapshot;\n  canReview: boolean;\n  hasBaseline: Record<string, boolean>;\n  drifted: Record<string, \"stale\" | \"removed\">;\n  usage: LinkedUsageItem[];\n  design: DesignItem[];\n  publishedBaseDomain?: string;\n}\n\n/** The snapshot the review page shows: the requested one, else the first needing review. */\nexport function selectedSnapshot(snapshots: Snapshot[], selectedId?: string): Snapshot | undefined {\n  return (\n    snapshots.find((s) => s.id === selectedId) ??\n    snapshots.find((s) => s.status === \"changed\" || s.status === \"new\") ??\n    snapshots[0]\n  );\n}\n\n/** Snapshot nav plus the viewer/comments column for the selected snapshot. */\nfunction DiffReviewGrid(\n  props: DiffReviewGridProps,\n): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const { project, build, snapshots, comments, selected, canReview, hasBaseline, drifted } = props;\n  const { usage, design, publishedBaseDomain } = props;\n  return (\n    <div class={workspace}>\n      <DiffNav project={project} build={build} snapshots={snapshots} selectedId={selected?.id} />\n      <div class={canvasColumn}>\n        {selected ? (\n          <>\n            <DiffViewer\n              project={project}\n              build={build}\n              selected={selected}\n              siblings={groupOf(snapshots, selected.id)?.members}\n              hasBaseline={hasBaseline}\n              drifted={drifted[selected.id]}\n              usage={usage}\n              design={design}\n              publishedBaseDomain={publishedBaseDomain}\n            />\n            {project.reviewEnabled === false ? null : (\n              <DiffComments\n                project={project}\n                build={build}\n                selectedId={selected.id}\n                selectedStoryId={selected.storyId}\n                comments={comments}\n                canReview={canReview}\n              />\n            )}\n            <DiffActionBar\n              project={project}\n              build={build}\n              snapshots={snapshots}\n              selected={selected}\n              canReview={canReview}\n              drifted={drifted}\n            />\n          </>\n        ) : (\n          <EmptyState description=\"Select a snapshot to review.\" />\n        )}\n      </div>\n    </div>\n  );\n}\n\n/** Sidebar/breadcrumb context for the review page: Builds / <build> / Review. */\nfunction reviewNav(project: Project, build: Build): NavConfig {\n  return {\n    active: \"builds\",\n    projectSlug: project.slug,\n    projectName: project.name,\n    trail: [\n      {\n        label: `${build.gitBranch} · ${build.gitSha.slice(0, 7)}`,\n        href: `/projects/${project.slug}/builds/${build.id}`,\n      },\n      { label: \"Review\" },\n    ],\n  };\n}\n\n/** Three-up diff review page: baseline, current, and diff with keyboard review. */\nexport function renderBuildDiffPage(data: BuildDiffData): RenderedContent {\n  const { project, build, snapshots, comments, selectedId, canReview, hasBaseline, drifted } = data;\n  const selected = selectedSnapshot(snapshots, selectedId);\n  const pendingGroups = reviewProgress(snapshots).pending;\n\n  return (\n    <DocumentLayout\n      title={`Review · ${build.gitBranch}`}\n      nav={reviewNav(project, build)}\n      layout=\"wide\"\n    >\n      <DiffHeader\n        project={project}\n        build={build}\n        snapshots={snapshots}\n        pendingCount={pendingGroups}\n        canReview={canReview}\n      />\n      <ReviewNotices\n        project={project}\n        build={build}\n        snapshots={snapshots}\n        drifted={drifted}\n        canReview={canReview}\n      />\n      <InsightSlot project={project} build={build} data={data.insight} />\n\n      {snapshots.length === 0 ? (\n        <EmptyState\n          title=\"No snapshots\"\n          description=\"This build has no snapshots yet. Capture may still be running.\"\n        />\n      ) : (\n        <DiffReviewGrid\n          project={project}\n          build={build}\n          snapshots={snapshots}\n          comments={comments}\n          selected={selected}\n          canReview={canReview}\n          hasBaseline={hasBaseline}\n          drifted={drifted}\n          usage={data.usage ?? []}\n          design={data.design ?? []}\n          publishedBaseDomain={data.publishedBaseDomain}\n        />\n      )}\n      <ShortcutsDialog />\n    </DocumentLayout>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AA2DA,SAAgB,iBAAiB,WAAuB,YAA2C;CACjG,OACE,UAAU,MAAM,MAAM,EAAE,OAAO,UAAU,KACzC,UAAU,MAAM,MAAM,EAAE,WAAW,aAAa,EAAE,WAAW,KAAK,KAClE,UAAU;AAEd;;AAGA,SAAS,eACP,OACgD;CAChD,MAAM,EAAE,SAAS,OAAO,WAAW,UAAU,UAAU,WAAW,aAAa,YAAY;CAC3F,MAAM,EAAE,OAAO,QAAQ,wBAAwB;CAC/C,OACE,qBAAC,OAAD;EAAK,OAAO;EAAZ,UAAA,CACE,oBAAC,SAAD;GAAkB;GAAgB;GAAkB;GAAW,YAAY,UAAU;EAAK,CAAA,GAC1F,oBAAC,OAAD;GAAK,OAAO;GACT,UAAA,WACC,qBAAA,UAAA,EAAA,UAAA;IACE,oBAAC,YAAD;KACW;KACF;KACG;KACV,UAAU,QAAQ,WAAW,SAAS,EAAE,CAAC,EAAE;KAC9B;KACb,SAAS,QAAQ,SAAS;KACnB;KACC;KACa;IACtB,CAAA;IACA,QAAQ,kBAAkB,QAAQ,OACjC,oBAAC,cAAD;KACW;KACF;KACP,YAAY,SAAS;KACrB,iBAAiB,SAAS;KAChB;KACC;IACZ,CAAA;IAEH,oBAAC,eAAD;KACW;KACF;KACI;KACD;KACC;KACF;IACV,CAAA;GACD,EAAA,CAAA,IAEF,oBAAC,YAAD,EAAY,aAAY,+BAAgC,CAAA;EAEvD,CAAA,CACF;;AAET;;AAGA,SAAS,UAAU,SAAkB,OAAyB;CAC5D,OAAO;EACL,QAAQ;EACR,aAAa,QAAQ;EACrB,aAAa,QAAQ;EACrB,OAAO,CACL;GACE,OAAO,GAAG,MAAM,UAAU,KAAK,MAAM,OAAO,MAAM,GAAG,CAAC;GACtD,MAAM,aAAa,QAAQ,KAAK,UAAU,MAAM;EAClD,GACA,EAAE,OAAO,SAAS,CACpB;CACF;AACF;;AAGA,SAAgB,oBAAoB,MAAsC;CACxE,MAAM,EAAE,SAAS,OAAO,WAAW,UAAU,YAAY,WAAW,aAAa,YAAY;CAC7F,MAAM,WAAW,iBAAiB,WAAW,UAAU;CACvD,MAAM,gBAAgB,eAAe,SAAS,CAAC,CAAC;CAEhD,OACE,qBAAC,gBAAD;EACE,OAAO,YAAY,MAAM;EACzB,KAAK,UAAU,SAAS,KAAK;EAC7B,QAAO;EAHT,UAAA;GAKE,oBAAC,YAAD;IACW;IACF;IACI;IACX,cAAc;IACH;GACZ,CAAA;GACD,oBAAC,eAAD;IACW;IACF;IACI;IACF;IACE;GACZ,CAAA;GACD,oBAAC,aAAD;IAAsB;IAAgB;IAAO,MAAM,KAAK;GAAU,CAAA;GAEjE,UAAU,WAAW,IACpB,oBAAC,YAAD;IACE,OAAM;IACN,aAAY;GACb,CAAA,IAED,oBAAC,gBAAD;IACW;IACF;IACI;IACD;IACA;IACC;IACE;IACJ;IACT,OAAO,KAAK,SAAS,CAAC;IACtB,QAAQ,KAAK,UAAU,CAAC;IACxB,qBAAqB,KAAK;GAC3B,CAAA;GAEH,oBAAC,iBAAD,CAAkB,CAAA;EACJ;;AAEpB"}

package/dist/pages/build-tests.mjs

@@ -0,0 +1,74 @@
+import "node:path";
+import "node:url";
+import.meta.url;
+import { Badge, Meta } from "../ui/feedback.mjs";
+import { Card, SectionTitle } from "../ui/layout.mjs";
+import { HStack, VStack } from "../ui/stacks.mjs";
+import { summarizeTests } from "@storyshelf/core/capture";
+import { jsx, jsxs } from "hono/jsx/jsx-runtime";
+//#region src/pages/build-tests.tsx
+/** The line under the card title: counts, and what a failure means for the build. */
+function testsSummaryNote(results) {
+	const { total, passed, failed } = summarizeTests(results);
+	if (total === 0) return "No Storybook tests ran.";
+	return failed > 0 ? `${failed} of ${total} failed. A failing test fails the build, like a failing play function.` : `All ${passed} passed.`;
+}
+/**
+* The build's Storybook `.test()` results: failures first with their message, passes behind a
+* disclosure. Null when the build ran no tests (project setting off, or none in the Storybook).
+*/
+function TestsCard(props) {
+	if (props.results.length === 0) return null;
+	const failed = props.results.filter((result) => result.status === "failed");
+	const passed = props.results.filter((result) => result.status === "passed");
+	return /* @__PURE__ */ jsxs(Card, { children: [
+		/* @__PURE__ */ jsx(SectionTitle, { children: "Storybook tests" }),
+		/* @__PURE__ */ jsxs(HStack, { children: [/* @__PURE__ */ jsx(Badge, {
+			tone: failed.length > 0 ? "danger" : "success",
+			children: failed.length > 0 ? `${failed.length} failed` : "all passed"
+		}), /* @__PURE__ */ jsxs(Meta, {
+			as: "span",
+			children: [
+				passed.length,
+				" passed · ",
+				failed.length,
+				" failed"
+			]
+		})] }),
+		/* @__PURE__ */ jsx(Meta, { children: testsSummaryNote(props.results) }),
+		/* @__PURE__ */ jsx(VStack, { children: failed.map((result) => /* @__PURE__ */ jsx(TestRow, { result }, result.id)) }),
+		passed.length > 0 ? /* @__PURE__ */ jsxs("details", { children: [/* @__PURE__ */ jsxs("summary", { children: [
+			"Passed tests (",
+			passed.length,
+			")"
+		] }), /* @__PURE__ */ jsx(VStack, { children: passed.map((result) => /* @__PURE__ */ jsx(TestRow, { result }, result.id)) })] }) : null
+	] });
+}
+function TestRow(props) {
+	const { result } = props;
+	return /* @__PURE__ */ jsxs(VStack, {
+		gap: "sm",
+		children: [/* @__PURE__ */ jsxs(HStack, {
+			align: "baseline",
+			wrap: false,
+			children: [/* @__PURE__ */ jsx(Badge, {
+				tone: result.status === "failed" ? "danger" : "success",
+				children: result.status
+			}), /* @__PURE__ */ jsxs("span", { children: [
+				result.title,
+				" ",
+				/* @__PURE__ */ jsxs(Meta, {
+					as: "span",
+					children: ["/ ", result.name]
+				})
+			] })]
+		}), result.error ? /* @__PURE__ */ jsx(Meta, {
+			as: "pre",
+			children: result.error
+		}) : null]
+	});
+}
+//#endregion
+export { TestsCard, testsSummaryNote };
+
+//# sourceMappingURL=build-tests.mjs.map

package/dist/pages/build-tests.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"build-tests.mjs","names":[],"sources":["../../src/pages/build-tests.tsx"],"sourcesContent":["import { summarizeTests, type TestResult } from \"@storyshelf/core/capture\";\nimport type { HtmlEscapedString } from \"hono/utils/html\";\nimport { Badge, Card, HStack, Meta, SectionTitle, VStack } from \"../ui/components.tsx\";\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\ntype Rendered = HtmlEscapedString | Promise<HtmlEscapedString>;\n\n/** The line under the card title: counts, and what a failure means for the build. */\nexport function testsSummaryNote(results: readonly TestResult[]): string {\n  const { total, passed, failed } = summarizeTests(results);\n  if (total === 0) {\n    return \"No Storybook tests ran.\";\n  }\n  return failed > 0\n    ? `${failed} of ${total} failed. A failing test fails the build, like a failing play function.`\n    : `All ${passed} passed.`;\n}\n\n/**\n * The build's Storybook `.test()` results: failures first with their message, passes behind a\n * disclosure. Null when the build ran no tests (project setting off, or none in the Storybook).\n */\nexport function TestsCard(props: { results: readonly TestResult[] }): Rendered | null {\n  if (props.results.length === 0) {\n    return null;\n  }\n  const failed = props.results.filter((result) => result.status === \"failed\");\n  const passed = props.results.filter((result) => result.status === \"passed\");\n  return (\n    <Card>\n      <SectionTitle>Storybook tests</SectionTitle>\n      <HStack>\n        <Badge tone={failed.length > 0 ? \"danger\" : \"success\"}>\n          {failed.length > 0 ? `${failed.length} failed` : \"all passed\"}\n        </Badge>\n        <Meta as=\"span\">\n          {passed.length} passed · {failed.length} failed\n        </Meta>\n      </HStack>\n      <Meta>{testsSummaryNote(props.results)}</Meta>\n      <VStack>\n        {failed.map((result) => (\n          <TestRow key={result.id} result={result} />\n        ))}\n      </VStack>\n      {passed.length > 0 ? (\n        <details>\n          <summary>Passed tests ({passed.length})</summary>\n          <VStack>\n            {passed.map((result) => (\n              <TestRow key={result.id} result={result} />\n            ))}\n          </VStack>\n        </details>\n      ) : null}\n    </Card>\n  );\n}\n\nfunction TestRow(props: { result: TestResult }): Rendered {\n  const { result } = props;\n  return (\n    <VStack gap=\"sm\">\n      <HStack align=\"baseline\" wrap={false}>\n        <Badge tone={result.status === \"failed\" ? \"danger\" : \"success\"}>{result.status}</Badge>\n        <span>\n          {result.title} <Meta as=\"span\">/ {result.name}</Meta>\n        </span>\n      </HStack>\n      {result.error ? <Meta as=\"pre\">{result.error}</Meta> : null}\n    </VStack>\n  );\n}\n"],"mappings":";;;;;;;;;;AASA,SAAgB,iBAAiB,SAAwC;CACvE,MAAM,EAAE,OAAO,QAAQ,WAAW,eAAe,OAAO;CACxD,IAAI,UAAU,GACZ,OAAO;CAET,OAAO,SAAS,IACZ,GAAG,OAAO,MAAM,MAAM,0EACtB,OAAO,OAAO;AACpB;;;;;AAMA,SAAgB,UAAU,OAA4D;CACpF,IAAI,MAAM,QAAQ,WAAW,GAC3B,OAAO;CAET,MAAM,SAAS,MAAM,QAAQ,QAAQ,WAAW,OAAO,WAAW,QAAQ;CAC1E,MAAM,SAAS,MAAM,QAAQ,QAAQ,WAAW,OAAO,WAAW,QAAQ;CAC1E,OACE,qBAAC,MAAD,EAAA,UAAA;EACE,oBAAC,cAAD,EAAA,UAAc,kBAA6B,CAAA;EAC3C,qBAAC,QAAD,EAAA,UAAA,CACE,oBAAC,OAAD;GAAO,MAAM,OAAO,SAAS,IAAI,WAAW;GACzC,UAAA,OAAO,SAAS,IAAI,GAAG,OAAO,OAAO,WAAW;EAC5C,CAAA,GACP,qBAAC,MAAD;GAAM,IAAG;GAAT,UAAA;IACG,OAAO;IAAO;IAAW,OAAO;IAAO;GACpC;EACA,CAAA,CAAA,EAAA,CAAA;EACR,oBAAC,MAAD,EAAA,UAAO,iBAAiB,MAAM,OAAO,EAAQ,CAAA;EAC7C,oBAAC,QAAD,EAAA,UACG,OAAO,KAAK,WACX,oBAAC,SAAD,EAAiC,OAAS,GAA5B,OAAO,EAAqB,CAC3C,EACK,CAAA;EACP,OAAO,SAAS,IACf,qBAAC,WAAD,EAAA,UAAA,CACE,qBAAC,WAAD,EAAA,UAAA;GAAS;GAAe,OAAO;GAAO;EAAU,EAAA,CAAA,GAChD,oBAAC,QAAD,EAAA,UACG,OAAO,KAAK,WACX,oBAAC,SAAD,EAAiC,OAAS,GAA5B,OAAO,EAAqB,CAC3C,EACK,CAAA,CACD,EAAA,CAAA,IACP;CACA,EAAA,CAAA;AAEV;AAEA,SAAS,QAAQ,OAAyC;CACxD,MAAM,EAAE,WAAW;CACnB,OACE,qBAAC,QAAD;EAAQ,KAAI;EAAZ,UAAA,CACE,qBAAC,QAAD;GAAQ,OAAM;GAAW,MAAM;GAA/B,UAAA,CACE,oBAAC,OAAD;IAAO,MAAM,OAAO,WAAW,WAAW,WAAW;IAAY,UAAA,OAAO;GAAc,CAAA,GACtF,qBAAC,QAAD,EAAA,UAAA;IACG,OAAO;IAAM;IAAC,qBAAC,MAAD;KAAM,IAAG;KAAT,UAAA,CAAgB,MAAG,OAAO,IAAW;;GAChD,EAAA,CAAA,CACA;EACP,CAAA,GAAA,OAAO,QAAQ,oBAAC,MAAD;GAAM,IAAG;GAAO,UAAA,OAAO;EAAY,CAAA,IAAI,IACjD;;AAEZ"}

package/dist/pages/component-detail.mjs

@@ -0,0 +1,249 @@
+import "node:path";
+import "node:url";
+import.meta.url;
+import { Button, Tabs } from "../ui/buttons.mjs";
+import { Alert, Badge, EmptyState, Meta, statusTone } from "../ui/feedback.mjs";
+import { Card, PageHeader, SectionTitle } from "../ui/layout.mjs";
+import { HStack, VStack } from "../ui/stacks.mjs";
+import { Table } from "../ui/table.mjs";
+import { Thumbnail } from "../ui/thumbnail.mjs";
+import { DocumentLayout } from "../ui/document.mjs";
+import { snapshotCardBody, snapshotCardHead, snapshotCardMeta, snapshotGrid } from "../ui/styles/review.mjs";
+import { snapshotImageUrl, snapshotVariant } from "./build-diff-model.mjs";
+import { LinkedUsage } from "./build-diff-usage.mjs";
+import { DesignReferences, DesignStrip } from "./design-links.mjs";
+import { ComponentBuilds, StoriesTab } from "./component-stories.mjs";
+import { worstStatus } from "@storyshelf/core/models";
+import { Fragment, jsx, jsxs } from "hono/jsx/jsx-runtime";
+import { createUrlBuilder } from "@storyshelf/core/urls";
+//#region src/pages/component-detail.tsx
+const TAB_LABELS = {
+	stories: "Stories",
+	states: "States",
+	history: "History",
+	design: "Design",
+	linked: "Linked"
+};
+/** The tabs a page offers: the catalog's two in both modes, the snapshot ones only with `testing`. */
+function componentTabs(testing) {
+	return testing ? [
+		"states",
+		"stories",
+		"history",
+		"design",
+		"linked"
+	] : ["stories", "history"];
+}
+/** Component detail page: stories, states, history, design and linked packages of one story file. */
+function renderComponentPage(data) {
+	const { project, importPath, title } = data;
+	return /* @__PURE__ */ jsxs(DocumentLayout, {
+		title: `${title} · Component`,
+		nav: {
+			active: "library",
+			projectSlug: project.slug,
+			projectName: project.name,
+			trail: [{ label: title }]
+		},
+		children: [
+			/* @__PURE__ */ jsx(PageHeader, {
+				title,
+				description: /* @__PURE__ */ jsx("span", {
+					class: "mono",
+					children: importPath
+				}),
+				meta: /* @__PURE__ */ jsx(HeaderMeta, { data })
+			}),
+			/* @__PURE__ */ jsx(PresenceNotice, { data }),
+			/* @__PURE__ */ jsx(Tabs, {
+				label: "Component sections",
+				tabs: componentTabs(data.testing).map((tab) => ({
+					label: TAB_LABELS[tab],
+					href: `?tab=${tab}`,
+					active: data.tab === tab
+				}))
+			}),
+			/* @__PURE__ */ jsx(ActiveTab, { data })
+		]
+	});
+}
+function HeaderMeta(props) {
+	const { captured, catalog } = props.data;
+	const stories = catalog.entries.filter((entry) => entry.type === "story").length;
+	const docs = catalog.entries.length - stories;
+	const counts = `${stories} ${stories === 1 ? "story" : "stories"}${docs > 0 ? ` · ${docs} docs` : ""}`;
+	if (!captured) return /* @__PURE__ */ jsx(Fragment, { children: counts });
+	const status = worstStatus(captured.groups.map((group) => group.primary.status));
+	const modes = new Set(captured.groups.map((group) => group.modeKey)).size;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(Badge, {
+			tone: statusTone(status),
+			icon: true,
+			children: status
+		}),
+		" ",
+		counts,
+		" · ",
+		modes,
+		" ",
+		modes === 1 ? "mode" : "modes"
+	] });
+}
+function PresenceNotice(props) {
+	const { data } = props;
+	const urls = createUrlBuilder("/", data.publishedBaseDomain);
+	const presence = data.captured?.presence ?? data.catalog.presence;
+	const { project } = data;
+	if (presence.kind === "moved") return /* @__PURE__ */ jsx(Alert, {
+		tone: "warning",
+		title: "This component moved",
+		children: /* @__PURE__ */ jsxs(HStack, { children: [/* @__PURE__ */ jsx("span", { children: "The file now lives at" }), /* @__PURE__ */ jsx(Button, {
+			variant: "secondary",
+			size: "sm",
+			href: urls.component(project.slug, presence.to),
+			children: presence.to
+		})] })
+	});
+	if (presence.kind === "deleted") return /* @__PURE__ */ jsxs(Alert, {
+		tone: "warning",
+		title: "Not in the latest build",
+		children: [
+			"Last seen in",
+			" ",
+			/* @__PURE__ */ jsxs("a", {
+				href: urls.build(project.slug, presence.lastSeen.id),
+				children: [
+					"build ",
+					presence.lastSeen.gitSha.slice(0, 7),
+					" (",
+					presence.lastSeen.gitBranch,
+					")"
+				]
+			}),
+			". The states below are from that build."
+		]
+	});
+	return null;
+}
+function ActiveTab(props) {
+	const { data } = props;
+	if (data.tab === "stories") return /* @__PURE__ */ jsx(StoriesTab, { data });
+	if (data.tab === "history") return /* @__PURE__ */ jsx(HistoryTab, { data });
+	if (data.tab === "design") return /* @__PURE__ */ jsx(DesignTab, { design: data.design });
+	if (data.tab === "linked") return /* @__PURE__ */ jsx(LinkedTab, { data });
+	return /* @__PURE__ */ jsx(StatesTab, { data });
+}
+function StatesTab(props) {
+	const { data } = props;
+	const { project, captured } = data;
+	if (!captured) return /* @__PURE__ */ jsx(EmptyState, {
+		title: "Not captured yet",
+		description: "No capture has rendered this file's stories. Its stories are listed under Stories."
+	});
+	const { shownBuild } = captured;
+	const urls = createUrlBuilder("/", data.publishedBaseDomain);
+	return /* @__PURE__ */ jsx("div", {
+		class: snapshotGrid,
+		children: captured.groups.map((group) => /* @__PURE__ */ jsx("div", {
+			id: group.storyId,
+			children: /* @__PURE__ */ jsxs(Card, {
+				padded: false,
+				children: [/* @__PURE__ */ jsxs("div", {
+					class: snapshotCardHead,
+					children: [/* @__PURE__ */ jsx("strong", { children: group.primary.storyName }), /* @__PURE__ */ jsxs("span", {
+						class: snapshotCardMeta,
+						children: [
+							/* @__PURE__ */ jsx(Badge, {
+								tone: statusTone(group.primary.status),
+								children: group.primary.status
+							}),
+							" ",
+							snapshotVariant(group.primary)
+						]
+					})]
+				}), /* @__PURE__ */ jsx("div", {
+					class: snapshotCardBody,
+					children: /* @__PURE__ */ jsx("a", {
+						href: `${urls.buildDiff(project.slug, shownBuild.id)}?snapshot=${group.representative.id}`,
+						children: /* @__PURE__ */ jsx(Thumbnail, {
+							src: snapshotImageUrl(project, shownBuild, group.primary, "image"),
+							alt: `${group.primary.storyTitle} / ${group.primary.storyName}`
+						})
+					})
+				})]
+			})
+		}, group.key))
+	});
+}
+function HistoryTab(props) {
+	const { data } = props;
+	return /* @__PURE__ */ jsxs(VStack, { children: [data.captured ? /* @__PURE__ */ jsx(CapturedHistory, {
+		data,
+		captured: data.captured
+	}) : null, /* @__PURE__ */ jsx(ComponentBuilds, { data })] });
+}
+function CapturedHistory(props) {
+	const { data, captured } = props;
+	return /* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsx(SectionTitle, { children: "Captured builds" }), /* @__PURE__ */ jsx(Table, { children: /* @__PURE__ */ jsxs("table", { children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+		/* @__PURE__ */ jsx("th", { children: "Build" }),
+		/* @__PURE__ */ jsx("th", { children: "Branch" }),
+		/* @__PURE__ */ jsx("th", { children: "States changed" }),
+		/* @__PURE__ */ jsx("th", { children: "Status" }),
+		/* @__PURE__ */ jsx("th", { children: /* @__PURE__ */ jsx("span", {
+			class: "visually-hidden",
+			children: "Actions"
+		}) })
+	] }) }), /* @__PURE__ */ jsx("tbody", { children: captured.history.map((row) => /* @__PURE__ */ jsx(CapturedRow, {
+		row,
+		data
+	}, row.build.id)) })] }) })] });
+}
+function CapturedRow(props) {
+	const { row, data } = props;
+	const urls = createUrlBuilder("/", data.publishedBaseDomain);
+	const slug = data.project.slug;
+	return /* @__PURE__ */ jsxs("tr", { children: [
+		/* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx("a", {
+			href: urls.build(slug, row.build.id),
+			children: row.build.gitSha.slice(0, 7)
+		}) }),
+		/* @__PURE__ */ jsx("td", { children: row.build.gitBranch }),
+		/* @__PURE__ */ jsxs("td", { children: [
+			row.changedStates,
+			" / ",
+			row.states
+		] }),
+		/* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(Badge, {
+			tone: statusTone(row.status),
+			children: row.status
+		}) }),
+		/* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			size: "sm",
+			href: `${urls.buildDiff(slug, row.build.id)}?snapshot=${row.snapshotId}`,
+			children: "Review"
+		}) })
+	] });
+}
+function DesignTab(props) {
+	if (props.design.length === 0) return /* @__PURE__ */ jsx(EmptyState, {
+		title: "No design linked",
+		description: "Declare a design link in the stories’ parameters, or map this file under Settings → Design."
+	});
+	return /* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsx(DesignStrip, { items: props.design }), /* @__PURE__ */ jsx(DesignReferences, { items: props.design })] });
+}
+function LinkedTab(props) {
+	const { data } = props;
+	if (data.usage.length === 0) return /* @__PURE__ */ jsx(EmptyState, {
+		title: "No linked packages",
+		description: "This component's stories use no packages linked to another project in the latest build."
+	});
+	return /* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsx(Meta, { children: "Packages these stories use, linked to the projects that publish them." }), /* @__PURE__ */ jsx(LinkedUsage, {
+		usage: data.usage,
+		publishedBaseDomain: data.publishedBaseDomain
+	})] });
+}
+//#endregion
+export { componentTabs, renderComponentPage };
+
+//# sourceMappingURL=component-detail.mjs.map

package/dist/pages/component-detail.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-detail.mjs","names":[],"sources":["../../src/pages/component-detail.tsx"],"sourcesContent":["import {\n  worstStatus,\n  type ComponentHistoryRow,\n  type ComponentPresence,\n} from \"@storyshelf/core/models\";\nimport type { Build, Project } from \"@storyshelf/core/schema\";\nimport { createUrlBuilder } from \"@storyshelf/core/urls\";\nimport type { HtmlEscapedString } from \"hono/utils/html\";\nimport type { ComponentCatalogView } from \"../routers/component-catalog.handlers.ts\";\nimport type { ComponentReview } from \"../routers/review-section.handlers.ts\";\nimport {\n  Alert,\n  Badge,\n  Button,\n  Card,\n  EmptyState,\n  HStack,\n  Meta,\n  PageHeader,\n  SectionTitle,\n  Table,\n  Tabs,\n  Thumbnail,\n  VStack,\n  statusTone,\n} from \"../ui/components.tsx\";\nimport { DocumentLayout, type RenderedContent } from \"../ui/document.tsx\";\nimport {\n  snapshotCardBody,\n  snapshotCardHead,\n  snapshotCardMeta,\n  snapshotGrid,\n} from \"../ui/styles/review.ts\";\nimport type { SnapshotGroup } from \"./build-diff-model.ts\";\nimport { snapshotImageUrl, snapshotVariant } from \"./build-diff-model.ts\";\nimport { LinkedUsage, type LinkedUsageItem } from \"./build-diff-usage.tsx\";\nimport { ComponentBuilds, StoriesTab } from \"./component-stories.tsx\";\nimport { DesignReferences, DesignStrip, type DesignItem } 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/** Tabs of the component page. */\nexport type ComponentTab = \"stories\" | \"states\" | \"history\" | \"design\" | \"linked\";\n\nconst TAB_LABELS: Record<ComponentTab, string> = {\n  stories: \"Stories\",\n  states: \"States\",\n  history: \"History\",\n  design: \"Design\",\n  linked: \"Linked\",\n};\n\n/** The tabs a page offers: the catalog's two in both modes, the snapshot ones only with `testing`. */\nexport function componentTabs(testing: boolean): readonly ComponentTab[] {\n  return testing ? [\"states\", \"stories\", \"history\", \"design\", \"linked\"] : [\"stories\", \"history\"];\n}\n\n/** What captured snapshots add to a component (`testing` only; absent until it was captured). */\nexport interface CapturedComponent {\n  /** Newest build that has the file; its states fill the States/Design/Linked tabs. */\n  shownBuild: Build;\n  groups: SnapshotGroup[];\n  history: ComponentHistoryRow[];\n  presence: ComponentPresence;\n}\n\n/** Data behind the component page. */\nexport interface ComponentPageData {\n  project: Project;\n  /** Normalized story-file path (the page's identity). */\n  importPath: string;\n  /** Title of the newest snapshot, else the catalog's (retitles update in place). */\n  title: string;\n  tab: ComponentTab;\n  /** Whether the instance has `testing`. */\n  testing: boolean;\n  /** The published Storybook's view of the file: stories, docs entries, build history. */\n  catalog: ComponentCatalogView;\n  captured: CapturedComponent | null;\n  /** Story id the Stories tab previews (the first story when unset or unknown). */\n  story: string | undefined;\n  /**\n   * Root the preview frame loads the Storybook from: the build's own URL when it is open to anyone\n   * who reaches the app, a signed `/_s/<token>` URL for a private build (needs `testing` and a\n   * `secret`), or null when no frame can load.\n   */\n  previewBase: string | null;\n  design: DesignItem[];\n  usage: LinkedUsageItem[];\n  /** Story comments of the shown build; null when the project has review off. */\n  review: ComponentReview | null;\n  publishedBaseDomain?: string;\n}\n\n/** Component detail page: stories, states, history, design and linked packages of one story file. */\nexport function renderComponentPage(data: ComponentPageData): RenderedContent {\n  const { project, importPath, title } = data;\n  return (\n    <DocumentLayout\n      title={`${title} · Component`}\n      nav={{\n        active: \"library\",\n        projectSlug: project.slug,\n        projectName: project.name,\n        trail: [{ label: title }],\n      }}\n    >\n      <PageHeader\n        title={title}\n        description={<span class=\"mono\">{importPath}</span>}\n        meta={<HeaderMeta data={data} />}\n      />\n      <PresenceNotice data={data} />\n      <Tabs\n        label=\"Component sections\"\n        tabs={componentTabs(data.testing).map((tab) => ({\n          label: TAB_LABELS[tab],\n          href: `?tab=${tab}`,\n          active: data.tab === tab,\n        }))}\n      />\n      <ActiveTab data={data} />\n    </DocumentLayout>\n  );\n}\n\nfunction HeaderMeta(props: { data: ComponentPageData }): Rendered {\n  const { captured, catalog } = props.data;\n  const stories = catalog.entries.filter((entry) => entry.type === \"story\").length;\n  const docs = catalog.entries.length - stories;\n  const counts = `${stories} ${stories === 1 ? \"story\" : \"stories\"}${docs > 0 ? ` · ${docs} docs` : \"\"}`;\n  if (!captured) {\n    return <>{counts}</>;\n  }\n  const status = worstStatus(captured.groups.map((group) => group.primary.status));\n  const modes = new Set(captured.groups.map((group) => group.modeKey)).size;\n  return (\n    <>\n      <Badge tone={statusTone(status)} icon>\n        {status}\n      </Badge>{\" \"}\n      {counts} · {modes} {modes === 1 ? \"mode\" : \"modes\"}\n    </>\n  );\n}\n\nfunction PresenceNotice(props: { data: ComponentPageData }): Rendered | null {\n  const { data } = props;\n  const urls = createUrlBuilder(\"/\", data.publishedBaseDomain);\n  const presence = data.captured?.presence ?? data.catalog.presence;\n  const { project } = data;\n  if (presence.kind === \"moved\") {\n    return (\n      <Alert tone=\"warning\" title=\"This component moved\">\n        <HStack>\n          <span>The file now lives at</span>\n          <Button variant=\"secondary\" size=\"sm\" href={urls.component(project.slug, presence.to)}>\n            {presence.to}\n          </Button>\n        </HStack>\n      </Alert>\n    );\n  }\n  if (presence.kind === \"deleted\") {\n    return (\n      <Alert tone=\"warning\" title=\"Not in the latest build\">\n        Last seen in{\" \"}\n        <a href={urls.build(project.slug, presence.lastSeen.id)}>\n          build {presence.lastSeen.gitSha.slice(0, 7)} ({presence.lastSeen.gitBranch})\n        </a>\n        . The states below are from that build.\n      </Alert>\n    );\n  }\n  return null;\n}\n\nfunction ActiveTab(props: { data: ComponentPageData }): Rendered {\n  const { data } = props;\n  if (data.tab === \"stories\") return <StoriesTab data={data} />;\n  if (data.tab === \"history\") return <HistoryTab data={data} />;\n  if (data.tab === \"design\") return <DesignTab design={data.design} />;\n  if (data.tab === \"linked\") return <LinkedTab data={data} />;\n  return <StatesTab data={data} />;\n}\n\nfunction StatesTab(props: { data: ComponentPageData }): Rendered {\n  const { data } = props;\n  const { project, captured } = data;\n  if (!captured) {\n    return (\n      <EmptyState\n        title=\"Not captured yet\"\n        description=\"No capture has rendered this file's stories. Its stories are listed under Stories.\"\n      />\n    );\n  }\n  const { shownBuild } = captured;\n  const urls = createUrlBuilder(\"/\", data.publishedBaseDomain);\n  return (\n    <div class={snapshotGrid}>\n      {captured.groups.map((group): Rendered => (\n        <div key={group.key} id={group.storyId}>\n          <Card padded={false}>\n            <div class={snapshotCardHead}>\n              <strong>{group.primary.storyName}</strong>\n              <span class={snapshotCardMeta}>\n                <Badge tone={statusTone(group.primary.status)}>{group.primary.status}</Badge>{\" \"}\n                {snapshotVariant(group.primary)}\n              </span>\n            </div>\n            <div class={snapshotCardBody}>\n              <a\n                href={`${urls.buildDiff(project.slug, shownBuild.id)}?snapshot=${group.representative.id}`}\n              >\n                <Thumbnail\n                  src={snapshotImageUrl(project, shownBuild, group.primary, \"image\")}\n                  alt={`${group.primary.storyTitle} / ${group.primary.storyName}`}\n                />\n              </a>\n            </div>\n          </Card>\n        </div>\n      ))}\n    </div>\n  );\n}\n\nfunction HistoryTab(props: { data: ComponentPageData }): Rendered {\n  const { data } = props;\n  return (\n    <VStack>\n      {data.captured ? <CapturedHistory data={data} captured={data.captured} /> : null}\n      <ComponentBuilds data={data} />\n    </VStack>\n  );\n}\n\nfunction CapturedHistory(props: {\n  data: ComponentPageData;\n  captured: CapturedComponent;\n}): Rendered {\n  const { data, captured } = props;\n  return (\n    <Card>\n      <SectionTitle>Captured builds</SectionTitle>\n      <Table>\n        <table>\n          <thead>\n            <tr>\n              <th>Build</th>\n              <th>Branch</th>\n              <th>States changed</th>\n              <th>Status</th>\n              <th>\n                <span class=\"visually-hidden\">Actions</span>\n              </th>\n            </tr>\n          </thead>\n          <tbody>\n            {captured.history.map((row): Rendered => (\n              <CapturedRow key={row.build.id} row={row} data={data} />\n            ))}\n          </tbody>\n        </table>\n      </Table>\n    </Card>\n  );\n}\n\nfunction CapturedRow(props: { row: ComponentHistoryRow; data: ComponentPageData }): Rendered {\n  const { row, data } = props;\n  const urls = createUrlBuilder(\"/\", data.publishedBaseDomain);\n  const slug = data.project.slug;\n  return (\n    <tr>\n      <td>\n        <a href={urls.build(slug, row.build.id)}>{row.build.gitSha.slice(0, 7)}</a>\n      </td>\n      <td>{row.build.gitBranch}</td>\n      <td>\n        {row.changedStates} / {row.states}\n      </td>\n      <td>\n        <Badge tone={statusTone(row.status)}>{row.status}</Badge>\n      </td>\n      <td>\n        <Button\n          variant=\"ghost\"\n          size=\"sm\"\n          href={`${urls.buildDiff(slug, row.build.id)}?snapshot=${row.snapshotId}`}\n        >\n          Review\n        </Button>\n      </td>\n    </tr>\n  );\n}\n\nfunction DesignTab(props: { design: DesignItem[] }): Rendered {\n  if (props.design.length === 0) {\n    return (\n      <EmptyState\n        title=\"No design linked\"\n        description=\"Declare a design link in the stories’ parameters, or map this file under Settings → Design.\"\n      />\n    );\n  }\n  return (\n    <Card>\n      <DesignStrip items={props.design} />\n      <DesignReferences items={props.design} />\n    </Card>\n  );\n}\n\nfunction LinkedTab(props: { data: ComponentPageData }): Rendered {\n  const { data } = props;\n  if (data.usage.length === 0) {\n    return (\n      <EmptyState\n        title=\"No linked packages\"\n        description=\"This component's stories use no packages linked to another project in the latest build.\"\n      />\n    );\n  }\n  return (\n    <Card>\n      <Meta>Packages these stories use, linked to the projects that publish them.</Meta>\n      <LinkedUsage usage={data.usage} publishedBaseDomain={data.publishedBaseDomain} />\n    </Card>\n  );\n}\n"],"mappings":"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"}