@gratiaos/ui 1.0.3 → 1.0.5

package/README.md

@@ -65,6 +65,19 @@ Short purpose notes (see Playground for full demos):
 
 Each primitive maps to **global design tokens**, so themes and local contexts stay in sync.
 
+### 🪴 Reactive State (Signals)
+
+Garden UI stays headless; it does not bundle a state system. For tiny local reactive values (e.g. live counters, inline mood flags, demo toggles) use the micro primitive `@gratiaos/signal`:
+
+```ts
+import { createSignal } from '@gratiaos/signal';
+const count$ = createSignal(0);
+count$.subscribe((v) => console.log('count', v));
+count$.set(count$.value + 1);
+```
+
+Connect signals to primitives by reading their current value in render and subscribing in effects (or bridging through your own hooks). This keeps UI lean while enabling fine-grained reactivity without a large framework.
+
 ---
 
 ## 🔔 Toasts (quick start)

package/dist/hooks/index.d.ts

@@ -1,2 +1,4 @@
 export * from './useMissingScrew';
+export * from './useSceneTheme';
+export * from './useFlowActivity';
 //# sourceMappingURL=index.d.ts.map

package/dist/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC"}

package/dist/hooks/index.js

@@ -1,2 +1,4 @@
 export * from './useMissingScrew';
+export * from './useSceneTheme';
+export * from './useFlowActivity';
 //# sourceMappingURL=index.js.map

package/dist/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC"}

package/dist/hooks/useFlowActivity.d.ts

@@ -0,0 +1,21 @@
+type FlowActivityOptions = {
+    /** Milliseconds after which inactivity is considered paused. Defaults to 5000. */
+    pauseAfterMs?: number;
+    /** Callback invoked when the flow pauses. */
+    onPause?: () => void;
+    /** Callback invoked when the flow resumes after a pause. */
+    onResume?: () => void;
+};
+export type FlowActivityHandle = {
+    /** Notify the hook that the user is active (typing, drawing, etc.). */
+    notifyActivity: () => void;
+    /** Whether the flow is currently paused. */
+    paused: boolean;
+};
+/**
+ * Tracks interaction bursts (typing, drawing, etc.) and flips to paused when
+ * no activity is observed for `pauseAfterMs`.
+ */
+export declare function useFlowActivity(options?: FlowActivityOptions): FlowActivityHandle;
+export {};
+//# sourceMappingURL=useFlowActivity.d.ts.map

package/dist/hooks/useFlowActivity.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFlowActivity.d.ts","sourceRoot":"","sources":["../../src/hooks/useFlowActivity.ts"],"names":[],"mappings":"AAEA,KAAK,mBAAmB,GAAG;IACzB,kFAAkF;IAClF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,uEAAuE;IACvE,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,4CAA4C;IAC5C,MAAM,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF;;;GAGG;AACH,wBAAgB,eAAe,CAAC,OAAO,GAAE,mBAAwB,GAAG,kBAAkB,CAkCrF"}

package/dist/hooks/useFlowActivity.js

@@ -0,0 +1,36 @@
+import * as React from 'react';
+/**
+ * Tracks interaction bursts (typing, drawing, etc.) and flips to paused when
+ * no activity is observed for `pauseAfterMs`.
+ */
+export function useFlowActivity(options = {}) {
+    const { pauseAfterMs = 5000 } = options;
+    const onPauseRef = React.useRef(options.onPause);
+    const onResumeRef = React.useRef(options.onResume);
+    onPauseRef.current = options.onPause;
+    onResumeRef.current = options.onResume;
+    const timerRef = React.useRef(null);
+    const [paused, setPaused] = React.useState(true);
+    const clearTimer = () => {
+        if (timerRef.current !== null) {
+            window.clearTimeout(timerRef.current);
+            timerRef.current = null;
+        }
+    };
+    const notifyActivity = React.useCallback(() => {
+        clearTimer();
+        if (paused) {
+            setPaused(false);
+            onResumeRef.current?.();
+        }
+        timerRef.current = window.setTimeout(() => {
+            setPaused(true);
+            onPauseRef.current?.();
+        }, pauseAfterMs);
+    }, [pauseAfterMs, paused]);
+    React.useEffect(() => {
+        return () => clearTimer();
+    }, []);
+    return { paused, notifyActivity };
+}
+//# sourceMappingURL=useFlowActivity.js.map

