@storyshelf/app 0.6.2 → 0.8.0

package/dist/ui/document.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"document.mjs","names":[],"sources":["../../src/ui/document.tsx"],"sourcesContent":["import { raw } from \"hono/html\";\nimport type { FC } from \"hono/jsx\";\nimport { assetManifest } from \"../asset-manifest.ts\";\nimport { getCsrfToken } from \"../middleware/csrf.ts\";\nimport { getStore } from \"../store.ts\";\nimport { Style, css } from \"./css.ts\";\nimport { BareShell } from \"./shell/bare.tsx\";\nimport { bootScript } from \"./shell/boot-script.ts\";\nimport { clientScript } from \"./shell/client-script.ts\";\nimport type { NavConfig } from \"./shell/nav.ts\";\nimport { Sidebar } from \"./shell/sidebar.tsx\";\nimport { ToastRegion, TopBar } from \"./shell/topbar.tsx\";\nimport { baseStyle } from \"./styles.ts\";\nimport { DARK_THEME, LIGHT_THEME } from \"./theme.ts\";\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\n/** Active section, project, and breadcrumb trail passed to the shell. */\nexport type { NavConfig };\n\n/** Rendered HTML content returned by page components. */\nexport type RenderedContent = string | Promise<string>;\n\n/**\n * Page frame: `default` is a readable column, `wide` uses the full viewport,\n * `bare` drops the app chrome (sign-in, invites).\n */\ntype PageLayout = \"default\" | \"wide\" | \"bare\";\n\nconst shellRoot = css`\n  /* shell */\n  display: grid;\n  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);\n  min-height: 100vh;\n  @media (max-width: 880px) {\n    & {\n      grid-template-columns: minmax(0, 1fr);\n    }\n  }\n`;\n\nconst shellContent = css`\n  /* shell-content */\n  width: 100%;\n  max-width: 1200px;\n  margin: 0 auto;\n  padding: var(--space-6) var(--space-6) var(--space-8);\n  min-width: 0;\n  @media (max-width: 880px) {\n    & {\n      padding: var(--space-4);\n    }\n  }\n`;\n\nconst shellContentWide = css`\n  /* shell-content-wide */\n  ${shellContent}\n  max-width: none;\n`;\n\nconst shellBackdrop = css`\n  /* shell-backdrop */\n  position: fixed;\n  inset: 0;\n  z-index: 55;\n  background: rgb(0 0 0 / 0.4);\n  &[hidden] {\n    display: none;\n  }\n`;\n\n// Hono's JSX.Element is typed as `HtmlEscapedString | Promise<...>`, so JSX-returning\n// Functions can legitimately return a promise; the rule is a false positive here.\n/** Full HTML document shell with sidebar, top bar, theme, toasts, and HTMX. */\nexport const DocumentLayout: FC<{\n  title: string;\n  nav?: NavConfig;\n  layout?: PageLayout;\n  children?: unknown;\n}> = ({ title, nav, layout = \"default\", children }) => {\n  const { ui, config, sessionId } = getStore();\n  const name = ui.name ?? \"StoryShelf\";\n  const logo = ui.logo ?? assetManifest.mark.href;\n  const light = ui.lightTheme ?? LIGHT_THEME;\n  const dark = ui.darkTheme ?? DARK_THEME;\n\n  return (\n    <>\n      {/* Without a doctype browsers use quirks mode (form margins, line-box struts, …). */}\n      {raw(\"<!DOCTYPE html>\")}\n      <html lang=\"en\" data-theme=\"system\">\n        <head>\n          <meta charset=\"utf-8\" />\n          <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n          <meta name=\"color-scheme\" content=\"light dark\" />\n          <meta name=\"csrf-token\" content={getCsrfToken(config.secret, sessionId)} />\n          {/* Favicon is the product's own mark, not brandable: it identifies\n              StoryShelf in the tab strip. `ui.logo` stays overridable. */}\n          <link rel=\"icon\" type=\"image/svg+xml\" href={assetManifest.mark.href} />\n          <title>\n            {title} · {name}\n          </title>\n          <style dangerouslySetInnerHTML={{ __html: baseStyle(light, dark) }} />\n          <Style />\n          <script dangerouslySetInnerHTML={{ __html: bootScript() }} />\n        </head>\n        <body>\n          <a class=\"skip-link\" href=\"#main-content\">\n            Skip to content\n          </a>\n          {layout === \"bare\" ? (\n            <BareShell name={name} logo={logo}>\n              {children}\n            </BareShell>\n          ) : (\n            <>\n              <div class={shellRoot}>\n                <Sidebar nav={nav} name={name} logo={logo} />\n                <div>\n                  <TopBar nav={nav} />\n                  <main\n                    id=\"main-content\"\n                    class={layout === \"wide\" ? shellContentWide : shellContent}\n                    tabindex={-1}\n                  >\n                    {children}\n                  </main>\n                </div>\n              </div>\n              <div class={shellBackdrop} data-sidebar-backdrop hidden />\n            </>\n          )}\n          <ToastRegion />\n          <script src={assetManifest.htmx.href} />\n          <script dangerouslySetInnerHTML={{ __html: clientScript() }} />\n        </body>\n      </html>\n    </>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AA6BA,MAAM,YAAY,GAAG;;;;;;;;;;;AAYrB,MAAM,eAAe,GAAG;;;;;;;;;;;;;AAcxB,MAAM,mBAAmB,GAAG;;IAExB,aAAa;;;AAIjB,MAAM,gBAAgB,GAAG;;;;;;;;;;;AAczB,MAAa,kBAKP,EAAE,OAAO,KAAK,SAAS,WAAW,eAAe;CACrD,MAAM,EAAE,IAAI,QAAQ,cAAc,SAAS;CAC3C,MAAM,OAAO,GAAG,QAAQ;CACxB,MAAM,OAAO,GAAG,QAAQ,cAAc,KAAK;CAC3C,MAAM,QAAQ,GAAG,cAAc;CAC/B,MAAM,OAAO,GAAG,aAAa;CAE7B,OACE,qBAAA,UAAA,EAAA,UAAA,CAEG,IAAI,iBAAiB,GACtB,qBAAC,QAAD;EAAM,MAAK;EAAK,cAAW;EAA3B,UAAA,CACE,qBAAC,QAAD,EAAA,UAAA;GACE,oBAAC,QAAD,EAAM,SAAQ,QAAS,CAAA;GACvB,oBAAC,QAAD;IAAM,MAAK;IAAW,SAAQ;GAAuC,CAAA;GACrE,oBAAC,QAAD;IAAM,MAAK;IAAe,SAAQ;GAAc,CAAA;GAChD,oBAAC,QAAD;IAAM,MAAK;IAAa,SAAS,aAAa,OAAO,QAAQ,SAAS;GAAI,CAAA;GAG1E,oBAAC,QAAD;IAAM,KAAI;IAAO,MAAK;IAAgB,MAAM,cAAc,KAAK;GAAO,CAAA;GACtE,qBAAC,SAAD,EAAA,UAAA;IACG;IAAM;IAAI;GACN,EAAA,CAAA;GACP,oBAAC,SAAD,EAAO,yBAAyB,EAAE,QAAQ,UAAU,OAAO,IAAI,EAAE,EAAI,CAAA;GACrE,oBAAC,OAAD,CAAQ,CAAA;GACR,oBAAC,UAAD,EAAQ,yBAAyB,EAAE,QAAQ,WAAW,EAAE,EAAI,CAAA;EACxD,EAAA,CAAA,GACN,qBAAC,QAAD,EAAA,UAAA;GACE,oBAAC,KAAD;IAAG,OAAM;IAAY,MAAK;IAAgB,UAAA;GAEvC,CAAA;GACF,WAAW,SACV,oBAAC,WAAD;IAAiB;IAAY;IAC1B;GACQ,CAAA,IAEX,qBAAA,UAAA,EAAA,UAAA,CACE,qBAAC,OAAD;IAAK,OAAO;IAAZ,UAAA,CACE,oBAAC,SAAD;KAAc;KAAW;KAAY;IAAO,CAAA,GAC5C,qBAAC,OAAD,EAAA,UAAA,CACE,oBAAC,QAAD,EAAa,IAAM,CAAA,GACnB,oBAAC,QAAD;KACE,IAAG;KACH,OAAO,WAAW,SAAS,mBAAmB;KAC9C,UAAU;KAET;IACG,CAAA,CACH,EAAA,CAAA,CACF;GACL,CAAA,GAAA,oBAAC,OAAD;IAAK,OAAO;IAAe,yBAAA;IAAsB,QAAA;GAAQ,CAAA,CACzD,EAAA,CAAA;GAEJ,oBAAC,aAAD,CAAc,CAAA;GACd,oBAAC,UAAD,EAAQ,KAAK,cAAc,KAAK,KAAO,CAAA;GACvC,oBAAC,UAAD,EAAQ,yBAAyB,EAAE,QAAQ,aAAa,EAAE,EAAI,CAAA;EAC1D,EAAA,CAAA,CACF;CACN,CAAA,CAAA,EAAA,CAAA;AAEN"}
+{"version":3,"file":"document.mjs","names":[],"sources":["../../src/ui/document.tsx"],"sourcesContent":["import { raw } from \"hono/html\";\nimport type { FC } from \"hono/jsx\";\nimport { assetManifest } from \"../asset-manifest.ts\";\nimport { getCsrfToken } from \"../middleware/csrf.ts\";\nimport { getStore } from \"../store.ts\";\nimport { Style, css } from \"./css.ts\";\nimport { BareShell } from \"./shell/bare.tsx\";\nimport { bootScript } from \"./shell/boot-script.ts\";\nimport type { NavConfig } from \"./shell/nav.ts\";\nimport { Sidebar } from \"./shell/sidebar.tsx\";\nimport { ToastRegion, TopBar } from \"./shell/topbar.tsx\";\nimport { baseStyle } from \"./styles.ts\";\nimport { DARK_THEME, LIGHT_THEME } from \"./theme.ts\";\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\n/** Active section, project, and breadcrumb trail passed to the shell. */\nexport type { NavConfig };\n\n/** Rendered HTML content returned by page components. */\nexport type RenderedContent = string | Promise<string>;\n\n/**\n * Page frame: `default` is a readable column, `wide` uses the full viewport,\n * `bare` drops the app chrome (sign-in, invites).\n */\ntype PageLayout = \"default\" | \"wide\" | \"bare\";\n\nconst shellRoot = css`\n  /* shell */\n  display: grid;\n  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);\n  min-height: 100vh;\n  @media (max-width: 880px) {\n    & {\n      grid-template-columns: minmax(0, 1fr);\n    }\n  }\n`;\n\nconst shellContent = css`\n  /* shell-content */\n  width: 100%;\n  max-width: 1200px;\n  margin: 0 auto;\n  padding: var(--space-6) var(--space-6) var(--space-8);\n  min-width: 0;\n  @media (max-width: 880px) {\n    & {\n      padding: var(--space-4);\n    }\n  }\n`;\n\nconst shellContentWide = css`\n  /* shell-content-wide */\n  ${shellContent}\n  max-width: none;\n`;\n\nconst shellBackdrop = css`\n  /* shell-backdrop */\n  position: fixed;\n  inset: 0;\n  z-index: 55;\n  background: rgb(0 0 0 / 0.4);\n  &[hidden] {\n    display: none;\n  }\n`;\n\n// Hono's JSX.Element is typed as `HtmlEscapedString | Promise<...>`, so JSX-returning\n// Functions can legitimately return a promise; the rule is a false positive here.\n/** Full HTML document shell with sidebar, top bar, theme, toasts, and HTMX. */\nexport const DocumentLayout: FC<{\n  title: string;\n  nav?: NavConfig;\n  layout?: PageLayout;\n  children?: unknown;\n}> = ({ title, nav, layout = \"default\", children }) => {\n  const { ui, config, sessionId } = getStore();\n  const name = ui.name ?? \"StoryShelf\";\n  const logo = ui.logo ?? assetManifest.mark.href;\n  const light = ui.lightTheme ?? LIGHT_THEME;\n  const dark = ui.darkTheme ?? DARK_THEME;\n\n  return (\n    <>\n      {/* Without a doctype browsers use quirks mode (form margins, line-box struts, …). */}\n      {raw(\"<!DOCTYPE html>\")}\n      <html lang=\"en\" data-theme=\"system\">\n        <head>\n          <meta charset=\"utf-8\" />\n          <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n          <meta name=\"color-scheme\" content=\"light dark\" />\n          <meta name=\"csrf-token\" content={getCsrfToken(config.secret, sessionId)} />\n          {/* Favicon is the product's own mark, not brandable: it identifies\n              StoryShelf in the tab strip. `ui.logo` stays overridable. */}\n          <link rel=\"icon\" type=\"image/svg+xml\" href={assetManifest.mark.href} />\n          <title>\n            {title} · {name}\n          </title>\n          <style dangerouslySetInnerHTML={{ __html: baseStyle(light, dark) }} />\n          <Style />\n          <script dangerouslySetInnerHTML={{ __html: bootScript() }} />\n        </head>\n        <body>\n          <a class=\"skip-link\" href=\"#main-content\">\n            Skip to content\n          </a>\n          {layout === \"bare\" ? (\n            <BareShell name={name} logo={logo}>\n              {children}\n            </BareShell>\n          ) : (\n            <>\n              <div class={shellRoot}>\n                <Sidebar nav={nav} name={name} logo={logo} />\n                <div>\n                  <TopBar nav={nav} />\n                  <main\n                    id=\"main-content\"\n                    class={layout === \"wide\" ? shellContentWide : shellContent}\n                    tabindex={-1}\n                  >\n                    {children}\n                  </main>\n                </div>\n              </div>\n              <div class={shellBackdrop} data-sidebar-backdrop hidden />\n            </>\n          )}\n          <ToastRegion />\n          <script src={assetManifest.htmx.href} />\n          <script src={assetManifest.client.href} />\n        </body>\n      </html>\n    </>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;AA4BA,MAAM,YAAY,GAAG;;;;;;;;;;;AAYrB,MAAM,eAAe,GAAG;;;;;;;;;;;;;AAcxB,MAAM,mBAAmB,GAAG;;IAExB,aAAa;;;AAIjB,MAAM,gBAAgB,GAAG;;;;;;;;;;;AAczB,MAAa,kBAKP,EAAE,OAAO,KAAK,SAAS,WAAW,eAAe;CACrD,MAAM,EAAE,IAAI,QAAQ,cAAc,SAAS;CAC3C,MAAM,OAAO,GAAG,QAAQ;CACxB,MAAM,OAAO,GAAG,QAAQ,cAAc,KAAK;CAC3C,MAAM,QAAQ,GAAG,cAAc;CAC/B,MAAM,OAAO,GAAG,aAAa;CAE7B,OACE,qBAAA,UAAA,EAAA,UAAA,CAEG,IAAI,iBAAiB,GACtB,qBAAC,QAAD;EAAM,MAAK;EAAK,cAAW;EAA3B,UAAA,CACE,qBAAC,QAAD,EAAA,UAAA;GACE,oBAAC,QAAD,EAAM,SAAQ,QAAS,CAAA;GACvB,oBAAC,QAAD;IAAM,MAAK;IAAW,SAAQ;GAAuC,CAAA;GACrE,oBAAC,QAAD;IAAM,MAAK;IAAe,SAAQ;GAAc,CAAA;GAChD,oBAAC,QAAD;IAAM,MAAK;IAAa,SAAS,aAAa,OAAO,QAAQ,SAAS;GAAI,CAAA;GAG1E,oBAAC,QAAD;IAAM,KAAI;IAAO,MAAK;IAAgB,MAAM,cAAc,KAAK;GAAO,CAAA;GACtE,qBAAC,SAAD,EAAA,UAAA;IACG;IAAM;IAAI;GACN,EAAA,CAAA;GACP,oBAAC,SAAD,EAAO,yBAAyB,EAAE,QAAQ,UAAU,OAAO,IAAI,EAAE,EAAI,CAAA;GACrE,oBAAC,OAAD,CAAQ,CAAA;GACR,oBAAC,UAAD,EAAQ,yBAAyB,EAAE,QAAQ,WAAW,EAAE,EAAI,CAAA;EACxD,EAAA,CAAA,GACN,qBAAC,QAAD,EAAA,UAAA;GACE,oBAAC,KAAD;IAAG,OAAM;IAAY,MAAK;IAAgB,UAAA;GAEvC,CAAA;GACF,WAAW,SACV,oBAAC,WAAD;IAAiB;IAAY;IAC1B;GACQ,CAAA,IAEX,qBAAA,UAAA,EAAA,UAAA,CACE,qBAAC,OAAD;IAAK,OAAO;IAAZ,UAAA,CACE,oBAAC,SAAD;KAAc;KAAW;KAAY;IAAO,CAAA,GAC5C,qBAAC,OAAD,EAAA,UAAA,CACE,oBAAC,QAAD,EAAa,IAAM,CAAA,GACnB,oBAAC,QAAD;KACE,IAAG;KACH,OAAO,WAAW,SAAS,mBAAmB;KAC9C,UAAU;KAET;IACG,CAAA,CACH,EAAA,CAAA,CACF;GACL,CAAA,GAAA,oBAAC,OAAD;IAAK,OAAO;IAAe,yBAAA;IAAsB,QAAA;GAAQ,CAAA,CACzD,EAAA,CAAA;GAEJ,oBAAC,aAAD,CAAc,CAAA;GACd,oBAAC,UAAD,EAAQ,KAAK,cAAc,KAAK,KAAO,CAAA;GACvC,oBAAC,UAAD,EAAQ,KAAK,cAAc,OAAO,KAAO,CAAA;EACrC,EAAA,CAAA,CACF;CACN,CAAA,CAAA,EAAA,CAAA;AAEN"}

package/dist/ui/dropdown.mjs

@@ -4,7 +4,7 @@ import.meta.url;
 import { css } from "./css.mjs";
 import { Icon } from "./icons/icon.mjs";
 import { Fragment, jsx, jsxs } from "hono/jsx/jsx-runtime";
-//#region src/ui/dropdown.tsx
+// src/ui/dropdown.tsx
 const dropdownRoot = css`
   /* dropdown */
   position: relative;
@@ -175,7 +175,6 @@ const DropdownDivider = () => {
 		role: "separator"
 	});
 };
-//#endregion
 export { Dropdown, DropdownDivider, DropdownItem };
 
 //# sourceMappingURL=dropdown.mjs.map

package/dist/ui/feedback.mjs

@@ -4,7 +4,7 @@ import.meta.url;
 import { css } from "./css.mjs";
 import { Icon } from "./icons/icon.mjs";
 import { jsx, jsxs } from "hono/jsx/jsx-runtime";
-//#region src/ui/feedback.tsx
+// src/ui/feedback.tsx
 const badgeBase = css`
   /* badge */
   display: inline-flex;
@@ -335,7 +335,6 @@ const Meta = ({ as = "p", mono = false, tone = "neutral", center = false, childr
 		children
 	});
 };
