@robr0/design-system 0.6.0 → 0.8.0

package/components/ShaderField/useShaderField.js

@@ -0,0 +1,409 @@
+import { useState, useRef, useEffect } from "react";
+import { BLOB_COUNT, vertexSource, fragmentSource } from "./field.glsl.js";
+const DEFAULT_SHADER_PARAMS = {
+  intensity: 0.5,
+  warp: 0.14,
+  scale: 2.7,
+  speed: 2,
+  grain: 0.1,
+  streak: 0.4,
+  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 },
+  { token: "--color-core-accent-mint", size: 0.55, cx: 0.125, cy: 0.125, period: 16, phase: 1, weight: 1 },
+  { token: "--color-core-accent-violet", size: 0.9, cx: 0.35, cy: 0.25, period: 22, phase: 0.5, weight: 1 },
+  { token: "--color-bg-container-secondary", size: 0.55, cx: 0.025, cy: 0.075, period: 14, phase: 1.5, weight: 1 },
+  { token: "--color-core-accent-cobalt", size: 0.55, cx: -0.125, cy: 0.475, period: 17, phase: 0.8, weight: 1 },
+  { token: "--color-core-accent-coral", size: 0.48, cx: 0.39, cy: -0.26, period: 19, phase: 0.3, weight: 1 },
+  { token: "--color-core-accent-amber", size: 0.3, cx: 0.35, cy: 0.3, period: 15, phase: 1.2, weight: 1 },
+  { 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;
+const COLOR_FADE_MS = 300;
+function parseColor(value) {
+  const v = value.trim();
+  const hex = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(v);
+  if (hex) {
+    const h = hex[1];
+    const full = h.length === 3 ? h.split("").map((c) => c + c).join("") : h;
+    return [
+      parseInt(full.slice(0, 2), 16) / 255,
+      parseInt(full.slice(2, 4), 16) / 255,
+      parseInt(full.slice(4, 6), 16) / 255
+    ];
+  }
+  const rgb = /^rgba?\(\s*(\d+)[,\s]+(\d+)[,\s]+(\d+)/.exec(v);
+  if (rgb) {
+    return [Number(rgb[1]) / 255, Number(rgb[2]) / 255, Number(rgb[3]) / 255];
+  }
+  return null;
+}
+function srgbToLinear(c) {
+  return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+}
+function compile(gl, type, source) {
+  const shader = gl.createShader(type);
+  if (!shader) return null;
+  gl.shaderSource(shader, source);
+  gl.compileShader(shader);
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    console.error("ShaderField compile error:", gl.getShaderInfoLog(shader));
+    gl.deleteShader(shader);
+    return null;
+  }
+  return shader;
+}
+function useShaderField(canvasRef, params, enabled = true) {
+  const [supported, setSupported] = useState(true);
+  const [active, setActive] = useState(false);
+  const paramsRef = useRef(params);
+  const redrawRef = useRef(() => {
+  });
+  useEffect(() => {
+    paramsRef.current = params;
+    redrawRef.current();
+  }, [params]);
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas || !enabled) return;
+    const gl = canvas.getContext("webgl2", {
+      alpha: true,
+      antialias: false,
+      depth: false,
+      stencil: false,
+      premultipliedAlpha: true,
+      powerPreference: "low-power"
+    });
+    if (!gl) {
+      setSupported(false);
+      return;
+    }
+    if (!gl.isContextLost()) {
+      canvas.__dsLoseExt = gl.getExtension("WEBGL_lose_context");
+    }
+    const loseExt = () => gl.getExtension("WEBGL_lose_context") ?? canvas.__dsLoseExt ?? null;
+    let program = null;
+    let vao = null;
+    let loc = {};
+    function initGL() {
+      if (!gl) return false;
+      const vs = compile(gl, gl.VERTEX_SHADER, vertexSource);
+      const fs = compile(gl, gl.FRAGMENT_SHADER, fragmentSource);
+      if (!vs || !fs) return false;
+      program = gl.createProgram();
+      if (!program) return false;
+      gl.attachShader(program, vs);
+      gl.attachShader(program, fs);
+      gl.linkProgram(program);
+      gl.deleteShader(vs);
+      gl.deleteShader(fs);
+      if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+        console.error("ShaderField link error:", gl.getProgramInfoLog(program));
+        return false;
+      }
+      gl.useProgram(program);
+      vao = gl.createVertexArray();
+      gl.bindVertexArray(vao);
+      gl.disable(gl.BLEND);
+      gl.disable(gl.DEPTH_TEST);
+      loc = {};
+      for (const name of [
+        "u_resolution",
+        "u_unit",
+        "u_time",
+        "u_color[0]",
+        "u_blob[0]",
+        "u_motion[0]",
+        "u_intensity",
+        "u_warp",
+        "u_scale",
+        "u_grain",
+        "u_streak",
+        "u_mouse",
+        "u_mvel",
+        "u_react"
+      ]) {
+        loc[name] = gl.getUniformLocation(program, name);
+      }
+      return true;
+    }
+    let uploadedBlobs = null;
+    function uploadBlobs(blobs) {
+      if (!gl) return;
+      const blob = new Float32Array(BLOB_COUNT * 4);
+      const motion = new Float32Array(BLOB_COUNT * 4);
+      for (let i = 0; i < BLOB_COUNT; i++) {
+        const b = blobs[i];
+        if (!b) {
+          blob[i * 4 + 0] = 99;
+          blob[i * 4 + 1] = 99;
+          blob[i * 4 + 2] = 0.01;
+          continue;
+        }
+        blob[i * 4 + 0] = b.cx;
+        blob[i * 4 + 1] = b.cy;
+        blob[i * 4 + 2] = b.size * 0.42;
+        blob[i * 4 + 3] = b.weight;
+        const wx = 2 * Math.PI / b.period;
+        motion[i * 4 + 0] = wx;
+        motion[i * 4 + 1] = wx * 0.83;
+        motion[i * 4 + 2] = b.phase * 2.1;
+        motion[i * 4 + 3] = b.phase * 3.7;
+      }
+      gl.uniform4fv(loc["u_blob[0]"], blob);
+      gl.uniform4fv(loc["u_motion[0]"], motion);
+      uploadedBlobs = blobs;
+    }
+    const colorCurrent = new Float32Array(BLOB_COUNT * 3);
+    const colorTarget = new Float32Array(BLOB_COUNT * 3);
+    let colorFadeT = COLOR_FADE_MS;
+    function readColors(into) {
+      const style = getComputedStyle(canvas);
+      into.fill(0);
+      paramsRef.current.blobs.slice(0, BLOB_COUNT).forEach((b, i) => {
+        const parsed = parseColor(style.getPropertyValue(b.token));
+        if (parsed) {
+          into[i * 3 + 0] = srgbToLinear(parsed[0]);
+          into[i * 3 + 1] = srgbToLinear(parsed[1]);
+          into[i * 3 + 2] = srgbToLinear(parsed[2]);
+        }
+      });
+    }
+    readColors(colorCurrent);
+    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;
+      bufWidth = w;
+      bufHeight = h;
+      c.width = w;
+      c.height = h;
+      gl.viewport(0, 0, w, h);
+      gl.uniform2f(loc["u_resolution"], w, h);
+    }
+    let fieldTime = 0;
+    let colorsDirty = false;
+    const mouseTarget = { x: 9, y: 9 };
+    const mouse = { x: 9, y: 9 };
+    let mouseVel = 0;
+    let moveAccum = 0;
+    const onPointerMove = (e) => {
+      const c = canvas;
+      const rect = c.getBoundingClientRect();
+      if (rect.width === 0) return;
+      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);
+      }
+      mouseTarget.x = x;
+      mouseTarget.y = y;
+      if (mouse.x > 5) {
+        mouse.x = x;
+        mouse.y = y;
+      }
+    };
+    window.addEventListener("pointermove", onPointerMove, { passive: true });
+    function draw(dtMs) {
+      if (!gl || !program) return;
+      resize();
+      if (paramsRef.current.blobs !== uploadedBlobs) {
+        uploadBlobs(paramsRef.current.blobs);
+        colorsDirty = true;
+      }
+      if (colorsDirty) {
+        readColors(colorTarget);
+        colorFadeT = 0;
+        colorsDirty = false;
+      }
+      if (colorFadeT < COLOR_FADE_MS) {
+        colorFadeT = Math.min(colorFadeT + dtMs, COLOR_FADE_MS);
+        const t = colorFadeT / COLOR_FADE_MS;
+        for (let i = 0; i < colorCurrent.length; i++) {
+          colorCurrent[i] += (colorTarget[i] - colorCurrent[i]) * t;
+        }
+      }
+      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);
+      gl.uniform1f(loc["u_scale"], p.scale);
+      gl.uniform1f(loc["u_grain"], p.grain);
+      gl.uniform1f(loc["u_streak"], p.streak);
+      const dtSec = Math.max(dtMs / 1e3, 1e-3);
+      const k = 1 - Math.exp(-dtSec * 14);
+      mouse.x += (mouseTarget.x - mouse.x) * k;
+      mouse.y += (mouseTarget.y - mouse.y) * k;
+      const instant = moveAccum / dtSec;
+      moveAccum = 0;
+      const blend = 1 - Math.exp(-dtSec * (instant > mouseVel ? 14 : 2.2));
+      mouseVel += (instant - mouseVel) * blend;
+      gl.uniform2f(loc["u_mouse"], mouse.x, mouse.y);
+      gl.uniform1f(loc["u_mvel"], mouseVel);
+      gl.uniform1f(loc["u_react"], p.react);
+      gl.drawArrays(gl.TRIANGLES, 0, 3);
+      frameBudget = mouseVel > WAKE_IDLE && p.react > 0 ? FRAME_MS_ACTIVE : FRAME_MS;
+    }
+    let raf = 0;
+    let lastDraw = 0;
+    let running = false;
+    let disposed = false;
+    let frameBudget = FRAME_MS;
+    const reduceQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+    function frame(now) {
+      raf = requestAnimationFrame(frame);
+      const elapsed = now - lastDraw;
+      if (elapsed < frameBudget - 1) return;
+      const dt = Math.min(elapsed, 100);
+      lastDraw = now;
+      fieldTime += dt / 1e3 * paramsRef.current.speed;
+      draw(dt);
+    }
+    function start() {
+      if (running || disposed || reduceQuery.matches || document.hidden) return;
+      running = true;
+      lastDraw = performance.now();
+      raf = requestAnimationFrame(frame);
+    }
+    function stop() {
+      running = false;
+      cancelAnimationFrame(raf);
+    }
+    function renderOnce() {
+      if (disposed || running) return;
+      draw(COLOR_FADE_MS);
+    }
+    redrawRef.current = renderOnce;
+    const onReduceChange = () => {
+      if (reduceQuery.matches) {
+        stop();
+        renderOnce();
+      } else {
+        start();
+      }
+    };
+    reduceQuery.addEventListener("change", onReduceChange);
+    const onVisibility = () => {
+      if (document.hidden) stop();
+      else start();
+    };
+    document.addEventListener("visibilitychange", onVisibility);
+    const themeObserver = new MutationObserver(() => {
+      colorsDirty = true;
+      if (!running) {
+        readColors(colorTarget);
+        colorCurrent.set(colorTarget);
+        colorsDirty = false;
+        renderOnce();
+      }
+    });
+    themeObserver.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["data-theme", "style"]
+    });
+    const resizeObserver = new ResizeObserver(() => {
+      if (!running) {
+        renderOnce();
+      }
+    });
+    resizeObserver.observe(canvas);
+    let restoreTimer = 0;
+    const onContextLost = (e) => {
+      e.preventDefault();
+      stop();
+      setActive(false);
+      window.clearTimeout(restoreTimer);
+      restoreTimer = window.setTimeout(() => {
+        if (disposed || !gl.isContextLost()) return;
+        try {
+          loseExt()?.restoreContext();
+        } catch {
+          setSupported(false);
+        }
+      }, 700);
+    };
+    const onContextRestored = () => {
+      if (initGL()) {
+        bufWidth = 0;
+        bufHeight = 0;
+        uploadedBlobs = null;
+        colorsDirty = true;
+        setActive(true);
+        if (reduceQuery.matches) renderOnce();
+        else start();
+      }
+    };
+    canvas.addEventListener("webglcontextlost", onContextLost);
+    canvas.addEventListener("webglcontextrestored", onContextRestored);
+    if (gl.isContextLost()) {
+      const ext = loseExt();
+      if (!ext) {
+        queueMicrotask(() => setSupported(false));
+      } else {
+        try {
+          ext.restoreContext();
+        } catch {
+          queueMicrotask(() => setSupported(false));
+        }
+      }
+    } else if (initGL()) {
+      draw(COLOR_FADE_MS);
+      setActive(true);
+      start();
+    } else {
+      setSupported(false);
+    }
+    return () => {
+      disposed = true;
+      stop();
+      window.clearTimeout(restoreTimer);
+      redrawRef.current = () => {
+      };
+      window.removeEventListener("pointermove", onPointerMove);
+      reduceQuery.removeEventListener("change", onReduceChange);
+      document.removeEventListener("visibilitychange", onVisibility);
+      themeObserver.disconnect();
+      resizeObserver.disconnect();
+      canvas.removeEventListener("webglcontextlost", onContextLost);
+      canvas.removeEventListener("webglcontextrestored", onContextRestored);
+      if (program) gl.deleteProgram(program);
+      if (vao) gl.deleteVertexArray(vao);
+      try {
+        if (!gl.isContextLost()) loseExt()?.loseContext();
+      } catch {
+      }
+    };
+  }, [canvasRef, enabled]);
+  return { supported, active };
+}
+export {
+  DEFAULT_SHADER_BLOBS,
+  DEFAULT_SHADER_PARAMS,
+  parseColor,
+  srgbToLinear,
+  useShaderField
+};

