@gratiaos/ui 1.0.5 → 1.2.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":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAEnD;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,aAAa,GAAa,GAAG,EAAE;IAC1C,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAwB,IAAI,CAAC,CAAC;IACtD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,EAAE;QAC1D,IAAI,OAAO,MAAM,KAAK,WAAW;YAAE,OAAO,KAAK,CAAC;QAChD,OAAO,MAAM,CAAC,UAAU,CAAC,kCAAkC,CAAC,CAAC,OAAO,CAAC;IACvE,CAAC,CAAC,CAAC;IAEH,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,OAAO,MAAM,KAAK,WAAW;YAAE,OAAO;QAC1C,MAAM,EAAE,GAAG,MAAM,CAAC,UAAU,CAAC,kCAAkC,CAAC,CAAC;QACjE,MAAM,MAAM,GAAG,GAAG,EAAE,CAAC,eAAe,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC;QACjD,EAAE,CAAC,gBAAgB,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;QACtC,MAAM,EAAE,CAAC;QACT,OAAO,GAAG,EAAE,CAAC,EAAE,CAAC,mBAAmB,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;IACxD,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,YAAY,EAAE,CAAC;YACjB,MAAM,IAAI,GAAG,GAAG,CAAC,OAAO,CAAC;YACzB,IAAI,IAAI;gBAAE,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;YACxC,OAAO;QACT,CAAC;QAED,MAAM,IAAI,GAAG,GAAG,CAAC,OAAO,CAAC;QACzB,IAAI,CAAC,IAAI;YAAE,OAAO;QAElB,IAAI,SAAS,GAAyC,IAAI,CAAC;QAE3D,MAAM,SAAS,GAAG,GAAG,EAAE;YACrB,IAAI,CAAC,IAAI;gBAAE,OAAO;YAClB,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,oCAAoC,CAAC;QAC9D,CAAC,CAAC;QAEF,MAAM,UAAU,GAAG,GAAG,EAAE;YACtB,IAAI,CAAC,IAAI;gBAAE,OAAO;YAClB,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;QAChC,CAAC,CAAC;QAEF,MAAM,UAAU,GAAG,GAAG,EAAE;YACtB,UAAU,EAAE,CAAC;YACb,IAAI,CAAC,OAAO,CACV;gBACE,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,UAAU,EAAE;gBACxC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,aAAa,EAAE;gBAC3C,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,UAAU,EAAE;aACzC,EACD;gBACE,QAAQ,EAAE,GAAG;gBACb,MAAM,EAAE,UAAU;aACnB,CACF,CAAC;YACF,IAAI,SAAS;gBAAE,YAAY,CAAC,SAAS,CAAC,CAAC;YACvC,SAAS,GAAG,MAAM,CAAC,UAAU,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;QACjD,CAAC,CAAC;QAEF,MAAM,IAAI,GAAG,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;QAC1C,SAAS,GAAG,MAAM,CAAC,UAAU,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;QAE/C,OAAO,GAAG,EAAE;YACV,IAAI,EAAE,CAAC;YACP,IAAI,SAAS;gBAAE,YAAY,CAAC,SAAS,CAAC,CAAC;QACzC,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,OAAO,cAAK,GAAG,EAAE,GAAG,aAAU,gBAAgB,iBAAa,MAAM,GAAG,CAAC;AACvE,CAAC,CAAC"}

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

@@ -6,5 +6,10 @@ export * from './primitives/field.js';
 export * from './primitives/badge.js';
 export * from './primitives/toast.js';
 export * from './primitives/whisper.js';
+export * from './primitives/select.js';
+export * from './primitives/toolbar.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,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC"}

package/dist/index.js

@@ -6,5 +6,10 @@ export * from './primitives/field.js';
 export * from './primitives/badge.js';
 export * from './primitives/toast.js';
 export * from './primitives/whisper.js';
+export * from './primitives/select.js';
+export * from './primitives/toolbar.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,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC"}