-//#endregion
 export { Alert, Badge, EmptyState, Meta, Stat, statusTone };
 
 //# sourceMappingURL=feedback.mjs.map

package/dist/ui/filter-input.mjs

@@ -4,7 +4,7 @@ import.meta.url;
 import { css } from "./css.mjs";
 import { Icon } from "./icons/icon.mjs";
 import { jsx, jsxs } from "hono/jsx/jsx-runtime";
-//#region src/ui/filter-input.tsx
+// src/ui/filter-input.tsx
 const filterWrap = css`
   /* filter-input */
   position: relative;
@@ -52,7 +52,6 @@ const FilterInput = ({ label, placeholder = "Filter…" }) => {
 		})]
 	});
 };
-//#endregion
 export { FilterInput };
 
 //# sourceMappingURL=filter-input.mjs.map

package/dist/ui/forms.mjs

@@ -4,7 +4,7 @@ import.meta.url;
 import { css } from "./css.mjs";
 import { Icon } from "./icons/icon.mjs";
 import { jsx, jsxs } from "hono/jsx/jsx-runtime";
-//#region src/ui/forms.tsx
+// src/ui/forms.tsx
 const fieldWrap = css`
   /* field */
   display: grid;
@@ -226,28 +226,29 @@ const CheckField = ({ label, name, value, checked, disabled, hint }) => {
 	});
 };
 /** Labeled textarea with error and hint states. */
