@vireo-ai/trellis-ui 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Tristan Robinette
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1 @@
+# Trellis UI

package/package.json

@@ -0,0 +1,84 @@
+{
+  "name": "@vireo-ai/trellis-ui",
+  "version": "0.1.0",
+  "type": "module",
+  "description": "Django-native UI toolkit for building realtime and interactive web apps.",
+  "license": "MIT",
+  "main": "./trellis_ui/static/trellis_ui/js/esm/index.js",
+  "module": "./trellis_ui/static/trellis_ui/js/esm/index.js",
+  "types": "./types/index.d.ts",
+  "sideEffects": true,
+  "files": [
+    "LICENSE",
+    "README.md",
+    "types/**/*.d.ts",
+    "src/theme.css",
+    "trellis_ui/static/trellis_ui/css/styles.css",
+    "trellis_ui/static/trellis_ui/js/index.js",
+    "trellis_ui/static/trellis_ui/js/esm/**/*.js",
+    "trellis_ui/static/trellis_ui/js/esm/**/*.js.map",
+    "!types/components/manifests.d.ts",
+    "!types/components/styles.d.ts",
+    "!types/components/**/manifest.d.ts",
+    "!types/components/**/styles.d.ts"
+  ],
+  "exports": {
+    ".": {
+      "types": "./types/index.d.ts",
+      "import": "./trellis_ui/static/trellis_ui/js/esm/index.js",
+      "default": "./trellis_ui/static/trellis_ui/js/esm/index.js"
+    },
+    "./cdn": "./trellis_ui/static/trellis_ui/js/index.js",
+    "./theme.css": "./src/theme.css",
+    "./styles.css": "./trellis_ui/static/trellis_ui/css/styles.css",
+    "./package.json": "./package.json"
+  },
+  "dependencies": {
+    "@alpinejs/morph": "^3.15.12",
+    "@atlaskit/pragmatic-drag-and-drop": "^2.0.1",
+    "@floating-ui/dom": "^1.6.13",
+    "@imacrayon/alpine-ajax": "^0.12.7",
+    "alpinejs": "^3.14.8",
+    "cally": "^0.9.2",
+    "clsx": "^2.1.1",
+    "motion": "^12.42.0"
+  },
+  "devDependencies": {
+    "@axe-core/playwright": "^4.11.3",
+    "@playwright/test": "^1.61.0",
+    "@tailwindcss/cli": "^4.0.0",
+    "@tailwindcss/typography": "^0.5.20",
+    "@tailwindcss/vite": "^4.3.2",
+    "@types/alpinejs": "^3.13.11",
+    "@types/node": "^25.9.3",
+    "@types/prismjs": "^1.26.6",
+    "event-source-plus": "^0.1.15",
+    "jsdom": "^29.1.1",
+    "prismjs": "^1.30.0",
+    "tailwindcss": "^4.0.0",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.16",
+    "vitest": "^4.1.9"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run --no-file-parallelism",
+    "test:browser": "playwright test",
+    "test:watch": "vitest",
+    "prek": "uv run prek",
+    "clean:types": "node -e \"require('node:fs').rmSync('types', { recursive: true, force: true })\"",
+    "build:manifests": "vite build --config vite.manifests.config.ts && python3 scripts/generate_ui_events.py",
+    "build:types": "pnpm run clean:types && tsc -p tsconfig.build.json",
+    "build:js": "vite build && vite build --config vite.esm.config.ts && pnpm run build:types",
+    "build:css": "tailwindcss -i ./src/theme.css -o ./trellis_ui/static/trellis_ui/css/styles.css",
+    "build:package": "pnpm run build:css && pnpm run build:js && pnpm run build:manifests",
+    "build": "pnpm run build:package",
+    "check": "pnpm run build:package && pnpm run typecheck && pnpm test && uv run pytest && pnpm run test:browser",
+    "check:packages": "pnpm pack --dry-run && uv build --sdist --wheel",
+    "check:release": "pnpm run check && pnpm run check:packages",
+    "publish:npm": "pnpm run check:release && pnpm publish --access public",
+    "publish:pypi": "pnpm run build:package && uv build --sdist --wheel && uv publish dist/django_trellis-${npm_package_version}.tar.gz dist/django_trellis-${npm_package_version}-py3-none-any.whl",
+    "publish:all": "pnpm run check:release && pnpm publish --access public && uv publish dist/django_trellis-${npm_package_version}.tar.gz dist/django_trellis-${npm_package_version}-py3-none-any.whl",
+    "dev:css": "tailwindcss -i ./src/theme.css -o ./trellis_ui/static/trellis_ui/css/styles.css --watch"
+  }
+}

