@gratiaos/ui 1.0.5 → 1.1.0

package/README.md

@@ -7,6 +7,15 @@
 **Garden UI** is the shared component library that gives shape and soul to the Garden.  
 It’s where headless primitives meet design tokens, growing together into a living interface system.
 
+## 🛰️ Garden Stack naming (infra-facing)
+
+- **Pattern Engine** → underlying model stack (training / inference / retrieval). Use this wording for infra/capability talk.
+- **Presence Node** → surfaced endpoint humans touch (web UI, CLI, scripts, voice, agents).
+- **Mode** → behavioral / conversational contract for a Presence Node (e.g. `Codex-mode`, `Monday-mode`). Styles, not identities.
+- **Garden Stack** → Pattern Engine + Presence Nodes + Modes working together.
+
+Route any “AI” mention to the correct layer so UI docs stay aligned with Garden + M3.
+
 ---
 
 ## ✨ Vision

package/dist/footer/PersonalPulse.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+/**
+ * Garden UI — PersonalPulse primitive (headless)
+ * ----------------------------------------------
+ * Whisper: "tiny beacon, still here." 🌬️
+ *
+ * Purpose
+ *  • Mirrors the shared pulse so the interface feels alive even when idle.
+ *  • Falls back to a soft idle rhythm when no beats arrive for a while.
+ */
+export declare const PersonalPulse: React.FC;
+//# sourceMappingURL=PersonalPulse.d.ts.map

package/dist/footer/PersonalPulse.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PersonalPulse.d.ts","sourceRoot":"","sources":["../../src/footer/PersonalPulse.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAiEjC,CAAC"}

package/dist/footer/PersonalPulse.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { pulse$ } from '@gratiaos/presence-kernel';
+/**
+ * Garden UI — PersonalPulse primitive (headless)
+ * ----------------------------------------------
+ * Whisper: "tiny beacon, still here." 🌬️
+ *
+ * Purpose
+ *  • Mirrors the shared pulse so the interface feels alive even when idle.
+ *  • Falls back to a soft idle rhythm when no beats arrive for a while.
+ */
+export const PersonalPulse = () => {
+    const ref = React.useRef(null);
+    const [reduceMotion, setReduceMotion] = React.useState(() => {
+        if (typeof window === 'undefined')
+            return false;
+        return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    });
+    React.useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
+        const update = () => setReduceMotion(mq.matches);
+        mq.addEventListener('change', update);
+        update();
+        return () => mq.removeEventListener('change', update);
+    }, []);
+    React.useEffect(() => {
+        if (reduceMotion) {
+            const node = ref.current;
+            if (node)
+                node.style.animation = 'none';
+            return;
+        }
+        const node = ref.current;
+        if (!node)
+            return;
+        let idleTimer = null;
+        const beginIdle = () => {
+            if (!node)
+                return;
+            node.style.animation = 'idle-pulse 6s ease-in-out infinite';
+        };
+        const cancelIdle = () => {
+            if (!node)
+                return;
+            node.style.animation = 'none';
+        };
+        const handleBeat = () => {
+            cancelIdle();
+            node.animate([
+                { opacity: 0.25, transform: 'scale(1)' },
+                { opacity: 0.55, transform: 'scale(1.15)' },
+                { opacity: 0.25, transform: 'scale(1)' },
+            ], {
+                duration: 420,
+                easing: 'ease-out',
+            });
+            if (idleTimer)
+                clearTimeout(idleTimer);
+            idleTimer = window.setTimeout(beginIdle, 8000);
+        };
+        const stop = pulse$.subscribe(handleBeat);
+        idleTimer = window.setTimeout(beginIdle, 8000);
+        return () => {
+            stop();
+            if (idleTimer)
+                clearTimeout(idleTimer);
+        };
+    }, [reduceMotion]);
+    return _jsx("div", { ref: ref, "data-ui": "personal-pulse", "aria-hidden": "true" });
+};
+//# sourceMappingURL=PersonalPulse.js.map

