@kestack/web-platform 0.0.0-stage → 0.0.0

package/dist/server/stage/stage.js

@@ -0,0 +1,28 @@
+//#region src/server/stage/stage.ts
+/**
+* A deploy's stage, as alchemy names it: `prod`, a pull request's `prN`, or
+* anyone's own stage on their machine. Only `prod` and `prN` reach the
+* world.
+*/
+const isProdStage = (stage) => stage === "prod";
+const isPrStage = (stage) => /^pr\d+$/.test(stage);
+const isDeployedStage = (stage) => isProdStage(stage) || isPrStage(stage);
+/** Refuses a deployed stage unless the deploy says so on purpose, as CI and
+* a deploy script do with ALLOW_DEPLOY=true. */
+const assertStageIsSafe = (stage) => {
+	if (isDeployedStage(stage) && process.env["ALLOW_DEPLOY"] !== "true") throw new Error(`Refusing to target deployed stage "${stage}" without ALLOW_DEPLOY=true.`);
+};
+/** Where a stage is served: `domain` for prod, `prN-domain` for a pull
+* request, and nowhere public for anyone's own stage. */
+const domainFor = (stage, domain) => isProdStage(stage) ? domain : isDeployedStage(stage) ? `${stage}-${domain}` : void 0;
+/** A local stage's dev server, on the PORT `portless run` hands it. */
+const devConfigFor = (isLocal) => {
+	if (!isLocal) return void 0;
+	const port = Number(process.env["PORT"]);
+	if (!Number.isInteger(port) || port < 1 || port > 65535) throw new Error("PORT must be assigned by portless. Start the app with `pnpm dev`.");
+	return { port };
+};
+//#endregion
+export { assertStageIsSafe, devConfigFor, domainFor, isDeployedStage };
+
+//# sourceMappingURL=stage.js.map

package/dist/server/stage/stage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stage.js","names":[],"sources":["../../../src/server/stage/stage.ts"],"sourcesContent":["/**\n * A deploy's stage, as alchemy names it: `prod`, a pull request's `prN`, or\n * anyone's own stage on their machine. Only `prod` and `prN` reach the\n * world.\n */\nconst isProdStage = (stage: string): boolean => stage === 'prod';\nconst isPrStage = (stage: string): boolean => /^pr\\d+$/.test(stage);\n\nexport const isDeployedStage = (stage: string): boolean =>\n  isProdStage(stage) || isPrStage(stage);\n\n/** Refuses a deployed stage unless the deploy says so on purpose, as CI and\n * a deploy script do with ALLOW_DEPLOY=true. */\nexport const assertStageIsSafe = (stage: string): void => {\n  if (isDeployedStage(stage) && process.env['ALLOW_DEPLOY'] !== 'true') {\n    throw new Error(\n      `Refusing to target deployed stage \"${stage}\" without ALLOW_DEPLOY=true.`,\n    );\n  }\n};\n\n/** Where a stage is served: `domain` for prod, `prN-domain` for a pull\n * request, and nowhere public for anyone's own stage. */\nexport const domainFor = (stage: string, domain: string): string | undefined =>\n  isProdStage(stage)\n    ? domain\n    : isDeployedStage(stage)\n      ? `${stage}-${domain}`\n      : undefined;\n\n/** A local stage's dev server, on the PORT `portless run` hands it. */\nexport const devConfigFor = (\n  isLocal: boolean,\n): { port: number } | undefined => {\n  if (!isLocal) return undefined;\n  const port = Number(process.env['PORT']);\n  if (!Number.isInteger(port) || port < 1 || port > 65535) {\n    throw new Error(\n      'PORT must be assigned by portless. Start the app with `pnpm dev`.',\n    );\n  }\n  return { port };\n};\n"],"mappings":";;;;;;AAKA,MAAM,eAAe,UAA2B,UAAU;AAC1D,MAAM,aAAa,UAA2B,UAAU,KAAK,KAAK;AAElE,MAAa,mBAAmB,UAC9B,YAAY,KAAK,KAAK,UAAU,KAAK;;;AAIvC,MAAa,qBAAqB,UAAwB;CACxD,IAAI,gBAAgB,KAAK,KAAK,QAAQ,IAAI,oBAAoB,QAC5D,MAAM,IAAI,MACR,sCAAsC,MAAM,6BAC9C;AAEJ;;;AAIA,MAAa,aAAa,OAAe,WACvC,YAAY,KAAK,IACb,SACA,gBAAgB,KAAK,IACnB,GAAG,MAAM,GAAG,WACZ,KAAA;;AAGR,MAAa,gBACX,YACiC;CACjC,IAAI,CAAC,SAAS,OAAO,KAAA;CACrB,MAAM,OAAO,OAAO,QAAQ,IAAI,OAAO;CACvC,IAAI,CAAC,OAAO,UAAU,IAAI,KAAK,OAAO,KAAK,OAAO,OAChD,MAAM,IAAI,MACR,mEACF;CAEF,OAAO,EAAE,KAAK;AAChB"}

