@storyshelf/app 0.5.3

package/dist/ui/styles/tokens.mjs

@@ -0,0 +1,132 @@
+import "node:path";
+import "node:url";
+import.meta.url;
+//#region src/ui/styles/tokens.ts
+/**
+* CSS variable tokens: brand-driven colors (per theme), theme-independent
+* scales (type, space, radius, motion), and tokens derived from the brand
+* accent/status colors so customer themes need no extra fields.
+*/
+function tokenCss(light, dark) {
+	return [
+		scaleTokens(),
+		`:root {\n${colorVars(light, LIGHT_FALLBACK)}\n}`,
+		`[data-theme="dark"] {\n${colorVars(dark, DARK_FALLBACK)}\n}`,
+		`@media (prefers-color-scheme: dark) {\n[data-theme="system"] {\n${colorVars(dark, DARK_FALLBACK)}\n}\n}`
+	].join("\n");
+}
+const LIGHT_FALLBACK = {
+	accentContrast: "#fff",
+	muted: "#f4f4f5",
+	subtle: "#fafafa",
+	sidebar: "#ffffff",
+	shadow: "0 1px 2px rgba(0,0,0,.04)",
+	shadow2: "0 4px 12px rgba(0,0,0,.08)",
+	shadow3: "0 12px 32px rgba(0,0,0,.14)",
+	tint: "10%"
+};
+const DARK_FALLBACK = {
+	accentContrast: "#09090b",
+	muted: "#27272a",
+	subtle: "#18181b",
+	sidebar: "#111113",
+	shadow: "0 1px 2px rgba(0,0,0,.3)",
+	shadow2: "0 4px 12px rgba(0,0,0,.4)",
+	shadow3: "0 12px 32px rgba(0,0,0,.55)",
+	tint: "16%"
+};
+/** Theme-independent scales shared by every component. */
+function scaleTokens() {
+	return `
+    :root {
+      --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+      --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
+      --text-xs: 0.75rem;
+      --text-sm: 0.8125rem;
+      --text-base: 0.875rem;
+      --text-lg: 1rem;
+      --text-xl: 1.25rem;
+      --text-2xl: 1.5rem;
+      --leading-tight: 1.25;
+      --leading-normal: 1.5;
+      --space-1: 0.25rem;
+      --space-2: 0.5rem;
+      --space-3: 0.75rem;
+      --space-4: 1rem;
+      --space-5: 1.25rem;
+      --space-6: 1.5rem;
+      --space-8: 2rem;
+      --radius-pill: 999px;
+      --ease: cubic-bezier(0.2, 0, 0, 1);
+      --dur-fast: 120ms;
+      --dur-base: 200ms;
+      --sidebar-width: 220px;
+      --topbar-height: 52px;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      :root { --dur-fast: 0ms; --dur-base: 0ms; }
+    }`;
+}
+/** Brand colors plus the tokens derived from them, for one theme. */
+function colorVars(theme, fb) {
+	return [brandVars(theme, fb), derivedVars(fb)].join("\n");
+}
+function brandVars(theme, fb) {
+	const radius = theme.radius ?? "0.5rem";
+	const radiusSm = theme.radiusSm ?? "0.375rem";
+	return `
+      --accent: ${theme.accent};
+      --accent-contrast: ${theme.accentContrast ?? fb.accentContrast};
+      --ring: ${theme.ring ?? theme.accent};
+      --surface-base: ${theme.surface.base};
+      --surface-card: ${theme.surface.card};
+      --surface-muted: ${theme.surface.muted ?? fb.muted};
+      --surface-subtle: ${theme.surface.subtle ?? fb.subtle};
+      --text-primary: ${theme.text.primary};
+      --text-secondary: ${theme.text.secondary};
+      --text-muted: ${theme.text.muted ?? theme.text.secondary};
+      --border: ${theme.border};
+      --border-subtle: ${theme.borderSubtle ?? theme.border};
+      --radius: ${radius};
+      --radius-sm: ${radiusSm};
+      --radius-lg: calc(${radius} + 0.25rem);
+      --shadow: ${theme.shadow ?? fb.shadow};
+      --shadow-2: ${fb.shadow2};
+      --shadow-3: ${fb.shadow3};
+      --status-approved: ${theme.status.approved};
+      --status-new: ${theme.status.new};
+      --status-rejected: ${theme.status.rejected};
+      --sidebar-bg: ${theme.sidebarBg ?? fb.sidebar};`;
+}
+function mix(color, pct, into) {
+	return `color-mix(in srgb, var(${color}) ${pct}, var(${into}))`;
+}
+/**
+* Tokens computed from the brand colors via `color-mix`. They resolve on
+* the same element as the brand vars, so a customer accent flows through
+* without extra config. The accent only ever tints; it never floods chrome.
+*/
+function derivedVars(fb) {
+	return `
+      --accent-subtle: ${mix("--accent", "8%", "--surface-card")};
+      --accent-wash: ${mix("--accent", "4%", "--surface-base")};
+      --accent-border: ${mix("--accent", "30%", "--border")};
+      --accent-fg: ${mix("--accent", "88%", "--text-primary")};
+      --status-info: var(--accent);
+      --status-approved-fg: ${mix("--status-approved", "60%", "--text-primary")};
+      --status-new-fg: ${mix("--status-new", "60%", "--text-primary")};
+      --status-rejected-fg: ${mix("--status-rejected", "60%", "--text-primary")};
+      --status-info-fg: var(--accent-fg);
+      --status-approved-bg: ${mix("--status-approved", fb.tint, "--surface-card")};
+      --status-new-bg: ${mix("--status-new", fb.tint, "--surface-card")};
+      --status-rejected-bg: ${mix("--status-rejected", fb.tint, "--surface-card")};
+      --status-info-bg: ${mix("--status-info", fb.tint, "--surface-card")};
+      --status-approved-border: ${mix("--status-approved", "32%", "--border")};
+      --status-new-border: ${mix("--status-new", "32%", "--border")};
+      --status-rejected-border: ${mix("--status-rejected", "32%", "--border")};
+      --status-info-border: ${mix("--status-info", "32%", "--border")};`;
+}
+//#endregion
+export { tokenCss };
+
+//# sourceMappingURL=tokens.mjs.map