package/components/Timeline/Timeline.css

@@ -286,6 +286,23 @@
   color: var(--color-status-positive-text);
 }
 
+.ds-timeline__role-subtitle {
+  margin: 0;
+  font-family: var(--font-paragraph-family);
+  font-size: var(--font-paragraph-size);
+  font-weight: var(--font-paragraph-weight);
+  line-height: var(--font-paragraph-line-height);
+  letter-spacing: var(--font-paragraph-letter-spacing);
+  color: var(--color-text-secondary);
+}
+
+/* The title and its subtitle read as one header block, so whatever follows
+   needs a wider break than the role's own 8px rhythm to separate from it. */
+.ds-timeline__role-subtitle + .ds-timeline__role-description,
+.ds-timeline__role-subtitle + .ds-timeline__role-bullets {
+  margin-top: var(--gap-sm);
+}
+
 .ds-timeline__role-description {
   margin: 0;
   font-family: var(--font-paragraph-family);

package/components/Timeline/Timeline.d.ts

@@ -13,6 +13,8 @@ export interface TimelineItem {
 export interface TimelineRole {
     /** Role or position title */
     title: string;
+    /** Secondary line under the title, e.g. the team, org, or product the role sat in */
+    subtitle?: React.ReactNode;
     /** Start of the date range, e.g. "May 2024" (omit for entries with no dates) */
     start?: string;
     /** End of the date range, e.g. "Jan 2026" (ignored when `present` is set) */

package/components/Timeline/Timeline.js

@@ -23,6 +23,7 @@ const CompanyTimeline = ({ items, className = "" }) => {
           /* @__PURE__ */ jsx("h3", { className: `${BASE_CLASS}__role-title`, children: role.title }),
           renderRoleDates(role)
         ] }),
+        role.subtitle && /* @__PURE__ */ jsx("p", { className: `${BASE_CLASS}__role-subtitle`, children: role.subtitle }),
         role.description && /* @__PURE__ */ jsx("p", { className: `${BASE_CLASS}__role-description`, children: role.description }),
         role.bullets && role.bullets.length > 0 && /* @__PURE__ */ jsx("ul", { className: `${BASE_CLASS}__role-bullets`, children: role.bullets.map((bullet, bulletIndex) => /* @__PURE__ */ jsx("li", { children: bullet }, bulletIndex)) })
       ] }, `${role.title}-${roleIndex}`)) })