package/dist/server/worker/index.d.ts

@@ -0,0 +1,2 @@
+import { Handle, webServer } from "./worker.js";
+export { type Handle, webServer };

package/dist/server/worker/index.js

@@ -0,0 +1,2 @@
+import { webServer } from "./worker.js";
+export { webServer };

package/dist/server/worker/worker.d.ts

@@ -0,0 +1,19 @@
+//#region src/server/worker/worker.d.ts
+/** Answers a request with the platform's own context, such as a Worker's
+ * `env`. */
+export type Handle<Env> = (request: Request, env: Env) => Promise<Response>;
+/**
+ * A web app's server: what `route` answers, and everything else the app's
+ * pages, from TanStack Start. `rpc` answers `/rpc` alone. A plain fetch
+ * handler, so it is a Cloudflare Worker's default export as it is, and runs
+ * anywhere else that calls `fetch(request, env)`.
+ */
+export declare const webServer: <Env>(options: {
+  readonly rpc?: Handle<Env>;
+  /** Answers a request it knows, or null to leave it to the pages. */
+  readonly route?: (request: Request, env: Env) => Promise<Response> | null;
+}) => {
+  fetch: (request: Request, env: Env) => Promise<Response>;
+};
+//#endregion
+//# sourceMappingURL=worker.d.ts.map

package/dist/server/worker/worker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"worker.d.ts","names":[],"sources":["../../../src/server/worker/worker.ts"],"mappings":";;;YAIY,OAAO,QAAQ,SAAS,SAAS,KAAK,QAAQ,QAAQ;;;;;;;qBAQrD,YAAa,KAAG;WAClB,MAAM,OAAO;;WAEb,SAAS,SAAS,SAAS,KAAK,QAAQ,QAAQ;;EAEzD,QAAK,SAAY,SAAO,KAAO,QAAM,QAAQ"}

package/dist/server/worker/worker.js

@@ -0,0 +1,18 @@
+import handler from "@tanstack/react-start/server-entry";
+//#region src/server/worker/worker.ts
+/**
+* A web app's server: what `route` answers, and everything else the app's
+* pages, from TanStack Start. `rpc` answers `/rpc` alone. A plain fetch
+* handler, so it is a Cloudflare Worker's default export as it is, and runs
+* anywhere else that calls `fetch(request, env)`.
+*/
+const webServer = (options) => ({ fetch: (request, env) => {
+	const routed = options.route?.(request, env) ?? null;
+	if (routed !== null) return routed;
+	const path = new URL(request.url).pathname;
+	return options.rpc !== void 0 && (path === "/rpc" || path === "/rpc/") ? options.rpc(request, env) : Promise.resolve(handler.fetch(request));
+} });
+//#endregion
+export { webServer };
+
+//# sourceMappingURL=worker.js.map

package/dist/server/worker/worker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"worker.js","names":[],"sources":["../../../src/server/worker/worker.ts"],"sourcesContent":["import handler from '@tanstack/react-start/server-entry';\n\n/** Answers a request with the platform's own context, such as a Worker's\n * `env`. */\nexport type Handle<Env> = (request: Request, env: Env) => Promise<Response>;\n\n/**\n * A web app's server: what `route` answers, and everything else the app's\n * pages, from TanStack Start. `rpc` answers `/rpc` alone. A plain fetch\n * handler, so it is a Cloudflare Worker's default export as it is, and runs\n * anywhere else that calls `fetch(request, env)`.\n */\nexport const webServer = <Env>(options: {\n  readonly rpc?: Handle<Env>;\n  /** Answers a request it knows, or null to leave it to the pages. */\n  readonly route?: (request: Request, env: Env) => Promise<Response> | null;\n}) => ({\n  fetch: (request: Request, env: Env): Promise<Response> => {\n    const routed = options.route?.(request, env) ?? null;\n    if (routed !== null) return routed;\n    const path = new URL(request.url).pathname;\n    return options.rpc !== undefined && (path === '/rpc' || path === '/rpc/')\n      ? options.rpc(request, env)\n      : Promise.resolve(handler.fetch(request));\n  },\n});\n"],"mappings":";;;;;;;;AAYA,MAAa,aAAkB,aAIxB,EACL,QAAQ,SAAkB,QAAgC;CACxD,MAAM,SAAS,QAAQ,QAAQ,SAAS,GAAG,KAAK;CAChD,IAAI,WAAW,MAAM,OAAO;CAC5B,MAAM,OAAO,IAAI,IAAI,QAAQ,GAAG,CAAC,CAAC;CAClC,OAAO,QAAQ,QAAQ,KAAA,MAAc,SAAS,UAAU,SAAS,WAC7D,QAAQ,IAAI,SAAS,GAAG,IACxB,QAAQ,QAAQ,QAAQ,MAAM,OAAO,CAAC;AAC5C,EACF"}