package/dist/footer/PersonalPulse.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PersonalPulse.js","sourceRoot":"","sources":["../../src/footer/PersonalPulse.tsx"],"names":[],"mappings":"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"}

package/dist/header/ConductorChip.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { type KernelAuthority } from '@gratiaos/presence-kernel';
+/**
+ * Garden UI — ConductorChip primitive (headless)
+ * ---------------------------------------------
+ * Whisper: "name the conductor softly." 🌬️
+ *
+ * Purpose
+ *  • Display the active presence authority as a compact HUD chip.
+ *  • Mirrors kernel signals without requiring a kernel instance.
+ *
+ * Data API
+ *  • [data-ui="conductor-chip"] — root hook for skins.
+ *  • [data-authority="…"]       — matches KernelAuthority enum.
+ *
+ * A11y
+ *  • Title defaults to "Authority: …" unless overridden via props.
+ *
+ * Theming
+ *  • Reads tone tokens (--tone-accent, --tone-ink) for visuals.
+ *
+ * Notes
+ *  • Headless: visuals live in styles/header.css.
+ */
+export interface ConductorChipProps extends React.ComponentPropsWithoutRef<'span'> {
+    /** Optional custom label formatter. Receives the raw authority string. */
+    formatLabel?: (authority: KernelAuthority) => React.ReactNode;
+}
+export declare const ConductorChip: React.FC<ConductorChipProps>;
+//# sourceMappingURL=ConductorChip.d.ts.map

package/dist/header/ConductorChip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConductorChip.d.ts","sourceRoot":"","sources":["../../src/header/ConductorChip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAE7E;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC;IAChF,0EAA0E;IAC1E,WAAW,CAAC,EAAE,CAAC,SAAS,EAAE,eAAe,KAAK,KAAK,CAAC,SAAS,CAAC;CAC/D;AAQD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAkBtD,CAAC"}

package/dist/header/ConductorChip.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { authority$ } from '@gratiaos/presence-kernel';
+const DEFAULT_LABELS = {
+    'local-primary': 'Local',
+    'remote-primary': 'Remote',
+    distributed: 'Mesh',
+};
+export const ConductorChip = ({ className, title, children, formatLabel, ...rest }) => {
+    const [authority, setAuthority] = React.useState(authority$.value);
+    React.useEffect(() => authority$.subscribe(setAuthority), []);
+    const label = React.useMemo(() => {
+        if (formatLabel)
+            return formatLabel(authority);
+        return DEFAULT_LABELS[authority] ?? authority;
+    }, [authority, formatLabel]);
+    const resolvedTitle = title ?? `Authority: ${authority}`;
+    const resolvedClassName = ['conductor-chip', className].filter(Boolean).join(' ') || undefined;
+    return (_jsx("span", { "data-ui": "conductor-chip", "data-authority": authority, className: resolvedClassName, title: resolvedTitle, ...rest, children: children ?? label }));
+};
+//# sourceMappingURL=ConductorChip.js.map

package/dist/header/ConductorChip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConductorChip.js","sourceRoot":"","sources":["../../src/header/ConductorChip.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAwB,MAAM,2BAA2B,CAAC;AA6B7E,MAAM,cAAc,GAA2B;IAC7C,eAAe,EAAE,OAAO;IACxB,gBAAgB,EAAE,QAAQ;IAC1B,WAAW,EAAE,MAAM;CACpB,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAiC,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,GAAG,IAAI,EAAE,EAAE,EAAE;IAClH,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAkB,UAAU,CAAC,KAAK,CAAC,CAAC;IAEpF,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,SAAS,CAAC,YAAY,CAAC,EAAE,EAAE,CAAC,CAAC;IAE9D,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC/B,IAAI,WAAW;YAAE,OAAO,WAAW,CAAC,SAAS,CAAC,CAAC;QAC/C,OAAO,cAAc,CAAC,SAAS,CAAC,IAAI,SAAS,CAAC;IAChD,CAAC,EAAE,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC,CAAC;IAE7B,MAAM,aAAa,GAAG,KAAK,IAAI,cAAc,SAAS,EAAE,CAAC;IACzD,MAAM,iBAAiB,GAAG,CAAC,gBAAgB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,SAAS,CAAC;IAE/F,OAAO,CACL,0BAAc,gBAAgB,oBAAiB,SAAS,EAAE,SAAS,EAAE,iBAAiB,EAAE,KAAK,EAAE,aAAa,KAAM,IAAI,YACnH,QAAQ,IAAI,KAAK,GACb,CACR,CAAC;AACJ,CAAC,CAAC"}

