@storyshelf/app 0.6.2 → 0.8.0

package/dist/store.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"store.mjs","names":[],"sources":["../src/store.ts"],"sourcesContent":["import type { CaptureQueue } from \"@storyshelf/core/adapter/capture-queue\";\nimport type { DatabaseAdapter } from \"@storyshelf/core/adapter/database\";\nimport type { GitHostProvider } from \"@storyshelf/core/adapter/git-host\";\nimport type { NotifierProvider } from \"@storyshelf/core/adapter/notifier\";\nimport type { StorageAdapter } from \"@storyshelf/core/adapter/storage\";\nimport type { ShelfConfig, UIConfig } from \"@storyshelf/core/config\";\nimport type { Logger } from \"@storyshelf/core/logger\";\nimport type { AuthUser } from \"@storyshelf/core/types\";\nimport { AsyncLocalStorage } from \"node:async_hooks\";\n\n/** Request-scoped dependencies and session state. */\nexport interface Store {\n  db: DatabaseAdapter;\n  storage: StorageAdapter;\n  config: ShelfConfig;\n  ui: UIConfig;\n  logger: Logger;\n  user: AuthUser | null;\n  authEnabled: boolean;\n  /** Raw session cookie value (\"default\" when anonymous); binds CSRF tokens. */\n  sessionId: string;\n  enqueueCapture?: (buildId: string, reqId?: string) => Promise<void>;\n  captureQueue?: CaptureQueue | null;\n  gitHosts: GitHostProvider[];\n  notifiers: NotifierProvider[];\n}\n\nconst storage = new AsyncLocalStorage<Store>();\n\n/** Run a function with the given request store in scope. */\nexport function runWithStore<T>(store: Store, fn: () => T): T {\n  return storage.run(store, fn);\n}\n\n/** Return the current request store, throwing outside a request scope. */\nexport function getStore(): Store {\n  const store = storage.getStore();\n  if (!store) {\n    throw new Error(\"Store not available. Use runWithStore().\");\n  }\n  return store;\n}\n"],"mappings":";;;;;AA2BA,MAAM,UAAU,IAAI,kBAAyB;;AAG7C,SAAgB,aAAgB,OAAc,IAAgB;CAC5D,OAAO,QAAQ,IAAI,OAAO,EAAE;AAC9B;;AAGA,SAAgB,WAAkB;CAChC,MAAM,QAAQ,QAAQ,SAAS;CAC/B,IAAI,CAAC,OACH,MAAM,IAAI,MAAM,0CAA0C;CAE5D,OAAO;AACT"}
+{"version":3,"file":"store.mjs","names":[],"sources":["../src/store.ts"],"sourcesContent":["import type { CaptureQueue } from \"@storyshelf/core/adapter/capture-queue\";\nimport type { CaptureRunner } from \"@storyshelf/core/adapter/capture-runner\";\nimport type { DatabaseAdapter } from \"@storyshelf/core/adapter/database\";\nimport type { DesignProvider } from \"@storyshelf/core/adapter/design\";\nimport type { NotifierProvider } from \"@storyshelf/core/adapter/notifier\";\nimport type { StorageAdapter } from \"@storyshelf/core/adapter/storage\";\nimport type { Ai } from \"@storyshelf/core/ai\";\nimport {\n  createCatalogLoader,\n  type BuildStatePublisher,\n  type CatalogLoader,\n} from \"@storyshelf/core/capture\";\nimport type { NotificationsConfig, ShelfConfig, UIConfig } from \"@storyshelf/core/config\";\nimport type { Logger } from \"@storyshelf/core/logger\";\nimport type { PublicOriginResolver } from \"@storyshelf/core/models\";\nimport type { AuthUser } from \"@storyshelf/core/types\";\nimport { AsyncLocalStorage } from \"node:async_hooks\";\nimport type { PublishService } from \"./publish-setup.ts\";\n\n/** Request-scoped dependencies and session state. */\nexport interface Store {\n  db: DatabaseAdapter;\n  storage: StorageAdapter;\n  config: ShelfConfig;\n  ui: UIConfig;\n  logger: Logger;\n  user: AuthUser | null;\n  authEnabled: boolean;\n  /** Raw session cookie value (\"default\" when anonymous); binds CSRF tokens. */\n  sessionId: string;\n  /** `options.testing` is set: capture, compare and baselines run here (ADR 0006). */\n  testing: boolean;\n  enqueueCapture?: (buildId: string, reqId?: string) => Promise<void>;\n  captureQueue?: CaptureQueue | null;\n  /** This instance runs capture jobs itself, so retry and the compute-jobs controls apply. */\n  capturesHere?: boolean;\n  /** Publishing: completion and the `publish` job queue (absent in hand-built stores). */\n  publish?: PublishService;\n  /** Cancels the unfinished jobs of a build, of every kind (absent in hand-built stores). */\n  cancelBuildJobs?: (buildId: string) => Promise<boolean>;\n  /** Shows a build's state on its git channels (absent in hand-built stores: delivered inline). */\n  buildState?: BuildStatePublisher;\n  /** Explicit `testing.concurrency`; unset means sized from the hardware. */\n  captureConcurrency?: number;\n  /** The capture runner (`options.testing.runner`); its targets decide which browsers a project may pick. */\n  runner?: Pick<CaptureRunner, \"metadata\"> | undefined;\n  /** The public origin: configured, detected from the platform, or reported by an admin (ADR 0007). */\n  publicOrigin?: PublicOriginResolver | undefined;\n  /** Design providers (Figma, …); empty when none is wired. */\n  design: DesignProvider[];\n  notifiers: NotifierProvider[];\n  /** Brand/sender settings for outgoing notifications (`notifications.config`). */\n  notificationsConfig?: NotificationsConfig;\n  /** AI insights surface; absent ⇒ AI off site-wide. */\n  ai?: Ai;\n}\n\nconst storage = new AsyncLocalStorage<Store>();\n\n/** Run a function with the given request store in scope. */\nexport function runWithStore<T>(store: Store, fn: () => T): T {\n  return storage.run(store, fn);\n}\n\n/** Return the current request store, throwing outside a request scope. */\nexport function getStore(): Store {\n  const store = storage.getStore();\n  if (!store) {\n    throw new Error(\"Store not available. Use runWithStore().\");\n  }\n  return store;\n}\n\n/**\n * Whether this instance has `testing` (`options.testing` is set): it captures and compares builds,\n * so pages layer snapshot data (screenshots, statuses, design links) onto what the catalog gives\n * them. Without it the same pages render from the published Storybook alone, and the routes\n * classified `testing` answer 404 (`requireTesting`).\n */\nexport function testingEnabled(store: Store = getStore()): boolean {\n  return store.testing;\n}\n\n/** The catalog loader pages read; hand-built stores without one get an uncached loader. */\nexport function catalogOf(store: Store = getStore()): CatalogLoader {\n  return (\n    store.publish?.catalog ??\n    createCatalogLoader({ db: store.db, storage: store.storage, logger: store.logger })\n  );\n}\n"],"mappings":";;;;;;AAyDA,MAAM,UAAU,IAAI,kBAAyB;;AAG7C,SAAgB,aAAgB,OAAc,IAAgB;CAC5D,OAAO,QAAQ,IAAI,OAAO,EAAE;AAC9B;;AAGA,SAAgB,WAAkB;CAChC,MAAM,QAAQ,QAAQ,SAAS;CAC/B,IAAI,CAAC,OACH,MAAM,IAAI,MAAM,0CAA0C;CAE5D,OAAO;AACT;;;;;;;AAQA,SAAgB,eAAe,QAAe,SAAS,GAAY;CACjE,OAAO,MAAM;AACf;;AAGA,SAAgB,UAAU,QAAe,SAAS,GAAkB;CAClE,OACE,MAAM,SAAS,WACf,oBAAoB;EAAE,IAAI,MAAM;EAAI,SAAS,MAAM;EAAS,QAAQ,MAAM;CAAO,CAAC;AAEtF"}

package/dist/targets.mjs

@@ -0,0 +1,45 @@
+import "node:path";
+import "node:url";
+import.meta.url;
+import { getStore } from "./store.mjs";
+import { MAX_BROWSERS, assertSupportedBrowsers, offeredTargets } from "@storyshelf/core/capture";
+import { HTTPException } from "hono/http-exception";
+import { isCaptureTarget, parseTarget } from "@storyshelf/core/adapter/capture-runner";
+// src/targets.ts
+/** Which capture targets this instance offers right now, and the checks a settings save runs (ADR 0007). */
+/**
+* The targets the runner offers, with the ones that need a URL marked `unavailable` while there is
+* no `secret` or public origin. `undefined` when there is no runner or it publishes no list: any
+* target is accepted, as before.
+*/
+async function runnerTargets(store = getStore()) {
+	if (store.runner === void 0) return;
+	return offeredTargets(store.runner, {
+		publicOrigin: await store.publicOrigin?.url(),
+		hasSecret: store.config.secret !== void 0
+	});
+}
+/** Engine label for a target (`Chromium`), plus the remote's name (`Chromium on grid`). */
+function targetLabel(target) {
+	const { engine, name } = parseTarget(target);
+	const label = engine === "webkit" ? "WebKit" : `${engine[0]?.toUpperCase()}${engine.slice(1)}`;
+	return name === void 0 ? label : `${label} on ${name}`;
+}
+/**
+* Refuse, with 400 and the reason, a target list the runner cannot render (not offered, or
+* unavailable), or one that is malformed or too long. Runs when a setting is saved, so a build
+* never fails one by one with an unexplained error.
+*/
+async function assertTargetsSelectable(targets, current = []) {
+	const bad = targets.find((target) => !isCaptureTarget(target));
+	if (bad !== void 0) throw new HTTPException(400, { message: `Invalid capture target "${bad}"` });
+	if (targets.length > MAX_BROWSERS) throw new HTTPException(400, { message: `Choose at most ${MAX_BROWSERS} browsers` });
+	try {
+		assertSupportedBrowsers(targets.filter((target) => !current.includes(target)), await runnerTargets());
+	} catch (error) {
+		throw new HTTPException(400, { message: error instanceof Error ? error.message : "Refused" });
+	}
+}
+export { assertTargetsSelectable, runnerTargets, targetLabel };
+
+//# sourceMappingURL=targets.mjs.map