package/dist/theme/cookie.d.ts

@@ -0,0 +1,6 @@
+import { Theme } from "./model.js";
+//#region src/theme/cookie.d.ts
+export declare const themeFromCookies: (cookies: string | null | undefined) => Theme;
+export declare const writeThemeCookie: (theme: Theme, cookieDomain?: string) => void;
+//#endregion
+//# sourceMappingURL=cookie.d.ts.map

package/dist/theme/cookie.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cookie.d.ts","names":[],"sources":["../../src/theme/cookie.ts"],"mappings":";;qBAEa,mBAAgB,uCAAyC;qBAUzD,mBAAgB,OAAW,OAAK"}

package/dist/theme/cookie.js

@@ -0,0 +1,21 @@
+import { DEFAULT_THEME, THEME_COOKIE, isTheme } from "./model.js";
+//#region src/theme/cookie.ts
+const themeFromCookies = (cookies) => {
+	for (const part of (cookies ?? "").split(";")) {
+		const [name, ...rest] = part.trim().split("=");
+		if (name !== "kui-theme") continue;
+		const value = decodeURIComponent(rest.join("="));
+		return isTheme(value) ? value : DEFAULT_THEME;
+	}
+	return DEFAULT_THEME;
+};
+const writeThemeCookie = (theme, cookieDomain) => {
+	const domain = cookieDomain?.replace(/^\./, "").trim();
+	const shared = domain && (location.hostname === domain || location.hostname.endsWith(`.${domain}`)) ? `; Domain=${domain}` : "";
+	const secure = location.protocol === "https:" ? "; Secure" : "";
+	document.cookie = `${THEME_COOKIE}=${theme}; Path=/; Max-Age=31536000; SameSite=Lax${shared}${secure}`;
+};
+//#endregion
+export { themeFromCookies, writeThemeCookie };
+
+//# sourceMappingURL=cookie.js.map

package/dist/theme/cookie.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cookie.js","names":[],"sources":["../../src/theme/cookie.ts"],"sourcesContent":["import { DEFAULT_THEME, isTheme, THEME_COOKIE, type Theme } from './model.ts';\n\nexport const themeFromCookies = (cookies: string | null | undefined): Theme => {\n  for (const part of (cookies ?? '').split(';')) {\n    const [name, ...rest] = part.trim().split('=');\n    if (name !== THEME_COOKIE) continue;\n    const value = decodeURIComponent(rest.join('='));\n    return isTheme(value) ? value : DEFAULT_THEME;\n  }\n  return DEFAULT_THEME;\n};\n\nexport const writeThemeCookie = (theme: Theme, cookieDomain?: string): void => {\n  const domain = cookieDomain?.replace(/^\\./, '').trim();\n  const shared =\n    domain &&\n    (location.hostname === domain || location.hostname.endsWith(`.${domain}`))\n      ? `; Domain=${domain}`\n      : '';\n  const secure = location.protocol === 'https:' ? '; Secure' : '';\n  document.cookie = `${THEME_COOKIE}=${theme}; Path=/; Max-Age=31536000; SameSite=Lax${shared}${secure}`;\n};\n"],"mappings":";;AAEA,MAAa,oBAAoB,YAA8C;CAC7E,KAAK,MAAM,SAAS,WAAW,GAAA,CAAI,MAAM,GAAG,GAAG;EAC7C,MAAM,CAAC,MAAM,GAAG,QAAQ,KAAK,KAAK,CAAC,CAAC,MAAM,GAAG;EAC7C,IAAI,SAAA,aAAuB;EAC3B,MAAM,QAAQ,mBAAmB,KAAK,KAAK,GAAG,CAAC;EAC/C,OAAO,QAAQ,KAAK,IAAI,QAAQ;CAClC;CACA,OAAO;AACT;AAEA,MAAa,oBAAoB,OAAc,iBAAgC;CAC7E,MAAM,SAAS,cAAc,QAAQ,OAAO,EAAE,CAAC,CAAC,KAAK;CACrD,MAAM,SACJ,WACC,SAAS,aAAa,UAAU,SAAS,SAAS,SAAS,IAAI,QAAQ,KACpE,YAAY,WACZ;CACN,MAAM,SAAS,SAAS,aAAa,WAAW,aAAa;CAC7D,SAAS,SAAS,GAAG,aAAa,GAAG,MAAM,0CAA0C,SAAS;AAChG"}

