@storyshelf/app 0.6.2 → 0.8.0

package/dist/pages/review-verdict.mjs

@@ -0,0 +1,101 @@
+import "node:path";
+import "node:url";
+import.meta.url;
+import { Button } from "../ui/buttons.mjs";
+import { Badge, Meta, statusTone } from "../ui/feedback.mjs";
+import { TextareaField } from "../ui/forms.mjs";
+import { Card, SectionTitle } from "../ui/layout.mjs";
+import { HStack, VStack } from "../ui/stacks.mjs";
+import { RelativeTime } from "../ui/time.mjs";
+import { csrfField } from "../ui/csrf-field.mjs";
+import { BUILD_STATUSES } from "@storyshelf/core/types";
+import { jsx, jsxs } from "hono/jsx/jsx-runtime";
+// src/pages/review-verdict.tsx
+/** The verdict card of the build page: where the build stands, the verdicts, and the reviewer's controls. */
+/** Build-level verdicts: the approvals so far, each reviewer's latest verdict, and the controls. */
+function VerdictCard(props) {
+	const { data } = props;
+	return /* @__PURE__ */ jsxs(Card, { children: [
+		/* @__PURE__ */ jsxs(HStack, {
+			justify: "between",
+			children: [/* @__PURE__ */ jsx(SectionTitle, { children: "Review" }), /* @__PURE__ */ jsx(Badge, {
+				tone: statusTone(data.state.status),
+				children: standing(data)
+			})]
+		}),
+		/* @__PURE__ */ jsx(Meta, { children: summary(data) }),
+		/* @__PURE__ */ jsx(VStack, { children: data.state.latest.map((review) => /* @__PURE__ */ jsxs(HStack, {
+			align: "baseline",
+			wrap: false,
+			children: [
+				/* @__PURE__ */ jsx(Badge, {
+					tone: review.verdict === "approved" ? "success" : "danger",
+					children: review.verdict
+				}),
+				/* @__PURE__ */ jsx("strong", { children: review.userId ? data.names.get(review.userId) ?? review.userId : "anonymous" }),
+				/* @__PURE__ */ jsx(Meta, {
+					as: "span",
+					children: /* @__PURE__ */ jsx(RelativeTime, { value: review.createdAt })
+				}),
+				review.body ? /* @__PURE__ */ jsx("span", { children: review.body }) : null
+			]
+		}, review.id)) }),
+		/* @__PURE__ */ jsx(VerdictControls, { data })
+	] });
+}
+/**
+* The form for a reviewer once the build can take a verdict; while its Storybook is still
+* publishing a notice stands in (the server refuses a verdict until then, ADR 0013, decision 3).
+*/
+function VerdictControls(props) {
+	const { data } = props;
+	if (!data.canVerdict || data.build.status === "failed") return null;
+	if (data.publishing === "pending") return /* @__PURE__ */ jsx(Meta, { children: "Waiting for the Storybook to publish. You can give a verdict once it has." });
+	return data.publishing === "success" ? /* @__PURE__ */ jsx(VerdictForm, { data }) : null;
+}
+/** The reviewer's controls: an optional note and the two verdicts. */
+function VerdictForm(props) {
+	const { project, build } = props.data;
+	const url = `/projects/${project.slug}/builds/${build.id}/reviews`;
+	return /* @__PURE__ */ jsxs("form", {
+		method: "post",
+		action: url,
+		"hx-post": url,
+		"hx-target": "body",
+		class: "mt-1 max-w-prose",
+		children: [csrfField(), /* @__PURE__ */ jsxs(VStack, { children: [/* @__PURE__ */ jsx(TextareaField, {
+			label: "Note with your verdict (optional)",
+			name: "body",
+			id: "verdict-body",
+			rows: 2
+		}), /* @__PURE__ */ jsxs(HStack, { children: [/* @__PURE__ */ jsx(Button, {
+			variant: "primary",
+			type: "submit",
+			name: "verdict",
+			value: "approved",
+			children: "Approve build"
+		}), /* @__PURE__ */ jsx(Button, {
+			variant: "danger",
+			type: "submit",
+			name: "verdict",
+			value: "rejected",
+			children: "Reject build"
+		})] })] })]
+	});
+}
+/** The status badge text: the build's status, worded for review. */
+function standing(data) {
+	const { status } = data.state;
+	if (status === "pending") return "waiting for review";
+	return BUILD_STATUSES.includes(status) ? status : "unknown";
+}
+/** One line on what decides the build. */
+function summary(data) {
+	const { state, testing } = data;
+	if (testing) return "Screenshots decide this build; a verdict is a sign-off and does not change its status.";
+	const needed = `${state.approvalsRequired} ${state.approvalsRequired === 1 ? "approval" : "approvals"}`;
+	return `${state.approvals} of ${needed} given. Any rejection rejects the build. Open comments do not block a verdict.`;
+}
+export { VerdictCard };
+
+//# sourceMappingURL=review-verdict.mjs.map