package/dist/header/Constellation.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+/**
+ * Garden UI — Constellation primitive (headless)
+ * ---------------------------------------------
+ * Whisper: "quiet company overhead." 🌬️
+ *
+ * Purpose
+ *  • Minimal belonging indicator — signals presence context without interaction.
+ *
+ * Data API
+ *  • [data-ui="constellation"] — root wrapper hook.
+ *
+ * Notes
+ *  • Static dots; peers are abstract and not tied to live presence counts.
+ */
+export declare const Constellation: React.FC;
+//# sourceMappingURL=Constellation.d.ts.map

package/dist/header/Constellation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Constellation.d.ts","sourceRoot":"","sources":["../../src/header/Constellation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAUjC,CAAC"}

package/dist/header/Constellation.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Garden UI — Constellation primitive (headless)
+ * ---------------------------------------------
+ * Whisper: "quiet company overhead." 🌬️
+ *
+ * Purpose
+ *  • Minimal belonging indicator — signals presence context without interaction.
+ *
+ * Data API
+ *  • [data-ui="constellation"] — root wrapper hook.
+ *
+ * Notes
+ *  • Static dots; peers are abstract and not tied to live presence counts.
+ */
+export const Constellation = () => {
+    return (_jsxs("div", { "data-ui": "constellation", "aria-hidden": "true", children: [_jsx("span", { className: "dot" }), _jsx("span", { className: "dot" }), _jsx("span", { className: "dot active" }), _jsx("span", { className: "dot" }), _jsx("span", { className: "dot" })] }));
+};
+//# sourceMappingURL=Constellation.js.map

package/dist/header/Constellation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Constellation.js","sourceRoot":"","sources":["../../src/header/Constellation.tsx"],"names":[],"mappings":";AAEA;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,aAAa,GAAa,GAAG,EAAE;IAC1C,OAAO,CACL,0BAAa,eAAe,iBAAa,MAAM,aAC7C,eAAM,SAAS,EAAC,KAAK,GAAG,EACxB,eAAM,SAAS,EAAC,KAAK,GAAG,EACxB,eAAM,SAAS,EAAC,YAAY,GAAG,EAC/B,eAAM,SAAS,EAAC,KAAK,GAAG,EACxB,eAAM,SAAS,EAAC,KAAK,GAAG,IACpB,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/index.d.ts

@@ -7,4 +7,7 @@ export * from './primitives/badge.js';
 export * from './primitives/toast.js';
 export * from './primitives/whisper.js';
 export * from './hooks/index.js';
+export * from './header/ConductorChip.js';
+export * from './header/Constellation.js';
+export * from './footer/PersonalPulse.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC"}

package/dist/index.js

@@ -7,4 +7,7 @@ export * from './primitives/badge.js';
 export * from './primitives/toast.js';
 export * from './primitives/whisper.js';
 export * from './hooks/index.js';
+export * from './header/ConductorChip.js';
+export * from './header/Constellation.js';
+export * from './footer/PersonalPulse.js';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gratiaos/ui",
-  "version": "1.0.5",
+  "version": "1.1.0",
   "funding": "https://github.com/sponsors/GratiaOS",
   "type": "module",
   "license": "AGPL-3.0-only",
@@ -92,6 +92,9 @@
   "peerDependencies": {
     "react": "^18 || ^19"
   },
