rift-ds 1.0.0

package/components/UsageCard/UsageCard.d.ts

@@ -0,0 +1,48 @@
+import { default as React } from 'react';
+/** One budgeted quantity in the card — a meter row with an optional reset caption. */
+export interface UsageItem {
+    /** What is being budgeted, e.g. the context window or a weekly limit */
+    label: string;
+    /** Current level */
+    value: number;
+    /** Upper bound of the budget; defaults to 100 */
+    max?: number;
+    /** Readout override replacing the default percentage, e.g. a token count */
+    valueText?: string;
+    /** Caption under the bar's trailing edge, e.g. when the limit resets */
+    resetLabel?: string;
+    /** Status override; left unset, the fill recolours through the card's thresholds */
+    variant?: 'info' | 'positive' | 'warning' | 'error' | 'neutral';
+}
+/** Props owned by UsageCard itself — everything else falls through to the root node. */
+type UsageCardOwnProps = {
+    /** The budgets to show, one meter row each */
+    items: UsageItem[];
+    /** Card title in the shared chart-chrome header */
+    title?: string;
+    /** Supporting line under the title */
+    subtitle?: string;
+    /** Fractions of an item's max where its fill recolours to warning and then error */
+    thresholds?: {
+        warning?: number;
+        error?: number;
+    };
+    /** Chrome off (no border, padding, or fill) for use inside a panel that supplies the surface */
+    bare?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface UsageCardProps extends UsageCardOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof UsageCardOwnProps> {
+}
+/**
+ * An agent's budgets at a glance — the context window plus any number of
+ * plan or rate limits, one Meter row each, with reset captions. Wears the
+ * chart family's card chrome and takes `bare` for use inside a panel.
+ *
+ * Each fill recolours as its level crosses the card's thresholds (info
+ * until warning, then warning, then error), mirroring Gauge's threshold
+ * idea; an item's own `variant` overrides the derivation. Purely
+ * presentational (no 'use client'), so it renders from a Server Component.
+ */
+export declare const UsageCard: React.ForwardRefExoticComponent<UsageCardProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/UsageCard/UsageCard.js

@@ -0,0 +1,54 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React from "react";
+import { Meter } from "../Meter/Meter.js";
+import "../Chart/Chart.css";
+import "./UsageCard.css";
+const DEFAULT_THRESHOLDS = { warning: 0.8, error: 0.95 };
+const UsageCard = React.forwardRef(
+  ({
+    items,
+    title,
+    subtitle,
+    thresholds,
+    bare = false,
+    className = "",
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-usage-card";
+    const limits = { ...DEFAULT_THRESHOLDS, ...thresholds };
+    const variantFor = (item) => {
+      if (item.variant) return item.variant;
+      const max = item.max ?? 100;
+      const fraction = max > 0 ? Math.max(0, Math.min(1, item.value / max)) : 0;
+      if (fraction >= limits.error) return "error";
+      if (fraction >= limits.warning) return "warning";
+      return "info";
+    };
+    const classes = [baseClass, "ds-chart", bare && "ds-chart--bare", className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: classes, children: [
+      (title || subtitle) && /* @__PURE__ */ jsx("div", { className: "ds-chart__header", children: /* @__PURE__ */ jsxs("div", { className: "ds-chart__header-text", children: [
+        title && /* @__PURE__ */ jsx("span", { className: "ds-chart__title", children: title }),
+        subtitle && /* @__PURE__ */ jsx("span", { className: "ds-chart__subtitle", children: subtitle })
+      ] }) }),
+      /* @__PURE__ */ jsx("div", { className: `${baseClass}__items`, children: items.map((item, index) => /* @__PURE__ */ jsxs("div", { className: `${baseClass}__item`, children: [
+        /* @__PURE__ */ jsx(
+          Meter,
+          {
+            label: item.label,
+            value: item.value,
+            max: item.max ?? 100,
+            valueText: item.valueText,
+            showValue: true,
+            variant: variantFor(item),
+            size: "compact"
+          }
+        ),
+        item.resetLabel && /* @__PURE__ */ jsx("span", { className: `${baseClass}__reset`, children: item.resetLabel })
+      ] }, `${item.label}-${index}`)) })
+    ] });
+  }
+);
+UsageCard.displayName = "UsageCard";
+export {
+  UsageCard
+};

package/components/Waveform/Waveform.css

@@ -0,0 +1,97 @@
+/* ============================================
+   WAVEFORM COMPONENT
+   Voice indicator — a row of bars dancing on
+   the shared twelve-slot cycle
+   ============================================ */
+
+/* Base — height rides the icon scale, bar width derives from it, and the
+   colour routes through one custom property so a consumer can tint the wave. */
+
+.ds-waveform {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-050);
+  height: var(--icon-size-600);
+  --ds-waveform-color: var(--color-text-secondary);
+}
+
+.ds-waveform--compact {
+  height: var(--icon-size-500);
+}
+
+.ds-waveform__bar {
+  width: calc(var(--icon-size-500) / 5); /* 4px, derived from the scale */
+  height: 100%;
+  flex-shrink: 0;
+  border-radius: var(--radius-pill);
+  background-color: var(--ds-waveform-color);
+  transform: scaleY(0.25);
+  transform-origin: center;
+}
+
+/* States */
+
+/* Idle: parked low in the tertiary tier — present, not performing. */
+.ds-waveform--idle {
+  --ds-waveform-color: var(--color-text-tertiary);
+}
+
+/* Listening runs the same wave at roughly half height; speaking at full.
+   One keyframe set, scaled per state through --ds-waveform-peak. */
+.ds-waveform--listening {
+  --ds-waveform-peak: 0.55;
+}
+
+.ds-waveform--speaking {
+  --ds-waveform-peak: 1;
+}
+
+.ds-waveform--listening .ds-waveform__bar,
+.ds-waveform--speaking .ds-waveform__bar {
+  animation: ds-waveform-wave var(--motion-duration-loop-matrix) var(--motion-ease-standard)
+    infinite;
+  /* Negative delay by cycle slot: every bar is already mid-wave on mount,
+     and the peak travels down the row. */
+  animation-delay: calc(var(--ds-waveform-step, 0) * (var(--motion-duration-loop-matrix) / -12));
+}
+
+@keyframes ds-waveform-wave {
+  0%,
+  100% {
+    transform: scaleY(0.25);
+  }
+  50% {
+    transform: scaleY(calc(var(--ds-waveform-amp, 1) * var(--ds-waveform-peak, 1)));
+  }
+}
+
+/* Controlled mode — a real analyser drives the bars; each one eases to its
+   level instead of animating. */
+.ds-waveform--levels .ds-waveform__bar {
+  animation: none;
+  transform: scaleY(var(--ds-waveform-level, 0.25));
+  transition: transform var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+/* Visually hidden state text — what a screen reader gets instead of bars. */
+.ds-waveform__sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+/* The looping wave parks on its resting contour rather than strobing
+   through the collapsed duration — same treatment as the other looping
+   indicators. */
+@media (prefers-reduced-motion: reduce) {
+  .ds-waveform--listening .ds-waveform__bar,
+  .ds-waveform--speaking .ds-waveform__bar {
+    animation: none;
+    transform: scaleY(calc(var(--ds-waveform-amp, 1) * 0.6));
+  }
+}

package/components/Waveform/Waveform.d.ts

@@ -0,0 +1,44 @@
+import { default as React } from 'react';
+/** Props owned by Waveform itself — everything else falls through to the root span. */
+type WaveformOwnProps = {
+    /**
+     * What the audio channel is doing: `idle` parks the bars low and still,
+     * `listening` runs a gentle half-height wave, `speaking` runs the full one.
+     * Ignored while `levels` drives the bars.
+     */
+    state?: 'idle' | 'listening' | 'speaking';
+    /** How many bars the wave has. */
+    bars?: number;
+    /**
+     * Live amplitudes from a real audio analyser, one 0–1 value per bar.
+     * Providing them switches the component to controlled mode: the CSS wave
+     * stops and each bar tracks its level, easing between updates.
+     */
+    levels?: number[];
+    /** Bar height scale — `default` sits on the md icon size, `compact` on sm. */
+    size?: 'default' | 'compact';
+    /**
+     * What a screen reader hears the indicator say. Defaults per state
+     * ("Listening", "Speaking", "Microphone idle").
+     */
+    label?: string;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface WaveformProps extends WaveformOwnProps, Omit<React.ComponentPropsWithoutRef<'span'>, keyof WaveformOwnProps> {
+}
+/**
+ * Waveform — the voice indicator: a row of bars that dance while audio is
+ * happening. The animated states are pure CSS choreography on the shared
+ * twelve-slot cycle (the same loop AgentStatus's dot patterns run on), so
+ * every audio indicator in a surface moves to one rhythm; `levels` hands the
+ * bars to a real analyser instead. Deliberately monochrome like the agent
+ * working states — colour is reserved for meaning, and a consumer can tint
+ * the whole wave through `--ds-waveform-color`.
+ *
+ * Purely presentational: safe to render from a Server Component. The bars
+ * are decoration to a screen reader; the state announces as text through a
+ * visually hidden live label.
+ */
+export declare const Waveform: React.ForwardRefExoticComponent<WaveformProps & React.RefAttributes<HTMLSpanElement>>;
+export {};

package/components/Waveform/Waveform.js

@@ -0,0 +1,46 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React from "react";
+import "./Waveform.css";
+const DEFAULT_LABELS = {
+  idle: "Microphone idle",
+  listening: "Listening",
+  speaking: "Speaking"
+};
+const Waveform = React.forwardRef(
+  ({ state = "idle", bars = 5, levels, size = "default", label, className = "", ...rest }, ref) => {
+    const baseClass = "ds-waveform";
+    const controlled = Array.isArray(levels);
+    const count = controlled ? levels.length : Math.max(bars, 1);
+    const classes = [
+      baseClass,
+      `${baseClass}--${size}`,
+      controlled ? `${baseClass}--levels` : `${baseClass}--${state}`,
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs("span", { ...rest, ref, className: classes, role: "status", children: [
+      Array.from({ length: count }, (_, i) => {
+        const amp = 0.35 + 0.65 * Math.sin(Math.PI * (i + 1) / (count + 1));
+        const step = i * 2 % 12;
+        const level = controlled ? Math.min(Math.max(levels[i], 0.08), 1) : void 0;
+        return /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: `${baseClass}__bar`,
+            "aria-hidden": "true",
+            style: {
+              "--ds-waveform-amp": amp,
+              "--ds-waveform-step": step,
+              ...level !== void 0 && { "--ds-waveform-level": level }
+            }
+          },
+          i
+        );
+      }),
+      /* @__PURE__ */ jsx("span", { className: `${baseClass}__sr`, children: label ?? DEFAULT_LABELS[state] })
+    ] });
+  }
+);
+Waveform.displayName = "Waveform";
+export {
+  Waveform
+};

package/components/WorldMap/WorldMap.css

@@ -0,0 +1,234 @@
+/* ============================================
+   WORLD MAP COMPONENT
+   A flat Mercator map: baked Natural Earth land,
+   a quiet graticule, and HTML markers positioned
+   over the drawing. Every colour is a token; the
+   marker dimensions are drawing geometry, like
+   ToggleSwitch's thumb (see the design.md spec).
+   ============================================ */
+
+/* Base — the root crops the frame, which carries the framed window's exact
+   aspect ratio so marker percentages line up with the drawing. */
+
+.ds-world-map {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.ds-world-map:focus-visible {
+  outline: var(--border-050) solid var(--color-action-primary-bg);
+  outline-offset: var(--padding-100);
+}
+
+.ds-world-map__frame {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  /* Until the first measurement, fill the root; the SVG's own fitting keeps
+     the drawing undistorted for that first frame. */
+  width: 100%;
+  height: 100%;
+}
+
+/* Grabbable whenever there is world beyond the window; the touch lock is
+   separate and applies only while zoomed, so an unzoomed map never
+   swallows the page's touch scroll. */
+.ds-world-map__frame--pannable {
+  cursor: grab;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.ds-world-map__frame--touch-lock {
+  touch-action: none;
+}
+
+.ds-world-map__frame--panning {
+  cursor: grabbing;
+}
+
+.ds-world-map__svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+/* Drawing — hairlines stay hairlines at any zoom via non-scaling strokes. */
+
+.ds-world-map__land {
+  fill: var(--color-bg-container-tertiary);
+  stroke: var(--color-divider);
+  stroke-width: 1;
+  vector-effect: non-scaling-stroke;
+}
+
+.ds-world-map__graticule {
+  fill: none;
+  stroke: var(--color-divider);
+  stroke-width: 1;
+  vector-effect: non-scaling-stroke;
+  opacity: 0.5;
+}
+
+/* Markers — real buttons over the drawing. The 20px hit target wraps a
+   10px glyph; both are geometry, not spacing. */
+
+.ds-world-map__marker {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: none;
+  background: none;
+  color: var(--ds-world-map-marker-color, var(--color-text-secondary));
+  font: inherit;
+}
+
+/* With a hover card, a slot owns the marker's position (the colour custom
+   property inherits down to the dot), the HoverCard wrapper keeps its own
+   relative layout, and the button sits statically inside it. A hovered or
+   focused slot rises above its neighbours so the card is never under a
+   later marker. */
+
+.ds-world-map__marker-slot {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  color: var(--ds-world-map-marker-color, var(--color-text-secondary));
+}
+
+.ds-world-map__marker-slot:hover,
+.ds-world-map__marker-slot:focus-within {
+  z-index: 4;
+}
+
+.ds-world-map__marker-slot .ds-world-map__marker {
+  position: static;
+  transform: none;
+}
+
+button.ds-world-map__marker {
+  cursor: pointer;
+}
+
+.ds-world-map__marker:focus-visible {
+  outline: var(--border-050) solid var(--color-action-primary-bg);
+  outline-offset: var(--padding-100);
+  border-radius: var(--radius-pill);
+}
+
+.ds-world-map__dot {
+  width: 10px;
+  height: 10px;
+  border-radius: var(--radius-pill);
+  background-color: currentColor;
+  /* A contrast ring in the surface colour, so a dot stays legible on land
+     and water alike — a ring, not an elevation shadow. */
+  box-shadow: 0 0 0 2px var(--color-bg-container-primary);
+  transition: transform var(--motion-duration-fast) var(--motion-ease-emphasized);
+}
+
+/* An anchor is something fixed: the square from Globe and MapLegend's
+   glyph vocabulary, outlined rather than filled. */
+.ds-world-map__marker--anchor .ds-world-map__dot {
+  border-radius: var(--radius-050);
+  background-color: var(--color-bg-container-primary);
+  box-shadow: inset 0 0 0 2px currentColor;
+}
+
+.ds-world-map__marker--active .ds-world-map__dot,
+button.ds-world-map__marker:hover .ds-world-map__dot {
+  transform: scale(1.3);
+}
+
+.ds-world-map__marker--active {
+  z-index: 1;
+}
+
+.ds-world-map__label {
+  position: absolute;
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  padding-left: var(--padding-100);
+  font-family: var(--font-family-code);
+  font-size: var(--font-caption-size);
+  line-height: var(--font-caption-line-height);
+  color: var(--color-text-tertiary);
+  white-space: nowrap;
+  pointer-events: none;
+}
+
+.ds-world-map__marker--active .ds-world-map__label {
+  color: var(--color-text-primary);
+}
+
+/* Zoom controls — the site's diagram pill (the architecture maps and the
+   canvas board): a glass pill floating at the bottom centre, holding zoom
+   out, the percent readout (resets to 100%), and zoom in. It stays put
+   while the map pans under it. */
+
+.ds-world-map__zoom {
+  position: absolute;
+  bottom: var(--padding-400);
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  gap: var(--gap-100);
+  padding: var(--padding-100) var(--padding-150);
+  border-radius: var(--radius-pill);
+  background: var(--color-bg-container-primary-semi);
+  backdrop-filter: blur(24px);
+  border: var(--border-025) solid var(--color-divider);
+  box-shadow: var(--shadow-floating);
+  z-index: 3;
+}
+
+.ds-world-map__zoom-level {
+  min-width: 4em;
+  height: var(--gap-1000);
+  padding: 0 var(--padding-150);
+  border: 0;
+  border-radius: var(--radius-pill);
+  background: none;
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-paragraph-sm-weight);
+  color: var(--color-text-primary);
+  font-variant-numeric: tabular-nums;
+  cursor: pointer;
+  transition: background var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-world-map__zoom-level:hover {
+  background: var(--color-bg-container-secondary);
+}
+
+.ds-world-map__zoom-level:focus-visible {
+  outline: var(--border-050) solid var(--color-action-primary-bg);
+  outline-offset: var(--gap-050);
+}
+
+/* Callout overlay — positioned at the marker, opening toward the map's
+   centre, where the room is. */
+
+.ds-world-map__callout {
+  position: absolute;
+  pointer-events: none;
+  padding: 0 var(--padding-400);
+  transform: translate(0, -100%);
+  white-space: nowrap;
+  z-index: 2;
+}
+
+.ds-world-map__callout[data-side='left'] {
+  transform: translate(-100%, -100%);
+}

package/components/WorldMap/WorldMap.d.ts

@@ -0,0 +1,113 @@
+import { default as React } from 'react';
+/** A place on the map. */
+export interface WorldMapPoint {
+    /** Stable identifier, referenced by `activePointId`. */
+    id: string;
+    /** Latitude in degrees, north positive. */
+    lat: number;
+    /** Longitude in degrees, east positive. */
+    lng: number;
+    /** Short label drawn beside the marker when `showLabels` is on, and the marker's accessible name. */
+    label?: string;
+    /**
+     * Marker glyph. `point` is a filled dot (something plotted), `anchor` is
+     * an outlined square (something fixed) — the same vocabulary Globe and
+     * MapLegend draw.
+     */
+    kind?: 'point' | 'anchor';
+    /**
+     * Marker colour, any CSS colour (`var(--color-chart-series-2)` works) —
+     * the flat map's channel for colour-coding a category per point. Omit for
+     * the default text colour.
+     */
+    color?: string;
+}
+/** The framed window: `[west, south, east, north]` in degrees. */
+export type WorldMapBounds = [number, number, number, number];
+/** Props owned by WorldMap itself — everything else falls through to the root `<div>`. */
+type WorldMapOwnProps = {
+    /** The places to mark. A point outside the framed view is simply not drawn. */
+    points?: WorldMapPoint[];
+    /**
+     * The window the map frames: `[west, south, east, north]` in degrees.
+     * It must not cross the antimeridian. Defaults to the whole world
+     * (Antarctica is not in the land data). Changing it resets any zoom.
+     */
+    bounds?: WorldMapBounds;
+    /**
+     * How the framed window meets the container: `contain` letterboxes so the
+     * whole window is visible, `cover` fills the container and crops the
+     * window's edges — the full-bleed stage look.
+     */
+    fit?: 'contain' | 'cover';
+    /**
+     * Renders the zoom pill (zoom out, a percent readout that resets the
+     * view, zoom in). Zoom steps into `bounds` and out past them — down to
+     * the whole world with air around it, the graticule carrying on into
+     * the space. Ctrl or ⌘ with the scroll wheel (a trackpad pinch) zooms at
+     * the pointer; a plain scroll keeps scrolling the page. Dragging, or the
+     * arrow keys with the map focused, moves the view anywhere on the world
+     * at any zoom; a finger only drags while zoomed in, so the page keeps
+     * its touch scroll too. Needs `interactive`.
+     */
+    showZoomControls?: boolean;
+    /** How far the zoom controls can step in, as a multiple of `bounds`. */
+    maxZoom?: number;
+    /** Degrees between graticule lines. `0` removes the graticule. */
+    graticuleStep?: number;
+    /** Draw each point's `label` beside its marker. */
+    showLabels?: boolean;
+    /** The point to single out: its marker enlarges and its callout renders. */
+    activePointId?: string;
+    /** Markers are real buttons: hoverable, focusable, clickable. Off, they become inert glyphs and the map is one image. */
+    interactive?: boolean;
+    /** Fires as the pointer enters a marker (or it takes focus), and with `null` as it leaves. */
+    onPointHover?: (point: WorldMapPoint | null) => void;
+    /** Fires when a marker is clicked. */
+    onPointClick?: (point: WorldMapPoint) => void;
+    /**
+     * Renders the annotation for the active (or hovered) point, placed beside
+     * its marker in an HTML overlay; MapCallout is the intended filling. The
+     * overlay carries `data-side="left"|"right"` for which side of the marker
+     * it opens on — toward the map's centre, where the room is.
+     */
+    renderCallout?: (point: WorldMapPoint) => React.ReactNode;
+    /**
+     * Wraps each marker in the library's HoverCard, with this as the card's
+     * content — the floating-panel alternative to `renderCallout`'s bare
+     * readout, opening on hover or focus with the system's delays and Escape
+     * dismissal. Content must be phrasing-level (spans), the panel's own
+     * rule. Opens upward, or downward for a marker near the frame's top.
+     * Needs `interactive`; when both renderers are given, this one wins.
+     */
+    renderHoverCard?: (point: WorldMapPoint) => React.ReactNode;
+    /**
+     * Accessible name for the map, e.g. "Offices across the network". The
+     * point count is appended for screen readers.
+     */
+    label?: string;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface WorldMapProps extends WorldMapOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof WorldMapOwnProps | 'children'> {
+}
+/**
+ * WorldMap — a flat world map drawn in SVG from Natural Earth's land
+ * shapes, for plotting where things are: token-coloured continents, a
+ * quiet graticule, and lat/lng markers that carry their own colour. The
+ * companion to Globe for when the geography should read at a glance rather
+ * than turn — still no map library and no tile server: the land ships as
+ * one baked path, so the whole map themes with the tokens.
+ *
+ * The root fills its container: give the wrapper the size, never the root
+ * a height through `className` — that would tie with the component's own
+ * fill rule at equal specificity and lose in some stylesheet orders.
+ * Frame it with `bounds` (a lng/lat window that becomes the viewBox) and
+ * `fit` (`cover` fills a stage edge to edge); `showZoomControls` adds zoom
+ * into the window, with drag and arrow-key panning while zoomed. Markers
+ * are real buttons — hover, focus, and click all work — and the callout
+ * overlay places whatever `renderCallout` returns beside the active
+ * marker; MapCallout is the intended filling.
+ */
+export declare const WorldMap: React.ForwardRefExoticComponent<WorldMapProps & React.RefAttributes<HTMLDivElement>>;
+export {};