cursedbelt 0.0.0

package/dist/server/ws/types.d.ts

@@ -0,0 +1,123 @@
+import type { ServerWebSocket, WebSocketHandler } from 'bun';
+import type { MiddlewareHandler } from 'hono';
+import type { AuthUser } from '../auth/types';
+/**
+ * Shared types for the cursedbelt WebSocket hub.
+ *
+ * cursedbelt owns the *transport* — connection lifecycle, channel routing,
+ * heartbeat/stale-cull, presence-as-a-view, and an injected `authenticate`
+ * callback. The *channels* (what each message means, the per-feature game/chat
+ * state) stay app-business; an app registers its channels into the hub and
+ * consumes the broadcast helpers. ru's push-only variant is {@link EventBus}.
+ *
+ * Built on Bun's native WS upgrade (`Server.upgrade` + `Bun.serve { websocket }`),
+ * surfaced through Hono via {@link WsHub.upgradeHandler}. No `ws`-lib, no adapter.
+ */
+/** The JSON envelope every frame uses, both directions: `{ event, data }`. The hub
+ * emits this from {@link WsHub.broadcast}/`send`; channels receive the parsed inbound
+ * envelope as their `onMessage` payload. `T` narrows `data` for a typed channel. */
+export interface WsMessage<T = unknown> {
+    event: string;
+    data: T;
+}
+/** What the hub stashes on the Bun `ServerWebSocket.data` at upgrade time so `open`
+ * can register the client without a second handshake round-trip (see the gotcha in
+ * the task spec). `room` is the optional `?room=` query param — a named room within
+ * the channel, applied to {@link WsClient.meta} on connect. */
+export interface WsData {
+    clientId: string;
+    user: AuthUser;
+    channel: string;
+    room?: string;
+}
+/** The minimal view of the WS handshake handed to {@link WsHubOpts.authenticate}. The
+ * app reads its auth cookie off `headers` and verifies it (cursedbelt never reads the
+ * cookie itself — auth *model* is app business). */
+export interface WsHandshake {
+    headers: Headers;
+    url: string;
+    channel: string;
+    room?: string;
+}
+/** A live connection. `meta` is the per-channel scratch bag (room membership via the
+ * `room.ts` helpers, game seat, typing flag, …) — the hub never interprets it beyond
+ * {@link WsHub.broadcastToRoom}'s room match. `lastPingAt` is "last time we heard from
+ * this client" (an inbound message OR a pong); the heartbeat culls on it. */
+export interface WsClient {
+    id: string;
+    user: AuthUser;
+    ws: ServerWebSocket<WsData>;
+    channel: string;
+    connectedAt: number;
+    lastPingAt: number;
+    meta: Record<string, unknown>;
+}
+/** A business channel registered into the hub. The hub routes inbound frames to
+ * `onMessage` by {@link WsClient.channel} and fires the lifecycle hooks; everything
+ * the handler *does* (broadcast shape, game state, history) is app business. */
+export interface WsChannel<TMsg = WsMessage> {
+    name: string;
+    /** Fired after the client is registered (room meta already applied). */
+    onConnect?(client: WsClient, hub: WsHub): void;
+    /** Fired once per inbound frame (the parsed `{ event, data }` envelope). */
+    onMessage(client: WsClient, msg: TMsg, hub: WsHub): void;
+    /** Fired when the socket closes (explicit, stale-culled, or peer-dropped). */
+    onDisconnect?(client: WsClient, hub: WsHub): void;
+    /** Whether this channel contributes to {@link WsHub.getPresence}. Default: false. */
+    presence?: boolean;
+}
+/** A presence row — the public, business-safe view of a connected client. */
+export interface PresenceEntry {
+    userId: string;
+    connectedAt: number;
+}
+/** The presence snapshot for a channel: one row per live, presence-enabled client. */
+export type PresenceState = PresenceEntry[];
+export interface WsHubOpts<TChannelMap extends Record<string, WsChannel<any>>> {
+    /** The business channel registry, keyed by channel name (the `?channel=`/`:channel`
+     * the client connects to). */
+    channels: TChannelMap;
+    /** Cookie→user verification for the handshake. Return `null` to reject the upgrade
+     * with a 401 (an HTTP 401, not a WS close). */
+    authenticate(handshake: WsHandshake): Promise<AuthUser | null>;
+    /** How often the heartbeat pings live clients + sweeps stale ones. Default 30_000. */
+    heartbeatIntervalMs?: number;
+    /** A client unheard-from for longer than this is culled. Default 120_000 (2 min). */
+    staleMs?: number;
+}
+export interface WsHub {
+    /** The Bun `websocket` config — pass straight to `serveBun(app, { websocket: hub.handlers })`.
+     * `message` is required by Bun; `open`/`close`/`pong` drive lifecycle + liveness. */
+    handlers: WebSocketHandler<WsData>;
+    /** Mount on the Hono upgrade route(s): `app.get('/ws/:channel', hub.upgradeHandler)`.
+     * Authenticates, then calls `Server.upgrade` (Bun-native). */
+    upgradeHandler: MiddlewareHandler;
+    /** Send `{ event, data }` to every client on `channel`. */
+    broadcast(channel: string, event: string, data: unknown): void;
+    /** Send `{ event, data }` to every client on `channel` whose room (meta) is `roomId`. */
+    broadcastToRoom(channel: string, roomId: string, event: string, data: unknown): void;
+    /** Send `{ event, data }` to one client by id (no-op if gone). */
+    send(clientId: string, event: string, data: unknown): void;
+    /** Live clients, optionally filtered to one channel. */
+    getClients(channel?: string): WsClient[];
+    /** One client by id, or undefined. */
+    getClient(clientId: string): WsClient | undefined;
+    /** The presence snapshot for a presence-enabled channel (empty otherwise). */
+    getPresence(channel: string): PresenceState;
+    /** Stop the heartbeat timer (call on shutdown / in tests to avoid a leaked interval). */
+    close(): void;
+}
+/** ru's push-only subset: broadcast-to-all, no auth, no inbound routing. One bus,
+ * mounted once; ru's task queue / caSync / Forge workers call `broadcast`. */
+export interface EventBus {
+    /** Bun `websocket` config. `message` is a documented no-op (push-only). */
+    handlers: WebSocketHandler<EventBusData>;
+    upgradeHandler: MiddlewareHandler;
+    /** Push `{ event, data }` to every connected client. */
+    broadcast(event: string, data: unknown): void;
+    /** Number of connected clients. */
+    clientCount(): number;
+}
+/** The event bus carries no per-socket data (no auth, no channel). */
+export type EventBusData = Record<never, never>;
+//# sourceMappingURL=types.d.ts.map

