@storyshelf/app 0.5.3

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

@@ -0,0 +1 @@
+{"version":3,"file":"label-detail.mjs","names":[],"sources":["../../src/pages/label-detail.tsx"],"sourcesContent":["import { BuildModel } from \"@storyshelf/core/models\";\nimport { LabelModel } from \"@storyshelf/core/models\";\nimport { ProjectModel } from \"@storyshelf/core/models\";\nimport type { HtmlEscapedString } from \"hono/utils/html\";\nimport { getStore } from \"../store.ts\";\nimport {\n  Badge,\n  Button,\n  EmptyState,\n  HStack,\n  Meta,\n  PageHeader,\n  Table,\n  statusTone,\n} from \"../ui/components.tsx\";\nimport { DocumentLayout, type RenderedContent } from \"../ui/document.tsx\";\n/** Resolve a label type's `link_template` against a build, or return null. */\nexport function resolveLabelLink(\n  template: string | null,\n  project: { gitRepository: string | null },\n  build: { gitBranch: string },\n  value: string,\n): string | null {\n  if (!template) {\n    return null;\n  }\n  const repo = project.gitRepository ?? \"\";\n  return template\n    .replaceAll(\"{value}\", value)\n    .replaceAll(\"{repo}\", repo)\n    .replaceAll(\"{branch}\", build.gitBranch);\n}\n\n/** Label page: every build bearing `key=value`, latest first (ADR 0013). */\nexport async function renderLabelDetailPage(\n  slug: string,\n  key: string,\n  value: string,\n): Promise<RenderedContent | null> {\n  const projects = await new ProjectModel(getStore().db).list();\n  const project = projects.find((item) => item.slug === slug);\n  if (!project) {\n    return null;\n  }\n  const [builds, labelType] = await Promise.all([\n    new BuildModel(getStore().db).list(project.id, { labelKey: key, labelValue: value }),\n    new LabelModel(getStore().db).getType(project.id, key),\n  ]);\n\n  return (\n    <DocumentLayout\n      title={`${key}: ${value}`}\n      nav={{\n        active: \"labels\",\n        projectSlug: project.slug,\n        projectName: project.name,\n        trail: [{ label: `${labelType ? labelType.name : key}: ${value}` }],\n      }}\n    >\n      <PageHeader\n        title={\n          <>\n            {labelType ? labelType.name : key}: {value}\n          </>\n        }\n        description={\n          <>\n            <Badge tone=\"neutral\">{key}</Badge> Builds bearing this{\" \"}\n            {labelType ? labelType.name.toLowerCase() : \"label\"}, latest first.\n          </>\n        }\n        actions={\n          <Button variant=\"ghost\" href={`/projects/${project.slug}/labels`}>\n            All labels\n          </Button>\n        }\n      />\n\n      {builds.length === 0 ? (\n        <EmptyState\n          title=\"No builds\"\n          description={`No build currently bears the label ${key}: ${value}.`}\n        />\n      ) : (\n        <Table>\n          <table>\n            <thead>\n              <tr>\n                <th>Build</th>\n                <th>Status</th>\n                <th>Author</th>\n                <th>Created</th>\n                <th>\n                  <span class=\"visually-hidden\">Actions</span>\n                </th>\n              </tr>\n            </thead>\n            <tbody>\n              {builds.map((build): HtmlEscapedString | Promise<HtmlEscapedString> => {\n                const link = labelType?.linkTemplate\n                  ? resolveLabelLink(labelType.linkTemplate, project, build, value)\n                  : null;\n                return (\n                  <tr key={build.id}>\n                    <td>\n                      <strong>{build.gitBranch}</strong>\n                      <Meta as=\"div\" mono>\n                        {build.gitSha.slice(0, 7)}{\" \"}\n                        {build.message ? `· ${build.message.slice(0, 60)}` : \"\"}\n                      </Meta>\n                    </td>\n                    <td>\n                      <Badge tone={statusTone(build.status)}>{build.status}</Badge>\n                    </td>\n                    <td>\n                      <div>{build.authorName ?? \"—\"}</div>\n                      <Meta as=\"div\">{build.authorEmail ?? \"\"}</Meta>\n                    </td>\n                    <td>\n                      <Meta as=\"span\">{new Date(build.createdAt).toLocaleString()}</Meta>\n                    </td>\n                    <td class=\"nowrap\">\n                      <HStack wrap={false}>\n                        <Button\n                          variant=\"secondary\"\n                          size=\"sm\"\n                          href={`/projects/${project.slug}/builds/${build.id}`}\n                        >\n                          View\n                        </Button>\n                        {link ? (\n                          <Button\n                            variant=\"ghost\"\n                            size=\"sm\"\n                            href={link}\n                            target=\"_blank\"\n                            rel=\"noreferrer\"\n                          >\n                            Open link\n                          </Button>\n                        ) : null}\n                      </HStack>\n                    </td>\n                  </tr>\n                );\n              })}\n            </tbody>\n          </table>\n        </Table>\n      )}\n    </DocumentLayout>\n  );\n}\n\n/** Label types overview page (architecture.md `GET /projects/:slug/labels`). */\nexport async function renderLabelsPage(slug: string): Promise<RenderedContent | null> {\n  const projects = await new ProjectModel(getStore().db).list();\n  const project = projects.find((item) => item.slug === slug);\n  if (!project) {\n    return null;\n  }\n  const labelTypes = await new LabelModel(getStore().db).listTypes(project.id);\n\n  return (\n    <DocumentLayout\n      title={`Labels · ${project.name}`}\n      nav={{ active: \"labels\", projectSlug: project.slug, projectName: project.name }}\n    >\n      <PageHeader\n        title=\"Labels\"\n        description=\"Typed labels attach values to builds and link out to external systems.\"\n      />\n\n      {labelTypes.length === 0 ? (\n        <EmptyState\n          title=\"No label types\"\n          description=\"No label types are configured for this project.\"\n        />\n      ) : (\n        <Table>\n          <table>\n            <thead>\n              <tr>\n                <th>Key</th>\n                <th>Name</th>\n                <th>Template</th>\n              </tr>\n            </thead>\n            <tbody>\n              {labelTypes.map((labelType): HtmlEscapedString | Promise<HtmlEscapedString> => (\n                <tr key={labelType.id}>\n                  <td>\n                    <Badge tone=\"neutral\">{labelType.key}</Badge>\n                  </td>\n                  <td>{labelType.name}</td>\n                  <td class=\"truncate max-w-cell\">{labelType.linkTemplate ?? \"—\"}</td>\n                </tr>\n              ))}\n            </tbody>\n          </table>\n        </Table>\n      )}\n    </DocumentLayout>\n  );\n}\n"],"mappings":"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"}