package/dist/ui/styles/tokens.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.mjs","names":[],"sources":["../../../src/ui/styles/tokens.ts"],"sourcesContent":["import type { BrandTheme } from \"../theme.ts\";\n\n/**\n * CSS variable tokens: brand-driven colors (per theme), theme-independent\n * scales (type, space, radius, motion), and tokens derived from the brand\n * accent/status colors so customer themes need no extra fields.\n */\nexport function tokenCss(light: BrandTheme, dark: BrandTheme): string {\n  return [\n    scaleTokens(),\n    `:root {\\n${colorVars(light, LIGHT_FALLBACK)}\\n}`,\n    `[data-theme=\"dark\"] {\\n${colorVars(dark, DARK_FALLBACK)}\\n}`,\n    `@media (prefers-color-scheme: dark) {\\n[data-theme=\"system\"] {\\n${colorVars(dark, DARK_FALLBACK)}\\n}\\n}`,\n  ].join(\"\\n\");\n}\n\ninterface Fallbacks {\n  accentContrast: string;\n  muted: string;\n  subtle: string;\n  sidebar: string;\n  shadow: string;\n  shadow2: string;\n  shadow3: string;\n  /** Share of the status color mixed into tinted backgrounds. */\n  tint: string;\n}\n\nconst LIGHT_FALLBACK: Fallbacks = {\n  accentContrast: \"#fff\",\n  muted: \"#f4f4f5\",\n  subtle: \"#fafafa\",\n  sidebar: \"#ffffff\",\n  shadow: \"0 1px 2px rgba(0,0,0,.04)\",\n  shadow2: \"0 4px 12px rgba(0,0,0,.08)\",\n  shadow3: \"0 12px 32px rgba(0,0,0,.14)\",\n  tint: \"10%\",\n};\n\nconst DARK_FALLBACK: Fallbacks = {\n  accentContrast: \"#09090b\",\n  muted: \"#27272a\",\n  subtle: \"#18181b\",\n  sidebar: \"#111113\",\n  shadow: \"0 1px 2px rgba(0,0,0,.3)\",\n  shadow2: \"0 4px 12px rgba(0,0,0,.4)\",\n  shadow3: \"0 12px 32px rgba(0,0,0,.55)\",\n  tint: \"16%\",\n};\n\n/** Theme-independent scales shared by every component. */\nfunction scaleTokens(): string {\n  return `\n    :root {\n      --font-sans: ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n      --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;\n      --text-xs: 0.75rem;\n      --text-sm: 0.8125rem;\n      --text-base: 0.875rem;\n      --text-lg: 1rem;\n      --text-xl: 1.25rem;\n      --text-2xl: 1.5rem;\n      --leading-tight: 1.25;\n      --leading-normal: 1.5;\n      --space-1: 0.25rem;\n      --space-2: 0.5rem;\n      --space-3: 0.75rem;\n      --space-4: 1rem;\n      --space-5: 1.25rem;\n      --space-6: 1.5rem;\n      --space-8: 2rem;\n      --radius-pill: 999px;\n      --ease: cubic-bezier(0.2, 0, 0, 1);\n      --dur-fast: 120ms;\n      --dur-base: 200ms;\n      --sidebar-width: 220px;\n      --topbar-height: 52px;\n    }\n    @media (prefers-reduced-motion: reduce) {\n      :root { --dur-fast: 0ms; --dur-base: 0ms; }\n    }`;\n}\n\n/** Brand colors plus the tokens derived from them, for one theme. */\nfunction colorVars(theme: BrandTheme, fb: Fallbacks): string {\n  return [brandVars(theme, fb), derivedVars(fb)].join(\"\\n\");\n}\n\nfunction brandVars(theme: BrandTheme, fb: Fallbacks): string {\n  const radius = theme.radius ?? \"0.5rem\";\n  const radiusSm = theme.radiusSm ?? \"0.375rem\";\n  return `\n      --accent: ${theme.accent};\n      --accent-contrast: ${theme.accentContrast ?? fb.accentContrast};\n      --ring: ${theme.ring ?? theme.accent};\n      --surface-base: ${theme.surface.base};\n      --surface-card: ${theme.surface.card};\n      --surface-muted: ${theme.surface.muted ?? fb.muted};\n      --surface-subtle: ${theme.surface.subtle ?? fb.subtle};\n      --text-primary: ${theme.text.primary};\n      --text-secondary: ${theme.text.secondary};\n      --text-muted: ${theme.text.muted ?? theme.text.secondary};\n      --border: ${theme.border};\n      --border-subtle: ${theme.borderSubtle ?? theme.border};\n      --radius: ${radius};\n      --radius-sm: ${radiusSm};\n      --radius-lg: calc(${radius} + 0.25rem);\n      --shadow: ${theme.shadow ?? fb.shadow};\n      --shadow-2: ${fb.shadow2};\n      --shadow-3: ${fb.shadow3};\n      --status-approved: ${theme.status.approved};\n      --status-new: ${theme.status.new};\n      --status-rejected: ${theme.status.rejected};\n      --sidebar-bg: ${theme.sidebarBg ?? fb.sidebar};`;\n}\n\nfunction mix(color: string, pct: string, into: string): string {\n  return `color-mix(in srgb, var(${color}) ${pct}, var(${into}))`;\n}\n\n/**\n * Tokens computed from the brand colors via `color-mix`. They resolve on\n * the same element as the brand vars, so a customer accent flows through\n * without extra config. The accent only ever tints; it never floods chrome.\n */\nfunction derivedVars(fb: Fallbacks): string {\n  return `\n      --accent-subtle: ${mix(\"--accent\", \"8%\", \"--surface-card\")};\n      --accent-wash: ${mix(\"--accent\", \"4%\", \"--surface-base\")};\n      --accent-border: ${mix(\"--accent\", \"30%\", \"--border\")};\n      --accent-fg: ${mix(\"--accent\", \"88%\", \"--text-primary\")};\n      --status-info: var(--accent);\n      --status-approved-fg: ${mix(\"--status-approved\", \"60%\", \"--text-primary\")};\n      --status-new-fg: ${mix(\"--status-new\", \"60%\", \"--text-primary\")};\n      --status-rejected-fg: ${mix(\"--status-rejected\", \"60%\", \"--text-primary\")};\n      --status-info-fg: var(--accent-fg);\n      --status-approved-bg: ${mix(\"--status-approved\", fb.tint, \"--surface-card\")};\n      --status-new-bg: ${mix(\"--status-new\", fb.tint, \"--surface-card\")};\n      --status-rejected-bg: ${mix(\"--status-rejected\", fb.tint, \"--surface-card\")};\n      --status-info-bg: ${mix(\"--status-info\", fb.tint, \"--surface-card\")};\n      --status-approved-border: ${mix(\"--status-approved\", \"32%\", \"--border\")};\n      --status-new-border: ${mix(\"--status-new\", \"32%\", \"--border\")};\n      --status-rejected-border: ${mix(\"--status-rejected\", \"32%\", \"--border\")};\n      --status-info-border: ${mix(\"--status-info\", \"32%\", \"--border\")};`;\n}\n"],"mappings":";;;;;;;;;AAOA,SAAgB,SAAS,OAAmB,MAA0B;CACpE,OAAO;EACL,YAAY;EACZ,YAAY,UAAU,OAAO,cAAc,EAAE;EAC7C,0BAA0B,UAAU,MAAM,aAAa,EAAE;EACzD,mEAAmE,UAAU,MAAM,aAAa,EAAE;CACpG,CAAC,CAAC,KAAK,IAAI;AACb;AAcA,MAAM,iBAA4B;CAChC,gBAAgB;CAChB,OAAO;CACP,QAAQ;CACR,SAAS;CACT,QAAQ;CACR,SAAS;CACT,SAAS;CACT,MAAM;AACR;AAEA,MAAM,gBAA2B;CAC/B,gBAAgB;CAChB,OAAO;CACP,QAAQ;CACR,SAAS;CACT,QAAQ;CACR,SAAS;CACT,SAAS;CACT,MAAM;AACR;;AAGA,SAAS,cAAsB;CAC7B,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BT;;AAGA,SAAS,UAAU,OAAmB,IAAuB;CAC3D,OAAO,CAAC,UAAU,OAAO,EAAE,GAAG,YAAY,EAAE,CAAC,CAAC,CAAC,KAAK,IAAI;AAC1D;AAEA,SAAS,UAAU,OAAmB,IAAuB;CAC3D,MAAM,SAAS,MAAM,UAAU;CAC/B,MAAM,WAAW,MAAM,YAAY;CACnC,OAAO;kBACS,MAAM,OAAO;2BACJ,MAAM,kBAAkB,GAAG,eAAe;gBACrD,MAAM,QAAQ,MAAM,OAAO;wBACnB,MAAM,QAAQ,KAAK;wBACnB,MAAM,QAAQ,KAAK;yBAClB,MAAM,QAAQ,SAAS,GAAG,MAAM;0BAC/B,MAAM,QAAQ,UAAU,GAAG,OAAO;wBACpC,MAAM,KAAK,QAAQ;0BACjB,MAAM,KAAK,UAAU;sBACzB,MAAM,KAAK,SAAS,MAAM,KAAK,UAAU;kBAC7C,MAAM,OAAO;yBACN,MAAM,gBAAgB,MAAM,OAAO;kBAC1C,OAAO;qBACJ,SAAS;0BACJ,OAAO;kBACf,MAAM,UAAU,GAAG,OAAO;oBACxB,GAAG,QAAQ;oBACX,GAAG,QAAQ;2BACJ,MAAM,OAAO,SAAS;sBAC3B,MAAM,OAAO,IAAI;2BACZ,MAAM,OAAO,SAAS;sBAC3B,MAAM,aAAa,GAAG,QAAQ;AACpD;AAEA,SAAS,IAAI,OAAe,KAAa,MAAsB;CAC7D,OAAO,0BAA0B,MAAM,IAAI,IAAI,QAAQ,KAAK;AAC9D;;;;;;AAOA,SAAS,YAAY,IAAuB;CAC1C,OAAO;yBACgB,IAAI,YAAY,MAAM,gBAAgB,EAAE;uBAC1C,IAAI,YAAY,MAAM,gBAAgB,EAAE;yBACtC,IAAI,YAAY,OAAO,UAAU,EAAE;qBACvC,IAAI,YAAY,OAAO,gBAAgB,EAAE;;8BAEhC,IAAI,qBAAqB,OAAO,gBAAgB,EAAE;yBACvD,IAAI,gBAAgB,OAAO,gBAAgB,EAAE;8BACxC,IAAI,qBAAqB,OAAO,gBAAgB,EAAE;;8BAElD,IAAI,qBAAqB,GAAG,MAAM,gBAAgB,EAAE;yBACzD,IAAI,gBAAgB,GAAG,MAAM,gBAAgB,EAAE;8BAC1C,IAAI,qBAAqB,GAAG,MAAM,gBAAgB,EAAE;0BACxD,IAAI,iBAAiB,GAAG,MAAM,gBAAgB,EAAE;kCACxC,IAAI,qBAAqB,OAAO,UAAU,EAAE;6BACjD,IAAI,gBAAgB,OAAO,UAAU,EAAE;kCAClC,IAAI,qBAAqB,OAAO,UAAU,EAAE;8BAChD,IAAI,iBAAiB,OAAO,UAAU,EAAE;AACtE"}