package/components/registry.json

@@ -20,6 +20,14 @@
       "category": "data-display",
       "client": true
     },
+    {
+      "name": "AgentPlan",
+      "label": "Agent plan",
+      "slug": "agent-plan",
+      "description": "A collapsible checklist of an agent's task, with live step states and a progress readout.",
+      "category": "ai",
+      "client": true
+    },
     {
       "name": "AgentStatus",
       "label": "Agent status",
@@ -252,6 +260,14 @@
       "category": "charts",
       "client": false
     },
+    {
+      "name": "DataTable",
+      "label": "Data table",
+      "slug": "data-table",
+      "description": "The wired table: sorting, search, row selection, and pagination assembled around Table.",
+      "category": "data-display",
+      "client": true
+    },
     {
       "name": "DateInput",
       "label": "Date input",
@@ -332,6 +348,14 @@
       "category": "data-display",
       "client": false
     },
+    {
+      "name": "EventCalendar",
+      "label": "Event calendar",
+      "slug": "event-calendar",
+      "description": "A month grid with event pills, overflow counts, and month navigation.",
+      "category": "data-display",
+      "client": true
+    },
     {
       "name": "Field",
       "label": "Field",
@@ -412,6 +436,14 @@
       "category": "ai",
       "client": false
     },
+    {
+      "name": "ModelPicker",
+      "label": "Model picker",
+      "slug": "model-picker",
+      "description": "A model selector for chat surfaces, with per-model descriptions and an optional effort row.",
+      "category": "ai",
+      "client": true
+    },
     {
       "name": "Nav",
       "label": "Navigation",
@@ -428,6 +460,14 @@
       "category": "navigation",
       "client": true
     },
