@storyshelf/app 0.6.1 → 0.7.0

package/dist/pages/library.mjs

@@ -1,91 +1,111 @@
 import "node:path";
 import "node:url";
 import.meta.url;
-import { getStore } from "../store.mjs";
-import { css } from "../ui/css.mjs";
+import { catalogOf, getStore, testingEnabled } from "../store.mjs";
 import { Button } from "../ui/buttons.mjs";
 import { Badge, EmptyState, Meta, statusTone } from "../ui/feedback.mjs";
 import { SelectField } from "../ui/forms.mjs";
-import { Card, CardSection, PageHeader, SectionTitle } from "../ui/layout.mjs";
-import { HStack, VStack } from "../ui/stacks.mjs";
+import { PageHeader } from "../ui/layout.mjs";
+import { HStack } from "../ui/stacks.mjs";
 import { FilterInput } from "../ui/filter-input.mjs";
 import { DocumentLayout } from "../ui/document.mjs";
-import { diffPaneImg, snapshotCard, snapshotCardBody, snapshotCardHead, snapshotCardMeta, snapshotGrid } from "../ui/styles/review.mjs";
+import { loadHealthPanel } from "../insights/health-panel.mjs";
+import { HealthSlot } from "./health-panel.mjs";
+import { ProjectDesignLinks } from "./design-links.mjs";
+import { loadSnapshotLayer } from "./library-snapshots.mjs";
+import { LibraryGrid } from "./library-grid.mjs";
+import { entriesFromSnapshots, groupLibrary } from "./library-model.mjs";
 import { BuildModel, ProjectModel, SnapshotModel } from "@storyshelf/core/models";
-import { storybookDir } from "@storyshelf/core/utils";
 import { Fragment, jsx, jsxs } from "hono/jsx/jsx-runtime";
 import { createUrlBuilder } from "@storyshelf/core/urls";
-import { posix } from "node:path";
 //#region src/pages/library.tsx
-/** Snapshot image with library height cap, extending the shared diff pane image. */
-const snapshotImg = css`
-  /* snapshot-img */
-  ${diffPaneImg}
-  max-height: 240px;
-  object-fit: contain;
-`;
-/** Library page: gallery grouped by title from latest build on selected branch. */
+/**
+* Library page (ADR 0006, decision 9): the components of the latest build of the selected branch,
+* whatever its status, from the build's Storybook catalog. With `testing` the cards gain
+* screenshots, statuses and design links, and the page the health panel.
+*/
 async function renderLibraryPage(slug, branch) {
-	const { db, storage } = getStore();
-	const project = await new ProjectModel(db).getBySlug(slug);
+	const project = await new ProjectModel(getStore().db).getBySlug(slug);
 	if (!project) return null;
-	const build = await getLibraryBuild(db, project, branch);
+	const build = await getLibraryBuild(project, branch);
 	if (!build) return renderEmptyLibrary(project);
-	const snapshots = await new SnapshotModel(db).listByBuild(build.id);
-	if (snapshots.length === 0) return renderEmptySnapshots(project, build);
-	return renderLibraryGrid(project, build, snapshots, await distinctBranches(db, project.id), await docsEntriesByStory(storage, project.id, build.id, snapshots));
+	const data = await loadLibraryData(project, build);
+	if (data.groups.length === 0) return renderNoStories(project, build);
+	return /* @__PURE__ */ jsxs(DocumentLayout, {
+		title: "Library",
+		nav: {
+			active: "library",
+			projectSlug: project.slug,
+			projectName: project.name
+		},
+		children: [
+			/* @__PURE__ */ jsx(LibraryHeader, {
+				project,
+				build,
+				components: data.groups.length,
+				stories: data.groups.reduce((total, group) => total + group.stories.length, 0),
+				branches: data.branches
+			}),
+			data.layer && data.layer.design.projectLinks.length > 0 ? /* @__PURE__ */ jsx(ProjectDesignLinks, { links: data.layer.design.projectLinks }) : null,
+			/* @__PURE__ */ jsx(HealthSlot, {
+				project,
+				data: data.health
+			}),
+			/* @__PURE__ */ jsx(LibraryGrid, {
+				groups: data.groups,
+				project,
+				build,
+				layer: data.layer
+			}),
+			/* @__PURE__ */ jsx("div", {
+				"data-filter-empty": true,
+				hidden: true,
+				children: /* @__PURE__ */ jsx(Meta, {
+					center: true,
+					children: "No stories match your filter."
+				})
+			})
+		]
+	});
 }