package/dist/server/ws/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/server/ws/types.ts"],"names":[],"mappings":"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"}

package/dist/server/ws/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/server/ws/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/server/ws/types.ts"],"names":[],"mappings":""}

package/package.json

@@ -0,0 +1,241 @@
+{
+  "name": "cursedbelt",
+  "version": "0.0.0",
+  "private": false,
+  "type": "module",
+  "description": "Shared Bun + React framework",
+  "scripts": {
+    "typecheck": "tsc --noEmit && tsc --noEmit --project tsconfig.server.json",
+    "lint": "biome check .",
+    "format": "biome format --write .",
+    "test": "bun test src",
+    "demo": "cd demo && bun run dev",
+    "build": "tsc --project tsconfig.build.json && tsc --project tsconfig.build.server.json",
+    "e2e": "playwright test --config e2e/playwright.config.ts",
+    "done": "bun run typecheck && bun run lint && bun run test && bun run build",
+    "relink": "bun run scripts/relinkFirstParty.ts",
+    "postinstall": "bun run scripts/relinkFirstParty.ts"
+  },
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./react": {
+      "source": "./src/react/index.ts",
+      "types": "./dist/react/index.d.ts",
+      "import": "./dist/react/index.js"
+    },
+    "./react/scroll-area": {
+      "source": "./src/react/components/ScrollArea.tsx",
+      "types": "./dist/react/components/ScrollArea.d.ts",
+      "import": "./dist/react/components/ScrollArea.js"
+    },
+    "./react/button": {
+      "source": "./src/react/components/Button.tsx",
+      "types": "./dist/react/components/Button.d.ts",
+      "import": "./dist/react/components/Button.js"
+    },
+    "./react/charts": {
+      "source": "./src/react/charts/index.ts",
+      "types": "./dist/react/charts/index.d.ts",
+      "import": "./dist/react/charts/index.js"
+    },
+    "./react/spreadsheet": {
+      "source": "./src/react/spreadsheet/index.ts",
+      "types": "./dist/react/spreadsheet/index.d.ts",
+      "import": "./dist/react/spreadsheet/index.js"
+    },
+    "./react/media": {
+      "source": "./src/react/media/index.ts",
+      "types": "./dist/react/media/index.d.ts",
+      "import": "./dist/react/media/index.js"
+    },
+    "./react/media/mask-painter": {
+      "source": "./src/react/media/MaskPainter.tsx",
+      "types": "./dist/react/media/MaskPainter.d.ts",
+      "import": "./dist/react/media/MaskPainter.js"
+    },
+    "./media-core": {
+      "source": "./src/core/media/index.ts",
+      "types": "./dist/core/media/index.d.ts",
+      "import": "./dist/core/media/index.js"
+    },
+    "./server/media": {
+      "source": "./src/server/media-bun/index.ts",
+      "types": "./dist/server/media-bun/index.d.ts",
+      "import": "./dist/server/media-bun/index.js"
+    },
+    "./nav": {
+      "source": "./src/core/navigation/index.ts",
+      "types": "./dist/core/navigation/index.d.ts",
+      "import": "./dist/core/navigation/index.js"
+    },
+    "./palette": {
+      "source": "./src/core/palette/index.ts",
+      "types": "./dist/core/palette/index.d.ts",
+      "import": "./dist/core/palette/index.js"
+    },
+    "./layout": {
+      "source": "./src/core/layout/index.ts",
+      "types": "./dist/core/layout/index.d.ts",
+      "import": "./dist/core/layout/index.js"
+    },
+    "./game": {
+      "source": "./src/game/core/index.ts",
+      "types": "./dist/game/core/index.d.ts",
+      "import": "./dist/game/core/index.js"
+    },
+    "./game/react": {
+      "source": "./src/game/react/index.ts",
+      "types": "./dist/game/react/index.d.ts",
+      "import": "./dist/game/react/index.js"
+    },
+    "./server": {
+      "source": "./src/server/index.ts",
+      "types": "./dist/server/index.d.ts",
+      "import": "./dist/server/index.js"
+    },
+    "./ctgr": {
+      "source": "./src/ctgr/index.ts",
+      "types": "./dist/ctgr/index.d.ts",
+      "import": "./dist/ctgr/index.js"
+    },
+    "./client": {
+      "source": "./src/client/index.ts",
+      "types": "./dist/client/index.d.ts",
+      "import": "./dist/client/index.js"
+    },
+    "./styles.css": "./src/styles.css",
+    "./theme.css": "./src/theme.css"
+  },
+  "files": [
+    "dist",
+    "src/styles.css",
+    "src/theme.css"
+  ],
+  "peerDependencies": {
+    "@glideapps/glide-data-grid": ">=6",
+    "@tanstack/react-query": ">=5",
+    "@tanstack/react-virtual": ">=3",
+    "@vidstack/react": ">=1",
+    "mediabunny": ">=1",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "react-filerobot-image-editor": ">=5.0.0-beta",
+    "react-photo-album": ">=3",
+    "recharts": ">=3",
+    "sharp": ">=0.33",
+    "yet-another-react-lightbox": ">=3",
+    "zod": "^4.4.0"
+  },
+  "peerDependenciesMeta": {
+    "@glideapps/glide-data-grid": {
+      "optional": true
+    },
+    "@tanstack/react-query": {
+      "optional": true
+    },
+    "@tanstack/react-virtual": {
+      "optional": true
+    },
+    "@vidstack/react": {
+      "optional": true
+    },
+    "mediabunny": {
+      "optional": true
+    },
+    "react-filerobot-image-editor": {
+      "optional": true
+    },
+    "react-photo-album": {
+      "optional": true
+    },
+    "recharts": {
+      "optional": true
+    },
+    "sharp": {
+      "optional": true
+    },
+    "yet-another-react-lightbox": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^2.5.0",
+    "@glideapps/glide-data-grid": "^6.0.3",
+    "@happy-dom/global-registrator": "^20.10.6",
+    "@playwright/test": "^1.61.0",
+    "@tanstack/react-query": "^5.69.0",
+    "@tanstack/react-virtual": "^3.14.3",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/bun": "^1.3.14",
+    "@types/papaparse": "^5.5.2",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "@vidstack/react": "1.15.6",
+    "konva": "^10.3.0",
+    "mediabunny": "^1.49.0",
+    "react-filerobot-image-editor": "5.0.0-beta.159",
+    "react-konva": "^19.2.5",
+    "react-photo-album": "^3.6.0",
+    "recharts": "^3.8.1",
+    "sharp": "^0.35.2",
+    "styled-components": "^6.4.2",
+    "tailwindcss": "^4.3.1",
+    "typescript": "^6.0.3",
+    "yet-another-react-lightbox": "^3.32.0",
+    "zod": "^4.4.3"
+  },
+  "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@emoji-mart/data": "^1.2.1",
+    "@emoji-mart/react": "^1.1.1",
+    "@floating-ui/react": "^0.27.19",
+    "@hookform/resolvers": "^5.4.0",
+    "@leeoniya/ufuzzy": "^1.0.19",
+    "@radix-ui/react-accordion": "^1.2.14",
+    "@radix-ui/react-checkbox": "^1.3.5",
+    "@radix-ui/react-collapsible": "^1.1.14",
+    "@radix-ui/react-dialog": "^1.1.17",
+    "@radix-ui/react-dropdown-menu": "^2.1.18",
+    "@radix-ui/react-hover-card": "^1.1.17",
+    "@radix-ui/react-label": "^2.1.10",
+    "@radix-ui/react-navigation-menu": "^1.2.16",
+    "@radix-ui/react-popover": "^1.1.17",
+    "@radix-ui/react-progress": "^1.1.10",
+    "@radix-ui/react-scroll-area": "^1.2.12",
+    "@radix-ui/react-select": "^2.3.1",
+    "@radix-ui/react-separator": "^1.1.10",
+    "@radix-ui/react-slot": "^1.3.0",
+    "@radix-ui/react-switch": "^1.3.1",
+    "@radix-ui/react-tabs": "^1.1.15",
+    "@radix-ui/react-toast": "^1.2.17",
+    "@radix-ui/react-tooltip": "^1.2.10",
+    "@tanstack/react-table": "^8.21.3",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "cwip": "^2.7.0",
+    "emoji-mart": "^5.6.0",
+    "hono": "^4.12.26",
+    "jose": "^6.2.3",
+    "kysely": "^0.28.17",
+    "kysely-bun-sqlite": "^0.4.0",
+    "lucide-react": "^1.21.0",
+    "otplib": "^13.4.1",
+    "papaparse": "^5.5.4",
+    "partysocket": "^1.2.0",
+    "plainjob": "^0.0.14",
+    "react-hook-form": "^7.80.0",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.6.0",
+    "tw-animate-css": "^1.4.0",
+    "zustand": "^5.0.14"
+  }
+}

