@streamsai/ui 0.2.0 → 0.2.2

package/dist/components/ui/running-indicator.d.ts

@@ -8,10 +8,11 @@ interface RunningIndicatorProps {
  * changes size, so a row's geometry is stable while it animates. Reduced motion renders the core
  * static with no halo.
  *
- * The loops start imperatively, not with `animate` keyframes on a `motion` element: inside an
- * `AnimatePresence initial={false}` (the leading slot of a NavItem row) motion skips an animation
- * that starts on mount, so a declarative loop sat still in rows while the same dot pulsed in the
- * filter chips.
+ * The loops start imperatively through `startRunningLoop`, not with `animate` keyframes on a
+ * `motion` element: inside an `AnimatePresence initial={false}` (the leading slot of a NavItem row)
+ * motion skips an animation that starts on mount, so a declarative loop sat still in rows while the
+ * same dot pulsed in the filter chips. `startRunningLoop` also puts the loop on the page clock, so
+ * every running dot blinks in step, whenever it mounted.
  */
 declare function RunningIndicator({ label, className }: RunningIndicatorProps): import("react").JSX.Element;
 export { RunningIndicator, type RunningIndicatorProps };

package/dist/components/ui/running-indicator.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
-import { animate, usePrefersReducedMotion } from '../../motion/index.js';
-import { runningIndicator } from '../../motion/config.js';
+import { startRunningLoop, usePrefersReducedMotion } from '../../motion/index.js';
 import { cn } from '../../lib/utils.js';
 /**
  * The "an agent is working" cue, the twin of iOS `RunningIndicator`: an 8px green core that
@@ -9,10 +8,11 @@ import { cn } from '../../lib/utils.js';
  * changes size, so a row's geometry is stable while it animates. Reduced motion renders the core
  * static with no halo.
  *
- * The loops start imperatively, not with `animate` keyframes on a `motion` element: inside an
- * `AnimatePresence initial={false}` (the leading slot of a NavItem row) motion skips an animation
- * that starts on mount, so a declarative loop sat still in rows while the same dot pulsed in the
- * filter chips.
+ * The loops start imperatively through `startRunningLoop`, not with `animate` keyframes on a
+ * `motion` element: inside an `AnimatePresence initial={false}` (the leading slot of a NavItem row)
+ * motion skips an animation that starts on mount, so a declarative loop sat still in rows while the
+ * same dot pulsed in the filter chips. `startRunningLoop` also puts the loop on the page clock, so
+ * every running dot blinks in step, whenever it mounted.
  */
 function RunningIndicator({ label, className }) {
     const pulsing = !usePrefersReducedMotion();
@@ -23,11 +23,7 @@ function RunningIndicator({ label, className }) {
         const halo = haloRef.current;
         if (!pulsing || !core || !halo)
             return;
-        const controls = [
-            animate(core, runningIndicator.core, runningIndicator.transition),
-            animate(halo, runningIndicator.halo, runningIndicator.transition),
-        ];
-        return () => controls.forEach((control) => control.cancel());
+        return startRunningLoop({ core, halo });
     }, [pulsing]);
     return (_jsxs("span", { role: "img", "aria-label": label, "data-slot": "running-indicator", className: cn('relative inline-grid size-3 shrink-0 place-items-center', className), children: [pulsing ? (_jsx("span", { ref: haloRef, "aria-hidden": true, "data-slot": "running-indicator-halo", className: "absolute inset-0 rounded-full bg-home-running-halo" })) : null, _jsx("span", { ref: coreRef, "aria-hidden": true, "data-slot": "running-indicator-core", className: "relative size-2 rounded-full bg-home-running" })] }));
 }

package/dist/components/ui/status-dot.d.ts