package/dist/primitives/select.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Garden UI — Select primitive (headless)
+ * ---------------------------------------
+ * Whisper: "let choices stay simple." 🌿
+ *
+ * Purpose
+ *  • Accessible wrapper around native <select> for Garden forms.
+ *  • Headless: visuals live in `styles/select.css`; this file emits structure + data-attrs.
+ *  • Works standalone or inside <Field> (as the [data-part="control"] payload).
+ *
+ * Data API
+ *  • [data-ui="select"]                 — root hook for the skin
+ *  • [data-state="valid|invalid"]       — derived from `aria-invalid`
+ *  • [data-disabled]                    — present when `disabled` is true
+ *  • [data-tone="subtle|accent|positive|warning|danger"]
+ *  • [data-variant="ghost"]             — minimal chrome (toolbar/inline)
+ *
+ * A11y
+ *  • Keeps native <select> semantics, focus, and keyboard behavior.
+ *  • Use `aria-invalid="true"` to flag validation errors; skin will render
+ *    the `invalid` state via [data-state].
+ *
+ * Theming
+ *  • Skin reads Garden tokens only (no hard-coded colors) in `styles/select.css`.
+ *  • Pair with <Field> for labels, hints, and error messages.
+ *
+ * Notes
+ *  • If you use this inside <Field>, wrap it in the [data-part="control"] slot.
+ *  • Tone is optional; defaults to "subtle" for calm, non-distracting selects.
+ */
+import * as React from 'react';
+import type { Tone } from './field.js';
+export interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
+    /** Visual tone hint for the skin (subtle/accent/positive/warning/danger). */
+    tone?: Tone;
+    /** Optional visual variant (e.g., "ghost" for minimal chrome). */
+    variant?: 'ghost' | (string & {});
+}
+export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;
+//# sourceMappingURL=select.d.ts.map

package/dist/primitives/select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../src/primitives/select.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAEvC,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAChF,6EAA6E;IAC7E,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,kEAAkE;IAClE,OAAO,CAAC,EAAE,OAAO,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;CACnC;AAED,eAAO,MAAM,MAAM,uFAiBjB,CAAC"}

package/dist/primitives/select.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Garden UI — Select primitive (headless)
+ * ---------------------------------------
+ * Whisper: "let choices stay simple." 🌿
+ *
+ * Purpose
+ *  • Accessible wrapper around native <select> for Garden forms.
+ *  • Headless: visuals live in `styles/select.css`; this file emits structure + data-attrs.
+ *  • Works standalone or inside <Field> (as the [data-part="control"] payload).
+ *
+ * Data API
+ *  • [data-ui="select"]                 — root hook for the skin
+ *  • [data-state="valid|invalid"]       — derived from `aria-invalid`
+ *  • [data-disabled]                    — present when `disabled` is true
+ *  • [data-tone="subtle|accent|positive|warning|danger"]
+ *  • [data-variant="ghost"]             — minimal chrome (toolbar/inline)
+ *
+ * A11y
+ *  • Keeps native <select> semantics, focus, and keyboard behavior.
+ *  • Use `aria-invalid="true"` to flag validation errors; skin will render
+ *    the `invalid` state via [data-state].
+ *
+ * Theming
+ *  • Skin reads Garden tokens only (no hard-coded colors) in `styles/select.css`.
+ *  • Pair with <Field> for labels, hints, and error messages.
+ *
+ * Notes
+ *  • If you use this inside <Field>, wrap it in the [data-part="control"] slot.
+ *  • Tone is optional; defaults to "subtle" for calm, non-distracting selects.
+ */
+import * as React from 'react';
+export const Select = React.forwardRef(function Select({ tone = 'subtle', variant, className, disabled, ...rest }, ref) {
+    const ariaInvalid = rest['aria-invalid'];
+    const state = ariaInvalid === true || ariaInvalid === 'true' ? 'invalid' : 'valid';
+    return (_jsx("select", { ...rest, ref: ref, disabled: disabled, "data-ui": "select", "data-state": state, "data-disabled": disabled ? '' : undefined, "data-tone": tone, "data-variant": variant, className: className }));
+});
+Select.displayName = 'Select';
+//# sourceMappingURL=select.js.map

package/dist/primitives/select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.js","sourceRoot":"","sources":["../../src/primitives/select.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,MAAM,CAAC,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAAiC,SAAS,MAAM,CAAC,EAAE,IAAI,GAAG,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG;IACpJ,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,CAAC;IACzC,MAAM,KAAK,GAAwB,WAAW,KAAK,IAAI,IAAI,WAAW,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC;IAExG,OAAO,CACL,oBACM,IAAI,EACR,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,aACV,QAAQ,gBACJ,KAAK,mBACF,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,eAC7B,IAAI,kBACD,OAAO,EACrB,SAAS,EAAE,SAAS,GACpB,CACH,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC"}