package/dist/pages/review-verdict.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"review-verdict.mjs","names":[],"sources":["../../src/pages/review-verdict.tsx"],"sourcesContent":["/** The verdict card of the build page: where the build stands, the verdicts, and the reviewer's controls. */\nimport { BUILD_STATUSES } from \"@storyshelf/core/types\";\nimport type { HtmlEscapedString } from \"hono/utils/html\";\nimport type { ReviewSectionData } from \"../routers/review-section.handlers.ts\";\nimport {\n  Badge,\n  Button,\n  Card,\n  HStack,\n  Meta,\n  RelativeTime,\n  SectionTitle,\n  TextareaField,\n  VStack,\n  statusTone,\n} from \"../ui/components.tsx\";\nimport { csrfField } from \"../ui/csrf-field.tsx\";\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\ntype Rendered = HtmlEscapedString | Promise<HtmlEscapedString>;\n\n/** Build-level verdicts: the approvals so far, each reviewer's latest verdict, and the controls. */\nexport function VerdictCard(props: { data: ReviewSectionData }): Rendered {\n  const { data } = props;\n  return (\n    <Card>\n      <HStack justify=\"between\">\n        <SectionTitle>Review</SectionTitle>\n        <Badge tone={statusTone(data.state.status)}>{standing(data)}</Badge>\n      </HStack>\n      <Meta>{summary(data)}</Meta>\n      <VStack>\n        {data.state.latest.map((review): Rendered => (\n          <HStack key={review.id} align=\"baseline\" wrap={false}>\n            <Badge tone={review.verdict === \"approved\" ? \"success\" : \"danger\"}>\n              {review.verdict}\n            </Badge>\n            <strong>\n              {review.userId ? (data.names.get(review.userId) ?? review.userId) : \"anonymous\"}\n            </strong>\n            <Meta as=\"span\">\n              <RelativeTime value={review.createdAt} />\n            </Meta>\n            {review.body ? <span>{review.body}</span> : null}\n          </HStack>\n        ))}\n      </VStack>\n      <VerdictControls data={data} />\n    </Card>\n  );\n}\n\n/**\n * The form for a reviewer once the build can take a verdict; while its Storybook is still\n * publishing a notice stands in (the server refuses a verdict until then, ADR 0013, decision 3).\n */\nfunction VerdictControls(props: { data: ReviewSectionData }): Rendered | null {\n  const { data } = props;\n  if (!data.canVerdict || data.build.status === \"failed\") {\n    return null;\n  }\n  if (data.publishing === \"pending\") {\n    return <Meta>Waiting for the Storybook to publish. You can give a verdict once it has.</Meta>;\n  }\n  return data.publishing === \"success\" ? <VerdictForm data={data} /> : null;\n}\n\n/** The reviewer's controls: an optional note and the two verdicts. */\nfunction VerdictForm(props: { data: ReviewSectionData }): Rendered {\n  const { project, build } = props.data;\n  const url = `/projects/${project.slug}/builds/${build.id}/reviews`;\n  return (\n    <form method=\"post\" action={url} hx-post={url} hx-target=\"body\" class=\"mt-1 max-w-prose\">\n      {csrfField()}\n      <VStack>\n        <TextareaField\n          label=\"Note with your verdict (optional)\"\n          name=\"body\"\n          id=\"verdict-body\"\n          rows={2}\n        />\n        <HStack>\n          <Button variant=\"primary\" type=\"submit\" name=\"verdict\" value=\"approved\">\n            Approve build\n          </Button>\n          <Button variant=\"danger\" type=\"submit\" name=\"verdict\" value=\"rejected\">\n            Reject build\n          </Button>\n        </HStack>\n      </VStack>\n    </form>\n  );\n}\n\n/** The status badge text: the build's status, worded for review. */\nfunction standing(data: ReviewSectionData): string {\n  const { status } = data.state;\n  if (status === \"pending\") {\n    return \"waiting for review\";\n  }\n  return BUILD_STATUSES.includes(status) ? status : \"unknown\";\n}\n\n/** One line on what decides the build. */\nfunction summary(data: ReviewSectionData): string {\n  const { state, testing } = data;\n  if (testing) {\n    return \"Screenshots decide this build; a verdict is a sign-off and does not change its status.\";\n  }\n  const needed = `${state.approvalsRequired} ${state.approvalsRequired === 1 ? \"approval\" : \"approvals\"}`;\n  return `${state.approvals} of ${needed} given. Any rejection rejects the build. Open comments do not block a verdict.`;\n}\n"],"mappings":";;;;;;;;;;;;;;;AAuBA,SAAgB,YAAY,OAA8C;CACxE,MAAM,EAAE,SAAS;CACjB,OACE,qBAAC,MAAD,EAAA,UAAA;EACE,qBAAC,QAAD;GAAQ,SAAQ;GAAhB,UAAA,CACE,oBAAC,cAAD,EAAA,UAAc,SAAoB,CAAA,GAClC,oBAAC,OAAD;IAAO,MAAM,WAAW,KAAK,MAAM,MAAM;IAAI,UAAA,SAAS,IAAI;GAAS,CAAA,CAC7D;;EACR,oBAAC,MAAD,EAAA,UAAO,QAAQ,IAAI,EAAQ,CAAA;EAC3B,oBAAC,QAAD,EAAA,UACG,KAAK,MAAM,OAAO,KAAK,WACtB,qBAAC,QAAD;GAAwB,OAAM;GAAW,MAAM;GAA/C,UAAA;IACE,oBAAC,OAAD;KAAO,MAAM,OAAO,YAAY,aAAa,YAAY;KACtD,UAAA,OAAO;IACH,CAAA;IACP,oBAAC,UAAD,EAAA,UACG,OAAO,SAAU,KAAK,MAAM,IAAI,OAAO,MAAM,KAAK,OAAO,SAAU,YAC9D,CAAA;IACR,oBAAC,MAAD;KAAM,IAAG;KACP,UAAA,oBAAC,cAAD,EAAc,OAAO,OAAO,UAAY,CAAA;IACpC,CAAA;IACL,OAAO,OAAO,oBAAC,QAAD,EAAA,UAAO,OAAO,KAAW,CAAA,IAAI;GACtC;EAXK,GAAA,OAAO,EAWZ,CACT,EACK,CAAA;EACR,oBAAC,iBAAD,EAAuB,KAAO,CAAA;CAC1B,EAAA,CAAA;AAEV;;;;;AAMA,SAAS,gBAAgB,OAAqD;CAC5E,MAAM,EAAE,SAAS;CACjB,IAAI,CAAC,KAAK,cAAc,KAAK,MAAM,WAAW,UAC5C,OAAO;CAET,IAAI,KAAK,eAAe,WACtB,OAAO,oBAAC,MAAD,EAAA,UAAM,4EAA+E,CAAA;CAE9F,OAAO,KAAK,eAAe,YAAY,oBAAC,aAAD,EAAmB,KAAO,CAAA,IAAI;AACvE;;AAGA,SAAS,YAAY,OAA8C;CACjE,MAAM,EAAE,SAAS,UAAU,MAAM;CACjC,MAAM,MAAM,aAAa,QAAQ,KAAK,UAAU,MAAM,GAAG;CACzD,OACE,qBAAC,QAAD;EAAM,QAAO;EAAO,QAAQ;EAAK,WAAS;EAAK,aAAU;EAAO,OAAM;EAAtE,UAAA,CACG,UAAU,GACX,qBAAC,QAAD,EAAA,UAAA,CACE,oBAAC,eAAD;GACE,OAAM;GACN,MAAK;GACL,IAAG;GACH,MAAM;EACP,CAAA,GACD,qBAAC,QAAD,EAAA,UAAA,CACE,oBAAC,QAAD;GAAQ,SAAQ;GAAU,MAAK;GAAS,MAAK;GAAU,OAAM;GAAW,UAAA;EAEhE,CAAA,GACR,oBAAC,QAAD;GAAQ,SAAQ;GAAS,MAAK;GAAS,MAAK;GAAU,OAAM;GAAW,UAAA;EAE/D,CAAA,CACF,EAAA,CAAA,CACF,EAAA,CAAA,CACJ;;AAEV;;AAGA,SAAS,SAAS,MAAiC;CACjD,MAAM,EAAE,WAAW,KAAK;CACxB,IAAI,WAAW,WACb,OAAO;CAET,OAAO,eAAe,SAAS,MAAM,IAAI,SAAS;AACpD;;AAGA,SAAS,QAAQ,MAAiC;CAChD,MAAM,EAAE,OAAO,YAAY;CAC3B,IAAI,SACF,OAAO;CAET,MAAM,SAAS,GAAG,MAAM,kBAAkB,GAAG,MAAM,sBAAsB,IAAI,aAAa;CAC1F,OAAO,GAAG,MAAM,UAAU,MAAM,OAAO;AACzC"}

package/dist/pages/root.mjs

@@ -8,7 +8,7 @@ import { Card, SectionTitle } from "../ui/layout.mjs";
 import { HStack, VStack } from "../ui/stacks.mjs";
 import { DocumentLayout } from "../ui/document.mjs";
 import { jsx, jsxs } from "hono/jsx/jsx-runtime";