@@ -1,16 +1,18 @@
 import { type VariantProps } from 'class-variance-authority';
 declare const statusDotVariants: (props?: ({
-    status?: "done" | "working" | "stuck" | "idle" | "attention" | "unread" | null | undefined;
+    status?: "idle" | "done" | "stuck" | "attention" | "unread" | null | undefined;
     size?: "sm" | "md" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-interface StatusDotProps extends VariantProps<typeof statusDotVariants> {
+type RestingStatus = NonNullable<VariantProps<typeof statusDotVariants>['status']>;
+interface StatusDotProps {
+    /** `working` is always the `RunningIndicator`; the other states are resting dots. */
+    status?: RestingStatus | 'working';
+    /** Dot diameter of a resting dot. Ignored by `working` and the `home` appearance. */
+    size?: VariantProps<typeof statusDotVariants>['size'];
     label: string;
     className?: string;
-    /**
-     * `home` is the mobile Home dot: an 8px core in a fixed 12px box so every state lines up.
-     * Working is the `RunningIndicator` (green, pulsing halo) instead of the purple fade.
-     */
+    /** `home` is the mobile Home dot: an 8px core in a fixed 12px box so every state lines up. */
     appearance?: 'default' | 'home';
 }
-declare function StatusDot({ status, size, label, className, appearance }: StatusDotProps): import("react").JSX.Element;
+declare function StatusDot({ status, size, label, className, appearance, }: StatusDotProps): import("react").JSX.Element;
 export { StatusDot, statusDotVariants, type StatusDotProps };

package/dist/components/ui/status-dot.js

@@ -1,14 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cva } from 'class-variance-authority';
-import { motion } from '../../motion/index.js';
-import { loops } from '../../motion/config.js';
 import { cn } from '../../lib/utils.js';
 import { RunningIndicator } from './running-indicator.js';
 const statusDotVariants = cva('inline-block shrink-0 rounded-full', {
     variants: {
         status: {
             idle: 'bg-status-idle',
-            working: 'bg-status-working',
             done: 'bg-status-done',
             stuck: 'bg-status-stuck',
             attention: 'bg-warning',
@@ -18,12 +15,14 @@ const statusDotVariants = cva('inline-block shrink-0 rounded-full', {
     },
     defaultVariants: { status: 'idle', size: 'md' },
 });
-function StatusDot({ status, size, label, className, appearance = 'default' }) {
-    const isWorking = status === 'working';
+function StatusDot({ status = 'idle', size, label, className, appearance = 'default', }) {
+    // One running cue for every surface, so all of them blink in step (`startRunningLoop`).
+    if (status === 'working')
+        return _jsx(RunningIndicator, { label: label, className: className });
     if (appearance === 'home') {
-        return isWorking ? (_jsx(RunningIndicator, { label: label, className: className })) : (_jsx(HomeStatusDot, { status: status, label: label, className: className }));
+        return _jsx(HomeStatusDot, { status: status, label: label, className: className });
     }
-    return (_jsx(motion.span, { role: "img", "aria-label": label, "data-slot": "status-dot", animate: isWorking ? { opacity: [1, 0.3, 1] } : { opacity: 1 }, transition: isWorking ? loops.pulse : { duration: 0 }, className: cn(statusDotVariants({ status, size }), className) }));
+    return (_jsx("span", { role: "img", "aria-label": label, "data-slot": "status-dot", className: cn(statusDotVariants({ status, size }), className) }));
 }
 /** A resting Home dot, in the same 12px box as the `RunningIndicator` so rows line up. */
 function HomeStatusDot({ status, label, className, }) {

package/dist/index.d.ts

@@ -21,7 +21,7 @@ export * as Icons from './icons/index.js';
 export type { Platform, PlatformProviderProps } from './platform/index.js';
 export { PlatformProvider, usePlatform } from './platform/index.js';
 export { AnimatePresence, LayoutGroup, animate, motion, useMotionValue, useReducedMotion, useTransform, type HTMLMotionProps, type MotionValue, type Transition, type Variants } from './motion/index.js';
-export { duration, ease, spring, distance, scale, stagger, transitions, press, presets, loops, runningIndicator, loopAnimate, loopTransition, popup, sheet, slide, resize, reflow, edgeReveal, stepSwap, staggerDelay } from './motion/index.js';
+export { duration, ease, spring, distance, scale, stagger, transitions, press, presets, loops, runningIndicator, startRunningLoop, loopAnimate, loopTransition, popup, sheet, slide, resize, reflow, edgeReveal, stepSwap, staggerDelay } from './motion/index.js';
 export { MotionProvider, disableMotion, enableMotion, enablePresenceExits, disablePresenceExits, PageTransition, Collapse, AutoHeight, usePrefersReducedMotion, useAnyModalOpen, Swap, swapVariants, StaggerItem, type PageTransitionProps, type CollapseProps, type AutoHeightProps, type SwapProps, type SwapPresetName, type StaggerItemProps } from './motion/index.js';
 export { AgentAvatar, type AgentPicture, type AgentPingoPicture, type AgentImagePicture, } from './components/ui/agent-avatar.js';
 export { AGENT_AVATAR_SIZE, AGENT_AVATAR_RADIUS, AGENT_AVATAR_PX, type AgentAvatarSize, } from './components/ui/avatar-frame.js';

package/dist/index.js

@@ -22,7 +22,7 @@ export { PlatformProvider, usePlatform } from './platform/index.js';
 // prettier-ignore
 export { AnimatePresence, LayoutGroup, animate, motion, useMotionValue, useReducedMotion, useTransform } from './motion/index.js';
 // prettier-ignore
-export { duration, ease, spring, distance, scale, stagger, transitions, press, presets, loops, runningIndicator, loopAnimate, loopTransition, popup, sheet, slide, resize, reflow, edgeReveal, stepSwap, staggerDelay } from './motion/index.js';
+export { duration, ease, spring, distance, scale, stagger, transitions, press, presets, loops, runningIndicator, startRunningLoop, loopAnimate, loopTransition, popup, sheet, slide, resize, reflow, edgeReveal, stepSwap, staggerDelay } from './motion/index.js';
 // prettier-ignore
 export { MotionProvider, disableMotion, enableMotion, enablePresenceExits, disablePresenceExits, PageTransition, Collapse, AutoHeight, usePrefersReducedMotion, useAnyModalOpen, Swap, swapVariants, StaggerItem } from './motion/index.js';
 // ── Components ───────────────────────────────────────────────────────────────

package/dist/motion/config.d.ts

@@ -758,7 +758,7 @@ export declare const loops: {
         readonly duration: 1;
     };
     /**
-     * Skeleton and status-dot: smooth opacity float, slow enough to read as "still loading". Give it
+     * Skeleton: smooth opacity float, slow enough to read as "still loading". Give it
      * keyframes that come back to where they start (`[1, 0.4, 1]`): it loops rather than mirrors, so
      * the browser runs it off the main thread (motion drives a mirrored loop in JS, every frame).
      */
@@ -802,6 +802,9 @@ export declare const runningIndicator: {
     readonly halo: {
         readonly opacity: [1, 0, 1];
     };
+    readonly dot: {
+        readonly opacity: [1, 0.25, 1];
+    };
     readonly transition: {
         readonly repeat: number;
         readonly repeatType: "loop";

package/dist/motion/config.js

@@ -364,7 +364,7 @@ export const loops = {
      *  the browser runs it (motion drives `rotate` in JS, every frame). */
     spin: { repeat: Infinity, repeatType: 'loop', ease: 'linear', duration: 1 },
     /**
-     * Skeleton and status-dot: smooth opacity float, slow enough to read as "still loading". Give it
+     * Skeleton: smooth opacity float, slow enough to read as "still loading". Give it
      * keyframes that come back to where they start (`[1, 0.4, 1]`): it loops rather than mirrors, so
      * the browser runs it off the main thread (motion drives a mirrored loop in JS, every frame).
      */
@@ -387,17 +387,21 @@ export const loops = {
     },
 };
 /**
- * `RunningIndicator`: the 8px core scales 0.88 to 1 and the 2px halo fades out and in, on the same
- * 2s loop as the iOS dot (`RunningIndicator.swift`), cosine-like so both ends rest. Nothing fades
- * the core. The core animates a whole `transform` string, not `scale`, so motion hands the loop to
- * the Web Animations API and it keeps running on the compositor while a phone webview scrolls or
- * its main thread is busy. Reduced motion stops the whole loop (the dot renders static, no halo),
- * unlike `loops.pulse`, which carries on.
+ * The one running loop, for every "an agent is working" dot in the product. `RunningIndicator`: the
+ * 8px core scales 0.88 to 1 and the 2px halo fades out and in, on the same 2s loop as the iOS dot
+ * (`RunningIndicator.swift`), cosine-like so both ends rest. `dot` is the same loop as a fade, for
+ * a dot too small to scale (the 6px phase dot of a run row). Start these only through
+ * `startRunningLoop` (`running-loop.ts`), which puts every loop on the same clock so dots mounted
+ * at different times still blink together. The core animates a whole `transform` string, not
+ * `scale`, so motion hands the loop to the Web Animations API and it keeps running on the
+ * compositor while a phone webview scrolls or its main thread is busy. Reduced motion stops the
+ * whole loop (the dot renders static, no halo), unlike `loops.pulse`, which carries on.
  */
 const runningIndicatorEase = [0.37, 0, 0.63, 1];
 export const runningIndicator = {
     core: { transform: ['scale(1)', 'scale(0.88)', 'scale(1)'] },
     halo: { opacity: [1, 0, 1] },
+    dot: { opacity: [1, 0.25, 1] },
     transition: { repeat: Infinity, repeatType: 'loop', ease: runningIndicatorEase, duration: 2 },
 };
 /**

package/dist/motion/index.d.ts

@@ -4,5 +4,6 @@
  */
 export { LayoutGroup, animate, motion, useMotionValue, useReducedMotion, useTransform, type HTMLMotionProps, type MotionValue, type Transition, type Variants, } from 'motion/react';
 export { duration, ease, spring, distance, scale, stagger, transitions, press, presets, loops, runningIndicator, loopAnimate, loopTransition, popup, sheet, slide, resize, reflow, glide, edgeReveal, stepSwap, scrollReveal, staggerDelay, } from './config.js';
+export { startRunningLoop } from './running-loop.js';
 export { MotionProvider, disableMotion, enableMotion, enablePresenceExits, disablePresenceExits, AnimatePresence, PageTransition, Collapse, AutoHeight, usePrefersReducedMotion, Swap, swapVariants, StaggerItem, type PageTransitionProps, type CollapseProps, type AutoHeightProps, type SwapProps, type SwapPresetName, type StaggerItemProps, } from './components.js';
 export { useAnyModalOpen } from './modal-presence.js';

package/dist/motion/index.js

@@ -4,5 +4,6 @@
  */
 export { LayoutGroup, animate, motion, useMotionValue, useReducedMotion, useTransform, } from 'motion/react';
 export { duration, ease, spring, distance, scale, stagger, transitions, press, presets, loops, runningIndicator, loopAnimate, loopTransition, popup, sheet, slide, resize, reflow, glide, edgeReveal, stepSwap, scrollReveal, staggerDelay, } from './config.js';
+export { startRunningLoop } from './running-loop.js';
 export { MotionProvider, disableMotion, enableMotion, enablePresenceExits, disablePresenceExits, AnimatePresence, PageTransition, Collapse, AutoHeight, usePrefersReducedMotion, Swap, swapVariants, StaggerItem, } from './components.js';
 export { useAnyModalOpen } from './modal-presence.js';

package/dist/motion/running-loop.d.ts

@@ -0,0 +1,14 @@
+interface RunningLoopTargets {
+    core?: Element | null;
+    halo?: Element | null;
+    dot?: Element | null;
+}
+/**
+ * Starts the running loop on the given elements and returns a function that stops it. Each loop is
+ * moved to the position the page clock gives it (time 0 is the start of the page), not the moment
+ * it mounted, so every running dot on screen shows the same frame at the same instant, however
+ * late or often it mounts. That is what the iOS dot gets from its wall-clock `TimelineView`.
+ * `performance.now()` and the document timeline share one origin, and jsdom has no timeline.
+ */
+export declare function startRunningLoop(targets: RunningLoopTargets): () => void;
+export {};

package/dist/motion/running-loop.js

@@ -0,0 +1,22 @@
+import { animate } from 'motion/react';
+import { runningIndicator } from './config.js';
+const periodMs = runningIndicator.transition.duration * 1000;
+/**
+ * Starts the running loop on the given elements and returns a function that stops it. Each loop is
+ * moved to the position the page clock gives it (time 0 is the start of the page), not the moment
+ * it mounted, so every running dot on screen shows the same frame at the same instant, however
+ * late or often it mounts. That is what the iOS dot gets from its wall-clock `TimelineView`.
+ * `performance.now()` and the document timeline share one origin, and jsdom has no timeline.
+ */
+export function startRunningLoop(targets) {
+    const { core, halo, dot } = targets;
+    const controls = [
+        core && animate(core, runningIndicator.core, runningIndicator.transition),
+        halo && animate(halo, runningIndicator.halo, runningIndicator.transition),
+        dot && animate(dot, runningIndicator.dot, runningIndicator.transition),
+    ].filter((control) => control != null);
+    const seconds = (performance.now() % periodMs) / 1000;
+    for (const control of controls)
+        control.time = seconds;
+    return () => controls.forEach((control) => control.cancel());
+}

package/dist/styles/tokens.css

@@ -48,6 +48,7 @@
   --vibe-color-egg-yolk-on-selected: #5c4300; /* text on the solid yellow */
   --vibe-color-winter: #9aadbd;
   --vibe-color-running-yellow: #f7c55e;
+  --vibe-color-waiting-blue: #879ee7;
   --vibe-color-running-halo: #fdeecf;
   --vibe-color-running-green: #b7cf9f;
   --vibe-color-running-green-halo: #e9f1e2;
@@ -94,6 +95,7 @@
   --vibe-color-egg-yolk-on-selected: #5c4300;
   --vibe-color-winter: #9aadbd;
   --vibe-color-running-yellow: #f7c55e;
+  --vibe-color-waiting-blue: #879ee7;
   --vibe-color-running-halo: #5f5237;
   --vibe-color-running-green: #b7cf9f;
   --vibe-color-running-green-halo: #4c554a;

package/dist/styles/tokens.mjs

@@ -34,6 +34,7 @@ export const colors = {
   // Mobile Home (iOS Streams tab and mweb /home). Light values are sampled from the design PNG;
   // dark values are derived from the dark theme until Design supplies them.
   'color-running-yellow': { light: '#f7c55e', dark: '#f7c55e' }, // a Running session's dot
+  'color-waiting-blue': { light: '#879ee7', dark: '#879ee7' }, // a Waiting session's dot and the Waiting chip dot (iOS Home); dark awaits Design
   'color-running-green': { light: '#b7cf9f', dark: '#b7cf9f' }, // mweb Running dot: the pastel green from Figma
   'color-running-green-halo': { light: '#e9f1e2', dark: '#4c554a' }, // that dot at 30% over the card, composited
   'color-running-halo': { light: '#fdeecf', dark: '#5f5237' }, // that dot at 30% over the card, composited

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamsai/ui",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Streams design system: shadcn/ui components on Base UI, design tokens (Tailwind v4) and a theme provider for React 19.",
   "license": "MIT",
   "repository": {