@robr0/design-system 0.13.0 → 0.14.0

package/components/SplitButton/SplitButton.css

@@ -0,0 +1,93 @@
+/* ============================================
+   SPLIT BUTTON COMPONENT
+   Primary action + attached menu of alternatives
+   ============================================ */
+
+.ds-split-button {
+  display: inline-flex;
+  align-items: stretch;
+  /* On the filled variant the hairline of page showing between the
+     segments is the split: a gap the width of the system hairline,
+     not a drawn border. */
+  gap: var(--border-xs);
+}
+
+/* ============================================
+   SEGMENT GEOMETRY
+   Outer silhouette stays the Button pill; the
+   meeting edges square off. The main segment's
+   inner-edge padding tightens one step - the
+   squared edge has no pill cap to clear, so
+   the resting 16px reads as a hole before the
+   chevron.
+   ============================================ */
+
+.ds-split-button .ds-split-button__main {
+  border-start-end-radius: var(--radius-xxs);
+  border-end-end-radius: var(--radius-xxs);
+  padding-inline-end: var(--padding-sm-md);
+}
+
+.ds-split-button .ds-split-button__main.ds-button--compact {
+  padding-inline-end: var(--padding-sm);
+}
+
+.ds-split-button .ds-split-button__trigger {
+  border-start-start-radius: var(--radius-xxs);
+  border-end-start-radius: var(--radius-xxs);
+  /* Standalone, CircularButton is a fixed circle; inside the split its
+     explicit height would block the wrapper's align-items: stretch, and
+     the main segment's height moves (secondary's border adds to it, a
+     loading spinner grows it) — so the flat edges overhang at the seam.
+     Let the flex stretch size it to the main segment instead. */
+  height: auto;
+  align-self: stretch;
+}
+
+/* Optical centering: the trigger is flat on the left and a full round cap
+   on the right, so its visual mass sits left of the box centre (the
+   centroid of a square-plus-semicircle is ~5% of the width off-centre).
+   A geometrically centred chevron reads as pushed toward the cap; nudge
+   it toward the flat edge to match. */
+.ds-split-button .ds-split-button__trigger .ds-circular-button__icon {
+  transform: translateX(-2px);
+}
+
+.ds-split-button .ds-split-button__trigger.ds-circular-button--compact .ds-circular-button__icon {
+  transform: translateX(-1px);
+}
+
+/* ============================================
+   LOADING
+   The trigger is inert while the main segment
+   runs its async action, but it is busy, not
+   broken: Button and CircularButton both define
+   loading as full-colour appearance with a
+   progress cursor, and the disabled dim on one
+   half would split the pill into two unrelated
+   controls. When the main segment is disabled
+   as well, the whole control dims together and
+   this rule deliberately stands down.
+   ============================================ */
+
+.ds-split-button:has(.ds-button--loading:not(.ds-button--disabled)) .ds-split-button__trigger.ds-circular-button--disabled {
+  opacity: 1;
+  cursor: progress;
+}
+
+/* ============================================
+   SECONDARY
+   Both segments are outlined, so the gap would
+   put two hairlines side by side at the seam.
+   Collapse it: no gap, the trigger drops its
+   leading border, and the main segment's own
+   border is the one divider line.
+   ============================================ */
+
+.ds-split-button--secondary {
+  gap: 0;
+}
+
+.ds-split-button--secondary .ds-split-button__trigger {
+  border-inline-start: none;
+}

package/components/SplitButton/SplitButton.d.ts