package/dist/primitives/toolbar.d.ts

@@ -0,0 +1,60 @@
+/**
+ * Garden UI — Toolbar primitive (headless)
+ * ---------------------------------------
+ * Whisper: "tools should feel near, not loud." 🌬️
+ *
+ * Purpose
+ *  • Structural container for icon/text controls (filters, view toggles, etc.).
+ *  • Headless: visuals live in `styles/toolbar.css`; this file emits structure + data-attrs.
+ *  • Works with <Button>, <Select>, and other Garden primitives inside.
+ *
+ * Data API
+ *  • [data-ui="toolbar"]                      — root
+ *  • [data-orientation="horizontal|vertical"] — layout hint; default: "horizontal"
+ *  • [data-density="cozy|snug"]               — vertical padding; default: "cozy"
+ *  • [data-part="group"]                      — optional sub-group wrapper
+ *
+ * A11y
+ *  • Renders role="toolbar" on the root.
+ *  • Pass `aria-label` or `aria-labelledby` so screen readers know what this toolbar does.
+ *
+ * Theming
+ *  • Skin reads Garden tokens only (no hard-coded colors) in `styles/toolbar.css`.
+ *  • Typical pattern: place ghost/subtle Buttons inside so toolbar feels calm by default.
+ */
+import * as React from 'react';
+export type ToolbarOrientation = 'horizontal' | 'vertical';
+export type ToolbarDensity = 'cozy' | 'snug';
+export interface ToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Layout direction; horizontal by default. */
+    orientation?: ToolbarOrientation;
+    /** Vertical density; "cozy" = default, "snug" = tighter. */
+    density?: ToolbarDensity;
+}
+/**
+ * Root toolbar container.
+ *
+ * Example:
+ *  <Toolbar aria-label="Presence view tools">
+ *    <ToolbarGroup>
+ *      <Button variant="ghost" tone="default">Today</Button>
+ *      <Button variant="ghost" tone="default">Week</Button>
+ *    </ToolbarGroup>
+ *    <ToolbarGroup>
+ *      <Select>...</Select>
+ *    </ToolbarGroup>
+ *  </Toolbar>
+ */
+export declare const Toolbar: React.ForwardRefExoticComponent<ToolbarProps & React.RefAttributes<HTMLDivElement>>;
+export interface ToolbarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+/**
+ * Optional group wrapper for logically related controls inside a toolbar.
+ *
+ *  <Toolbar>
+ *    <ToolbarGroup>primary controls…</ToolbarGroup>
+ *    <ToolbarGroup>secondary controls…</ToolbarGroup>
+ *  </Toolbar>
+ */
+export declare const ToolbarGroup: React.ForwardRefExoticComponent<ToolbarGroupProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=toolbar.d.ts.map

package/dist/primitives/toolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar.d.ts","sourceRoot":"","sources":["../../src/primitives/toolbar.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,kBAAkB,GAAG,YAAY,GAAG,UAAU,CAAC;AAC3D,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,MAAM,CAAC;AAE7C,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACxE,+CAA+C;IAC/C,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,4DAA4D;IAC5D,OAAO,CAAC,EAAE,cAAc,CAAC;CAC1B;AAED;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,OAAO,qFAmBlB,CAAC;AAEH,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAElF;;;;;;;GAOG;AACH,eAAO,MAAM,YAAY,0FAYvB,CAAC"}