package/dist/ui/styles.mjs

@@ -0,0 +1,19 @@
+import "node:path";
+import "node:url";
+import.meta.url;
+import { baseCss } from "./styles/base.mjs";
+import { behaviorCss } from "./styles/behavior.mjs";
+import { tokenCss } from "./styles/tokens.mjs";
+//#region src/ui/styles.ts
+/** Build the global CSS stylesheet from the light and dark brand themes. */
+function baseStyle(light, dark) {
+	return [
+		tokenCss(light, dark),
+		baseCss(),
+		behaviorCss()
+	].join("\n");
+}
+//#endregion
+export { baseStyle };
+
+//# sourceMappingURL=styles.mjs.map

package/dist/ui/styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.mjs","names":[],"sources":["../../src/ui/styles.ts"],"sourcesContent":["import { baseCss } from \"./styles/base.ts\";\nimport { behaviorCss } from \"./styles/behavior.ts\";\nimport { tokenCss } from \"./styles/tokens.ts\";\nimport type { BrandTheme } from \"./theme.ts\";\n\n/** Build the global CSS stylesheet from the light and dark brand themes. */\nexport function baseStyle(light: BrandTheme, dark: BrandTheme): string {\n  return [tokenCss(light, dark), baseCss(), behaviorCss()].join(\"\\n\");\n}\n"],"mappings":";;;;;;;;AAMA,SAAgB,UAAU,OAAmB,MAA0B;CACrE,OAAO;EAAC,SAAS,OAAO,IAAI;EAAG,QAAQ;EAAG,YAAY;CAAC,CAAC,CAAC,KAAK,IAAI;AACpE"}