-//#region src/pages/root.tsx
+// src/pages/root.tsx
 /** Landing hero card: card surface with centered marketing padding. */
 const heroCard = css`
   /* hero-card */
@@ -92,7 +92,6 @@ function renderRootPage() {
 		})]
 	});
 }
-//#endregion
 export { renderRootPage };
 
 //# sourceMappingURL=root.mjs.map

package/dist/pages/settings-ai.mjs

@@ -0,0 +1,68 @@
+import "node:path";
+import "node:url";
+import.meta.url;
+import { Button } from "../ui/buttons.mjs";
+import { Alert, Meta } from "../ui/feedback.mjs";
+import { FormActions, SelectField } from "../ui/forms.mjs";
+import { Card, SectionTitle } from "../ui/layout.mjs";
+import { csrfField } from "../ui/csrf-field.mjs";
+import { jsx, jsxs } from "hono/jsx/jsx-runtime";
+// src/pages/settings-ai.tsx
+function ProfileForm(props) {
+	const { project, ai } = props;
+	return /* @__PURE__ */ jsxs("form", {
+		method: "post",
+		action: `/projects/${project.slug}/settings/ai`,
+		"hx-post": `/projects/${project.slug}/settings/ai`,
+		"hx-target": "body",
+		"hx-swap": "outerHTML",
+		children: [
+			csrfField(),
+			/* @__PURE__ */ jsx(SelectField, {
+				label: "AI profile",
+				name: "aiProfile",
+				value: project.aiProfile ?? "",
+				disabled: !ai.isSiteAdmin,
+				options: [{
+					value: "",
+					label: "Off (no data leaves the server)"
+				}, ...ai.profiles.map((name) => ({
+					value: name,
+					label: name === ai.defaultProfile ? `${name} (default)` : name
+				}))],
+				hint: "Only site admins can change this because it decides where project data is sent."
+			}),
+			ai.isSiteAdmin ? /* @__PURE__ */ jsx(FormActions, { children: /* @__PURE__ */ jsx(Button, {
+				variant: "primary",
+				type: "submit",
+				icon: "check",
+				children: "Save changes"
+			}) }) : /* @__PURE__ */ jsx(Meta, { children: "You need site admin access to change the AI profile." })
+		]
+	});
+}
+/** AI settings tab: per-project profile gate (site admins choose; others read). */
+function renderSettingsAi(project, ai, formState) {
+	if (!ai?.available) return /* @__PURE__ */ jsx(Alert, {
+		tone: "info",
+		title: "AI is not configured",
+		children: "This server has no AI configured, so insights are unavailable."
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		class: "grid max-w-form",
+		children: [formState?.globalError ? /* @__PURE__ */ jsx(Alert, {
+			tone: "danger",
+			children: formState.globalError
+		}) : null, /* @__PURE__ */ jsxs(Card, { children: [
+			/* @__PURE__ */ jsx(SectionTitle, { children: "AI insights" }),
+			/* @__PURE__ */ jsx(Meta, { children: "Choosing a profile turns on AI triage for builds and a project health digest. The profile decides which models see this project's data (including screenshots when its model supports vision). Insights are advisory only: they never approve or reject anything." }),
+			/* @__PURE__ */ jsx(ProfileForm, {
+				project,
+				ai
+			})
+		] })]
+	});
+}
+export { renderSettingsAi };
+
+//# sourceMappingURL=settings-ai.mjs.map

package/dist/pages/settings-ai.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings-ai.mjs","names":[],"sources":["../../src/pages/settings-ai.tsx"],"sourcesContent":["import type { Project } from \"@storyshelf/core/schema\";\nimport type { HtmlEscapedString } from \"hono/utils/html\";\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\nimport {\n  Alert,\n  Button,\n  Card,\n  FormActions,\n  Meta,\n  SectionTitle,\n  SelectField,\n} from \"../ui/components.tsx\";\nimport { csrfField } from \"../ui/csrf-field.tsx\";\n\n/** AI availability and profile choices passed to the settings tab. */\nexport interface SettingsAiData {\n  available: boolean;\n  profiles: string[];\n  defaultProfile: string;\n  isSiteAdmin: boolean;\n}\n\nfunction ProfileForm(props: {\n  project: Project;\n  ai: SettingsAiData;\n}): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const { project, ai } = props;\n  return (\n    <form\n      method=\"post\"\n      action={`/projects/${project.slug}/settings/ai`}\n      hx-post={`/projects/${project.slug}/settings/ai`}\n      hx-target=\"body\"\n      hx-swap=\"outerHTML\"\n    >\n      {csrfField()}\n      <SelectField\n        label=\"AI profile\"\n        name=\"aiProfile\"\n        value={project.aiProfile ?? \"\"}\n        disabled={!ai.isSiteAdmin}\n        options={[\n          { value: \"\", label: \"Off (no data leaves the server)\" },\n          ...ai.profiles.map((name) => ({\n            value: name,\n            label: name === ai.defaultProfile ? `${name} (default)` : name,\n          })),\n        ]}\n        hint=\"Only site admins can change this because it decides where project data is sent.\"\n      />\n      {ai.isSiteAdmin ? (\n        <FormActions>\n          <Button variant=\"primary\" type=\"submit\" icon=\"check\">\n            Save changes\n          </Button>\n        </FormActions>\n      ) : (\n        <Meta>You need site admin access to change the AI profile.</Meta>\n      )}\n    </form>\n  );\n}\n\n/** AI settings tab: per-project profile gate (site admins choose; others read). */\nexport function renderSettingsAi(\n  project: Project,\n  ai: SettingsAiData | undefined,\n  formState?: { globalError?: string },\n): unknown {\n  if (!ai?.available) {\n    return (\n      <Alert tone=\"info\" title=\"AI is not configured\">\n        This server has no AI configured, so insights are unavailable.\n      </Alert>\n    );\n  }\n  return (\n    <div class=\"grid max-w-form\">\n      {formState?.globalError ? <Alert tone=\"danger\">{formState.globalError}</Alert> : null}\n      <Card>\n        <SectionTitle>AI insights</SectionTitle>\n        <Meta>\n          Choosing a profile turns on AI triage for builds and a project health digest. The profile\n          decides which models see this project&apos;s data (including screenshots when its model\n          supports vision). Insights are advisory only: they never approve or reject anything.\n        </Meta>\n        <ProfileForm project={project} ai={ai} />\n      </Card>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;AAsBA,SAAS,YAAY,OAG8B;CACjD,MAAM,EAAE,SAAS,OAAO;CACxB,OACE,qBAAC,QAAD;EACE,QAAO;EACP,QAAQ,aAAa,QAAQ,KAAK;EAClC,WAAS,aAAa,QAAQ,KAAK;EACnC,aAAU;EACV,WAAQ;EALV,UAAA;GAOG,UAAU;GACX,oBAAC,aAAD;IACE,OAAM;IACN,MAAK;IACL,OAAO,QAAQ,aAAa;IAC5B,UAAU,CAAC,GAAG;IACd,SAAS,CACP;KAAE,OAAO;KAAI,OAAO;IAAkC,GACtD,GAAG,GAAG,SAAS,KAAK,UAAU;KAC5B,OAAO;KACP,OAAO,SAAS,GAAG,iBAAiB,GAAG,KAAK,cAAc;IAC5D,EAAE,CACJ;IACA,MAAK;GACN,CAAA;GACA,GAAG,cACF,oBAAC,aAAD,EAAA,UACE,oBAAC,QAAD;IAAQ,SAAQ;IAAU,MAAK;IAAS,MAAK;IAAQ,UAAA;GAE7C,CAAA,EACG,CAAA,IAEb,oBAAC,MAAD,EAAA,UAAM,uDAA0D,CAAA;EAE9D;;AAEV;;AAGA,SAAgB,iBACd,SACA,IACA,WACS;CACT,IAAI,CAAC,IAAI,WACP,OACE,oBAAC,OAAD;EAAO,MAAK;EAAO,OAAM;EAAuB,UAAA;CAEzC,CAAA;CAGX,OACE,qBAAC,OAAD;EAAK,OAAM;EAAX,UAAA,CACG,WAAW,cAAc,oBAAC,OAAD;GAAO,MAAK;GAAU,UAAA,UAAU;EAAmB,CAAA,IAAI,MACjF,qBAAC,MAAD,EAAA,UAAA;GACE,oBAAC,cAAD,EAAA,UAAc,cAAyB,CAAA;GACvC,oBAAC,MAAD,EAAA,UAAM,oQAIA,CAAA;GACN,oBAAC,aAAD;IAAsB;IAAa;GAAK,CAAA;EACpC,EAAA,CAAA,CACH;;AAET"}

package/dist/pages/settings-capture.mjs

@@ -0,0 +1,123 @@
+import "node:path";
+import "node:url";
+import.meta.url;
+import { Button } from "../ui/buttons.mjs";
+import { Alert, Meta } from "../ui/feedback.mjs";
+import { CheckField, Field, FormActions, SelectField, TextareaField } from "../ui/forms.mjs";
+import { Card, SectionTitle } from "../ui/layout.mjs";
+import { csrfField } from "../ui/csrf-field.mjs";
+import { targetChoices } from "./target-choices.mjs";
+import { MAX_STORYBOOK_URL_TTL, MIN_STORYBOOK_URL_TTL_OVERRIDE } from "@storyshelf/core/utils";
+import { MAX_BROWSERS, parseBrowsers, parseModesAllowlist } from "@storyshelf/core/capture";
+import { Fragment, jsx, jsxs } from "hono/jsx/jsx-runtime";
+import { isCaptureTarget } from "@storyshelf/core/adapter/capture-runner";
+// src/pages/settings-capture.tsx
+/** Primary engine select plus one checkbox per additional engine. */
+function BrowserFields(props) {
+	const { primary, extras, disabled, targets } = props;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(SelectField, {
+			label: "Primary browser",
+			name: "browser",
+			value: primary,
+			disabled,
+			options: targets.choices,
+			hint: "Used for the published preview and to bootstrap other engines."
+		}),
+		targets.choices.map((engine) => /* @__PURE__ */ jsx(CheckField, {
+			label: `Also capture on ${engine.label}`,
+			name: `extra_${engine.value}`,
+			value: engine.value,
+			checked: extras.includes(engine.value) ? true : void 0,
+			disabled
+		}, engine.value)),
+		targets.unavailable.length > 0 ? /* @__PURE__ */ jsxs(Meta, { children: [
+			"Not selectable on this server: ",
+			targets.unavailable.join("; "),
+			"."
+		] }) : null
+	] });
+}
+/** One mode name per line; empty runs every declared mode. */
+function AllowlistField(props) {
+	return /* @__PURE__ */ jsx(TextareaField, {
+		label: "Mode allowlist",
+		name: "modesAllowlist",
+		rows: 4,
+		value: props.allowlist.join("\n"),
+		placeholder: "dark\nmobile",
+		hint: "One mode name per line. Empty runs every mode declared in your stories' parameters."
+	});
+}
+/** The project's override of the signed Storybook URL lifetime (ADR 0007, decision 5). */
+function UrlLifetimeField(props) {
+	const { project, disabled } = props;
+	return /* @__PURE__ */ jsx(Field, {
+		label: "Signed Storybook URL lifetime (seconds)",
+		name: "storybookUrlTtlSeconds",
+		type: "number",
+		step: "1",
+		min: String(MIN_STORYBOOK_URL_TTL_OVERRIDE),
+		max: String(MAX_STORYBOOK_URL_TTL),
+		value: project.storybookUrlTtlSeconds ? String(project.storybookUrlTtlSeconds) : "",
+		placeholder: "Derived from the stories",
+		disabled,
+		hint: `How long the URL given to a remote browser that cannot reach this server stays valid (${MIN_STORYBOOK_URL_TTL_OVERRIDE} to ${MAX_STORYBOOK_URL_TTL}; the floor is one slice of captures plus a grace, so a render never outlives its URL). Empty derives it from the build's size: at least 2 hours, at most 24.`
+	});
+}
+/** Capture settings tab: engines to capture on and the mode allowlist. */
+function renderSettingsCapture(project, isAdmin, formState, offered) {
+	const browsers = parseBrowsers(project.browsers) ?? [project.browser ?? "chromium"];
+	const [primary = "chromium", ...extras] = browsers;
+	const targets = targetChoices(offered, browsers.filter((entry) => isCaptureTarget(entry)));
+	const allowlist = parseModesAllowlist(project.modesAllowlist) ?? [];
+	const action = `/projects/${project.slug}/settings/capture`;
+	return /* @__PURE__ */ jsxs("div", {
+		class: "grid max-w-form",
+		children: [formState?.globalError ? /* @__PURE__ */ jsx(Alert, {
+			tone: "danger",
+			children: formState.globalError
+		}) : null, /* @__PURE__ */ jsxs(Card, { children: [
+			/* @__PURE__ */ jsx(SectionTitle, { children: "Browsers" }),
+			/* @__PURE__ */ jsxs(Meta, { children: [
+				"Every build is captured on each selected target, one after another, with a baseline per target. One approval covers a story and mode on all engines; use",
+				" ",
+				/* @__PURE__ */ jsx("em", { children: "Only this browser" }),
+				" in the review for an engine-specific decision. Up to",
+				" ",
+				MAX_BROWSERS,
+				" targets. A newly added target starts from its first build."
+			] }),
+			/* @__PURE__ */ jsxs("form", {
+				method: "post",
+				action,
+				"hx-post": action,
+				"hx-target": "body",
+				"hx-swap": "outerHTML",
+				children: [
+					csrfField(),
+					/* @__PURE__ */ jsx(BrowserFields, {
+						primary,
+						extras,
+						disabled: !isAdmin,
+						targets
+					}),
+					/* @__PURE__ */ jsx(AllowlistField, { allowlist }),
+					/* @__PURE__ */ jsx(UrlLifetimeField, {
+						project,
+						disabled: !isAdmin
+					}),
+					isAdmin ? /* @__PURE__ */ jsx(FormActions, { children: /* @__PURE__ */ jsx(Button, {
+						variant: "primary",
+						type: "submit",
+						icon: "check",
+						children: "Save changes"
+					}) }) : /* @__PURE__ */ jsx(Meta, { children: "You need admin access to edit settings." })
+				]
+			})
+		] })]
+	});
+}
+export { renderSettingsCapture };
+
+//# sourceMappingURL=settings-capture.mjs.map