package/dist/targets.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"targets.mjs","names":[],"sources":["../src/targets.ts"],"sourcesContent":["/** Which capture targets this instance offers right now, and the checks a settings save runs (ADR 0007). */\nimport {\n  isCaptureTarget,\n  parseTarget,\n  type CaptureTarget,\n  type RunnerTarget,\n} from \"@storyshelf/core/adapter/capture-runner\";\nimport { MAX_BROWSERS, assertSupportedBrowsers, offeredTargets } from \"@storyshelf/core/capture\";\nimport { HTTPException } from \"hono/http-exception\";\nimport { getStore, type Store } from \"./store.ts\";\n\n/**\n * The targets the runner offers, with the ones that need a URL marked `unavailable` while there is\n * no `secret` or public origin. `undefined` when there is no runner or it publishes no list: any\n * target is accepted, as before.\n */\nexport async function runnerTargets(\n  store: Store = getStore(),\n): Promise<readonly RunnerTarget[] | undefined> {\n  if (store.runner === undefined) {\n    return undefined;\n  }\n  return offeredTargets(store.runner, {\n    publicOrigin: await store.publicOrigin?.url(),\n    hasSecret: store.config.secret !== undefined,\n  });\n}\n\n/** Engine label for a target (`Chromium`), plus the remote's name (`Chromium on grid`). */\nexport function targetLabel(target: CaptureTarget): string {\n  const { engine, name } = parseTarget(target);\n  const label = engine === \"webkit\" ? \"WebKit\" : `${engine[0]?.toUpperCase()}${engine.slice(1)}`;\n  return name === undefined ? label : `${label} on ${name}`;\n}\n\n/**\n * Refuse, with 400 and the reason, a target list the runner cannot render (not offered, or\n * unavailable), or one that is malformed or too long. Runs when a setting is saved, so a build\n * never fails one by one with an unexplained error.\n */\nexport async function assertTargetsSelectable(\n  targets: readonly string[],\n  /** Targets the project already has: saving them again is not a new choice, so they are not refused. */\n  current: readonly string[] = [],\n): Promise<void> {\n  const bad = targets.find((target) => !isCaptureTarget(target));\n  if (bad !== undefined) {\n    throw new HTTPException(400, { message: `Invalid capture target \"${bad}\"` });\n  }\n  if (targets.length > MAX_BROWSERS) {\n    throw new HTTPException(400, { message: `Choose at most ${MAX_BROWSERS} browsers` });\n  }\n  try {\n    assertSupportedBrowsers(\n      (targets as CaptureTarget[]).filter((target) => !current.includes(target)),\n      await runnerTargets(),\n    );\n  } catch (error) {\n    throw new HTTPException(400, { message: error instanceof Error ? error.message : \"Refused\" });\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;AAgBA,eAAsB,cACpB,QAAe,SAAS,GACsB;CAC9C,IAAI,MAAM,WAAW,KAAA,GACnB;CAEF,OAAO,eAAe,MAAM,QAAQ;EAClC,cAAc,MAAM,MAAM,cAAc,IAAI;EAC5C,WAAW,MAAM,OAAO,WAAW,KAAA;CACrC,CAAC;AACH;;AAGA,SAAgB,YAAY,QAA+B;CACzD,MAAM,EAAE,QAAQ,SAAS,YAAY,MAAM;CAC3C,MAAM,QAAQ,WAAW,WAAW,WAAW,GAAG,OAAO,EAAE,EAAE,YAAY,IAAI,OAAO,MAAM,CAAC;CAC3F,OAAO,SAAS,KAAA,IAAY,QAAQ,GAAG,MAAM,MAAM;AACrD;;;;;;AAOA,eAAsB,wBACpB,SAEA,UAA6B,CAAC,GACf;CACf,MAAM,MAAM,QAAQ,MAAM,WAAW,CAAC,gBAAgB,MAAM,CAAC;CAC7D,IAAI,QAAQ,KAAA,GACV,MAAM,IAAI,cAAc,KAAK,EAAE,SAAS,2BAA2B,IAAI,GAAG,CAAC;CAE7E,IAAI,QAAQ,SAAS,cACnB,MAAM,IAAI,cAAc,KAAK,EAAE,SAAS,kBAAkB,aAAa,WAAW,CAAC;CAErF,IAAI;EACF,wBACG,QAA4B,QAAQ,WAAW,CAAC,QAAQ,SAAS,MAAM,CAAC,GACzE,MAAM,cAAc,CACtB;CACF,SAAS,OAAO;EACd,MAAM,IAAI,cAAc,KAAK,EAAE,SAAS,iBAAiB,QAAQ,MAAM,UAAU,UAAU,CAAC;CAC9F;AACF"}

package/dist/ui/avatar.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/avatar.tsx
+// src/ui/avatar.tsx
 const avatarBase = css`
   /* avatar */
   flex: none;
@@ -70,7 +70,6 @@ const Avatar = ({ name, src, size = "md" }) => {
 		children: initials(name) || "?"
 	});
 };
-//#endregion
 export { Avatar, initials };
 
 //# sourceMappingURL=avatar.mjs.map

package/dist/ui/buttons.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/buttons.tsx
+// src/ui/buttons.tsx
 const btnBase = css`
   /* btn */
   appearance: none;
@@ -149,7 +149,7 @@ const btnClasses = {
 		sm: btnDangerSm
 	}
 };
-css`
+const tabsNav = css`
   /* tabs */
   display: flex;
   gap: 0.25rem;
@@ -171,7 +171,7 @@ const tabsLink = css`
     text-decoration: none;
   }
 `;
-css`
+const tabsLinkActive = css`
   /* tabs-link-active */
   ${tabsLink}
   color: var(--text-primary);
@@ -199,7 +199,19 @@ const Button = ({ variant = "primary", size = "md", type = "button", href, disab
 		children: content
 	});
 };
-//#endregion
-export { Button };
+/** Tab navigation bar for section switching. */
+const Tabs = ({ tabs, label = "Sections" }) => {
+	return /* @__PURE__ */ jsx("nav", {
+		class: tabsNav,
+		"aria-label": label,
+		children: tabs.map((tab) => /* @__PURE__ */ jsx("a", {
+			class: tab.active ? tabsLinkActive : tabsLink,
+			href: tab.href,
+			"aria-current": tab.active ? "page" : void 0,
+			children: tab.label
+		}))
+	});
+};
+export { Button, Tabs };
 
 //# sourceMappingURL=buttons.mjs.map