package/dist/ui/subnav.mjs

@@ -0,0 +1,91 @@
+import "node:path";
+import "node:url";
+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/subnav.tsx
+const layout = css`
+  /* subnav-layout */
+  display: grid;
+  grid-template-columns: 210px minmax(0, 1fr);
+  gap: var(--space-6);
+  align-items: start;
+  @media (max-width: 880px) {
+    & {
+      grid-template-columns: minmax(0, 1fr);
+      gap: var(--space-4);
+    }
+  }
+`;
+const nav = css`
+  /* subnav */
+  position: sticky;
+  top: calc(var(--topbar-height) + var(--space-4));
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  @media (max-width: 880px) {
+    & {
+      position: static;
+      flex-direction: row;
+      gap: var(--space-1);
+      padding-bottom: var(--space-2);
+      overflow-x: auto;
+      border-bottom: 1px solid var(--border);
+    }
+  }
+`;
+const link = css`
+  /* subnav-link */
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  min-height: 36px;
+  padding: 0.4rem var(--space-3);
+  border-radius: var(--radius);
+  color: var(--text-secondary);
+  font-size: var(--text-base);
+  font-weight: 500;
+  text-decoration: none;
+  white-space: nowrap;
+  transition:
+    background var(--dur-fast) var(--ease),
+    color var(--dur-fast) var(--ease);
+  &:hover {
+    background: var(--surface-muted);
+    color: var(--text-primary);
+    text-decoration: none;
+  }
+`;
+const linkActive = css`
+  /* subnav-link-active */
+  ${link}
+  background: var(--accent-subtle);
+  color: var(--accent-fg);
+  font-weight: 600;
+  &:hover {
+    background: var(--accent-subtle);
+    color: var(--accent-fg);
+  }
+`;
+/** Vertical section navigation beside content (a horizontal strip on phones). */
+const SubNavLayout = ({ items, label, children }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		class: layout,
+		children: [/* @__PURE__ */ jsx("nav", {
+			class: nav,
+			"aria-label": label,
+			children: items.map((item) => /* @__PURE__ */ jsxs("a", {
+				class: item.active ? linkActive : link,
+				href: item.href,
+				"aria-current": item.active ? "page" : void 0,
+				children: [item.icon ? /* @__PURE__ */ jsx(Icon, { name: item.icon }) : null, item.label]
+			}, item.href))
+		}), /* @__PURE__ */ jsx("div", { children })]
+	});
+};
+//#endregion
+export { SubNavLayout };
+
+//# sourceMappingURL=subnav.mjs.map

