@robr0/design-system 0.12.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/SplitPane/SplitPane.css

@@ -0,0 +1,106 @@
+/* ============================================
+   SPLIT PANE COMPONENT
+   Two resizable regions with a draggable
+   divider. The split rides a custom property
+   set from JS; everything visual is tokens.
+   ============================================ */
+
+/* Base */
+
+.ds-split-pane {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+}
+
+.ds-split-pane--horizontal {
+  flex-direction: row;
+}
+
+.ds-split-pane--vertical {
+  flex-direction: column;
+}
+
+/* While dragging, suppress text selection everywhere in the container so a
+   fast drag doesn't paint selections through the panes. */
+.ds-split-pane--dragging {
+  user-select: none;
+}
+
+/* Panes clip; scrolling belongs to a consumer-owned container inside the
+   pane, which can then be focusable (a bare scrollable region fails the
+   axe scrollable-region-focusable rule, and a pane that is always a tab
+   stop would be worse). */
+
+.ds-split-pane__pane {
+  overflow: hidden;
+  min-width: 0;
+  min-height: 0;
+}
+
+.ds-split-pane__pane--first {
+  flex: 0 0 var(--ds-split-pane-split, 50%);
+}
+
+.ds-split-pane__pane--second {
+  flex: 1 1 0;
+}
+
+/* Separator */
+
+.ds-split-pane__separator {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: transparent;
+  touch-action: none;
+  transition: background-color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-split-pane--horizontal .ds-split-pane__separator {
+  width: var(--gap-sm);
+  cursor: col-resize;
+}
+
+.ds-split-pane--vertical .ds-split-pane__separator {
+  height: var(--gap-sm);
+  cursor: row-resize;
+}
+
+.ds-split-pane__separator:hover,
+.ds-split-pane--dragging .ds-split-pane__separator {
+  background-color: var(--color-bg-container-secondary);
+}
+
+.ds-split-pane__separator:focus-visible {
+  outline: var(--border-md) solid var(--color-action-primary-bg);
+  outline-offset: calc(var(--border-md) * -1);
+  border-radius: var(--radius-xxs);
+}
+
+/* Grip */
+
+.ds-split-pane__grip {
+  display: block;
+  border-radius: var(--radius-full);
+  background-color: var(--color-bg-container-border);
+  transition: background-color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-split-pane--horizontal .ds-split-pane__grip {
+  width: var(--gap-xxs);
+  height: var(--gap-xl);
+}
+
+.ds-split-pane--vertical .ds-split-pane__grip {
+  width: var(--gap-xl);
+  height: var(--gap-xxs);
+}
+
+.ds-split-pane__separator:hover .ds-split-pane__grip,
+.ds-split-pane--dragging .ds-split-pane__grip {
+  background-color: var(--color-icon-secondary);
+}

package/components/SplitPane/SplitPane.d.ts

@@ -0,0 +1,36 @@
+import { default as React } from 'react';
+/** Props owned by SplitPane itself — everything else falls through to the root div. */
+type SplitPaneOwnProps = {
+    /** The two panes, in order. Children beyond the first two are ignored. */
+    children: React.ReactNode;
+    /** Which way the panes sit: side by side, or stacked. */
+    direction?: 'horizontal' | 'vertical';
+    /** First pane's share as a percentage (controlled). Pair with `onSplitChange`. */
+    split?: number;
+    /** First pane's share as a percentage (uncontrolled initial value). */
+    defaultSplit?: number;
+    /** Smallest share the first pane can be dragged to, as a percentage. */
+    minSplit?: number;
+    /** Largest share the first pane can be dragged to, as a percentage. */
+    maxSplit?: number;
+    /** Fires with the new percentage on every drag step or keyboard resize. */
+    onSplitChange?: (split: number) => void;
+    /** Accessible name for the resize handle. */
+    separatorLabel?: string;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface SplitPaneProps extends SplitPaneOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof SplitPaneOwnProps> {
+}
+/**
+ * SplitPane — two resizable regions with a draggable divider: the sidebar
+ * and canvas, the list and detail, the editor and preview. The split is a
+ * percentage, so it survives container resizes. The divider is a real
+ * `separator`: focusable, arrow keys nudge it (Shift for big steps, Home/End
+ * to the limits), and pointer drags use capture so a fast drag can't escape
+ * it. Panes clip their content rather than growing the page; a region that
+ * should scroll brings its own focusable scroll container, so keyboard
+ * users can reach it.
+ */
+export declare const SplitPane: React.ForwardRefExoticComponent<SplitPaneProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/SplitPane/SplitPane.js

@@ -0,0 +1,130 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useState, useRef } from "react";
+import "./SplitPane.css";
+const KEY_STEP = 2;
+const KEY_STEP_LARGE = 10;
+const SplitPane = React.forwardRef(
+  ({
+    children,
+    direction = "horizontal",
+    split,
+    defaultSplit = 50,
+    minSplit = 10,
+    maxSplit = 90,
+    onSplitChange,
+    separatorLabel = "Resize panes",
+    className = "",
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-split-pane";
+    const [uncontrolledSplit, setUncontrolledSplit] = useState(defaultSplit);
+    const [dragging, setDragging] = useState(false);
+    const draggingRef = useRef(false);
+    const internalRef = useRef(null);
+    const setRef = (node) => {
+      internalRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    };
+    const clamp = (value) => Math.min(Math.max(value, minSplit), maxSplit);
+    const currentSplit = clamp(split ?? uncontrolledSplit);
+    const applySplit = (value) => {
+      const next = clamp(value);
+      if (split === void 0) setUncontrolledSplit(next);
+      onSplitChange?.(next);
+    };
+    const splitFromPointer = (e) => {
+      const rect = internalRef.current?.getBoundingClientRect();
+      if (!rect) return;
+      const fraction = direction === "horizontal" ? (e.clientX - rect.left) / rect.width : (e.clientY - rect.top) / rect.height;
+      applySplit(fraction * 100);
+    };
+    const handlePointerDown = (e) => {
+      e.currentTarget.setPointerCapture(e.pointerId);
+      draggingRef.current = true;
+      setDragging(true);
+      splitFromPointer(e);
+    };
+    const handlePointerMove = (e) => {
+      if (!draggingRef.current) return;
+      splitFromPointer(e);
+    };
+    const handlePointerUp = (e) => {
+      if (e.currentTarget.hasPointerCapture(e.pointerId)) {
+        e.currentTarget.releasePointerCapture(e.pointerId);
+      }
+      draggingRef.current = false;
+      setDragging(false);
+    };
+    const handleKeyDown = (e) => {
+      const step = e.shiftKey ? KEY_STEP_LARGE : KEY_STEP;
+      const shrinkKey = direction === "horizontal" ? "ArrowLeft" : "ArrowUp";
+      const growKey = direction === "horizontal" ? "ArrowRight" : "ArrowDown";
+      switch (e.key) {
+        case shrinkKey:
+          e.preventDefault();
+          applySplit(currentSplit - step);
+          break;
+        case growKey:
+          e.preventDefault();
+          applySplit(currentSplit + step);
+          break;
+        case "Home":
+          e.preventDefault();
+          applySplit(minSplit);
+          break;
+        case "End":
+          e.preventDefault();
+          applySplit(maxSplit);
+          break;
+      }
+    };
+    const classes = [
+      baseClass,
+      `${baseClass}--${direction}`,
+      dragging && `${baseClass}--dragging`,
+      className
+    ].filter(Boolean).join(" ");
+    const [first, second] = React.Children.toArray(children);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...rest,
+        ref: setRef,
+        className: classes,
+        style: {
+          "--ds-split-pane-split": `${currentSplit}%`,
+          ...rest.style
+        },
+        children: [
+          /* @__PURE__ */ jsx("div", { className: `${baseClass}__pane ${baseClass}__pane--first`, children: first }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `${baseClass}__separator`,
+              role: "separator",
+              tabIndex: 0,
+              "aria-label": separatorLabel,
+              "aria-orientation": direction === "horizontal" ? "vertical" : "horizontal",
+              "aria-valuenow": Math.round(currentSplit),
+              "aria-valuemin": Math.round(minSplit),
+              "aria-valuemax": Math.round(maxSplit),
+              onPointerDown: handlePointerDown,
+              onPointerMove: handlePointerMove,
+              onPointerUp: handlePointerUp,
+              onPointerCancel: handlePointerUp,
+              onKeyDown: handleKeyDown,
+              children: /* @__PURE__ */ jsx("span", { className: `${baseClass}__grip`, "aria-hidden": "true" })
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: `${baseClass}__pane ${baseClass}__pane--second`, children: second })
+        ]
+      }
+    );
+  }
+);
+SplitPane.displayName = "SplitPane";
+export {
+  SplitPane
+};