package/dist/primitives/toolbar.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Garden UI — Toolbar primitive (headless)
+ * ---------------------------------------
+ * Whisper: "tools should feel near, not loud." 🌬️
+ *
+ * Purpose
+ *  • Structural container for icon/text controls (filters, view toggles, etc.).
+ *  • Headless: visuals live in `styles/toolbar.css`; this file emits structure + data-attrs.
+ *  • Works with <Button>, <Select>, and other Garden primitives inside.
+ *
+ * Data API
+ *  • [data-ui="toolbar"]                      — root
+ *  • [data-orientation="horizontal|vertical"] — layout hint; default: "horizontal"
+ *  • [data-density="cozy|snug"]               — vertical padding; default: "cozy"
+ *  • [data-part="group"]                      — optional sub-group wrapper
+ *
+ * A11y
+ *  • Renders role="toolbar" on the root.
+ *  • Pass `aria-label` or `aria-labelledby` so screen readers know what this toolbar does.
+ *
+ * Theming
+ *  • Skin reads Garden tokens only (no hard-coded colors) in `styles/toolbar.css`.
+ *  • Typical pattern: place ghost/subtle Buttons inside so toolbar feels calm by default.
+ */
+import * as React from 'react';
+/**
+ * Root toolbar container.
+ *
+ * Example:
+ *  <Toolbar aria-label="Presence view tools">
+ *    <ToolbarGroup>
+ *      <Button variant="ghost" tone="default">Today</Button>
+ *      <Button variant="ghost" tone="default">Week</Button>
+ *    </ToolbarGroup>
+ *    <ToolbarGroup>
+ *      <Select>...</Select>
+ *    </ToolbarGroup>
+ *  </Toolbar>
+ */
+export const Toolbar = React.forwardRef(function Toolbar({ orientation = 'horizontal', density = 'cozy', className, role, ...rest }, ref) {
+    const dataAttrs = {
+        'data-ui': 'toolbar',
+        'data-orientation': orientation,
+        'data-density': density,
+    };
+    return (_jsx("div", { ...rest, ...dataAttrs, ref: ref, role: role ?? 'toolbar', className: className }));
+});
+/**
+ * Optional group wrapper for logically related controls inside a toolbar.
+ *
+ *  <Toolbar>
+ *    <ToolbarGroup>primary controls…</ToolbarGroup>
+ *    <ToolbarGroup>secondary controls…</ToolbarGroup>
+ *  </Toolbar>
+ */
+export const ToolbarGroup = React.forwardRef(function ToolbarGroup({ className, ...rest }, ref) {
+    return (_jsx("div", { ...rest, ref: ref, "data-part": "group", className: className }));
+});
+Toolbar.displayName = 'Toolbar';
+ToolbarGroup.displayName = 'ToolbarGroup';
+//# sourceMappingURL=toolbar.js.map

package/dist/primitives/toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar.js","sourceRoot":"","sources":["../../src/primitives/toolbar.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAA+B,SAAS,OAAO,CACpF,EAAE,WAAW,GAAG,YAAY,EAAE,OAAO,GAAG,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,EAC1E,GAAG;IAEH,MAAM,SAAS,GAAG;QAChB,SAAS,EAAE,SAAS;QACpB,kBAAkB,EAAE,WAAW;QAC/B,cAAc,EAAE,OAAO;KACf,CAAC;IAEX,OAAO,CACL,iBACM,IAAI,KACJ,SAAS,EACb,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,IAAI,SAAS,EACvB,SAAS,EAAE,SAAS,GACpB,CACH,CAAC;AACJ,CAAC,CAAC,CAAC;AAIH;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CAAoC,SAAS,YAAY,CACnG,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EACtB,GAAG;IAEH,OAAO,CACL,iBACM,IAAI,EACR,GAAG,EAAE,GAAG,eACE,OAAO,EACjB,SAAS,EAAE,SAAS,GACpB,CACH,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,OAAO,CAAC,WAAW,GAAG,SAAS,CAAC;AAChC,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gratiaos/ui",
-  "version": "1.0.5",
+  "version": "1.2.0",
   "funding": "https://github.com/sponsors/GratiaOS",
   "type": "module",
   "license": "AGPL-3.0-only",
@@ -46,6 +46,10 @@
       "types": "./dist/primitives/badge.d.ts",
       "import": "./dist/primitives/badge.js"
     },
+    "./primitives/Toolbar": {
+      "types": "./dist/primitives/toolbar.d.ts",
+      "import": "./dist/primitives/toolbar.js"
+    },
     "./styles/base.css": {
       "default": "./styles/base.css"
     },
@@ -72,6 +76,9 @@
     },
     "./styles/badge.css": {
       "default": "./styles/badge.css"
+    },
+    "./styles/toolbar.css": {
+      "default": "./styles/toolbar.css"
     }
   },
   "files": [
@@ -92,6 +99,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,6 @@
 @import './toast.css';
 @import './badge.css';
 @import './whisper.css';
+@import './header.css';
+@import './select.css';
+@import './toolbar.css';

package/styles/field.css

@@ -123,17 +123,6 @@
     min-height: 2.5rem;
   }
 