package/dist/theme/css/font-inter.css

@@ -0,0 +1,2 @@
+@import '@fontsource-variable/inter';
+@import '@fontsource-variable/jetbrains-mono';

package/dist/theme/css/global.css

@@ -0,0 +1,62 @@
+/* This file is meant to be imported as is in frontend projects!. */
+@import 'tailwindcss';
+@import 'tw-animate-css';
+@import 'shadcn/tailwind.css';
+
+@custom-variant dark (&:where(.dark, .dark *, [data-theme='dark'], [data-theme='dark'] *));
+
+/*
+ * What the device can be driven by, from `<html>` (marked before the first
+ * paint by the root document; see input's DEVICE_SCRIPT).
+ */
+@custom-variant keyboard (&:where([data-keyboard] *));
+@custom-variant touch (&:where([data-touch] *));
+
+/* The one focus ring: drawn inside, so no scrolling parent clips it. */
+@utility focus-ring {
+  outline: none;
+  &:focus-visible {
+    box-shadow: inset 0 0 0 2px var(--color-ring);
+  }
+}
+
+@import './sources.css';
+@import './typography.css';
+@import './theme.css';
+@import './shiki.css';
+
+@layer base {
+  html {
+    scrollbar-gutter: auto;
+    scrollbar-color: color-mix(
+        in oklab,
+        var(--muted-foreground) 45%,
+        transparent
+      )
+      transparent;
+    scrollbar-width: thin;
+  }
+  html::-webkit-scrollbar {
+    width: 10px;
+  }
+  html::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  html::-webkit-scrollbar-thumb {
+    border: 3px solid transparent;
+    border-radius: 999px;
+    background-color: color-mix(
+      in oklab,
+      var(--muted-foreground) 45%,
+      transparent
+    );
+    background-clip: content-box;
+  }
+  html::-webkit-scrollbar-thumb:hover {
+    background-color: color-mix(
+      in oklab,
+      var(--muted-foreground) 70%,
+      transparent
+    );
+  }
+}

package/dist/theme/css/shiki.css

@@ -0,0 +1,71 @@
+/**
+ * Dual-theme Shiki support. CodeBlock tokenizes once with both light and dark
+ * themes: each token span carries its light colour inline plus a `--shiki-dark`
+ * custom property. Under the app's dark theme we swap the span colour to that
+ * dark value. Scoped to `.shiki-token` so the surrounding gutter and layout
+ * spans (which carry no `--shiki-dark`) keep their own colours.
+ */
+.dark .shiki .shiki-token,
+[data-theme='dark'] .shiki .shiki-token {
+  color: var(--shiki-dark) !important;
+}
+
+/**
+ * Diff line decoration for SourceViewer. Written as plain CSS rather than
+ * Tailwind arbitrary variants because these classes are added by a Shiki
+ * transformer into markup Tailwind never scans.
+ */
+.source-line-add {
+  background-color: rgb(34 197 94 / 0.14);
+  border-inline-start-color: rgb(34 197 94) !important;
+}
+
+.source-line-remove {
+  background-color: rgb(244 63 94 / 0.14);
+  border-inline-start-color: rgb(244 63 94) !important;
+}
+
+.source-line-empty {
+  background-color: color-mix(
+    in oklab,
+    var(--muted-foreground) 7%,
+    transparent
+  );
+}
+
+.source-line-meta {
+  background-color: var(--muted);
+  color: var(--muted-foreground);
+}
+
+.source-line-add::after,
+.source-line-remove::after {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 2.85rem;
+  width: 0.65rem;
+  text-align: center;
+  font-size: 11px;
+  font-weight: 700;
+  line-height: inherit;
+}
+
+.source-line-add::after {
+  content: '+';
+  color: rgb(22 163 74);
+}
+
+.source-line-remove::after {
+  content: '\2212';
+  color: rgb(225 29 72);
+}
+
+.dark .source-line-add::after,
+[data-theme='dark'] .source-line-add::after {
+  color: rgb(74 222 128);
+}
+
+.dark .source-line-remove::after,
+[data-theme='dark'] .source-line-remove::after {
+  color: rgb(251 113 133);
+}

package/dist/theme/css/sources.css

@@ -0,0 +1,6 @@
+/* Paths resolve inside the installed package, including in node_modules. */
+@source "../../components";
+@source "../../form";
+@source "../../recipes";
+@source "../../client";
+@source "../../pwa";

package/dist/theme/css/theme.css