package/components/StreamingText/StreamingText.css

@@ -0,0 +1,40 @@
+/* ============================================
+   STREAMING TEXT COMPONENT
+   Progressive reveal for text arriving in
+   chunks, with a blinking cursor. Inherits the
+   surrounding typography — the reveal is not a
+   text style of its own.
+   ============================================ */
+
+/* Base */
+
+.ds-streaming-text {
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+}
+
+/* Cursor */
+
+.ds-streaming-text__cursor {
+  display: inline-block;
+  width: 0.55em;
+  height: 1em;
+  margin-left: 0.1em;
+  vertical-align: text-bottom;
+  border-radius: var(--radius-xxs);
+  background-color: currentColor;
+  animation: ds-streaming-text-blink var(--motion-duration-loop-spin) var(--motion-ease-standard)
+    infinite;
+}
+
+@keyframes ds-streaming-text-blink {
+  0%,
+  45% {
+    opacity: 1;
+  }
+
+  55%,
+  100% {
+    opacity: 0.15;
+  }
+}

package/components/StreamingText/StreamingText.d.ts

@@ -0,0 +1,62 @@
+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 = {
+    /**
+     * The text received so far. Grow it across renders as chunks arrive; the
+     * reveal animates through the appended part. A value that does not extend
+     * the previous one is treated as a new message and reveals from the start.
+     */
+    text: string;
+    /**
+     * Whether the source is still producing text. Keeps the cursor visible
+     * between chunks, when the reveal has caught up but more may arrive.
+     */
+    streaming?: boolean;
+    /**
+     * 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. */
+    cursor?: boolean;
+    /**
+     * Fires once when the reveal catches up with `text` after `streaming` has
+     * ended — the moment the message is fully on screen.
+     */
+    onRevealComplete?: () => void;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface StreamingTextProps extends StreamingTextOwnProps, Omit<React.ComponentPropsWithoutRef<'span'>, keyof StreamingTextOwnProps | 'children'> {
+}
+/**
+ * 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 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>>;

package/components/StreamingText/StreamingText.js

@@ -0,0 +1,49 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+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,
+    floorCps,
+    drainMs,
+    charIntervalMs,
+    cursor = true,
+    onRevealComplete,
+    className = "",
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-streaming-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 (!caughtUp) {
+        completed.current = false;
+        return;
+      }
+      if (!streaming && text.length > 0 && !completed.current) {
+        completed.current = true;
+        onRevealComplete?.();
+      }
+    }, [caughtUp, streaming, text, onRevealComplete]);
+    const showCursor = cursor && (streaming || !caughtUp);
+    const classes = [baseClass, className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs("span", { ...rest, ref, className: classes, children: [
+      visible,
+      showCursor && /* @__PURE__ */ jsx("span", { className: `${baseClass}__cursor`, "aria-hidden": "true" })
+    ] });
+  }
+);
+StreamingText.displayName = "StreamingText";
+export {
+  StreamingText,
+  createStreamReveal,
+  useStreamReveal
+};