@pebble-software/bonsai 0.0.3 → 0.0.4

package/README.md

@@ -1,15 +1,7 @@
 # @pebble-software/bonsai
 
-[![npm version](https://img.shields.io/npm/v/%40pebble-software%2Fbonsai)](https://www.npmjs.com/package/@pebble-software/bonsai)
-[![status: preview](https://img.shields.io/badge/status-preview-orange)](https://github.com/PebbleSoftwareInc/pebble-bonsai)
-[![react](https://img.shields.io/badge/react-18%20%7C%2019-61dafb)](https://react.dev)
-
-> ⚠️ **Active development / preview** — this package is pre-1.0 and evolving quickly. APIs, the configuration schema, and the component set may change between releases without a deprecation cycle. Pin an exact version and read release notes before upgrading. Feedback and issues are very welcome!
-
 The React runtime that turns a validated Bonsai configuration into a fully interactive, styled experience. It's built for UI that has to be delivered remotely (email, SMS, embedded experiences) but rendered locally with real React components, consistent styling, and predictable data flow.
 
-Bonsai is the rendering engine behind [Pebble Bonsai](https://github.com/PebbleSoftwareInc/pebble-bonsai), an open-source form and signature service — but the renderer is useful anywhere you need to ship UI as data: define a screen as a JSON template, bind it to your data with `{{ }}` expressions, and let one component render it on the server (SSR, PDF) or in the browser (fully interactive).
-
 ## Table of contents
 
 - [Features](#features)
@@ -28,31 +20,26 @@ Bonsai is the rendering engine behind [Pebble Bonsai](https://github.com/PebbleS
 
 ## Features
 
-- **Schema-driven UI** — every screen is a Zod-validated `Config` tree, so the renderer only ever processes known-safe structures.
-- **Universal rendering** — one component (`Bonsai`) picks server (SSR) or client (interactive) rendering automatically based on environment, with `web`, `pdf`, and `preview` render modes.
+- **Schema-driven UI** — every screen is a Zod-validated `Config` tree from `@bonsai/schemas`, so the renderer only ever processes known-safe structures.
+- **Universal rendering** — one component (`Bonsai`) picks server (SSR) or client (interactive) rendering automatically based on environment.
 - **Composable components** — schema component identifiers map to real React implementations via a `componentMap`, so the same schema can target different component sets.
 - **Isolated per-instance state** — each mounted `Bonsai` tree owns its own `valtio` store, scoped via React context. Nothing about which data renders lives in shared or module-level state.
 - **Fine-grained reactivity** — every leaf node reads the store itself and evaluates only its own bindings, so editing one field re-renders just that field and whatever depends on it.
 - **Structural nodes** — `each` and `if` handle looping and conditional rendering directly in the schema, with two-way binding preserved inside loops.
 - **Sandboxed expression language** — `{{ }}` bindings are evaluated by a small, fixed-surface formula language, never executable JavaScript.
-- **Tailwind CSS v4 design system** — a themeable token set (colors, typography, spacing, shadows) drives every component, and templates can layer on any Tailwind utility via `className`.
+- **Tailwind CSS v4** theme with a `bonsai:` prefix to avoid collisions with a host app's own styles.
 
 ## Installation
 
 ```bash
-npm install @pebble-software/bonsai
-# or
 pnpm add @pebble-software/bonsai
-# or
-yarn add @pebble-software/bonsai
 ```
 
-Peer dependencies:
+Peer expectations:
 
-- `react` and `react-dom` 18 or 19
+- React 18 or newer
 - A bundler that understands ES modules (Vite, Next, Rspack, etc.)
-
-> **Preview note:** while the package is pre-1.0, pin an exact version (`npm install @pebble-software/bonsai --save-exact`) — minor releases may contain breaking changes.
+- Tailwind CSS support if you intend to merge or override Bonsai styles
 
 ### Working in this monorepo
 
@@ -61,7 +48,7 @@ pnpm install
 pnpm --filter @pebble-software/bonsai run build
 ```
 
-The shared workspaces (`@bonsai/constants`, `@bonsai/schemas`) are aliased to their sources and bundled directly into `dist/` by Vite, so downstream consumers only ever install this one package.
+The build script compiles the shared workspaces (`@bonsai/constants`, `@bonsai/schemas`) before bundling this package with Vite.
 
 ## Quick start
 
@@ -70,7 +57,7 @@ import { Bonsai, type Config } from "@pebble-software/bonsai";
 
 const template: Config = {
   type: "card",
-  args: { className: "p-6 flex flex-col gap-4" },
+  args: { className: "bonsai:p-6 bonsai:flex bonsai:flex-col bonsai:gap-4" },
   children: [
     {
       type: "label",
@@ -111,7 +98,7 @@ export function Example() {
 | `useUpdateData()` | hook | Returns an `updateData(path, value)` function bound to the nearest `Bonsai` instance's store. Must be called from a component mounted inside it. |
 | `componentMap` | object | Maps schema component identifiers to React implementations. |
 | `controlledInputMap` | object | Defines how specific component types behave as controlled inputs (value prop, change handler, value extractor). |
-| `Config` | type | Runtime type describing a Bonsai node. |
+| `Config` | type | Runtime type describing a Bonsai node, re-exported from `@bonsai/schemas`. |
 | `SignatureProps` | type | Props contract for the built-in signature capture component. |
 
 `Bonsai` accepts:
@@ -127,14 +114,11 @@ interface BonsaiProps {
 }
 ```
 
-- `render: "web"` (default) mounts the tree inside a `<form>` whose submit handler POSTs the captured data to `captureUrl`. `"preview"` renders the same form UI flagged with `data-mode="preview"` for host styling. `"pdf"` renders a plain `<div>` wrapper with no form — the layout used for print/PDF output.
-- `status` other than `"pending"` disables capture: the submit handler no-ops instead of POSTing.
-
 Each mounted instance owns its own store — there's no shared module-level state and no global `updateData`; `useUpdateData()` is the only way to reach a given instance's data, and only from within its subtree.
 
 ## Configuration schema
 
-The schema is defined in [`library/schemas/src/bonsai.schema.ts`](https://github.com/PebbleSoftwareInc/pebble-bonsai/blob/main/library/schemas/src/bonsai.schema.ts) and exported as `Config`.
+The schema is defined in `@bonsai/schemas/src/bonsai.schema.ts` and exported as `Config`.
 
 - **Node shape**: each node is either a string literal (rendered directly, and itself eligible for `{{ }}` bindings) or an object with:
   - `type`: a value from `COMPONENT` (see [Component reference](#component-reference)), including the structural `each` and `if` types (see [Structural nodes](#structural-nodes-each--if)).
@@ -151,21 +135,18 @@ Example node:
   "args": {
     "id": "terms",
     "checked": "{{agreements.terms}}",
-    "className": "mt-4"
+    "className": "bonsai:mt-4"
   },
   "children": ["I agree to the terms"]
 }
 ```
 
-Complete example templates live in the repo's [`examples/`](https://github.com/PebbleSoftwareInc/pebble-bonsai/tree/main/examples) directory, including a kitchen-sink template that exercises every component type.
-
 ## Dynamic data binding
 
 - Use `{{ }}` to declare bindings. A binding must span the *entire* string value — `"{{a}}"` is evaluated, `"{{a}} of {{b}}"` is not (put each placeholder in its own child/string instead). Whitespace inside `{{ }}` is trimmed automatically.
 - Paths support dot notation (`user.email`) and array indexing (`addresses[0].street`).
 - Missing keys resolve to `undefined`; use the `default(value, fallback)` helper for a fallback inline, or handle defaults in host data.
 - Any `args` prop or string child can contain a binding.
-- Besides your own `data`, the instance's top-level state fields — `status`, `expiry`, and `submitting` — are readable from bindings too (e.g. an `if` on `{{submitting}}`).
 - Inside an `each` row, an identifier resolves against the loop alias first (e.g. `applicant.name`), then falls back to the surrounding data for anything the alias doesn't shadow (e.g. `orgName` from outside the loop) — see [Structural nodes](#structural-nodes-each--if).
 - On the client, evaluating a node's bindings is also what subscribes that node to the store — see [Controlled inputs & state](#controlled-inputs--state).
 
@@ -282,7 +263,7 @@ Allowlisted methods: `map`, `filter`, `some`, `every`, `find`. Anything else —
 
 ## Component reference
 
-The full, authoritative list of component types is the `COMPONENT` enum in `@bonsai/constants` ([`library/constants/src/components.ts`](https://github.com/PebbleSoftwareInc/pebble-bonsai/blob/main/library/constants/src/components.ts)) — `componentMap` (`src/lib/ui/registry.ts`) has an entry for every value in it.
+The full, authoritative list of component types is the `COMPONENT` enum in `@bonsai/constants` (`library/constants/src/components.ts`) — `componentMap` (`src/lib/ui/registry.ts`) has an entry for every value in it.
 
 | Category | Schema types |
 | --- | --- |
@@ -299,12 +280,10 @@ Controlled inputs (registered in `controlledInputMap` — `input`, `otp`, `check
 
 ## Styling
 
-Bonsai is styled with **Tailwind CSS v4**. Components emit plain Tailwind utility classes, and templates can pass any additional utilities through `className` on any node.
-
-- The design system lives in [`src/index.css`](https://github.com/PebbleSoftwareInc/pebble-bonsai/blob/main/apps/bonsai/src/index.css): an `@theme` token set (an OKLCH color palette with swappable accent colors, typography, shadows) plus base and utility layers, custom fonts (Sora, Fredoka, and Great Vibes for signatures) loaded via `@font-face`, and style overrides for the embedded map (MapLibre) and chart (Recharts) widgets.
-- Every rendered tree is wrapped in a `.bonsai-root` element carrying a `data-mode` attribute (`web` / `pdf` / `preview`), so hosts can scope their own overrides per render mode.
-- **Getting the stylesheet**: inside the Pebble Bonsai platform, CSS is compiled per-template at form-creation time — only the classes a template actually uses are emitted. When consuming this package standalone, compile the styles with your own Tailwind v4 build: import the Bonsai theme and add the package (and your template sources) as content via `@source` so the utilities your templates reference are generated. A prebuilt, ready-to-import stylesheet export is planned while the packaging story stabilizes during the preview period.
-- **Theming**: the theme is token-driven — redefine the CSS variables (e.g. `--color-main`, `--font-heading`) after the theme to restyle every component at once, or target `.bonsai-root` descendants for finer overrides.
+- Tailwind CSS v4 is bundled with a `bonsai:` prefix to avoid class collisions. Host applications can safely include their own Tailwind build.
+- `src/index.css` registers all theme tokens (colors, spacing, shadows, fonts) and safelists commonly generated utility classes.
+- Custom fonts (e.g. for signatures) are declared locally and loaded via `@font-face`.
+- To override styling, supply a `className` through the schema or wrap Bonsai components in host containers.
 
 ## Extending Bonsai
 
@@ -316,17 +295,14 @@ Bonsai is styled with **Tailwind CSS v4**. Components emit plain Tailwind utilit
 2. **Custom data handling**:
    - Use `useUpdateData()` from a component mounted inside a `Bonsai` instance's subtree for simple mutations.
 3. **Alternate styling**:
-   - Redefine the theme's CSS variables before mounting Bonsai — see [Styling](#styling).
+   - Tailwind tokens can be overridden by redefining CSS variables before mounting Bonsai.
 
 ## Development
 
-Issues and pull requests are welcome at [PebbleSoftwareInc/pebble-bonsai](https://github.com/PebbleSoftwareInc/pebble-bonsai). This package lives at `apps/bonsai` in the monorepo.
-
 ```bash
-pnpm lint        # Static analysis using ESLint
-pnpm test        # Run the test suite (vitest)
-pnpm type-check  # TypeScript without emit
-pnpm build       # Bundles dist/ (ESM + type declarations) via Vite
+pnpm lint   # Static analysis using ESLint
+pnpm test   # Run the test suite (vitest)
+pnpm build  # Builds dependencies then bundles dist/ via Vite
 ```
 
-`dist/` contains the ESM bundle and TypeScript declarations consumed by downstream applications. The shared `@bonsai/constants` and `@bonsai/schemas` workspaces are bundled in, so the published package has no workspace dependencies.
+`dist/` contains the ESM bundle and TypeScript declarations consumed by downstream applications.

package/dist/index.css

@@ -0,0 +1,453 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+/* --- Fonts --- */
+@font-face {
+  font-family: "Great Vibes";
+  src: url("https://brand.pebble.software/fonts/GreatVibes-Regular.ttf")
+    format("truetype");
+  font-weight: auto;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Sora";
+  src: url("https://brand.pebble.software/fonts/Sora-VariableFont_wght.ttf")
+    format("truetype");
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Fredoka";
+  src: url("https://brand.pebble.software/fonts/Fredoka-VariableFont_wdth,wght.ttf")
+    format("truetype");
+  font-weight: 300 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@theme {
+  /* --- Typography --- */
+  --font-body: "Sora", ui-sans-serif, system-ui, sans-serif;
+  --font-heading: "Fredoka", ui-monospace, monospace;
+  --font-signature: "Great Vibes", cursive;
+  --font-weight-base: 400;
+  --font-weight-heading: 600;
+
+  /* --- Core Colors (Default - Emerald) --- */
+  --color-main: var(--color-accent-emerald);
+  --color-main-secondary: var(--color-accent-emerald-secondary);
+  --color-main-foreground: oklch(0% 0 0);
+
+  --color-background: var(--color-white);
+  --color-foreground: oklch(0% 0 0);
+  --color-surface: oklch(100% 0 0);
+  --color-muted: oklch(0% 0 0 / 0.65);
+  --color-subtle: oklch(0% 0 0 / 0.5);
+
+  --color-border: oklch(0% 0 0);
+  --color-ring: oklch(0% 0 0);
+  --color-overlay: oklch(0% 0 0 / 0.8);
+
+  /* --- Accent Palette --- */
+  --color-accent-red: oklch(67.28% 0.2147 24.22);
+  --color-accent-red-secondary: oklch(93.3% 0.0339 17.77);
+
+  --color-accent-orange: oklch(72.27% 0.1894 50.19);
+  --color-accent-orange-secondary: oklch(95.38% 0.0357 72.89);
+
+  --color-accent-amber: oklch(84.08% 0.1725 84.2);
+  --color-accent-amber-secondary: oklch(96% 0.04 85);
+
+  --color-accent-yellow: oklch(86.03% 0.176 92.36);
+  --color-accent-yellow-secondary: oklch(96.79% 0.0654 102.26);
+
+  --color-accent-lime: oklch(83.29% 0.2331 132.51);
+  --color-accent-lime-secondary: oklch(95.37% 0.0549 125.19);
+
+  --color-accent-green: oklch(79.76% 0.2044 153.08);
+  --color-accent-green-secondary: oklch(96.47% 0.0401 157.79);
+
+  --color-accent-emerald: oklch(77.54% 0.1681 162.78);
+  --color-accent-emerald-secondary: oklch(95.31% 0.0496 169.04);
+
+  --color-accent-teal: oklch(78.57% 0.1422 180.36);
+  --color-accent-teal-secondary: oklch(95.08% 0.0481 184.07);
+
+  --color-accent-cyan: oklch(76.89% 0.139164 219.13);
+  --color-accent-cyan-secondary: oklch(94.61% 0.043 211.12);
+
+  --color-accent-sky: oklch(66.9% 0.18368 248.8066);
+  --color-accent-sky-secondary: oklch(94.27% 0.0268 242.57);
+
+  --color-accent-blue: oklch(67.47% 0.1726 259.49);
+  --color-accent-blue-secondary: oklch(93.46% 0.0305 255.11);
+
+  --color-accent-indigo: oklch(66.34% 0.1806 277.2);
+  --color-accent-indigo-secondary: oklch(92.13% 0.0388 282.36);
+
+  --color-accent-violet: oklch(70.28% 0.1753 295.36);
+  --color-accent-violet-secondary: oklch(93% 0.04 295);
+
+  --color-accent-purple: oklch(71.9% 0.198 310.03);
+  --color-accent-purple-secondary: oklch(94.11% 0.036556 308.0303);
+
+  --color-accent-fuchsia: oklch(73.43% 0.2332 321.41);
+  --color-accent-fuchsia-secondary: oklch(94% 0.04 321);
+
+  --color-accent-pink: oklch(71.5% 0.197 354.23);
+  --color-accent-pink-secondary: oklch(95.16% 0.0242 343.23);
+
+  --color-accent-rose: oklch(70.79% 0.1862 16.25);
+  --color-accent-rose-secondary: oklch(93.37% 0.0339 12.05);
+
+  /* --- Chart Colors (for Recharts graphs only) --- */
+  --color-chart-1: var(--color-accent-red);
+  --color-chart-2: var(--color-accent-orange);
+  --color-chart-3: var(--color-accent-amber);
+  --color-chart-4: var(--color-accent-yellow);
+  --color-chart-5: var(--color-accent-lime);
+  --color-chart-6: var(--color-accent-green);
+  --color-chart-7: var(--color-accent-emerald);
+  --color-chart-8: var(--color-accent-teal);
+  --color-chart-9: var(--color-accent-cyan);
+  --color-chart-10: var(--color-accent-sky);
+  --color-chart-11: var(--color-accent-blue);
+  --color-chart-12: var(--color-accent-indigo);
+  --color-chart-13: var(--color-accent-violet);
+  --color-chart-14: var(--color-accent-purple);
+  --color-chart-15: var(--color-accent-fuchsia);
+  --color-chart-16: var(--color-accent-pink);
+  --color-chart-17: var(--color-accent-rose);
+  --color-chart-active-dot: var(--color-foreground);
+
+  /* --- Borders --- */
+  --default-border-width: 2px;
+
+  /* --- Shadows & Spacing --- */
+  --radius-base: var(--radius-lg);
+  --spacing-boxShadowX: 3px;
+  --spacing-boxShadowY: 3px;
+
+  /* --- Drop Shadows --- */
+  --shadow-min: 1px 1px 0px 0px var(--color-border);
+  --shadow-xs: 2px 2px 0px 0px var(--color-border);
+  --shadow-sm: 3px 3px 0px 0px var(--color-border);
+  --shadow-md: 4px 4px 0px 0px var(--color-border);
+  --shadow-lg: 4.75px 4.75px 0px 0px var(--color-border);
+  --shadow-xl: 5.5px 5.5px 0px 0px var(--color-border);
+
+  --shadow-default: var(--shadow-md);
+
+  /* --- Inset Shadows --- */
+  --inset-shadow-xs: inset 1px 1px 0px 0px var(--color-border);
+  --inset-shadow-sm: inset 2px 2px 0px 0px var(--color-border);
+  --inset-shadow-md: inset 3px 3px 0px 0px var(--color-border);
+  --inset-shadow-lg: inset 4px 4px 0px 0px var(--color-border);
+  --inset-shadow-xl: inset 5px 5px 0px 0px var(--color-border);
+
+  /* --- Aspect Ratios --- */
+  --aspect-a4: 210/297;
+  --aspect-a4-landscape: 297/210;
+
+  /* --- Animations & Keyframes --- */
+  --animate-cloud-move: cloud-move 60s linear infinite alternate;
+  --animate-float: float 3s ease-in-out infinite;
+  --animate-subtle-float: subtle-float 3s ease-in-out infinite;
+  --animate-color-cycle: color-cycle 30s ease-in-out infinite;
+  --animate-color-cycle-vibrant: color-cycle-vibrant 30s ease-in-out infinite;
+  --animate-bg-color-cycle: bg-color-cycle 30s ease-in-out infinite;
+  --animate-bg-color-cycle-vibrant: bg-color-cycle-vibrant 30s ease-in-out
+    infinite;
+  --animate-font-color-cycle-vibrant: font-color-cycle-vibrant 30s ease-in-out
+    infinite;
+
+  @keyframes cloud-move {
+    0% {
+      transform: translateX(0);
+    }
+    100% {
+      transform: translateX(-100vw);
+    }
+  }
+  @keyframes float {
+    0%,
+    100% {
+      transform: translateY(0%);
+    }
+    50% {
+      transform: translateY(-5%);
+    }
+  }
+  @keyframes subtle-float {
+    0%,
+    100% {
+      transform: translateY(0%);
+    }
+    50% {
+      transform: translateY(-2%);
+    }
+  }
+
+  @keyframes bg-color-cycle {
+    0% {
+      background-color: var(--color-accent-red-secondary);
+    }
+    50% {
+      background-color: var(--color-accent-cyan-secondary);
+    }
+    100% {
+      background-color: var(--color-accent-rose-secondary);
+    }
+  }
+  @keyframes bg-color-cycle-vibrant {
+    0% {
+      background-color: var(--color-accent-red);
+    }
+    50% {
+      background-color: var(--color-accent-cyan);
+    }
+    100% {
+      background-color: var(--color-accent-rose);
+    }
+  }
+  @keyframes font-color-cycle-vibrant {
+    0% {
+      color: var(--color-accent-red);
+    }
+    50% {
+      color: var(--color-accent-cyan);
+    }
+    100% {
+      color: var(--color-accent-rose);
+    }
+  }
+}
+
+/* --- Global Resets & Theme Overrides --- */
+@layer base {
+  /* THEME DEFINITIONS
+     Usage: <html data-theme="red"> or <body data-theme="indigo">
+     Logic: 
+       - Main: The vibrant accent color
+       - Background: The secondary pastel version
+       - Main-Foreground: White for dark accents, Black for light accents (EX. text on buttons)
+  */
+
+  [data-theme="red"] {
+    --color-main: var(--color-accent-red);
+    --color-main-secondary: var(--color-accent-red-secondary);
+    --color-background: var(--color-accent-red-secondary);
+    --color-main-foreground: oklch(100% 0 0);
+  }
+
+  [data-theme="orange"] {
+    --color-main: var(--color-accent-orange);
+    --color-main-secondary: var(--color-accent-orange-secondary);
+    --color-background: var(--color-accent-orange-secondary);
+    --color-main-foreground: oklch(0% 0 0);
+  }
+
+  [data-theme="amber"] {
+    --color-main: var(--color-accent-amber);
+    --color-main-secondary: var(--color-accent-amber-secondary);
+    --color-background: var(--color-accent-amber-secondary);
+    --color-main-foreground: oklch(0% 0 0);
+  }
+
+  [data-theme="yellow"] {
+    --color-main: var(--color-accent-yellow);
+    --color-main-secondary: var(--color-accent-yellow-secondary);
+    --color-background: var(--color-accent-yellow-secondary);
+    --color-main-foreground: oklch(0% 0 0);
+  }
+
+  [data-theme="lime"] {
+    --color-main: var(--color-accent-lime);
+    --color-main-secondary: var(--color-accent-lime-secondary);
+    --color-background: var(--color-accent-lime-secondary);
+    --color-main-foreground: oklch(0% 0 0);
+  }
+
+  [data-theme="green"] {
+    --color-main: var(--color-accent-green);
+    --color-main-secondary: var(--color-accent-green-secondary);
+    --color-background: var(--color-accent-green-secondary);
+    --color-main-foreground: oklch(0% 0 0);
+  }
+
+  [data-theme="emerald"] {
+    --color-main: var(--color-accent-emerald);
+    --color-main-secondary: var(--color-accent-emerald-secondary);
+    --color-background: var(--color-accent-emerald-secondary);
+    --color-main-foreground: oklch(0% 0 0);
+  }
+
+  [data-theme="teal"] {
+    --color-main: var(--color-accent-teal);
+    --color-main-secondary: var(--color-accent-teal-secondary);
+    --color-background: var(--color-accent-teal-secondary);
+    --color-main-foreground: oklch(0% 0 0);
+  }
+
+  [data-theme="cyan"] {
+    --color-main: var(--color-accent-cyan);
+    --color-main-secondary: var(--color-accent-cyan-secondary);
+    --color-background: var(--color-accent-cyan-secondary);
+    --color-main-foreground: oklch(0% 0 0);
+  }
+
+  [data-theme="sky"] {
+    --color-main: var(--color-accent-sky);
+    --color-main-secondary: var(--color-accent-sky-secondary);
+    --color-background: var(--color-accent-sky-secondary);
+    --color-main-foreground: oklch(0% 0 0);
+  }
+
+  [data-theme="blue"] {
+    --color-main: var(--color-accent-blue);
+    --color-main-secondary: var(--color-accent-blue-secondary);
+    --color-background: var(--color-accent-blue-secondary);
+    --color-main-foreground: oklch(100% 0 0);
+  }
+
+  [data-theme="indigo"] {
+    --color-main: var(--color-accent-indigo);
+    --color-main-secondary: var(--color-accent-indigo-secondary);
+    --color-background: var(--color-accent-indigo-secondary);
+    --color-main-foreground: oklch(100% 0 0);
+  }
+
+  [data-theme="violet"] {
+    --color-main: var(--color-accent-violet);
+    --color-main-secondary: var(--color-accent-violet-secondary);
+    --color-background: var(--color-accent-violet-secondary);
+    --color-main-foreground: oklch(100% 0 0);
+  }
+
+  [data-theme="purple"] {
+    --color-main: var(--color-accent-purple);
+    --color-main-secondary: var(--color-accent-purple-secondary);
+    --color-background: var(--color-accent-purple-secondary);
+    --color-main-foreground: oklch(100% 0 0);
+  }
+
+  [data-theme="fuchsia"] {
+    --color-main: var(--color-accent-fuchsia);
+    --color-main-secondary: var(--color-accent-fuchsia-secondary);
+    --color-background: var(--color-accent-fuchsia-secondary);
+    --color-main-foreground: oklch(0% 0 0);
+  }
+
+  [data-theme="pink"] {
+    --color-main: var(--color-accent-pink);
+    --color-main-secondary: var(--color-accent-pink-secondary);
+    --color-background: var(--color-accent-pink-secondary);
+    --color-main-foreground: oklch(0% 0 0);
+  }
+
+  [data-theme="rose"] {
+    --color-main: var(--color-accent-rose);
+    --color-main-secondary: var(--color-accent-rose-secondary);
+    --color-background: var(--color-accent-rose-secondary);
+    --color-main-foreground: oklch(100% 0 0);
+  }
+
+  html { }
+
+  body {
+    font-family: var(--font-body);
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: var(--font-heading);
+  }
+}
+
+/* --- Utilities --- */
+@layer utilities {
+  .neo-base {
+    @apply touch-manipulation select-none appearance-none outline-none;
+  }
+  .neo-popup-focus {
+    @apply focus-visible:after:absolute focus-visible:after:-inset-1 focus-visible:after:border-8 focus-visible:after:pointer-events-none 
+    focus-visible:after:border-foreground focus-visible:after:rounded-[inherit] focus-visible:after:blur-[2px];
+  }
+  .neo-accordion-focus {
+    @apply focus:outline-none focus-visible:after:absolute focus-visible:after:-inset-px focus-visible:after:border-2 focus-visible:after:pointer-events-none 
+    focus-visible:after:border-foreground/30 focus-visible:after:rounded-sm;
+  }
+  .neo-button-focus {
+    @apply focus:outline-none focus-visible:after:absolute focus-visible:after:-inset-px focus-visible:after:border-3 focus-visible:after:pointer-events-none 
+    focus-visible:after:border-foreground/30 focus-visible:after:rounded-[inherit];
+  }
+  .neo-input-focus {
+    @apply outline-none hover:shadow-sm hover:-translate-[3px] focus-visible:shadow-sm focus-visible:-translate-[3px];
+  }
+  .neo-switch-focus {
+    @apply outline-none hover:shadow-xs hover:-translate-[2px] focus-visible:shadow-xs focus-visible:-translate-[2px];
+  }
+  .neo-chips-focus {
+    @apply translate-0 has-data-pressed:shadow-sm has-data-pressed:-translate-[3px] outline-none hover:shadow-sm hover:-translate-[3px] focus-visible:shadow-sm focus-visible:-translate-[3px];
+  }
+  .neo-checkbox-focus {
+    @apply hover:shadow-xs hover:-translate-0.5 focus-visible:shadow-xs focus-visible:-translate-0.5 active:translate-0 active:shadow-none;
+  }
+  .neo-sidebar-button-focus {
+    @apply border-2 border-transparent focus-visible:border-black hover:border-black hover:shadow-sm hover:-translate-[3px] focus-visible:shadow-sm focus-visible:-translate-[3px] active:shadow-none active:translate-0;
+  }
+  .neo-scrollbar-focus {
+    @apply active:z-14 hover:z-12 focus:[&_svg]:scale-110 focus:z-12 focus:[&_svg]:fill-main hover:[&_svg]:fill-main focus:[&_svg]:text-main hover:[&_svg]:text-main;
+  }
+
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+  .no-scrollbar {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+}
+
+/* --- 3rd Party Overrides --- */
+.recharts-wrapper > svg > g {
+  outline: none !important;
+}
+.recharts-wrapper .recharts-cartesian-grid-horizontal line:last-child {
+  stroke-opacity: 0;
+}
+
+.maplibregl-ctrl {
+  @apply bg-surface! outline-0! shadow-none! *:[button]:rounded-base *:[button]:bg-surface! *:[button]:hover:bg-main! *:[button]:transition-all *:[button]:duration-200 *:[button]:border-2! *:[button]:border-border! *:[button]:shadow-xs! *:[button]:-translate-0.5! *:[button]:hover:shadow-min! *:[button]:hover:-translate-px! *:[button]:focus-visible:-translate-px! *:[button]:focus-visible:shadow-min! *:[button]:active:shadow-none! *:[button]:active:translate-0! *:[button]:aria-disabled:shadow-none! *:[button]:aria-disabled:translate-0!;
+}
+
+.maplibregl-ctrl-zoom-in {
+  @apply -mb-0.5! rounded-b-none!;
+}
+
+.maplibregl-ctrl-zoom-out {
+  @apply rounded-t-none!;
+}
+
+.maplibregl-ctrl-fullscreen {
+  @apply p-1!;
+}
+
+.maplibregl-ctrl-scale {
+  @apply transition-[width] duration-500 delay-100 rounded-sm! border-2! border-border! hover:bg-main! bg-surface! font-bold! leading-none! py-1! shadow-sm! font-mono! text-xs!;
+}
+
+.maplibregl-user-location-dot {
+  @apply shadow-xl! bg-accent-blue! before:bg-accent-blue! after:border-border!;
+}
+.maplibregl-user-location-accuracy-circle {
+  @apply bg-accent-blue/20!;
+}