@@ -0,0 +1,170 @@
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-dialog: var(--dialog);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-edge: var(--edge);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-chart-6: var(--chart-6);
+  --color-chart-7: var(--chart-7);
+  --color-chart-8: var(--chart-8);
+  --color-chart-9: var(--chart-9);
+  --color-positive: var(--positive);
+  --color-positive-foreground: var(--positive-foreground);
+  --font-sans: 'Inter Variable', ui-sans-serif, system-ui, sans-serif;
+  --font-mono:
+    'JetBrains Mono Variable', ui-monospace, 'SF Mono', 'Menlo', monospace;
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-active: var(--sidebar-active);
+  --color-sidebar-active-foreground: var(--sidebar-active-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+[data-theme='light'],
+:root {
+  color-scheme: light;
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --dialog: var(--popover);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  /* The hairline around raised surfaces; in light, the foreground at 10%. */
+  --edge: color-mix(in oklab, var(--foreground) 10%, transparent);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --chart-6: oklch(0.586 0.2 277.117);
+  --chart-7: oklch(0.723 0.15 50.08);
+  --chart-8: oklch(0.52 0.13 200.723);
+  --chart-9: oklch(0.645 0.2 330.44);
+  --positive: oklch(0.55 0.18 145);
+  --positive-foreground: oklch(0.985 0 0);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-active: oklch(0.94 0.03 264);
+  --sidebar-active-foreground: oklch(0.4 0.16 264);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+[data-theme='dark'],
+.dark {
+  color-scheme: dark;
+  /* Dark surfaces rise by getting lighter, as light ones do by casting a
+     shadow: page, then card and sidebar, then popovers, menus and sheets. */
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.195 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.235 0 0);
+  /* A dialog sits on a dimmed page: darker than a menu, so its text stands
+     out more. */
+  --dialog: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 15%);
+  /* Shadows barely show on a dark page, so edges carry the shape. */
+  --edge: oklch(1 0 0 / 16%);
+  --input: oklch(1 0 0 / 20%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --chart-6: oklch(0.637 0.2 277.117);
+  --chart-7: oklch(0.773 0.15 50.08);
+  --chart-8: oklch(0.57 0.13 200.723);
+  --chart-9: oklch(0.695 0.2 330.44);
+  --positive: oklch(0.65 0.17 145);
+  --positive-foreground: oklch(0.985 0 0);
+  --sidebar: oklch(0.195 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-active: oklch(0.25 0.045 264);
+  --sidebar-active-foreground: oklch(0.78 0.12 264);
+  --sidebar-border: oklch(1 0 0 / 15%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply font-sans bg-background text-foreground overflow-y-scroll;
+  }
+  /* An App Shell with a sidebar fills the screen and scrolls inside, so the page
+     keeps no empty scrollbar track at its edge. */
+  body:has([data-slot='app-shell']) {
+    @apply overflow-hidden;
+  }
+  html {
+    @apply font-sans;
+  }
+}

package/dist/theme/css/typography.css

@@ -0,0 +1 @@
+@plugin "@tailwindcss/typography";

package/dist/theme/document.d.ts

@@ -0,0 +1,6 @@
+import { Theme } from "./model.js";
+//#region src/theme/document.d.ts
+export declare const applyThemeToDocument: (theme: Theme, freeze?: boolean) => void;
+export declare const bootstrapSource: (initialTheme: Theme) => string;
+//#endregion
+//# sourceMappingURL=document.d.ts.map

package/dist/theme/document.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"document.d.ts","names":[],"sources":["../../src/theme/document.ts"],"mappings":";;qBAUa,uBAAoB,OAAW,OAAK;qBAyBpC,kBAAe,cAAkB"}

package/dist/theme/document.js

@@ -0,0 +1,26 @@
+import { THEME_COLORS } from "./model.js";
+//#region src/theme/document.ts
+const freezeTransitions = () => {
+	const style = document.createElement("style");
+	style.textContent = "*,*::before,*::after{transition:none!important}";
+	document.head.appendChild(style);
+	return () => requestAnimationFrame(() => requestAnimationFrame(() => style.remove()));
+};
+const applyThemeToDocument = (theme, freeze = false) => {
+	const unfreeze = freeze ? freezeTransitions() : void 0;
+	const root = document.documentElement;
+	root.classList.toggle("dark", theme === "dark");
+	root.dataset.theme = theme;
+	root.style.colorScheme = theme;
+	root.style.backgroundColor = THEME_COLORS[theme];
+	if (document.body !== null) document.body.style.backgroundColor = THEME_COLORS[theme];
+	const metas = [...document.querySelectorAll("meta[name=\"theme-color\"]")];
+	if (metas.length === 0) metas.push(document.head.appendChild(Object.assign(document.createElement("meta"), { name: "theme-color" })));
+	for (const meta of metas) meta.content = THEME_COLORS[theme];
+	unfreeze?.();
+};
+const bootstrapSource = (initialTheme) => `(function(){try{var n='kui-theme',m=document.cookie.match(new RegExp('(?:^|; )'+n+'=([^;]*)')),t=m?decodeURIComponent(m[1]):'${initialTheme}';if(t!=='light'&&t!=='dark')t='dark';var c=t==='dark'?'${THEME_COLORS.dark}':'${THEME_COLORS.light}',r=document.documentElement;r.classList.toggle('dark',t==='dark');r.setAttribute('data-theme',t);r.style.colorScheme=t;r.style.backgroundColor=c;document.querySelectorAll('meta[name="theme-color"]').forEach(function(e){e.setAttribute('content',c)})}catch(e){}})()`;
+//#endregion
+export { applyThemeToDocument, bootstrapSource };
+
+//# sourceMappingURL=document.js.map

package/dist/theme/document.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"document.js","names":[],"sources":["../../src/theme/document.ts"],"sourcesContent":["import { THEME_COLORS, type Theme } from './model.ts';\n\nconst freezeTransitions = (): (() => void) => {\n  const style = document.createElement('style');\n  style.textContent = '*,*::before,*::after{transition:none!important}';\n  document.head.appendChild(style);\n  return () =>\n    requestAnimationFrame(() => requestAnimationFrame(() => style.remove()));\n};\n\nexport const applyThemeToDocument = (theme: Theme, freeze = false): void => {\n  const unfreeze = freeze ? freezeTransitions() : undefined;\n  const root = document.documentElement;\n  root.classList.toggle('dark', theme === 'dark');\n  root.dataset.theme = theme;\n  root.style.colorScheme = theme;\n  root.style.backgroundColor = THEME_COLORS[theme];\n  if (document.body !== null) {\n    document.body.style.backgroundColor = THEME_COLORS[theme];\n  }\n\n  const metas = [\n    ...document.querySelectorAll<HTMLMetaElement>('meta[name=\"theme-color\"]'),\n  ];\n  if (metas.length === 0) {\n    metas.push(\n      document.head.appendChild(\n        Object.assign(document.createElement('meta'), { name: 'theme-color' }),\n      ),\n    );\n  }\n  for (const meta of metas) meta.content = THEME_COLORS[theme];\n  unfreeze?.();\n};\n\nexport const bootstrapSource = (initialTheme: Theme): string =>\n  `(function(){try{var n='kui-theme',m=document.cookie.match(new RegExp('(?:^|; )'+n+'=([^;]*)')),t=m?decodeURIComponent(m[1]):'${initialTheme}';if(t!=='light'&&t!=='dark')t='dark';var c=t==='dark'?'${THEME_COLORS.dark}':'${THEME_COLORS.light}',r=document.documentElement;r.classList.toggle('dark',t==='dark');r.setAttribute('data-theme',t);r.style.colorScheme=t;r.style.backgroundColor=c;document.querySelectorAll('meta[name=\"theme-color\"]').forEach(function(e){e.setAttribute('content',c)})}catch(e){}})()`;\n"],"mappings":";;AAEA,MAAM,0BAAwC;CAC5C,MAAM,QAAQ,SAAS,cAAc,OAAO;CAC5C,MAAM,cAAc;CACpB,SAAS,KAAK,YAAY,KAAK;CAC/B,aACE,4BAA4B,4BAA4B,MAAM,OAAO,CAAC,CAAC;AAC3E;AAEA,MAAa,wBAAwB,OAAc,SAAS,UAAgB;CAC1E,MAAM,WAAW,SAAS,kBAAkB,IAAI,KAAA;CAChD,MAAM,OAAO,SAAS;CACtB,KAAK,UAAU,OAAO,QAAQ,UAAU,MAAM;CAC9C,KAAK,QAAQ,QAAQ;CACrB,KAAK,MAAM,cAAc;CACzB,KAAK,MAAM,kBAAkB,aAAa;CAC1C,IAAI,SAAS,SAAS,MACpB,SAAS,KAAK,MAAM,kBAAkB,aAAa;CAGrD,MAAM,QAAQ,CACZ,GAAG,SAAS,iBAAkC,4BAA0B,CAC1E;CACA,IAAI,MAAM,WAAW,GACnB,MAAM,KACJ,SAAS,KAAK,YACZ,OAAO,OAAO,SAAS,cAAc,MAAM,GAAG,EAAE,MAAM,cAAc,CAAC,CACvE,CACF;CAEF,KAAK,MAAM,QAAQ,OAAO,KAAK,UAAU,aAAa;CACtD,WAAW;AACb;AAEA,MAAa,mBAAmB,iBAC9B,gIAAgI,aAAa,0DAA0D,aAAa,KAAK,KAAK,aAAa,MAAM"}