@@ -0,0 +1,43 @@
+import { default as React } from 'react';
+import { DropdownMenuEntry } from '../DropdownMenu/DropdownMenu';
+export type { DropdownMenuEntry as SplitButtonMenuEntry } from '../DropdownMenu/DropdownMenu';
+/** Props owned by SplitButton itself — everything else falls through to the primary button. */
+type SplitButtonOwnProps = {
+    /** Label of the primary action */
+    label: string;
+    /** Click handler for the primary action */
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    /** Menu entries for the alternative actions */
+    items: DropdownMenuEntry[];
+    /** Visual treatment, shared by both segments */
+    variant?: 'primary' | 'secondary';
+    /** Component size */
+    size?: 'default' | 'compact';
+    /** Disables both segments */
+    disabled?: boolean;
+    /** Shows a spinner on the primary segment and blocks interaction while an async action runs */
+    loading?: boolean;
+    /** Icon for the primary segment — Material Symbol name or custom element */
+    iconLeft?: string | React.ReactNode;
+    /** Horizontal alignment of the menu panel relative to the control */
+    align?: 'start' | 'end';
+    /** Accessible name of the menu trigger segment */
+    menuLabel?: string;
+    /** Additional CSS classes, applied to the wrapper around both segments, not the primary button */
+    className?: string;
+};
+export interface SplitButtonProps extends SplitButtonOwnProps, Omit<React.ComponentPropsWithoutRef<'button'>, keyof SplitButtonOwnProps | 'type'> {
+}
+/**
+ * A primary action with an attached menu of alternatives — "Save" beside
+ * "Save as draft" and "Save as template". One pill silhouette, two segments:
+ * the label fires `onClick` directly, the chevron opens a DropdownMenu, so
+ * the default stays one click away while the variants stay discoverable.
+ *
+ * Forwards a ref to the primary segment's button and spreads unrecognised
+ * props onto that segment — while `className` composes onto the wrapper
+ * around both segments. Menu behaviour (keyboard, outside click, sub-menus)
+ * is DropdownMenu's, unchanged. Purely compositional (no 'use client'), like
+ * ButtonGroup: the interactivity lives in the pieces it assembles.
+ */
+export declare const SplitButton: React.ForwardRefExoticComponent<SplitButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/components/SplitButton/SplitButton.js

@@ -0,0 +1,66 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React from "react";
+import { Button } from "../Button/Button.js";
+import { CircularButton } from "../CircularButton/CircularButton.js";
+import { DropdownMenu } from "../DropdownMenu/DropdownMenu.js";
+import "./SplitButton.css";
+const SplitButton = React.forwardRef(
+  ({
+    label,
+    onClick,
+    items,
+    variant = "primary",
+    size = "default",
+    disabled = false,
+    loading = false,
+    iconLeft,
+    align = "end",
+    menuLabel = "More actions",
+    className = "",
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-split-button";
+    const classes = [baseClass, `${baseClass}--${variant}`, className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs("span", { className: classes, children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          ...rest,
+          ref,
+          className: `${baseClass}__main`,
+          label,
+          iconLeft,
+          variant,
+          size,
+          disabled,
+          loading,
+          onClick
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        DropdownMenu,
+        {
+          className: `${baseClass}__menu`,
+          align,
+          size,
+          items,
+          trigger: /* @__PURE__ */ jsx(
+            CircularButton,
+            {
+              className: `${baseClass}__trigger`,
+              icon: "keyboard_arrow_down",
+              ariaLabel: menuLabel,
+              variant,
+              size,
+              disabled: disabled || loading
+            }
+          )
+        }
+      )
+    ] });
+  }
+);
+SplitButton.displayName = "SplitButton";
+export {
+  SplitButton
+};

package/components/StreamingText/StreamingText.d.ts

@@ -1,4 +1,6 @@
 import { default as React } from 'react';