package/dist/ui/subnav.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"subnav.mjs","names":[],"sources":["../../src/ui/subnav.tsx"],"sourcesContent":["import type { FC } from \"hono/jsx\";\nimport { css } from \"./css.ts\";\nimport { Icon } from \"./icons/icon.tsx\";\nimport type { IconName } from \"./icons/paths.ts\";\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\nconst layout = css`\n  /* subnav-layout */\n  display: grid;\n  grid-template-columns: 210px minmax(0, 1fr);\n  gap: var(--space-6);\n  align-items: start;\n  @media (max-width: 880px) {\n    & {\n      grid-template-columns: minmax(0, 1fr);\n      gap: var(--space-4);\n    }\n  }\n`;\n\nconst nav = css`\n  /* subnav */\n  position: sticky;\n  top: calc(var(--topbar-height) + var(--space-4));\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  @media (max-width: 880px) {\n    & {\n      position: static;\n      flex-direction: row;\n      gap: var(--space-1);\n      padding-bottom: var(--space-2);\n      overflow-x: auto;\n      border-bottom: 1px solid var(--border);\n    }\n  }\n`;\n\nconst link = css`\n  /* subnav-link */\n  display: flex;\n  align-items: center;\n  gap: 0.6rem;\n  min-height: 36px;\n  padding: 0.4rem var(--space-3);\n  border-radius: var(--radius);\n  color: var(--text-secondary);\n  font-size: var(--text-base);\n  font-weight: 500;\n  text-decoration: none;\n  white-space: nowrap;\n  transition:\n    background var(--dur-fast) var(--ease),\n    color var(--dur-fast) var(--ease);\n  &:hover {\n    background: var(--surface-muted);\n    color: var(--text-primary);\n    text-decoration: none;\n  }\n`;\n\nconst linkActive = css`\n  /* subnav-link-active */\n  ${link}\n  background: var(--accent-subtle);\n  color: var(--accent-fg);\n  font-weight: 600;\n  &:hover {\n    background: var(--accent-subtle);\n    color: var(--accent-fg);\n  }\n`;\n\n/** One entry in a `SubNavLayout`. */\nexport interface SubNavItem {\n  label: string;\n  href: string;\n  icon?: IconName;\n  active?: boolean;\n}\n\n/** Vertical section navigation beside content (a horizontal strip on phones). */\nexport const SubNavLayout: FC<{ items: SubNavItem[]; label: string; children?: unknown }> = ({\n  items,\n  label,\n  children,\n}) => {\n  return (\n    <div class={layout}>\n      <nav class={nav} aria-label={label}>\n        {items.map((item) => (\n          <a\n            key={item.href}\n            class={item.active ? linkActive : link}\n            href={item.href}\n            aria-current={item.active ? \"page\" : undefined}\n          >\n            {item.icon ? <Icon name={item.icon} /> : null}\n            {item.label}\n          </a>\n        ))}\n      </nav>\n      <div>{children}</div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;AAOA,MAAM,SAAS,GAAG;;;;;;;;;;;;;AAclB,MAAM,MAAM,GAAG;;;;;;;;;;;;;;;;;;AAmBf,MAAM,OAAO,GAAG;;;;;;;;;;;;;;;;;;;;;;AAuBhB,MAAM,aAAa,GAAG;;IAElB,KAAK;;;;;;;;;;AAmBT,MAAa,gBAAgF,EAC3F,OACA,OACA,eACI;CACJ,OACE,qBAAC,OAAD;EAAK,OAAO;EAAZ,UAAA,CACE,oBAAC,OAAD;GAAK,OAAO;GAAK,cAAY;GAC1B,UAAA,MAAM,KAAK,SACV,qBAAC,KAAD;IAEE,OAAO,KAAK,SAAS,aAAa;IAClC,MAAM,KAAK;IACX,gBAAc,KAAK,SAAS,SAAS,KAAA;IAJvC,UAAA,CAMG,KAAK,OAAO,oBAAC,MAAD,EAAM,MAAM,KAAK,KAAO,CAAA,IAAI,MACxC,KAAK,KACL;GAPI,GAAA,KAAK,IAOT,CACJ;EACE,CAAA,GACL,oBAAC,OAAD,EAAM,SAAc,CAAA,CACjB;;AAET"}

package/dist/ui/table.mjs

@@ -0,0 +1,73 @@
+import "node:path";
+import "node:url";
+import.meta.url;
+import { css } from "./css.mjs";
+import { jsx } from "hono/jsx/jsx-runtime";
+//#region src/ui/table.tsx
+const tableWrap = css`
+  /* table */
+  overflow: auto;
+  background: var(--surface-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow);
+  & table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+    font-size: var(--text-base);
+  }
+  & th,
+  & td {
+    text-align: left;
+    padding: 0.7rem 0.9rem;
+    border-bottom: 1px solid var(--border-subtle);
+    vertical-align: middle;
+  }
+  & th {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    background: var(--surface-subtle);
+    color: var(--text-secondary);
+    font-size: var(--text-xs);
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    white-space: nowrap;
+  }
+  & tbody tr {
+    transition: background var(--dur-fast) var(--ease);
+  }
+  & tbody tr:hover {
+    background: var(--accent-wash);
+  }
+  & tbody tr:last-child td {
+    border-bottom: 0;
+  }
+  & td.nowrap {
+    white-space: nowrap;
+  }
+`;
+const tableDense = css`
+  /* table-dense */
+  ${tableWrap}
+  & th,
+  & td {
+    padding: 0.4rem 0.75rem;
+  }
+`;
+/**
+* Scrollable bordered table surface. Pass native `<table>` markup as
+* children; the header, row hover, and spacing are styled here.
+*/
+const Table = ({ dense = false, children }) => {
+	return /* @__PURE__ */ jsx("div", {
+		class: dense ? tableDense : tableWrap,
+		children
+	});
+};
+//#endregion
+export { Table };
+
+//# sourceMappingURL=table.mjs.map

package/dist/ui/table.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.mjs","names":[],"sources":["../../src/ui/table.tsx"],"sourcesContent":["import type { FC } from \"hono/jsx\";\nimport { css } from \"./css.ts\";\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\nconst tableWrap = css`\n  /* table */\n  overflow: auto;\n  background: var(--surface-card);\n  border: 1px solid var(--border);\n  border-radius: var(--radius-lg);\n  box-shadow: var(--shadow);\n  & table {\n    width: 100%;\n    border-collapse: separate;\n    border-spacing: 0;\n    font-size: var(--text-base);\n  }\n  & th,\n  & td {\n    text-align: left;\n    padding: 0.7rem 0.9rem;\n    border-bottom: 1px solid var(--border-subtle);\n    vertical-align: middle;\n  }\n  & th {\n    position: sticky;\n    top: 0;\n    z-index: 1;\n    background: var(--surface-subtle);\n    color: var(--text-secondary);\n    font-size: var(--text-xs);\n    font-weight: 600;\n    letter-spacing: 0.04em;\n    text-transform: uppercase;\n    white-space: nowrap;\n  }\n  & tbody tr {\n    transition: background var(--dur-fast) var(--ease);\n  }\n  & tbody tr:hover {\n    background: var(--accent-wash);\n  }\n  & tbody tr:last-child td {\n    border-bottom: 0;\n  }\n  & td.nowrap {\n    white-space: nowrap;\n  }\n`;\n\nconst tableDense = css`\n  /* table-dense */\n  ${tableWrap}\n  & th,\n  & td {\n    padding: 0.4rem 0.75rem;\n  }\n`;\n\n/**\n * Scrollable bordered table surface. Pass native `<table>` markup as\n * children; the header, row hover, and spacing are styled here.\n */\nexport const Table: FC<{ dense?: boolean; children?: unknown }> = ({ dense = false, children }) => {\n  return <div class={dense ? tableDense : tableWrap}>{children}</div>;\n};\n"],"mappings":";;;;;;AAKA,MAAM,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CrB,MAAM,aAAa,GAAG;;IAElB,UAAU;;;;;;;;;;AAWd,MAAa,SAAsD,EAAE,QAAQ,OAAO,eAAe;CACjG,OAAO,oBAAC,OAAD;EAAK,OAAO,QAAQ,aAAa;EAAY;CAAc,CAAA;AACpE"}