+  "dependencies": {
+    "@gratiaos/presence-kernel": "workspace:*"
+  },
   "devDependencies": {
     "typescript": "^5.9.3",
     "react": "^19.2.0",

package/styles/base.css

@@ -6,3 +6,4 @@
 @import './toast.css';
 @import './badge.css';
 @import './whisper.css';
+@import './header.css';

package/styles/header.css

@@ -0,0 +1,93 @@
+/* ─────────────────────────────────────────
+   Garden UI — ConductorChip skin (opt-in)
+   Whisper: "name the conductor softly." 🌬️
+   Purpose | Data API | Notes
+   ─────────────────────────────────────── */
+@layer components {
+  [data-ui='conductor-chip'] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.35rem;
+    padding: 0.125rem 0.5625rem;
+    border-radius: 9999px;
+    font-size: 0.6875rem;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    text-transform: uppercase;
+    color: var(--tone-ink);
+    background: color-mix(in oklab, var(--tone-accent) 22%, transparent);
+    border: 1px solid color-mix(in oklab, var(--tone-accent) 38%, transparent);
+    box-shadow: var(--tone-glow, 0 0 24px color-mix(in oklab, var(--tone-accent) 30%, transparent));
+    backdrop-filter: blur(8px);
+    pointer-events: auto;
+    transition:
+      background var(--duration-snug, 160ms) var(--ease-soft, ease),
+      color var(--duration-snug, 160ms) var(--ease-soft, ease),
+      border-color var(--duration-snug, 160ms) var(--ease-soft, ease),
+      box-shadow var(--duration-snug, 160ms) var(--ease-soft, ease);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    [data-ui='conductor-chip'] {
+      transition: none;
+    }
+  }
+
+  [data-ui='personal-pulse'] {
+    position: absolute;
+    bottom: 18px;
+    left: 72px;
+    width: 6px;
+    height: 6px;
+    border-radius: 999px;
+    background: var(--tone-accent);
+    opacity: 0.25;
+    will-change: transform, opacity;
+    pointer-events: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    [data-ui='personal-pulse'] {
+      animation: none !important;
+    }
+  }
+
+  @keyframes idle-pulse {
+    0%,
+    100% {
+      opacity: 0.18;
+      transform: scale(1);
+    }
+    50% {
+      opacity: 0.4;
+      transform: scale(1.12);
+    }
+  }
+
+  :root {
+    --constellation-dot: color-mix(in oklab, var(--tone-ink) 55%, transparent);
+    --constellation-active: var(--tone-accent);
+  }
+
+  [data-ui='constellation'] {
+    display: flex;
+    gap: 8px;
+    justify-content: center;
+    opacity: 0.32;
+    pointer-events: none;
+    user-select: none;
+  }
+
+  [data-ui='constellation'] .dot {
+    width: 3px;
+    height: 3px;
+    border-radius: 50%;
+    background: var(--constellation-dot);
+  }
+
+  [data-ui='constellation'] .dot.active {
+    background: var(--constellation-active);
+    opacity: 0.9;
+  }
+}

package/styles/pad.css