package/dist/ui/buttons.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"buttons.mjs","names":[],"sources":["../../src/ui/buttons.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\ntype ButtonVariant = \"primary\" | \"secondary\" | \"ghost\" | \"danger\" | \"outline\";\ntype ButtonSize = \"md\" | \"sm\";\n\nconst btnBase = css`\n  /* btn */\n  appearance: none;\n  border: 1px solid transparent;\n  border-radius: var(--radius);\n  padding: 0.55rem 0.9rem;\n  font-weight: 600;\n  font-size: var(--text-base);\n  cursor: pointer;\n  text-decoration: none;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.4rem;\n  line-height: 1.2;\n  /* Top-aligned so a button in a <form> (a block with a line box) is exactly\n     as tall as the button instead of picking up a baseline strut. */\n  vertical-align: top;\n  min-height: 40px;\n  transition:\n    background var(--dur-fast) var(--ease),\n    border-color var(--dur-fast) var(--ease),\n    filter var(--dur-fast) var(--ease),\n    transform var(--dur-fast) var(--ease);\n  &:active:not(:disabled) {\n    transform: translateY(1px);\n  }\n  &:disabled {\n    opacity: 0.55;\n    cursor: not-allowed;\n  }\n`;\n\nconst btnPrimary = css`\n  /* btn-primary */\n  ${btnBase}\n  background: var(--accent);\n  color: var(--accent-contrast);\n  border-color: var(--accent);\n  box-shadow: var(--shadow);\n  &:hover {\n    filter: brightness(1.06);\n    text-decoration: none;\n  }\n`;\n\nconst btnPrimarySm = css`\n  /* btn-primary-sm */\n  ${btnPrimary}\n  padding: 0.35rem 0.6rem;\n  font-size: 0.8rem;\n  min-height: 32px;\n`;\n\nconst btnSecondary = css`\n  /* btn-secondary */\n  ${btnBase}\n  background: var(--surface-card);\n  color: var(--text-primary);\n  border-color: var(--border);\n  box-shadow: var(--shadow);\n  &:hover {\n    background: var(--surface-subtle);\n    text-decoration: none;\n  }\n`;\n\nconst btnSecondarySm = css`\n  /* btn-secondary-sm */\n  ${btnSecondary}\n  padding: 0.35rem 0.6rem;\n  font-size: 0.8rem;\n  min-height: 32px;\n`;\n\nconst btnOutline = css`\n  /* btn-outline */\n  ${btnSecondary}\n  &:hover {\n    background: var(--surface-subtle);\n    text-decoration: none;\n  }\n`;\n\nconst btnOutlineSm = css`\n  /* btn-outline-sm */\n  ${btnOutline}\n  padding: 0.35rem 0.6rem;\n  font-size: 0.8rem;\n  min-height: 32px;\n`;\n\nconst btnGhost = css`\n  /* btn-ghost */\n  ${btnBase}\n  background: transparent;\n  color: var(--text-secondary);\n  border-color: transparent;\n  &:hover {\n    background: var(--surface-muted);\n    color: var(--text-primary);\n    text-decoration: none;\n  }\n`;\n\nconst btnGhostSm = css`\n  /* btn-ghost-sm */\n  ${btnGhost}\n  padding: 0.35rem 0.6rem;\n  font-size: 0.8rem;\n  min-height: 32px;\n`;\n\nconst btnDanger = css`\n  /* btn-danger */\n  ${btnBase}\n  background: color-mix(in srgb, var(--status-rejected) 82%, #000);\n  color: #fff;\n  border-color: color-mix(in srgb, var(--status-rejected) 82%, #000);\n  &:hover {\n    filter: brightness(1.06);\n    text-decoration: none;\n  }\n`;\n\nconst btnDangerSm = css`\n  /* btn-danger-sm */\n  ${btnDanger}\n  padding: 0.35rem 0.6rem;\n  font-size: 0.8rem;\n  min-height: 32px;\n`;\n\nconst btnClasses: Record<ButtonVariant, Record<ButtonSize, Promise<string>>> = {\n  primary: { md: btnPrimary, sm: btnPrimarySm },\n  secondary: { md: btnSecondary, sm: btnSecondarySm },\n  outline: { md: btnOutline, sm: btnOutlineSm },\n  ghost: { md: btnGhost, sm: btnGhostSm },\n  danger: { md: btnDanger, sm: btnDangerSm },\n};\n\nconst tabsNav = css`\n  /* tabs */\n  display: flex;\n  gap: 0.25rem;\n  border-bottom: 1px solid var(--border);\n  margin-bottom: 1rem;\n  overflow-x: auto;\n`;\n\nconst tabsLink = css`\n  /* tabs-link */\n  padding: 0.55rem 0.75rem;\n  border-bottom: 2px solid transparent;\n  color: var(--text-secondary);\n  font-size: 0.875rem;\n  text-decoration: none;\n  white-space: nowrap;\n  font-weight: 600;\n  &:hover {\n    color: var(--text-primary);\n    text-decoration: none;\n  }\n`;\n\nconst tabsLinkActive = css`\n  /* tabs-link-active */\n  ${tabsLink}\n  color: var(--text-primary);\n  border-bottom-color: var(--accent);\n`;\n\n/** Button or link styled as a button (renders an anchor when `href` is set). */\nexport const Button: FC<{\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  type?: \"button\" | \"submit\" | \"reset\";\n  href?: string;\n  disabled?: boolean;\n  /** Leading icon from the sprite. */\n  icon?: IconName;\n  children?: unknown;\n  [key: string]: unknown;\n}> = ({\n  variant = \"primary\",\n  size = \"md\",\n  type = \"button\",\n  href,\n  disabled,\n  icon,\n  children,\n  ...rest\n}) => {\n  const cls = btnClasses[variant][size];\n  const content = (\n    <>\n      {icon ? <Icon name={icon} size={size === \"sm\" ? \"sm\" : \"md\"} /> : null}\n      {children}\n    </>\n  );\n  if (href) {\n    return (\n      <a class={cls} href={href} aria-disabled={disabled ? \"true\" : undefined} {...rest}>\n        {content}\n      </a>\n    );\n  }\n  return (\n    <button class={cls} type={type} disabled={disabled} {...rest}>\n      {content}\n    </button>\n  );\n};\n\n/** Tab navigation bar for section switching. */\n// eslint-disable-next-line promise-function-async -- JSX component return type\nexport const Tabs: FC<{\n  tabs: { label: string; href: string; active?: boolean }[];\n  label?: string;\n}> = ({ tabs, label = \"Sections\" }) => {\n  return (\n    <nav class={tabsNav} aria-label={label}>\n      {tabs.map((tab) => (\n        <a\n          class={tab.active ? tabsLinkActive : tabsLink}\n          href={tab.href}\n          aria-current={tab.active ? \"page\" : undefined}\n        >\n          {tab.label}\n        </a>\n      ))}\n    </nav>\n  );\n};\n"],"mappings":";;;;;;;AAUA,MAAM,UAAU,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCnB,MAAM,aAAa,GAAG;;IAElB,QAAQ;;;;;;;;;;AAWZ,MAAM,eAAe,GAAG;;IAEpB,WAAW;;;;;AAMf,MAAM,eAAe,GAAG;;IAEpB,QAAQ;;;;;;;;;;AAWZ,MAAM,iBAAiB,GAAG;;IAEtB,aAAa;;;;;AAMjB,MAAM,aAAa,GAAG;;IAElB,aAAa;;;;;;AAOjB,MAAM,eAAe,GAAG;;IAEpB,WAAW;;;;;AAMf,MAAM,WAAW,GAAG;;IAEhB,QAAQ;;;;;;;;;;AAWZ,MAAM,aAAa,GAAG;;IAElB,SAAS;;;;;AAMb,MAAM,YAAY,GAAG;;IAEjB,QAAQ;;;;;;;;;AAUZ,MAAM,cAAc,GAAG;;IAEnB,UAAU;;;;;AAMd,MAAM,aAAyE;CAC7E,SAAS;EAAE,IAAI;EAAY,IAAI;CAAa;CAC5C,WAAW;EAAE,IAAI;EAAc,IAAI;CAAe;CAClD,SAAS;EAAE,IAAI;EAAY,IAAI;CAAa;CAC5C,OAAO;EAAE,IAAI;EAAU,IAAI;CAAW;CACtC,QAAQ;EAAE,IAAI;EAAW,IAAI;CAAY;AAC3C;AAEgB,GAAG;;;;;;;;AASnB,MAAM,WAAW,GAAG;;;;;;;;;;;;;;AAeG,GAAG;;IAEtB,SAAS;;;;;AAMb,MAAa,UAUP,EACJ,UAAU,WACV,OAAO,MACP,OAAO,UACP,MACA,UACA,MACA,UACA,GAAG,WACC;CACJ,MAAM,MAAM,WAAW,QAAQ,CAAC;CAChC,MAAM,UACJ,qBAAA,UAAA,EAAA,UAAA,CACG,OAAO,oBAAC,MAAD;EAAM,MAAM;EAAM,MAAM,SAAS,OAAO,OAAO;CAAO,CAAA,IAAI,MACjE,QACD,EAAA,CAAA;CAEJ,IAAI,MACF,OACE,oBAAC,KAAD;EAAG,OAAO;EAAW;EAAM,iBAAe,WAAW,SAAS,KAAA;EAAW,GAAI;EAC1E,UAAA;CACA,CAAA;CAGP,OACE,oBAAC,UAAD;EAAQ,OAAO;EAAW;EAAgB;EAAU,GAAI;EACrD,UAAA;CACK,CAAA;AAEZ"}
+{"version":3,"file":"buttons.mjs","names":[],"sources":["../../src/ui/buttons.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\ntype ButtonVariant = \"primary\" | \"secondary\" | \"ghost\" | \"danger\" | \"outline\";\ntype ButtonSize = \"md\" | \"sm\";\n\nconst btnBase = css`\n  /* btn */\n  appearance: none;\n  border: 1px solid transparent;\n  border-radius: var(--radius);\n  padding: 0.55rem 0.9rem;\n  font-weight: 600;\n  font-size: var(--text-base);\n  cursor: pointer;\n  text-decoration: none;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.4rem;\n  line-height: 1.2;\n  /* Top-aligned so a button in a <form> (a block with a line box) is exactly\n     as tall as the button instead of picking up a baseline strut. */\n  vertical-align: top;\n  min-height: 40px;\n  transition:\n    background var(--dur-fast) var(--ease),\n    border-color var(--dur-fast) var(--ease),\n    filter var(--dur-fast) var(--ease),\n    transform var(--dur-fast) var(--ease);\n  &:active:not(:disabled) {\n    transform: translateY(1px);\n  }\n  &:disabled {\n    opacity: 0.55;\n    cursor: not-allowed;\n  }\n`;\n\nconst btnPrimary = css`\n  /* btn-primary */\n  ${btnBase}\n  background: var(--accent);\n  color: var(--accent-contrast);\n  border-color: var(--accent);\n  box-shadow: var(--shadow);\n  &:hover {\n    filter: brightness(1.06);\n    text-decoration: none;\n  }\n`;\n\nconst btnPrimarySm = css`\n  /* btn-primary-sm */\n  ${btnPrimary}\n  padding: 0.35rem 0.6rem;\n  font-size: 0.8rem;\n  min-height: 32px;\n`;\n\nconst btnSecondary = css`\n  /* btn-secondary */\n  ${btnBase}\n  background: var(--surface-card);\n  color: var(--text-primary);\n  border-color: var(--border);\n  box-shadow: var(--shadow);\n  &:hover {\n    background: var(--surface-subtle);\n    text-decoration: none;\n  }\n`;\n\nconst btnSecondarySm = css`\n  /* btn-secondary-sm */\n  ${btnSecondary}\n  padding: 0.35rem 0.6rem;\n  font-size: 0.8rem;\n  min-height: 32px;\n`;\n\nconst btnOutline = css`\n  /* btn-outline */\n  ${btnSecondary}\n  &:hover {\n    background: var(--surface-subtle);\n    text-decoration: none;\n  }\n`;\n\nconst btnOutlineSm = css`\n  /* btn-outline-sm */\n  ${btnOutline}\n  padding: 0.35rem 0.6rem;\n  font-size: 0.8rem;\n  min-height: 32px;\n`;\n\nconst btnGhost = css`\n  /* btn-ghost */\n  ${btnBase}\n  background: transparent;\n  color: var(--text-secondary);\n  border-color: transparent;\n  &:hover {\n    background: var(--surface-muted);\n    color: var(--text-primary);\n    text-decoration: none;\n  }\n`;\n\nconst btnGhostSm = css`\n  /* btn-ghost-sm */\n  ${btnGhost}\n  padding: 0.35rem 0.6rem;\n  font-size: 0.8rem;\n  min-height: 32px;\n`;\n\nconst btnDanger = css`\n  /* btn-danger */\n  ${btnBase}\n  background: color-mix(in srgb, var(--status-rejected) 82%, #000);\n  color: #fff;\n  border-color: color-mix(in srgb, var(--status-rejected) 82%, #000);\n  &:hover {\n    filter: brightness(1.06);\n    text-decoration: none;\n  }\n`;\n\nconst btnDangerSm = css`\n  /* btn-danger-sm */\n  ${btnDanger}\n  padding: 0.35rem 0.6rem;\n  font-size: 0.8rem;\n  min-height: 32px;\n`;\n\nconst btnClasses: Record<ButtonVariant, Record<ButtonSize, Promise<string>>> = {\n  primary: { md: btnPrimary, sm: btnPrimarySm },\n  secondary: { md: btnSecondary, sm: btnSecondarySm },\n  outline: { md: btnOutline, sm: btnOutlineSm },\n  ghost: { md: btnGhost, sm: btnGhostSm },\n  danger: { md: btnDanger, sm: btnDangerSm },\n};\n\nconst tabsNav = css`\n  /* tabs */\n  display: flex;\n  gap: 0.25rem;\n  border-bottom: 1px solid var(--border);\n  margin-bottom: 1rem;\n  overflow-x: auto;\n`;\n\nconst tabsLink = css`\n  /* tabs-link */\n  padding: 0.55rem 0.75rem;\n  border-bottom: 2px solid transparent;\n  color: var(--text-secondary);\n  font-size: 0.875rem;\n  text-decoration: none;\n  white-space: nowrap;\n  font-weight: 600;\n  &:hover {\n    color: var(--text-primary);\n    text-decoration: none;\n  }\n`;\n\nconst tabsLinkActive = css`\n  /* tabs-link-active */\n  ${tabsLink}\n  color: var(--text-primary);\n  border-bottom-color: var(--accent);\n`;\n\n/** Button or link styled as a button (renders an anchor when `href` is set). */\nexport const Button: FC<{\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  type?: \"button\" | \"submit\" | \"reset\";\n  href?: string;\n  disabled?: boolean;\n  /** Leading icon from the sprite. */\n  icon?: IconName;\n  children?: unknown;\n  [key: string]: unknown;\n}> = ({\n  variant = \"primary\",\n  size = \"md\",\n  type = \"button\",\n  href,\n  disabled,\n  icon,\n  children,\n  ...rest\n}) => {\n  const cls = btnClasses[variant][size];\n  const content = (\n    <>\n      {icon ? <Icon name={icon} size={size === \"sm\" ? \"sm\" : \"md\"} /> : null}\n      {children}\n    </>\n  );\n  if (href) {\n    return (\n      <a class={cls} href={href} aria-disabled={disabled ? \"true\" : undefined} {...rest}>\n        {content}\n      </a>\n    );\n  }\n  return (\n    <button class={cls} type={type} disabled={disabled} {...rest}>\n      {content}\n    </button>\n  );\n};\n\n/** Tab navigation bar for section switching. */\n// eslint-disable-next-line promise-function-async -- JSX component return type\nexport const Tabs: FC<{\n  tabs: { label: string; href: string; active?: boolean }[];\n  label?: string;\n}> = ({ tabs, label = \"Sections\" }) => {\n  return (\n    <nav class={tabsNav} aria-label={label}>\n      {tabs.map((tab) => (\n        <a\n          class={tab.active ? tabsLinkActive : tabsLink}\n          href={tab.href}\n          aria-current={tab.active ? \"page\" : undefined}\n        >\n          {tab.label}\n        </a>\n      ))}\n    </nav>\n  );\n};\n"],"mappings":";;;;;;;AAUA,MAAM,UAAU,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCnB,MAAM,aAAa,GAAG;;IAElB,QAAQ;;;;;;;;;;AAWZ,MAAM,eAAe,GAAG;;IAEpB,WAAW;;;;;AAMf,MAAM,eAAe,GAAG;;IAEpB,QAAQ;;;;;;;;;;AAWZ,MAAM,iBAAiB,GAAG;;IAEtB,aAAa;;;;;AAMjB,MAAM,aAAa,GAAG;;IAElB,aAAa;;;;;;AAOjB,MAAM,eAAe,GAAG;;IAEpB,WAAW;;;;;AAMf,MAAM,WAAW,GAAG;;IAEhB,QAAQ;;;;;;;;;;AAWZ,MAAM,aAAa,GAAG;;IAElB,SAAS;;;;;AAMb,MAAM,YAAY,GAAG;;IAEjB,QAAQ;;;;;;;;;AAUZ,MAAM,cAAc,GAAG;;IAEnB,UAAU;;;;;AAMd,MAAM,aAAyE;CAC7E,SAAS;EAAE,IAAI;EAAY,IAAI;CAAa;CAC5C,WAAW;EAAE,IAAI;EAAc,IAAI;CAAe;CAClD,SAAS;EAAE,IAAI;EAAY,IAAI;CAAa;CAC5C,OAAO;EAAE,IAAI;EAAU,IAAI;CAAW;CACtC,QAAQ;EAAE,IAAI;EAAW,IAAI;CAAY;AAC3C;AAEA,MAAM,UAAU,GAAG;;;;;;;;AASnB,MAAM,WAAW,GAAG;;;;;;;;;;;;;;AAepB,MAAM,iBAAiB,GAAG;;IAEtB,SAAS;;;;;AAMb,MAAa,UAUP,EACJ,UAAU,WACV,OAAO,MACP,OAAO,UACP,MACA,UACA,MACA,UACA,GAAG,WACC;CACJ,MAAM,MAAM,WAAW,QAAQ,CAAC;CAChC,MAAM,UACJ,qBAAA,UAAA,EAAA,UAAA,CACG,OAAO,oBAAC,MAAD;EAAM,MAAM;EAAM,MAAM,SAAS,OAAO,OAAO;CAAO,CAAA,IAAI,MACjE,QACD,EAAA,CAAA;CAEJ,IAAI,MACF,OACE,oBAAC,KAAD;EAAG,OAAO;EAAW;EAAM,iBAAe,WAAW,SAAS,KAAA;EAAW,GAAI;EAC1E,UAAA;CACA,CAAA;CAGP,OACE,oBAAC,UAAD;EAAQ,OAAO;EAAW;EAAgB;EAAU,GAAI;EACrD,UAAA;CACK,CAAA;AAEZ;;AAIA,MAAa,QAGP,EAAE,MAAM,QAAQ,iBAAiB;CACrC,OACE,oBAAC,OAAD;EAAK,OAAO;EAAS,cAAY;EAC9B,UAAA,KAAK,KAAK,QACT,oBAAC,KAAD;GACE,OAAO,IAAI,SAAS,iBAAiB;GACrC,MAAM,IAAI;GACV,gBAAc,IAAI,SAAS,SAAS,KAAA;GAEnC,UAAA,IAAI;EACJ,CAAA,CACJ;CACE,CAAA;AAET"}