package/dist/hooks/useFlowActivity.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFlowActivity.js","sourceRoot":"","sources":["../../src/hooks/useFlowActivity.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAkB/B;;;GAGG;AACH,MAAM,UAAU,eAAe,CAAC,UAA+B,EAAE;IAC/D,MAAM,EAAE,YAAY,GAAG,IAAI,EAAE,GAAG,OAAO,CAAC;IACxC,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;IACjD,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IACnD,UAAU,CAAC,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC;IACrC,WAAW,CAAC,OAAO,GAAG,OAAO,CAAC,QAAQ,CAAC;IAEvC,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAgB,IAAI,CAAC,CAAC;IACnD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IAEjD,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,IAAI,QAAQ,CAAC,OAAO,KAAK,IAAI,EAAE,CAAC;YAC9B,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;YACtC,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;QAC1B,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC5C,UAAU,EAAE,CAAC;QACb,IAAI,MAAM,EAAE,CAAC;YACX,SAAS,CAAC,KAAK,CAAC,CAAC;YACjB,WAAW,CAAC,OAAO,EAAE,EAAE,CAAC;QAC1B,CAAC;QACD,QAAQ,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;YACxC,SAAS,CAAC,IAAI,CAAC,CAAC;YAChB,UAAU,CAAC,OAAO,EAAE,EAAE,CAAC;QACzB,CAAC,EAAE,YAAY,CAAC,CAAC;IACnB,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC,CAAC;IAE3B,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,OAAO,GAAG,EAAE,CAAC,UAAU,EAAE,CAAC;IAC5B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC;AACpC,CAAC"}

package/dist/hooks/useSceneTheme.d.ts

@@ -0,0 +1,20 @@
+type SceneThemeOptions = {
+    /** CSS token or value for the base/background color. */
+    base?: string;
+    /** Accent color token/value for highlights. */
+    accent?: string;
+    /** Optional depth (0..1) passed to data attribute for skins. */
+    depth?: number;
+    /** Additional custom CSS variables. */
+    vars?: Record<string, string | number>;
+};
+/**
+ * Scene theming hook
+ * ------------------
+ * Applies scene-specific CSS variables / data attributes at the document level.
+ *
+ * Call inside scene components to tint the Garden for the current mood.
+ */
+export declare function useSceneTheme(scene: string | null | undefined, options?: SceneThemeOptions): void;
+export {};
+//# sourceMappingURL=useSceneTheme.d.ts.map

package/dist/hooks/useSceneTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSceneTheme.d.ts","sourceRoot":"","sources":["../../src/hooks/useSceneTheme.ts"],"names":[],"mappings":"AAEA,KAAK,iBAAiB,GAAG;IACvB,wDAAwD;IACxD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+CAA+C;IAC/C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gEAAgE;IAChE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;CACxC,CAAC;AA0DF;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAAE,OAAO,GAAE,iBAAsB,QAc9F"}

package/dist/hooks/useSceneTheme.js