package/dist/theme/index.d.ts

@@ -0,0 +1,4 @@
+import { THEME_COOKIE } from "./model.js";
+import { createTheme } from "./theme.js";
+import { themeFromCookies } from "./cookie.js";
+export { THEME_COOKIE, createTheme, themeFromCookies };

package/dist/theme/index.js

@@ -0,0 +1,4 @@
+import { THEME_COOKIE } from "./model.js";
+import { themeFromCookies } from "./cookie.js";
+import { createTheme } from "./theme.js";
+export { THEME_COOKIE, createTheme, themeFromCookies };

package/dist/theme/model.d.ts

@@ -0,0 +1,9 @@
+//#region src/theme/model.d.ts
+export type Theme = 'light' | 'dark';
+export declare const THEME_COOKIE = "kui-theme";
+export declare const DEFAULT_THEME: Theme;
+export declare const THEME_CHANGED = "kui-theme-change";
+export declare const THEME_COLORS: Record<Theme, string>;
+export declare const isTheme: (value: unknown) => value is Theme;
+//#endregion
+//# sourceMappingURL=model.d.ts.map

package/dist/theme/model.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"model.d.ts","names":[],"sources":["../../src/theme/model.ts"],"mappings":";YAAY;qBAEC;qBACA,eAAe;qBACf;qBACA,cAAc,OAAO;qBAKrB,UAAO,mBAAqB,SAAS"}