-const TextareaField = ({ label, name, value, placeholder, rows = 3, required, hint, error }) => {
+const TextareaField = ({ label, name, id, value, placeholder, rows = 3, required, hint, error }) => {
+	const domId = id ?? name;
 	return /* @__PURE__ */ jsxs("div", {
 		class: fieldWrap,
 		children: [
 			/* @__PURE__ */ jsx("label", {
 				class: fieldLabel,
-				for: name,
+				for: domId,
 				children: label
 			}),
 			/* @__PURE__ */ jsx("textarea", {
 				class: error ? fieldTextareaError : fieldTextarea,
-				id: name,
+				id: domId,
 				name,
 				placeholder,
 				rows,
 				required,
 				"aria-invalid": error ? "true" : void 0,
-				"aria-describedby": fieldDescribedBy(name, error, hint),
+				"aria-describedby": fieldDescribedBy(domId, error, hint),
 				children: value
 			}),
 			/* @__PURE__ */ jsx(FieldAssistant, {
-				name,
+				name: domId,
 				error,
 				hint
 			})
@@ -285,7 +286,6 @@ const SelectField = ({ label, name, value, options, hint, disabled, required, la
 		]
 	});
 };
-//#endregion
 export { CheckField, Field, FormActions, SelectField, TextareaField };
 
 //# sourceMappingURL=forms.mjs.map

package/dist/ui/forms.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"forms.mjs","names":[],"sources":["../../src/ui/forms.tsx"],"sourcesContent":["import type { FC } from \"hono/jsx\";\nimport { css } from \"./css.ts\";\nimport { Icon } from \"./icons/icon.tsx\";\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\ntype FieldLayout = \"stack\" | \"inline\";\n\nconst fieldWrap = css`\n  /* field */\n  display: grid;\n  gap: var(--space-1);\n  /* Don't stretch rows when a neighbouring field is taller (hint text). */\n  align-content: start;\n  margin-bottom: var(--space-4);\n`;\n\nconst fieldWrapInline = css`\n  /* field-inline */\n  ${fieldWrap}\n  grid-template-columns: auto minmax(0, 1fr);\n  align-items: center;\n  gap: var(--space-2);\n  margin-bottom: 0;\n`;\n\nconst fieldLabel = css`\n  /* field-label */\n  color: var(--text-primary);\n  font-weight: 600;\n  font-size: var(--text-sm);\n  & span[aria-hidden] {\n    color: var(--status-rejected);\n  }\n`;\n\nconst fieldInput = css`\n  /* field-input */\n  width: 100%;\n  min-height: 40px;\n  padding: 0.5rem 0.75rem;\n  border-radius: var(--radius);\n  border: 1px solid var(--border);\n  background: var(--surface-card);\n  color: var(--text-primary);\n  font: inherit;\n  font-size: var(--text-base);\n  box-shadow: var(--shadow);\n  transition:\n    border-color var(--dur-fast) var(--ease),\n    box-shadow var(--dur-fast) var(--ease);\n  &::placeholder {\n    color: var(--text-muted);\n  }\n  &:hover:not(:disabled) {\n    border-color: color-mix(in srgb, var(--text-secondary) 45%, var(--border));\n  }\n  &:focus {\n    outline: none;\n    border-color: var(--ring);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 25%, transparent);\n  }\n  &:disabled {\n    background: var(--surface-muted);\n    color: var(--text-secondary);\n    cursor: not-allowed;\n  }\n`;\n\nconst fieldInputError = css`\n  /* field-input-error */\n  ${fieldInput}\n  border-color: var(--status-rejected);\n  &:focus {\n    border-color: var(--status-rejected);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-rejected) 25%, transparent);\n  }\n`;\n\nconst fieldTextarea = css`\n  /* field-textarea */\n  ${fieldInput}\n  resize: vertical;\n  min-height: 5.5rem;\n  line-height: var(--leading-normal);\n`;\n\nconst fieldTextareaError = css`\n  /* field-textarea-error */\n  ${fieldInputError}\n  resize: vertical;\n  min-height: 5.5rem;\n  line-height: var(--leading-normal);\n`;\n\nconst fieldHint = css`\n  /* field-hint */\n  margin: 0;\n  color: var(--text-secondary);\n  font-size: var(--text-sm);\n`;\n\nconst fieldError = css`\n  /* field-error */\n  display: flex;\n  gap: var(--space-1);\n  align-items: flex-start;\n  margin: 0;\n  color: var(--status-rejected-fg);\n  font-size: var(--text-sm);\n  font-weight: 600;\n`;\n\nconst formActions = css`\n  /* form-actions */\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2);\n  align-items: center;\n  margin-top: var(--space-4);\n`;\n\nconst formActionsEnd = css`\n  /* form-actions-end */\n  ${formActions}\n  justify-content: flex-end;\n`;\n\nconst formActionsSplit = css`\n  /* form-actions-split */\n  ${formActions}\n  justify-content: space-between;\n`;\n\n/** Row of form buttons: primary action first; `align=\"end\"` right-aligns, `\"split\"` spreads. */\nexport const FormActions: FC<{ align?: \"start\" | \"end\" | \"split\"; children?: unknown }> = ({\n  align = \"start\",\n  children,\n}) => {\n  const cls = align === \"end\" ? formActionsEnd : align === \"split\" ? formActionsSplit : formActions;\n  return <div class={cls}>{children}</div>;\n};\n\nfunction fieldDescribedBy(\n  name: string,\n  error: string | undefined,\n  hint: string | undefined,\n): string | undefined {\n  if (error) {\n    return `${name}-error`;\n  }\n  if (hint) {\n    return `${name}-hint`;\n  }\n  return undefined;\n}\n\n// eslint-disable-next-line promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString>\nconst FieldAssistant: FC<{ name: string; error: string | undefined; hint: string | undefined }> = ({\n  name,\n  error,\n  hint,\n}) => {\n  if (error) {\n    return (\n      <p class={fieldError} id={`${name}-error`} role=\"alert\">\n        <Icon name=\"x-circle\" size=\"sm\" />\n        <span>{error}</span>\n      </p>\n    );\n  }\n  if (hint) {\n    return (\n      <p class={fieldHint} id={`${name}-hint`}>\n        {hint}\n      </p>\n    );\n  }\n  return null;\n};\n\n/** Labeled text input with error and hint states. */\n// eslint-disable-next-line promise-function-async -- JSX component return type\nexport const Field: FC<{\n  label: string;\n  name: string;\n  type?: string;\n  value?: string;\n  placeholder?: string;\n  required?: boolean;\n  disabled?: boolean;\n  autofocus?: boolean;\n  pattern?: string;\n  min?: string;\n  max?: string;\n  step?: string;\n  layout?: FieldLayout;\n  error?: string;\n  hint?: string;\n  autocomplete?: string;\n}> = ({\n  label,\n  name,\n  type = \"text\",\n  value,\n  placeholder,\n  required,\n  disabled,\n  autofocus,\n  pattern,\n  min,\n  max,\n  step,\n  layout = \"stack\",\n  error,\n  hint,\n  autocomplete,\n}) => {\n  return (\n    <div class={layout === \"inline\" ? fieldWrapInline : fieldWrap}>\n      <label class={fieldLabel} for={name}>\n        {label}\n        {required ? <span aria-hidden=\"true\"> *</span> : null}\n      </label>\n      <input\n        class={error ? fieldInputError : fieldInput}\n        id={name}\n        name={name}\n        type={type}\n        value={value}\n        placeholder={placeholder}\n        required={required}\n        disabled={disabled}\n        autofocus={autofocus}\n        pattern={pattern}\n        min={min}\n        max={max}\n        step={step}\n        aria-invalid={error ? \"true\" : undefined}\n        aria-describedby={fieldDescribedBy(name, error, hint)}\n        autocomplete={autocomplete}\n      />\n      <FieldAssistant name={name} error={error} hint={hint} />\n    </div>\n  );\n};\n\nconst checkLabel = css`\n  /* check-label */\n  display: flex;\n  gap: var(--space-2);\n  align-items: center;\n  font-weight: 500;\n  font-size: var(--text-base);\n  cursor: pointer;\n`;\n\nconst checkInput = css`\n  /* check-input */\n  width: 1rem;\n  height: 1rem;\n  accent-color: var(--accent);\n  flex: none;\n`;\n\n/** Inline checkbox row with an optional hint. */\n// eslint-disable-next-line promise-function-async -- JSX component return type\nexport const CheckField: FC<{\n  label: unknown;\n  name: string;\n  value?: string;\n  checked?: boolean;\n  disabled?: boolean;\n  hint?: string;\n}> = ({ label, name, value, checked, disabled, hint }) => {\n  return (\n    <div class={fieldWrap}>\n      <label class={checkLabel} for={name}>\n        <input\n          class={checkInput}\n          type=\"checkbox\"\n          id={name}\n          name={name}\n          value={value}\n          checked={checked}\n          disabled={disabled}\n        />\n        {label}\n      </label>\n      {hint ? (\n        <p class={fieldHint} id={`${name}-hint`}>\n          {hint}\n        </p>\n      ) : null}\n    </div>\n  );\n};\n\n/** Labeled textarea with error and hint states. */\n// eslint-disable-next-line promise-function-async -- JSX component return type\nexport const TextareaField: FC<{\n  label: string;\n  name: string;\n  value?: string;\n  placeholder?: string;\n  rows?: number;\n  required?: boolean;\n  hint?: string;\n  error?: string;\n}> = ({ label, name, value, placeholder, rows = 3, required, hint, error }) => {\n  return (\n    <div class={fieldWrap}>\n      <label class={fieldLabel} for={name}>\n        {label}\n      </label>\n      <textarea\n        class={error ? fieldTextareaError : fieldTextarea}\n        id={name}\n        name={name}\n        placeholder={placeholder}\n        rows={rows}\n        required={required}\n        aria-invalid={error ? \"true\" : undefined}\n        aria-describedby={fieldDescribedBy(name, error, hint)}\n      >\n        {value}\n      </textarea>\n      <FieldAssistant name={name} error={error} hint={hint} />\n    </div>\n  );\n};\n\n/** Labeled select dropdown with an optional hint. */\n// eslint-disable-next-line promise-function-async -- JSX component return type\nexport const SelectField: FC<{\n  label: string;\n  name: string;\n  value?: string;\n  options: { value: string; label: string }[];\n  hint?: string;\n  disabled?: boolean;\n  required?: boolean;\n  layout?: FieldLayout;\n}> = ({ label, name, value, options, hint, disabled, required, layout = \"stack\" }) => {\n  return (\n    <div class={layout === \"inline\" ? fieldWrapInline : fieldWrap}>\n      <label class={fieldLabel} for={name}>\n        {label}\n      </label>\n      <select\n        class={fieldInput}\n        id={name}\n        name={name}\n        disabled={disabled}\n        required={required}\n        aria-describedby={hint ? `${name}-hint` : undefined}\n      >\n        {options.map((opt) => (\n          <option value={opt.value} selected={opt.value === value}>\n            {opt.label}\n          </option>\n        ))}\n      </select>\n      {hint ? (\n        <p class={fieldHint} id={`${name}-hint`}>\n          {hint}\n        </p>\n      ) : null}\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"forms.mjs","names":[],"sources":["../../src/ui/forms.tsx"],"sourcesContent":["import type { FC } from \"hono/jsx\";\nimport { css } from \"./css.ts\";\nimport { Icon } from \"./icons/icon.tsx\";\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\ntype FieldLayout = \"stack\" | \"inline\";\n\nconst fieldWrap = css`\n  /* field */\n  display: grid;\n  gap: var(--space-1);\n  /* Don't stretch rows when a neighbouring field is taller (hint text). */\n  align-content: start;\n  margin-bottom: var(--space-4);\n`;\n\nconst fieldWrapInline = css`\n  /* field-inline */\n  ${fieldWrap}\n  grid-template-columns: auto minmax(0, 1fr);\n  align-items: center;\n  gap: var(--space-2);\n  margin-bottom: 0;\n`;\n\nconst fieldLabel = css`\n  /* field-label */\n  color: var(--text-primary);\n  font-weight: 600;\n  font-size: var(--text-sm);\n  & span[aria-hidden] {\n    color: var(--status-rejected);\n  }\n`;\n\nconst fieldInput = css`\n  /* field-input */\n  width: 100%;\n  min-height: 40px;\n  padding: 0.5rem 0.75rem;\n  border-radius: var(--radius);\n  border: 1px solid var(--border);\n  background: var(--surface-card);\n  color: var(--text-primary);\n  font: inherit;\n  font-size: var(--text-base);\n  box-shadow: var(--shadow);\n  transition:\n    border-color var(--dur-fast) var(--ease),\n    box-shadow var(--dur-fast) var(--ease);\n  &::placeholder {\n    color: var(--text-muted);\n  }\n  &:hover:not(:disabled) {\n    border-color: color-mix(in srgb, var(--text-secondary) 45%, var(--border));\n  }\n  &:focus {\n    outline: none;\n    border-color: var(--ring);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 25%, transparent);\n  }\n  &:disabled {\n    background: var(--surface-muted);\n    color: var(--text-secondary);\n    cursor: not-allowed;\n  }\n`;\n\nconst fieldInputError = css`\n  /* field-input-error */\n  ${fieldInput}\n  border-color: var(--status-rejected);\n  &:focus {\n    border-color: var(--status-rejected);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-rejected) 25%, transparent);\n  }\n`;\n\nconst fieldTextarea = css`\n  /* field-textarea */\n  ${fieldInput}\n  resize: vertical;\n  min-height: 5.5rem;\n  line-height: var(--leading-normal);\n`;\n\nconst fieldTextareaError = css`\n  /* field-textarea-error */\n  ${fieldInputError}\n  resize: vertical;\n  min-height: 5.5rem;\n  line-height: var(--leading-normal);\n`;\n\nconst fieldHint = css`\n  /* field-hint */\n  margin: 0;\n  color: var(--text-secondary);\n  font-size: var(--text-sm);\n`;\n\nconst fieldError = css`\n  /* field-error */\n  display: flex;\n  gap: var(--space-1);\n  align-items: flex-start;\n  margin: 0;\n  color: var(--status-rejected-fg);\n  font-size: var(--text-sm);\n  font-weight: 600;\n`;\n\nconst formActions = css`\n  /* form-actions */\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2);\n  align-items: center;\n  margin-top: var(--space-4);\n`;\n\nconst formActionsEnd = css`\n  /* form-actions-end */\n  ${formActions}\n  justify-content: flex-end;\n`;\n\nconst formActionsSplit = css`\n  /* form-actions-split */\n  ${formActions}\n  justify-content: space-between;\n`;\n\n/** Row of form buttons: primary action first; `align=\"end\"` right-aligns, `\"split\"` spreads. */\nexport const FormActions: FC<{ align?: \"start\" | \"end\" | \"split\"; children?: unknown }> = ({\n  align = \"start\",\n  children,\n}) => {\n  const cls = align === \"end\" ? formActionsEnd : align === \"split\" ? formActionsSplit : formActions;\n  return <div class={cls}>{children}</div>;\n};\n\nfunction fieldDescribedBy(\n  name: string,\n  error: string | undefined,\n  hint: string | undefined,\n): string | undefined {\n  if (error) {\n    return `${name}-error`;\n  }\n  if (hint) {\n    return `${name}-hint`;\n  }\n  return undefined;\n}\n\n// eslint-disable-next-line promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString>\nconst FieldAssistant: FC<{ name: string; error: string | undefined; hint: string | undefined }> = ({\n  name,\n  error,\n  hint,\n}) => {\n  if (error) {\n    return (\n      <p class={fieldError} id={`${name}-error`} role=\"alert\">\n        <Icon name=\"x-circle\" size=\"sm\" />\n        <span>{error}</span>\n      </p>\n    );\n  }\n  if (hint) {\n    return (\n      <p class={fieldHint} id={`${name}-hint`}>\n        {hint}\n      </p>\n    );\n  }\n  return null;\n};\n\n/** Labeled text input with error and hint states. */\n// eslint-disable-next-line promise-function-async -- JSX component return type\nexport const Field: FC<{\n  label: string;\n  name: string;\n  type?: string;\n  value?: string;\n  placeholder?: string;\n  required?: boolean;\n  disabled?: boolean;\n  autofocus?: boolean;\n  pattern?: string;\n  min?: string;\n  max?: string;\n  step?: string;\n  layout?: FieldLayout;\n  error?: string;\n  hint?: string;\n  autocomplete?: string;\n}> = ({\n  label,\n  name,\n  type = \"text\",\n  value,\n  placeholder,\n  required,\n  disabled,\n  autofocus,\n  pattern,\n  min,\n  max,\n  step,\n  layout = \"stack\",\n  error,\n  hint,\n  autocomplete,\n}) => {\n  return (\n    <div class={layout === \"inline\" ? fieldWrapInline : fieldWrap}>\n      <label class={fieldLabel} for={name}>\n        {label}\n        {required ? <span aria-hidden=\"true\"> *</span> : null}\n      </label>\n      <input\n        class={error ? fieldInputError : fieldInput}\n        id={name}\n        name={name}\n        type={type}\n        value={value}\n        placeholder={placeholder}\n        required={required}\n        disabled={disabled}\n        autofocus={autofocus}\n        pattern={pattern}\n        min={min}\n        max={max}\n        step={step}\n        aria-invalid={error ? \"true\" : undefined}\n        aria-describedby={fieldDescribedBy(name, error, hint)}\n        autocomplete={autocomplete}\n      />\n      <FieldAssistant name={name} error={error} hint={hint} />\n    </div>\n  );\n};\n\nconst checkLabel = css`\n  /* check-label */\n  display: flex;\n  gap: var(--space-2);\n  align-items: center;\n  font-weight: 500;\n  font-size: var(--text-base);\n  cursor: pointer;\n`;\n\nconst checkInput = css`\n  /* check-input */\n  width: 1rem;\n  height: 1rem;\n  accent-color: var(--accent);\n  flex: none;\n`;\n\n/** Inline checkbox row with an optional hint. */\n// eslint-disable-next-line promise-function-async -- JSX component return type\nexport const CheckField: FC<{\n  label: unknown;\n  name: string;\n  value?: string;\n  checked?: boolean;\n  disabled?: boolean;\n  hint?: string;\n}> = ({ label, name, value, checked, disabled, hint }) => {\n  return (\n    <div class={fieldWrap}>\n      <label class={checkLabel} for={name}>\n        <input\n          class={checkInput}\n          type=\"checkbox\"\n          id={name}\n          name={name}\n          value={value}\n          checked={checked}\n          disabled={disabled}\n        />\n        {label}\n      </label>\n      {hint ? (\n        <p class={fieldHint} id={`${name}-hint`}>\n          {hint}\n        </p>\n      ) : null}\n    </div>\n  );\n};\n\n/** Labeled textarea with error and hint states. */\n// eslint-disable-next-line promise-function-async -- JSX component return type\nexport const TextareaField: FC<{\n  label: string;\n  name: string;\n  /** DOM id when several forms on a page post the same field name (defaults to `name`). */\n  id?: string;\n  value?: string;\n  placeholder?: string;\n  rows?: number;\n  required?: boolean;\n  hint?: string;\n  error?: string;\n}> = ({ label, name, id, value, placeholder, rows = 3, required, hint, error }) => {\n  const domId = id ?? name;\n  return (\n    <div class={fieldWrap}>\n      <label class={fieldLabel} for={domId}>\n        {label}\n      </label>\n      <textarea\n        class={error ? fieldTextareaError : fieldTextarea}\n        id={domId}\n        name={name}\n        placeholder={placeholder}\n        rows={rows}\n        required={required}\n        aria-invalid={error ? \"true\" : undefined}\n        aria-describedby={fieldDescribedBy(domId, error, hint)}\n      >\n        {value}\n      </textarea>\n      <FieldAssistant name={domId} error={error} hint={hint} />\n    </div>\n  );\n};\n\n/** Labeled select dropdown with an optional hint. */\n// eslint-disable-next-line promise-function-async -- JSX component return type\nexport const SelectField: FC<{\n  label: string;\n  name: string;\n  value?: string;\n  options: { value: string; label: string }[];\n  hint?: string;\n  disabled?: boolean;\n  required?: boolean;\n  layout?: FieldLayout;\n}> = ({ label, name, value, options, hint, disabled, required, layout = \"stack\" }) => {\n  return (\n    <div class={layout === \"inline\" ? fieldWrapInline : fieldWrap}>\n      <label class={fieldLabel} for={name}>\n        {label}\n      </label>\n      <select\n        class={fieldInput}\n        id={name}\n        name={name}\n        disabled={disabled}\n        required={required}\n        aria-describedby={hint ? `${name}-hint` : undefined}\n      >\n        {options.map((opt) => (\n          <option value={opt.value} selected={opt.value === value}>\n            {opt.label}\n          </option>\n        ))}\n      </select>\n      {hint ? (\n        <p class={fieldHint} id={`${name}-hint`}>\n          {hint}\n        </p>\n      ) : null}\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/ui/icons/icon.mjs

@@ -4,7 +4,7 @@ import.meta.url;
 import { css } from "../css.mjs";
 import { iconHref } from "./sprite.mjs";
 import { jsx } from "hono/jsx/jsx-runtime";
-//#region src/ui/icons/icon.tsx
+// src/ui/icons/icon.tsx
 const iconBase = css`
   /* icon */
   flex: none;
@@ -47,7 +47,6 @@ const Icon = ({ name, size = "md", label }) => {
 		children: /* @__PURE__ */ jsx("use", { href: iconHref(name) })
 	});
 };
-//#endregion
 export { Icon };
 
 //# sourceMappingURL=icon.mjs.map

package/dist/ui/icons/paths.mjs

@@ -1,7 +1,7 @@
 import "node:path";
 import "node:url";
 import.meta.url;
-//#region src/ui/icons/paths.ts
+// src/ui/icons/paths.ts
 /**
 * Icon set: inner SVG markup per icon on a 24x24 grid, stroke-based
 * (Lucide-style, ISC). Add an icon here and it is in the sprite and the
@@ -23,6 +23,7 @@ const ICON_PATHS = {
 	"git-branch": "<path d=\"M6 3v12\"/><circle cx=\"18\" cy=\"6\" r=\"3\"/><circle cx=\"6\" cy=\"18\" r=\"3\"/><path d=\"M18 9a9 9 0 0 1-9 9\"/>",
 	"git-commit": "<circle cx=\"12\" cy=\"12\" r=\"3\"/><path d=\"M3 12h6M15 12h6\"/>",
 	activity: "<path d=\"M22 12h-4l-3 9L9 3l-3 9H2\"/>",
+	sparkles: "<path d=\"M9.9 15.5A2 2 0 0 0 8.5 14.1l-6.1-1.6a.5.5 0 0 1 0-1L8.5 9.9A2 2 0 0 0 9.9 8.5l1.6-6.1a.5.5 0 0 1 1 0l1.6 6.1a2 2 0 0 0 1.4 1.4l6.1 1.6a.5.5 0 0 1 0 1l-6.1 1.6a2 2 0 0 0-1.4 1.4l-1.6 6.1a.5.5 0 0 1-1 0z\"/><path d=\"M20 3v4M22 5h-4M4 17v2M5 18H3\"/>",
 	tag: "<path d=\"M12.6 2.6A2 2 0 0 0 11.2 2H4a2 2 0 0 0-2 2v7.2a2 2 0 0 0 .6 1.4l8.7 8.7a2.4 2.4 0 0 0 3.4 0l6.6-6.6a2.4 2.4 0 0 0 0-3.4z\"/><circle cx=\"7.5\" cy=\"7.5\" r=\".5\" fill=\"currentColor\"/>",
 	settings: "<path d=\"M12.2 2h-.4a2 2 0 0 0-2 2v.2a2 2 0 0 1-1 1.7l-.4.3a2 2 0 0 1-2 0l-.2-.1a2 2 0 0 0-2.7.7l-.2.4a2 2 0 0 0 .7 2.7l.2.1a2 2 0 0 1 1 1.7v.5a2 2 0 0 1-1 1.8l-.2.1a2 2 0 0 0-.7 2.7l.2.4a2 2 0 0 0 2.7.7l.2-.1a2 2 0 0 1 2 0l.4.3a2 2 0 0 1 1 1.7v.2a2 2 0 0 0 2 2h.4a2 2 0 0 0 2-2v-.2a2 2 0 0 1 1-1.7l.4-.3a2 2 0 0 1 2 0l.2.1a2 2 0 0 0 2.7-.7l.2-.4a2 2 0 0 0-.7-2.7l-.2-.1a2 2 0 0 1-1-1.8v-.5a2 2 0 0 1 1-1.7l.2-.1a2 2 0 0 0 .7-2.7l-.2-.4a2 2 0 0 0-2.7-.7l-.2.1a2 2 0 0 1-2 0l-.4-.3a2 2 0 0 1-1-1.7V4a2 2 0 0 0-2-2z\"/><circle cx=\"12\" cy=\"12\" r=\"3\"/>",
 	users: "<path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"/><circle cx=\"9\" cy=\"7\" r=\"4\"/><path d=\"M22 21v-2a4 4 0 0 0-3-3.9M16 3.1a4 4 0 0 1 0 7.8\"/>",
@@ -55,7 +56,6 @@ const ICON_PATHS = {
 	book: "<path d=\"M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20\"/>",
 	server: "<rect width=\"20\" height=\"8\" x=\"2\" y=\"2\" rx=\"2\"/><rect width=\"20\" height=\"8\" x=\"2\" y=\"14\" rx=\"2\"/><path d=\"M6 6h.01M6 18h.01\"/>"
 };
-//#endregion
 export { ICON_PATHS };
 
 //# sourceMappingURL=paths.mjs.map

package/dist/ui/icons/paths.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"paths.mjs","names":[],"sources":["../../../src/ui/icons/paths.ts"],"sourcesContent":["/**\n * Icon set: inner SVG markup per icon on a 24x24 grid, stroke-based\n * (Lucide-style, ISC). Add an icon here and it is in the sprite and the\n * `IconName` union automatically.\n */\nexport const ICON_PATHS = {\n  check: '<path d=\"M20 6 9 17l-5-5\"/>',\n  x: '<path d=\"M18 6 6 18M6 6l12 12\"/>',\n  plus: '<path d=\"M5 12h14M12 5v14\"/>',\n  \"chevron-down\": '<path d=\"m6 9 6 6 6-6\"/>',\n  \"chevron-up\": '<path d=\"m18 15-6-6-6 6\"/>',\n  \"chevron-right\": '<path d=\"m9 18 6-6-6-6\"/>',\n  \"chevron-left\": '<path d=\"m15 18-6-6 6-6\"/>',\n  \"chevrons-left\": '<path d=\"m11 17-5-5 5-5M18 17l-5-5 5-5\"/>',\n  \"arrow-right\": '<path d=\"M5 12h14M12 5l7 7-7 7\"/>',\n  folder:\n    '<path d=\"M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z\"/>',\n  layers: '<path d=\"m12 2 10 5-10 5L2 7zM2 17l10 5 10-5M2 12l10 5 10-5\"/>',\n  image:\n    '<rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"/><circle cx=\"9\" cy=\"9\" r=\"2\"/><path d=\"m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21\"/>',\n  \"git-branch\":\n    '<path d=\"M6 3v12\"/><circle cx=\"18\" cy=\"6\" r=\"3\"/><circle cx=\"6\" cy=\"18\" r=\"3\"/><path d=\"M18 9a9 9 0 0 1-9 9\"/>',\n  \"git-commit\": '<circle cx=\"12\" cy=\"12\" r=\"3\"/><path d=\"M3 12h6M15 12h6\"/>',\n  activity: '<path d=\"M22 12h-4l-3 9L9 3l-3 9H2\"/>',\n  tag: '<path d=\"M12.6 2.6A2 2 0 0 0 11.2 2H4a2 2 0 0 0-2 2v7.2a2 2 0 0 0 .6 1.4l8.7 8.7a2.4 2.4 0 0 0 3.4 0l6.6-6.6a2.4 2.4 0 0 0 0-3.4z\"/><circle cx=\"7.5\" cy=\"7.5\" r=\".5\" fill=\"currentColor\"/>',\n  settings:\n    '<path d=\"M12.2 2h-.4a2 2 0 0 0-2 2v.2a2 2 0 0 1-1 1.7l-.4.3a2 2 0 0 1-2 0l-.2-.1a2 2 0 0 0-2.7.7l-.2.4a2 2 0 0 0 .7 2.7l.2.1a2 2 0 0 1 1 1.7v.5a2 2 0 0 1-1 1.8l-.2.1a2 2 0 0 0-.7 2.7l.2.4a2 2 0 0 0 2.7.7l.2-.1a2 2 0 0 1 2 0l.4.3a2 2 0 0 1 1 1.7v.2a2 2 0 0 0 2 2h.4a2 2 0 0 0 2-2v-.2a2 2 0 0 1 1-1.7l.4-.3a2 2 0 0 1 2 0l.2.1a2 2 0 0 0 2.7-.7l.2-.4a2 2 0 0 0-.7-2.7l-.2-.1a2 2 0 0 1-1-1.8v-.5a2 2 0 0 1 1-1.7l.2-.1a2 2 0 0 0 .7-2.7l-.2-.4a2 2 0 0 0-2.7-.7l-.2.1a2 2 0 0 1-2 0l-.4-.3a2 2 0 0 1-1-1.7V4a2 2 0 0 0-2-2z\"/><circle cx=\"12\" cy=\"12\" r=\"3\"/>',\n  users:\n    '<path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"/><circle cx=\"9\" cy=\"7\" r=\"4\"/><path d=\"M22 21v-2a4 4 0 0 0-3-3.9M16 3.1a4 4 0 0 1 0 7.8\"/>',\n  user: '<path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"/><circle cx=\"12\" cy=\"7\" r=\"4\"/>',\n  key: '<path d=\"m21 2-9.6 9.6M15.5 7.5l3 3L22 7l-3-3\"/><circle cx=\"7.5\" cy=\"15.5\" r=\"5.5\"/>',\n  bell: '<path d=\"M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9M10.3 21a1.9 1.9 0 0 0 3.4 0\"/>',\n  webhook:\n    '<path d=\"M18 16.98h-5.99c-1.1 0-1.95.94-2.48 1.9A4 4 0 0 1 2 17c.01-.7.2-1.4.57-2M9 17l3.13-5.78c.53-.97.43-2.22-.26-3.07a4 4 0 1 1 6.58-4.2c.38.6.58 1.3.57 2M6 17a4 4 0 0 1 6-3.5\"/><path d=\"M12 17h6a2 2 0 1 1 0 4\"/>',\n  code: '<path d=\"m16 18 6-6-6-6M8 6l-6 6 6 6\"/>',\n  terminal: '<path d=\"m4 17 6-6-6-6M12 19h8\"/>',\n  shield:\n    '<path d=\"M20 13c0 5-3.5 7.5-7.7 8.9a1 1 0 0 1-.6 0C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.2-2.7a1.2 1.2 0 0 1 1.6 0C14.5 3.8 17 5 19 5a1 1 0 0 1 1 1z\"/>',\n  search: '<circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/>',\n  sun: '<circle cx=\"12\" cy=\"12\" r=\"4\"/><path d=\"M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M6.3 17.7l-1.4 1.4M19.1 4.9l-1.4 1.4\"/>',\n  moon: '<path d=\"M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z\"/>',\n  monitor: '<rect width=\"20\" height=\"14\" x=\"2\" y=\"3\" rx=\"2\"/><path d=\"M8 21h8M12 17v4\"/>',\n  menu: '<path d=\"M4 6h16M4 12h16M4 18h16\"/>',\n  \"more-horizontal\":\n    '<circle cx=\"12\" cy=\"12\" r=\"1\"/><circle cx=\"19\" cy=\"12\" r=\"1\"/><circle cx=\"5\" cy=\"12\" r=\"1\"/>',\n  \"log-out\": '<path d=\"M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9\"/>',\n  \"external-link\":\n    '<path d=\"M15 3h6v6M10 14 21 3M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"/>',\n  copy: '<rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\"/><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"/>',\n  \"check-circle\": '<circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"m9 12 2 2 4-4\"/>',\n  \"x-circle\": '<circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"m15 9-6 6M9 9l6 6\"/>',\n  \"alert-triangle\":\n    '<path d=\"m21.7 18-8-14a2 2 0 0 0-3.5 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.7-3M12 9v4M12 17h.01\"/>',\n  info: '<circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M12 16v-4M12 8h.01\"/>',\n  clock: '<circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M12 6v6l4 2\"/>',\n  loader: '<path d=\"M21 12a9 9 0 1 1-6.2-8.6\"/>',\n  \"message-square\": '<path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\"/>',\n  columns: '<rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"/><path d=\"M12 3v18\"/>',\n  maximize:\n    '<path d=\"M8 3H5a2 2 0 0 0-2 2v3M21 8V5a2 2 0 0 0-2-2h-3M3 16v3a2 2 0 0 0 2 2h3M16 21h3a2 2 0 0 0 2-2v-3\"/>',\n  \"zoom-in\": '<circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3M11 8v6M8 11h6\"/>',\n  book: '<path d=\"M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20\"/>',\n  server:\n    '<rect width=\"20\" height=\"8\" x=\"2\" y=\"2\" rx=\"2\"/><rect width=\"20\" height=\"8\" x=\"2\" y=\"14\" rx=\"2\"/><path d=\"M6 6h.01M6 18h.01\"/>',\n} as const;\n\n/** Every icon name available in the sprite. */\nexport type IconName = keyof typeof ICON_PATHS;\n"],"mappings":";;;;;;;;;AAKA,MAAa,aAAa;CACxB,OAAO;CACP,GAAG;CACH,MAAM;CACN,gBAAgB;CAChB,cAAc;CACd,iBAAiB;CACjB,gBAAgB;CAChB,iBAAiB;CACjB,eAAe;CACf,QACE;CACF,QAAQ;CACR,OACE;CACF,cACE;CACF,cAAc;CACd,UAAU;CACV,KAAK;CACL,UACE;CACF,OACE;CACF,MAAM;CACN,KAAK;CACL,MAAM;CACN,SACE;CACF,MAAM;CACN,UAAU;CACV,QACE;CACF,QAAQ;CACR,KAAK;CACL,MAAM;CACN,SAAS;CACT,MAAM;CACN,mBACE;CACF,WAAW;CACX,iBACE;CACF,MAAM;CACN,gBAAgB;CAChB,YAAY;CACZ,kBACE;CACF,MAAM;CACN,OAAO;CACP,QAAQ;CACR,kBAAkB;CAClB,SAAS;CACT,UACE;CACF,WAAW;CACX,MAAM;CACN,QACE;AACJ"}
+{"version":3,"file":"paths.mjs","names":[],"sources":["../../../src/ui/icons/paths.ts"],"sourcesContent":["/**\n * Icon set: inner SVG markup per icon on a 24x24 grid, stroke-based\n * (Lucide-style, ISC). Add an icon here and it is in the sprite and the\n * `IconName` union automatically.\n */\nexport const ICON_PATHS = {\n  check: '<path d=\"M20 6 9 17l-5-5\"/>',\n  x: '<path d=\"M18 6 6 18M6 6l12 12\"/>',\n  plus: '<path d=\"M5 12h14M12 5v14\"/>',\n  \"chevron-down\": '<path d=\"m6 9 6 6 6-6\"/>',\n  \"chevron-up\": '<path d=\"m18 15-6-6-6 6\"/>',\n  \"chevron-right\": '<path d=\"m9 18 6-6-6-6\"/>',\n  \"chevron-left\": '<path d=\"m15 18-6-6 6-6\"/>',\n  \"chevrons-left\": '<path d=\"m11 17-5-5 5-5M18 17l-5-5 5-5\"/>',\n  \"arrow-right\": '<path d=\"M5 12h14M12 5l7 7-7 7\"/>',\n  folder:\n    '<path d=\"M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z\"/>',\n  layers: '<path d=\"m12 2 10 5-10 5L2 7zM2 17l10 5 10-5M2 12l10 5 10-5\"/>',\n  image:\n    '<rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"/><circle cx=\"9\" cy=\"9\" r=\"2\"/><path d=\"m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21\"/>',\n  \"git-branch\":\n    '<path d=\"M6 3v12\"/><circle cx=\"18\" cy=\"6\" r=\"3\"/><circle cx=\"6\" cy=\"18\" r=\"3\"/><path d=\"M18 9a9 9 0 0 1-9 9\"/>',\n  \"git-commit\": '<circle cx=\"12\" cy=\"12\" r=\"3\"/><path d=\"M3 12h6M15 12h6\"/>',\n  activity: '<path d=\"M22 12h-4l-3 9L9 3l-3 9H2\"/>',\n  sparkles:\n    '<path d=\"M9.9 15.5A2 2 0 0 0 8.5 14.1l-6.1-1.6a.5.5 0 0 1 0-1L8.5 9.9A2 2 0 0 0 9.9 8.5l1.6-6.1a.5.5 0 0 1 1 0l1.6 6.1a2 2 0 0 0 1.4 1.4l6.1 1.6a.5.5 0 0 1 0 1l-6.1 1.6a2 2 0 0 0-1.4 1.4l-1.6 6.1a.5.5 0 0 1-1 0z\"/><path d=\"M20 3v4M22 5h-4M4 17v2M5 18H3\"/>',\n  tag: '<path d=\"M12.6 2.6A2 2 0 0 0 11.2 2H4a2 2 0 0 0-2 2v7.2a2 2 0 0 0 .6 1.4l8.7 8.7a2.4 2.4 0 0 0 3.4 0l6.6-6.6a2.4 2.4 0 0 0 0-3.4z\"/><circle cx=\"7.5\" cy=\"7.5\" r=\".5\" fill=\"currentColor\"/>',\n  settings:\n    '<path d=\"M12.2 2h-.4a2 2 0 0 0-2 2v.2a2 2 0 0 1-1 1.7l-.4.3a2 2 0 0 1-2 0l-.2-.1a2 2 0 0 0-2.7.7l-.2.4a2 2 0 0 0 .7 2.7l.2.1a2 2 0 0 1 1 1.7v.5a2 2 0 0 1-1 1.8l-.2.1a2 2 0 0 0-.7 2.7l.2.4a2 2 0 0 0 2.7.7l.2-.1a2 2 0 0 1 2 0l.4.3a2 2 0 0 1 1 1.7v.2a2 2 0 0 0 2 2h.4a2 2 0 0 0 2-2v-.2a2 2 0 0 1 1-1.7l.4-.3a2 2 0 0 1 2 0l.2.1a2 2 0 0 0 2.7-.7l.2-.4a2 2 0 0 0-.7-2.7l-.2-.1a2 2 0 0 1-1-1.8v-.5a2 2 0 0 1 1-1.7l.2-.1a2 2 0 0 0 .7-2.7l-.2-.4a2 2 0 0 0-2.7-.7l-.2.1a2 2 0 0 1-2 0l-.4-.3a2 2 0 0 1-1-1.7V4a2 2 0 0 0-2-2z\"/><circle cx=\"12\" cy=\"12\" r=\"3\"/>',\n  users:\n    '<path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"/><circle cx=\"9\" cy=\"7\" r=\"4\"/><path d=\"M22 21v-2a4 4 0 0 0-3-3.9M16 3.1a4 4 0 0 1 0 7.8\"/>',\n  user: '<path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"/><circle cx=\"12\" cy=\"7\" r=\"4\"/>',\n  key: '<path d=\"m21 2-9.6 9.6M15.5 7.5l3 3L22 7l-3-3\"/><circle cx=\"7.5\" cy=\"15.5\" r=\"5.5\"/>',\n  bell: '<path d=\"M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9M10.3 21a1.9 1.9 0 0 0 3.4 0\"/>',\n  webhook:\n    '<path d=\"M18 16.98h-5.99c-1.1 0-1.95.94-2.48 1.9A4 4 0 0 1 2 17c.01-.7.2-1.4.57-2M9 17l3.13-5.78c.53-.97.43-2.22-.26-3.07a4 4 0 1 1 6.58-4.2c.38.6.58 1.3.57 2M6 17a4 4 0 0 1 6-3.5\"/><path d=\"M12 17h6a2 2 0 1 1 0 4\"/>',\n  code: '<path d=\"m16 18 6-6-6-6M8 6l-6 6 6 6\"/>',\n  terminal: '<path d=\"m4 17 6-6-6-6M12 19h8\"/>',\n  shield:\n    '<path d=\"M20 13c0 5-3.5 7.5-7.7 8.9a1 1 0 0 1-.6 0C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.2-2.7a1.2 1.2 0 0 1 1.6 0C14.5 3.8 17 5 19 5a1 1 0 0 1 1 1z\"/>',\n  search: '<circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/>',\n  sun: '<circle cx=\"12\" cy=\"12\" r=\"4\"/><path d=\"M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M6.3 17.7l-1.4 1.4M19.1 4.9l-1.4 1.4\"/>',\n  moon: '<path d=\"M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z\"/>',\n  monitor: '<rect width=\"20\" height=\"14\" x=\"2\" y=\"3\" rx=\"2\"/><path d=\"M8 21h8M12 17v4\"/>',\n  menu: '<path d=\"M4 6h16M4 12h16M4 18h16\"/>',\n  \"more-horizontal\":\n    '<circle cx=\"12\" cy=\"12\" r=\"1\"/><circle cx=\"19\" cy=\"12\" r=\"1\"/><circle cx=\"5\" cy=\"12\" r=\"1\"/>',\n  \"log-out\": '<path d=\"M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9\"/>',\n  \"external-link\":\n    '<path d=\"M15 3h6v6M10 14 21 3M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"/>',\n  copy: '<rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\"/><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"/>',\n  \"check-circle\": '<circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"m9 12 2 2 4-4\"/>',\n  \"x-circle\": '<circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"m15 9-6 6M9 9l6 6\"/>',\n  \"alert-triangle\":\n    '<path d=\"m21.7 18-8-14a2 2 0 0 0-3.5 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.7-3M12 9v4M12 17h.01\"/>',\n  info: '<circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M12 16v-4M12 8h.01\"/>',\n  clock: '<circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M12 6v6l4 2\"/>',\n  loader: '<path d=\"M21 12a9 9 0 1 1-6.2-8.6\"/>',\n  \"message-square\": '<path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\"/>',\n  columns: '<rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"/><path d=\"M12 3v18\"/>',\n  maximize:\n    '<path d=\"M8 3H5a2 2 0 0 0-2 2v3M21 8V5a2 2 0 0 0-2-2h-3M3 16v3a2 2 0 0 0 2 2h3M16 21h3a2 2 0 0 0 2-2v-3\"/>',\n  \"zoom-in\": '<circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3M11 8v6M8 11h6\"/>',\n  book: '<path d=\"M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20\"/>',\n  server:\n    '<rect width=\"20\" height=\"8\" x=\"2\" y=\"2\" rx=\"2\"/><rect width=\"20\" height=\"8\" x=\"2\" y=\"14\" rx=\"2\"/><path d=\"M6 6h.01M6 18h.01\"/>',\n} as const;\n\n/** Every icon name available in the sprite. */\nexport type IconName = keyof typeof ICON_PATHS;\n"],"mappings":";;;;;;;;;AAKA,MAAa,aAAa;CACxB,OAAO;CACP,GAAG;CACH,MAAM;CACN,gBAAgB;CAChB,cAAc;CACd,iBAAiB;CACjB,gBAAgB;CAChB,iBAAiB;CACjB,eAAe;CACf,QACE;CACF,QAAQ;CACR,OACE;CACF,cACE;CACF,cAAc;CACd,UAAU;CACV,UACE;CACF,KAAK;CACL,UACE;CACF,OACE;CACF,MAAM;CACN,KAAK;CACL,MAAM;CACN,SACE;CACF,MAAM;CACN,UAAU;CACV,QACE;CACF,QAAQ;CACR,KAAK;CACL,MAAM;CACN,SAAS;CACT,MAAM;CACN,mBACE;CACF,WAAW;CACX,iBACE;CACF,MAAM;CACN,gBAAgB;CAChB,YAAY;CACZ,kBACE;CACF,MAAM;CACN,OAAO;CACP,QAAQ;CACR,kBAAkB;CAClB,SAAS;CACT,UACE;CACF,WAAW;CACX,MAAM;CACN,QACE;AACJ"}

package/dist/ui/icons/sprite.mjs

@@ -3,7 +3,7 @@ import "node:url";
 import.meta.url;
 import { ICON_PATHS } from "./paths.mjs";
 import { createHash } from "node:crypto";
-//#region src/ui/icons/sprite.ts
+// src/ui/icons/sprite.ts
 /** Assembled `<svg>` sprite of `<symbol id="i-<name>">` entries. */
 function buildSprite(paths = ICON_PATHS) {
 	return `<svg xmlns="http://www.w3.org/2000/svg">${Object.entries(paths).toSorted(([a], [b]) => a.localeCompare(b)).map(([name, body]) => `<symbol id="i-${name}" viewBox="0 0 24 24">${body}</symbol>`).join("")}</svg>`;
@@ -20,7 +20,6 @@ const iconSpriteHref = `/assets/icons-${iconSpriteHash}.svg`;
 function iconHref(name) {
 	return `${iconSpriteHref}#i-${name}`;
 }
-//#endregion
 export { buildSprite, contentHash, iconHref, iconSprite, iconSpriteHash, iconSpriteHref };
 
 //# sourceMappingURL=sprite.mjs.map

package/dist/ui/kbd.mjs

@@ -3,7 +3,7 @@ import "node:url";
 import.meta.url;
 import { css } from "./css.mjs";
 import { Fragment, jsx } from "hono/jsx/jsx-runtime";
-//#region src/ui/kbd.tsx
+// src/ui/kbd.tsx
 const kbdKey = css`
   /* kbd */
   display: inline-flex;
@@ -27,7 +27,6 @@ const Kbd = ({ keys }) => {
 		children: key
 	}, String(index))) });
 };
-//#endregion
 export { Kbd };
 
 //# sourceMappingURL=kbd.mjs.map

package/dist/ui/layout.mjs

@@ -3,7 +3,7 @@ import "node:url";
 import.meta.url;
 import { css } from "./css.mjs";
 import { jsx, jsxs } from "hono/jsx/jsx-runtime";
-//#region src/ui/layout.tsx
+// src/ui/layout.tsx
 const cardBase = css`
   /* card */
   background: var(--surface-card);
@@ -167,7 +167,6 @@ const SectionTitle = ({ level = 2, tone = "neutral", children }) => {
 		children
 	});
 };
-//#endregion
 export { Card, CardSection, PageHeader, SectionTitle };
 
 //# sourceMappingURL=layout.mjs.map

package/dist/ui/preview-embed.mjs

@@ -0,0 +1,81 @@
+import "node:path";
+import "node:url";
+import.meta.url;
+import { css } from "./css.mjs";
+import { Button } from "./buttons.mjs";
+import { Meta } from "./feedback.mjs";
+import { jsx, jsxs } from "hono/jsx/jsx-runtime";
+// src/ui/preview-embed.tsx
+/**
+* Sandbox of the embedded story frame (ADR 0006, decision 9). Scripts only: no `allow-same-origin`,
+* so a customer's Storybook never runs with the app's origin and its cookies, and no top navigation,
+* forms or popups.
+*/
+const PREVIEW_SANDBOX = "allow-scripts";
+const previewHost = css`
+  /* preview-embed */
+  display: grid;
+  min-height: 12rem;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius);
+  background: var(--surface-muted);
+  overflow: hidden;
+`;
+const previewIdle = css`
+  /* preview-embed-idle */
+  display: grid;
+  gap: 0.5rem;
+  place-items: center;
+  align-content: center;
+  padding: 2rem 1rem;
+  text-align: center;
+`;
+const previewFrame = css`
+  /* preview-embed-frame */
+  display: block;
+  width: 100%;
+  height: 28rem;
+  border: 0;
+  background: var(--surface-card);
+`;
+/**
+* A published story in a sandboxed frame that loads on click. The frame is inert markup (a
+* `<template>`) until the visitor asks for it, so opening a page never runs the customer's
+* Storybook; the shell script moves the frame in on click and, for a signed URL, re-points it
+* to a fresh token before the current one expires.
+*/
+const PreviewEmbed = ({ src, title, refresh }) => /* @__PURE__ */ jsxs("div", {
+	class: previewHost,
+	"data-preview-embed": true,
+	...refresh ? {
+		"data-preview-refresh-url": refresh.url,
+		"data-preview-path": refresh.path,
+		"data-preview-refresh-seconds": String(refresh.seconds)
+	} : {},
+	children: [/* @__PURE__ */ jsxs("div", {
+		class: previewIdle,
+		"data-preview-idle": true,
+		children: [/* @__PURE__ */ jsx(Button, {
+			variant: "secondary",
+			size: "sm",
+			icon: "image",
+			"data-preview-load": true,
+			children: "Load preview"
+		}), /* @__PURE__ */ jsx(Meta, {
+			as: "span",
+			children: "Runs the published story in a sandboxed frame, only when you ask."
+		})]
+	}), /* @__PURE__ */ jsx("template", {
+		"data-preview-template": true,
+		children: /* @__PURE__ */ jsx("iframe", {
+			class: previewFrame,
+			src,
+			title,
+			sandbox: PREVIEW_SANDBOX,
+			referrerpolicy: "no-referrer"
+		})
+	})]
+});
+export { PREVIEW_SANDBOX, PreviewEmbed };
+
+//# sourceMappingURL=preview-embed.mjs.map

package/dist/ui/preview-embed.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"preview-embed.mjs","names":[],"sources":["../../src/ui/preview-embed.tsx"],"sourcesContent":["import type { FC } from \"hono/jsx\";\nimport { Button } from \"./buttons.tsx\";\nimport { css } from \"./css.ts\";\nimport { Meta } from \"./feedback.tsx\";\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\n/**\n * Sandbox of the embedded story frame (ADR 0006, decision 9). Scripts only: no `allow-same-origin`,\n * so a customer's Storybook never runs with the app's origin and its cookies, and no top navigation,\n * forms or popups.\n */\nexport const PREVIEW_SANDBOX = \"allow-scripts\";\n\nconst previewHost = css`\n  /* preview-embed */\n  display: grid;\n  min-height: 12rem;\n  border: 1px solid var(--border-subtle);\n  border-radius: var(--radius);\n  background: var(--surface-muted);\n  overflow: hidden;\n`;\n\nconst previewIdle = css`\n  /* preview-embed-idle */\n  display: grid;\n  gap: 0.5rem;\n  place-items: center;\n  align-content: center;\n  padding: 2rem 1rem;\n  text-align: center;\n`;\n\nconst previewFrame = css`\n  /* preview-embed-frame */\n  display: block;\n  width: 100%;\n  height: 28rem;\n  border: 0;\n  background: var(--surface-card);\n`;\n\n/**\n * A published story in a sandboxed frame that loads on click. The frame is inert markup (a\n * `<template>`) until the visitor asks for it, so opening a page never runs the customer's\n * Storybook; the shell script moves the frame in on click and, for a signed URL, re-points it\n * to a fresh token before the current one expires.\n */\nexport const PreviewEmbed: FC<{\n  src: string;\n  title: string;\n  /** For a frame under a signed URL: where to ask for a fresh root, the path after it, how often. */\n  refresh?: { url: string; path: string; seconds: number };\n}> = ({ src, title, refresh }) => (\n  <div\n    class={previewHost}\n    data-preview-embed\n    {...(refresh\n      ? {\n          \"data-preview-refresh-url\": refresh.url,\n          \"data-preview-path\": refresh.path,\n          \"data-preview-refresh-seconds\": String(refresh.seconds),\n        }\n      : {})}\n  >\n    <div class={previewIdle} data-preview-idle>\n      <Button variant=\"secondary\" size=\"sm\" icon=\"image\" data-preview-load>\n        Load preview\n      </Button>\n      <Meta as=\"span\">Runs the published story in a sandboxed frame, only when you ask.</Meta>\n    </div>\n    <template data-preview-template>\n      <iframe\n        class={previewFrame}\n        src={src}\n        title={title}\n        sandbox={PREVIEW_SANDBOX}\n        referrerpolicy=\"no-referrer\"\n      />\n    </template>\n  </div>\n);\n"],"mappings":";;;;;;;;;;;;;AAYA,MAAa,kBAAkB;AAE/B,MAAM,cAAc,GAAG;;;;;;;;;AAUvB,MAAM,cAAc,GAAG;;;;;;;;;AAUvB,MAAM,eAAe,GAAG;;;;;;;;;;;;;;AAexB,MAAa,gBAKP,EAAE,KAAK,OAAO,cAClB,qBAAC,OAAD;CACE,OAAO;CACP,sBAAA;CACA,GAAK,UACD;EACE,4BAA4B,QAAQ;EACpC,qBAAqB,QAAQ;EAC7B,gCAAgC,OAAO,QAAQ,OAAO;CACxD,IACA,CAAC;CATP,UAAA,CAWE,qBAAC,OAAD;EAAK,OAAO;EAAa,qBAAA;EAAzB,UAAA,CACE,oBAAC,QAAD;GAAQ,SAAQ;GAAY,MAAK;GAAK,MAAK;GAAQ,qBAAA;GAAkB,UAAA;EAE7D,CAAA,GACR,oBAAC,MAAD;GAAM,IAAG;GAAO,UAAA;EAAuE,CAAA,CACpF;CACL,CAAA,GAAA,oBAAC,YAAD;EAAU,yBAAA;EACR,UAAA,oBAAC,UAAD;GACE,OAAO;GACF;GACE;GACP,SAAS;GACT,gBAAe;EAChB,CAAA;CACO,CAAA,CACP"}