package/dist/pages/settings-capture.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings-capture.mjs","names":[],"sources":["../../src/pages/settings-capture.tsx"],"sourcesContent":["import { isCaptureTarget, type RunnerTarget } from \"@storyshelf/core/adapter/capture-runner\";\nimport { MAX_BROWSERS, parseBrowsers, parseModesAllowlist } from \"@storyshelf/core/capture\";\nimport type { Project } from \"@storyshelf/core/schema\";\nimport { MAX_STORYBOOK_URL_TTL, MIN_STORYBOOK_URL_TTL_OVERRIDE } from \"@storyshelf/core/utils\";\nimport type { HtmlEscapedString } from \"hono/utils/html\";\nimport {\n  Alert,\n  Button,\n  Card,\n  CheckField,\n  Field,\n  FormActions,\n  Meta,\n  SectionTitle,\n  SelectField,\n  TextareaField,\n} from \"../ui/components.tsx\";\nimport { csrfField } from \"../ui/csrf-field.tsx\";\nimport { targetChoices, type TargetChoices } from \"./target-choices.ts\";\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\n/** Primary engine select plus one checkbox per additional engine. */\nfunction BrowserFields(props: {\n  primary: string;\n  extras: string[];\n  disabled: boolean;\n  targets: TargetChoices;\n}): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const { primary, extras, disabled, targets } = props;\n  return (\n    <>\n      <SelectField\n        label=\"Primary browser\"\n        name=\"browser\"\n        value={primary}\n        disabled={disabled}\n        options={targets.choices}\n        hint=\"Used for the published preview and to bootstrap other engines.\"\n      />\n      {targets.choices.map((engine) => (\n        <CheckField\n          key={engine.value}\n          label={`Also capture on ${engine.label}`}\n          name={`extra_${engine.value}`}\n          value={engine.value}\n          checked={extras.includes(engine.value) ? true : undefined}\n          disabled={disabled}\n        />\n      ))}\n      {targets.unavailable.length > 0 ? (\n        <Meta>Not selectable on this server: {targets.unavailable.join(\"; \")}.</Meta>\n      ) : null}\n    </>\n  );\n}\n\n/** One mode name per line; empty runs every declared mode. */\nfunction AllowlistField(props: {\n  allowlist: string[];\n}): HtmlEscapedString | Promise<HtmlEscapedString> {\n  return (\n    <TextareaField\n      label=\"Mode allowlist\"\n      name=\"modesAllowlist\"\n      rows={4}\n      value={props.allowlist.join(\"\\n\")}\n      placeholder=\"dark&#10;mobile\"\n      hint=\"One mode name per line. Empty runs every mode declared in your stories' parameters.\"\n    />\n  );\n}\n\n/** The project's override of the signed Storybook URL lifetime (ADR 0007, decision 5). */\nfunction UrlLifetimeField(props: {\n  project: Project;\n  disabled: boolean;\n}): HtmlEscapedString | Promise<HtmlEscapedString> {\n  const { project, disabled } = props;\n  return (\n    <Field\n      label=\"Signed Storybook URL lifetime (seconds)\"\n      name=\"storybookUrlTtlSeconds\"\n      type=\"number\"\n      step=\"1\"\n      min={String(MIN_STORYBOOK_URL_TTL_OVERRIDE)}\n      max={String(MAX_STORYBOOK_URL_TTL)}\n      value={project.storybookUrlTtlSeconds ? String(project.storybookUrlTtlSeconds) : \"\"}\n      placeholder=\"Derived from the stories\"\n      disabled={disabled}\n      hint={`How long the URL given to a remote browser that cannot reach this server stays valid (${MIN_STORYBOOK_URL_TTL_OVERRIDE} to ${MAX_STORYBOOK_URL_TTL}; the floor is one slice of captures plus a grace, so a render never outlives its URL). Empty derives it from the build's size: at least 2 hours, at most 24.`}\n    />\n  );\n}\n\n/** Capture settings tab: engines to capture on and the mode allowlist. */\nexport function renderSettingsCapture(\n  project: Project,\n  isAdmin: boolean,\n  formState?: { globalError?: string },\n  /** What the runner offers; omitted when it publishes no list. */\n  offered?: readonly RunnerTarget[],\n): unknown {\n  const browsers = parseBrowsers(project.browsers) ?? [project.browser ?? \"chromium\"];\n  const [primary = \"chromium\", ...extras] = browsers;\n  const targets = targetChoices(\n    offered,\n    browsers.filter((entry) => isCaptureTarget(entry)),\n  );\n  const allowlist = parseModesAllowlist(project.modesAllowlist) ?? [];\n  const action = `/projects/${project.slug}/settings/capture`;\n  return (\n    <div class=\"grid max-w-form\">\n      {formState?.globalError ? <Alert tone=\"danger\">{formState.globalError}</Alert> : null}\n      <Card>\n        <SectionTitle>Browsers</SectionTitle>\n        <Meta>\n          Every build is captured on each selected target, one after another, with a baseline per\n          target. One approval covers a story and mode on all engines; use{\" \"}\n          <em>Only this browser</em> in the review for an engine-specific decision. Up to{\" \"}\n          {MAX_BROWSERS} targets. A newly added target starts from its first build.\n        </Meta>\n        <form method=\"post\" action={action} hx-post={action} hx-target=\"body\" hx-swap=\"outerHTML\">\n          {csrfField()}\n          <BrowserFields primary={primary} extras={extras} disabled={!isAdmin} targets={targets} />\n          <AllowlistField allowlist={allowlist} />\n          <UrlLifetimeField project={project} disabled={!isAdmin} />\n          {isAdmin ? (\n            <FormActions>\n              <Button variant=\"primary\" type=\"submit\" icon=\"check\">\n                Save changes\n              </Button>\n            </FormActions>\n          ) : (\n            <Meta>You need admin access to edit settings.</Meta>\n          )}\n        </form>\n      </Card>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;AAuBA,SAAS,cAAc,OAK4B;CACjD,MAAM,EAAE,SAAS,QAAQ,UAAU,YAAY;CAC/C,OACE,qBAAA,UAAA,EAAA,UAAA;EACE,oBAAC,aAAD;GACE,OAAM;GACN,MAAK;GACL,OAAO;GACG;GACV,SAAS,QAAQ;GACjB,MAAK;EACN,CAAA;EACA,QAAQ,QAAQ,KAAK,WACpB,oBAAC,YAAD;GAEE,OAAO,mBAAmB,OAAO;GACjC,MAAM,SAAS,OAAO;GACtB,OAAO,OAAO;GACd,SAAS,OAAO,SAAS,OAAO,KAAK,IAAI,OAAO,KAAA;GACtC;EACX,GANM,OAAO,KAMb,CACF;EACA,QAAQ,YAAY,SAAS,IAC5B,qBAAC,MAAD,EAAA,UAAA;GAAM;GAAgC,QAAQ,YAAY,KAAK,IAAI;GAAE;EAAO,EAAA,CAAA,IAC1E;CACJ,EAAA,CAAA;AAEN;;AAGA,SAAS,eAAe,OAE2B;CACjD,OACE,oBAAC,eAAD;EACE,OAAM;EACN,MAAK;EACL,MAAM;EACN,OAAO,MAAM,UAAU,KAAK,IAAI;EAChC,aAAY;EACZ,MAAK;CACN,CAAA;AAEL;;AAGA,SAAS,iBAAiB,OAGyB;CACjD,MAAM,EAAE,SAAS,aAAa;CAC9B,OACE,oBAAC,OAAD;EACE,OAAM;EACN,MAAK;EACL,MAAK;EACL,MAAK;EACL,KAAK,OAAO,8BAA8B;EAC1C,KAAK,OAAO,qBAAqB;EACjC,OAAO,QAAQ,yBAAyB,OAAO,QAAQ,sBAAsB,IAAI;EACjF,aAAY;EACF;EACV,MAAM,yFAAyF,+BAA+B,MAAM,sBAAsB;CAC3J,CAAA;AAEL;;AAGA,SAAgB,sBACd,SACA,SACA,WAEA,SACS;CACT,MAAM,WAAW,cAAc,QAAQ,QAAQ,KAAK,CAAC,QAAQ,WAAW,UAAU;CAClF,MAAM,CAAC,UAAU,YAAY,GAAG,UAAU;CAC1C,MAAM,UAAU,cACd,SACA,SAAS,QAAQ,UAAU,gBAAgB,KAAK,CAAC,CACnD;CACA,MAAM,YAAY,oBAAoB,QAAQ,cAAc,KAAK,CAAC;CAClE,MAAM,SAAS,aAAa,QAAQ,KAAK;CACzC,OACE,qBAAC,OAAD;EAAK,OAAM;EAAX,UAAA,CACG,WAAW,cAAc,oBAAC,OAAD;GAAO,MAAK;GAAU,UAAA,UAAU;EAAmB,CAAA,IAAI,MACjF,qBAAC,MAAD,EAAA,UAAA;GACE,oBAAC,cAAD,EAAA,UAAc,WAAsB,CAAA;GACpC,qBAAC,MAAD,EAAA,UAAA;IAAM;IAE6D;IACjE,oBAAC,MAAD,EAAA,UAAI,oBAAqB,CAAA;IAAC;IAAsD;IAC/E;IAAa;GACV,EAAA,CAAA;GACN,qBAAC,QAAD;IAAM,QAAO;IAAe;IAAQ,WAAS;IAAQ,aAAU;IAAO,WAAQ;IAA9E,UAAA;KACG,UAAU;KACX,oBAAC,eAAD;MAAwB;MAAiB;MAAQ,UAAU,CAAC;MAAkB;KAAU,CAAA;KACxF,oBAAC,gBAAD,EAA2B,UAAY,CAAA;KACvC,oBAAC,kBAAD;MAA2B;MAAS,UAAU,CAAC;KAAU,CAAA;KACxD,UACC,oBAAC,aAAD,EAAA,UACE,oBAAC,QAAD;MAAQ,SAAQ;MAAU,MAAK;MAAS,MAAK;MAAQ,UAAA;KAE7C,CAAA,EACG,CAAA,IAEb,oBAAC,MAAD,EAAA,UAAM,0CAA6C,CAAA;IAEjD;;EACF,EAAA,CAAA,CACH;;AAET"}