package/dist/pages/library.mjs

@@ -0,0 +1,343 @@
+import "node:path";
+import "node:url";
+import.meta.url;
+import { getStore } from "../store.mjs";
+import { css } from "../ui/css.mjs";
+import { Button } from "../ui/buttons.mjs";
+import { Badge, 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 { 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 { 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. */
+async function renderLibraryPage(slug, branch) {
+	const { db, storage } = getStore();
+	const project = await new ProjectModel(db).getBySlug(slug);
+	if (!project) return null;
+	const build = await getLibraryBuild(db, 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));
+}
+async function getLibraryBuild(db, project, branch) {
+	const buildModel = new BuildModel(db);
+	const trimmed = branch?.trim();
+	const target = trimmed === void 0 || trimmed === "" ? project.gitDefaultBranch : trimmed;
+	const byBranch = await buildModel.list(project.id, { branch: target });
+	if (byBranch[0]) return byBranch[0];
+	if (target !== project.gitDefaultBranch) {
+		const defaults = await buildModel.list(project.id, { branch: project.gitDefaultBranch });
+		if (defaults[0]) return defaults[0];
+	}
+	return (await buildModel.list(project.id))[0] ?? null;
+}
+async function distinctBranches(db, projectId) {
+	const buildsList = await new BuildModel(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",
+		nav: {
+			active: "library",
+			projectSlug: project.slug,
+			projectName: project.name
+		},
+		children: [/* @__PURE__ */ jsx(PageHeader, {
+			title: "Library",
+			description: /* @__PURE__ */ jsxs(Fragment, { children: [
+				"All stories/components from the latest build on ",
+				project.gitDefaultBranch,
+				"."
+			] })
+		}), /* @__PURE__ */ jsx(EmptyState, {
+			title: "No builds yet",
+			description: "Upload a build to populate the library."
+		})]
+	});
+}
+function renderEmptySnapshots(project, build) {
+	const urls = createUrlBuilder("/", getStore().config.publishedBaseDomain);
+	return /* @__PURE__ */ jsxs(DocumentLayout, {
+		title: "Library",
+		nav: {
+			active: "library",
+			projectSlug: project.slug,
+			projectName: project.name
+		},
+		children: [/* @__PURE__ */ jsx(PageHeader, {
+			title: "Library",
+			description: /* @__PURE__ */ jsxs(Fragment, { children: [
+				"Latest build ",
+				build.gitBranch,
+				" · ",
+				build.gitSha.slice(0, 7),
+				" · ",
+				build.status
+			] })
+		}), /* @__PURE__ */ jsx(EmptyState, {
+			title: "No stories in latest build",
+			description: "The latest build has no snapshots yet.",
+			action: /* @__PURE__ */ jsx(Button, {
+				variant: "secondary",
+				href: urls.build(project.slug, build.id),
+				children: "View 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) {
+	const urls = createUrlBuilder("/", getStore().config.publishedBaseDomain);
+	return /* @__PURE__ */ jsx(PageHeader, {
+		title: "Library",
+		description: /* @__PURE__ */ jsxs(Fragment, { children: [
+			storyCount,
+			" stories · Latest build",
+			" ",
+			/* @__PURE__ */ jsxs("a", {
+				href: urls.build(project.slug, build.id),
+				children: [
+					build.gitBranch,
+					" · ",
+					build.gitSha.slice(0, 7)
+				]
+			}),
+			" ",
+			"· ",
+			new Date(build.createdAt).toLocaleString(),
+			" · ",
+			build.status
+		] }),
+		actions: /* @__PURE__ */ jsxs(HStack, { children: [
+			/* @__PURE__ */ jsx(FilterInput, {
+				label: "Filter stories",
+				placeholder: "Filter stories…"
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "sm",
+				icon: "external-link",
+				href: urls.short(build.id),
+				children: "View Storybook"
+			}),
+			renderBranchPicker(project, build, branches)
+		] })
+	});
+}
+function renderBranchPicker(project, build, branches) {
+	return /* @__PURE__ */ jsx("form", {
+		method: "get",
+		action: `/projects/${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: b,
+				label: b
+			}))
+		}), /* @__PURE__ */ jsx(Button, {
+			variant: "secondary",
+			type: "submit",
+			children: "View"
+		})] })
+	});
+}
+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 };
+
+//# sourceMappingURL=library.mjs.map

package/dist/pages/library.mjs.map

@@ -0,0 +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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"}

package/dist/pages/login.mjs

@@ -0,0 +1,117 @@
+import "node:path";
+import "node:url";
+import.meta.url;
+import { getStore } from "../store.mjs";
+import { Button } from "../ui/buttons.mjs";
+import { Alert, Meta } from "../ui/feedback.mjs";
+import { Field } from "../ui/forms.mjs";
+import { Card, PageHeader } from "../ui/layout.mjs";
+import { VStack } from "../ui/stacks.mjs";
+import { DocumentLayout } from "../ui/document.mjs";
+import { passkeyLoginScript } from "./passkey-ceremony.mjs";
+import { jsx, jsxs } from "hono/jsx/jsx-runtime";
+//#region src/pages/login.tsx
+/** Resolve auth UI text with defaults. */
+function authUi() {
+	try {
+		return getStore().ui.auth ?? {};
+	} catch {
+		return {};
+	}
+}
+function ssoLabel(template, label) {
+	const raw = template ?? "Sign in with {label}";
+	return raw.includes("{label}") ? raw.replaceAll("{label}", label) : `${raw} ${label}`;
+}
+/** Sign-in page with engine login widgets. */
+function renderLoginPage(state = {}) {
+	const ui = authUi();
+	const title = ui.title ?? "Sign in";
+	const subtitle = ui.subtitle;
+	const passwordLabel = ui.passwordLabel ?? "Password";
+	const submitLabel = ui.submitLabel ?? "Sign in";
+	return /* @__PURE__ */ jsx(DocumentLayout, {
+		title,
+		layout: "bare",
+		children: /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(VStack, {
+			gap: "lg",
+			children: [
+				/* @__PURE__ */ jsx(PageHeader, {
+					title,
+					description: subtitle
+				}),
+				state.error ? /* @__PURE__ */ jsx(Alert, {
+					tone: "danger",
+					title: "Could not sign in",
+					children: state.error
+				}) : null,
+				state.engineMethods?.some((method) => method.kind === "password") ? /* @__PURE__ */ jsx("form", {
+					method: "post",
+					action: "/auth/engine/login",
+					novalidate: true,
+					children: /* @__PURE__ */ jsxs(VStack, { children: [
+						/* @__PURE__ */ jsx(Field, {
+							label: "Email",
+							name: "email",
+							type: "email",
+							required: true,
+							value: state.email,
+							autocomplete: "email"
+						}),
+						/* @__PURE__ */ jsx(Field, {
+							label: passwordLabel,
+							name: "password",
+							type: "password",
+							required: true,
+							autocomplete: "current-password",
+							placeholder: ui.passwordPlaceholder
+						}),
+						/* @__PURE__ */ jsx(Button, {
+							variant: "primary",
+							type: "submit",
+							children: submitLabel
+						})
+					] })
+				}) : null,
+				state.engineMethods?.filter((method) => method.kind === "oauth" || method.kind === "sso").map((provider) => /* @__PURE__ */ jsx(Button, {
+					variant: "secondary",
+					href: provider.url,
+					children: ssoLabel(ui.ssoLabelTemplate, provider.label)
+				}, provider.id)),
+				state.engineMethods?.some((method) => method.kind === "passkey") ? /* @__PURE__ */ jsxs("div", {
+					class: "mt-1",
+					children: [/* @__PURE__ */ jsxs(VStack, { children: [
+						/* @__PURE__ */ jsx(Meta, {
+							center: true,
+							children: "or"
+						}),
+						/* @__PURE__ */ jsx(Button, {
+							variant: "secondary",
+							type: "button",
+							"data-passkey-login": "true",
+							children: "Sign in with a passkey"
+						}),
+						/* @__PURE__ */ jsx("p", {
+							class: "login__help",
+							"data-passkey-login-status": "true",
+							"aria-live": "polite",
+							children: /* @__PURE__ */ jsx(Meta, {})
+						})
+					] }), /* @__PURE__ */ jsx("script", { dangerouslySetInnerHTML: { __html: passkeyLoginScript() } })]
+				}) : null,
+				ui.helpText ? /* @__PURE__ */ jsx("p", {
+					class: "login__help",
+					children: /* @__PURE__ */ jsx(Meta, { children: ui.helpText })
+				}) : null,
+				ui.footerText ? /* @__PURE__ */ jsx("p", {
+					class: "login__footer",
+					children: /* @__PURE__ */ jsx(Meta, { children: ui.footerText })
+				}) : null
+			]
+		}) })
+	});
+}
+//#endregion
+export { renderLoginPage };
+
+//# sourceMappingURL=login.mjs.map

package/dist/pages/login.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"login.mjs","names":[],"sources":["../../src/pages/login.tsx"],"sourcesContent":["import { getStore } from \"../store.ts\";\nimport { Alert, Button, Card, Field, Meta, PageHeader, VStack } from \"../ui/components.tsx\";\nimport { DocumentLayout, type RenderedContent } from \"../ui/document.tsx\";\nimport { passkeyLoginScript } from \"./passkey-ceremony.ts\";\n\n/** One engine login widget (descriptor-driven). */\nexport interface EngineMethodLink {\n  kind: \"password\" | \"oauth\" | \"passkey\" | \"sso\";\n  id: string;\n  label: string;\n  url: string;\n}\n\n/** Form state for the sign-in page (engine widgets and error message). */\nexport interface LoginPageState {\n  error?: string;\n  /** Engine login widgets (descriptor-driven). */\n  engineMethods?: EngineMethodLink[];\n  /** Pre-filled email for the password form (e.g. after failed login). */\n  email?: string;\n}\n\n/** Resolve auth UI text with defaults. */\nfunction authUi(): NonNullable<import(\"@storyshelf/core/config\").UIConfig[\"auth\"]> {\n  try {\n    return getStore().ui.auth ?? {};\n  } catch {\n    return {};\n  }\n}\n\nfunction ssoLabel(template: string | undefined, label: string): string {\n  const raw = template ?? \"Sign in with {label}\";\n  return raw.includes(\"{label}\") ? raw.replaceAll(\"{label}\", label) : `${raw} ${label}`;\n}\n\n/** Sign-in page with engine login widgets. */\n// oxlint-disable-next-line eslint/max-lines-per-function -- page composes a few sections, still one concern\nexport function renderLoginPage(state: LoginPageState = {}): RenderedContent {\n  const ui = authUi();\n  const title = ui.title ?? \"Sign in\";\n  const subtitle = ui.subtitle;\n  const passwordLabel = ui.passwordLabel ?? \"Password\";\n  const submitLabel = ui.submitLabel ?? \"Sign in\";\n  return (\n    <DocumentLayout title={title} layout=\"bare\">\n      <Card>\n        <VStack gap=\"lg\">\n          <PageHeader title={title} description={subtitle} />\n\n          {state.error ? (\n            <Alert tone=\"danger\" title=\"Could not sign in\">\n              {state.error}\n            </Alert>\n          ) : null}\n\n          {state.engineMethods?.some((method) => method.kind === \"password\") ? (\n            <form method=\"post\" action=\"/auth/engine/login\" novalidate>\n              <VStack>\n                <Field\n                  label=\"Email\"\n                  name=\"email\"\n                  type=\"email\"\n                  required\n                  value={state.email}\n                  autocomplete=\"email\"\n                />\n                <Field\n                  label={passwordLabel}\n                  name=\"password\"\n                  type=\"password\"\n                  required\n                  autocomplete=\"current-password\"\n                  placeholder={ui.passwordPlaceholder}\n                />\n                <Button variant=\"primary\" type=\"submit\">\n                  {submitLabel}\n                </Button>\n              </VStack>\n            </form>\n          ) : null}\n\n          {state.engineMethods\n            ?.filter((method) => method.kind === \"oauth\" || method.kind === \"sso\")\n            .map(\n              // oxlint-disable-next-line typescript/promise-function-async -- JSX map is sync\n              (provider) => (\n                <Button variant=\"secondary\" href={provider.url} key={provider.id}>\n                  {ssoLabel(ui.ssoLabelTemplate, provider.label)}\n                </Button>\n              ),\n            )}\n\n          {state.engineMethods?.some((method) => method.kind === \"passkey\") ? (\n            <div class=\"mt-1\">\n              <VStack>\n                <Meta center>or</Meta>\n                <Button variant=\"secondary\" type=\"button\" data-passkey-login=\"true\">\n                  Sign in with a passkey\n                </Button>\n                <p class=\"login__help\" data-passkey-login-status=\"true\" aria-live=\"polite\">\n                  <Meta />\n                </p>\n              </VStack>\n              <script dangerouslySetInnerHTML={{ __html: passkeyLoginScript() }} />\n            </div>\n          ) : null}\n\n          {ui.helpText ? (\n            <p class=\"login__help\">\n              <Meta>{ui.helpText}</Meta>\n            </p>\n          ) : null}\n\n          {ui.footerText ? (\n            <p class=\"login__footer\">\n              <Meta>{ui.footerText}</Meta>\n            </p>\n          ) : null}\n        </VStack>\n      </Card>\n    </DocumentLayout>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AAuBA,SAAS,SAA0E;CACjF,IAAI;EACF,OAAO,SAAS,CAAC,CAAC,GAAG,QAAQ,CAAC;CAChC,QAAQ;EACN,OAAO,CAAC;CACV;AACF;AAEA,SAAS,SAAS,UAA8B,OAAuB;CACrE,MAAM,MAAM,YAAY;CACxB,OAAO,IAAI,SAAS,SAAS,IAAI,IAAI,WAAW,WAAW,KAAK,IAAI,GAAG,IAAI,GAAG;AAChF;;AAIA,SAAgB,gBAAgB,QAAwB,CAAC,GAAoB;CAC3E,MAAM,KAAK,OAAO;CAClB,MAAM,QAAQ,GAAG,SAAS;CAC1B,MAAM,WAAW,GAAG;CACpB,MAAM,gBAAgB,GAAG,iBAAiB;CAC1C,MAAM,cAAc,GAAG,eAAe;CACtC,OACE,oBAAC,gBAAD;EAAuB;EAAO,QAAO;EACnC,UAAA,oBAAC,MAAD,EAAA,UACE,qBAAC,QAAD;GAAQ,KAAI;GAAZ,UAAA;IACE,oBAAC,YAAD;KAAmB;KAAO,aAAa;IAAW,CAAA;IAEjD,MAAM,QACL,oBAAC,OAAD;KAAO,MAAK;KAAS,OAAM;KACxB,UAAA,MAAM;IACF,CAAA,IACL;IAEH,MAAM,eAAe,MAAM,WAAW,OAAO,SAAS,UAAU,IAC/D,oBAAC,QAAD;KAAM,QAAO;KAAO,QAAO;KAAqB,YAAA;KAC9C,UAAA,qBAAC,QAAD,EAAA,UAAA;MACE,oBAAC,OAAD;OACE,OAAM;OACN,MAAK;OACL,MAAK;OACL,UAAA;OACA,OAAO,MAAM;OACb,cAAa;MACd,CAAA;MACD,oBAAC,OAAD;OACE,OAAO;OACP,MAAK;OACL,MAAK;OACL,UAAA;OACA,cAAa;OACb,aAAa,GAAG;MACjB,CAAA;MACD,oBAAC,QAAD;OAAQ,SAAQ;OAAU,MAAK;OAC5B,UAAA;MACK,CAAA;KACF,EAAA,CAAA;IACJ,CAAA,IACJ;IAEH,MAAM,eACH,QAAQ,WAAW,OAAO,SAAS,WAAW,OAAO,SAAS,KAAK,CAAC,CACrE,KAEE,aACC,oBAAC,QAAD;KAAQ,SAAQ;KAAY,MAAM,SAAS;KACxC,UAAA,SAAS,GAAG,kBAAkB,SAAS,KAAK;IACvC,GAF6C,SAAS,EAEtD,CAEZ;IAED,MAAM,eAAe,MAAM,WAAW,OAAO,SAAS,SAAS,IAC9D,qBAAC,OAAD;KAAK,OAAM;KAAX,UAAA,CACE,qBAAC,QAAD,EAAA,UAAA;MACE,oBAAC,MAAD;OAAM,QAAA;OAAO,UAAA;MAAQ,CAAA;MACrB,oBAAC,QAAD;OAAQ,SAAQ;OAAY,MAAK;OAAS,sBAAmB;OAAO,UAAA;MAE5D,CAAA;MACR,oBAAC,KAAD;OAAG,OAAM;OAAc,6BAA0B;OAAO,aAAU;OAChE,UAAA,oBAAC,MAAD,CAAO,CAAA;MACN,CAAA;KACG,EAAA,CAAA,GACR,oBAAC,UAAD,EAAQ,yBAAyB,EAAE,QAAQ,mBAAmB,EAAE,EAAI,CAAA,CACjE;IACH,CAAA,IAAA;IAEH,GAAG,WACF,oBAAC,KAAD;KAAG,OAAM;KACP,UAAA,oBAAC,MAAD,EAAA,UAAO,GAAG,SAAe,CAAA;IACxB,CAAA,IACD;IAEH,GAAG,aACF,oBAAC,KAAD;KAAG,OAAM;KACP,UAAA,oBAAC,MAAD,EAAA,UAAO,GAAG,WAAiB,CAAA;IAC1B,CAAA,IACD;GACE;EACJ,CAAA,EAAA,CAAA;CACQ,CAAA;AAEpB"}

package/dist/pages/passkey-ceremony.mjs

@@ -0,0 +1,97 @@
+import "node:path";
+import "node:url";
+import.meta.url;
+//#region src/pages/passkey-ceremony.ts
+/**
+* Page-local WebAuthn ceremony scripts (vanilla JS, no dependencies).
+*
+* `login.tsx` (authenticate) and `profile.tsx` (register) inline these via
+* `dangerouslySetInnerHTML`. Both feature-detect first: without
+* `PublicKeyCredential` or a secure context the button disables and a note
+* explains passkeys need HTTPS or localhost.
+*/
+const B64_HELPERS = `
+    function b64dec(s){s=s.replace(/-/g,'+').replace(/_/g,'/');while(s.length%4){s+='=';}var bin=atob(s);var b=new Uint8Array(bin.length);for(var i=0;i<bin.length;i++){b[i]=bin.charCodeAt(i);}return b;}
+    function b64enc(buf){var bin='';var b=new Uint8Array(buf);for(var i=0;i<b.length;i++){bin+=String.fromCharCode(b[i]);}return btoa(bin).replace(/\\+/g,'-').replace(/\\//g,'_').replace(/=+$/,'');}
+`.trim();
+const SUPPORT_CHECK = `
+    if(!window.PublicKeyCredential||!window.isSecureContext){
+      btn.disabled=true;
+      say('Passkeys need HTTPS or localhost.');
+      return;
+    }
+`.trim();
+/** Registration ceremony for the profile page (E7 flow, shared helpers). */
+function passkeyRegisterScript() {
+	return `
+  (function(){
+    var btn=document.querySelector('[data-passkey-register]');
+    if(!btn){return;}
+    function say(msg){var el=document.querySelector('[data-passkey-status]');if(el){el.textContent=msg;}}
+${B64_HELPERS}
+${SUPPORT_CHECK}
+    btn.addEventListener('click',function(){
+      btn.disabled=true;
+      say('Waiting for your authenticator…');
+      var nameInput=document.querySelector('input[name="keyName"]');
+      var name=nameInput&&nameInput.value.trim()?nameInput.value.trim():undefined;
+      fetch('/api/auth/passkey/generate-register-options',{credentials:'same-origin',headers:{'accept':'application/json'}})
+        .then(function(r){if(!r.ok){throw new Error('options '+r.status);}return r.json();})
+        .then(function(o){
+          var pk={challenge:b64dec(o.challenge),rp:o.rp,user:{id:b64dec(o.user.id),name:o.user.name,displayName:o.user.displayName||o.user.name},pubKeyCredParams:o.pubKeyCredParams};
+          if(o.timeout){pk.timeout=o.timeout;}
+          if(o.excludeCredentials){pk.excludeCredentials=o.excludeCredentials.map(function(c){return{id:b64dec(c.id),type:c.type,transports:c.transports};});}
+          if(o.authenticatorSelection){pk.authenticatorSelection=o.authenticatorSelection;}
+          if(o.attestation){pk.attestation=o.attestation;}
+          return navigator.credentials.create({publicKey:pk});
+        })
+        .then(function(cred){
+          var payload={id:cred.id,rawId:b64enc(cred.rawId),type:cred.type,response:{clientDataJSON:b64enc(cred.response.clientDataJSON),attestationObject:b64enc(cred.response.attestationObject)}};
+          if(cred.response.getTransports){payload.response.transports=cred.response.getTransports();}
+          if(name){payload.name=name;}
+          return fetch('/api/auth/passkey/verify-registration',{method:'POST',credentials:'same-origin',headers:{'content-type':'application/json'},body:JSON.stringify({response:payload,name:name})});
+        })
+        .then(function(r){if(!r.ok){throw new Error('verify '+r.status);}window.location.reload();})
+        .catch(function(){say('Registration failed — try again.');btn.disabled=false;});
+    });
+  })();
+  `.trim();
+}
+/** Authentication ceremony for the login page (E8 flow). */
+function passkeyLoginScript() {
+	return `
+  (function(){
+    var btn=document.querySelector('[data-passkey-login]');
+    if(!btn){return;}
+    function say(msg){var el=document.querySelector('[data-passkey-login-status]');if(el){el.textContent=msg;}}
+${B64_HELPERS}
+${SUPPORT_CHECK}
+    btn.addEventListener('click',function(){
+      btn.disabled=true;
+      say('Waiting for your authenticator…');
+      fetch('/api/auth/passkey/generate-authenticate-options',{credentials:'same-origin',headers:{'accept':'application/json'}})
+        .then(function(r){if(!r.ok){throw new Error('options '+r.status);}return r.json();})
+        .then(function(o){
+          var pk={challenge:b64dec(o.challenge)};
+          if(o.timeout){pk.timeout=o.timeout;}
+          if(o.rpId){pk.rpId=o.rpId;}
+          if(o.allowCredentials){pk.allowCredentials=o.allowCredentials.map(function(c){return{id:b64dec(c.id),type:c.type,transports:c.transports};});}
+          if(o.userVerification){pk.userVerification=o.userVerification;}
+          return navigator.credentials.get({publicKey:pk});
+        })
+        .then(function(cred){
+          var authenticatorResponse={authenticatorData:b64enc(cred.response.authenticatorData),clientDataJSON:b64enc(cred.response.clientDataJSON),signature:b64enc(cred.response.signature)};
+          if(cred.response.userHandle){authenticatorResponse.userHandle=b64enc(cred.response.userHandle);}
+          var payload={id:cred.id,rawId:b64enc(cred.rawId),type:cred.type,response:authenticatorResponse};
+          return fetch('/api/auth/passkey/verify-authentication',{method:'POST',credentials:'same-origin',headers:{'content-type':'application/json'},body:JSON.stringify({response:payload})});
+        })
+        .then(function(r){if(!r.ok){throw new Error('verify '+r.status);}window.location.href='/';})
+        .catch(function(){say('Passkey sign-in failed — try again.');btn.disabled=false;});
+    });
+  })();
+  `.trim();
+}
+//#endregion
+export { passkeyLoginScript, passkeyRegisterScript };
+
+//# sourceMappingURL=passkey-ceremony.mjs.map