package/dist/ui/progress.mjs

@@ -3,7 +3,7 @@ import "node:url";
 import.meta.url;
 import { css } from "./css.mjs";
 import { jsx } from "hono/jsx/jsx-runtime";
-//#region src/ui/progress.tsx
+// src/ui/progress.tsx
 const track = css`
   /* progress */
   height: 6px;
@@ -38,7 +38,6 @@ const Progress = ({ value, max, label }) => {
 		children: /* @__PURE__ */ jsx("span", { style: `width:${percent}%` })
 	});
 };
-//#endregion
 export { Progress };
 
 //# sourceMappingURL=progress.mjs.map

package/dist/ui/segmented.mjs

@@ -3,7 +3,7 @@ import "node:url";
 import.meta.url;
 import { css } from "./css.mjs";
 import { jsx } from "hono/jsx/jsx-runtime";
-//#region src/ui/segmented.tsx
+// src/ui/segmented.tsx
 const segmentedRoot = css`
   /* segmented */
   display: inline-flex;
@@ -71,7 +71,6 @@ const Segmented = ({ items, label, ...rest }) => {
 		}, item.value))
 	});
 };
-//#endregion
 export { Segmented };
 
 //# sourceMappingURL=segmented.mjs.map

package/dist/ui/shell/account.mjs