package/dist/ui/theme.mjs

@@ -0,0 +1,64 @@
+import "node:path";
+import "node:url";
+import.meta.url;
+//#region src/ui/theme.ts
+/** Default light brand theme (shadcn-like zinc, content-first). */
+const LIGHT_THEME = {
+	accent: "#1d5fcf",
+	accentContrast: "#ffffff",
+	ring: "#1d5fcf",
+	surface: {
+		base: "#fafafa",
+		card: "#ffffff",
+		muted: "#f4f4f5",
+		subtle: "#fafafa"
+	},
+	text: {
+		primary: "#09090b",
+		secondary: "#5b5b64",
+		muted: "#6a6a73"
+	},
+	border: "#e4e4e7",
+	borderSubtle: "#f4f4f5",
+	status: {
+		approved: "#16a34a",
+		new: "#d97706",
+		rejected: "#dc2626"
+	},
+	sidebarBg: "#ffffff",
+	radius: "0.5rem",
+	radiusSm: "0.375rem",
+	shadow: "0 1px 2px rgba(0,0,0,.04)"
+};
+/** Default dark brand theme (shadcn-like zinc). */
+const DARK_THEME = {
+	accent: "#4f8fff",
+	accentContrast: "#09090b",
+	ring: "#4f8fff",
+	surface: {
+		base: "#09090b",
+		card: "#111113",
+		muted: "#27272a",
+		subtle: "#18181b"
+	},
+	text: {
+		primary: "#fafafa",
+		secondary: "#a1a1aa",
+		muted: "#8a8a94"
+	},
+	border: "#27272a",
+	borderSubtle: "#1e1e22",
+	status: {
+		approved: "#22c55e",
+		new: "#f59e0b",
+		rejected: "#ef4444"
+	},
+	sidebarBg: "#111113",
+	radius: "0.5rem",
+	radiusSm: "0.375rem",
+	shadow: "0 1px 2px rgba(0,0,0,.3)"
+};
+//#endregion
+export { DARK_THEME, LIGHT_THEME };
+
+//# sourceMappingURL=theme.mjs.map

package/dist/ui/theme.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.mjs","names":[],"sources":["../../src/ui/theme.ts"],"sourcesContent":["/** Brand theme tokens (accent, surfaces, text, borders, statuses). */\nexport interface BrandTheme {\n  accent: string;\n  accentContrast?: string;\n  ring?: string;\n  surface: { base: string; card: string; muted?: string; subtle?: string };\n  text: { primary: string; secondary: string; muted?: string };\n  border: string;\n  borderSubtle?: string;\n  status: { approved: string; new: string; rejected: string };\n  sidebarBg?: string;\n  /** @deprecated No longer used: the top bar is neutral. Accepted so existing configs still parse. */\n  topbarBg?: string;\n  radius?: string;\n  radiusSm?: string;\n  shadow?: string;\n}\n\n/** Default light brand theme (shadcn-like zinc, content-first). */\nexport const LIGHT_THEME: BrandTheme = {\n  accent: \"#1d5fcf\",\n  accentContrast: \"#ffffff\",\n  ring: \"#1d5fcf\",\n  surface: { base: \"#fafafa\", card: \"#ffffff\", muted: \"#f4f4f5\", subtle: \"#fafafa\" },\n  text: { primary: \"#09090b\", secondary: \"#5b5b64\", muted: \"#6a6a73\" },\n  border: \"#e4e4e7\",\n  borderSubtle: \"#f4f4f5\",\n  status: { approved: \"#16a34a\", new: \"#d97706\", rejected: \"#dc2626\" },\n  sidebarBg: \"#ffffff\",\n  radius: \"0.5rem\",\n  radiusSm: \"0.375rem\",\n  shadow: \"0 1px 2px rgba(0,0,0,.04)\",\n};\n\n/** Default dark brand theme (shadcn-like zinc). */\nexport const DARK_THEME: BrandTheme = {\n  accent: \"#4f8fff\",\n  accentContrast: \"#09090b\",\n  ring: \"#4f8fff\",\n  surface: { base: \"#09090b\", card: \"#111113\", muted: \"#27272a\", subtle: \"#18181b\" },\n  text: { primary: \"#fafafa\", secondary: \"#a1a1aa\", muted: \"#8a8a94\" },\n  border: \"#27272a\",\n  borderSubtle: \"#1e1e22\",\n  status: { approved: \"#22c55e\", new: \"#f59e0b\", rejected: \"#ef4444\" },\n  sidebarBg: \"#111113\",\n  radius: \"0.5rem\",\n  radiusSm: \"0.375rem\",\n  shadow: \"0 1px 2px rgba(0,0,0,.3)\",\n};\n"],"mappings":";;;;;AAmBA,MAAa,cAA0B;CACrC,QAAQ;CACR,gBAAgB;CAChB,MAAM;CACN,SAAS;EAAE,MAAM;EAAW,MAAM;EAAW,OAAO;EAAW,QAAQ;CAAU;CACjF,MAAM;EAAE,SAAS;EAAW,WAAW;EAAW,OAAO;CAAU;CACnE,QAAQ;CACR,cAAc;CACd,QAAQ;EAAE,UAAU;EAAW,KAAK;EAAW,UAAU;CAAU;CACnE,WAAW;CACX,QAAQ;CACR,UAAU;CACV,QAAQ;AACV;;AAGA,MAAa,aAAyB;CACpC,QAAQ;CACR,gBAAgB;CAChB,MAAM;CACN,SAAS;EAAE,MAAM;EAAW,MAAM;EAAW,OAAO;EAAW,QAAQ;CAAU;CACjF,MAAM;EAAE,SAAS;EAAW,WAAW;EAAW,OAAO;CAAU;CACnE,QAAQ;CACR,cAAc;CACd,QAAQ;EAAE,UAAU;EAAW,KAAK;EAAW,UAAU;CAAU;CACnE,WAAW;CACX,QAAQ;CACR,UAAU;CACV,QAAQ;AACV"}