-async function getLibraryBuild(db, project, branch) {
-	const buildModel = new BuildModel(db);
+async function loadLibraryData(project, build) {
+	const testing = testingEnabled();
+	const [catalog, snapshots, branches] = await Promise.all([
+		catalogOf().load(project.id, build.id),
+		testing ? new SnapshotModel(getStore().db).listByBuild(build.id) : Promise.resolve([]),
+		distinctBranches(project.id)
+	]);
+	const entries = catalog?.entries ?? entriesFromSnapshots(snapshots);
+	return {
+		groups: groupLibrary(entries),
+		branches,
+		layer: snapshots.length > 0 ? await loadSnapshotLayer(project, snapshots) : null,
+		health: testing ? await loadHealthPanel(project) : null
+	};
+}
+/** Latest build of the branch (default branch when none is chosen), whatever its status. */
+async function getLibraryBuild(project, branch) {
+	const buildModel = new BuildModel(getStore().db);
 	const trimmed = branch?.trim();
 	const target = trimmed === void 0 || trimmed === "" ? project.gitDefaultBranch : trimmed;
-	const byBranch = await buildModel.list(project.id, { branch: target });
+	const byBranch = await buildModel.list(project.id, {
+		branch: target,
+		limit: 1
+	});
 	if (byBranch[0]) return byBranch[0];
 	if (target !== project.gitDefaultBranch) {
-		const defaults = await buildModel.list(project.id, { branch: project.gitDefaultBranch });
+		const defaults = await buildModel.list(project.id, {
+			branch: project.gitDefaultBranch,
+			limit: 1
+		});
 		if (defaults[0]) return defaults[0];
 	}
-	return (await buildModel.list(project.id))[0] ?? null;
+	return (await buildModel.list(project.id, { limit: 1 }))[0] ?? null;
 }
-async function distinctBranches(db, projectId) {
-	const buildsList = await new BuildModel(db).list(projectId);
+async function distinctBranches(projectId) {
+	const buildsList = await new BuildModel(getStore().db).list(projectId);
 	return [...new Set(buildsList.map((b) => b.gitBranch))].toSorted((a, b) => a.localeCompare(b));
 }
-/**
-* Map snapshot story ids to their component's docs entry id. Reads the build's
-* Storybook index from storage and returns an empty map when statics are
-* purged or the build has no docs entries, so the Library never links to a
-* docs page that does not exist.
-*/
-async function docsEntriesByStory(storage, projectId, buildId, snapshots) {
-	const prefixes = await readDocsPrefixes(storage, projectId, buildId);
-	const byStory = /* @__PURE__ */ new Map();
-	for (const snap of snapshots) {
-		const docsId = docsEntryId(prefixes, snap.storyId);
-		if (docsId) byStory.set(snap.storyId, docsId);
-	}
-	return byStory;
-}
-async function readDocsPrefixes(storage, projectId, buildId) {
-	const candidates = await Promise.all(["index.json", "stories.json"].map((name) => readIndexEntries(storage, projectId, buildId, name)));
-	const prefixes = /* @__PURE__ */ new Set();
-	for (const entries of candidates) if (entries) {
-		for (const entry of Object.values(entries)) if (entry?.type === "docs" && typeof entry.id === "string" && entry.id.endsWith("--docs")) prefixes.add(entry.id.slice(0, -6));
-		return prefixes;
-	}
-	return prefixes;
-}
-async function readIndexEntries(storage, projectId, buildId, name) {
-	try {
-		const raw = await storage.read(posix.join(storybookDir(projectId, buildId), name));
-		return JSON.parse(raw.toString("utf8")).entries ?? null;
-	} catch {
-		return null;
-	}
-}
-function docsEntryId(prefixes, storyId) {
-	for (const prefix of prefixes) if (storyId.startsWith(`${prefix}--`) || storyId === prefix) return `${prefix}--docs`;
-}
 function renderEmptyLibrary(project) {
 	return /* @__PURE__ */ jsxs(DocumentLayout, {
 		title: "Library",
@@ -107,8 +127,10 @@ function renderEmptyLibrary(project) {
 		})]
 	});
 }
-function renderEmptySnapshots(project, build) {
+/** A build with nothing to list: still publishing, failed, or its Storybook is gone. */
+function renderNoStories(project, build) {
 	const urls = createUrlBuilder("/", getStore().config.publishedBaseDomain);
+	const preparing = build.status === "pending";
 	return /* @__PURE__ */ jsxs(DocumentLayout, {
 		title: "Library",
 		nav: {
@@ -127,8 +149,8 @@ function renderEmptySnapshots(project, build) {
 				build.status
 			] })
 		}), /* @__PURE__ */ jsx(EmptyState, {
-			title: "No stories in latest build",
-			description: "The latest build has no snapshots yet.",
+			title: preparing ? "Preparing the library" : "No stories in the latest build",
+			description: preparing ? "The latest build is still being published. Reload in a moment." : "The latest build has no readable Storybook index, so there is nothing to list.",
 			action: /* @__PURE__ */ jsx(Button, {
 				variant: "secondary",
 				href: urls.build(project.slug, build.id),
@@ -137,55 +159,20 @@ function renderEmptySnapshots(project, build) {
 		})]
 	});
 }