package/dist/theme/model.js

@@ -0,0 +1,13 @@
+//#region src/theme/model.ts
+const THEME_COOKIE = "kui-theme";
+const DEFAULT_THEME = "dark";
+const THEME_CHANGED = "kui-theme-change";
+const THEME_COLORS = {
+	light: "#ffffff",
+	dark: "#0a0a0a"
+};
+const isTheme = (value) => value === "light" || value === "dark";
+//#endregion
+export { DEFAULT_THEME, THEME_CHANGED, THEME_COLORS, THEME_COOKIE, isTheme };
+
+//# sourceMappingURL=model.js.map

package/dist/theme/model.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"model.js","names":[],"sources":["../../src/theme/model.ts"],"sourcesContent":["export type Theme = 'light' | 'dark';\n\nexport const THEME_COOKIE = 'kui-theme';\nexport const DEFAULT_THEME: Theme = 'dark';\nexport const THEME_CHANGED = 'kui-theme-change';\nexport const THEME_COLORS: Record<Theme, string> = {\n  light: '#ffffff',\n  dark: '#0a0a0a',\n};\n\nexport const isTheme = (value: unknown): value is Theme =>\n  value === 'light' || value === 'dark';\n"],"mappings":";AAEA,MAAa,eAAe;AAC5B,MAAa,gBAAuB;AACpC,MAAa,gBAAgB;AAC7B,MAAa,eAAsC;CACjD,OAAO;CACP,MAAM;AACR;AAEA,MAAa,WAAW,UACtB,UAAU,WAAW,UAAU"}

package/dist/theme/status-bar.d.ts

@@ -0,0 +1,10 @@
+//#region src/theme/status-bar.d.ts
+/**
+ * `color` paints it in place of the Theme's background, for an app whose top
+ * edge changes, such as a page that moves aside for a sidebar. Any CSS color.
+ */
+export declare function StatusBar(props: {
+  readonly color?: string;
+}): import("react").FunctionComponentElement<import("react").FragmentProps>;
+//#endregion
+//# sourceMappingURL=status-bar.d.ts.map

package/dist/theme/status-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-bar.d.ts","names":[],"sources":["../../src/theme/status-bar.ts"],"mappings":";;;;;wBAagB,UAAU;WAAkB;oBAAgB,yCAAA"}

package/dist/theme/status-bar.js

@@ -0,0 +1,19 @@
+import { THEME_COLORS } from "./model.js";
+import { Fragment, createElement } from "react";
+//#region src/theme/status-bar.ts
+const css = `[data-slot="status-bar"]{position:fixed;inset:0 0 auto;z-index:2147483647;pointer-events:none;height:env(safe-area-inset-top);background-color:light-dark(${THEME_COLORS.light},${THEME_COLORS.dark})}@media (display-mode:standalone){[data-slot="status-bar"]{height:max(12px,env(safe-area-inset-top))}}`;
+/**
+* `color` paints it in place of the Theme's background, for an app whose top
+* edge changes, such as a page that moves aside for a sidebar. Any CSS color.
+*/
+function StatusBar(props) {
+	return createElement(Fragment, null, createElement("style", null, css), createElement("div", {
+		"aria-hidden": true,
+		"data-slot": "status-bar",
+		style: props.color === void 0 ? void 0 : { backgroundColor: props.color }
+	}));
+}
+//#endregion
+export { StatusBar };
+
+//# sourceMappingURL=status-bar.js.map