-  /* Select tweaks */
-  [data-ui='field'] [data-part='control'] select {
-    appearance: none;
-    padding-right: 1.5rem; /* room for chevron */
-    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
-    background-position: right 0.5rem center, right 0.25rem center;
-    background-size: 6px 6px, 6px 6px;
-    background-repeat: no-repeat;
-    color: var(--text);
-  }
-
   /* Disabled/read-only native controls (mirrors root [data-disabled]) */
   [data-ui='field'] [data-part='control'] :is(input, textarea, select):disabled,
   [data-ui='field'][data-disabled] [data-part='control'] :is(input, textarea, select) {

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/select.css

@@ -0,0 +1,145 @@
+/* ─────────────────────────────────────────────────────────────
+   Garden UI — Select skin
+   Whisper: "choices should feel gentle, never rushed." 🌬️
+
+   Purpose
+     • Visual skin for the headless Select primitive.
+     • Provides chrome for standalone <select>; yields to Field when nested.
+
+   Data API
+     • [data-ui='select']          — root hook
+     • [data-disabled]             — dim + block interaction
+     • [data-variant='ghost']      — minimal chrome, ideal for toolbars
+     • [data-state='invalid']      — highlight as error/invalid
+
+   Integration
+     • When placed inside [data-ui='field'] [data-part='control'],
+       the Field shell owns layout, border, and focus ring; this skin
+       strips its own chrome so the two don’t fight.
+
+   Notes
+     • Uses Garden tokens (surface, border, accent) — no hardcoded hex.
+     • Caret is drawn with CSS gradients; no external icon asset.
+   ──────────────────────────────────────────────────────────── */
+
+[data-ui='select'] {
+  appearance: none;
+  background: var(--surface-elevated, color-mix(in oklab, var(--color-surface) 90%, white 10%));
+  border-radius: var(--radius-lg, 0.85rem);
+  border: 1px solid var(--border-subtle, color-mix(in oklab, var(--color-accent) 15%, transparent 85%));
+  padding: 0.5rem 1.9rem 0.5rem 0.85rem;
+  font: inherit;
+  color: var(--text, inherit);
+  min-width: 8rem;
+  line-height: 1.4;
+  position: relative;
+  transition:
+    border-color 160ms var(--ease-soft, ease),
+    box-shadow 160ms var(--ease-soft, ease),
+    background 160ms var(--ease-soft, ease);
+}
+
+[data-ui='select'][data-variant='ghost'] {
+  background: transparent;
+  border-color: transparent;
+  box-shadow: none;
+  border-radius: var(--radius-md, 0.375rem);
+  padding-inline: 0.25rem 1.5rem; /* tighter, but keep room for caret */
+  min-width: 0;
+}
+
+[data-ui='select'][data-variant='ghost']:hover:not([data-disabled]) {
+  background: color-mix(in oklab, var(--color-accent) 10%, transparent 90%);
+  border-color: transparent;
+}
+
+[data-ui='select'][data-variant='ghost']:focus-visible {
+  outline: none;
+  border-color: transparent;
+  box-shadow:
+    0 0 0 1px color-mix(in oklab, var(--color-accent) 35%, transparent 65%),
+    0 0 0 3px color-mix(in oklab, var(--color-accent) 12%, transparent 88%);
+}
+
+[data-ui='select']::after {
+  content: '';
+  position: absolute;
+  pointer-events: none;
+  top: 50%;
+  right: 0.85rem;
+  transform: translateY(-45%);
+  width: 0;
+  height: 0;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 5px solid color-mix(in oklab, currentColor 75%, transparent);
+  opacity: 0.7;
+  transition:
+    transform 160ms var(--ease-soft, ease),
+    opacity 160ms var(--ease-soft, ease);
+}
+
+[data-ui='select']:hover:not([data-disabled])::after {
+  opacity: 0.9;
+}
+
+[data-ui='select']:focus-visible::after {
+  transform: translateY(-45%) scale(1.05);
+  opacity: 1;
+}
+
+[data-ui='select']:hover:not([data-disabled]) {
+  border-color: color-mix(in oklab, var(--color-accent) 35%, transparent 65%);
+}
+
+[data-ui='select']:focus-visible {
+  outline: 0;
+  box-shadow:
+    0 0 0 1px color-mix(in oklab, var(--color-accent) 45%, transparent 55%),
+    0 0 0 4px color-mix(in oklab, var(--color-accent) 18%, transparent 82%);
+}
+
+[data-ui='select'][data-disabled] {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+[data-ui='select'][data-state='invalid'] {
+  border-color: var(--border-danger, color-mix(in oklab, var(--color-danger) 55%, transparent 45%));
+}
+
+/* ==========================================================================
+   Select inside Field
+   When used inside a Garden Field, the Select strips its own shell chrome
+   (background, border, etc.) but still renders its caret. The Field shell
+   provides the outer layout, border, and focus ring; Select only draws its
+   dropdown chevron inside.
+   ========================================================================== */
+
+[data-ui='field'] [data-part='control'] [data-ui='select'] {
+  /* let Field own the shell chrome; Select just draws its caret */
+  appearance: none;
+  background: transparent;
+  border: 0;
+  padding: 0;
+  padding-right: 1.5rem; /* room for caret */
+  min-width: 0;
+  box-shadow: none;
+  background-image:
+    linear-gradient(45deg, transparent 50%, color-mix(in oklab, currentColor 70%, transparent) 50%),
+    linear-gradient(135deg, color-mix(in oklab, currentColor 70%, transparent) 50%, transparent 50%);
+  background-position:
+    right 0.75rem center,
+    right 0.55rem center;
+  background-repeat: no-repeat;
+  background-size: 6px 6px, 6px 6px;
+}
+
+[data-ui='field'] [data-part='control'] [data-ui='select']::after {
+  content: none;
+}
+
+[data-ui='field'] [data-part='control'] [data-ui='select']:focus-visible {
+  outline: none;
+  box-shadow: none;
+}

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);
@@ -223,6 +266,12 @@
       --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);
     }
   }
 