package/dist/ui/code-block.mjs

@@ -4,7 +4,7 @@ import.meta.url;
 import { css } from "./css.mjs";
 import { Button } from "./buttons.mjs";
 import { jsx, jsxs } from "hono/jsx/jsx-runtime";
-//#region src/ui/code-block.tsx
+// src/ui/code-block.tsx
 const codeWrap = css`
   /* code-block */
   display: flex;
@@ -41,7 +41,6 @@ const CodeBlock = ({ code, label = "Copy" }) => {
 		})]
 	});
 };
-//#endregion
 export { CodeBlock };
 
 //# sourceMappingURL=code-block.mjs.map

package/dist/ui/compare-stage.mjs

@@ -4,7 +4,7 @@ import.meta.url;
 import { css } from "./css.mjs";
 import { Segmented } from "./segmented.mjs";
 import { Fragment, jsx, jsxs } from "hono/jsx/jsx-runtime";
-//#region src/ui/compare-stage.tsx
+// src/ui/compare-stage.tsx
 /**
 * Screenshot comparison surface. All modes share one set of images; the
 * `data-view` / `data-zoom` / `data-flip` attributes on the root (driven by
@@ -70,6 +70,10 @@ const stageRoot = css`
     font-size: var(--text-sm);
     text-align: center;
   }