package/dist/ui/thumbnail.mjs

@@ -0,0 +1,51 @@
+import "node:path";
+import "node:url";
+import.meta.url;
+import { css } from "./css.mjs";
+import { jsx } from "hono/jsx/jsx-runtime";
+//#region src/ui/thumbnail.tsx
+const thumbFrame = css`
+  /* thumbnail */
+  position: relative;
+  display: block;
+  overflow: hidden;
+  aspect-ratio: 16 / 10;
+  background: var(--surface-muted);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+  & img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: top center;
+  }
+`;
+const thumbEmpty = css`
+  /* thumbnail-empty */
+  ${thumbFrame}
+  display: grid;
+  place-items: center;
+  color: var(--text-secondary);
+  font-size: var(--text-xs);
+`;
+/** Fixed-ratio, lazy-loaded screenshot preview with a muted placeholder. */
+const Thumbnail = ({ src, alt, placeholder = "No preview" }) => {
+	if (!src) return /* @__PURE__ */ jsx("span", {
+		class: thumbEmpty,
+		children: placeholder
+	});
+	return /* @__PURE__ */ jsx("span", {
+		class: thumbFrame,
+		children: /* @__PURE__ */ jsx("img", {
+			src,
+			alt,
+			loading: "lazy",
+			decoding: "async"
+		})
+	});
+};
+//#endregion
+export { Thumbnail };
+
+//# sourceMappingURL=thumbnail.mjs.map

package/dist/ui/thumbnail.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"thumbnail.mjs","names":[],"sources":["../../src/ui/thumbnail.tsx"],"sourcesContent":["import type { FC } from \"hono/jsx\";\nimport { css } from \"./css.ts\";\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\nconst thumbFrame = css`\n  /* thumbnail */\n  position: relative;\n  display: block;\n  overflow: hidden;\n  aspect-ratio: 16 / 10;\n  background: var(--surface-muted);\n  border: 1px solid var(--border-subtle);\n  border-radius: var(--radius-sm);\n  & img {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    object-position: top center;\n  }\n`;\n\nconst thumbEmpty = css`\n  /* thumbnail-empty */\n  ${thumbFrame}\n  display: grid;\n  place-items: center;\n  color: var(--text-secondary);\n  font-size: var(--text-xs);\n`;\n\n/** Fixed-ratio, lazy-loaded screenshot preview with a muted placeholder. */\nexport const Thumbnail: FC<{ src?: string | null; alt: string; placeholder?: string }> = ({\n  src,\n  alt,\n  placeholder = \"No preview\",\n}) => {\n  if (!src) {\n    return <span class={thumbEmpty}>{placeholder}</span>;\n  }\n  return (\n    <span class={thumbFrame}>\n      <img src={src} alt={alt} loading=\"lazy\" decoding=\"async\" />\n    </span>\n  );\n};\n"],"mappings":";;;;;;AAKA,MAAM,aAAa,GAAG;;;;;;;;;;;;;;;;;AAkBtB,MAAM,aAAa,GAAG;;IAElB,WAAW;;;;;;;AAQf,MAAa,aAA6E,EACxF,KACA,KACA,cAAc,mBACV;CACJ,IAAI,CAAC,KACH,OAAO,oBAAC,QAAD;EAAM,OAAO;EAAa,UAAA;CAAkB,CAAA;CAErD,OACE,oBAAC,QAAD;EAAM,OAAO;EACX,UAAA,oBAAC,OAAD;GAAU;GAAU;GAAK,SAAQ;GAAO,UAAS;EAAS,CAAA;CACtD,CAAA;AAEV"}

package/dist/ui/time.mjs

@@ -0,0 +1,50 @@
+import "node:path";
+import "node:url";
+import.meta.url;
+import { jsx } from "hono/jsx/jsx-runtime";
+//#region src/ui/time.tsx
+const MINUTE = 60;
+const HOUR = 3600;
+const DAY = 86400;
+/** [upper bound in seconds, unit size in seconds, unit label], tried in order. */
+const STEPS = [
+	[
+		HOUR,
+		MINUTE,
+		"min"
+	],
+	[
+		DAY,
+		HOUR,
+		"h"
+	],
+	[
+		7 * DAY,
+		DAY,
+		"d"
+	]
+];
+/** Compact relative time ("3 min ago"); falls back to an ISO date after a week. */
+function formatRelative(value, now = /* @__PURE__ */ new Date()) {
+	const then = new Date(value);
+	if (Number.isNaN(then.getTime())) return "unknown";
+	const seconds = Math.floor((now.getTime() - then.getTime()) / 1e3);
+	if (seconds < 45) return "just now";
+	const step = STEPS.find(([limit]) => seconds < limit);
+	if (!step) return then.toISOString().slice(0, 10);
+	return `${Math.max(1, Math.round(seconds / step[1]))} ${step[2]} ago`;
+}
+/** `<time>` showing a relative label, with the exact timestamp on hover. */
+const RelativeTime = ({ value }) => {
+	const date = new Date(value);
+	const valid = !Number.isNaN(date.getTime());
+	return /* @__PURE__ */ jsx("time", {
+		datetime: valid ? date.toISOString() : void 0,
+		title: valid ? date.toUTCString() : "",
+		children: formatRelative(value)
+	});
+};
+//#endregion
+export { RelativeTime, formatRelative };
+
+//# sourceMappingURL=time.mjs.map

