@storyshelf/app 0.6.2 → 0.8.0

package/dist/pages/build-tests.mjs

@@ -0,0 +1,73 @@
+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";
+// 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]
+	});
+}
+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,248 @@
+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";
+// 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
+	})] });
+}
+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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"}

package/dist/pages/component-stories.mjs

@@ -0,0 +1,167 @@
+import "node:path";
+import "node:url";
+import.meta.url;
+import { Button } from "../ui/buttons.mjs";
+import { Badge, EmptyState, Meta } from "../ui/feedback.mjs";
+import { Card, SectionTitle } from "../ui/layout.mjs";
+import { HStack, VStack } from "../ui/stacks.mjs";
+import { Table } from "../ui/table.mjs";
+import { PreviewEmbed } from "../ui/preview-embed.mjs";
+import { PREVIEW_TOKEN_REFRESH, isSignedPreviewBase } from "../routers/preview-base.mjs";
+import { StoryComments } from "./review-comments.mjs";
+import { jsx, jsxs } from "hono/jsx/jsx-runtime";
+import { createUrlBuilder } from "@storyshelf/core/urls";
+// src/pages/component-stories.tsx
+/** Stories tab: the selected story in a sandboxed preview, and every story and docs entry. */
+function StoriesTab(props) {
+	const { data } = props;
+	const { entries } = data.catalog;
+	const selected = selectedStory(data);
+	if (entries.length === 0) return /* @__PURE__ */ jsx(EmptyState, {
+		title: "No stories in this build",
+		description: "The build's Storybook index lists no stories for this file."
+	});
+	return /* @__PURE__ */ jsxs(VStack, { children: [
+		selected ? /* @__PURE__ */ jsx(PreviewCard, {
+			data,
+			story: selected
+		}) : null,
+		selected && data.review ? /* @__PURE__ */ jsx(StoryComments, {
+			project: data.project,
+			build: data.catalog.build,
+			storyId: selected.id,
+			comments: data.review.comments,
+			canComment: data.review.canComment
+		}) : null,
+		/* @__PURE__ */ jsx(Card, {
+			padded: false,
+			children: /* @__PURE__ */ jsx(Table, { children: /* @__PURE__ */ jsxs("table", { children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+				/* @__PURE__ */ jsx("th", { children: "Name" }),
+				/* @__PURE__ */ jsx("th", { children: "Kind" }),
+				/* @__PURE__ */ jsx("th", { children: "Tags" }),
+				/* @__PURE__ */ jsx("th", { children: /* @__PURE__ */ jsx("span", {
+					class: "visually-hidden",
+					children: "Actions"
+				}) })
+			] }) }), /* @__PURE__ */ jsx("tbody", { children: entries.map((entry) => /* @__PURE__ */ jsx(EntryRow, {
+				entry,
+				data,
+				selected: selected?.id
+			}, entry.id)) })] }) })
+		})
+	] });
+}
+/** The story the preview shows: `?story=` when it names one, else the first. */
+function selectedStory(data) {
+	const stories = data.catalog.entries.filter((entry) => entry.type === "story");
+	return stories.find((entry) => entry.id === data.story) ?? stories[0];
+}
+const previewPath = (story) => `/iframe.html?id=${encodeURIComponent(story.id)}&viewMode=story`;
+/** A frame under a signed URL asks for a new token before the old one expires. */
+function refreshOf(data, story) {
+	if (data.previewBase === null || !isSignedPreviewBase(data.previewBase)) return {};
+	return { refresh: {
+		url: `/api/v1/projects/${data.project.slug}/builds/${data.catalog.build.id}/preview-token`,
+		path: previewPath(story),
+		seconds: PREVIEW_TOKEN_REFRESH
+	} };
+}
+function PreviewCard(props) {
+	const { data, story } = props;
+	return /* @__PURE__ */ jsxs(Card, {
+		id: "preview",
+		children: [/* @__PURE__ */ jsx(SectionTitle, { children: story.name }), data.previewBase === null ? /* @__PURE__ */ jsx(Meta, { children: "This build needs a sign-in to view, so it cannot run in a frame here. Open it in Storybook instead." }) : /* @__PURE__ */ jsx(PreviewEmbed, {
+			src: `${data.previewBase}${previewPath(story)}`,
+			title: `${story.title} / ${story.name}`,
+			...refreshOf(data, story)
+		})]
+	});
+}
+function EntryRow(props) {
+	const { entry, data } = props;
+	return /* @__PURE__ */ jsxs("tr", {
+		id: entry.id,
+		children: [
+			/* @__PURE__ */ jsx("td", { children: entry.name }),
+			/* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(Badge, {
+				tone: entry.type === "docs" ? "info" : "neutral",
+				children: entry.type
+			}) }),
+			/* @__PURE__ */ jsx("td", { children: entry.tags.join(", ") }),
+			/* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsxs(HStack, { children: [entry.type === "story" && entry.id !== props.selected ? /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "sm",
+				icon: "image",
+				href: `?tab=stories&story=${encodeURIComponent(entry.id)}#preview`,
+				children: "Preview"
+			}) : null, /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "sm",
+				icon: "external-link",
+				href: `${storybookBase(data)}/?storyId=${encodeURIComponent(entry.id)}${entry.type === "docs" ? "&viewMode=docs" : ""}`,
+				target: "_blank",
+				rel: "noopener",
+				children: "Open"
+			})] }) })
+		]
+	});
+}
+/** Published builds that hold the component, and whether its stories changed since the build before. */
+function ComponentBuilds(props) {
+	const { data } = props;
+	const urls = createUrlBuilder("/", data.publishedBaseDomain);
+	const { history } = data.catalog;
+	if (history.length === 0) return /* @__PURE__ */ jsx(EmptyState, {
+		title: "No published builds",
+		description: "No catalogued build holds this file yet."
+	});
+	return /* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsx(SectionTitle, { children: "Published 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: "Stories" }),
+		/* @__PURE__ */ jsx("th", { children: "Changes" })
+	] }) }), /* @__PURE__ */ jsx("tbody", { children: history.map((row) => /* @__PURE__ */ jsxs("tr", { children: [
+		/* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx("a", {
+			href: urls.build(data.project.slug, row.build.id),
+			children: row.build.gitSha.slice(0, 7)
+		}) }),
+		/* @__PURE__ */ jsx("td", { children: row.build.gitBranch }),
+		/* @__PURE__ */ jsx("td", { children: row.component.storyCount }),
+		/* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(ChangeCell, { row }) })
+	] }, row.build.id)) })] }) })] });
+}
+function ChangeCell(props) {
+	const { row } = props;
+	if (row.change === "new") return /* @__PURE__ */ jsx(Badge, {
+		tone: "info",
+		children: "new here"
+	});
+	if (row.change === "unchanged") return /* @__PURE__ */ jsx(Meta, {
+		as: "span",
+		children: "unchanged"
+	});
+	const parts = changeParts(row);
+	return /* @__PURE__ */ jsxs(HStack, { children: [/* @__PURE__ */ jsx(Badge, {
+		tone: "warning",
+		children: "changed"
+	}), parts ? /* @__PURE__ */ jsx(Meta, {
+		as: "span",
+		children: parts
+	}) : null] });
+}
+/** "2 added · 1 removed · 1 renamed", or empty when the counts are not known. */
+function changeParts(row) {
+	const { changes } = row;
+	if (!changes) return "";
+	return [
+		changes.added > 0 ? `${changes.added} added` : "",
+		changes.removed > 0 ? `${changes.removed} removed` : "",
+		changes.renamed > 0 ? `${changes.renamed} renamed` : ""
+	].filter((part) => part !== "").join(" · ");
+}
+function storybookBase(data) {
+	return createUrlBuilder("/", data.publishedBaseDomain).storybookBuild(data.project.slug, data.catalog.build.id);
+}
+export { ComponentBuilds, StoriesTab };
+
+//# sourceMappingURL=component-stories.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"component-stories.mjs","names":[],"sources":["../../src/pages/component-stories.tsx"],"sourcesContent":["/** The catalog's tabs of the component page: its stories with a click-to-load preview, and its builds. */\nimport type { CatalogEntry } from \"@storyshelf/core/capture\";\nimport { createUrlBuilder } from \"@storyshelf/core/urls\";\nimport type { HtmlEscapedString } from \"hono/utils/html\";\nimport type { CatalogHistoryRow } from \"../routers/component-catalog.handlers.ts\";\nimport { isSignedPreviewBase, PREVIEW_TOKEN_REFRESH } from \"../routers/preview-base.ts\";\nimport {\n  Badge,\n  Button,\n  Card,\n  EmptyState,\n  HStack,\n  Meta,\n  PreviewEmbed,\n  SectionTitle,\n  Table,\n  VStack,\n} from \"../ui/components.tsx\";\nimport type { ComponentPageData } from \"./component-detail.tsx\";\nimport { StoryComments } from \"./review-comments.tsx\";\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\ntype Rendered = HtmlEscapedString | Promise<HtmlEscapedString>;\n\n/** Stories tab: the selected story in a sandboxed preview, and every story and docs entry. */\nexport function StoriesTab(props: { data: ComponentPageData }): Rendered {\n  const { data } = props;\n  const { entries } = data.catalog;\n  const selected = selectedStory(data);\n  if (entries.length === 0) {\n    return (\n      <EmptyState\n        title=\"No stories in this build\"\n        description=\"The build's Storybook index lists no stories for this file.\"\n      />\n    );\n  }\n  return (\n    <VStack>\n      {selected ? <PreviewCard data={data} story={selected} /> : null}\n      {selected && data.review ? (\n        <StoryComments\n          project={data.project}\n          build={data.catalog.build}\n          storyId={selected.id}\n          comments={data.review.comments}\n          canComment={data.review.canComment}\n        />\n      ) : null}\n      <Card padded={false}>\n        <Table>\n          <table>\n            <thead>\n              <tr>\n                <th>Name</th>\n                <th>Kind</th>\n                <th>Tags</th>\n                <th>\n                  <span class=\"visually-hidden\">Actions</span>\n                </th>\n              </tr>\n            </thead>\n            <tbody>\n              {entries.map((entry): Rendered => (\n                <EntryRow key={entry.id} entry={entry} data={data} selected={selected?.id} />\n              ))}\n            </tbody>\n          </table>\n        </Table>\n      </Card>\n    </VStack>\n  );\n}\n\n/** The story the preview shows: `?story=` when it names one, else the first. */\nfunction selectedStory(data: ComponentPageData): CatalogEntry | undefined {\n  const stories = data.catalog.entries.filter((entry) => entry.type === \"story\");\n  return stories.find((entry) => entry.id === data.story) ?? stories[0];\n}\n\nconst previewPath = (story: CatalogEntry): string =>\n  `/iframe.html?id=${encodeURIComponent(story.id)}&viewMode=story`;\n\n/** A frame under a signed URL asks for a new token before the old one expires. */\nfunction refreshOf(\n  data: ComponentPageData,\n  story: CatalogEntry,\n): { refresh?: { url: string; path: string; seconds: number } } {\n  if (data.previewBase === null || !isSignedPreviewBase(data.previewBase)) {\n    return {};\n  }\n  return {\n    refresh: {\n      url: `/api/v1/projects/${data.project.slug}/builds/${data.catalog.build.id}/preview-token`,\n      path: previewPath(story),\n      seconds: PREVIEW_TOKEN_REFRESH,\n    },\n  };\n}\n\nfunction PreviewCard(props: { data: ComponentPageData; story: CatalogEntry }): Rendered {\n  const { data, story } = props;\n  return (\n    <Card id=\"preview\">\n      <SectionTitle>{story.name}</SectionTitle>\n      {data.previewBase === null ? (\n        <Meta>\n          This build needs a sign-in to view, so it cannot run in a frame here. Open it in Storybook\n          instead.\n        </Meta>\n      ) : (\n        <PreviewEmbed\n          src={`${data.previewBase}${previewPath(story)}`}\n          title={`${story.title} / ${story.name}`}\n          {...refreshOf(data, story)}\n        />\n      )}\n    </Card>\n  );\n}\n\nfunction EntryRow(props: {\n  entry: CatalogEntry;\n  data: ComponentPageData;\n  selected: string | undefined;\n}): Rendered {\n  const { entry, data } = props;\n  return (\n    <tr id={entry.id}>\n      <td>{entry.name}</td>\n      <td>\n        <Badge tone={entry.type === \"docs\" ? \"info\" : \"neutral\"}>{entry.type}</Badge>\n      </td>\n      <td>{entry.tags.join(\", \")}</td>\n      <td>\n        <HStack>\n          {entry.type === \"story\" && entry.id !== props.selected ? (\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              icon=\"image\"\n              href={`?tab=stories&story=${encodeURIComponent(entry.id)}#preview`}\n            >\n              Preview\n            </Button>\n          ) : null}\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            icon=\"external-link\"\n            href={`${storybookBase(data)}/?storyId=${encodeURIComponent(entry.id)}${entry.type === \"docs\" ? \"&viewMode=docs\" : \"\"}`}\n            target=\"_blank\"\n            rel=\"noopener\"\n          >\n            Open\n          </Button>\n        </HStack>\n      </td>\n    </tr>\n  );\n}\n\n/** Published builds that hold the component, and whether its stories changed since the build before. */\nexport function ComponentBuilds(props: { data: ComponentPageData }): Rendered {\n  const { data } = props;\n  const urls = createUrlBuilder(\"/\", data.publishedBaseDomain);\n  const { history } = data.catalog;\n  if (history.length === 0) {\n    return (\n      <EmptyState\n        title=\"No published builds\"\n        description=\"No catalogued build holds this file yet.\"\n      />\n    );\n  }\n  return (\n    <Card>\n      <SectionTitle>Published builds</SectionTitle>\n      <Table>\n        <table>\n          <thead>\n            <tr>\n              <th>Build</th>\n              <th>Branch</th>\n              <th>Stories</th>\n              <th>Changes</th>\n            </tr>\n          </thead>\n          <tbody>\n            {history.map((row): Rendered => (\n              <tr key={row.build.id}>\n                <td>\n                  <a href={urls.build(data.project.slug, row.build.id)}>\n                    {row.build.gitSha.slice(0, 7)}\n                  </a>\n                </td>\n                <td>{row.build.gitBranch}</td>\n                <td>{row.component.storyCount}</td>\n                <td>\n                  <ChangeCell row={row} />\n                </td>\n              </tr>\n            ))}\n          </tbody>\n        </table>\n      </Table>\n    </Card>\n  );\n}\n\nfunction ChangeCell(props: { row: CatalogHistoryRow }): Rendered {\n  const { row } = props;\n  if (row.change === \"new\") {\n    return <Badge tone=\"info\">new here</Badge>;\n  }\n  if (row.change === \"unchanged\") {\n    return <Meta as=\"span\">unchanged</Meta>;\n  }\n  const parts = changeParts(row);\n  return (\n    <HStack>\n      <Badge tone=\"warning\">changed</Badge>\n      {parts ? <Meta as=\"span\">{parts}</Meta> : null}\n    </HStack>\n  );\n}\n\n/** \"2 added · 1 removed · 1 renamed\", or empty when the counts are not known. */\nfunction changeParts(row: CatalogHistoryRow): string {\n  const { changes } = row;\n  if (!changes) {\n    return \"\";\n  }\n  return [\n    changes.added > 0 ? `${changes.added} added` : \"\",\n    changes.removed > 0 ? `${changes.removed} removed` : \"\",\n    changes.renamed > 0 ? `${changes.renamed} renamed` : \"\",\n  ]\n    .filter((part) => part !== \"\")\n    .join(\" · \");\n}\n\nfunction storybookBase(data: ComponentPageData): string {\n  return createUrlBuilder(\"/\", data.publishedBaseDomain).storybookBuild(\n    data.project.slug,\n    data.catalog.build.id,\n  );\n}\n"],"mappings":"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"}