+  .stage__note {
+    color: var(--text-secondary);
+    font-size: var(--text-sm);
+  }
   .stage__divider,
   .stage__controls {
     display: none;
@@ -103,6 +107,10 @@ const stageRoot = css`
   &[data-zoom="400"] .stage__img {
     image-rendering: pixelated;
   }
+  /* Design variant: screenshot against a render, two panes and no diff. */
+  &[data-variant="design"][data-view="split"] .stage__grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
   &[data-view="diff"] .stage__grid,
   &[data-view="flip"] .stage__grid,
   &[data-view="swipe"] .stage__grid,
@@ -218,6 +226,12 @@ const ZOOMS = [
 		value: "400"
 	}
 ];
+/** Modes and zoom a design comparison offers: no pixel diff, and the render always fits the stage. */
+const DESIGN_MODES = [
+	"split",
+	"swipe",
+	"onion"
+];
 function withActive(items, active) {
 	return items.map((item) => ({
 		...item,
@@ -244,12 +258,12 @@ const Pane = ({ kind, label, src, alt, empty, meta }) => {
 	});
 };
 /** Swipe and onion-skin sliders; each is shown only in its own mode (CSS). */
-const RangeControls = () => {
+const RangeControls = ({ baselineLabel }) => {
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("label", {
 		class: "stage__controls",
 		"data-for": "swipe",
 		children: [
-			/* @__PURE__ */ jsx("span", { children: "Baseline" }),
+			/* @__PURE__ */ jsx("span", { children: baselineLabel }),
 			/* @__PURE__ */ jsx("input", {
 				type: "range",
 				min: "0",
@@ -264,7 +278,7 @@ const RangeControls = () => {
 		class: "stage__controls",
 		"data-for": "onion",
 		children: [
-			/* @__PURE__ */ jsx("span", { children: "Baseline" }),
+			/* @__PURE__ */ jsx("span", { children: baselineLabel }),
 			/* @__PURE__ */ jsx("input", {
 				type: "range",
 				min: "0",
@@ -277,68 +291,86 @@ const RangeControls = () => {
 		]
 	})] });
 };
+/** Mode switch, plus the zoom switch (a design comparison always fits, so it has none). */
+const StageBar = ({ design }) => {
+	const modes = design ? MODES.filter((mode) => DESIGN_MODES.includes(mode.value)) : MODES;
+	return /* @__PURE__ */ jsxs("div", {
+		class: "stage__bar",
+		children: [/* @__PURE__ */ jsx(Segmented, {
+			label: "Comparison mode",
+			"data-compare-mode": true,
+			items: withActive(modes, "split")
+		}), design ? null : /* @__PURE__ */ jsx(Segmented, {
+			label: "Zoom",
+			"data-compare-zoom": true,
+			items: withActive(ZOOMS, "fit")
+		})]
+	});
+};
+/** The panes (baseline or design, current, diff) and the swipe divider. */
+const StageGrid = ({ baselineSrc, currentSrc, diffSrc, subject, baselineEmpty = "New story — no baseline yet. Approve to set the baseline.", diffEmpty = "No diff", diffMeta, design, baselineLabel }) => /* @__PURE__ */ jsxs("div", {
+	class: "stage__grid",
+	children: [
+		/* @__PURE__ */ jsx(Pane, {
+			kind: "baseline",
+			label: baselineLabel,
+			src: baselineSrc,
+			alt: `${baselineLabel} for ${subject}`,
+			empty: baselineEmpty
+		}),
+		/* @__PURE__ */ jsx(Pane, {
+			kind: "current",
+			label: "Current",
+			src: currentSrc,
+			alt: `Current for ${subject}`,
+			empty: "No screenshot"
+		}),
+		design ? null : /* @__PURE__ */ jsx(Pane, {
+			kind: "diff",
+			label: "Diff",
+			src: diffSrc,
+			alt: `Diff for ${subject}`,
+			empty: diffEmpty,
+			meta: diffMeta
+		}),
+		/* @__PURE__ */ jsx("span", {
+			class: "stage__divider",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx("span", {
+				class: "stage__knob",
+				"data-compare-knob": true,
+				children: "↔"
+			})
+		})
+	]
+});
 /** Baseline / current / diff comparison with swipe, onion-skin, flip, and zoom. */
-const CompareStage = ({ baselineSrc, currentSrc, diffSrc, subject, baselineEmpty = "New story — no baseline yet. Approve to set the baseline.", diffEmpty = "No diff", diffMeta }) => {
+const CompareStage = ({ variant = "baseline", baselineLabel = "Baseline", note, ...images }) => {
+	const design = variant === "design";
 	return /* @__PURE__ */ jsxs("div", {
 		class: stageRoot,
 		"data-compare": true,
 		"data-view": "split",
 		"data-zoom": "fit",
 		"data-flip": "current",
+		"data-variant": variant,
+		"data-modes": design ? DESIGN_MODES.join(",") : void 0,
+		"data-zooms": design ? "fit" : void 0,
 		children: [
-			/* @__PURE__ */ jsxs("div", {
-				class: "stage__bar",
-				children: [/* @__PURE__ */ jsx(Segmented, {
-					label: "Comparison mode",
-					"data-compare-mode": true,
-					items: withActive(MODES, "split")
-				}), /* @__PURE__ */ jsx(Segmented, {
-					label: "Zoom",
-					"data-compare-zoom": true,
-					items: withActive(ZOOMS, "fit")
-				})]
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				class: "stage__grid",
-				children: [
-					/* @__PURE__ */ jsx(Pane, {
-						kind: "baseline",
-						label: "Baseline",
-						src: baselineSrc,
-						alt: `Baseline for ${subject}`,
-						empty: baselineEmpty
-					}),
-					/* @__PURE__ */ jsx(Pane, {
-						kind: "current",
-						label: "Current",
-						src: currentSrc,
-						alt: `Current for ${subject}`,
-						empty: "No screenshot"
-					}),
-					/* @__PURE__ */ jsx(Pane, {
-						kind: "diff",
-						label: "Diff",
-						src: diffSrc,
-						alt: `Diff for ${subject}`,
-						empty: diffEmpty,
-						meta: diffMeta
-					}),
-					/* @__PURE__ */ jsx("span", {
-						class: "stage__divider",
-						"aria-hidden": "true",
-						children: /* @__PURE__ */ jsx("span", {
-							class: "stage__knob",
-							"data-compare-knob": true,
-							children: "↔"
-						})
-					})
-				]
+			/* @__PURE__ */ jsx(StageBar, { design }),
+			note ? /* @__PURE__ */ jsx("p", {
+				class: "stage__note",
+				children: note
+			}) : null,
+			/* @__PURE__ */ jsx(StageGrid, {
+				...images,
+				design,
+				baselineLabel
 			}),
-			/* @__PURE__ */ jsx(RangeControls, {})
+			/* @__PURE__ */ jsx(RangeControls, { baselineLabel })
 		]
 	});
 };
-//#endregion
 export { CompareStage };
 
 //# sourceMappingURL=compare-stage.mjs.map

package/dist/ui/compare-stage.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"compare-stage.mjs","names":[],"sources":["../../src/ui/compare-stage.tsx"],"sourcesContent":["import type { FC } from \"hono/jsx\";\nimport { css } from \"./css.ts\";\nimport { Segmented } from \"./segmented.tsx\";\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\n/**\n * Screenshot comparison surface. All modes share one set of images; the\n * `data-view` / `data-zoom` / `data-flip` attributes on the root (driven by\n * the review script) decide what is shown. Without JS it stays side-by-side.\n */\nconst stageRoot = css`\n  /* compare-stage */\n  display: grid;\n  gap: var(--space-3);\n  .stage__bar {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--space-3);\n    align-items: center;\n    justify-content: space-between;\n  }\n  .stage__grid {\n    display: grid;\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n    gap: var(--space-3);\n    align-items: start;\n  }\n  .stage__pane {\n    position: relative;\n    min-width: 0;\n    max-height: 78vh;\n    overflow: auto;\n    background: var(--surface-card);\n    border: 1px solid var(--border);\n    border-radius: var(--radius);\n  }\n  .stage__label {\n    position: sticky;\n    top: 0;\n    left: 0;\n    z-index: 2;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 0.35rem 0.6rem;\n    background: var(--surface-subtle);\n    border-bottom: 1px solid var(--border);\n    color: var(--text-secondary);\n    font-size: var(--text-xs);\n    font-weight: 600;\n    letter-spacing: 0.06em;\n    text-transform: uppercase;\n  }\n  .stage__img {\n    display: block;\n    width: 100%;\n    height: auto;\n    background: repeating-conic-gradient(var(--surface-muted) 0% 25%, var(--surface-subtle) 0% 50%)\n      0 0 / 16px 16px;\n  }\n  .stage__empty {\n    display: grid;\n    place-items: center;\n    aspect-ratio: 16 / 9;\n    padding: var(--space-4);\n    background: var(--surface-subtle);\n    color: var(--text-secondary);\n    font-size: var(--text-sm);\n    text-align: center;\n  }\n  .stage__divider,\n  .stage__controls {\n    display: none;\n  }\n  .stage__controls {\n    align-items: center;\n    gap: var(--space-3);\n    color: var(--text-secondary);\n    font-size: var(--text-sm);\n  }\n  .stage__controls input {\n    flex: 1;\n    accent-color: var(--accent);\n  }\n  &[data-zoom=\"100\"] .stage__img {\n    width: auto;\n    max-width: none;\n  }\n  &[data-zoom=\"200\"] .stage__img {\n    width: auto;\n    max-width: none;\n    zoom: 2;\n  }\n  &[data-zoom=\"400\"] .stage__img {\n    width: auto;\n    max-width: none;\n    zoom: 4;\n  }\n  /* Zoomed in, show real pixels instead of a smoothed blur. */\n  &[data-zoom=\"200\"] .stage__img,\n  &[data-zoom=\"400\"] .stage__img {\n    image-rendering: pixelated;\n  }\n  &[data-view=\"diff\"] .stage__grid,\n  &[data-view=\"flip\"] .stage__grid,\n  &[data-view=\"swipe\"] .stage__grid,\n  &[data-view=\"onion\"] .stage__grid {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  &[data-view=\"diff\"] .stage__pane:not([data-pane=\"diff\"]) {\n    display: none;\n  }\n  &[data-view=\"flip\"][data-flip=\"baseline\"] .stage__pane:not([data-pane=\"baseline\"]),\n  &[data-view=\"flip\"]:not([data-flip=\"baseline\"]) .stage__pane:not([data-pane=\"current\"]) {\n    display: none;\n  }\n  &[data-view=\"swipe\"] .stage__pane[data-pane=\"diff\"],\n  &[data-view=\"onion\"] .stage__pane[data-pane=\"diff\"] {\n    display: none;\n  }\n  &[data-view=\"swipe\"] .stage__pane,\n  &[data-view=\"onion\"] .stage__pane,\n  &[data-view=\"swipe\"] .stage__divider {\n    grid-area: 1 / 1;\n  }\n  &[data-view=\"swipe\"] .stage__label,\n  &[data-view=\"onion\"] .stage__label {\n    display: none;\n  }\n  &[data-view=\"swipe\"] .stage__pane[data-pane=\"current\"] {\n    clip-path: inset(0 0 0 var(--swipe, 50%));\n    background: transparent;\n  }\n  &[data-view=\"onion\"] .stage__pane[data-pane=\"current\"] {\n    opacity: var(--onion, 0.5);\n    background: transparent;\n  }\n  &[data-view=\"swipe\"] .stage__divider {\n    position: relative;\n    display: block;\n    z-index: 3;\n    justify-self: start;\n    width: 2px;\n    height: 100%;\n    margin-left: var(--swipe, 50%);\n    background: var(--accent);\n    pointer-events: none;\n  }\n  /* The only part of the divider that takes pointer input: drag it to wipe. */\n  .stage__knob {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    display: grid;\n    place-items: center;\n    width: 32px;\n    height: 32px;\n    transform: translate(-50%, -50%);\n    background: var(--accent);\n    color: var(--accent-contrast);\n    border: 2px solid var(--surface-card);\n    border-radius: var(--radius-pill);\n    box-shadow: var(--shadow-2);\n    font-size: var(--text-lg);\n    line-height: 1;\n    cursor: ew-resize;\n    pointer-events: auto;\n    touch-action: none;\n    user-select: none;\n  }\n  &[data-view=\"flip\"] .stage__grid {\n    cursor: pointer;\n  }\n  &[data-view=\"swipe\"] .stage__controls[data-for=\"swipe\"],\n  &[data-view=\"onion\"] .stage__controls[data-for=\"onion\"] {\n    display: flex;\n  }\n`;\n\nconst MODES = [\n  { label: \"Side by side\", value: \"split\" },\n  { label: \"Swipe\", value: \"swipe\" },\n  { label: \"Onion skin\", value: \"onion\" },\n  { label: \"Diff\", value: \"diff\" },\n  { label: \"Flip\", value: \"flip\" },\n];\n\nconst ZOOMS = [\n  { label: \"Fit\", value: \"fit\" },\n  { label: \"100%\", value: \"100\" },\n  { label: \"200%\", value: \"200\" },\n  { label: \"400%\", value: \"400\" },\n];\n\nfunction withActive(\n  items: { label: string; value: string }[],\n  active: string,\n): { label: string; value: string; active: boolean }[] {\n  return items.map((item) => ({ ...item, active: item.value === active }));\n}\n\ninterface PaneProps {\n  kind: \"baseline\" | \"current\" | \"diff\";\n  label: string;\n  src: string | null;\n  alt: string;\n  empty: unknown;\n  meta?: string;\n}\n\nconst Pane: FC<PaneProps> = ({ kind, label, src, alt, empty, meta }) => {\n  return (\n    <div class=\"stage__pane\" data-pane={kind}>\n      <div class=\"stage__label\">\n        <span>{label}</span>\n        {meta ? <span>{meta}</span> : null}\n      </div>\n      {src ? (\n        <img class=\"stage__img\" src={src} alt={alt} loading=\"lazy\" decoding=\"async\" />\n      ) : (\n        <div class=\"stage__empty\">{empty}</div>\n      )}\n    </div>\n  );\n};\n\n/** Swipe and onion-skin sliders; each is shown only in its own mode (CSS). */\nconst RangeControls: FC = () => {\n  return (\n    <>\n      <label class=\"stage__controls\" data-for=\"swipe\">\n        <span>Baseline</span>\n        <input type=\"range\" min=\"0\" max=\"100\" value=\"50\" data-compare-swipe aria-label=\"Swipe\" />\n        <span>Current</span>\n      </label>\n      <label class=\"stage__controls\" data-for=\"onion\">\n        <span>Baseline</span>\n        <input type=\"range\" min=\"0\" max=\"100\" value=\"50\" data-compare-onion aria-label=\"Opacity\" />\n        <span>Current</span>\n      </label>\n    </>\n  );\n};\n\n/** Props for the screenshot comparison surface. */\nexport interface CompareStageProps {\n  /** Baseline image URL, or null when the story has no baseline yet. */\n  baselineSrc: string | null;\n  currentSrc: string;\n  /** Diff overlay URL, or null when none was produced. */\n  diffSrc: string | null;\n  /** Accessible description shared by the images, e.g. \"Button / Primary\". */\n  subject: string;\n  baselineEmpty?: unknown;\n  diffEmpty?: unknown;\n  diffMeta?: string;\n}\n\n/** Baseline / current / diff comparison with swipe, onion-skin, flip, and zoom. */\nexport const CompareStage: FC<CompareStageProps> = ({\n  baselineSrc,\n  currentSrc,\n  diffSrc,\n  subject,\n  baselineEmpty = \"New story — no baseline yet. Approve to set the baseline.\",\n  diffEmpty = \"No diff\",\n  diffMeta,\n}) => {\n  return (\n    <div class={stageRoot} data-compare data-view=\"split\" data-zoom=\"fit\" data-flip=\"current\">\n      <div class=\"stage__bar\">\n        <Segmented label=\"Comparison mode\" data-compare-mode items={withActive(MODES, \"split\")} />\n        <Segmented label=\"Zoom\" data-compare-zoom items={withActive(ZOOMS, \"fit\")} />\n      </div>\n      <div class=\"stage__grid\">\n        <Pane\n          kind=\"baseline\"\n          label=\"Baseline\"\n          src={baselineSrc}\n          alt={`Baseline for ${subject}`}\n          empty={baselineEmpty}\n        />\n        <Pane\n          kind=\"current\"\n          label=\"Current\"\n          src={currentSrc}\n          alt={`Current for ${subject}`}\n          empty=\"No screenshot\"\n        />\n        <Pane\n          kind=\"diff\"\n          label=\"Diff\"\n          src={diffSrc}\n          alt={`Diff for ${subject}`}\n          empty={diffEmpty}\n          meta={diffMeta}\n        />\n        <span class=\"stage__divider\" aria-hidden=\"true\">\n          <span class=\"stage__knob\" data-compare-knob>\n            ↔\n          </span>\n        </span>\n      </div>\n      <RangeControls />\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"compare-stage.mjs","names":[],"sources":["../../src/ui/compare-stage.tsx"],"sourcesContent":["import type { FC } from \"hono/jsx\";\nimport { css } from \"./css.ts\";\nimport { Segmented } from \"./segmented.tsx\";\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\n/**\n * Screenshot comparison surface. All modes share one set of images; the\n * `data-view` / `data-zoom` / `data-flip` attributes on the root (driven by\n * the review script) decide what is shown. Without JS it stays side-by-side.\n */\nconst stageRoot = css`\n  /* compare-stage */\n  display: grid;\n  gap: var(--space-3);\n  .stage__bar {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--space-3);\n    align-items: center;\n    justify-content: space-between;\n  }\n  .stage__grid {\n    display: grid;\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n    gap: var(--space-3);\n    align-items: start;\n  }\n  .stage__pane {\n    position: relative;\n    min-width: 0;\n    max-height: 78vh;\n    overflow: auto;\n    background: var(--surface-card);\n    border: 1px solid var(--border);\n    border-radius: var(--radius);\n  }\n  .stage__label {\n    position: sticky;\n    top: 0;\n    left: 0;\n    z-index: 2;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 0.35rem 0.6rem;\n    background: var(--surface-subtle);\n    border-bottom: 1px solid var(--border);\n    color: var(--text-secondary);\n    font-size: var(--text-xs);\n    font-weight: 600;\n    letter-spacing: 0.06em;\n    text-transform: uppercase;\n  }\n  .stage__img {\n    display: block;\n    width: 100%;\n    height: auto;\n    background: repeating-conic-gradient(var(--surface-muted) 0% 25%, var(--surface-subtle) 0% 50%)\n      0 0 / 16px 16px;\n  }\n  .stage__empty {\n    display: grid;\n    place-items: center;\n    aspect-ratio: 16 / 9;\n    padding: var(--space-4);\n    background: var(--surface-subtle);\n    color: var(--text-secondary);\n    font-size: var(--text-sm);\n    text-align: center;\n  }\n  .stage__note {\n    color: var(--text-secondary);\n    font-size: var(--text-sm);\n  }\n  .stage__divider,\n  .stage__controls {\n    display: none;\n  }\n  .stage__controls {\n    align-items: center;\n    gap: var(--space-3);\n    color: var(--text-secondary);\n    font-size: var(--text-sm);\n  }\n  .stage__controls input {\n    flex: 1;\n    accent-color: var(--accent);\n  }\n  &[data-zoom=\"100\"] .stage__img {\n    width: auto;\n    max-width: none;\n  }\n  &[data-zoom=\"200\"] .stage__img {\n    width: auto;\n    max-width: none;\n    zoom: 2;\n  }\n  &[data-zoom=\"400\"] .stage__img {\n    width: auto;\n    max-width: none;\n    zoom: 4;\n  }\n  /* Zoomed in, show real pixels instead of a smoothed blur. */\n  &[data-zoom=\"200\"] .stage__img,\n  &[data-zoom=\"400\"] .stage__img {\n    image-rendering: pixelated;\n  }\n  /* Design variant: screenshot against a render, two panes and no diff. */\n  &[data-variant=\"design\"][data-view=\"split\"] .stage__grid {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  &[data-view=\"diff\"] .stage__grid,\n  &[data-view=\"flip\"] .stage__grid,\n  &[data-view=\"swipe\"] .stage__grid,\n  &[data-view=\"onion\"] .stage__grid {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  &[data-view=\"diff\"] .stage__pane:not([data-pane=\"diff\"]) {\n    display: none;\n  }\n  &[data-view=\"flip\"][data-flip=\"baseline\"] .stage__pane:not([data-pane=\"baseline\"]),\n  &[data-view=\"flip\"]:not([data-flip=\"baseline\"]) .stage__pane:not([data-pane=\"current\"]) {\n    display: none;\n  }\n  &[data-view=\"swipe\"] .stage__pane[data-pane=\"diff\"],\n  &[data-view=\"onion\"] .stage__pane[data-pane=\"diff\"] {\n    display: none;\n  }\n  &[data-view=\"swipe\"] .stage__pane,\n  &[data-view=\"onion\"] .stage__pane,\n  &[data-view=\"swipe\"] .stage__divider {\n    grid-area: 1 / 1;\n  }\n  &[data-view=\"swipe\"] .stage__label,\n  &[data-view=\"onion\"] .stage__label {\n    display: none;\n  }\n  &[data-view=\"swipe\"] .stage__pane[data-pane=\"current\"] {\n    clip-path: inset(0 0 0 var(--swipe, 50%));\n    background: transparent;\n  }\n  &[data-view=\"onion\"] .stage__pane[data-pane=\"current\"] {\n    opacity: var(--onion, 0.5);\n    background: transparent;\n  }\n  &[data-view=\"swipe\"] .stage__divider {\n    position: relative;\n    display: block;\n    z-index: 3;\n    justify-self: start;\n    width: 2px;\n    height: 100%;\n    margin-left: var(--swipe, 50%);\n    background: var(--accent);\n    pointer-events: none;\n  }\n  /* The only part of the divider that takes pointer input: drag it to wipe. */\n  .stage__knob {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    display: grid;\n    place-items: center;\n    width: 32px;\n    height: 32px;\n    transform: translate(-50%, -50%);\n    background: var(--accent);\n    color: var(--accent-contrast);\n    border: 2px solid var(--surface-card);\n    border-radius: var(--radius-pill);\n    box-shadow: var(--shadow-2);\n    font-size: var(--text-lg);\n    line-height: 1;\n    cursor: ew-resize;\n    pointer-events: auto;\n    touch-action: none;\n    user-select: none;\n  }\n  &[data-view=\"flip\"] .stage__grid {\n    cursor: pointer;\n  }\n  &[data-view=\"swipe\"] .stage__controls[data-for=\"swipe\"],\n  &[data-view=\"onion\"] .stage__controls[data-for=\"onion\"] {\n    display: flex;\n  }\n`;\n\nconst MODES = [\n  { label: \"Side by side\", value: \"split\" },\n  { label: \"Swipe\", value: \"swipe\" },\n  { label: \"Onion skin\", value: \"onion\" },\n  { label: \"Diff\", value: \"diff\" },\n  { label: \"Flip\", value: \"flip\" },\n];\n\nconst ZOOMS = [\n  { label: \"Fit\", value: \"fit\" },\n  { label: \"100%\", value: \"100\" },\n  { label: \"200%\", value: \"200\" },\n  { label: \"400%\", value: \"400\" },\n];\n\n/** Modes and zoom a design comparison offers: no pixel diff, and the render always fits the stage. */\nconst DESIGN_MODES = [\"split\", \"swipe\", \"onion\"];\n\nfunction withActive(\n  items: { label: string; value: string }[],\n  active: string,\n): { label: string; value: string; active: boolean }[] {\n  return items.map((item) => ({ ...item, active: item.value === active }));\n}\n\ninterface PaneProps {\n  kind: \"baseline\" | \"current\" | \"diff\";\n  label: string;\n  src: string | null;\n  alt: string;\n  empty: unknown;\n  meta?: string;\n}\n\nconst Pane: FC<PaneProps> = ({ kind, label, src, alt, empty, meta }) => {\n  return (\n    <div class=\"stage__pane\" data-pane={kind}>\n      <div class=\"stage__label\">\n        <span>{label}</span>\n        {meta ? <span>{meta}</span> : null}\n      </div>\n      {src ? (\n        <img class=\"stage__img\" src={src} alt={alt} loading=\"lazy\" decoding=\"async\" />\n      ) : (\n        <div class=\"stage__empty\">{empty}</div>\n      )}\n    </div>\n  );\n};\n\n/** Swipe and onion-skin sliders; each is shown only in its own mode (CSS). */\nconst RangeControls: FC<{ baselineLabel: string }> = ({ baselineLabel }) => {\n  return (\n    <>\n      <label class=\"stage__controls\" data-for=\"swipe\">\n        <span>{baselineLabel}</span>\n        <input type=\"range\" min=\"0\" max=\"100\" value=\"50\" data-compare-swipe aria-label=\"Swipe\" />\n        <span>Current</span>\n      </label>\n      <label class=\"stage__controls\" data-for=\"onion\">\n        <span>{baselineLabel}</span>\n        <input type=\"range\" min=\"0\" max=\"100\" value=\"50\" data-compare-onion aria-label=\"Opacity\" />\n        <span>Current</span>\n      </label>\n    </>\n  );\n};\n\n/** Props for the screenshot comparison surface. */\nexport interface CompareStageProps {\n  /** Baseline image URL, or null when the story has no baseline yet. */\n  baselineSrc: string | null;\n  currentSrc: string;\n  /** Diff overlay URL, or null when none was produced. */\n  diffSrc: string | null;\n  /** Accessible description shared by the images, e.g. \"Button / Primary\". */\n  subject: string;\n  baselineEmpty?: unknown;\n  diffEmpty?: unknown;\n  diffMeta?: string;\n  /**\n   * `design` compares the screenshot with a design render instead of a baseline: side by side,\n   * swipe and onion only (no diff, no flip), fit zoom only.\n   */\n  variant?: \"baseline\" | \"design\";\n  /** Name of the left-hand image in labels and sliders (default \"Baseline\"). */\n  baselineLabel?: string;\n  /** A line under the controls, e.g. what the left-hand image is. */\n  note?: string;\n}\n\n/** Mode switch, plus the zoom switch (a design comparison always fits, so it has none). */\nconst StageBar: FC<{ design: boolean }> = ({ design }) => {\n  const modes = design ? MODES.filter((mode) => DESIGN_MODES.includes(mode.value)) : MODES;\n  return (\n    <div class=\"stage__bar\">\n      <Segmented label=\"Comparison mode\" data-compare-mode items={withActive(modes, \"split\")} />\n      {design ? null : (\n        <Segmented label=\"Zoom\" data-compare-zoom items={withActive(ZOOMS, \"fit\")} />\n      )}\n    </div>\n  );\n};\n\n/** The panes (baseline or design, current, diff) and the swipe divider. */\nconst StageGrid: FC<CompareStageProps & { design: boolean; baselineLabel: string }> = ({\n  baselineSrc,\n  currentSrc,\n  diffSrc,\n  subject,\n  baselineEmpty = \"New story — no baseline yet. Approve to set the baseline.\",\n  diffEmpty = \"No diff\",\n  diffMeta,\n  design,\n  baselineLabel,\n}) => (\n  <div class=\"stage__grid\">\n    <Pane\n      kind=\"baseline\"\n      label={baselineLabel}\n      src={baselineSrc}\n      alt={`${baselineLabel} for ${subject}`}\n      empty={baselineEmpty}\n    />\n    <Pane\n      kind=\"current\"\n      label=\"Current\"\n      src={currentSrc}\n      alt={`Current for ${subject}`}\n      empty=\"No screenshot\"\n    />\n    {design ? null : (\n      <Pane\n        kind=\"diff\"\n        label=\"Diff\"\n        src={diffSrc}\n        alt={`Diff for ${subject}`}\n        empty={diffEmpty}\n        meta={diffMeta}\n      />\n    )}\n    <span class=\"stage__divider\" aria-hidden=\"true\">\n      <span class=\"stage__knob\" data-compare-knob>\n        ↔\n      </span>\n    </span>\n  </div>\n);\n\n/** Baseline / current / diff comparison with swipe, onion-skin, flip, and zoom. */\nexport const CompareStage: FC<CompareStageProps> = ({\n  variant = \"baseline\",\n  baselineLabel = \"Baseline\",\n  note,\n  ...images\n}) => {\n  const design = variant === \"design\";\n  return (\n    <div\n      class={stageRoot}\n      data-compare\n      data-view=\"split\"\n      data-zoom=\"fit\"\n      data-flip=\"current\"\n      data-variant={variant}\n      data-modes={design ? DESIGN_MODES.join(\",\") : undefined}\n      data-zooms={design ? \"fit\" : undefined}\n    >\n      <StageBar design={design} />\n      {note ? <p class=\"stage__note\">{note}</p> : null}\n      <StageGrid {...images} design={design} baselineLabel={baselineLabel} />\n      <RangeControls baselineLabel={baselineLabel} />\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/ui/csrf-field.mjs

@@ -4,7 +4,7 @@ import.meta.url;
 import { getStore } from "../store.mjs";
 import { getCsrfToken } from "../middleware/csrf.mjs";
 import { jsx } from "hono/jsx/jsx-runtime";
-//#region src/ui/csrf-field.tsx
+// src/ui/csrf-field.tsx
 /** Hidden CSRF token so native (non-HTMX) form posts pass the csrf middleware. */
 function csrfField() {
 	const { config, sessionId } = getStore();
@@ -14,7 +14,6 @@ function csrfField() {
 		value: getCsrfToken(config.secret, sessionId)
 	});
 }