@@ -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 {

package/styles/toolbar.css

@@ -0,0 +1,77 @@
+/* ─────────────────────────────────────────────────────────────
+   Garden UI — Toolbar skin
+   Whisper: "tools should feel near, not loud." 🌬️
+
+   Purpose
+     • Calm container for view / filter / mode controls.
+     • Pairs well with ghost/subtle Buttons and small Selects.
+
+   Data API (from primitives/toolbar.tsx)
+     • [data-ui='toolbar']                      — root
+     • [data-orientation='horizontal|vertical']
+     • [data-density='cozy|snug']
+     • [data-part='group']                      — logical clusters of controls
+
+   Theming
+     • Uses Garden tokens:
+       --surface, --elev, --color-border, --radius-lg, --shadow-soft,
+       --space-*, --text-subtle.
+
+   Notes
+     • Keep it low-contrast by default; toolbar is a frame, not the star.
+     • Use in layouts like: card header, pad header, page sub-nav.
+   ──────────────────────────────────────────────────────────── */
+
+@layer components {
+  [data-ui='toolbar'] {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2, 0.5rem);
+
+    padding: 0.375rem 0.5rem;
+    border-radius: var(--radius-lg, 0.75rem);
+    border: 1px solid color-mix(in oklab, var(--color-border) 80%, transparent);
+    background: color-mix(in oklab, var(--surface) 88%, var(--elev) 12%);
+    box-shadow: var(--shadow-soft, 0 8px 24px rgba(15, 23, 42, 0.08));
+
+    color: var(--text-subtle);
+  }
+
+  [data-ui='toolbar'][data-orientation='vertical'] {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  [data-ui='toolbar'][data-density='snug'] {
+    padding-block: 0.25rem;
+  }
+
+  /* groups: slight separation when multiple clusters exist */
+  [data-ui='toolbar'] [data-part='group'] {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1, 0.375rem);
+  }
+
+  /* subtle divider between groups, only when there are siblings */
+  [data-ui='toolbar'] [data-part='group'] + [data-part='group']::before {
+    content: '';
+    display: inline-block;
+    width: 1px;
+    align-self: stretch;
+    margin-inline: var(--space-1, 0.375rem);
+    background: color-mix(in oklab, var(--color-border) 70%, transparent);
+  }
+
+  /* Make ghost/subtle buttons feel extra calm inside toolbars (optional hint) */
+  [data-ui='toolbar'] [data-ui='button'][data-variant='ghost'],
+  [data-ui='toolbar'] [data-ui='button'][data-variant='subtle'] {
+    --button-bg-hover: color-mix(in oklab, var(--surface) 80%, var(--elev) 20%);
+    --button-fg: var(--text-subtle);
+  }
+
+  /* Selects inside toolbar — a bit tighter */
+  [data-ui='toolbar'] [data-ui='select'] {
+    font-size: 0.875rem;
+  }
+}