package/src/theme.css

@@ -0,0 +1,536 @@
+@import "tailwindcss";
+@import "./components.css";
+
+@source "../docs/**/*.html";
+@source "../trellis_ui/templates/**/*.html";
+@source "./**/*.ts";
+@source not "../docs/static/**";
+@source not "../trellis_ui/static/**";
+
+@custom-variant dark (&:where(.dark, .dark *));
+@custom-variant ui-interactive (&:is([data-ui-interactive]));
+@custom-variant ui-interactive-surface (&:is([data-ui-interactive="surface"]));
+@custom-variant ui-active (&:is(:active, :focus-visible, [data-active], [data-highlighted]));
+@custom-variant ui-selected (&:is([data-selected], [aria-selected="true"], [data-current], [aria-current]:not([aria-current="false"]), [data-checked], [aria-checked="true"], [data-pressed], [aria-pressed="true"]));
+
+/*
+  Root theme for the Trellis UI component system.
+
+  Token layers:
+  1. Primitive scales: Radix-inspired color steps, type, space, radius.
+  2. Semantic aliases: app, surface, foreground, border, focus, overlay.
+  3. Component aliases: control, button, field, panel, popover, menu, nav.
+
+  Project themes should override semantic and component aliases first.
+  Primitive scale overrides are supported for full re-skinning.
+
+  CSS ownership:
+  - TypeScript style recipes own class composition, variants, sizes, and parts.
+  - This file owns imports, Tailwind sources and variants, tokens, utilities,
+    global theme rules, and generic reusable behavior.
+  - Colocated component CSS owns selector-only styling that recipes cannot
+    express cleanly, such as pseudo-elements, ::part(...), :has(...), native
+    quirks, and child-order selectors.
+*/
+
+@theme {
+  --font-sans: Inter var, Lexend, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-mono: Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+
+  --text-xs: 0.75rem;
+  --text-xs--line-height: 1rem;
+  --text-sm: 0.875rem;
+  --text-sm--line-height: 1.25rem;
+  --text-base: 1rem;
+  --text-base--line-height: 1.5rem;
+  --text-lg: 1.125rem;
+  --text-lg--line-height: 1.625rem;
+  --text-xl: 1.25rem;
+  --text-xl--line-height: 1.75rem;
+  --text-2xl: 1.875rem;
+  --text-2xl--line-height: 2.375rem;
+
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  --spacing-0: 0;
+  --spacing-1: 0.25rem;
+  --spacing-2: 0.5rem;
+  --spacing-3: 0.75rem;
+  --spacing-4: 1rem;
+  --spacing-5: 1.25rem;
+  --spacing-6: 1.5rem;
+  --spacing-8: 2rem;
+  --spacing-10: 2.5rem;
+  --spacing-12: 3rem;
+  --spacing-popover: var(--ui-popover-padding);
+  --spacing-combobox-listbox: var(--ui-combobox-listbox-max-height);
+  --spacing-menu-item: var(--ui-menu-item-height);
+  --spacing-menu-item-x: var(--ui-menu-item-padding-x);
+  --spacing-icon: var(--ui-icon-size);
+  --spacing-icon-xs: var(--ui-icon-size-xs);
+  --spacing-icon-sm: var(--ui-icon-size-sm);
+  --spacing-icon-lg: var(--ui-icon-size-lg);
+  --spacing-scrollbar: var(--ui-scrollbar-size);
+  --spacing-scrollbar-inset: var(--ui-scrollbar-inset);
+  --spacing-control: var(--ui-control-gap);
+
+  --radius-1: 1px;
+  --radius-2: 2px;
+  --radius-3: 4px;
+  --radius-4: 6px;
+  --radius-5: 8px;
+  --radius-6: 12px;
+  --radius-full: 9999px;
+  --radius-control: var(--ui-control-radius);
+  --radius-scrollbar-thumb: var(--ui-scrollbar-thumb-radius);
+
+  --spacing-control-xs: 1.25rem;
+  --spacing-control-sm: 1.5rem;
+  --spacing-control-md: 1.75rem;
+  --spacing-control-lg: 2rem;
+  --spacing-control-xlg: 2.25rem;
+
+  --shadow-border: var(--ui-shadow-border);
+  --shadow-border-hover: var(--ui-shadow-border-hover);
+  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.04);
+  --shadow-2: 0 1px 2px rgb(0 0 0 / 0.05), 0 8px 24px rgb(0 0 0 / 0.08);
+  --shadow-3: 0 2px 4px rgb(0 0 0 / 0.05), 0 16px 48px rgb(0 0 0 / 0.14);
+  --shadow-popover: var(--ui-popover-shadow);
+  --shadow-panel: var(--ui-panel-shadow);
+  --shadow-inset: inset 0 1px 1px rgb(0 0 0 / 0.04);
+  --shadow-control: var(--ui-control-shadow);
+  --shadow-focus: 0 0 0 3px var(--color-focus-a4);
+  --shadow-danger-focus: var(--shadow-control), 0 0 0 3px var(--color-danger-a4);
+
+  --container-content: 72rem;
+  --container-reading: 42rem;
+  --z-index-popover: 50;
+  --z-index-dialog: 60;
+  --z-index-toast: 70;
+}
+
+@theme {
+  /* Base, neutral scale. */
+  --color-base-1: #fcfcfd;
+  --color-base-2: #f9f9fb;
+  --color-base-3: #f0f0f3;
+  --color-base-4: #e8e8ec;
+  --color-base-5: #e0e1e6;
+  --color-base-6: #d9d9e0;
+  --color-base-7: #cdced6;
+  --color-base-8: #b9bbc6;
+  --color-base-9: #8b8d98;
+  --color-base-10: #80838d;
+  --color-base-11: #60646c;
+  --color-base-12: #1c2024;
+
+  --color-base-a1: #00005503;
+  --color-base-a2: #00005506;
+  --color-base-a3: #0000330f;
+  --color-base-a4: #00002d17;
+  --color-base-a5: #0009321f;
+  --color-base-a6: #00002f26;
+  --color-base-a7: #00062e32;
+  --color-base-a8: #00083046;
+  --color-base-a9: #00051d74;
+  --color-base-a10: #00071b7f;
+  --color-base-a11: #0007149f;
+  --color-base-a12: #000509e3;
+
+  /* Accent defaults to blue. Projects can remap this to any Radix scale. */
+  --color-accent-1: #fbfdff;
+  --color-accent-2: #f4faff;
+  --color-accent-3: #e6f4fe;
+  --color-accent-4: #d5efff;
+  --color-accent-5: #c2e5ff;
+  --color-accent-6: #acd8fc;
+  --color-accent-7: #8ec8f6;
+  --color-accent-8: #5eb1ef;
+  --color-accent-9: #0090ff;
+  --color-accent-10: #0588f0;
+  --color-accent-11: #0d74ce;
+  --color-accent-12: #113264;
+
+  --color-accent-a1: #0080ff04;
+  --color-accent-a2: #008cff0b;
+  --color-accent-a3: #008ff519;
+  --color-accent-a4: #009eff2a;
+  --color-accent-a5: #0093ff3d;
+  --color-accent-a6: #0088f653;
+  --color-accent-a7: #0083eb71;
+  --color-accent-a8: #0084e6a1;
+  --color-accent-a9: #0090ff;
+  --color-accent-a10: #0086f0fa;
+  --color-accent-a11: #006dcbf2;
+  --color-accent-a12: #002359ee;
+
+  --color-danger-1: #fffcfc;
+  --color-danger-2: #fff7f7;
+  --color-danger-3: #feebec;
+  --color-danger-4: #ffdbdc;
+  --color-danger-5: #ffcdce;
+  --color-danger-6: #fdbdbe;
+  --color-danger-7: #f4a9aa;
+  --color-danger-8: #eb8e90;
+  --color-danger-9: #e5484d;
+  --color-danger-10: #dc3e42;
+  --color-danger-11: #ce2c31;
+  --color-danger-12: #641723;
+
+  --color-danger-a1: #ff000003;
+  --color-danger-a2: #ff000008;
+  --color-danger-a3: #f3000d14;
+  --color-danger-a4: #ff000824;
+  --color-danger-a5: #ff000632;
+  --color-danger-a6: #f8000442;
+  --color-danger-a7: #df000356;
+  --color-danger-a8: #d2000571;
+  --color-danger-a9: #db0007b7;
+  --color-danger-a10: #d10005c1;
+  --color-danger-a11: #c40006d3;
+  --color-danger-a12: #55000de8;
+
+  --color-success-1: #fbfefc;
+  --color-success-2: #f4fbf6;
+  --color-success-3: #e6f6eb;
+  --color-success-4: #d6f1df;
+  --color-success-5: #c4e8d1;
+  --color-success-6: #adddc0;
+  --color-success-7: #8eceaa;
+  --color-success-8: #5bb98b;
+  --color-success-9: #30a46c;
+  --color-success-10: #2b9a66;
+  --color-success-11: #218358;
+  --color-success-12: #193b2d;
+
+  --color-success-a1: #00c04004;
+  --color-success-a2: #00a32f0b;
+  --color-success-a3: #00a43319;
+  --color-success-a4: #00a83829;
+  --color-success-a5: #019c393b;
+  --color-success-a6: #00963c52;
+  --color-success-a7: #00914071;
+  --color-success-a8: #00924ba4;
+  --color-success-a9: #008f4acf;
+  --color-success-a10: #008647d4;
+  --color-success-a11: #00713fde;
+  --color-success-a12: #002616e6;
+
+  --color-warning-1: #fefdfb;
+  --color-warning-2: #fefbe9;
+  --color-warning-3: #fff7c2;
+  --color-warning-4: #ffee9c;
+  --color-warning-5: #fbe577;
+  --color-warning-6: #f3d673;
+  --color-warning-7: #e9c162;
+  --color-warning-8: #e2a336;
+  --color-warning-9: #ffc53d;
+  --color-warning-10: #ffba18;
+  --color-warning-11: #ab6400;
+  --color-warning-12: #4f3422;
+
+  --color-warning-a1: #c0800004;
+  --color-warning-a2: #f4d10016;
+  --color-warning-a3: #ffde003d;
+  --color-warning-a4: #ffd40063;
+  --color-warning-a5: #f8cf0088;
+  --color-warning-a6: #eab5008c;
+  --color-warning-a7: #dc9b009d;
+  --color-warning-a8: #da8a00c9;
+  --color-warning-a9: #ffb300c2;
+  --color-warning-a10: #ffb300e7;
+  --color-warning-a11: #ab6400;
+  --color-warning-a12: #341500dd;
+}
+
+@theme {
+  /* Semantic aliases that produce Tailwind utilities. */
+  --color-app: var(--color-base-1);
+  --color-app-subtle: var(--color-base-2);
+  --color-surface: #ffffff;
+  --color-surface-muted: var(--color-base-2);
+  --color-surface-raised: #ffffff;
+  --color-foreground: var(--color-base-12);
+  --color-foreground-muted: var(--color-base-11);
+  --color-foreground-subtle: var(--color-base-10);
+  --color-border: var(--color-base-a5);
+  --color-border-interactive: var(--color-base-a6);
+  --color-border-strong: var(--color-base-a7);
+  --color-control: var(--ui-control-bg);
+  --color-control-hover: var(--ui-control-bg-hover);
+  --color-control-active: var(--ui-control-bg-active);
+  --color-control-fg: var(--ui-control-fg);
+  --color-control-placeholder: var(--ui-control-placeholder);
+  --color-control-border: var(--ui-control-border);
+  --color-control-border-focus: var(--ui-control-border-focus);
+  --color-control-border-invalid: var(--ui-control-border-invalid);
+  --color-control-border-invalid-focus: var(--ui-control-border-invalid-focus);
+  --color-focus: var(--color-accent-8);
+  --color-focus-a4: color-mix(in srgb, var(--color-focus) var(--ui-focus-strength), transparent);
+  --color-overlay: rgb(0 0 0 / 0.35);
+  --color-accent-solid: var(--color-accent-11);
+  --color-accent-solid-hover: var(--color-accent-12);
+  --color-accent-contrast: white;
+  --color-accent-surface: color-mix(in srgb, var(--color-accent-9) var(--ui-accent-strength), var(--color-surface));
+  --color-accent-surface-hover: color-mix(in srgb, var(--color-accent-9) var(--ui-accent-hover-strength), var(--color-surface));
+  --color-accent-border: color-mix(in srgb, var(--color-accent-9) var(--ui-accent-border-strength), var(--color-border));
+  --color-accent-text: var(--color-accent-11);
+  --color-danger-solid: var(--color-danger-11);
+  --color-danger-solid-hover: var(--color-danger-12);
+  --color-danger-contrast: white;
+  --color-danger-surface: var(--color-danger-3);
+  --color-danger-surface-hover: var(--color-danger-4);
+  --color-danger-border: var(--color-danger-7);
+  --color-danger-text: var(--color-danger-11);
+  --color-success-solid: var(--color-success-9);
+  --color-success-solid-hover: var(--color-success-10);
+  --color-success-contrast: white;
+  --color-success-surface: var(--color-success-3);
+  --color-success-surface-hover: var(--color-success-4);
+  --color-success-border: var(--color-success-7);
+  --color-success-text: var(--color-success-11);
+  --color-warning-solid: var(--color-warning-9);
+  --color-warning-solid-hover: var(--color-warning-10);
+  --color-warning-contrast: var(--color-warning-12);
+  --color-warning-surface: var(--color-warning-3);
+  --color-warning-surface-hover: var(--color-warning-4);
+  --color-warning-border: var(--color-warning-7);
+  --color-warning-text: var(--color-warning-11);
+  --color-popover: var(--ui-popover-bg);
+  --color-popover-fg: var(--ui-popover-fg);
+  --color-popover-border: var(--ui-popover-border);
+  --color-toast: var(--ui-toast-bg);
+  --color-menu-item-hover: var(--ui-menu-item-bg-hover);
+  --color-menu-item-active: var(--ui-menu-item-bg-active);
+  --color-menu-item-fg: var(--ui-menu-item-fg);
+  --color-menu-item-muted: var(--ui-menu-item-fg-muted);
+  --color-menu-item-danger-hover: var(--ui-menu-item-danger-bg-hover);
+  --color-menu-item-danger-fg: var(--ui-menu-item-danger-fg);
+  --color-menu-separator: var(--ui-menu-separator);
+  --color-menu-heading-fg: var(--ui-menu-heading-fg);
+  --color-interactive-hover: var(--ui-interactive-bg-hover);
+  --color-interactive-active: var(--ui-interactive-bg-active);
+  --color-interactive-selected: var(--ui-interactive-bg-selected);
+  --color-interactive-selected-hover: var(--ui-interactive-bg-selected-hover);
+  --color-icon: var(--ui-icon-fg);
+  --color-scrollbar-thumb: var(--ui-scrollbar-thumb-bg);
+  --color-scrollbar-thumb-hover: var(--ui-scrollbar-thumb-bg-hover);
+  --shadow-interactive-hover: var(--ui-interactive-shadow-hover);
+  --shadow-interactive-selected: var(--ui-interactive-shadow-selected);
+  --shadow-interactive-focus: var(--shadow-focus), var(--shadow-border-hover);
+}
+
+:root {
+  color-scheme: light;
+
+  --ui-bg: var(--color-app);
+  --ui-bg-subtle: var(--color-app-subtle);
+  --ui-fg: var(--color-foreground);
+  --ui-fg-muted: var(--color-foreground-muted);
+  --ui-fg-subtle: var(--color-foreground-subtle);
+  --ui-border: var(--color-border);
+  --ui-border-interactive: var(--color-border-interactive);
+  --ui-interactive-bg-hover: var(--color-base-a2);
+  --ui-interactive-bg-active: var(--color-base-a3);
+  --ui-interactive-bg-selected: var(--color-accent-surface);
+  --ui-interactive-bg-selected-hover: var(--color-accent-surface-hover);
+  --ui-interactive-shadow-hover: var(--shadow-border-hover);
+  --ui-interactive-shadow-selected: 0 0 0 1px var(--color-accent-border);
+  --ui-focus: var(--color-focus);
+  --ui-focus-ring: var(--shadow-focus);
+  --ui-overlay: var(--color-overlay);
+  --ui-shadow-border:
+    0px 0px 0px 1px rgb(0 0 0 / 0.06),
+    0px 1px 2px -1px rgb(0 0 0 / 0.06),
+    0px 2px 4px 0px rgb(0 0 0 / 0.04);
+  --ui-shadow-border-hover:
+    0px 0px 0px 1px rgb(0 0 0 / 0.08),
+    0px 1px 2px -1px rgb(0 0 0 / 0.08),
+    0px 2px 4px 0px rgb(0 0 0 / 0.06);
+  --ui-accent-strength: 12%;
+  --ui-accent-hover-strength: 16%;
+  --ui-accent-border-strength: 38%;
+  --ui-focus-strength: 24%;
+
+  --ui-font-weight-normal: var(--font-weight-normal);
+  --ui-font-weight-medium: var(--font-weight-medium);
+  --ui-font-weight-semibold: var(--font-weight-semibold);
+  --ui-letter-spacing: 0;
+
+  --ui-border-width: 1px;
+  --ui-border-width-strong: 2px;
+
+  --ui-control-height-xs: var(--spacing-control-xs);
+  --ui-control-height-sm: var(--spacing-control-sm);
+  --ui-control-height-md: var(--spacing-control-md);
+  --ui-control-height-lg: var(--spacing-control-lg);
+  --ui-control-height-xlg: var(--spacing-control-xlg);
+  --ui-control-padding-x: 0.75rem;
+  --ui-control-gap: 0.5rem;
+  --ui-control-radius: var(--radius-3);
+  --ui-control-bg: var(--color-surface);
+  --ui-control-bg-hover: var(--color-base-a2);
+  --ui-control-bg-active: var(--color-base-a3);
+  --ui-control-fg: var(--color-foreground);
+  --ui-control-placeholder: var(--color-foreground-subtle);
+  --ui-control-border: var(--color-border);
+  --ui-control-border-hover: color-mix(in srgb, var(--ui-control-border) 88%, var(--ui-fg) 12%);
+  --ui-control-border-focus: var(--color-accent-9);
+  --ui-control-border-invalid: var(--color-danger-border);
+  --ui-control-border-invalid-hover: color-mix(in srgb, var(--ui-control-border-invalid) 84%, var(--color-danger-text) 16%);
+  --ui-control-border-invalid-focus: var(--color-danger-9);
+  --ui-control-shadow: var(--shadow-inset);
+  --ui-panel-shadow:
+    var(--ui-shadow-border),
+    0px 2px 4px rgb(0 0 0 / 0.05),
+    0px 16px 48px rgb(0 0 0 / 0.14);
+
+  --ui-popover-bg: var(--color-surface-raised);
+  --ui-popover-fg: var(--color-foreground);
+  --ui-popover-border: var(--color-border);
+  --ui-popover-radius: var(--radius-4);
+  --ui-popover-shadow:
+    var(--ui-shadow-border),
+    0px 1px 2px rgb(0 0 0 / 0.05),
+    0px 8px 24px rgb(0 0 0 / 0.08);
+  --ui-popover-padding: 0.375rem;
+  --ui-popover-z: var(--z-index-popover);
+  --ui-toast-bg: var(--color-surface-raised);
+  --ui-toast-stack-peek: 8px;
+
+  --ui-combobox-listbox-max-height: 16rem;
+
+  --ui-menu-item-height: var(--spacing-control-lg);
+  --ui-menu-item-padding-x: 0.625rem;
+  --ui-menu-item-radius: var(--radius-3);
+  --ui-menu-item-bg-hover: var(--color-base-a2);
+  --ui-menu-item-bg-active: var(--color-base-a3);
+  --ui-menu-item-fg: var(--color-foreground);
+  --ui-menu-item-fg-muted: var(--color-foreground-muted);
+  --ui-menu-item-danger-fg: var(--color-danger-text);
+  --ui-menu-item-danger-bg-hover: var(--color-danger-a3);
+  --ui-menu-separator: var(--color-base-a5);
+  --ui-menu-heading-fg: var(--color-foreground-muted);
+  --ui-icon-size-xs: 0.75rem;
+  --ui-icon-size-sm: 0.875rem;
+  --ui-icon-size: var(--ui-icon-size-sm);
+  --ui-icon-size-lg: 1rem;
+  --ui-icon-fg: var(--color-foreground-subtle);
+  --ui-scrollbar-size: 0.375rem;
+  --ui-scrollbar-inset: 0.125rem;
+  --ui-scrollbar-thumb-bg: var(--color-base-a5);
+  --ui-scrollbar-thumb-bg-hover: var(--color-base-a7);
+  --ui-scrollbar-thumb-radius: var(--radius-full);
+
+}
+
+@utility max-h-xs {
+  max-height: var(--container-xs);
+}
+
+@utility max-h-sm {
+  max-height: var(--container-sm);
+}
+
+@utility max-h-md {
+  max-height: var(--container-md);
+}
+
+@utility max-h-lg {
+  max-height: var(--container-lg);
+}
+
+@utility max-h-xl {
+  max-height: var(--container-xl);
+}
+
+@utility max-h-prose {
+  max-height: 65ch;
+}
+
+@layer components {
+  [data-ui-control]:where([data-variant="outline"], [data-variant="enhanced"]):is(:hover, :active):not(:focus-within):not([data-state="open"]):not([data-disabled]):not([data-invalid]) {
+    border-color: var(--ui-control-border-hover);
+  }
+
+  [data-ui-control]:where([data-variant="outline"], [data-variant="enhanced"]):focus-within:not([data-invalid]),
+  [data-ui-control]:where([data-variant="outline"], [data-variant="enhanced"])[data-state="open"]:not([data-invalid]) {
+    border-color: var(--ui-control-border-focus);
+  }
+
+  [data-ui-control]:where([data-variant="outline"], [data-variant="enhanced"])[data-invalid]:is(:hover, :active):not(:focus-within):not([data-state="open"]):not([data-disabled]) {
+    border-color: var(--ui-control-border-invalid-hover);
+  }
+
+  [data-ui-control]:where([data-variant="outline"], [data-variant="enhanced"])[data-invalid]:focus-within:not([data-disabled]),
+  [data-ui-control]:where([data-variant="outline"], [data-variant="enhanced"])[data-invalid][data-state="open"]:not([data-disabled]) {
+    border-color: var(--ui-control-border-invalid-focus);
+    box-shadow: var(--shadow-control), 0 0 0 3px var(--color-danger-a4);
+  }
+
+  [data-ui-control]:where([data-variant="outline"], [data-variant="enhanced"]):has(:focus-visible):not([data-invalid]) {
+    box-shadow: var(--shadow-control), var(--shadow-focus);
+  }
+}
+
+.dark {
+  color-scheme: dark;
+
+  --color-base-1: #111213;
+  --color-base-2: #131415;
+  --color-base-3: #151617;
+  --color-base-4: #191a1c;
+  --color-base-5: #1f2023;
+  --color-base-6: #292b2f;
+  --color-base-7: #373a40;
+  --color-base-8: #515861;
+  --color-base-9: #686e76;
+  --color-base-10: #7b8088;
+  --color-base-11: #a7abb1;
+  --color-base-12: #edeef0;
+  --color-base-a1: #00000000;
+  --color-base-a2: #ffffff09;
+  --color-base-a3: #ffffff12;
+  --color-base-a4: #ffffff1b;
+  --color-base-a5: #ffffff22;
+  --color-base-a6: #ffffff2c;
+  --color-base-a7: #ffffff3b;
+  --color-base-a8: #ffffff55;
+  --color-base-a9: #ffffff64;
+  --color-base-a10: #ffffff72;
+  --color-base-a11: #ffffffaf;
+  --color-base-a12: #ffffffed;
+
+  --color-app: var(--color-base-2);
+  --color-app-subtle: var(--color-base-1);
+  --color-surface: var(--color-base-2);
+  --color-surface-muted: var(--color-base-1);
+  --color-surface-raised: var(--color-base-3);
+  --ui-toast-bg: var(--color-base-4);
+  --color-foreground: var(--color-base-12);
+  --color-foreground-muted: var(--color-base-11);
+  --color-foreground-subtle: var(--color-base-10);
+  --color-border: var(--color-base-a3);
+  --color-border-interactive: var(--color-base-a4);
+  --color-border-strong: var(--color-base-a5);
+  --color-overlay: rgb(0 0 0 / 0.55);
+  --ui-accent-strength: 16%;
+  --ui-accent-hover-strength: 20%;
+  --ui-accent-border-strength: 46%;
+  --ui-focus-strength: 32%;
+  --color-accent-contrast: white;
+  --color-accent-text: var(--color-accent-8);
+  --color-danger-surface: var(--color-danger-a3);
+  --color-danger-surface-hover: var(--color-danger-a4);
+  --color-danger-border: var(--color-danger-a7);
+  --color-danger-text: var(--color-danger-8);
+  --color-success-text: var(--color-success-8);
+  --color-warning-text: var(--color-warning-8);
+  --ui-shadow-border: 0 0 0 1px rgb(255 255 255 / 0.07);
+  --ui-shadow-border-hover: 0 0 0 1px rgb(255 255 255 / 0.11);
+  --ui-popover-shadow: var(--ui-shadow-border);
+  --ui-panel-shadow: var(--ui-shadow-border);
+}