-//#endregion
 export { csrfField };
 
 //# sourceMappingURL=csrf-field.mjs.map

package/dist/ui/css.mjs

@@ -2,7 +2,7 @@ import "node:path";
 import "node:url";
 import.meta.url;
 import { createCssContext } from "hono/css";
-//#region src/ui/css.ts
+// src/ui/css.ts
 /**
 * hono/css building blocks for the server-rendered UI.
 *
@@ -30,7 +30,6 @@ const context = createCssContext({
 const css = (strings, ...values) => context.css(strings, ...values);
 /** Collects every used class into `<style id="storyshelf-css">`. */
 const Style = (args) => context.Style(args);
-//#endregion
 export { Style, css };
 
 //# sourceMappingURL=css.mjs.map

package/dist/ui/design-reference.mjs

@@ -0,0 +1,96 @@
+import "node:path";
+import "node:url";
+import.meta.url;
+import { css } from "./css.mjs";
+import { Icon } from "./icons/icon.mjs";
+import { Fragment, jsx, jsxs } from "hono/jsx/jsx-runtime";
+// src/ui/design-reference.tsx
+const referenceRoot = css`
+  /* design-reference */
+  display: grid;
+  background: var(--surface-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  overflow: hidden;
+  .reference__label {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-3);
+    padding: 0.35rem 0.6rem;
+    background: var(--surface-subtle);
+    border-bottom: 1px solid var(--border);
+    color: var(--text-secondary);
+    font-size: var(--text-xs);
+    font-weight: 600;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+  }
+  .reference__img {
+    display: block;
+    max-width: 100%;
+    max-height: 60vh;
+    margin: 0 auto;
+    object-fit: contain;
+  }
+`;
+const previewImg = css`
+  /* design-preview */
+  display: block;
+  width: 16rem;
+  max-width: 100%;
+  max-height: 14rem;
+  margin: 0.25rem auto;
+  object-fit: contain;
+  border-radius: var(--radius-sm);
+  background: repeating-conic-gradient(var(--surface-muted) 0% 25%, var(--surface-subtle) 0% 50%) 0
+    0 / 16px 16px;
+`;
+const previewCaption = css`
+  /* design-preview-caption */
+  padding: 0 0.6rem 0.25rem;
+  color: var(--text-secondary);
+  font-size: var(--text-xs);
+`;
+/** Cached design render shown as a reference pane under the diff stage. */
+const DesignReference = ({ src, name, href, providerName }) => /* @__PURE__ */ jsxs("figure", {
+	class: referenceRoot,
+	children: [/* @__PURE__ */ jsxs("figcaption", {
+		class: "reference__label",
+		children: [/* @__PURE__ */ jsxs("span", { children: [
+			providerName,
+			" reference",
+			name ? ` · ${name}` : ""
+		] }), /* @__PURE__ */ jsxs("a", {
+			href,
+			target: "_blank",
+			rel: "noopener noreferrer",
+			children: [
+				/* @__PURE__ */ jsx(Icon, {
+					name: "external-link",
+					size: "sm"
+				}),
+				" Open in ",
+				providerName
+			]
+		})]
+	}), /* @__PURE__ */ jsx("img", {
+		class: "reference__img",
+		src,
+		alt: name ? `${providerName} design: ${name}` : `${providerName} design`,
+		loading: "lazy"
+	})]
+});
+/** Small cached render for popovers, with an optional caption (the design name). */
+const DesignPreview = ({ src, name, providerName }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("img", {
+	class: previewImg,
+	src,
+	alt: name ? `${providerName} design: ${name}` : `${providerName} design`,
+	loading: "lazy"
+}), name ? /* @__PURE__ */ jsx("div", {
+	class: previewCaption,
+	children: name
+}) : null] });
+export { DesignPreview, DesignReference };
+
+//# sourceMappingURL=design-reference.mjs.map