package/src/styles.css

@@ -0,0 +1,52 @@
+/*
+ * cursedbelt component-class source registration.
+ * Consuming apps import (after `@import "tailwindcss";`):
+ *   @import "cursedbelt/styles.css";
+ *   @import "cursedbelt/theme.css";
+ * This `@source` makes Tailwind v4 scan cursedbelt's source files so the utility
+ * classes used by its components are generated in the app's stylesheet.
+ */
+
+/* Animation utilities (animate-in/out, fade/zoom/slide-in-from-*) consumed by the
+   floating layer's FLOATING_ANIMATION and the modal/overlay family — the Tailwind v4
+   successor to tailwindcss-animate. Imported here so every consuming app inherits the
+   enter/exit motion with no per-app wiring. Lands after `@import "tailwindcss"` since
+   apps import this file after Tailwind. */
+@import "tw-animate-css";
+
+@source ".";
+
+/*
+ * Media subsystem (task 19) theme bridge — map the design tokens onto the CSS custom
+ * properties of yet-another-react-lightbox so the lightbox reads as part of the app
+ * (and its backdrop tracks light/dark instead of staying a fixed black). The doubled
+ * `.yarl__root.yarl__root` selector outranks YARL's own `.yarl__root` defaults no
+ * matter the stylesheet load order. The lightbox is an always-dark overlay, so the
+ * controls stay light; only the surfaces + accents derive from tokens.
+ */
+.yarl__root.yarl__root {
+  --yarl__color_backdrop: color-mix(in srgb, #000 90%, var(--background));
+  --yarl__color_button: rgb(255 255 255 / 0.78);
+  --yarl__color_button_active: #ffffff;
+  --yarl__color_button_disabled: rgb(255 255 255 / 0.35);
+  --yarl__slide_icon_loading_color: var(--accent);
+  --yarl__slide_icon_error_color: var(--destructive);
+  --yarl__counter_color: rgb(255 255 255 / 0.75);
+
+  /* Thumbnails strip → token surfaces + accent active border. */
+  --yarl__thumbnails_container_background_color: transparent;
+  --yarl__thumbnails_thumbnail_background: var(--card-overlay);
+  --yarl__thumbnails_thumbnail_border_color: var(--border-strong);
+  --yarl__thumbnails_thumbnail_active_border_color: var(--accent-solid);
+  --yarl__thumbnails_thumbnail_border_radius: var(--radius-md);
+  --yarl__thumbnails_thumbnail_icon_color: #ffffff;
+
+  /* Captions → translucent token-tinted bar. */
+  --yarl__slide_captions_container_background: color-mix(
+    in srgb,
+    var(--background) 55%,
+    transparent
+  );
+  --yarl__slide_title_color: #ffffff;
+  --yarl__slide_description_color: rgb(255 255 255 / 0.8);
+}

package/src/theme.css

@@ -0,0 +1,239 @@
+/*
+ * cursedbelt design tokens — the single source of truth for every visual decision
+ * across the apps. Every component reads a semantic token (never a raw Tailwind
+ * color or `emerald-*` literal), so light/dark is automatic and a rebrand is a
+ * one-token change at the app layer.
+ *
+ * Two-token accent model (the critical split):
+ *   --accent / --accent-hover              mode-following → text, links, lines, focus ring
+ *   --accent-solid / --accent-solid-hover  saturated → solid fills (primary buttons, active indicators)
+ * Mode-following lightens in dark so it reads as text; solid stays saturated in
+ * both modes so white text always has contrast on it.
+ *
+ * Apps rebrand by overriding ONLY the four accent tokens in their CSS, AFTER
+ * importing this file (ca = emerald — this file's default; ru = violet).
+ *
+ * Dark mode: add the `.dark` class to a root element (the theme toggle controls it).
+ * The consuming app declares the variant once with
+ *   @custom-variant dark (&:where(.dark, .dark *));
+ * so `dark:` utilities key off the class, not the OS media query.
+ */
+
+:root {
+  /* ---- Keyboard inset default (useKeyboardInset writes the live value) ----- */
+  /* Declared here so calc()/var() expressions resolve to 0px before the hook
+     runs (SSR hydration, or when VisualViewport is absent) — never `undefined`. */
+  --keyboard-inset: 0px;
+
+  /* ---- Accent (ca default: emerald; apps override these four only) -------- */
+  --accent: #059669;
+  --accent-hover: #047857;
+  --accent-solid: #059669;
+  --accent-solid-hover: #10b981;
+
+  /* ---- Semantic surface palette ------------------------------------------ */
+  --background: #ffffff;
+  --foreground: #111827;
+  --surface: #ffffff;
+  --card: #ffffff;
+  --card-foreground: #111827;
+  /* Elevated card backgrounds for Surface raised/overlay. In light mode every
+     surface is white and elevation reads through shadow, so these match --card;
+     dark mode lifts them (below) so depth reads through a lighter bg, not a shadow. */
+  --card-raised: #ffffff;
+  --card-overlay: #ffffff;
+  --popover: #ffffff;
+  --popover-foreground: #111827;
+  --muted: #f3f4f6;
+  --muted-foreground: #6b7280;
+  --border: #e5e7eb;
+  --border-strong: #d1d5db;
+
+  /* ---- Semantic status --------------------------------------------------- */
+  --destructive: #dc2626;
+  --destructive-foreground: #ffffff;
+  --success: #16a34a;
+  --warning: #d97706;
+  --ring: var(--accent);
+
+  /* ---- Form field-style tokens (one indirection layer) ------------------- */
+  /* Every text control — Input, Textarea, Select, Tags, Secret, Color, Code,
+     MultiSelect — reads ONLY these (via FIELD_CLASS / the field-* utilities), so
+     restyling every form control app-wide is a change to THIS block alone: an app
+     can retheme just its inputs (bg / border / radius) without touching the global
+     --background or --border. They default to the semantic tokens, so a control
+     matches the surface it sits on out of the box, and they follow light/dark for
+     free (each resolves to a token that already flips). --field-error drives the
+     invalid state (border + ring) wired by Field's aria-invalid. */
+  --field-bg: var(--background);
+  --field-border: var(--border);
+  --field-ring: var(--ring);
+  --field-radius: var(--radius-md);
+  --field-fg: var(--foreground);
+  --field-placeholder: var(--muted-foreground);
+  --field-error: var(--destructive);
+
+  /* ---- Chart series palette (8 categorical hues) -------------------------- */
+  /* chart-1 tracks the accent so single-series charts re-color with the brand
+     (ca emerald / ru violet) for free — apps still override only the four accent
+     tokens. The rest are a fixed, legible categorical ramp tuned for the light bg.
+     Read by useChartTokens (cursedbelt/react/charts) off the chart's own element,
+     so dark + accent scopes cascade correctly. */
+  --chart-1: var(--accent);
+  --chart-2: #0ea5e9; /* sky */
+  --chart-3: #f59e0b; /* amber */
+  --chart-4: #8b5cf6; /* violet */
+  --chart-5: #ec4899; /* pink */
+  --chart-6: #14b8a6; /* teal */
+  --chart-7: #ef4444; /* red */
+  --chart-8: #6366f1; /* indigo */
+
+  /* ---- Elevation shadows (light leans on shadow) ------------------------- */
+  --shadow-raised: 0 1px 2px rgb(0 0 0 / 0.06);
+  --shadow-overlay: 0 10px 30px -5px rgb(0 0 0 / 0.18);
+  --shadow-popover: 0 16px 40px -8px rgb(0 0 0 / 0.25);
+}
+
+.dark {
+  /* mode-following accent lightens in dark so it reads as text/line (not a fill) */
+  --accent: #34d399;
+  --accent-hover: #6ee7b7;
+  /* solid accent stays saturated in dark — white text must sit on it */
+  --accent-solid: #059669;
+  --accent-solid-hover: #10b981;
+
+  --background: #030712;
+  --foreground: #f9fafb;
+  --surface: #0b1220;
+  --card: #0b1220;
+  --card-foreground: #f9fafb;
+  /* Elevation reads through the bg here: flat (--surface #0b1220) < raised
+     (--card-raised) < overlay (--card-overlay), each a step lighter than the last
+     above the near-black --background (#030712). Shadows are near-invisible on
+     black, so the lighter bg + stronger border carry the depth. */
+  --card-raised: #0f1929;
+  --card-overlay: #16213a;
+  --popover: #111827;
+  --popover-foreground: #f9fafb;
+  --muted: #1f2937;
+  --muted-foreground: #9ca3af;
+  --border: #1f2937;
+  --border-strong: #374151;
+
+  --destructive: #ef4444;
+  --destructive-foreground: #ffffff;
+  --success: #22c55e;
+  --warning: #f59e0b;
+  --ring: var(--accent);
+
+  /* dark: lift the categorical ramp so each hue stays legible on the near-black
+     bg (chart-1 follows --accent, which already lightens in dark above). */
+  --chart-1: var(--accent);
+  --chart-2: #38bdf8; /* sky */
+  --chart-3: #fbbf24; /* amber */
+  --chart-4: #a78bfa; /* violet */
+  --chart-5: #f472b6; /* pink */
+  --chart-6: #2dd4bf; /* teal */
+  --chart-7: #f87171; /* red */
+  --chart-8: #818cf8; /* indigo */
+
+  /* dark: shadows are near-invisible on black, so elevation reads through the
+     lighter surface/card/popover backgrounds + stronger borders above; the
+     shadow itself is darkened only as a faint anchor. */
+  --shadow-raised: 0 1px 2px rgb(0 0 0 / 0.4);
+  --shadow-overlay: 0 10px 30px -5px rgb(0 0 0 / 0.6);
+  --shadow-popover: 0 16px 40px -8px rgb(0 0 0 / 0.7);
+}
+
+/*
+ * @theme inline — bridges the CSS vars above into Tailwind v4 utility classes.
+ * `inline` keeps the utilities referencing the live vars (rather than snapshotting
+ * a value), so one class is correct in light + dark + any accent variant. Consuming
+ * apps write bg-background, text-foreground, border-border, text-accent,
+ * bg-accent-solid, shadow-raised, rounded-lg, text-h1, etc.
+ */
+@theme inline {
+  /* Surfaces */
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-surface: var(--surface);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  /* bg-card-raised / bg-card-overlay → Surface's dark-mode elevation backgrounds */
+  --color-card-raised: var(--card-raised);
+  --color-card-overlay: var(--card-overlay);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-border: var(--border);
+  --color-border-strong: var(--border-strong);
+
+  /* Accent (two-token: mode-following text/line + saturated solid fill) */
+  --color-accent: var(--accent);
+  --color-accent-hover: var(--accent-hover);
+  --color-accent-solid: var(--accent-solid);
+  --color-accent-solid-hover: var(--accent-solid-hover);
+
+  /* Semantic status */
+  --color-ring: var(--ring);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-success: var(--success);
+  --color-warning: var(--warning);
+
+  /* Form field-style → bg-field-bg / border-field-border / ring-field-ring /
+     text-field-fg / placeholder:text-field-placeholder / border-field-error /
+     rounded-field utilities. The single source every input/select/textarea reads
+     (FIELD_CLASS); `inline` keeps them tracking light/dark + any app field override
+     live. text-field-fg is the control TEXT color — distinct from text-field, the
+     16px no-zoom font-SIZE utility below. */
+  --color-field-bg: var(--field-bg);
+  --color-field-border: var(--field-border);
+  --color-field-ring: var(--field-ring);
+  --color-field-fg: var(--field-fg);
+  --color-field-placeholder: var(--field-placeholder);
+  --color-field-error: var(--field-error);
+  --radius-field: var(--field-radius);
+
+  /* Chart series → bg-chart-1 … text-chart-8 utilities (follow light/dark + accent
+     live). useChartTokens reads the raw --chart-N vars off the chart element; these
+     `--color-` aliases just make the same ramp available as Tailwind utilities. */
+  --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);
+
+  /* Radius scale (larger surface → larger radius, reinforcing elevation) */
+  --radius-sm: 0.375rem; /* chips */
+  --radius-md: 0.5rem; /* inputs, buttons */
+  --radius-lg: 1rem; /* cards */
+  --radius-xl: 1.5rem; /* modals */
+
+  /* Elevation shadows → shadow-raised / shadow-overlay / shadow-popover utilities.
+     The names match the :root vars above; `inline` references them live so the
+     utility follows light/dark with no `dark:` variant. */
+  --shadow-raised: var(--shadow-raised);
+  --shadow-overlay: var(--shadow-overlay);
+  --shadow-popover: var(--shadow-popover);
+
+  /* Motion — one easing, three speeds (all respect prefers-reduced-motion at use) */
+  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --duration-fast: 120ms; /* hover / press */
+  --duration-base: 200ms; /* popover */
+  --duration-slow: 300ms; /* modal */
+
+  /* Fluid typography — headings only (fluid body text causes line-length drift).
+     Exposed as text-h1 / text-h2 / text-h3 font-size utilities. */
+  --text-h1: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
+  --text-h2: clamp(1.25rem, 1.1rem + 0.8vw, 1.5rem);
+  --text-h3: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
+
+  /* Field text: 16px on mobile = no iOS focus-zoom (the no-zoom rule as a token).
+     Exposed as the text-field font-size utility. */
+  --text-field: 1rem;
+}