@@ -1,17 +1,28 @@
 /* 1) Pad runtime mappings — inherit from global theme */
 @layer base {
   :root {
+    /* Tone alignment — sync Pad surfacing with main layout frequency mix */
+    --tone-surface: var(--color-surface, #0F1317);
+    --tone-ink: var(--color-ink, var(--color-text, #E6EDF5));
+    --tone-accent: var(--color-accent, #3ED0C8);
+
+    --pad-bg-0: color-mix(in oklch, var(--tone-surface) 94%, var(--tone-ink));
+    --pad-bg-1: color-mix(in oklch, var(--tone-surface) 90%, var(--tone-ink));
+    --pad-ink-muted: color-mix(in oklch, var(--tone-ink) 65%, var(--tone-surface));
+    --pad-border-soft: color-mix(in oklch, var(--tone-ink) 8%, var(--tone-surface));
+    --pad-focus-ring: color-mix(in oklch, var(--tone-accent) 70%, transparent);
+
     /* Surfaces & text */
-    --pad-surface: var(--color-surface);
-    --pad-elev: var(--color-elev);
-    --pad-border: var(--color-border);
-    --pad-text: var(--color-text);
-    --pad-text-muted: var(--color-muted);
+    --pad-surface: var(--pad-bg-0, var(--color-surface));
+    --pad-elev: var(--pad-bg-1, var(--color-elev));
+    --pad-border: var(--pad-border-soft, var(--color-border));
+    --pad-text: var(--tone-ink, var(--color-text));
+    --pad-text-muted: var(--pad-ink-muted, var(--color-muted));
     --pad-text-subtle: var(--color-subtle);
     --pad-text-faint: var(--color-faint);
 
     /* Accent system */
-    --pad-accent: var(--color-accent);
+    --pad-accent: var(--tone-accent);
     --pad-onaccent: var(--color-on-accent);
 
     /* Shape & depth */
@@ -44,6 +55,43 @@
   .pad-ring {
     box-shadow: 0 0 0 3px var(--pad-ring);
   }
+
+  /* Tabs */
+  [data-pad-tabs] [role='tab'] {
+    background: transparent;
+    color: var(--pad-text-muted);
+    border: 0;
+    border-bottom: 1px solid var(--pad-border);
+    border-radius: 0;
+    padding-bottom: 0.4rem;
+  }
+  [data-pad-tabs] [role='tab'][aria-selected='true'] {
+    color: var(--pad-text);
+    border-bottom-color: var(--pad-accent);
+    box-shadow: 0 2px 0 0 color-mix(in oklch, var(--pad-accent) 55%, transparent);
+  }
+
+  /* Inputs */
+  .codex-portal,
+  .pad-input,
+  .pad-textarea {
+    background: var(--pad-elev);
+    color: var(--pad-text);
+    border: 1px solid var(--pad-border);
+    border-radius: var(--pad-radius);
+    transition: border-color var(--duration-snug, 160ms) var(--ease-soft),
+      box-shadow var(--duration-snug, 160ms) var(--ease-soft);
+  }
+  .codex-portal:focus,
+  .pad-input:focus,
+  .pad-textarea:focus {
+    outline: 0;
+    border-color: color-mix(in oklch, var(--pad-accent) 35%, var(--pad-border));
+    box-shadow: 0 0 0 2px var(--pad-focus-ring);
+  }
+  .pad-textarea::placeholder {
+    color: var(--pad-text-muted);
+  }
 }
 
 /* 3) Pad mood & depth utilities (Layered Synesthetic UI) */

package/styles/theme.css

@@ -162,6 +162,49 @@
 
 /* === Runtime dark mapping (no duplicate @theme) === */
 @layer base {
+  :root {
+    --tone-accent: color-mix(in oklab, var(--color-accent) 82%, white 18%);
+    --tone-surface: color-mix(in oklab, var(--color-surface) 92%, var(--tone-accent) 8%);
+    --tone-ink: color-mix(in oklab, var(--color-text) 96%, white 4%);
+    --tone-glow: 0 0 24px color-mix(in oklab, var(--tone-accent) 32%, transparent);
+  }
+
+  :root[data-mood='soft'] {
+    --tone-surface: color-mix(in oklab, var(--color-surface) 92%, var(--tone-accent) 8%);
+    --tone-ink: color-mix(in oklab, var(--color-text) 96%, white 4%);
+    --tone-glow: 0 0 24px color-mix(in oklab, var(--tone-accent) 32%, transparent);
+  }
+
+  :root[data-mood='presence'] {
+    --tone-surface: color-mix(in oklab, var(--color-surface) 88%, var(--tone-accent) 12%);
+    --tone-ink: color-mix(in oklab, var(--color-text) 94%, white 6%);
+    --tone-glow: 0 0 28px color-mix(in oklab, var(--tone-accent) 38%, transparent);
+  }
+
+  :root[data-mood='focused'] {
+    --tone-surface: color-mix(in oklab, var(--color-surface) 84%, var(--tone-accent) 16%);
+    --tone-ink: color-mix(in oklab, var(--color-text) 92%, white 8%);
+    --tone-glow: 0 0 32px color-mix(in oklab, var(--tone-accent) 46%, transparent);
+  }
+
+  :root[data-mood='celebratory'] {
+    --tone-surface: color-mix(in oklab, var(--color-surface) 82%, var(--tone-accent) 18%);
+    --tone-ink: color-mix(in oklab, var(--color-text) 90%, white 10%);
+    --tone-glow: 0 0 36px color-mix(in oklab, var(--tone-accent) 54%, transparent);
+  }
+
+  :root[data-authority='local-primary'] {
+    --tone-accent: #9fc2ff;
+  }
+
+  :root[data-authority='remote-primary'] {
+    --tone-accent: #b2ffa8;
+  }
+
+  :root[data-authority='distributed'] {
+    --tone-accent: #ffd59e;
+  }
+
   :root[data-theme='dark'],
   :root.dark {
     --color-surface: oklch(21% 0.07 241);
@@ -220,11 +263,17 @@
       --inset-shadow-depth-3: inset 0 3px 6px rgb(0 0 0 / 0.3);
 
       --drop-shadow-depth-0: 0 0 0 rgb(0 0 0 / 0);
-      --drop-shadow-depth-1: 0 1px 1px rgb(0 0 0 / 0.25);
-      --drop-shadow-depth-2: 0 3px 3px rgb(0 0 0 / 0.32);
-      --drop-shadow-depth-3: 0 6px 6px rgb(0 0 0 / 0.42);
-    }
+    --drop-shadow-depth-1: 0 1px 1px rgb(0 0 0 / 0.25);
+    --drop-shadow-depth-2: 0 3px 3px rgb(0 0 0 / 0.32);
+    --drop-shadow-depth-3: 0 6px 6px rgb(0 0 0 / 0.42);
+
+    --tone-accent: color-mix(in oklab, var(--color-accent) 70%, white 30%);
+    --tone-surface: color-mix(in oklab, var(--color-surface) 88%, var(--tone-accent) 12%);
+    --tone-ink: color-mix(in oklab, var(--color-text) 98%, white 2%);
+    --tone-glow: 0 0 32px color-mix(in oklab, var(--tone-accent) 42%, transparent);
+    --constellation-dot: color-mix(in oklab, var(--tone-ink) 65%, transparent);
   }
+}
 
   /* Depth mapping helpers — set current depth variables from [data-depth] */
   :root {
@@ -256,11 +305,11 @@
     --glow-intensity: 0.08;
     --grain-strength: 0.1;
     --grain-size: 160px; /* larger tile -> softer grain geometry */
-    --track-glow: color-mix(in oklab, var(--color-accent) 45%, transparent);
-    --track-shadow: color-mix(in oklab, var(--color-text) 25%, transparent);
-    --scene-highlight: color-mix(in oklab, var(--color-accent) 55%, transparent);
-    --presence-dot-color: color-mix(in oklab, var(--color-accent) 65%, white 15%);
-    --ghost-trail-color: color-mix(in oklab, var(--color-accent) 18%, transparent);
+    --track-glow: color-mix(in oklab, var(--tone-accent) 45%, transparent);
+    --track-shadow: color-mix(in oklab, var(--tone-accent) 25%, transparent);
+    --scene-highlight: color-mix(in oklab, var(--tone-accent) 55%, transparent);
+    --presence-dot-color: color-mix(in oklab, var(--tone-accent) 65%, white 15%);
+    --ghost-trail-color: color-mix(in oklab, var(--tone-accent) 18%, transparent);
 
     /* calmer hero gradient and slower entrances */
     --pad-hero-start: color-mix(in oklab, var(--accent) 8%, var(--surface));
@@ -279,11 +328,11 @@
     --glow-intensity: 0.12;
     --grain-strength: 0.12;
     --grain-size: 130px; /* tighter tile -> slightly crisper grain */
-    --track-glow: color-mix(in oklab, var(--color-accent) 65%, transparent);
-    --track-shadow: color-mix(in oklab, var(--color-accent) 28%, transparent);
-    --scene-highlight: color-mix(in oklab, var(--color-accent) 70%, transparent);
-    --presence-dot-color: color-mix(in oklab, var(--color-accent) 78%, white 12%);
-    --ghost-trail-color: color-mix(in oklab, var(--color-accent) 24%, transparent);
+    --track-glow: color-mix(in oklab, var(--tone-accent) 65%, transparent);
+    --track-shadow: color-mix(in oklab, var(--tone-accent) 28%, transparent);
+    --scene-highlight: color-mix(in oklab, var(--tone-accent) 70%, transparent);
+    --presence-dot-color: color-mix(in oklab, var(--tone-accent) 78%, white 12%);
+    --ghost-trail-color: color-mix(in oklab, var(--tone-accent) 24%, transparent);
 
     --pad-hero-start: color-mix(in oklab, var(--accent) 16%, var(--surface));
     --pad-hero-end: color-mix(in oklab, var(--accent) 6%, var(--surface));
@@ -301,11 +350,11 @@
     --glow-intensity: 0.18;
     --grain-strength: 0.14;
     --grain-size: 120px; /* smallest tile -> more lively grain */
-    --track-glow: color-mix(in oklab, var(--color-accent) 90%, white 10%);
-    --track-shadow: color-mix(in oklab, var(--color-accent) 35%, transparent);
-    --scene-highlight: color-mix(in oklab, var(--color-accent) 92%, white 8%);
-    --presence-dot-color: color-mix(in oklab, var(--color-accent) 94%, white 12%);
-    --ghost-trail-color: color-mix(in oklab, var(--color-accent) 32%, transparent);
+    --track-glow: color-mix(in oklab, var(--tone-accent) 90%, white 10%);
+    --track-shadow: color-mix(in oklab, var(--tone-accent) 35%, transparent);
+    --scene-highlight: color-mix(in oklab, var(--tone-accent) 92%, white 8%);
+    --presence-dot-color: color-mix(in oklab, var(--tone-accent) 94%, white 12%);
+    --ghost-trail-color: color-mix(in oklab, var(--tone-accent) 32%, transparent);
 
     --pad-hero-start: color-mix(in oklab, var(--accent) 24%, var(--surface));
     --pad-hero-end: color-mix(in oklab, var(--accent) 12%, var(--surface));
@@ -363,11 +412,11 @@
   --ring-alpha: 0.18; /* 0–1 — whisper ring strength */
   --grain-strength: 0.12; /* 0–1 — ambient grain strength */
   --grain-size: 140px; /* px — grain tile size used by card grain overlay */
-  --track-glow: color-mix(in oklab, var(--color-accent) 55%, transparent);
-  --track-shadow: color-mix(in oklab, var(--color-text) 25%, transparent);
-  --scene-highlight: color-mix(in oklab, var(--color-accent) 60%, transparent);
-  --presence-dot-color: color-mix(in oklab, var(--color-accent) 70%, white 15%);
-  --ghost-trail-color: color-mix(in oklab, var(--color-accent) 22%, transparent);
+  --track-glow: color-mix(in oklab, var(--tone-accent) 55%, transparent);
+  --track-shadow: color-mix(in oklab, var(--tone-accent) 32%, transparent);
+  --scene-highlight: color-mix(in oklab, var(--tone-accent) 60%, transparent);
+  --presence-dot-color: color-mix(in oklab, var(--tone-accent) 70%, white 15%);
+  --ghost-trail-color: color-mix(in oklab, var(--tone-accent) 22%, transparent);
 }
 
 @layer utilities {