package/dist/pages/settings-design-credential.mjs

@@ -0,0 +1,98 @@
+import "node:path";
+import "node:url";
+import.meta.url;
+import { Button } from "../ui/buttons.mjs";
+import { Badge, Meta } from "../ui/feedback.mjs";
+import { Field, FormActions } from "../ui/forms.mjs";
+import { Card, SectionTitle } from "../ui/layout.mjs";
+import { csrfField } from "../ui/csrf-field.mjs";
+import { RemoveForm } from "./settings-design-links.mjs";
+import { Fragment, jsx, jsxs } from "hono/jsx/jsx-runtime";
+// src/pages/settings-design-credential.tsx
+const STATUS_BADGES = {
+	unknown: {
+		tone: "neutral",
+		text: "Not used yet"
+	},
+	ok: {
+		tone: "success",
+		text: "Working"
+	},
+	unauthorized: {
+		tone: "danger",
+		text: "Expired or revoked"
+	},
+	forbidden: {
+		tone: "warning",
+		text: "No access to a linked file"
+	}
+};
+/** Settings card for one provider's project-wide credential (admin only). */
+function CredentialCard(props) {
+	const { base, provider, formState } = props;
+	const action = `${base}/${provider.kind}/token`;
+	return /* @__PURE__ */ jsxs(Card, { children: [
+		/* @__PURE__ */ jsx(SectionTitle, { children: provider.credentialLabel }),
+		/* @__PURE__ */ jsx(Meta, { children: provider.credentialHelp }),
+		provider.credential ? /* @__PURE__ */ jsx(CredentialStatus, {
+			action,
+			provider,
+			credential: provider.credential
+		}) : /* @__PURE__ */ jsx(Meta, { children: "No credential set." }),
+		/* @__PURE__ */ jsx(CredentialForm, {
+			action,
+			provider,
+			error: formState?.errors?.[`token:${provider.kind}`]
+		})
+	] });
+}
+function CredentialStatus(props) {
+	const { action, provider, credential } = props;
+	const badge = STATUS_BADGES[credential.status];
+	const days = credential.daysLeft;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("p", { children: [
+		/* @__PURE__ */ jsx(Badge, {
+			tone: badge.tone,
+			children: badge.text
+		}),
+		" ",
+		days === null ? null : /* @__PURE__ */ jsx(Meta, {
+			as: "span",
+			children: days >= 0 ? `Rotate within ${days} day${days === 1 ? "" : "s"}` : `Past the ${provider.maxAgeDays}-day cap — rotate now`
+		})
+	] }), /* @__PURE__ */ jsx(RemoveForm, {
+		action: `${action}/delete`,
+		confirm: `Remove the ${provider.name} credential?`,
+		label: `Remove ${provider.name} credential`
+	})] });
+}
+function CredentialForm(props) {
+	const { action, provider } = props;
+	const replace = provider.credential !== null;
+	return /* @__PURE__ */ jsxs("form", {
+		method: "post",
+		action,
+		"hx-post": action,
+		"hx-target": "body",
+		children: [
+			csrfField(),
+			/* @__PURE__ */ jsx(Field, {
+				label: replace ? "Replace token" : "Token",
+				name: "token",
+				type: "password",
+				required: true,
+				autocomplete: "off",
+				placeholder: provider.credentialPlaceholder,
+				error: props.error
+			}),
+			/* @__PURE__ */ jsx(FormActions, { children: /* @__PURE__ */ jsx(Button, {
+				variant: "primary",
+				type: "submit",
+				children: replace ? "Rotate token" : "Save token"
+			}) })
+		]
+	});
+}
+export { CredentialCard };
+
+//# sourceMappingURL=settings-design-credential.mjs.map