@@ -0,0 +1,81 @@
+import * as React from 'react';
+/** Keeps prior scene theme values so we can restore them on cleanup. */
+function snapshotTheme(root) {
+    return {
+        scene: root.dataset.sceneTheme,
+        depth: root.dataset.sceneDepth,
+        base: root.style.getPropertyValue('--scene-base'),
+        accent: root.style.getPropertyValue('--scene-accent'),
+    };
+}
+function applyTheme(root, scene, options) {
+    root.dataset.sceneTheme = scene;
+    if (options.depth !== undefined) {
+        root.dataset.sceneDepth = String(options.depth);
+    }
+    if (options.base !== undefined) {
+        root.style.setProperty('--scene-base', options.base);
+    }
+    if (options.accent !== undefined) {
+        root.style.setProperty('--scene-accent', options.accent);
+    }
+    if (options.vars) {
+        for (const [key, value] of Object.entries(options.vars)) {
+            root.style.setProperty(`--${key}`, String(value));
+        }
+    }
+}
+function restoreTheme(root, snapshot, customVars) {
+    if (snapshot.scene) {
+        root.dataset.sceneTheme = snapshot.scene;
+    }
+    else {
+        delete root.dataset.sceneTheme;
+    }
+    if (snapshot.depth) {
+        root.dataset.sceneDepth = snapshot.depth;
+    }
+    else {
+        delete root.dataset.sceneDepth;
+    }
+    if (snapshot.base) {
+        root.style.setProperty('--scene-base', snapshot.base);
+    }
+    else {
+        root.style.removeProperty('--scene-base');
+    }
+    if (snapshot.accent) {
+        root.style.setProperty('--scene-accent', snapshot.accent);
+    }
+    else {
+        root.style.removeProperty('--scene-accent');
+    }
+    if (customVars) {
+        for (const key of Object.keys(customVars)) {
+            root.style.removeProperty(`--${key}`);
+        }
+    }
+}
+/**
+ * Scene theming hook
+ * ------------------
+ * Applies scene-specific CSS variables / data attributes at the document level.
+ *
+ * Call inside scene components to tint the Garden for the current mood.
+ */
+export function useSceneTheme(scene, options = {}) {
+    const optionsRef = React.useRef(options);
+    optionsRef.current = options;
+    React.useEffect(() => {
+        if (typeof document === 'undefined' || !scene)
+            return;
+        const root = document.documentElement;
+        const snapshot = snapshotTheme(root);
+        const opts = optionsRef.current;
+        applyTheme(root, scene, opts);
+        return () => {
+            restoreTheme(root, snapshot, opts.vars);
+        };
+    }, [scene]);
+}
+//# sourceMappingURL=useSceneTheme.js.map

package/dist/hooks/useSceneTheme.js.map

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

package/dist/index.d.ts

@@ -5,5 +5,6 @@ export * from './primitives/card.js';
 export * from './primitives/field.js';
 export * from './primitives/badge.js';
 export * from './primitives/toast.js';
+export * from './primitives/whisper.js';
 export * from './hooks/index.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,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"}

package/dist/index.js

@@ -5,5 +5,6 @@ export * from './primitives/card.js';
 export * from './primitives/field.js';
 export * from './primitives/badge.js';
 export * from './primitives/toast.js';
+export * from './primitives/whisper.js';
 export * from './hooks/index.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,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"}

package/dist/primitives/whisper.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Garden UI — Whisper primitive (headless)
+ * ---------------------------------------
+ * Whisper: "gentle cues keep motion kind." 🌬️
+ *
+ * Purpose
+ *   • Surface soft guidance copy without stealing layout focus.
+ *   • Provide a micro pulse when the message changes so humans notice calmly.
+ *
+ * Data API
+ *   • [data-ui="whisper"] — root element for skins.
+ *   • [data-tone="intimate|collaborative|presence|…"] — drives color and typography.
+ *   • [data-pulsing="true"] — short-lived flag to animate tone shifts.
+ *
+ * A11y
+ *   • Renders a neutral <div>; copy should remain descriptive (no buttons hidden inside).
+ *   • Pulse uses non-blocking CSS animation and never toggles aria-live regions.
+ *
+ * Theming
+ *   • Skins read tone + pulsing to set color, glow, and micro motion.
+ *
+ * Notes
+ *   • Keep pulses short (<300ms) so it feels like a breath, not a notification.
+ *   • Export stays headless — visuals live in styles/whisper.css.
+ */
+import * as React from 'react';
+export type WhisperTone = 'intimate' | 'collaborative' | 'presence' | (string & {});
+export interface WhisperProps {
+    /** Whisper text when not using children. */
+    text?: React.ReactNode;
+    /** Optional render content (overrides `text`). */
+    children?: React.ReactNode;
+    /** Visual tone (drives CSS hooks). */
+    tone?: WhisperTone;
+    /** Whether to animate a micro pulse when content changes. Defaults to true. */
+    pulseOnChange?: boolean;
+    /** Optional className forwarded to the root element. */
+    className?: string;
+    /** Called whenever the visible content changes. */
+    onChange?: () => void;
+}
+/**
+ * Whisper — soft text cue with micro pulse when content shifts.
+ */
+export declare const Whisper: React.ForwardRefExoticComponent<WhisperProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=whisper.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"whisper.d.ts","sourceRoot":"","sources":["../../src/primitives/whisper.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,WAAW,GAAG,UAAU,GAAG,eAAe,GAAG,UAAU,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;AAEpF,MAAM,WAAW,YAAY;IAC3B,4CAA4C;IAC5C,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,sCAAsC;IACtC,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,+EAA+E;IAC/E,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED;;GAEG;AACH,eAAO,MAAM,OAAO,qFA4BlB,CAAC"}