package/dist/theme/status-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-bar.js","names":[],"sources":["../../src/theme/status-bar.ts"],"sourcesContent":["import { createElement, Fragment } from 'react';\nimport { THEME_COLORS } from './model.ts';\n\n// An installed iOS web app ignores a theme-color change made in place: it\n// tints the status bar from the opaque element at the top edge. This strip is\n// that element, above every layer, so a see-through scrim or drawer over the\n// top of the app can never change the status bar's color.\nconst css = `[data-slot=\"status-bar\"]{position:fixed;inset:0 0 auto;z-index:2147483647;pointer-events:none;height:env(safe-area-inset-top);background-color:light-dark(${THEME_COLORS.light},${THEME_COLORS.dark})}@media (display-mode:standalone){[data-slot=\"status-bar\"]{height:max(12px,env(safe-area-inset-top))}}`;\n\n/**\n * `color` paints it in place of the Theme's background, for an app whose top\n * edge changes, such as a page that moves aside for a sidebar. Any CSS color.\n */\nexport function StatusBar(props: { readonly color?: string }) {\n  return createElement(\n    Fragment,\n    null,\n    createElement('style', null, css),\n    createElement('div', {\n      'aria-hidden': true,\n      'data-slot': 'status-bar',\n      style:\n        props.color === undefined\n          ? undefined\n          : { backgroundColor: props.color },\n    }),\n  );\n}\n"],"mappings":";;;AAOA,MAAM,MAAM,6JAA6J,aAAa,MAAM,GAAG,aAAa,KAAK;;;;;AAMjN,SAAgB,UAAU,OAAoC;CAC5D,OAAO,cACL,UACA,MACA,cAAc,SAAS,MAAM,GAAG,GAChC,cAAc,OAAO;EACnB,eAAe;EACf,aAAa;EACb,OACE,MAAM,UAAU,KAAA,IACZ,KAAA,IACA,EAAE,iBAAiB,MAAM,MAAM;CACvC,CAAC,CACH;AACF"}

package/dist/theme/store.d.ts

@@ -0,0 +1,6 @@
+import { Theme } from "./model.js";
+//#region src/theme/store.d.ts
+export declare const useThemeValue: () => Theme;
+export declare const setThemeValue: (theme: Theme, cookieDomain?: string) => void;
+//#endregion
+//# sourceMappingURL=store.d.ts.map

package/dist/theme/store.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"store.d.ts","names":[],"sources":["../../src/theme/store.ts"],"mappings":";;qBAsDa,qBAAoB;qBAOpB,gBAAa,OAAW,OAAK"}

package/dist/theme/store.js

@@ -0,0 +1,45 @@
+import { DEFAULT_THEME, THEME_CHANGED } from "./model.js";
+import { applyThemeToDocument } from "./document.js";
+import { themeFromCookies, writeThemeCookie } from "./cookie.js";
+import { useSyncExternalStore } from "react";
+//#region src/theme/store.ts
+let current = DEFAULT_THEME;
+let listening = false;
+const listeners = /* @__PURE__ */ new Set();
+const readBrowserTheme = () => themeFromCookies(document.cookie);
+const publish = (theme, freeze = false) => {
+	current = theme;
+	applyThemeToDocument(theme, freeze);
+	for (const listener of listeners) listener();
+};
+const refresh = () => {
+	const theme = readBrowserTheme();
+	if (theme !== current) publish(theme);
+};
+const beginListening = () => {
+	if (listening || typeof window === "undefined") return;
+	listening = true;
+	current = readBrowserTheme();
+	applyThemeToDocument(current);
+	window.addEventListener(THEME_CHANGED, refresh);
+	window.addEventListener("focus", refresh);
+	document.addEventListener("visibilitychange", refresh);
+	window.cookieStore?.addEventListener("change", (event) => {
+		if ([...event.changed, ...event.deleted].some((cookie) => cookie.name === "kui-theme")) refresh();
+	});
+};
+const subscribe = (listener) => {
+	beginListening();
+	listeners.add(listener);
+	return () => listeners.delete(listener);
+};
+const useThemeValue = () => useSyncExternalStore(subscribe, () => current, () => DEFAULT_THEME);
+const setThemeValue = (theme, cookieDomain) => {
+	writeThemeCookie(theme, cookieDomain);
+	publish(theme, true);
+	window.dispatchEvent(new Event(THEME_CHANGED));
+};
+//#endregion
+export { setThemeValue, useThemeValue };
+
+//# sourceMappingURL=store.js.map