+    {
+      "name": "NotificationCenter",
+      "label": "Notification centre",
+      "slug": "notification-center",
+      "description": "A persistent notification inbox with unread count, filter tabs, and per-item actions.",
+      "category": "feedback",
+      "client": true
+    },
     {
       "name": "Pagination",
       "label": "Pagination",
@@ -516,6 +556,14 @@
       "category": "data-display",
       "client": true
     },
+    {
+      "name": "ShaderField",
+      "label": "Shader field",
+      "slug": "shader-field",
+      "description": "An ambient WebGL2 field of soft light sources that sample colour tokens, with a reported fallback status.",
+      "category": "layout",
+      "client": true
+    },
     {
       "name": "Skeleton",
       "label": "Skeleton",

package/components/registry.json.d.ts

@@ -20,6 +20,14 @@ declare const _default: {
       "category": "data-display",
       "client": true
     },
+    {
+      "name": "AgentPlan",
+      "label": "Agent plan",
+      "slug": "agent-plan",
+      "description": "A collapsible checklist of an agent's task, with live step states and a progress readout.",
+      "category": "ai",
+      "client": true
+    },
     {
       "name": "AgentStatus",
       "label": "Agent status",
@@ -252,6 +260,14 @@ declare const _default: {
       "category": "charts",
       "client": false
     },
+    {
+      "name": "DataTable",
+      "label": "Data table",
+      "slug": "data-table",
+      "description": "The wired table: sorting, search, row selection, and pagination assembled around Table.",
+      "category": "data-display",
+      "client": true
+    },
     {
       "name": "DateInput",
       "label": "Date input",
@@ -332,6 +348,14 @@ declare const _default: {
       "category": "data-display",
       "client": false
     },
+    {
+      "name": "EventCalendar",
+      "label": "Event calendar",
+      "slug": "event-calendar",
+      "description": "A month grid with event pills, overflow counts, and month navigation.",
+      "category": "data-display",
+      "client": true
+    },
     {
       "name": "Field",
       "label": "Field",
@@ -412,6 +436,14 @@ declare const _default: {
       "category": "ai",
       "client": false
     },
+    {
+      "name": "ModelPicker",
+      "label": "Model picker",
+      "slug": "model-picker",
+      "description": "A model selector for chat surfaces, with per-model descriptions and an optional effort row.",
+      "category": "ai",
+      "client": true
+    },
     {
       "name": "Nav",
       "label": "Navigation",
@@ -428,6 +460,14 @@ declare const _default: {
       "category": "navigation",
       "client": true
     },
+    {
+      "name": "NotificationCenter",
+      "label": "Notification centre",
+      "slug": "notification-center",
+      "description": "A persistent notification inbox with unread count, filter tabs, and per-item actions.",
+      "category": "feedback",
+      "client": true
+    },
     {
       "name": "Pagination",
       "label": "Pagination",
@@ -516,6 +556,14 @@ declare const _default: {
       "category": "data-display",
       "client": true
     },
+    {
+      "name": "ShaderField",
+      "label": "Shader field",
+      "slug": "shader-field",
+      "description": "An ambient WebGL2 field of soft light sources that sample colour tokens, with a reported fallback status.",
+      "category": "layout",
+      "client": true
+    },
     {
       "name": "Skeleton",
       "label": "Skeleton",