package/dist/ui/design-reference.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-reference.mjs","names":[],"sources":["../../src/ui/design-reference.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\nconst referenceRoot = css`\n  /* design-reference */\n  display: grid;\n  background: var(--surface-card);\n  border: 1px solid var(--border);\n  border-radius: var(--radius);\n  overflow: hidden;\n  .reference__label {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--space-3);\n    padding: 0.35rem 0.6rem;\n    background: var(--surface-subtle);\n    border-bottom: 1px solid var(--border);\n    color: var(--text-secondary);\n    font-size: var(--text-xs);\n    font-weight: 600;\n    letter-spacing: 0.06em;\n    text-transform: uppercase;\n  }\n  .reference__img {\n    display: block;\n    max-width: 100%;\n    max-height: 60vh;\n    margin: 0 auto;\n    object-fit: contain;\n  }\n`;\n\nconst previewImg = css`\n  /* design-preview */\n  display: block;\n  width: 16rem;\n  max-width: 100%;\n  max-height: 14rem;\n  margin: 0.25rem auto;\n  object-fit: contain;\n  border-radius: var(--radius-sm);\n  background: repeating-conic-gradient(var(--surface-muted) 0% 25%, var(--surface-subtle) 0% 50%) 0\n    0 / 16px 16px;\n`;\n\nconst previewCaption = css`\n  /* design-preview-caption */\n  padding: 0 0.6rem 0.25rem;\n  color: var(--text-secondary);\n  font-size: var(--text-xs);\n`;\n\n/** Cached design render shown as a reference pane under the diff stage. */\nexport const DesignReference: FC<{\n  src: string;\n  name?: string | null;\n  href: string;\n  providerName: string;\n}> = ({ src, name, href, providerName }) => (\n  <figure class={referenceRoot}>\n    <figcaption class=\"reference__label\">\n      <span>\n        {providerName} reference{name ? ` · ${name}` : \"\"}\n      </span>\n      <a href={href} target=\"_blank\" rel=\"noopener noreferrer\">\n        <Icon name=\"external-link\" size=\"sm\" /> Open in {providerName}\n      </a>\n    </figcaption>\n    <img\n      class=\"reference__img\"\n      src={src}\n      alt={name ? `${providerName} design: ${name}` : `${providerName} design`}\n      loading=\"lazy\"\n    />\n  </figure>\n);\n\n/** Small cached render for popovers, with an optional caption (the design name). */\nexport const DesignPreview: FC<{ src: string; name?: string | null; providerName: string }> = ({\n  src,\n  name,\n  providerName,\n}) => (\n  <>\n    <img\n      class={previewImg}\n      src={src}\n      alt={name ? `${providerName} design: ${name}` : `${providerName} design`}\n      loading=\"lazy\"\n    />\n    {name ? <div class={previewCaption}>{name}</div> : null}\n  </>\n);\n"],"mappings":";;;;;;;AAMA,MAAM,gBAAgB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BzB,MAAM,aAAa,GAAG;;;;;;;;;;;;AAatB,MAAM,iBAAiB,GAAG;;;;;;;AAQ1B,MAAa,mBAKP,EAAE,KAAK,MAAM,MAAM,mBACvB,qBAAC,UAAD;CAAQ,OAAO;CAAf,UAAA,CACE,qBAAC,cAAD;EAAY,OAAM;EAAlB,UAAA,CACE,qBAAC,QAAD,EAAA,UAAA;GACG;GAAa;GAAW,OAAO,MAAM,SAAS;EAC3C,EAAA,CAAA,GACN,qBAAC,KAAD;GAAS;GAAM,QAAO;GAAS,KAAI;GAAnC,UAAA;IACE,oBAAC,MAAD;KAAM,MAAK;KAAgB,MAAK;IAAM,CAAA;IAAC;IAAU;GAChD;EACO,CAAA,CAAA;CACZ,CAAA,GAAA,oBAAC,OAAD;EACE,OAAM;EACD;EACL,KAAK,OAAO,GAAG,aAAa,WAAW,SAAS,GAAG,aAAa;EAChE,SAAQ;CACT,CAAA,CACK;;;AAIV,MAAa,iBAAkF,EAC7F,KACA,MACA,mBAEA,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,OAAD;CACE,OAAO;CACF;CACL,KAAK,OAAO,GAAG,aAAa,WAAW,SAAS,GAAG,aAAa;CAChE,SAAQ;AACT,CAAA,GACA,OAAO,oBAAC,OAAD;CAAK,OAAO;CAAiB,UAAA;AAAU,CAAA,IAAI,IACnD,EAAA,CAAA"}

