@adea-ai/ui 0.25.12 → 0.25.14

package/dist/components/on-screen-controls.js

@@ -5,8 +5,8 @@ import { ZoomIn, ZoomOut } from "lucide-solid";
 import { Show, onCleanup } from "solid-js";
 //#region src/components/on-screen-controls.tsx
 var _tmpl$ = /*#__PURE__*/ template(`<button type=button>`);
-var _tmpl$2 = /*#__PURE__*/ template(`<div class="pointer-events-auto grid grid-cols-3 gap-1.5 rounded-3xl bg-slate-950/20 p-2 backdrop-blur-[2px]"><span></span><span>`);
-var _tmpl$3 = /*#__PURE__*/ template(`<div class="flex items-center gap-1.5 rounded-2xl bg-slate-950/20 p-1.5 backdrop-blur-[2px]"role=group aria-label="Camera zoom">`);
+var _tmpl$2 = /*#__PURE__*/ template(`<div class="pointer-events-auto grid grid-cols-3 gap-1.5 rounded-3xl bg-scrim/20 p-2 backdrop-blur-[2px]"><span></span><span>`);
+var _tmpl$3 = /*#__PURE__*/ template(`<div class="flex items-center gap-1.5 rounded-2xl bg-scrim/20 p-1.5 backdrop-blur-[2px]"role=group aria-label="Camera zoom">`);
 var _tmpl$4 = /*#__PURE__*/ template(`<div data-agent-hq-on-screen-controls class="pointer-events-none fixed inset-x-4 bottom-4 z-30 flex select-none items-end justify-between gap-4 pb-[env(safe-area-inset-bottom)] sm:inset-x-6 sm:bottom-6 [-webkit-touch-callout:none] [-webkit-user-select:none]"><div class="pointer-events-auto ml-auto flex flex-col items-end gap-2">`);
 function sendKeyEvent(type, code) {
 	window.dispatchEvent(new KeyboardEvent(type, {
@@ -54,7 +54,7 @@ function ControlButton(props) {
 		_el$.$$contextmenu = (event) => event.preventDefault();
 		insert(_el$, () => props.children);
 		effect((_p$) => {
-			var _v$ = props.label, _v$2 = cn("flex size-14 touch-none select-none items-center justify-center rounded-2xl border border-white/25 bg-slate-950/65 p-2 text-white shadow-lg backdrop-blur-sm transition active:scale-95 [-webkit-touch-callout:none] [-webkit-user-select:none]", props.class);
+			var _v$ = props.label, _v$2 = cn("flex size-14 touch-none select-none items-center justify-center rounded-2xl border border-scrim-edge/25 bg-scrim/65 p-2 text-scrim-foreground shadow-lg backdrop-blur-sm transition active:scale-95 [-webkit-touch-callout:none] [-webkit-user-select:none]", props.class);
 			_v$ !== _p$.e && setAttribute(_el$, "aria-label", _p$.e = _v$);
 			_v$2 !== _p$.t && className(_el$, _p$.t = _v$2);
 			return _p$;
@@ -116,7 +116,7 @@ function OnScreenControls(props) {
 					size: "icon-lg",
 					"aria-label": "Zoom out",
 					title: "Zoom out",
-					"class": "border border-white/25 bg-slate-950/65 text-white shadow-lg backdrop-blur-sm hover:bg-slate-900/80",
+					"class": "border border-scrim-edge/25 bg-scrim/65 text-scrim-foreground shadow-lg backdrop-blur-sm hover:bg-scrim/80",
 					onClick: () => props.onZoomOut?.(),
 					get children() {
 						return createComponent(ZoomOut, { "aria-hidden": "true" });
@@ -128,7 +128,7 @@ function OnScreenControls(props) {
 					size: "icon-lg",
 					"aria-label": "Zoom in",
 					title: "Zoom in",
-					"class": "border border-white/25 bg-slate-950/65 text-white shadow-lg backdrop-blur-sm hover:bg-slate-900/80",
+					"class": "border border-scrim-edge/25 bg-scrim/65 text-scrim-foreground shadow-lg backdrop-blur-sm hover:bg-scrim/80",
 					onClick: () => props.onZoomIn?.(),
 					get children() {
 						return createComponent(ZoomIn, { "aria-hidden": "true" });

package/dist/components/ui/dialog.js

@@ -4,7 +4,7 @@ import { X } from "lucide-solid";
 import { splitProps } from "solid-js";
 import { Dialog as Dialog$1 } from "@kobalte/core/dialog";
 //#region src/components/ui/dialog.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<div class="fixed inset-0 z-[120] flex items-center justify-center p-4">`);
+var _tmpl$ = /*#__PURE__*/ template(`<div class="fixed inset-0 z-(--z-dialog) flex items-center justify-center p-4">`);
 var _tmpl$2 = /*#__PURE__*/ template(`<div data-slot=dialog-header>`);
 var _tmpl$3 = /*#__PURE__*/ template(`<div data-slot=dialog-footer>`);
 function Dialog(props) {
@@ -27,7 +27,7 @@ function DialogOverlay(props) {
 	return createComponent(Dialog$1.Overlay, mergeProps({
 		"data-slot": "dialog-overlay",
 		get ["class"]() {
-			return cn("fixed inset-0 z-[120] bg-slate-950/55 backdrop-blur-[2px]", local.class);
+			return cn("fixed inset-0 z-(--z-dialog) bg-scrim/55 backdrop-blur-[2px]", local.class);
 		}
 	}, rest));
 }

package/dist/components/ui/drawer.js

@@ -36,7 +36,7 @@ function DrawerOverlay(props) {
 	return createComponent(DrawerPrimitive.Overlay, mergeProps({
 		"data-slot": "drawer-overlay",
 		get ["class"]() {
-			return cn("fixed inset-0 z-[110] bg-black/10 backdrop-blur-xs transition-opacity duration-300 data-closed:opacity-0", local.class);
+			return cn("fixed inset-0 z-(--z-drawer) bg-scrim/10 backdrop-blur-xs transition-opacity duration-300 data-closed:opacity-0", local.class);
 		}
 	}, rest));
 }
@@ -63,7 +63,7 @@ function DrawerContent(props) {
 			return [createComponent(DrawerOverlay, {}), createComponent(DrawerPrimitive.Content, mergeProps({
 				"data-slot": "drawer-content",
 				get ["class"]() {
-					return cn("group/drawer-content fixed z-[110] flex flex-col overflow-hidden bg-popover text-sm text-popover-foreground shadow-lg outline-none transition-transform duration-300 ease-out will-change-transform", SIDE_CLASSES[side()], local.class);
+					return cn("group/drawer-content fixed z-(--z-drawer) flex flex-col overflow-hidden bg-popover text-sm text-popover-foreground shadow-lg outline-none transition-transform duration-300 ease-out will-change-transform", SIDE_CLASSES[side()], local.class);
 				}
 			}, rest, { get children() {
 				return [createComponent(Show, {

package/dist/components/ui/dropdown-menu.js

@@ -35,7 +35,7 @@ function DropdownMenuContent(props) {
 				return local.sideOffset ?? 4;
 			},
 			get ["class"]() {
-				return cn("z-[140] max-h-(--kb-popper-available-height) min-w-32 origin-(--kb-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-expanded:animate-in data-expanded:fade-in-0 data-expanded:zoom-in-95", local.class);
+				return cn("z-(--z-menu) max-h-(--kb-popper-available-height) min-w-32 origin-(--kb-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-expanded:animate-in data-expanded:fade-in-0 data-expanded:zoom-in-95", local.class);
 			}
 		}, rest, { get children() {
 			return local.children;

package/dist/components/ui/tooltip.js

@@ -44,7 +44,7 @@ function TooltipContent(props) {
 				return local.sideOffset ?? 4;
 			},
 			get ["class"]() {
-				return cn("z-[160] max-w-72 rounded-md bg-popover px-2.5 py-1.5 text-sm leading-5 text-popover-foreground shadow-md ring-1 ring-foreground/10 data-closed:animate-out data-closed:fade-out-0 data-expanded:animate-in data-expanded:fade-in-0", local.class);
+				return cn("z-(--z-tooltip) max-w-72 rounded-md bg-popover px-2.5 py-1.5 text-sm leading-5 text-popover-foreground shadow-md ring-1 ring-foreground/10 data-closed:animate-out data-closed:fade-out-0 data-expanded:animate-in data-expanded:fade-in-0", local.class);
 			}
 		}, rest, { get children() {
 			return local.children;

package/dist/components/version-dialog.js

@@ -6,11 +6,11 @@ import { Check, Download, ExternalLink, FileText, LoaderCircle, RefreshCw, Spark
 import { Show, createEffect, createMemo, createSignal } from "solid-js";
 //#region src/components/version-dialog.tsx
 var _tmpl$ = /*#__PURE__*/ template(`<div class="flex items-center gap-3"><span class="flex size-10 items-center justify-center rounded-xl bg-primary text-primary-foreground"></span><div>`);
-var _tmpl$2 = /*#__PURE__*/ template(`<section class="rounded-xl border border-primary/35 bg-primary/8 p-4"aria-label="Available update"><div class="flex flex-wrap items-start justify-between gap-4"><div class=space-y-1><p class="flex items-center gap-2 text-sm font-semibold">Version <!> is ready</p><p class="text-sm text-muted-foreground">The signed installer will be verified before Adea restarts.`);
-var _tmpl$3 = /*#__PURE__*/ template(`<p class="flex items-center gap-2 text-sm text-emerald-700 dark:text-emerald-300"role=status>Adea is up to date.`);
+var _tmpl$2 = /*#__PURE__*/ template(`<section class="rounded-xl border border-primary/35 bg-primary/8 p-4"aria-label="Available update"><div class="flex flex-wrap items-start justify-between gap-4"><div class="flex flex-col gap-1"><p class="flex items-center gap-2 text-sm font-semibold">Version <!> is ready</p><p class="text-sm text-muted-foreground">The signed installer will be verified before Adea restarts.`);
+var _tmpl$3 = /*#__PURE__*/ template(`<p class="flex items-center gap-2 text-sm text-success"role=status>Adea is up to date.`);
 var _tmpl$4 = /*#__PURE__*/ template(`<p class="rounded-lg border border-destructive/35 bg-destructive/8 px-3 py-2 text-sm text-destructive"role=alert>`);
-var _tmpl$5 = /*#__PURE__*/ template(`<section class=space-y-2 aria-labelledby=adea-release-notes><div><h2 id=adea-release-notes class="text-sm font-semibold">What changed in this release</h2><p class="text-xs text-muted-foreground">Release notes are shown as readable text.</p></div><div class="max-h-52 overflow-y-auto whitespace-pre-wrap rounded-xl border bg-background/45 p-4 font-mono text-xs leading-5 text-muted-foreground">`);
-var _tmpl$6 = /*#__PURE__*/ template(`<div class="min-h-0 space-y-5 overflow-y-auto p-6"><section class="rounded-xl border bg-background/45 p-4"aria-label="Version status"><div class="flex flex-wrap items-start justify-between gap-4"><div class=space-y-1><p class="text-xs font-semibold uppercase tracking-[0.14em] text-muted-foreground">Installed version</p><p class="text-xl font-semibold tracking-tight">v</p><p class="text-sm text-muted-foreground"></p></div></div></section><section class=space-y-2 aria-labelledby=agent-hq-changelog><div><h2 id=agent-hq-changelog class="text-sm font-semibold">Installed changelog</h2><p class="text-xs text-muted-foreground">A plain-text history of the installed channel.</p></div><div class="max-h-72 overflow-y-auto whitespace-pre-wrap rounded-xl border bg-background/45 p-4 font-mono text-xs leading-5 text-muted-foreground">`);
+var _tmpl$5 = /*#__PURE__*/ template(`<section class="flex flex-col gap-2"aria-labelledby=adea-release-notes><div><h2 id=adea-release-notes class="text-sm font-semibold">What changed in this release</h2><p class="text-xs text-muted-foreground">Release notes are shown as readable text.</p></div><div class="max-h-52 overflow-y-auto whitespace-pre-wrap rounded-xl border bg-background/45 p-4 font-mono text-xs leading-5 text-muted-foreground">`);
+var _tmpl$6 = /*#__PURE__*/ template(`<div class="flex min-h-0 flex-col gap-5 overflow-y-auto p-6"><section class="rounded-xl border bg-background/45 p-4"aria-label="Version status"><div class="flex flex-wrap items-start justify-between gap-4"><div class="flex flex-col gap-1"><p class="text-xs font-semibold uppercase tracking-[0.14em] text-muted-foreground">Installed version</p><p class="text-xl font-semibold tracking-tight">v</p><p class="text-sm text-muted-foreground"></p></div></div></section><section class="flex flex-col gap-2"aria-labelledby=agent-hq-changelog><div><h2 id=agent-hq-changelog class="text-sm font-semibold">Installed changelog</h2><p class="text-xs text-muted-foreground">A plain-text history of the installed channel.</p></div><div class="max-h-72 overflow-y-auto whitespace-pre-wrap rounded-xl border bg-background/45 p-4 font-mono text-xs leading-5 text-muted-foreground">`);
 var _tmpl$7 = /*#__PURE__*/ template(`<p class="text-xs text-muted-foreground">Released `);
 function errorMessage(caught, fallback) {
 	if (caught instanceof Error && caught.message) return caught.message;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adea-ai/ui",
-  "version": "0.25.12",
+  "version": "0.25.14",
   "description": "Shared UI kit for Adea: Kobalte/corvu-backed Solid primitives, workspace shells, and theme styles.",
   "keywords": [
     "components",

package/src/components/on-screen-controls.tsx

@@ -58,7 +58,7 @@ function ControlButton(props: ControlButtonProps) {
       type="button"
       aria-label={props.label}
       class={cn(
-        'flex size-14 touch-none select-none items-center justify-center rounded-2xl border border-white/25 bg-slate-950/65 p-2 text-white shadow-lg backdrop-blur-sm transition active:scale-95 [-webkit-touch-callout:none] [-webkit-user-select:none]',
+        'flex size-14 touch-none select-none items-center justify-center rounded-2xl border border-scrim-edge/25 bg-scrim/65 p-2 text-scrim-foreground shadow-lg backdrop-blur-sm transition active:scale-95 [-webkit-touch-callout:none] [-webkit-user-select:none]',
         props.class
       )}
       onContextMenu={(event) => event.preventDefault()}
@@ -90,7 +90,7 @@ export function OnScreenControls(props: OnScreenControlsProps) {
       class="pointer-events-none fixed inset-x-4 bottom-4 z-30 flex select-none items-end justify-between gap-4 pb-[env(safe-area-inset-bottom)] sm:inset-x-6 sm:bottom-6 [-webkit-touch-callout:none] [-webkit-user-select:none]"
     >
       <Show when={showMovementControls()}>
-        <div class="pointer-events-auto grid grid-cols-3 gap-1.5 rounded-3xl bg-slate-950/20 p-2 backdrop-blur-[2px]">
+        <div class="pointer-events-auto grid grid-cols-3 gap-1.5 rounded-3xl bg-scrim/20 p-2 backdrop-blur-[2px]">
           <span />
           <ControlButton code="KeyW" label="Move forward" class="size-12 rounded-xl text-xl">
             ▲
@@ -110,7 +110,7 @@ export function OnScreenControls(props: OnScreenControlsProps) {
       <div class="pointer-events-auto ml-auto flex flex-col items-end gap-2">
         <Show when={showZoomControls()}>
           <div
-            class="flex items-center gap-1.5 rounded-2xl bg-slate-950/20 p-1.5 backdrop-blur-[2px]"
+            class="flex items-center gap-1.5 rounded-2xl bg-scrim/20 p-1.5 backdrop-blur-[2px]"
             role="group"
             aria-label="Camera zoom"
           >
@@ -120,7 +120,7 @@ export function OnScreenControls(props: OnScreenControlsProps) {
               size="icon-lg"
               aria-label="Zoom out"
               title="Zoom out"
-              class="border border-white/25 bg-slate-950/65 text-white shadow-lg backdrop-blur-sm hover:bg-slate-900/80"
+              class="border border-scrim-edge/25 bg-scrim/65 text-scrim-foreground shadow-lg backdrop-blur-sm hover:bg-scrim/80"
               onClick={() => props.onZoomOut?.()}
             >
               <ZoomOut aria-hidden="true" />
@@ -131,7 +131,7 @@ export function OnScreenControls(props: OnScreenControlsProps) {
               size="icon-lg"
               aria-label="Zoom in"
               title="Zoom in"
-              class="border border-white/25 bg-slate-950/65 text-white shadow-lg backdrop-blur-sm hover:bg-slate-900/80"
+              class="border border-scrim-edge/25 bg-scrim/65 text-scrim-foreground shadow-lg backdrop-blur-sm hover:bg-scrim/80"
               onClick={() => props.onZoomIn?.()}
             >
               <ZoomIn aria-hidden="true" />

package/src/components/ui/dialog.tsx

@@ -31,7 +31,7 @@ function DialogOverlay(props: ComponentProps<typeof DialogPrimitive.Overlay>) {
   return (
     <DialogPrimitive.Overlay
       data-slot="dialog-overlay"
-      class={cn('fixed inset-0 z-[120] bg-slate-950/55 backdrop-blur-[2px]', local.class)}
+      class={cn('fixed inset-0 z-(--z-dialog) bg-scrim/55 backdrop-blur-[2px]', local.class)}
       {...rest}
     />
   )
@@ -46,7 +46,7 @@ function DialogContent(
       <DialogOverlay />
       {/* Flex centering keeps the dialog on whole pixels; a translate-based
           center can land on a half pixel and shift every edge. */}
-      <div class="fixed inset-0 z-[120] flex items-center justify-center p-4">
+      <div class="fixed inset-0 z-(--z-dialog) flex items-center justify-center p-4">
         <DialogPrimitive.Content
           data-slot="dialog-content"
           class={cn(

package/src/components/ui/drawer.tsx

@@ -56,7 +56,7 @@ function DrawerOverlay(props: ComponentProps<typeof DrawerPrimitive.Overlay>) {
       // The scrim keeps the pre-Solid 10% black the committed screenshots
       // were taken against; 25% dimmed the page behind every drawer.
       class={cn(
-        'fixed inset-0 z-[110] bg-black/10 backdrop-blur-xs transition-opacity duration-300 data-closed:opacity-0',
+        'fixed inset-0 z-(--z-drawer) bg-scrim/10 backdrop-blur-xs transition-opacity duration-300 data-closed:opacity-0',
         local.class
       )}
       {...rest}
@@ -93,7 +93,7 @@ function DrawerContent(props: DrawerContentProps) {
       <DrawerPrimitive.Content
         data-slot="drawer-content"
         class={cn(
-          'group/drawer-content fixed z-[110] flex flex-col overflow-hidden bg-popover text-sm text-popover-foreground shadow-lg outline-none transition-transform duration-300 ease-out will-change-transform',
+          'group/drawer-content fixed z-(--z-drawer) flex flex-col overflow-hidden bg-popover text-sm text-popover-foreground shadow-lg outline-none transition-transform duration-300 ease-out will-change-transform',
           SIDE_CLASSES[side()],
           local.class
         )}

package/src/components/ui/dropdown-menu.tsx

@@ -34,7 +34,7 @@ function DropdownMenuContent(props: DropdownMenuContentProps) {
         placement={placement()}
         gutter={local.sideOffset ?? 4}
         class={cn(
-          'z-[140] max-h-(--kb-popper-available-height) min-w-32 origin-(--kb-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-expanded:animate-in data-expanded:fade-in-0 data-expanded:zoom-in-95',
+          'z-(--z-menu) max-h-(--kb-popper-available-height) min-w-32 origin-(--kb-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-expanded:animate-in data-expanded:fade-in-0 data-expanded:zoom-in-95',
           local.class
         )}
         {...rest}

package/src/components/ui/tooltip.tsx

@@ -47,7 +47,7 @@ function TooltipContent(props: TooltipContentProps) {
         placement={placement()}
         gutter={local.sideOffset ?? 4}
         class={cn(
-          'z-[160] max-w-72 rounded-md bg-popover px-2.5 py-1.5 text-sm leading-5 text-popover-foreground shadow-md ring-1 ring-foreground/10 data-closed:animate-out data-closed:fade-out-0 data-expanded:animate-in data-expanded:fade-in-0',
+          'z-(--z-tooltip) max-w-72 rounded-md bg-popover px-2.5 py-1.5 text-sm leading-5 text-popover-foreground shadow-md ring-1 ring-foreground/10 data-closed:animate-out data-closed:fade-out-0 data-expanded:animate-in data-expanded:fade-in-0',
           local.class
         )}
         {...rest}

package/src/components/version-dialog.tsx

@@ -213,10 +213,10 @@ export function VersionDialog(props: {
           </div>
         </DialogHeader>
 
-        <div class="min-h-0 space-y-5 overflow-y-auto p-6">
+        <div class="flex min-h-0 flex-col gap-5 overflow-y-auto p-6">
           <section class="rounded-xl border bg-background/45 p-4" aria-label="Version status">
             <div class="flex flex-wrap items-start justify-between gap-4">
-              <div class="space-y-1">
+              <div class="flex flex-col gap-1">
                 <p class="text-xs font-semibold uppercase tracking-[0.14em] text-muted-foreground">
                   Installed version
                 </p>
@@ -267,7 +267,7 @@ export function VersionDialog(props: {
               aria-label="Available update"
             >
               <div class="flex flex-wrap items-start justify-between gap-4">
-                <div class="space-y-1">
+                <div class="flex flex-col gap-1">
                   <p class="flex items-center gap-2 text-sm font-semibold">
                     <Sparkles class="size-4 text-primary" aria-hidden="true" />
                     Version {update()?.available_version} is ready
@@ -300,10 +300,7 @@ export function VersionDialog(props: {
           </Show>
 
           <Show when={update()?.phase === 'current'}>
-            <p
-              class="flex items-center gap-2 text-sm text-emerald-700 dark:text-emerald-300"
-              role="status"
-            >
+            <p class="flex items-center gap-2 text-sm text-success" role="status">
               <Check class="size-4" aria-hidden="true" />
               Adea is up to date.
             </p>
@@ -319,7 +316,7 @@ export function VersionDialog(props: {
           </Show>
 
           <Show when={releaseNotes()}>
-            <section class="space-y-2" aria-labelledby="adea-release-notes">
+            <section class="flex flex-col gap-2" aria-labelledby="adea-release-notes">
               <div>
                 <h2 id="adea-release-notes" class="text-sm font-semibold">
                   What changed in this release
@@ -334,7 +331,7 @@ export function VersionDialog(props: {
             </section>
           </Show>
 
-          <section class="space-y-2" aria-labelledby="agent-hq-changelog">
+          <section class="flex flex-col gap-2" aria-labelledby="agent-hq-changelog">
             <div>
               <h2 id="agent-hq-changelog" class="text-sm font-semibold">
                 Installed changelog

package/src/styles/base.css

@@ -2,6 +2,8 @@
    utilities the components rely on. Framework-neutral CSS only — no component
    runtime, no styling tokens (those live in theme.css and friends). */
 
+@import 'tw-animate-css';
+
 @theme inline {
   @keyframes accordion-down {
     from {

package/src/styles/globals.css

@@ -1,93 +1,7 @@
+/* Prebuilt sheet for consumers that want the full kit: Tailwind, the neutral
+   base layer, and the shared tokens/base styles from theme.css. Keep tokens in
+   theme.css only — this file must not duplicate them. */
+
 @import 'tailwindcss';
 @import './base.css';
-
-/* Include shared components when this stylesheet is consumed by an app. */
-@source "../";
-
-@custom-variant dark (&:is(.dark *));
-
-@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-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-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-}
-
-:root {
-  --radius: 0.75rem;
-  --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);
-  --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);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-}
-
-.dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: 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 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
-}
-
-@layer base {
-  * {
-    border-color: var(--border);
-  }
-
-  html,
-  body {
-    min-height: 100%;
-  }
-
-  body {
-    position: relative;
-    margin: 0;
-    background: var(--background);
-    color: var(--foreground);
-  }
-}
+@import './theme.css';

package/src/styles/theme.css

@@ -22,6 +22,9 @@
   --color-accent-foreground: var(--accent-foreground);
   --color-destructive: var(--destructive);
   --color-success: var(--success);
+  --color-scrim: var(--scrim);
+  --color-scrim-foreground: var(--scrim-foreground);
+  --color-scrim-edge: var(--scrim-edge);
   --color-border: var(--border);
   --color-input: var(--input);
   --color-ring: var(--ring);
@@ -50,6 +53,12 @@
   --destructive: oklch(0.577 0.245 27.325);
   /* Mirrors the literals the success button variant used to carry. */
   --success: #1a7f37;
+  /* Theme-invariant dark glass for overlays and on-screen controls
+     (Tailwind slate-950). Same value in light and dark themes; the
+     foreground/edge tokens are the text and hairline drawn on it. */
+  --scrim: oklch(0.129 0.042 264.695);
+  --scrim-foreground: #fff;
+  --scrim-edge: #fff;
   --border: oklch(0.922 0 0);
   --input: oklch(0.922 0 0);
   --ring: oklch(0.708 0 0);
@@ -57,6 +66,12 @@
      values the logo used to hardcode. */
   --workspace-logo-surface: #111827;
   --workspace-logo-foreground: #f8fafc;
+  /* Overlay stacking scale — reference it as z-(--z-drawer) etc. in
+     components; do not add one-off z-[N] values. */
+  --z-drawer: 110;
+  --z-dialog: 120;
+  --z-menu: 140;
+  --z-tooltip: 160;
 }
 
 .dark {