@robr0/design-system 0.7.0 → 0.9.0

package/components/SegmentedControl/SegmentedControl.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useRef } from "react";
 import "./SegmentedControl.css";

package/components/SelectionCard/SelectionCard.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
 import "./SelectionCard.css";

package/components/ShaderField/ShaderField.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from "react/jsx-runtime";
 import React, { useRef, useMemo, useState, useEffect } from "react";
 import { DEFAULT_SHADER_BLOBS, DEFAULT_SHADER_PARAMS, useShaderField } from "./useShaderField.js";

package/components/ShaderField/field.glsl.d.ts

@@ -13,10 +13,16 @@
  *
  * Coordinate space is chosen to match a CSS blob layer exactly, so a fallback
  * built from absolutely-positioned discs lines up with it: origin at the
- * container centre (`left`/`top: 50%`), one unit = container width (discs are
- * vw-sized, and CSS percentage margins — top included — resolve against the
- * containing block's width). Centres are therefore constants that never need
- * re-uploading on resize.
+ * container centre (`left`/`top: 50%`), one unit = the field's reference
+ * width (discs are vw-sized, and CSS percentage margins — top included —
+ * resolve against the containing block's width). Centres are therefore
+ * constants that never need re-uploading on resize.
+ *
+ * That reference width is the container's own width until `crop` holds it
+ * back on a narrow viewport, where the field keeps more of the scale it was
+ * composed at and the viewport crops into it instead. The hook resolves it to
+ * `u_unit`, in drawing-buffer pixels, so the shader itself never has to know
+ * which of the two it is looking at.
  *
  * Colours arrive already converted to linear RGB (the hook does the sRGB
  * decode once per theme change); the shader only encodes back at the end.
@@ -30,4 +36,4 @@
  */
 export declare const BLOB_COUNT = 8;
 export declare const vertexSource = "#version 300 es\n// Fullscreen triangle \u2014 no buffers, three vertices from gl_VertexID.\nvoid main() {\n  vec2 p = vec2((gl_VertexID << 1) & 2, gl_VertexID & 2);\n  gl_Position = vec4(p * 2.0 - 1.0, 0.0, 1.0);\n}\n";
-export declare const fragmentSource = "#version 300 es\nprecision highp float;\n\nuniform vec2  u_resolution;  // drawing-buffer size in pixels\nuniform float u_time;        // field time, seconds (speed applied JS-side)\nuniform vec3  u_color[8];  // linear RGB per blob\nuniform vec4  u_blob[8];   // xy = centre, z = sigma, w = emission weight\nuniform vec4  u_motion[8]; // xy = angular speeds, zw = phases\nuniform float u_intensity;   // peak-alpha ceiling\nuniform float u_warp;        // domain-warp strength\nuniform float u_scale;       // noise frequency\nuniform float u_grain;       // film-grain strength\nuniform float u_streak;      // anisotropic stretch: 0 = blobs, 1 = light streams\nuniform vec2  u_mouse;       // pointer in field coordinates (smoothed JS-side)\nuniform float u_mvel;        // smoothed pointer speed, width units/s\nuniform float u_react;       // cursor-reactivity strength\n\nout vec4 outColor;\n\n// Integer hash \u2014 WebGL2 has real uint ops, so no fract(sin()) precision\n// lottery on mobile GPUs.\nuint ihash(uvec2 p) {\n  p = p * uvec2(73333u, 7777u) ^ (p.yx >> 3u);\n  uint h = p.x ^ (p.y * 2654435761u);\n  h ^= h >> 15u;\n  h *= 2246822519u;\n  h ^= h >> 13u;\n  return h;\n}\n\nfloat rnd(ivec2 p) {\n  return float(ihash(uvec2(p)) >> 8) * (1.0 / 16777216.0);\n}\n\nfloat vnoise(vec2 p) {\n  vec2 i = floor(p);\n  vec2 f = fract(p);\n  vec2 u = f * f * f * (f * (f * 6.0 - 15.0) + 10.0);\n  ivec2 c = ivec2(i);\n  return mix(\n    mix(rnd(c), rnd(c + ivec2(1, 0)), u.x),\n    mix(rnd(c + ivec2(0, 1)), rnd(c + ivec2(1, 1)), u.x),\n    u.y\n  );\n}\n\n// 3 octaves; a 4th is invisible at this softness.\nfloat fbm(vec2 p) {\n  float s = 0.0;\n  float a = 0.5;\n  for (int i = 0; i < 3; i++) {\n    s += a * vnoise(p);\n    p = p * 2.02 + vec2(17.0, 9.0);\n    a *= 0.5;\n  }\n  return s;\n}\n\nvoid main() {\n  // CSS coordinate space: origin at container centre, one unit = width,\n  // y running downward.\n  vec2 p = (gl_FragCoord.xy - 0.5 * u_resolution) / u_resolution.x;\n  p.y = -p.y;\n\n  // Light-stream axis: a fixed diagonal. Distances across the axis are\n  // magnified before the Gaussian, so every source stretches along it and\n  // the field reads as rays instead of discs.\n  float ca = cos(0.5);\n  float sa = sin(0.5);\n  mat2 toStreak = mat2(ca, -sa, sa, ca);\n  float squeeze = 1.0 + u_streak * 4.0;\n\n  // Domain warp: the field flows rather than drifts. The noise is sampled\n  // in the same anisotropic space, so the flow lines follow the streams.\n  float t = u_time;\n  vec2 ps = toStreak * p;\n  ps.y *= squeeze;\n  vec2 q = vec2(\n    fbm(ps * u_scale + vec2(0.0, t * 0.030)),\n    fbm(ps * u_scale + vec2(5.2, 1.3) - t * 0.024)\n  );\n  vec2 w = p + u_warp * (q - 0.5);\n\n  // Cursor wake: a smooth vortex around the pointer, amplified by speed.\n  // The displacement is built from the *unnormalised* offset so it falls to\n  // zero at the cursor itself. Normalising here (md/mr) made the direction\n  // spin through 360 degrees at full strength across the centre pixel, which\n  // rendered as a pinch \u2014 a cone converging to a point.\n  vec2 md = p - u_mouse;\n  float mr2 = dot(md, md);\n  float minf = exp(-mr2 / (2.0 * 0.22 * 0.22));\n  vec2 swirl = vec2(-md.y, md.x);\n  // smoothstep, not min(): a hard clamp stepped visibly as speed crossed it.\n  float stir = 0.25 + 1.3 * smoothstep(0.0, 0.8, u_mvel);\n  w += u_react * minf * stir * (swirl * 0.9 + md * 0.35);\n\n  // Accumulate true Gaussians in linear space. Positive weights emit;\n  // negative weights absorb (shadows \u2014 the eclipse disc).\n  vec3 acc = vec3(0.0);\n  float cov = 0.0;\n  float shade = 0.0;\n  for (int i = 0; i < 8; i++) {\n    vec2 c = u_blob[i].xy + 0.045 * vec2(\n      cos(u_motion[i].x * t + u_motion[i].z),\n      sin(u_motion[i].y * t + u_motion[i].w)\n    );\n    vec2 d = toStreak * (w - c);\n    d.y *= squeeze;\n    float s = u_blob[i].z;\n    float g = exp(-dot(d, d) / (2.0 * s * s));\n    float wgt = u_blob[i].w;\n    if (wgt >= 0.0) {\n      acc += u_color[i] * (g * wgt);\n      cov += g * wgt;\n    } else {\n      shade += g * -wgt;\n    }\n  }\n\n  // Glow trail: wider and softer than the swirl, and mostly velocity-driven,\n  // so a resting cursor does not park a bright dot on the field.\n  //\n  // The wake brightens whatever colour it is passing over rather than adding\n  // one of its own. Injecting u_color[0] meant the trail always wore the\n  // first blob's token \u2014 gold in the site palette, violet in beam \u2014 which\n  // read as a stray colour with no relationship to the field beneath it.\n  // Weighting by the local hue keeps the wake colour-neutral: it reads as\n  // light falling on the field, and it stays correct for any palette.\n  vec3 local = acc / max(cov, 1e-4);\n  float gfall = exp(-mr2 / (2.0 * 0.3 * 0.3));\n  float glow = u_react * gfall * (0.12 + 0.5 * smoothstep(0.0, 0.8, u_mvel));\n  acc += local * glow;\n  cov += glow;\n\n  vec3 lin = acc / max(cov, 1e-4);\n  float lit = max(cov - shade, 0.0);\n  float alpha = u_intensity * (1.0 - exp(-lit * 0.9));\n\n  vec3 srgb = pow(max(lin, vec3(0.0)), vec3(1.0 / 2.2));\n\n  // Film grain: animated hash noise. At u_grain 0 this degenerates to the\n  // \u00B11/255 dither that kills banding, so the two share one lookup.\n  uvec2 gp = uvec2(gl_FragCoord.xy) + uvec2(\n    uint(fract(t * 7.31) * 1024.0) * 7919u,\n    uint(fract(t * 3.17) * 1024.0) * 104729u\n  );\n  float gr = float(ihash(gp) & 255u) / 255.0 - 0.5;\n  srgb += gr * (1.0 / 255.0 + u_grain * 0.35);\n  // A small grain-driven alpha floor lets the sparkle read even where the\n  // field itself is empty (the reference's grainy dark scene).\n  float grainFloor = u_grain * 0.1 * (gr + 0.5);\n  alpha = clamp(alpha * (1.0 + gr * u_grain * 0.5) + grainFloor, 0.0, 1.0);\n  srgb = clamp(srgb, 0.0, 1.0);\n\n  // Premultiplied output (context is created with premultipliedAlpha: true).\n  outColor = vec4(srgb * alpha, alpha);\n}\n";
+export declare const fragmentSource = "#version 300 es\nprecision highp float;\n\nuniform vec2  u_resolution;  // drawing-buffer size in pixels\nuniform float u_unit;        // pixels per field unit (see coordinate space)\nuniform float u_time;        // field time, seconds (speed applied JS-side)\nuniform vec3  u_color[8];  // linear RGB per blob\nuniform vec4  u_blob[8];   // xy = centre, z = sigma, w = emission weight\nuniform vec4  u_motion[8]; // xy = angular speeds, zw = phases\nuniform float u_intensity;   // peak-alpha ceiling\nuniform float u_warp;        // domain-warp strength\nuniform float u_scale;       // noise frequency\nuniform float u_grain;       // film-grain strength\nuniform float u_streak;      // anisotropic stretch: 0 = blobs, 1 = light streams\nuniform vec2  u_mouse;       // pointer in field coordinates (smoothed JS-side)\nuniform float u_mvel;        // smoothed pointer speed, width units/s\nuniform float u_react;       // cursor-reactivity strength\n\nout vec4 outColor;\n\n// Integer hash \u2014 WebGL2 has real uint ops, so no fract(sin()) precision\n// lottery on mobile GPUs.\nuint ihash(uvec2 p) {\n  p = p * uvec2(73333u, 7777u) ^ (p.yx >> 3u);\n  uint h = p.x ^ (p.y * 2654435761u);\n  h ^= h >> 15u;\n  h *= 2246822519u;\n  h ^= h >> 13u;\n  return h;\n}\n\nfloat rnd(ivec2 p) {\n  return float(ihash(uvec2(p)) >> 8) * (1.0 / 16777216.0);\n}\n\nfloat vnoise(vec2 p) {\n  vec2 i = floor(p);\n  vec2 f = fract(p);\n  vec2 u = f * f * f * (f * (f * 6.0 - 15.0) + 10.0);\n  ivec2 c = ivec2(i);\n  return mix(\n    mix(rnd(c), rnd(c + ivec2(1, 0)), u.x),\n    mix(rnd(c + ivec2(0, 1)), rnd(c + ivec2(1, 1)), u.x),\n    u.y\n  );\n}\n\n// 3 octaves; a 4th is invisible at this softness.\nfloat fbm(vec2 p) {\n  float s = 0.0;\n  float a = 0.5;\n  for (int i = 0; i < 3; i++) {\n    s += a * vnoise(p);\n    p = p * 2.02 + vec2(17.0, 9.0);\n    a *= 0.5;\n  }\n  return s;\n}\n\nvoid main() {\n  // CSS coordinate space: origin at container centre, one unit = the\n  // reference width the hook resolved, y running downward.\n  vec2 p = (gl_FragCoord.xy - 0.5 * u_resolution) / u_unit;\n  p.y = -p.y;\n\n  // Light-stream axis: a fixed diagonal. Distances across the axis are\n  // magnified before the Gaussian, so every source stretches along it and\n  // the field reads as rays instead of discs.\n  float ca = cos(0.5);\n  float sa = sin(0.5);\n  mat2 toStreak = mat2(ca, -sa, sa, ca);\n  float squeeze = 1.0 + u_streak * 4.0;\n\n  // Domain warp: the field flows rather than drifts. The noise is sampled\n  // in the same anisotropic space, so the flow lines follow the streams.\n  float t = u_time;\n  vec2 ps = toStreak * p;\n  ps.y *= squeeze;\n  vec2 q = vec2(\n    fbm(ps * u_scale + vec2(0.0, t * 0.030)),\n    fbm(ps * u_scale + vec2(5.2, 1.3) - t * 0.024)\n  );\n  vec2 w = p + u_warp * (q - 0.5);\n\n  // Cursor wake: a smooth vortex around the pointer, amplified by speed.\n  // The displacement is built from the *unnormalised* offset so it falls to\n  // zero at the cursor itself. Normalising here (md/mr) made the direction\n  // spin through 360 degrees at full strength across the centre pixel, which\n  // rendered as a pinch \u2014 a cone converging to a point.\n  vec2 md = p - u_mouse;\n  float mr2 = dot(md, md);\n  float minf = exp(-mr2 / (2.0 * 0.22 * 0.22));\n  vec2 swirl = vec2(-md.y, md.x);\n  // smoothstep, not min(): a hard clamp stepped visibly as speed crossed it.\n  float stir = 0.25 + 1.3 * smoothstep(0.0, 0.8, u_mvel);\n  w += u_react * minf * stir * (swirl * 0.9 + md * 0.35);\n\n  // Accumulate true Gaussians in linear space. Positive weights emit;\n  // negative weights absorb (shadows \u2014 the eclipse disc).\n  vec3 acc = vec3(0.0);\n  float cov = 0.0;\n  float shade = 0.0;\n  for (int i = 0; i < 8; i++) {\n    vec2 c = u_blob[i].xy + 0.045 * vec2(\n      cos(u_motion[i].x * t + u_motion[i].z),\n      sin(u_motion[i].y * t + u_motion[i].w)\n    );\n    vec2 d = toStreak * (w - c);\n    d.y *= squeeze;\n    float s = u_blob[i].z;\n    float g = exp(-dot(d, d) / (2.0 * s * s));\n    float wgt = u_blob[i].w;\n    if (wgt >= 0.0) {\n      acc += u_color[i] * (g * wgt);\n      cov += g * wgt;\n    } else {\n      shade += g * -wgt;\n    }\n  }\n\n  // Glow trail: wider and softer than the swirl, and mostly velocity-driven,\n  // so a resting cursor does not park a bright dot on the field.\n  //\n  // The wake brightens whatever colour it is passing over rather than adding\n  // one of its own. Injecting u_color[0] meant the trail always wore the\n  // first blob's token \u2014 gold in the site palette, violet in beam \u2014 which\n  // read as a stray colour with no relationship to the field beneath it.\n  // Weighting by the local hue keeps the wake colour-neutral: it reads as\n  // light falling on the field, and it stays correct for any palette.\n  vec3 local = acc / max(cov, 1e-4);\n  float gfall = exp(-mr2 / (2.0 * 0.3 * 0.3));\n  float glow = u_react * gfall * (0.12 + 0.5 * smoothstep(0.0, 0.8, u_mvel));\n  acc += local * glow;\n  cov += glow;\n\n  vec3 lin = acc / max(cov, 1e-4);\n  float lit = max(cov - shade, 0.0);\n  float alpha = u_intensity * (1.0 - exp(-lit * 0.9));\n\n  vec3 srgb = pow(max(lin, vec3(0.0)), vec3(1.0 / 2.2));\n\n  // Film grain: animated hash noise. At u_grain 0 this degenerates to the\n  // \u00B11/255 dither that kills banding, so the two share one lookup.\n  uvec2 gp = uvec2(gl_FragCoord.xy) + uvec2(\n    uint(fract(t * 7.31) * 1024.0) * 7919u,\n    uint(fract(t * 3.17) * 1024.0) * 104729u\n  );\n  float gr = float(ihash(gp) & 255u) / 255.0 - 0.5;\n  srgb += gr * (1.0 / 255.0 + u_grain * 0.35);\n  // A small grain-driven alpha floor lets the sparkle read even where the\n  // field itself is empty (the reference's grainy dark scene).\n  float grainFloor = u_grain * 0.1 * (gr + 0.5);\n  alpha = clamp(alpha * (1.0 + gr * u_grain * 0.5) + grainFloor, 0.0, 1.0);\n  srgb = clamp(srgb, 0.0, 1.0);\n\n  // Premultiplied output (context is created with premultipliedAlpha: true).\n  outColor = vec4(srgb * alpha, alpha);\n}\n";

package/components/ShaderField/field.glsl.js

@@ -15,6 +15,7 @@ const fragmentSource = (
 precision highp float;
 
 uniform vec2  u_resolution;  // drawing-buffer size in pixels
+uniform float u_unit;        // pixels per field unit (see coordinate space)
 uniform float u_time;        // field time, seconds (speed applied JS-side)
 uniform vec3  u_color[${BLOB_COUNT}];  // linear RGB per blob
 uniform vec4  u_blob[${BLOB_COUNT}];   // xy = centre, z = sigma, w = emission weight
@@ -70,9 +71,9 @@ float fbm(vec2 p) {
 }
 
 void main() {
-  // CSS coordinate space: origin at container centre, one unit = width,
-  // y running downward.
-  vec2 p = (gl_FragCoord.xy - 0.5 * u_resolution) / u_resolution.x;
+  // CSS coordinate space: origin at container centre, one unit = the
+  // reference width the hook resolved, y running downward.
+  vec2 p = (gl_FragCoord.xy - 0.5 * u_resolution) / u_unit;
   p.y = -p.y;
 
   // Light-stream axis: a fixed diagonal. Distances across the axis are

package/components/ShaderField/useShaderField.d.ts

@@ -1,5 +1,5 @@
 import { RefObject } from 'react';
-/** The seven tuneable properties of the field. */
+/** The eight tuneable properties of the field. */
 export interface ShaderParams {
     /** Overall opacity of the field, 0.1–1. */
     intensity: number;
@@ -19,6 +19,23 @@ export interface ShaderParams {
      * with them the loop's step up from 30fps to 60fps while a wake is alive.
      */
     react: number;
+    /**
+     * How much the composition resists shrinking with the container, 0–1.
+     *
+     * At 0 — the default, and the behaviour a CSS blob layer has — the whole
+     * field is fitted to whatever width it is given, so a phone shows the
+     * entire composition at phone scale: every source small, and more of them
+     * crowded into view than the look was built for. At 1 the field holds the
+     * scale it was composed at (`REFERENCE_WIDTH`) and a narrower container
+     * crops into it instead. Values between blend the two geometrically,
+     * keeping some of the shrink so colours still bleed together on a small
+     * screen. Above the reference width it does nothing.
+     *
+     * Raise it for a full-viewport background, which is read on a phone as a
+     * scene rather than a diagram; leave it at 0 wherever the point is to see
+     * the whole composition, such as a small demo tile.
+     */
+    crop: number;
 }
 /**
  * One light source in the field.
@@ -52,7 +69,7 @@ export interface ShaderBlob {
     weight: number;
 }
 /**
- * The shipped look: seven parameters tuned by eye, cursor wake off. Spread it
+ * The shipped look: eight parameters tuned by eye, cursor wake off. Spread it
  * and override the one or two you want rather than restating the set.
  */
 export declare const DEFAULT_SHADER_PARAMS: ShaderParams;

package/components/ShaderField/useShaderField.js

@@ -1,3 +1,4 @@
+"use client";
 import { useState, useRef, useEffect } from "react";
 import { BLOB_COUNT, vertexSource, fragmentSource } from "./field.glsl.js";
 const DEFAULT_SHADER_PARAMS = {
@@ -7,7 +8,8 @@ const DEFAULT_SHADER_PARAMS = {
   speed: 2,
   grain: 0.1,
   streak: 0.4,
-  react: 0
+  react: 0,
+  crop: 0.5
 };
 const DEFAULT_SHADER_BLOBS = [
   { token: "--color-core-accent-gold", size: 0.45, cx: 0.175, cy: 0.125, period: 18, phase: 0, weight: 1 },
@@ -20,6 +22,11 @@ const DEFAULT_SHADER_BLOBS = [
   { token: "--color-core-ui-secondary", size: 0.75, cx: -0.125, cy: -0.025, period: 20, phase: 0.7, weight: 1 }
 ];
 const RENDER_SCALE = 0.5;
+const REFERENCE_WIDTH = 1440;
+function fieldUnit(cssWidth, crop) {
+  if (cssWidth <= 0) return 1;
+  return cssWidth * Math.pow(Math.max(REFERENCE_WIDTH / cssWidth, 1), crop);
+}
 const FRAME_MS = 1e3 / 30;
 const FRAME_MS_ACTIVE = 1e3 / 60;
 const WAKE_IDLE = 0.015;
@@ -113,6 +120,7 @@ function useShaderField(canvasRef, params, enabled = true) {
       loc = {};
       for (const name of [
         "u_resolution",
+        "u_unit",
         "u_time",
         "u_color[0]",
         "u_blob[0]",
@@ -176,10 +184,12 @@ function useShaderField(canvasRef, params, enabled = true) {
     colorTarget.set(colorCurrent);
     let bufWidth = 0;
     let bufHeight = 0;
+    let cssWidth = 0;
     function resize() {
       if (!gl) return;
       const c = canvas;
       const dpr = window.devicePixelRatio || 1;
+      cssWidth = c.clientWidth;
       const w = Math.max(1, Math.round(c.clientWidth * dpr * RENDER_SCALE));
       const h = Math.max(1, Math.round(c.clientHeight * dpr * RENDER_SCALE));
       if (w === bufWidth && h === bufHeight) return;
@@ -200,8 +210,9 @@ function useShaderField(canvasRef, params, enabled = true) {
       const c = canvas;
       const rect = c.getBoundingClientRect();
       if (rect.width === 0) return;
-      const x = (e.clientX - rect.left - rect.width / 2) / rect.width;
-      const y = (e.clientY - rect.top - rect.height / 2) / rect.width;
+      const unit = fieldUnit(rect.width, paramsRef.current.crop);
+      const x = (e.clientX - rect.left - rect.width / 2) / unit;
+      const y = (e.clientY - rect.top - rect.height / 2) / unit;
       if (mouseTarget.x < 5) {
         moveAccum += Math.hypot(x - mouseTarget.x, y - mouseTarget.y);
       }
@@ -234,6 +245,10 @@ function useShaderField(canvasRef, params, enabled = true) {
       }
       const p = paramsRef.current;
       gl.uniform3fv(loc["u_color[0]"], colorCurrent);
+      gl.uniform1f(
+        loc["u_unit"],
+        bufWidth * (fieldUnit(cssWidth, p.crop) / Math.max(cssWidth, 1))
+      );
       gl.uniform1f(loc["u_time"], fieldTime);
       gl.uniform1f(loc["u_intensity"], p.intensity);
       gl.uniform1f(loc["u_warp"], p.warp);

package/components/Slider/Slider.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from "react/jsx-runtime";
 import React from "react";
 import "./Slider.css";

package/components/Sparkline/Sparkline.css

@@ -0,0 +1,52 @@
+/* ============================================
+   SPARKLINE COMPONENT
+   Inline trend line for stats and table cells.
+   Colour flows through `color` — the line, fill
+   and dot all draw with currentColor, so a tone
+   is one custom property swap.
+   ============================================ */
+
+/* Base */
+
+.ds-sparkline {
+  display: inline-block;
+  vertical-align: middle;
+  flex-shrink: 0;
+  color: var(--color-action-primary-bg);
+}
+
+/* Parts */
+
+.ds-sparkline__line {
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.ds-sparkline__fill {
+  fill: currentColor;
+  opacity: 0.15;
+}
+
+.ds-sparkline__dot {
+  fill: currentColor;
+}
+
+/* Tones */
+
+.ds-sparkline--accent {
+  color: var(--color-action-primary-bg);
+}
+
+.ds-sparkline--positive {
+  color: var(--color-status-positive-text);
+}
+
+.ds-sparkline--negative {
+  color: var(--color-status-error-text);
+}
+
+.ds-sparkline--neutral {
+  color: var(--color-text-secondary);
+}

package/components/Sparkline/Sparkline.d.ts

@@ -0,0 +1,49 @@
+import { default as React } from 'react';
+/** Props owned by Sparkline itself — everything else falls through to the SVG node. */
+type SparklineOwnProps = {
+    /** The series to plot, in order. Values are normalised into the viewBox. */
+    data: number[];
+    /** Rendering treatment — a bare line, or a line with a soft fill underneath. */
+    variant?: 'line' | 'area';
+    /**
+     * Colour role for the line and end dot. `accent` follows the chart palette's
+     * lead colour; `positive`/`negative` map to the status text tokens; `neutral`
+     * recedes to secondary text.
+     */
+    tone?: 'accent' | 'positive' | 'negative' | 'neutral';
+    /** Marks the final point with a small dot. */
+    showDot?: boolean;
+    /** Line thickness in viewBox units — an SVG geometry attribute, not a token. */
+    strokeWidth?: number;
+    /**
+     * ViewBox width. Also the default rendered width; the SVG scales to its
+     * container when sized externally via CSS. Intentionally shadows the native
+     * SVG `width` attribute, which it sets.
+     */
+    width?: number;
+    /**
+     * ViewBox height. Also the default rendered height; the SVG scales to its
+     * container when sized externally via CSS. Intentionally shadows the native
+     * SVG `height` attribute, which it sets.
+     */
+    height?: number;
+    /**
+     * Accessible description of the trend, e.g. "Revenue, trending up". When
+     * omitted the SVG is decorative and hidden from assistive technology.
+     */
+    label?: string;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface SparklineProps extends SparklineOwnProps, Omit<React.ComponentPropsWithoutRef<'svg'>, keyof SparklineOwnProps | 'children'> {
+}
+/**
+ * Sparkline — an inline trend line for stats and table cells, drawn without
+ * axes or chrome. Pure SVG computed from props: no charting library, no hooks,
+ * no dependencies, so it renders from a Server Component and costs nothing in
+ * a dense table. Degenerate data never breaks the path: an all-equal series
+ * renders a horizontal midline, and fewer than two points render just the
+ * end dot, or nothing.
+ */
+export declare const Sparkline: React.ForwardRefExoticComponent<SparklineProps & React.RefAttributes<SVGSVGElement>>;
+export {};

package/components/Sparkline/Sparkline.js

@@ -0,0 +1,86 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React from "react";
+import "./Sparkline.css";
+const round = (n) => Math.round(n * 100) / 100;
+const Sparkline = React.forwardRef(
+  ({
+    data,
+    variant = "line",
+    tone = "accent",
+    showDot = true,
+    strokeWidth = 2,
+    width = 120,
+    height = 32,
+    label,
+    className = "",
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-sparkline";
+    const classes = [
+      baseClass,
+      `${baseClass}--${variant}`,
+      `${baseClass}--${tone}`,
+      className
+    ].filter(Boolean).join(" ");
+    const dotRadius = strokeWidth * 1.5;
+    const pad = dotRadius + strokeWidth / 2;
+    const innerWidth = Math.max(width - pad * 2, 0);
+    const innerHeight = Math.max(height - pad * 2, 0);
+    const min = Math.min(...data);
+    const max = Math.max(...data);
+    const range = max - min;
+    const points = data.map((value, i) => ({
+      x: round(
+        data.length < 2 ? pad + innerWidth : pad + i / (data.length - 1) * innerWidth
+      ),
+      // A flat series (range 0) draws a horizontal midline instead of dividing by zero.
+      y: round(
+        range === 0 ? pad + innerHeight / 2 : pad + (1 - (value - min) / range) * innerHeight
+      )
+    }));
+    const lastPoint = points.length > 0 ? points[points.length - 1] : void 0;
+    const hasLine = points.length >= 2;
+    const linePath = hasLine ? `M ${points.map((p) => `${p.x} ${p.y}`).join(" L ")}` : void 0;
+    const baseline = round(height - pad);
+    const areaPath = hasLine && variant === "area" ? `${linePath} L ${points[points.length - 1].x} ${baseline} L ${points[0].x} ${baseline} Z` : void 0;
+    return /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        ...rest,
+        ref,
+        className: classes,
+        viewBox: `0 0 ${width} ${height}`,
+        width,
+        height,
+        xmlns: "http://www.w3.org/2000/svg",
+        role: label ? "img" : void 0,
+        "aria-label": label,
+        "aria-hidden": label ? void 0 : true,
+        children: [
+          areaPath && /* @__PURE__ */ jsx("path", { className: `${baseClass}__fill`, d: areaPath }),
+          linePath && /* @__PURE__ */ jsx(
+            "path",
+            {
+              className: `${baseClass}__line`,
+              d: linePath,
+              strokeWidth
+            }
+          ),
+          showDot && lastPoint && /* @__PURE__ */ jsx(
+            "circle",
+            {
+              className: `${baseClass}__dot`,
+              cx: lastPoint.x,
+              cy: lastPoint.y,
+              r: dotRadius
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Sparkline.displayName = "Sparkline";
+export {
+  Sparkline
+};

package/components/Stepper/Stepper.css

@@ -0,0 +1,207 @@
+/* ============================================
+   STEPPER COMPONENT
+   Step-by-step progress indicator for wizards
+   and multi-stage flows
+   ============================================ */
+
+/* Base */
+
+.ds-stepper {
+  display: flex;
+  align-items: flex-start;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+}
+
+.ds-stepper__step {
+  position: relative;
+  flex: 1 1 0;
+  min-width: 0;
+  display: flex;
+  justify-content: center;
+}
+
+/* Shared inner layout — a <button> when the step is clickable,
+   a <span> otherwise */
+.ds-stepper__content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--gap-sm); /* 8px */
+  padding: 0;
+  border: none;
+  background-color: transparent;
+  font-family: inherit;
+  text-align: center;
+  color: inherit;
+  min-width: 0;
+}
+
+button.ds-stepper__content {
+  cursor: pointer;
+}
+
+button.ds-stepper__content:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+  border-radius: var(--radius-sm);
+}
+
+/* ============================================
+   INDICATOR
+   32px circle — check for complete, number
+   for active and upcoming
+   ============================================ */
+
+.ds-stepper__indicator {
+  --icon-size: var(--icon-size-sm);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  flex-shrink: 0;
+  border: var(--border-xs) solid transparent;
+  border-radius: var(--radius-full);
+  font-family: var(--font-paragraph-sm-em-family);
+  font-size: var(--font-paragraph-sm-em-size);
+  font-weight: var(--font-paragraph-sm-em-weight);
+  line-height: var(--font-paragraph-sm-em-line-height);
+  letter-spacing: var(--font-paragraph-sm-em-letter-spacing);
+  transition:
+    background-color var(--motion-duration-base) var(--motion-ease-standard),
+    border-color var(--motion-duration-base) var(--motion-ease-standard),
+    color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+/* States */
+
+.ds-stepper__step--complete .ds-stepper__indicator {
+  border-color: var(--color-action-primary-border-secondary);
+  color: var(--color-action-primary-text-tertiary);
+}
+
+.ds-stepper__step--active .ds-stepper__indicator {
+  background-color: var(--color-action-primary-bg);
+  border-color: var(--color-action-primary-bg);
+  color: var(--color-action-primary-text);
+}
+
+.ds-stepper__step--upcoming .ds-stepper__indicator {
+  border-color: var(--color-bg-container-border);
+  color: var(--color-text-tertiary);
+}
+
+button.ds-stepper__content:hover .ds-stepper__indicator {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-stepper__step--active button.ds-stepper__content:hover .ds-stepper__indicator {
+  background-color: var(--color-action-primary-bg-hover);
+}
+
+/* ============================================
+   LABEL + DESCRIPTION
+   ============================================ */
+
+.ds-stepper__text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-xxs); /* 2px */
+  min-width: 0;
+}
+
+.ds-stepper__label {
+  font-family: var(--font-paragraph-sm-em-family);
+  font-size: var(--font-paragraph-sm-em-size);
+  font-weight: var(--font-paragraph-sm-em-weight);
+  line-height: var(--font-paragraph-sm-em-line-height);
+  letter-spacing: var(--font-paragraph-sm-em-letter-spacing);
+  color: var(--color-text-secondary);
+  transition: color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-stepper__step--active .ds-stepper__label {
+  color: var(--color-text-primary);
+}
+
+.ds-stepper__step--upcoming .ds-stepper__label {
+  color: var(--color-text-tertiary);
+}
+
+button.ds-stepper__content:hover .ds-stepper__label {
+  color: var(--color-text-primary);
+}
+
+.ds-stepper__description {
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-paragraph-sm-weight);
+  line-height: var(--font-paragraph-sm-line-height);
+  letter-spacing: var(--font-paragraph-sm-letter-spacing);
+  color: var(--color-text-tertiary);
+}
+
+/* ============================================
+   CONNECTOR
+   Drawn between an indicator and the next;
+   turns action-coloured behind completed steps
+   ============================================ */
+
+.ds-stepper__connector {
+  position: absolute;
+  top: 16px; /* vertical centre of the 32px indicator */
+  left: calc(50% + 24px);
+  right: calc(-50% + 24px);
+  height: var(--border-md);
+  transform: translateY(-50%);
+  background-color: var(--color-divider);
+  transition: background-color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-stepper__step--complete .ds-stepper__connector {
+  background-color: var(--color-action-primary-border-secondary);
+}
+
+/* ============================================
+   VERTICAL
+   ============================================ */
+
+.ds-stepper--vertical {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.ds-stepper--vertical .ds-stepper__step {
+  flex: none;
+  justify-content: flex-start;
+  padding-bottom: var(--gap-lg); /* 20px */
+}
+
+.ds-stepper--vertical .ds-stepper__step:last-child {
+  padding-bottom: 0;
+}
+
+.ds-stepper--vertical .ds-stepper__content {
+  flex-direction: row;
+  align-items: flex-start;
+  gap: var(--gap-sm-md); /* 12px */
+  text-align: left;
+}
+
+/* Centre the first label line on the 32px indicator */
+.ds-stepper--vertical .ds-stepper__text {
+  padding-top: calc((32px - var(--font-paragraph-sm-em-line-height)) / 2);
+}
+
+.ds-stepper--vertical .ds-stepper__connector {
+  top: calc(32px + var(--gap-xs));
+  bottom: var(--gap-xs);
+  left: 16px; /* horizontal centre of the 32px indicator */
+  right: auto;
+  width: var(--border-md);
+  height: auto;
+  transform: translateX(-50%);
+}

package/components/Stepper/Stepper.d.ts

@@ -0,0 +1,41 @@
+import { default as React } from 'react';
+/** A single step in a Stepper flow. */
+export type StepperStep = {
+    /** Step label shown beside or below the indicator */
+    label: string;
+    /** Optional supporting line rendered under the label */
+    description?: string;
+};
+/** Props owned by Stepper itself — everything else falls through to the `<ol>`. */
+type StepperOwnProps = {
+    /** Ordered list of steps in the flow */
+    steps: StepperStep[];
+    /**
+     * Index of the active step. Steps before it render as complete (check
+     * icon), steps after it as upcoming (step number). Pass `steps.length`
+     * to mark the whole flow complete.
+     */
+    activeStep: number;
+    /**
+     * Callback with the clicked step's index. When provided, completed steps
+     * and the active step become buttons so the reader can revisit an earlier
+     * stage; upcoming steps stay non-interactive either way.
+     */
+    onStepClick?: (index: number) => void;
+    /** Layout direction */
+    orientation?: 'horizontal' | 'vertical';
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface StepperProps extends StepperOwnProps, Omit<React.ComponentPropsWithoutRef<'ol'>, keyof StepperOwnProps> {
+}
+/**
+ * Stepper component — step-by-step progress indicator for wizards and
+ * multi-stage flows. Renders an ordered list of steps with CSS-drawn
+ * connectors: completed steps show a check, the active step carries
+ * `aria-current="step"`, and upcoming steps show their number.
+ *
+ * Forwards a ref to the `<ol>` and spreads unrecognised props onto it.
+ */
+export declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLOListElement>>;
+export {};