package/dist/primitives/whisper.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Garden UI — Whisper primitive (headless)
+ * ---------------------------------------
+ * Whisper: "gentle cues keep motion kind." 🌬️
+ *
+ * Purpose
+ *   • Surface soft guidance copy without stealing layout focus.
+ *   • Provide a micro pulse when the message changes so humans notice calmly.
+ *
+ * Data API
+ *   • [data-ui="whisper"] — root element for skins.
+ *   • [data-tone="intimate|collaborative|presence|…"] — drives color and typography.
+ *   • [data-pulsing="true"] — short-lived flag to animate tone shifts.
+ *
+ * A11y
+ *   • Renders a neutral <div>; copy should remain descriptive (no buttons hidden inside).
+ *   • Pulse uses non-blocking CSS animation and never toggles aria-live regions.
+ *
+ * Theming
+ *   • Skins read tone + pulsing to set color, glow, and micro motion.
+ *
+ * Notes
+ *   • Keep pulses short (<300ms) so it feels like a breath, not a notification.
+ *   • Export stays headless — visuals live in styles/whisper.css.
+ */
+import * as React from 'react';
+/**
+ * Whisper — soft text cue with micro pulse when content shifts.
+ */
+export const Whisper = React.forwardRef(function Whisper({ text, children, tone = 'intimate', pulseOnChange = true, className, onChange }, ref) {
+    const content = children ?? text;
+    const [pulsing, setPulsing] = React.useState(false);
+    const lastContent = React.useRef(content);
+    React.useEffect(() => {
+        if (content === lastContent.current)
+            return;
+        lastContent.current = content;
+        onChange?.();
+        if (!pulseOnChange)
+            return;
+        setPulsing(true);
+        const id = window.setTimeout(() => setPulsing(false), 260);
+        return () => window.clearTimeout(id);
+    }, [content, pulseOnChange, onChange]);
+    return (_jsx("div", { ref: ref, "data-ui": "whisper", "data-tone": tone, "data-pulsing": pulsing ? 'true' : undefined, className: className, children: content }));
+});
+Whisper.displayName = 'Whisper';
+//# sourceMappingURL=whisper.js.map