package/dist/ui/time.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"time.mjs","names":[],"sources":["../../src/ui/time.tsx"],"sourcesContent":["import type { FC } from \"hono/jsx\";\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\nconst MINUTE = 60;\nconst HOUR = 3600;\nconst DAY = 86_400;\n\n/** [upper bound in seconds, unit size in seconds, unit label], tried in order. */\nconst STEPS: [number, number, string][] = [\n  [HOUR, MINUTE, \"min\"],\n  [DAY, HOUR, \"h\"],\n  [7 * DAY, DAY, \"d\"],\n];\n\n/** Compact relative time (\"3 min ago\"); falls back to an ISO date after a week. */\nexport function formatRelative(value: string | Date, now: Date = new Date()): string {\n  const then = new Date(value);\n  if (Number.isNaN(then.getTime())) {\n    return \"unknown\";\n  }\n  const seconds = Math.floor((now.getTime() - then.getTime()) / 1000);\n  if (seconds < 45) {\n    return \"just now\";\n  }\n  const step = STEPS.find(([limit]) => seconds < limit);\n  if (!step) {\n    return then.toISOString().slice(0, 10);\n  }\n  return `${Math.max(1, Math.round(seconds / step[1]))} ${step[2]} ago`;\n}\n\n/** `<time>` showing a relative label, with the exact timestamp on hover. */\nexport const RelativeTime: FC<{ value: string | Date }> = ({ value }) => {\n  const date = new Date(value);\n  const valid = !Number.isNaN(date.getTime());\n  return (\n    <time datetime={valid ? date.toISOString() : undefined} title={valid ? date.toUTCString() : \"\"}>\n      {formatRelative(value)}\n    </time>\n  );\n};\n"],"mappings":";;;;;AAIA,MAAM,SAAS;AACf,MAAM,OAAO;AACb,MAAM,MAAM;;AAGZ,MAAM,QAAoC;CACxC;EAAC;EAAM;EAAQ;CAAK;CACpB;EAAC;EAAK;EAAM;CAAG;CACf;EAAC,IAAI;EAAK;EAAK;CAAG;AACpB;;AAGA,SAAgB,eAAe,OAAsB,sBAAY,IAAI,KAAK,GAAW;CACnF,MAAM,OAAO,IAAI,KAAK,KAAK;CAC3B,IAAI,OAAO,MAAM,KAAK,QAAQ,CAAC,GAC7B,OAAO;CAET,MAAM,UAAU,KAAK,OAAO,IAAI,QAAQ,IAAI,KAAK,QAAQ,KAAK,GAAI;CAClE,IAAI,UAAU,IACZ,OAAO;CAET,MAAM,OAAO,MAAM,MAAM,CAAC,WAAW,UAAU,KAAK;CACpD,IAAI,CAAC,MACH,OAAO,KAAK,YAAY,CAAC,CAAC,MAAM,GAAG,EAAE;CAEvC,OAAO,GAAG,KAAK,IAAI,GAAG,KAAK,MAAM,UAAU,KAAK,EAAE,CAAC,EAAE,GAAG,KAAK,GAAG;AAClE;;AAGA,MAAa,gBAA8C,EAAE,YAAY;CACvE,MAAM,OAAO,IAAI,KAAK,KAAK;CAC3B,MAAM,QAAQ,CAAC,OAAO,MAAM,KAAK,QAAQ,CAAC;CAC1C,OACE,oBAAC,QAAD;EAAM,UAAU,QAAQ,KAAK,YAAY,IAAI,KAAA;EAAW,OAAO,QAAQ,KAAK,YAAY,IAAI;EACzF,UAAA,eAAe,KAAK;CACjB,CAAA;AAEV"}

package/package.json

@@ -0,0 +1,92 @@
+{
+  "name": "@storyshelf/app",
+  "version": "0.5.3",
+  "description": "StoryShelf app: Hono app, API routes, and server-rendered UI over @storyshelf/core.",
+  "keywords": [
+    "chromatic-alternative",
+    "hono",
+    "self-hosted",
+    "storybook",
+    "visual-testing"
+  ],
+  "homepage": "https://github.com/GuptaSiddhant/StoryShelf#readme",
+  "bugs": {
+    "url": "https://github.com/GuptaSiddhant/StoryShelf/issues"
+  },
+  "license": "MIT",
+  "author": {
+    "name": "Siddhant Gupta",
+    "url": "https://guptasiddhant.com"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/GuptaSiddhant/StoryShelf.git",
+    "directory": "packages/app"
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "types": "./dist/index.d.mts",
+  "exports": {
+    ".": {
+      "source": "./src/index.tsx",
+      "default": "./dist/index.mjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "exports": {
+      ".": "./dist/index.mjs",
+      "./package.json": "./package.json"
+    },
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown -w",
+    "fmt": "oxfmt ./src",
+    "lint": "oxlint --type-aware --type-check ./src",
+    "lint:fix": "nub run lint -- --fix",
+    "prepublishOnly": "nub run build",
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "test:watch": "vitest"
+  },
+  "dependencies": {
+    "@hono/swagger-ui": "^0.6.1",
+    "@hono/zod-openapi": "^1.1.5",
+    "@storyshelf/core": "0.5.3",
+    "@storyshelf/observability": "0.5.3",
+    "hono": "^4.11.0",
+    "zod": "^4.2.0"
+  },
+  "devDependencies": {
+    "@opentelemetry/api": "^1.9.0",
+    "@opentelemetry/context-async-hooks": "^2.11.0",
+    "@opentelemetry/core": "^2.11.0",
+    "@opentelemetry/sdk-trace-base": "^2.11.0",
+    "@storyshelf/auth": "0.5.3",
+    "@storyshelf/db-sqlite": "0.5.3",
+    "@types/node": "^26.0.0",
+    "@vitest/coverage-v8": "^4.0.0",
+    "adm-zip": "0.6.0",
+    "oxfmt": "^0.65.0",
+    "oxlint": "^1.80.0",
+    "oxlint-tsgolint": "^7.0.2001",
+    "pino": "^10.3.1",
+    "tsdown": "^0.22.14",
+    "typescript": "^7.0.2",
+    "vitest": "^5.0.0"
+  },
+  "jsr": {
+    "runtimeCompat": {
+      "node": true,
+      "deno": true,
+      "browser": false,
+      "workerd": false,
+      "bun": true
+    }
+  }
+}