+export type { StreamReveal, StreamRevealOptions, UseStreamRevealOptions, } from './useStreamReveal';
+export { createStreamReveal, useStreamReveal } from './useStreamReveal';
 /** Props owned by StreamingText itself — everything else falls through to the root span. */
 type StreamingTextOwnProps = {
     /**
@@ -13,9 +15,21 @@ type StreamingTextOwnProps = {
      */
     streaming?: boolean;
     /**
-     * Milliseconds between reveal steps. The reveal adds more characters per
-     * step the further it falls behind, so a large chunk catches up instead of
-     * typing for seconds.
+     * Slowest the reveal ever runs, in characters per second — the pace a
+     * thin trickle of chunks types at. Defaults to MOTION_STREAM_FLOOR_CPS.
+     */
+    floorCps?: number;
+    /**
+     * However much text is waiting, it is fully on screen within this long,
+     * in milliseconds — the rate rises with the backlog. Defaults to
+     * MOTION_STREAM_DRAIN_MS.
+     */
+    drainMs?: number;
+    /**
+     * The retired interval between reveal steps; when set, its equivalent
+     * rate becomes the reveal's floor.
+     * @deprecated The reveal is frame-driven now — pace it with `floorCps`
+     * and `drainMs` instead.
      */
     charIntervalMs?: number;
     /** Shows the blinking cursor while streaming or revealing. */
@@ -34,11 +48,15 @@ export interface StreamingTextProps extends StreamingTextOwnProps, Omit<React.Co
  * StreamingText — the reveal for text that arrives in chunks: an LLM
  * response typing itself out, with a cursor that blinks while more is
  * coming. Feed it the accumulated text on every render and it animates
- * through what was appended, catching up faster the further behind it
- * falls. Under `prefers-reduced-motion` the reveal is skipped and each
- * chunk appears whole. Announcement is the container's job — pair it with
- * an `aria-live` region when the surrounding UI does not already announce
- * the message.
+ * through what was appended from a frame loop that spends real elapsed
+ * time: a thin trickle types at the floor rate, and however much lands at
+ * once is on screen within the drain window. Under
+ * `prefers-reduced-motion` the reveal is skipped and each chunk appears
+ * whole. Announcement is the container's job — pair it with an
+ * `aria-live` region when the surrounding UI does not already announce
+ * the message. When the streamed text needs its own renderer (markdown
+ * through a parser), pace it with `useStreamReveal` or
+ * `createStreamReveal` from this folder instead — the same engine without
+ * the span.
  */
 export declare const StreamingText: React.ForwardRefExoticComponent<StreamingTextProps & React.RefAttributes<HTMLSpanElement>>;
-export {};

package/components/StreamingText/StreamingText.js

@@ -1,48 +1,34 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
-import React, { useState, useRef, useEffect } from "react";
-import { MOTION_STREAM_CHAR_INTERVAL_MS } from "../../tokens/motion.js";
+import React, { useRef, useEffect } from "react";
+import { useStreamReveal } from "./useStreamReveal.js";
+import { createStreamReveal } from "./useStreamReveal.js";
 import "./StreamingText.css";
 const StreamingText = React.forwardRef(
   ({
     text,
     streaming = false,
-    charIntervalMs = MOTION_STREAM_CHAR_INTERVAL_MS,
+    floorCps,
+    drainMs,
+    charIntervalMs,
     cursor = true,
     onRevealComplete,
     className = "",
     ...rest
   }, ref) => {
     const baseClass = "ds-streaming-text";
-    const [revealed, setRevealed] = useState(text.length);
-    const previousText = useRef(text);
+    const { visible, caughtUp } = useStreamReveal(text, {
+      // The legacy interval's equivalent rate: one character per step.
+      floorCps: charIntervalMs != null ? 1e3 / charIntervalMs : floorCps,
+      drainMs
+    });
     const completed = useRef(false);
     useEffect(() => {
-      if (!text.startsWith(previousText.current)) {
-        setRevealed(0);
+      if (!caughtUp) {
         completed.current = false;
-      }
-      previousText.current = text;
-    }, [text]);
-    const caughtUp = revealed >= text.length;
-    useEffect(() => {
-      if (caughtUp) return;
-      completed.current = false;
-      if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
-        setRevealed(text.length);
         return;
       }
-      const interval = setInterval(() => {
-        setRevealed((current) => {
-          const pending = text.length - current;
-          if (pending <= 0) return current;
-          return current + Math.max(1, Math.round(pending / 20));
-        });
-      }, charIntervalMs);
-      return () => clearInterval(interval);
-    }, [text, caughtUp, charIntervalMs]);
-    useEffect(() => {
-      if (caughtUp && !streaming && text.length > 0 && !completed.current) {
+      if (!streaming && text.length > 0 && !completed.current) {
         completed.current = true;
         onRevealComplete?.();
       }
@@ -50,12 +36,14 @@ const StreamingText = React.forwardRef(
     const showCursor = cursor && (streaming || !caughtUp);
     const classes = [baseClass, className].filter(Boolean).join(" ");
     return /* @__PURE__ */ jsxs("span", { ...rest, ref, className: classes, children: [
-      caughtUp ? text : text.slice(0, revealed),
+      visible,
       showCursor && /* @__PURE__ */ jsx("span", { className: `${baseClass}__cursor`, "aria-hidden": "true" })
     ] });
   }
 );
 StreamingText.displayName = "StreamingText";
 export {
-  StreamingText
+  StreamingText,
+  createStreamReveal,
+  useStreamReveal
 };

package/components/StreamingText/useStreamReveal.d.ts

@@ -0,0 +1,70 @@
+export interface StreamRevealOptions {
+    /** Receives the visible slice each time the reveal moves it. */
+    onUpdate: (visible: string) => void;
+    /**
+     * Slowest the reveal ever runs, in characters per second. Defaults to
+     * MOTION_STREAM_FLOOR_CPS.
+     */
+    floorCps?: number;
+    /**
+     * However much text is waiting, it is fully on screen within this long,
+     * in milliseconds. Defaults to MOTION_STREAM_DRAIN_MS.
+     */
+    drainMs?: number;
+    /**
+     * Whether appended text is paced at all. Pass false (or a function
+     * returning false — it is read on every append) to show each chunk
+     * whole: the reduced-motion path.
+     */
+    paced?: boolean | (() => boolean);
+}
+export interface StreamReveal {
+    /** Text the source produced since the last call — paced onto the screen. */
+    append: (chunk: string) => void;
+    /** Everything that has arrived, on screen now — for stops and aborts. */
+    flush: () => void;
+    /**
+     * Replace what has arrived wholesale and show it immediately, unpaced —
+     * for text that is not the stream speaking (a notice, an error), or to
+     * seed text that should not animate.
+     */
+    showWhole: (text: string) => void;
+    /** Drop everything and reveal `text` as a new message, from zero. */
+    restart: (text: string) => void;
+    /**
+     * Resolves once the reveal has caught up with everything that arrived —
+     * immediately when it already has.
+     */
+    drained: () => Promise<void>;
+    /** Stop the frame loop. Nothing more is revealed until the next append. */
+    cancel: () => void;
+}
+/**
+ * Create a reveal for one streamed message. The caller owns rendering:
+ * `onUpdate` fires with the visible slice, at most once per frame.
+ */
+export declare function createStreamReveal(options: StreamRevealOptions): StreamReveal;
+export interface UseStreamRevealOptions {
+    /**
+     * Slowest the reveal ever runs, in characters per second. Defaults to
+     * MOTION_STREAM_FLOOR_CPS.
+     */
+    floorCps?: number;
+    /**
+     * However much text is waiting, it is fully on screen within this long,
+     * in milliseconds. Defaults to MOTION_STREAM_DRAIN_MS.
+     */
+    drainMs?: number;
+}
+/**
+ * The declarative face of the engine, for React surfaces: feed it the
+ * accumulated text on every render and read back the paced slice. Text
+ * present on mount shows whole; a value that does not extend the previous
+ * one is a new message and reveals from zero. Checks
+ * `prefers-reduced-motion` itself, since no CSS guard can see a frame
+ * loop, and shows each chunk whole under it.
+ */
+export declare function useStreamReveal(text: string, { floorCps, drainMs }?: UseStreamRevealOptions): {
+    visible: string;
+    caughtUp: boolean;
+};

package/components/StreamingText/useStreamReveal.js

@@ -0,0 +1,121 @@
+"use client";
+import { useState, useRef, useEffect } from "react";
+import { MOTION_STREAM_FLOOR_CPS, MOTION_STREAM_DRAIN_MS } from "../../tokens/motion.js";
+function createStreamReveal(options) {
+  let arrived = "";
+  let revealed = 0;
+  let rafId = null;
+  let lastFrame = 0;
+  let resolvers = [];
+  const isPaced = () => {
+    const paced = options.paced;
+    return typeof paced === "function" ? paced() : paced !== false;
+  };
+  const settle = () => {
+    const pending = resolvers;
+    resolvers = [];
+    for (const resolve of pending) resolve();
+  };
+  const cancel = () => {
+    if (rafId != null) cancelAnimationFrame(rafId);
+    rafId = null;
+    lastFrame = 0;
+  };
+  const schedule = () => {
+    if (rafId == null) rafId = requestAnimationFrame(frame);
+  };
+  function frame(now) {
+    rafId = null;
+    const seconds = lastFrame === 0 ? 0 : (now - lastFrame) / 1e3;
+    lastFrame = now;
+    const backlog = arrived.length - revealed;
+    if (backlog > 0 && seconds > 0) {
+      const floorCps = options.floorCps ?? MOTION_STREAM_FLOOR_CPS;
+      const drainMs = options.drainMs ?? MOTION_STREAM_DRAIN_MS;
+      const cps = Math.max(floorCps, backlog / (drainMs / 1e3));
+      revealed = Math.min(arrived.length, revealed + Math.max(1, Math.round(cps * seconds)));
+      options.onUpdate(arrived.slice(0, revealed));
+    }
+    if (revealed < arrived.length) schedule();
+    else {
+      lastFrame = 0;
+      settle();
+    }
+  }
+  const flush = () => {
+    cancel();
+    if (revealed < arrived.length) {
+      revealed = arrived.length;
+      options.onUpdate(arrived);
+    }
+    settle();
+  };
+  return {
+    append: (chunk) => {
+      if (chunk === "") return;
+      arrived += chunk;
+      if (isPaced()) schedule();
+      else flush();
+    },
+    flush,
+    showWhole: (text) => {
+      cancel();
+      arrived = text;
+      revealed = text.length;
+      options.onUpdate(text);
+      settle();
+    },
+    restart: (text) => {
+      cancel();
+      arrived = text;
+      revealed = 0;
+      options.onUpdate("");
+      if (arrived === "") return;
+      if (isPaced()) schedule();
+      else flush();
+    },
+    drained: () => revealed >= arrived.length ? Promise.resolve() : new Promise((resolve) => {
+      resolvers.push(resolve);
+      schedule();
+    }),
+    cancel
+  };
+}
+function useStreamReveal(text, { floorCps, drainMs } = {}) {
+  const [revealedText, setRevealedText] = useState(text);
+  const engineRef = useRef(null);
+  const floorCpsRef = useRef(floorCps);
+  const drainMsRef = useRef(drainMs);
+  const previous = useRef(text);
+  useEffect(() => () => engineRef.current?.cancel(), []);
+  useEffect(() => {
+    floorCpsRef.current = floorCps;
+    drainMsRef.current = drainMs;
+  }, [floorCps, drainMs]);
+  useEffect(() => {
+    if (engineRef.current === null) {
+      engineRef.current = createStreamReveal({
+        onUpdate: setRevealedText,
+        paced: () => !window.matchMedia("(prefers-reduced-motion: reduce)").matches,
+        get floorCps() {
+          return floorCpsRef.current;
+        },
+        get drainMs() {
+          return drainMsRef.current;
+        }
+      });
+      engineRef.current.showWhole(previous.current);
+    }
+    if (text === previous.current) return;
+    const engine = engineRef.current;
+    if (text.startsWith(previous.current)) engine.append(text.slice(previous.current.length));
+    else engine.restart(text);
+    previous.current = text;
+  }, [text]);
+  const visible = text.startsWith(revealedText) ? revealedText : "";
+  return { visible, caughtUp: visible.length >= text.length };
+}
+export {
+  createStreamReveal,
+  useStreamReveal
+};

package/components/registry.json

@@ -163,6 +163,14 @@
       "category": "data-display",
       "client": false
     },
+    {
+      "name": "Banner",
+      "label": "Banner",
+      "slug": "banner",
+      "description": "Full-width status strip for page-level announcements, with an action slot and optional dismissal.",
+      "category": "feedback",
+      "client": false
+    },
     {
       "name": "BarChart",
       "label": "Bar chart",
@@ -509,6 +517,22 @@
       "category": "maps",
       "client": true
     },
+    {
+      "name": "HoverCard",
+      "label": "Hover card",
+      "slug": "hover-card",
+      "description": "Rich preview panel that opens from hover or focus, with interactive content and position options.",
+      "category": "overlays",
+      "client": true
+    },
+    {
+      "name": "ImageCompare",
+      "label": "Image compare",
+      "slug": "image-compare",
+      "description": "Before-and-after image comparison with a draggable divider, keyboard control, and corner labels.",
+      "category": "data-display",
+      "client": true
+    },
     {
       "name": "Input",
       "label": "Input",
@@ -598,6 +622,14 @@
       "category": "ai",
       "client": false
     },
+    {
+      "name": "Meter",
+      "label": "Meter",
+      "slug": "meter",
+      "description": "Level indicator for a known quantity, with a status-coloured fill and an optional value readout.",
+      "category": "feedback",
+      "client": false
+    },
     {
       "name": "ModelPicker",
       "label": "Model picker",
@@ -737,6 +769,14 @@
       "category": "forms",
       "client": true
     },
+    {
+      "name": "Rating",
+      "label": "Rating",
+      "slug": "rating",
+      "description": "Star-scale rating control with keyboard selection, a read-only mode, and a configurable icon.",
+      "category": "forms",
+      "client": true
+    },
     {
       "name": "Reasoning",
       "label": "Reasoning",
@@ -826,6 +866,14 @@
       "category": "feedback",
       "client": false
     },
+    {
+      "name": "SplitButton",
+      "label": "Split button",
+      "slug": "split-button",
+      "description": "Primary action with an attached menu of alternatives, composing Button and DropdownMenu in one pill.",
+      "category": "actions",
+      "client": false
+    },
     {
       "name": "SplitPane",
       "label": "Split pane",