package/dist/pages/settings-design-credential.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings-design-credential.mjs","names":[],"sources":["../../src/pages/settings-design-credential.tsx"],"sourcesContent":["import type { HtmlEscapedString } from \"hono/utils/html\";\nimport { Badge, Button, Card, Field, FormActions, Meta, SectionTitle } from \"../ui/components.tsx\";\nimport { csrfField } from \"../ui/csrf-field.tsx\";\nimport { RemoveForm, type DesignFormState } from \"./settings-design-links.tsx\";\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\ntype Rendered = HtmlEscapedString | Promise<HtmlEscapedString>;\n\n/** Last observed outcome of a design credential. */\nexport type DesignCredentialState = \"unknown\" | \"ok\" | \"unauthorized\" | \"forbidden\";\n\n/** A stored credential as shown to admins: never the value. */\nexport interface SettingsDesignCredential {\n  status: DesignCredentialState;\n  /** Days until the provider's maximum credential age, counted from when it was set or replaced (negative once past); null without a limit. */\n  daysLeft: number | null;\n  checkedAt: string | null;\n}\n\n/** A configured design provider with its (optional) project credential. */\nexport interface SettingsDesignProvider {\n  kind: string;\n  name: string;\n  credentialLabel: string;\n  credentialHelp: string;\n  credentialPlaceholder?: string;\n  urlHint: string;\n  /** Provider's maximum credential lifetime in days, when it has one. */\n  maxAgeDays?: number;\n  credential: SettingsDesignCredential | null;\n}\n\nconst STATUS_BADGES: Record<\n  DesignCredentialState,\n  { tone: \"neutral\" | \"success\" | \"warning\" | \"danger\"; text: string }\n> = {\n  unknown: { tone: \"neutral\", text: \"Not used yet\" },\n  ok: { tone: \"success\", text: \"Working\" },\n  unauthorized: { tone: \"danger\", text: \"Expired or revoked\" },\n  forbidden: { tone: \"warning\", text: \"No access to a linked file\" },\n};\n\n/** Settings card for one provider's project-wide credential (admin only). */\nexport function CredentialCard(props: {\n  base: string;\n  provider: SettingsDesignProvider;\n  formState?: DesignFormState;\n}): Rendered {\n  const { base, provider, formState } = props;\n  const action = `${base}/${provider.kind}/token`;\n  return (\n    <Card>\n      <SectionTitle>{provider.credentialLabel}</SectionTitle>\n      <Meta>{provider.credentialHelp}</Meta>\n      {provider.credential ? (\n        <CredentialStatus action={action} provider={provider} credential={provider.credential} />\n      ) : (\n        <Meta>No credential set.</Meta>\n      )}\n      <CredentialForm\n        action={action}\n        provider={provider}\n        error={formState?.errors?.[`token:${provider.kind}`]}\n      />\n    </Card>\n  );\n}\n\nfunction CredentialStatus(props: {\n  action: string;\n  provider: SettingsDesignProvider;\n  credential: SettingsDesignCredential;\n}): Rendered {\n  const { action, provider, credential } = props;\n  const badge = STATUS_BADGES[credential.status];\n  const days = credential.daysLeft;\n  return (\n    <>\n      <p>\n        <Badge tone={badge.tone}>{badge.text}</Badge>{\" \"}\n        {days === null ? null : (\n          <Meta as=\"span\">\n            {days >= 0\n              ? `Rotate within ${days} day${days === 1 ? \"\" : \"s\"}`\n              : `Past the ${provider.maxAgeDays}-day cap — rotate now`}\n          </Meta>\n        )}\n      </p>\n      <RemoveForm\n        action={`${action}/delete`}\n        confirm={`Remove the ${provider.name} credential?`}\n        label={`Remove ${provider.name} credential`}\n      />\n    </>\n  );\n}\n\nfunction CredentialForm(props: {\n  action: string;\n  provider: SettingsDesignProvider;\n  error?: string;\n}): Rendered {\n  const { action, provider } = props;\n  const replace = provider.credential !== null;\n  return (\n    <form method=\"post\" action={action} hx-post={action} hx-target=\"body\">\n      {csrfField()}\n      <Field\n        label={replace ? \"Replace token\" : \"Token\"}\n        name=\"token\"\n        type=\"password\"\n        required\n        autocomplete=\"off\"\n        placeholder={provider.credentialPlaceholder}\n        error={props.error}\n      />\n      <FormActions>\n        <Button variant=\"primary\" type=\"submit\">\n          {replace ? \"Rotate token\" : \"Save token\"}\n        </Button>\n      </FormActions>\n    </form>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAiCA,MAAM,gBAGF;CACF,SAAS;EAAE,MAAM;EAAW,MAAM;CAAe;CACjD,IAAI;EAAE,MAAM;EAAW,MAAM;CAAU;CACvC,cAAc;EAAE,MAAM;EAAU,MAAM;CAAqB;CAC3D,WAAW;EAAE,MAAM;EAAW,MAAM;CAA6B;AACnE;;AAGA,SAAgB,eAAe,OAIlB;CACX,MAAM,EAAE,MAAM,UAAU,cAAc;CACtC,MAAM,SAAS,GAAG,KAAK,GAAG,SAAS,KAAK;CACxC,OACE,qBAAC,MAAD,EAAA,UAAA;EACE,oBAAC,cAAD,EAAA,UAAe,SAAS,gBAA8B,CAAA;EACtD,oBAAC,MAAD,EAAA,UAAO,SAAS,eAAqB,CAAA;EACpC,SAAS,aACR,oBAAC,kBAAD;GAA0B;GAAkB;GAAU,YAAY,SAAS;EAAa,CAAA,IAExF,oBAAC,MAAD,EAAA,UAAM,qBAAwB,CAAA;EAEhC,oBAAC,gBAAD;GACU;GACE;GACV,OAAO,WAAW,SAAS,SAAS,SAAS;EAC9C,CAAA;CACG,EAAA,CAAA;AAEV;AAEA,SAAS,iBAAiB,OAIb;CACX,MAAM,EAAE,QAAQ,UAAU,eAAe;CACzC,MAAM,QAAQ,cAAc,WAAW;CACvC,MAAM,OAAO,WAAW;CACxB,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,qBAAC,KAAD,EAAA,UAAA;EACE,oBAAC,OAAD;GAAO,MAAM,MAAM;GAAO,UAAA,MAAM;EAAY,CAAA;EAAE;EAC7C,SAAS,OAAO,OACf,oBAAC,MAAD;GAAM,IAAG;GACN,UAAA,QAAQ,IACL,iBAAiB,KAAK,MAAM,SAAS,IAAI,KAAK,QAC9C,YAAY,SAAS,WAAW;EAChC,CAAA;CAEP,EAAA,CAAA,GACH,oBAAC,YAAD;EACE,QAAQ,GAAG,OAAO;EAClB,SAAS,cAAc,SAAS,KAAK;EACrC,OAAO,UAAU,SAAS,KAAK;CAChC,CAAA,CACD,EAAA,CAAA;AAEN;AAEA,SAAS,eAAe,OAIX;CACX,MAAM,EAAE,QAAQ,aAAa;CAC7B,MAAM,UAAU,SAAS,eAAe;CACxC,OACE,qBAAC,QAAD;EAAM,QAAO;EAAe;EAAQ,WAAS;EAAQ,aAAU;EAA/D,UAAA;GACG,UAAU;GACX,oBAAC,OAAD;IACE,OAAO,UAAU,kBAAkB;IACnC,MAAK;IACL,MAAK;IACL,UAAA;IACA,cAAa;IACb,aAAa,SAAS;IACtB,OAAO,MAAM;GACd,CAAA;GACD,oBAAC,aAAD,EAAA,UACE,oBAAC,QAAD;IAAQ,SAAQ;IAAU,MAAK;IAC5B,UAAA,UAAU,iBAAiB;GACtB,CAAA,EACG,CAAA;EACT;;AAEV"}