@@ -10,7 +10,7 @@ import { Dropdown, DropdownDivider, DropdownItem } from "../dropdown.mjs";
 import { csrfField } from "../csrf-field.mjs";
 import { Fragment, jsx, jsxs } from "hono/jsx/jsx-runtime";
 import { safeImageUrl } from "@storyshelf/core/urls";
-//#region src/ui/shell/account.tsx
+// src/ui/shell/account.tsx
 /** Styles for the account widgets that live in the sidebar footer. */
 const accountRoot = css`
   /* account */
@@ -155,7 +155,6 @@ const UserMenu = () => {
 		})
 	});
 };
-//#endregion
 export { ThemeMenu, UserMenu };
 
 //# sourceMappingURL=account.mjs.map

package/dist/ui/shell/bare.mjs

@@ -5,7 +5,7 @@ import { css } from "../css.mjs";
 import { Icon } from "../icons/icon.mjs";
 import { jsx, jsxs } from "hono/jsx/jsx-runtime";
 import { safeImageUrl } from "@storyshelf/core/urls";
-//#region src/ui/shell/bare.tsx
+// src/ui/shell/bare.tsx
 /** Chrome-free page for signed-out flows: brand over a centered column. */
 const bareRoot = css`
   /* bare */
@@ -63,7 +63,6 @@ const BareShell = ({ name, logo, children }) => {
 		})]
 	});
 };
-//#endregion
 export { BareShell };
 
 //# sourceMappingURL=bare.mjs.map

package/dist/ui/shell/boot-script.mjs

@@ -1,7 +1,7 @@
 import "node:path";
 import "node:url";
 import.meta.url;
-//#region src/ui/shell/boot-script.ts
+// src/ui/shell/boot-script.ts
 /**
 * Runs in `<head>` before first paint so the saved theme and sidebar state
 * apply without a flash. Exposes cookie helpers to the client script.
@@ -40,7 +40,6 @@ function bootScript() {
   })();
   `.trim();
 }
-//#endregion
 export { bootScript };
 
 //# sourceMappingURL=boot-script.mjs.map