-function groupByTitle(snapshots) {
-	const map = /* @__PURE__ */ new Map();
-	for (const snap of snapshots) {
-		const key = snap.storyTitle || "Untitled";
-		const list = map.get(key) ?? [];
-		list.push(snap);
-		map.set(key, list);
-	}
-	return map;
-}
-function distinctViewports(snapshots) {
-	return [...new Set(snapshots.map((s) => s.viewportName))].toSorted();
-}
-function renderLibraryGrid(project, build, snapshots, branches, docsByStory) {
-	const byTitle = groupByTitle(snapshots);
-	const viewportNames = distinctViewports(snapshots);
-	const multi = viewportNames.length > 1;
-	return /* @__PURE__ */ jsxs(DocumentLayout, {
-		title: "Library",
-		nav: {
-			active: "library",
-			projectSlug: project.slug,
-			projectName: project.name
-		},
-		children: [
-			renderLibraryHeader(project, build, snapshots.length, branches),
-			multi ? /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(Meta, {
-				as: "span",
-				children: ["Viewports: ", viewportNames.join(" · ")]
-			}) }) : null,
-			renderTitleList(byTitle, project, build, multi, docsByStory),
-			/* @__PURE__ */ jsx("div", {
-				"data-filter-empty": true,
-				hidden: true,
-				children: /* @__PURE__ */ jsx(Meta, {
-					center: true,
-					children: "No stories match your filter."
-				})
-			})
-		]
-	});
-}
-function renderLibraryHeader(project, build, storyCount, branches) {
+function LibraryHeader(props) {
+	const { project, build } = props;
 	const urls = createUrlBuilder("/", getStore().config.publishedBaseDomain);
 	return /* @__PURE__ */ jsx(PageHeader, {
 		title: "Library",
 		description: /* @__PURE__ */ jsxs(Fragment, { children: [
-			storyCount,
-			" stories · Latest build",
+			props.components,
+			" ",
+			props.components === 1 ? "component" : "components",
+			" · ",
+			props.stories,
+			" ",
+			props.stories === 1 ? "story" : "stories",
+			" · Latest build",
 			" ",
 			/* @__PURE__ */ jsxs("a", {
 				href: urls.build(project.slug, build.id),
@@ -198,8 +185,11 @@ function renderLibraryHeader(project, build, storyCount, branches) {
 			" ",
 			"· ",
 			new Date(build.createdAt).toLocaleString(),
-			" · ",
-			build.status
+			" ",
+			/* @__PURE__ */ jsx(Badge, {
+				tone: statusTone(build.status),
+				children: build.status
+			})
 		] }),
 		actions: /* @__PURE__ */ jsxs(HStack, { children: [
 			/* @__PURE__ */ jsx(FilterInput, {
@@ -213,20 +203,24 @@ function renderLibraryHeader(project, build, storyCount, branches) {
 				href: urls.short(build.id),
 				children: "View Storybook"
 			}),
-			renderBranchPicker(project, build, branches)
+			/* @__PURE__ */ jsx(BranchPicker, {
+				project,
+				build,
+				branches: props.branches
+			})
 		] })
 	});
 }
-function renderBranchPicker(project, build, branches) {
+function BranchPicker(props) {
 	return /* @__PURE__ */ jsx("form", {
 		method: "get",
-		action: `/projects/${project.slug}/library`,
+		action: `/projects/${props.project.slug}/library`,
 		children: /* @__PURE__ */ jsxs(HStack, { children: [/* @__PURE__ */ jsx(SelectField, {
 			label: "Branch",
 			name: "branch",
 			layout: "inline",
-			value: build.gitBranch,
-			options: branches.map((b) => ({
+			value: props.build.gitBranch,
+			options: props.branches.map((b) => ({
 				value: b,
 				label: b
 			}))
@@ -237,106 +231,6 @@ function renderBranchPicker(project, build, branches) {
 		})] })
 	});
 }
-function renderTitleList(byTitle, project, build, multi, docsByStory) {
-	const titles = [...byTitle.keys()].toSorted((a, b) => a.localeCompare(b));
-	return /* @__PURE__ */ jsx(VStack, { children: titles.map((title) => renderTitleGroup(title, byTitle.get(title) ?? [], project, build, multi, docsByStory)) });
-}
-function renderTitleGroup(title, group, project, build, hasMultipleViewports, docsByStory) {
-	const byViewport = groupByViewport(group);
-	const vNames = [...byViewport.keys()].toSorted();
-	return /* @__PURE__ */ jsxs(Card, {
-		padded: false,
-		"data-filter-item": true,
-		"data-filter-text": `${title} ${group.map((snap) => snap.storyName).join(" ")}`,
-		children: [/* @__PURE__ */ jsxs(CardSection, {
-			divider: true,
-			children: [/* @__PURE__ */ jsx(SectionTitle, { children: title }), /* @__PURE__ */ jsxs(Meta, {
-				as: "span",
-				children: [group.length, " stories"]
-			})]
-		}), /* @__PURE__ */ jsx(CardSection, { children: /* @__PURE__ */ jsx(VStack, { children: vNames.map((vName) => renderViewportGroup(vName, byViewport.get(vName) ?? [], project, build, hasMultipleViewports, docsByStory)) }) })]
-	}, title);
-}
-function groupByViewport(group) {
-	const map = /* @__PURE__ */ new Map();
-	for (const snap of group) {
-		const list = map.get(snap.viewportName) ?? [];
-		list.push(snap);
-		map.set(snap.viewportName, list);
-	}
-	return map;
-}
-function renderViewportGroup(vName, snaps, project, build, hasMultipleViewports, docsByStory) {
-	return /* @__PURE__ */ jsxs("div", { children: [hasMultipleViewports ? /* @__PURE__ */ jsx(SectionTitle, {
-		level: 3,
-		children: vName
-	}) : null, /* @__PURE__ */ jsx("div", {
-		class: snapshotGrid,
-		children: snaps.toSorted((a, b) => a.storyName.localeCompare(b.storyName)).map((snap) => renderSnapshotCard(snap, project, build, docsByStory))
-	})] }, vName);
-}
-function renderSnapshotCard(snap, project, build, docsByStory) {
-	const docsId = docsByStory.get(snap.storyId);
-	return /* @__PURE__ */ jsxs("div", {
-		class: snapshotCard,
-		"data-filter-item": true,
-		"data-filter-text": `${snap.storyTitle} ${snap.storyName}`,
-		children: [/* @__PURE__ */ jsxs("div", {
-			class: snapshotCardHead,
-			children: [/* @__PURE__ */ jsx("strong", { children: snap.storyName }), /* @__PURE__ */ jsxs("span", {
-				class: snapshotCardMeta,
-				children: [
-					/* @__PURE__ */ jsx(Badge, {
-						tone: statusTone(snap.status),
-						children: snap.status
-					}),
-					" ",
-					snap.viewportWidth,
-					"×",
-					snap.viewportHeight
-				]
-			})]
-		}), /* @__PURE__ */ jsxs("div", {
-			class: snapshotCardBody,
-			children: [/* @__PURE__ */ jsx("img", {
-				class: snapshotImg,
-				src: `/api/v1/projects/${project.slug}/builds/${build.id}/snapshots/${snap.id}/image`,
-				alt: `${snap.storyTitle} / ${snap.storyName}`,
-				loading: "lazy"
-			}), /* @__PURE__ */ jsx(HStack, { children: renderCardActions(snap, project, build, docsId) })]
-		})]
-	}, snap.id);
-}
-function renderCardActions(snap, project, build, docsId) {
-	const urls = createUrlBuilder("/", getStore().config.publishedBaseDomain);
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
-		/* @__PURE__ */ jsx(Button, {
-			variant: "secondary",
-			size: "sm",
-			icon: "columns",
-			href: `${urls.buildDiff(project.slug, build.id)}?snapshot=${snap.id}`,
-			children: "Review"
-		}),
-		/* @__PURE__ */ jsx(Button, {
-			variant: "ghost",
-			size: "sm",
-			icon: "external-link",
-			href: `${urls.storybookBuild(project.slug, build.id)}/?storyId=${encodeURIComponent(snap.storyId)}`,
-			target: "_blank",
-			rel: "noopener",
-			children: "Preview"
-		}),
-		docsId ? /* @__PURE__ */ jsx(Button, {
-			variant: "ghost",
-			size: "sm",
-			icon: "book",
-			href: `/projects/${project.slug}/storybook/build/${build.id}/?storyId=${encodeURIComponent(docsId)}&viewMode=docs`,
-			target: "_blank",
-			rel: "noopener",
-			children: "Docs"
-		}) : null
-	] });
-}
 //#endregion
 export { renderLibraryPage };
 

package/dist/pages/library.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"library.mjs","names":[],"sources":["../../src/pages/library.tsx"],"sourcesContent":["// oxlint-disable typescript/promise-function-async -- Hono JSX may return Promise<HtmlEscapedString>\nimport { BuildModel } from \"@storyshelf/core/models\";\nimport { ProjectModel } from \"@storyshelf/core/models\";\nimport { SnapshotModel } from \"@storyshelf/core/models\";\nimport type { Build } from \"@storyshelf/core/schema\";\nimport type { Project } from \"@storyshelf/core/schema\";\nimport type { Snapshot } from \"@storyshelf/core/schema\";\nimport { createUrlBuilder } from \"@storyshelf/core/urls\";\nimport { storybookDir } from \"@storyshelf/core/utils\";\nimport type { HtmlEscapedString } from \"hono/utils/html\";\nimport { posix } from \"node:path\";\nimport { getStore } from \"../store.ts\";\nimport {\n  Badge,\n  Button,\n  Card,\n  CardSection,\n  EmptyState,\n  FilterInput,\n  HStack,\n  Meta,\n  PageHeader,\n  SectionTitle,\n  SelectField,\n  VStack,\n  statusTone,\n} from \"../ui/components.tsx\";\nimport { css } from \"../ui/css.ts\";\nimport { DocumentLayout, type RenderedContent } from \"../ui/document.tsx\";\nimport {\n  diffPaneImg,\n  snapshotCard,\n  snapshotCardBody,\n  snapshotCardHead,\n  snapshotCardMeta,\n  snapshotGrid,\n} from \"../ui/styles/review.ts\";\n\n/** Snapshot image with library height cap, extending the shared diff pane image. */\nconst snapshotImg = css`\n  /* snapshot-img */\n  ${diffPaneImg}\n  max-height: 240px;\n  object-fit: contain;\n`;\n\n/** Library page: gallery grouped by title from latest build on selected branch. */\nexport async function renderLibraryPage(\n  slug: string,\n  branch?: string,\n): Promise<RenderedContent | null> {\n  const { db, storage } = getStore();\n  const project = await new ProjectModel(db).getBySlug(slug);\n  if (!project) return null;\n  const build = await getLibraryBuild(db, project, branch);\n  if (!build) return renderEmptyLibrary(project);\n  const snapshots = await new SnapshotModel(db).listByBuild(build.id);\n  if (snapshots.length === 0) return renderEmptySnapshots(project, build);\n  const branches = await distinctBranches(db, project.id);\n  const docsByStory = await docsEntriesByStory(storage, project.id, build.id, snapshots);\n  return renderLibraryGrid(project, build, snapshots, branches, docsByStory);\n}\n\nasync function getLibraryBuild(\n  db: ReturnType<typeof getStore>[\"db\"],\n  project: Project,\n  branch?: string,\n): Promise<Build | null> {\n  const buildModel = new BuildModel(db);\n  const trimmed = branch?.trim();\n  const target = trimmed === undefined || trimmed === \"\" ? project.gitDefaultBranch : trimmed;\n  const byBranch = await buildModel.list(project.id, { branch: target });\n  if (byBranch[0]) return byBranch[0];\n  if (target !== project.gitDefaultBranch) {\n    const defaults = await buildModel.list(project.id, { branch: project.gitDefaultBranch });\n    if (defaults[0]) return defaults[0];\n  }\n  const all = await buildModel.list(project.id);\n  return all[0] ?? null;\n}\n\nasync function distinctBranches(\n  db: ReturnType<typeof getStore>[\"db\"],\n  projectId: string,\n): Promise<string[]> {\n  const buildsList = await new BuildModel(db).list(projectId);\n  return [...new Set(buildsList.map((b) => b.gitBranch))].toSorted((a, b) => a.localeCompare(b));\n}\n\n/** Storybook index entries (only the docs subset we need). */\ninterface LibraryIndexEntry {\n  id?: string;\n  type?: string;\n}\n\n/**\n * Map snapshot story ids to their component's docs entry id. Reads the build's\n * Storybook index from storage and returns an empty map when statics are\n * purged or the build has no docs entries, so the Library never links to a\n * docs page that does not exist.\n */\nasync function docsEntriesByStory(\n  storage: ReturnType<typeof getStore>[\"storage\"],\n  projectId: string,\n  buildId: string,\n  snapshots: Snapshot[],\n): Promise<Map<string, string>> {\n  const prefixes = await readDocsPrefixes(storage, projectId, buildId);\n  const byStory = new Map<string, string>();\n  for (const snap of snapshots) {\n    const docsId = docsEntryId(prefixes, snap.storyId);\n    if (docsId) byStory.set(snap.storyId, docsId);\n  }\n  return byStory;\n}\n\nasync function readDocsPrefixes(\n  storage: ReturnType<typeof getStore>[\"storage\"],\n  projectId: string,\n  buildId: string,\n): Promise<Set<string>> {\n  const candidates = await Promise.all(\n    [\"index.json\", \"stories.json\"].map((name) =>\n      readIndexEntries(storage, projectId, buildId, name),\n    ),\n  );\n  const prefixes = new Set<string>();\n  for (const entries of candidates) {\n    if (entries) {\n      for (const entry of Object.values(entries)) {\n        if (entry?.type === \"docs\" && typeof entry.id === \"string\" && entry.id.endsWith(\"--docs\")) {\n          prefixes.add(entry.id.slice(0, -\"--docs\".length));\n        }\n      }\n      return prefixes;\n    }\n  }\n  return prefixes;\n}\n\nasync function readIndexEntries(\n  storage: ReturnType<typeof getStore>[\"storage\"],\n  projectId: string,\n  buildId: string,\n  name: string,\n): Promise<Record<string, LibraryIndexEntry> | null> {\n  try {\n    const raw = await storage.read(posix.join(storybookDir(projectId, buildId), name));\n    const parsed = JSON.parse(raw.toString(\"utf8\")) as {\n      entries?: Record<string, LibraryIndexEntry>;\n    };\n    return parsed.entries ?? null;\n  } catch {\n    return null;\n  }\n}\n\nfunction docsEntryId(prefixes: Set<string>, storyId: string): string | undefined {\n  for (const prefix of prefixes) {\n    if (storyId.startsWith(`${prefix}--`) || storyId === prefix) {\n      return `${prefix}--docs`;\n    }\n  }\n  return undefined;\n}\n\nfunction renderEmptyLibrary(project: Project): RenderedContent {\n  return (\n    <DocumentLayout\n      title=\"Library\"\n      nav={{ active: \"library\", projectSlug: project.slug, projectName: project.name }}\n    >\n      <PageHeader\n        title=\"Library\"\n        description={\n          <>All stories/components from the latest build on {project.gitDefaultBranch}.</>\n        }\n      />\n      <EmptyState title=\"No builds yet\" description=\"Upload a build to populate the library.\" />\n    </DocumentLayout>\n  );\n}\n\nfunction renderEmptySnapshots(project: Project, build: Build): RenderedContent {\n  const urls = createUrlBuilder(\"/\", getStore().config.publishedBaseDomain);\n  return (\n    <DocumentLayout\n      title=\"Library\"\n      nav={{ active: \"library\", projectSlug: project.slug, projectName: project.name }}\n    >\n      <PageHeader\n        title=\"Library\"\n        description={\n          <>\n            Latest build {build.gitBranch} · {build.gitSha.slice(0, 7)} · {build.status}\n          </>\n        }\n      />\n      <EmptyState\n        title=\"No stories in latest build\"\n        description=\"The latest build has no snapshots yet.\"\n        action={\n          <Button variant=\"secondary\" href={urls.build(project.slug, build.id)}>\n            View build\n          </Button>\n        }\n      />\n    </DocumentLayout>\n  );\n}\n\nfunction groupByTitle(snapshots: Snapshot[]): Map<string, Snapshot[]> {\n  const map = new Map<string, Snapshot[]>();\n  for (const snap of snapshots) {\n    const key = snap.storyTitle || \"Untitled\";\n    const list = map.get(key) ?? [];\n    list.push(snap);\n    map.set(key, list);\n  }\n  return map;\n}\n\nfunction distinctViewports(snapshots: Snapshot[]): string[] {\n  return [...new Set(snapshots.map((s) => s.viewportName))].toSorted();\n}\n\nfunction renderLibraryGrid(\n  project: Project,\n  build: Build,\n  snapshots: Snapshot[],\n  branches: string[],\n  docsByStory: Map<string, string>,\n): RenderedContent {\n  const byTitle = groupByTitle(snapshots);\n  const viewportNames = distinctViewports(snapshots);\n  const multi = viewportNames.length > 1;\n  return (\n    <DocumentLayout\n      title=\"Library\"\n      nav={{ active: \"library\", projectSlug: project.slug, projectName: project.name }}\n    >\n      {renderLibraryHeader(project, build, snapshots.length, branches)}\n      {multi ? (\n        <Card>\n          <Meta as=\"span\">Viewports: {viewportNames.join(\" · \")}</Meta>\n        </Card>\n      ) : null}\n      {renderTitleList(byTitle, project, build, multi, docsByStory)}\n      <div data-filter-empty hidden>\n        <Meta center>No stories match your filter.</Meta>\n      </div>\n    </DocumentLayout>\n  );\n}\n\nfunction renderLibraryHeader(\n  project: Project,\n  build: Build,\n  storyCount: number,\n  branches: string[],\n): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const urls = createUrlBuilder(\"/\", getStore().config.publishedBaseDomain);\n  return (\n    <PageHeader\n      title=\"Library\"\n      description={\n        <>\n          {storyCount} stories · Latest build{\" \"}\n          <a href={urls.build(project.slug, build.id)}>\n            {build.gitBranch} · {build.gitSha.slice(0, 7)}\n          </a>{\" \"}\n          · {new Date(build.createdAt).toLocaleString()} · {build.status}\n        </>\n      }\n      actions={\n        <HStack>\n          <FilterInput label=\"Filter stories\" placeholder=\"Filter stories…\" />\n          <Button variant=\"ghost\" size=\"sm\" icon=\"external-link\" href={urls.short(build.id)}>\n            View Storybook\n          </Button>\n          {renderBranchPicker(project, build, branches)}\n        </HStack>\n      }\n    />\n  );\n}\n\nfunction renderBranchPicker(\n  project: Project,\n  build: Build,\n  branches: string[],\n): HtmlEscapedString | Promise<HtmlEscapedString> {\n  return (\n    <form method=\"get\" action={`/projects/${project.slug}/library`}>\n      <HStack>\n        <SelectField\n          label=\"Branch\"\n          name=\"branch\"\n          layout=\"inline\"\n          value={build.gitBranch}\n          options={branches.map((b) => ({ value: b, label: b }))}\n        />\n        <Button variant=\"secondary\" type=\"submit\">\n          View\n        </Button>\n      </HStack>\n    </form>\n  );\n}\n\nfunction renderTitleList(\n  byTitle: Map<string, Snapshot[]>,\n  project: Project,\n  build: Build,\n  multi: boolean,\n  docsByStory: Map<string, string>,\n): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const titles = [...byTitle.keys()].toSorted((a, b) => a.localeCompare(b));\n  return (\n    <VStack>\n      {titles.map((title) =>\n        renderTitleGroup(title, byTitle.get(title) ?? [], project, build, multi, docsByStory),\n      )}\n    </VStack>\n  );\n}\n\nfunction renderTitleGroup(\n  title: string,\n  group: Snapshot[],\n  project: Project,\n  build: Build,\n  hasMultipleViewports: boolean,\n  docsByStory: Map<string, string>,\n): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const byViewport = groupByViewport(group);\n  const vNames = [...byViewport.keys()].toSorted();\n  return (\n    <Card\n      key={title}\n      padded={false}\n      data-filter-item\n      data-filter-text={`${title} ${group.map((snap) => snap.storyName).join(\" \")}`}\n    >\n      <CardSection divider>\n        <SectionTitle>{title}</SectionTitle>\n        <Meta as=\"span\">{group.length} stories</Meta>\n      </CardSection>\n      <CardSection>\n        <VStack>\n          {vNames.map((vName) =>\n            renderViewportGroup(\n              vName,\n              byViewport.get(vName) ?? [],\n              project,\n              build,\n              hasMultipleViewports,\n              docsByStory,\n            ),\n          )}\n        </VStack>\n      </CardSection>\n    </Card>\n  );\n}\n\nfunction groupByViewport(group: Snapshot[]): Map<string, Snapshot[]> {\n  const map = new Map<string, Snapshot[]>();\n  for (const snap of group) {\n    const list = map.get(snap.viewportName) ?? [];\n    list.push(snap);\n    map.set(snap.viewportName, list);\n  }\n  return map;\n}\n\nfunction renderViewportGroup(\n  vName: string,\n  snaps: Snapshot[],\n  project: Project,\n  build: Build,\n  hasMultipleViewports: boolean,\n  docsByStory: Map<string, string>,\n): HtmlEscapedString | Promise<HtmlEscapedString> {\n  return (\n    <div key={vName}>\n      {hasMultipleViewports ? <SectionTitle level={3}>{vName}</SectionTitle> : null}\n      <div class={snapshotGrid}>\n        {snaps\n          .toSorted((a, b) => a.storyName.localeCompare(b.storyName))\n          .map((snap) => renderSnapshotCard(snap, project, build, docsByStory))}\n      </div>\n    </div>\n  );\n}\n\nfunction renderSnapshotCard(\n  snap: Snapshot,\n  project: Project,\n  build: Build,\n  docsByStory: Map<string, string>,\n): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const docsId = docsByStory.get(snap.storyId);\n  return (\n    <div\n      key={snap.id}\n      class={snapshotCard}\n      data-filter-item\n      data-filter-text={`${snap.storyTitle} ${snap.storyName}`}\n    >\n      <div class={snapshotCardHead}>\n        <strong>{snap.storyName}</strong>\n        <span class={snapshotCardMeta}>\n          <Badge tone={statusTone(snap.status)}>{snap.status}</Badge> {snap.viewportWidth}×\n          {snap.viewportHeight}\n        </span>\n      </div>\n      <div class={snapshotCardBody}>\n        <img\n          class={snapshotImg}\n          src={`/api/v1/projects/${project.slug}/builds/${build.id}/snapshots/${snap.id}/image`}\n          alt={`${snap.storyTitle} / ${snap.storyName}`}\n          loading=\"lazy\"\n        />\n        <HStack>{renderCardActions(snap, project, build, docsId)}</HStack>\n      </div>\n    </div>\n  );\n}\n\nfunction renderCardActions(\n  snap: Snapshot,\n  project: Project,\n  build: Build,\n  docsId: string | undefined,\n): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const urls = createUrlBuilder(\"/\", getStore().config.publishedBaseDomain);\n  return (\n    <>\n      <Button\n        variant=\"secondary\"\n        size=\"sm\"\n        icon=\"columns\"\n        href={`${urls.buildDiff(project.slug, build.id)}?snapshot=${snap.id}`}\n      >\n        Review\n      </Button>\n      <Button\n        variant=\"ghost\"\n        size=\"sm\"\n        icon=\"external-link\"\n        href={`${urls.storybookBuild(project.slug, build.id)}/?storyId=${encodeURIComponent(snap.storyId)}`}\n        target=\"_blank\"\n        rel=\"noopener\"\n      >\n        Preview\n      </Button>\n      {docsId ? (\n        <Button\n          variant=\"ghost\"\n          size=\"sm\"\n          icon=\"book\"\n          href={`/projects/${project.slug}/storybook/build/${build.id}/?storyId=${encodeURIComponent(docsId)}&viewMode=docs`}\n          target=\"_blank\"\n          rel=\"noopener\"\n        >\n          Docs\n        </Button>\n      ) : null}\n    </>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"library.mjs","names":[],"sources":["../../src/pages/library.tsx"],"sourcesContent":["// oxlint-disable typescript/promise-function-async -- Hono JSX may return Promise<HtmlEscapedString>\nimport { BuildModel, ProjectModel, SnapshotModel } 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 { loadHealthPanel, type HealthPanelData } from \"../insights/health-panel.ts\";\nimport { catalogOf, getStore, testingEnabled } from \"../store.ts\";\nimport {\n  Button,\n  EmptyState,\n  FilterInput,\n  HStack,\n  Meta,\n  PageHeader,\n  SelectField,\n  statusTone,\n  Badge,\n} from \"../ui/components.tsx\";\nimport { DocumentLayout, type RenderedContent } from \"../ui/document.tsx\";\nimport { ProjectDesignLinks } from \"./design-links.tsx\";\nimport { HealthSlot } from \"./health-panel.tsx\";\nimport { LibraryGrid } from \"./library-grid.tsx\";\nimport { entriesFromSnapshots, groupLibrary, type LibraryGroup } from \"./library-model.ts\";\nimport { loadSnapshotLayer, type SnapshotLayer } from \"./library-snapshots.tsx\";\n\ntype Rendered = HtmlEscapedString | Promise<HtmlEscapedString>;\n\n/**\n * Library page (ADR 0006, decision 9): the components of the latest build of the selected branch,\n * whatever its status, from the build's Storybook catalog. With `testing` the cards gain\n * screenshots, statuses and design links, and the page the health panel.\n */\nexport async function renderLibraryPage(\n  slug: string,\n  branch?: string,\n): Promise<RenderedContent | null> {\n  const project = await new ProjectModel(getStore().db).getBySlug(slug);\n  if (!project) return null;\n  const build = await getLibraryBuild(project, branch);\n  if (!build) return renderEmptyLibrary(project);\n  const data = await loadLibraryData(project, build);\n  if (data.groups.length === 0) return renderNoStories(project, build);\n  return (\n    <DocumentLayout\n      title=\"Library\"\n      nav={{ active: \"library\", projectSlug: project.slug, projectName: project.name }}\n    >\n      <LibraryHeader\n        project={project}\n        build={build}\n        components={data.groups.length}\n        stories={data.groups.reduce((total, group) => total + group.stories.length, 0)}\n        branches={data.branches}\n      />\n      {data.layer && data.layer.design.projectLinks.length > 0 ? (\n        <ProjectDesignLinks links={data.layer.design.projectLinks} />\n      ) : null}\n      <HealthSlot project={project} data={data.health} />\n      <LibraryGrid groups={data.groups} project={project} build={build} layer={data.layer} />\n      <div data-filter-empty hidden>\n        <Meta center>No stories match your filter.</Meta>\n      </div>\n    </DocumentLayout>\n  );\n}\n\n/** Everything the library renders of a build: catalog groups, branches, and the `testing` layer. */\ninterface LibraryData {\n  groups: LibraryGroup[];\n  branches: string[];\n  layer: SnapshotLayer | null;\n  health: HealthPanelData | null;\n}\n\nasync function loadLibraryData(project: Project, build: Build): Promise<LibraryData> {\n  const testing = testingEnabled();\n  const [catalog, snapshots, branches] = await Promise.all([\n    catalogOf().load(project.id, build.id),\n    testing ? new SnapshotModel(getStore().db).listByBuild(build.id) : Promise.resolve([]),\n    distinctBranches(project.id),\n  ]);\n  const entries = catalog?.entries ?? entriesFromSnapshots(snapshots);\n  return {\n    groups: groupLibrary(entries),\n    branches,\n    layer: snapshots.length > 0 ? await loadSnapshotLayer(project, snapshots) : null,\n    health: testing ? await loadHealthPanel(project) : null,\n  };\n}\n\n/** Latest build of the branch (default branch when none is chosen), whatever its status. */\nasync function getLibraryBuild(project: Project, branch?: string): Promise<Build | null> {\n  const buildModel = new BuildModel(getStore().db);\n  const trimmed = branch?.trim();\n  const target = trimmed === undefined || trimmed === \"\" ? project.gitDefaultBranch : trimmed;\n  const byBranch = await buildModel.list(project.id, { branch: target, limit: 1 });\n  if (byBranch[0]) return byBranch[0];\n  if (target !== project.gitDefaultBranch) {\n    const defaults = await buildModel.list(project.id, {\n      branch: project.gitDefaultBranch,\n      limit: 1,\n    });\n    if (defaults[0]) return defaults[0];\n  }\n  return (await buildModel.list(project.id, { limit: 1 }))[0] ?? null;\n}\n\nasync function distinctBranches(projectId: string): Promise<string[]> {\n  const buildsList = await new BuildModel(getStore().db).list(projectId);\n  return [...new Set(buildsList.map((b) => b.gitBranch))].toSorted((a, b) => a.localeCompare(b));\n}\n\nfunction renderEmptyLibrary(project: Project): RenderedContent {\n  return (\n    <DocumentLayout\n      title=\"Library\"\n      nav={{ active: \"library\", projectSlug: project.slug, projectName: project.name }}\n    >\n      <PageHeader\n        title=\"Library\"\n        description={\n          <>All stories/components from the latest build on {project.gitDefaultBranch}.</>\n        }\n      />\n      <EmptyState title=\"No builds yet\" description=\"Upload a build to populate the library.\" />\n    </DocumentLayout>\n  );\n}\n\n/** A build with nothing to list: still publishing, failed, or its Storybook is gone. */\nfunction renderNoStories(project: Project, build: Build): RenderedContent {\n  const urls = createUrlBuilder(\"/\", getStore().config.publishedBaseDomain);\n  const preparing = build.status === \"pending\";\n  return (\n    <DocumentLayout\n      title=\"Library\"\n      nav={{ active: \"library\", projectSlug: project.slug, projectName: project.name }}\n    >\n      <PageHeader\n        title=\"Library\"\n        description={\n          <>\n            Latest build {build.gitBranch} · {build.gitSha.slice(0, 7)} · {build.status}\n          </>\n        }\n      />\n      <EmptyState\n        title={preparing ? \"Preparing the library\" : \"No stories in the latest build\"}\n        description={\n          preparing\n            ? \"The latest build is still being published. Reload in a moment.\"\n            : \"The latest build has no readable Storybook index, so there is nothing to list.\"\n        }\n        action={\n          <Button variant=\"secondary\" href={urls.build(project.slug, build.id)}>\n            View build\n          </Button>\n        }\n      />\n    </DocumentLayout>\n  );\n}\n\nfunction LibraryHeader(props: {\n  project: Project;\n  build: Build;\n  components: number;\n  stories: number;\n  branches: string[];\n}): Rendered {\n  const { project, build } = props;\n  const urls = createUrlBuilder(\"/\", getStore().config.publishedBaseDomain);\n  return (\n    <PageHeader\n      title=\"Library\"\n      description={\n        <>\n          {props.components} {props.components === 1 ? \"component\" : \"components\"} · {props.stories}{\" \"}\n          {props.stories === 1 ? \"story\" : \"stories\"} · Latest build{\" \"}\n          <a href={urls.build(project.slug, build.id)}>\n            {build.gitBranch} · {build.gitSha.slice(0, 7)}\n          </a>{\" \"}\n          · {new Date(build.createdAt).toLocaleString()}{\" \"}\n          <Badge tone={statusTone(build.status)}>{build.status}</Badge>\n        </>\n      }\n      actions={\n        <HStack>\n          <FilterInput label=\"Filter stories\" placeholder=\"Filter stories…\" />\n          <Button variant=\"ghost\" size=\"sm\" icon=\"external-link\" href={urls.short(build.id)}>\n            View Storybook\n          </Button>\n          <BranchPicker project={project} build={build} branches={props.branches} />\n        </HStack>\n      }\n    />\n  );\n}\n\nfunction BranchPicker(props: { project: Project; build: Build; branches: string[] }): Rendered {\n  return (\n    <form method=\"get\" action={`/projects/${props.project.slug}/library`}>\n      <HStack>\n        <SelectField\n          label=\"Branch\"\n          name=\"branch\"\n          layout=\"inline\"\n          value={props.build.gitBranch}\n          options={props.branches.map((b) => ({ value: b, label: b }))}\n        />\n        <Button variant=\"secondary\" type=\"submit\">\n          View\n        </Button>\n      </HStack>\n    </form>\n  );\n}\n"],"mappings":"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"}

package/dist/pages/notifications-paused.mjs

@@ -0,0 +1,22 @@
+import "node:path";
+import "node:url";
+import.meta.url;
+import { Alert } from "../ui/feedback.mjs";
+import { jsx, jsxs } from "hono/jsx/jsx-runtime";
+//#region src/pages/notifications-paused.tsx
+/** Notifications need a public URL, so without one nothing is sent (ADR 0014, decision 11). */
+function NotificationsPausedNotice(props) {
+	return props.paused ? /* @__PURE__ */ jsxs(Alert, {
+		tone: "warning",
+		title: "Notifications are paused",
+		children: [
+			"Notifications are paused until a public URL is set; set ",
+			/* @__PURE__ */ jsx("code", { children: "PUBLIC_BASE_URL" }),
+			" or confirm the detected origin on the System page. Nothing is sent meanwhile, and no channel is marked as failing."
+		]
+	}) : null;
+}
+//#endregion
+export { NotificationsPausedNotice };
+
+//# sourceMappingURL=notifications-paused.mjs.map

package/dist/pages/notifications-paused.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"notifications-paused.mjs","names":[],"sources":["../../src/pages/notifications-paused.tsx"],"sourcesContent":["import type { HtmlEscapedString } from \"hono/utils/html\";\nimport { Alert } from \"../ui/components.tsx\";\n\n/** Notifications need a public URL, so without one nothing is sent (ADR 0014, decision 11). */\nexport function NotificationsPausedNotice(props: {\n  paused: boolean | undefined;\n}): HtmlEscapedString | Promise<HtmlEscapedString> | null {\n  return props.paused ? (\n    <Alert tone=\"warning\" title=\"Notifications are paused\">\n      Notifications are paused until a public URL is set; set <code>PUBLIC_BASE_URL</code> or\n      confirm the detected origin on the System page. Nothing is sent meanwhile, and no channel is\n      marked as failing.\n    </Alert>\n  ) : null;\n}\n"],"mappings":";;;;;;;AAIA,SAAgB,0BAA0B,OAEgB;CACxD,OAAO,MAAM,SACX,qBAAC,OAAD;EAAO,MAAK;EAAU,OAAM;EAA5B,UAAA;GAAuD;GACG,oBAAC,QAAD,EAAA,UAAM,kBAAqB,CAAA;GAAC;EAG/E;CACL,CAAA,IAAA;AACN"}

package/dist/pages/profile.mjs

@@ -10,6 +10,7 @@ import { HStack, VStack } from "../ui/stacks.mjs";
 import { Table } from "../ui/table.mjs";
 import { csrfField } from "../ui/csrf-field.mjs";
 import { DocumentLayout } from "../ui/document.mjs";
+import { NotificationsPausedNotice } from "./notifications-paused.mjs";
 import { passkeyRegisterScript } from "./passkey-ceremony.mjs";
 import { jsx, jsxs } from "hono/jsx/jsx-runtime";
 import { safeImageUrl } from "@storyshelf/core/urls";
@@ -297,55 +298,59 @@ function renderProfilePage(state) {
 					] }, m.projectSlug)) })] })
 				})
 			] }),