package/dist/pages/settings-design-links.mjs

@@ -0,0 +1,178 @@
+import "node:path";
+import "node:url";
+import.meta.url;
+import { Button } from "../ui/buttons.mjs";
+import { Meta } from "../ui/feedback.mjs";
+import { Field, FormActions } from "../ui/forms.mjs";
+import { Card, SectionTitle } from "../ui/layout.mjs";
+import { Table } from "../ui/table.mjs";
+import { csrfField } from "../ui/csrf-field.mjs";
+import { jsx, jsxs } from "hono/jsx/jsx-runtime";
+// src/pages/settings-design-links.tsx
+function FilesCard(props) {
+	const { base, files, isAdmin, formState, urlHint } = props;
+	return /* @__PURE__ */ jsxs(Card, { children: [
+		/* @__PURE__ */ jsx(SectionTitle, { children: "Design files" }),
+		/* @__PURE__ */ jsx(Meta, { children: "Design files for this project. They appear in the library header; individual stories link to a design through their component (see below) or their story parameters." }),
+		/* @__PURE__ */ jsx(LinkTable, {
+			rows: files.map((file) => ({
+				id: file.id,
+				key: file.label,
+				url: file.url,
+				removeAction: isAdmin ? `${base}/files/${file.id}/delete` : void 0
+			})),
+			keyHeading: "Label",
+			confirm: "Remove this design file?"
+		}),
+		files.length === 0 ? /* @__PURE__ */ jsx(Meta, { children: "No design files linked." }) : null,
+		isAdmin ? /* @__PURE__ */ jsx(AddFileForm, {
+			base,
+			urlHint,
+			error: formState?.errors?.["file"]
+		}) : null
+	] });
+}
+/** Rows of `key → design link` with an optional remove action. */
+function LinkTable(props) {
+	return /* @__PURE__ */ jsx(Table, { children: /* @__PURE__ */ jsxs("table", { children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+		/* @__PURE__ */ jsx("th", { children: props.keyHeading }),
+		/* @__PURE__ */ jsx("th", { children: "Design" }),
+		/* @__PURE__ */ jsx("th", { children: /* @__PURE__ */ jsx("span", {
+			class: "visually-hidden",
+			children: "Actions"
+		}) })
+	] }) }), /* @__PURE__ */ jsx("tbody", { children: props.rows.map((row) => /* @__PURE__ */ jsxs("tr", { children: [
+		/* @__PURE__ */ jsx("td", { children: row.key }),
+		/* @__PURE__ */ jsx("td", {
+			class: "truncate max-w-cell",
+			title: row.url,
+			children: /* @__PURE__ */ jsx("a", {
+				href: row.url,
+				target: "_blank",
+				rel: "noopener noreferrer",
+				children: row.url
+			})
+		}),
+		/* @__PURE__ */ jsx("td", { children: row.removeAction ? /* @__PURE__ */ jsx(RemoveForm, {
+			action: row.removeAction,
+			confirm: props.confirm,
+			label: `Remove ${row.key}`
+		}) : null })
+	] }, row.id)) })] }) });
+}
+function AddFileForm(props) {
+	const action = `${props.base}/files`;
+	return /* @__PURE__ */ jsxs("form", {
+		method: "post",
+		action,
+		"hx-post": action,
+		"hx-target": "body",
+		children: [
+			csrfField(),
+			/* @__PURE__ */ jsxs("div", {
+				class: "grid grid--2",
+				children: [/* @__PURE__ */ jsx(Field, {
+					label: "Label",
+					name: "label",
+					required: true,
+					placeholder: "Design system"
+				}), /* @__PURE__ */ jsx(Field, {
+					label: "Design URL",
+					name: "url",
+					type: "url",
+					required: true,
+					placeholder: props.urlHint,
+					error: props.error
+				})]
+			}),
+			/* @__PURE__ */ jsx(FormActions, { children: /* @__PURE__ */ jsx(Button, {
+				variant: "primary",
+				type: "submit",
+				icon: "plus",
+				children: "Add design file"
+			}) })
+		]
+	});
+}
+function ComponentsCard(props) {
+	const { base, components, formState, urlHint } = props;
+	return /* @__PURE__ */ jsxs(Card, { children: [
+		/* @__PURE__ */ jsx(SectionTitle, { children: "Component mapping" }),
+		/* @__PURE__ */ jsxs(Meta, { children: [
+			"Map a story file (its import path) to a design. A manual mapping overrides the story's own ",
+			/* @__PURE__ */ jsx("code", { children: "storyshelf.figma" }),
+			" and ",
+			/* @__PURE__ */ jsx("code", { children: "design" }),
+			" parameters, and survives new builds. Mappings are keyed by the story file path, so update one after a file is renamed or moved."
+		] }),
+		/* @__PURE__ */ jsx(LinkTable, {
+			rows: components.map((component) => ({
+				id: component.id,
+				key: component.importPath,
+				url: component.url,
+				removeAction: `${base}/components/${component.id}/delete`
+			})),
+			keyHeading: "Story file",
+			confirm: "Remove this mapping?"
+		}),
+		components.length === 0 ? /* @__PURE__ */ jsx(Meta, { children: "No component mappings." }) : null,
+		/* @__PURE__ */ jsx(MapComponentForm, {
+			base,
+			urlHint,
+			error: formState?.errors?.["component"]
+		})
+	] });
+}
+function MapComponentForm(props) {
+	const action = `${props.base}/components`;
+	return /* @__PURE__ */ jsxs("form", {
+		method: "post",
+		action,
+		"hx-post": action,
+		"hx-target": "body",
+		children: [
+			csrfField(),
+			/* @__PURE__ */ jsxs("div", {
+				class: "grid grid--2",
+				children: [/* @__PURE__ */ jsx(Field, {
+					label: "Story file",
+					name: "importPath",
+					required: true,
+					placeholder: "./src/Button.stories.tsx"
+				}), /* @__PURE__ */ jsx(Field, {
+					label: "Design URL",
+					name: "url",
+					type: "url",
+					required: true,
+					placeholder: props.urlHint,
+					error: props.error
+				})]
+			}),
+			/* @__PURE__ */ jsx(FormActions, { children: /* @__PURE__ */ jsx(Button, {
+				variant: "primary",
+				type: "submit",
+				icon: "plus",
+				children: "Map component"
+			}) })
+		]
+	});
+}
+function RemoveForm(props) {
+	return /* @__PURE__ */ jsxs("form", {
+		method: "post",
+		action: props.action,
+		"hx-post": props.action,
+		"hx-target": "body",
+		"hx-confirm": props.confirm,
+		children: [csrfField(), /* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			size: "sm",
+			type: "submit",
+			"aria-label": props.label,
+			children: "Remove"
+		})]
+	});
+}
+export { ComponentsCard, FilesCard, RemoveForm };
+
+//# sourceMappingURL=settings-design-links.mjs.map