package/dist/ui/document.mjs

@@ -7,14 +7,13 @@ import { Style, css } from "./css.mjs";
 import { assetManifest } from "../asset-manifest.mjs";
 import { BareShell } from "./shell/bare.mjs";
 import { bootScript } from "./shell/boot-script.mjs";
-import { clientScript } from "./shell/client-script.mjs";
 import { Sidebar } from "./shell/sidebar.mjs";
 import { ToastRegion, TopBar } from "./shell/topbar.mjs";
 import { baseStyle } from "./styles.mjs";
 import { DARK_THEME, LIGHT_THEME } from "./theme.mjs";
 import { Fragment, jsx, jsxs } from "hono/jsx/jsx-runtime";
 import { raw } from "hono/html";
-//#region src/ui/document.tsx
+// src/ui/document.tsx
 const shellRoot = css`
   /* shell */
   display: grid;
@@ -120,11 +119,10 @@ const DocumentLayout = ({ title, nav, layout = "default", children }) => {
 			})] }),
 			/* @__PURE__ */ jsx(ToastRegion, {}),
 			/* @__PURE__ */ jsx("script", { src: assetManifest.htmx.href }),
-			/* @__PURE__ */ jsx("script", { dangerouslySetInnerHTML: { __html: clientScript() } })
+			/* @__PURE__ */ jsx("script", { src: assetManifest.client.href })
 		] })]
 	})] });
 };
-//#endregion
 export { DocumentLayout };
 
 //# sourceMappingURL=document.mjs.map