-			/* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsx(PageHeader, {
-				title: "Notifications",
-				description: "Email alerts per project. Fine-tune topics in each project's settings."
-			}), memberships.length === 0 ? /* @__PURE__ */ jsx("p", {
-				class: profileMeta,
-				children: "No project memberships."
-			}) : /* @__PURE__ */ jsx(Table, {
-				dense: true,
-				children: /* @__PURE__ */ jsxs("table", { children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
-					/* @__PURE__ */ jsx("th", { children: "Project" }),
-					/* @__PURE__ */ jsx("th", { children: "Status" }),
-					/* @__PURE__ */ jsx("th", { children: /* @__PURE__ */ jsx("span", {
-						class: "visually-hidden",
-						children: "Actions"
-					}) })
-				] }) }), /* @__PURE__ */ jsx("tbody", { children: memberships.map((m) => {
-					const subscribed = subscribedSlugs.includes(m.projectSlug);
-					return /* @__PURE__ */ jsxs("tr", { children: [
-						/* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx("a", {
-							href: `/projects/${m.projectSlug}`,
-							children: m.projectName
-						}) }),
-						/* @__PURE__ */ jsx("td", { children: subscribed ? /* @__PURE__ */ jsx(Badge, { children: "Email on" }) : /* @__PURE__ */ jsx(Badge, { children: "Off" }) }),
-						/* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsxs("form", {
-							method: "post",
-							action: "/profile/notifications",
-							children: [
-								csrfField(),
-								/* @__PURE__ */ jsx("input", {
-									type: "hidden",
-									name: "slug",
-									value: m.projectSlug
-								}),
-								/* @__PURE__ */ jsx("input", {
-									type: "hidden",
-									name: "enabled",
-									value: subscribed ? "" : "1"
-								}),
-								/* @__PURE__ */ jsx(Button, {
-									variant: "secondary",
-									size: "sm",
-									type: "submit",
-									children: subscribed ? "Disable" : "Enable"
-								})
-							]
+			/* @__PURE__ */ jsxs(Card, { children: [
+				/* @__PURE__ */ jsx(PageHeader, {
+					title: "Notifications",
+					description: "Email alerts per project. Fine-tune topics in each project's settings."
+				}),
+				/* @__PURE__ */ jsx(NotificationsPausedNotice, { paused: state.notificationsPaused }),
+				memberships.length === 0 ? /* @__PURE__ */ jsx("p", {
+					class: profileMeta,
+					children: "No project memberships."
+				}) : /* @__PURE__ */ jsx(Table, {
+					dense: true,
+					children: /* @__PURE__ */ jsxs("table", { children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+						/* @__PURE__ */ jsx("th", { children: "Project" }),
+						/* @__PURE__ */ jsx("th", { children: "Status" }),
+						/* @__PURE__ */ jsx("th", { children: /* @__PURE__ */ jsx("span", {
+							class: "visually-hidden",
+							children: "Actions"
 						}) })
-					] }, m.projectSlug);
-				}) })] })
-			})] }),
+					] }) }), /* @__PURE__ */ jsx("tbody", { children: memberships.map((m) => {
+						const subscribed = subscribedSlugs.includes(m.projectSlug);
+						return /* @__PURE__ */ jsxs("tr", { children: [
+							/* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx("a", {
+								href: `/projects/${m.projectSlug}`,
+								children: m.projectName
+							}) }),
+							/* @__PURE__ */ jsx("td", { children: subscribed ? /* @__PURE__ */ jsx(Badge, { children: "Email on" }) : /* @__PURE__ */ jsx(Badge, { children: "Off" }) }),
+							/* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsxs("form", {
+								method: "post",
+								action: "/profile/notifications",
+								children: [
+									csrfField(),
+									/* @__PURE__ */ jsx("input", {
+										type: "hidden",
+										name: "slug",
+										value: m.projectSlug
+									}),
+									/* @__PURE__ */ jsx("input", {
+										type: "hidden",
+										name: "enabled",
+										value: subscribed ? "" : "1"
+									}),
+									/* @__PURE__ */ jsx(Button, {
+										variant: "secondary",
+										size: "sm",
+										type: "submit",
+										children: subscribed ? "Disable" : "Enable"
+									})
+								]
+							}) })
+						] }, m.projectSlug);
+					}) })] })
+				})
+			] }),
 			/* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs("form", {
 				method: "post",
 				action: "/auth/logout",