package/dist/primitives/whisper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"whisper.js","sourceRoot":"","sources":["../../src/primitives/whisper.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAmB/B;;GAEG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAA+B,SAAS,OAAO,CACpF,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,GAAG,UAAU,EAAE,aAAa,GAAG,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,EAChF,GAAG;IAEH,MAAM,OAAO,GAAG,QAAQ,IAAI,IAAI,CAAC;IACjC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpD,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAkB,OAAO,CAAC,CAAC;IAE3D,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,OAAO,KAAK,WAAW,CAAC,OAAO;YAAE,OAAO;QAC5C,WAAW,CAAC,OAAO,GAAG,OAAO,CAAC;QAC9B,QAAQ,EAAE,EAAE,CAAC;QACb,IAAI,CAAC,aAAa;YAAE,OAAO;QAC3B,UAAU,CAAC,IAAI,CAAC,CAAC;QACjB,MAAM,EAAE,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,GAAG,CAAC,CAAC;QAC3D,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;IACvC,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEvC,OAAO,CACL,cACE,GAAG,EAAE,GAAG,aACA,SAAS,eACN,IAAI,kBACD,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC1C,SAAS,EAAE,SAAS,YACnB,OAAO,GACJ,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,OAAO,CAAC,WAAW,GAAG,SAAS,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gratiaos/ui",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "funding": "https://github.com/sponsors/GratiaOS",
   "type": "module",
   "license": "AGPL-3.0-only",

package/styles/base.css

@@ -5,3 +5,4 @@
 @import './pill.css';
 @import './toast.css';
 @import './badge.css';
+@import './whisper.css';

package/styles/pad.css

@@ -52,6 +52,9 @@
   [data-pad-mood='soft'] {
     --pad-glow: 0.15;
   }
+  [data-pad-mood='presence'] {
+    --pad-glow: 0.24;
+  }
   [data-pad-mood='focused'] {
     --pad-glow: 0.32;
   }

package/styles/theme.css

@@ -36,6 +36,18 @@
   --color-subtle: color-mix(in oklab, var(--color-text) 60%, transparent);
   --color-faint: color-mix(in oklab, var(--color-text) 45%, transparent);
 
+  /* Tone fade neutrals (scene transitions) */
+  --tone-transition-duration: 800ms;
+  --tone-transition: background var(--tone-transition-duration) var(--ease-soft, ease), color var(--tone-transition-duration) var(--ease-soft, ease);
+  --tone-neutral-surface: color-mix(in oklab, var(--color-surface) 70%, var(--color-accent) 30%);
+  --tone-neutral-text: color-mix(in oklab, var(--color-text) 65%, var(--color-accent) 35%);
+
+  /* Phase hues (used by presence dots + HUD) */
+  --phase-companion-hue: 160; /* trust / green */
+  --phase-presence-hue: 210; /* clarity / blue */
+  --phase-archive-hue: 330; /* reflection / violet */
+  --hud-glow-strength: 0.45; /* HUD glow strength */
+
   /* Radius & shadow (custom; shadow-* namespace only generates when named accordingly) */
   --radius-pill: 9999px;
   --radius-2xl: 1.25rem;

package/styles/whisper.css

@@ -0,0 +1,49 @@
+/* ─────────────────────────────────────────────────────────────
+   Garden UI — Whisper skin (opt‑in)
+   Whisper: "gentle cues stay soft even when shared." 🌬️
+
+   Purpose
+     • Selector-only skin for the headless Whisper primitive.
+     • Keeps guidance text light while tone drives color emphasis.
+
+   Data API
+     • [data-ui='whisper']                — root wrapper
+     • [data-tone='intimate|collaborative|presence|…']
+     • [data-pulsing='true']              — transient pulse when copy changes
+
+   A11y & Motion
+     • Uppercase + letter-spacing keeps micro copy legible without heavy weight.
+     • Pulse is 260ms translate/opacity; respects reduced motion (no infinite keyframes).
+     • Inline-flex layout keeps emoji or icons aligned, avoiding unexpected line height shifts.
+
+   Theming notes
+     • Uses color-mix with Garden tokens (accent/positive) rather than raw hex.
+     • Typography defers to --font-body and --text-sm for consistency.
+
+   Future ideas
+     • Additional tone swatches (e.g., grounded/alert) as the whisper library grows.
+   ──────────────────────────────────────────────────────────── */
+@layer components {
+  [data-ui="whisper"] {
+    font-size: var(--text-sm);
+    color: color-mix(in oklab, var(--color-accent) 70%, var(--color-text) 30%);
+    display: inline-flex;
+    align-items: center;
+    opacity: 0.88;
+    transition: transform var(--duration-snug, 160ms) var(--ease-soft, ease), opacity 200ms var(--ease-soft, ease);
+    font-style: italic;
+  }
+
+  [data-ui="whisper"][data-tone="collaborative"] {
+    color: color-mix(in oklab, var(--color-positive) 70%, var(--color-text) 30%);
+  }
+
+  [data-ui="whisper"][data-tone="presence"] {
+    color: color-mix(in oklab, var(--color-accent) 80%, var(--color-surface) 20%);
+  }
+
+  [data-ui="whisper"][data-pulsing="true"] {
+    transform: translateY(-2px);
+    opacity: 1;
+  }
+}