@robr0/design-system 0.6.0 → 0.8.0

package/components/NotificationCenter/NotificationCenter.css

@@ -0,0 +1,262 @@
+/* ============================================
+   NOTIFICATION CENTER COMPONENT
+   The persistent inbox: header with unread
+   count and mark-all-read, filter tabs with
+   counts, and a scrollable list of items.
+
+   Toast interrupts; this accumulates. The
+   container is a floating panel, so it works
+   dropped from a bell icon or inline on a page.
+   ============================================ */
+
+.ds-notification-center {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  background-color: var(--color-bg-container-primary);
+  border: var(--border-xs) solid var(--color-bg-container-border);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+
+/* ============================================
+   HEADER
+   ============================================ */
+
+.ds-notification-center__header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--gap-sm);
+  padding: var(--padding-sm-md) var(--padding-sm-md) var(--padding-xs);
+}
+
+.ds-notification-center__heading {
+  display: flex;
+  align-items: baseline;
+  gap: var(--gap-xs);
+  min-width: 0;
+}
+
+.ds-notification-center__title {
+  color: var(--color-text-primary);
+  font-family: var(--font-title-body-family);
+  font-size: var(--font-title-body-size);
+  font-weight: var(--font-title-body-weight);
+  line-height: var(--font-title-body-line-height);
+  letter-spacing: var(--font-title-body-letter-spacing);
+  white-space: nowrap;
+}
+
+.ds-notification-center__unread {
+  color: var(--color-text-tertiary);
+  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);
+  white-space: nowrap;
+}
+
+.ds-notification-center__mark-all {
+  flex: none;
+  padding: 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--color-action-primary-text-tertiary);
+  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: color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-notification-center__mark-all:hover {
+  color: var(--color-action-primary-text-secondary);
+}
+
+.ds-notification-center__mark-all:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+  border-radius: var(--radius-xxs);
+}
+
+/* ============================================
+   FILTER TABS
+   ============================================ */
+
+.ds-notification-center__tabs {
+  display: flex;
+  gap: var(--gap-xxs);
+  padding: 0 var(--padding-sm-md) var(--padding-xs);
+  border-bottom: var(--border-xs) solid var(--color-divider);
+}
+
+.ds-notification-center__tab {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-xxs);
+  padding: var(--padding-xxs) var(--padding-sm);
+  background: none;
+  border: none;
+  border-radius: var(--radius-full);
+  cursor: pointer;
+  color: var(--color-text-secondary);
+  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-fast) var(--motion-ease-standard),
+    color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-notification-center__tab:hover {
+  background-color: var(--color-action-passive-bg-hover);
+  color: var(--color-text-primary);
+}
+
+.ds-notification-center__tab:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: -2px;
+}
+
+.ds-notification-center__tab--active {
+  background-color: var(--color-bg-container-tertiary);
+  color: var(--color-text-primary);
+}
+
+.ds-notification-center__tab-count {
+  color: var(--color-text-tertiary);
+  font-variant-numeric: tabular-nums;
+}
+
+/* ============================================
+   LIST
+   ============================================ */
+
+.ds-notification-center__list {
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  padding: var(--padding-xxs) 0;
+}
+
+.ds-notification-center__list > .ds-notification-item:not(:last-child) {
+  border-bottom: var(--border-xs) solid var(--color-divider);
+}
+
+/* Give the built-in empty state breathing room */
+.ds-notification-center__list > .ds-empty-state {
+  padding: var(--padding-lg) var(--padding-sm-md);
+}
+
+/* ============================================
+   NOTIFICATION ITEM
+   ============================================ */
+
+.ds-notification-item {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--gap-sm);
+  padding: var(--padding-sm) var(--padding-sm-md);
+}
+
+.ds-notification-item__media {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  color: var(--color-icon-primary);
+}
+
+.ds-notification-item__media .material-symbols-rounded {
+  --icon-size: var(--icon-size-md);
+}
+
+.ds-notification-item__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-xxs);
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.ds-notification-item__top {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-xs);
+}
+
+.ds-notification-item__title {
+  flex: 1 1 auto;
+  min-width: 0;
+  color: var(--color-text-primary);
+  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);
+}
+
+.ds-notification-item--unread .ds-notification-item__title {
+  font-family: var(--font-paragraph-sm-em-family);
+  font-weight: var(--font-paragraph-sm-em-weight);
+  letter-spacing: var(--font-paragraph-sm-em-letter-spacing);
+}
+
+.ds-notification-item__time {
+  flex: none;
+  color: var(--color-text-tertiary);
+  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);
+  white-space: nowrap;
+}
+
+/* Unread dot — informational, so it takes the info status colour rather
+   than the action teal */
+.ds-notification-item__dot {
+  flex: none;
+  width: var(--gap-xs);
+  height: var(--gap-xs);
+  border-radius: var(--radius-full);
+  background-color: var(--color-status-info-border);
+}
+
+.ds-notification-item__text {
+  color: var(--color-text-secondary);
+  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);
+}
+
+.ds-notification-item__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-sm);
+  padding-top: var(--padding-xxxs);
+}
+
+/* ============================================
+   SCREEN READER TEXT
+   ============================================ */
+
+.ds-notification-item__sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

package/components/NotificationCenter/NotificationCenter.d.ts

@@ -0,0 +1,72 @@
+import { default as React } from 'react';
+export interface NotificationCenterTab {
+    /** Display label */
+    label: string;
+    /** Unique tab identifier */
+    value: string;
+    /** Count shown beside the label, e.g. the number of notifications in this filter. */
+    count?: number;
+}
+/** Props owned by NotificationItem itself — everything else falls through to the root element. */
+type NotificationItemOwnProps = {
+    /** One-line headline, e.g. who did what. */
+    title: string;
+    /** When it happened, as already-formatted text like "2m" or "Mon". */
+    time?: string;
+    /** Marks the notification as not yet read: a dot beside the time and emphasised title. */
+    unread?: boolean;
+    /** Leading visual — a Material Symbol name (string) or a custom element (e.g. an Avatar). */
+    media?: string | React.ReactNode;
+    /** Action row under the body — typically compact Buttons like "Reply" or "Retry". */
+    actions?: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+    /** Supporting copy under the title. */
+    children?: React.ReactNode;
+};
+export interface NotificationItemProps extends NotificationItemOwnProps, Omit<React.ComponentPropsWithoutRef<'article'>, keyof NotificationItemOwnProps> {
+}
+/**
+ * NotificationItem is one row of a NotificationCenter: a leading visual, a
+ * headline with its time, supporting copy, and an optional row of actions.
+ * An unread item takes a dot and an emphasised title.
+ */
+export declare const NotificationItem: React.ForwardRefExoticComponent<NotificationItemProps & React.RefAttributes<HTMLElement>>;
+/** Props owned by NotificationCenter itself — everything else falls through to the root element. */
+type NotificationCenterOwnProps = {
+    /** Heading shown in the header. */
+    title?: string;
+    /** How many notifications are unread, shown under the heading. Omit to hide the line. */
+    unreadCount?: number;
+    /** Fires when "Mark all read" is pressed; the control only renders when this is set. */
+    onMarkAllRead?: () => void;
+    /** Text of the mark-all-read control. */
+    markAllLabel?: string;
+    /** Filter tabs under the header, each with an optional count. */
+    tabs?: NotificationCenterTab[];
+    /** Active tab value for controlled use. Pair with `onTabChange`. */
+    activeTab?: string;
+    /** Initially active tab value for uncontrolled use. Defaults to the first tab. */
+    defaultTab?: string;
+    /** Fires with the newly selected tab's value. */
+    onTabChange?: (value: string) => void;
+    /** What to render when there are no children — defaults to a built-in empty state. */
+    emptyState?: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+    /** The notifications, newest first — typically NotificationItems. */
+    children?: React.ReactNode;
+};
+export interface NotificationCenterProps extends NotificationCenterOwnProps, Omit<React.ComponentPropsWithoutRef<'section'>, keyof NotificationCenterOwnProps> {
+}
+/**
+ * NotificationCenter is the persistent inbox for everything that happened
+ * while the user was away: a header with the unread count and a mark-all-read
+ * control, optional filter tabs with counts, and a scrollable list of
+ * NotificationItems. Filtering is the consumer's job — swap the children when
+ * the tab changes.
+ *
+ * Toast interrupts; this accumulates.
+ */
+export declare const NotificationCenter: React.ForwardRefExoticComponent<NotificationCenterProps & React.RefAttributes<HTMLElement>>;
+export {};

package/components/NotificationCenter/NotificationCenter.js

@@ -0,0 +1,128 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useState } from "react";
+import { EmptyState } from "../EmptyState/EmptyState.js";
+import "./NotificationCenter.css";
+import "../../fonts/material-symbols.css";
+const NotificationItem = React.forwardRef(
+  ({ title, time, unread = false, media, actions, className = "", children, ...rest }, ref) => {
+    const baseClass = "ds-notification-item";
+    const classes = [baseClass, unread ? `${baseClass}--unread` : "", className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs("article", { ...rest, ref, className: classes, children: [
+      media && /* @__PURE__ */ jsx("span", { className: `${baseClass}__media`, "aria-hidden": "true", children: typeof media === "string" ? /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", children: media }) : media }),
+      /* @__PURE__ */ jsxs("div", { className: `${baseClass}__body`, children: [
+        /* @__PURE__ */ jsxs("div", { className: `${baseClass}__top`, children: [
+          /* @__PURE__ */ jsx("span", { className: `${baseClass}__title`, children: title }),
+          time && /* @__PURE__ */ jsx("span", { className: `${baseClass}__time`, children: time }),
+          unread && /* @__PURE__ */ jsx("span", { className: `${baseClass}__dot`, children: /* @__PURE__ */ jsx("span", { className: `${baseClass}__sr`, children: "Unread" }) })
+        ] }),
+        children && /* @__PURE__ */ jsx("div", { className: `${baseClass}__text`, children }),
+        actions && /* @__PURE__ */ jsx("div", { className: `${baseClass}__actions`, children: actions })
+      ] })
+    ] });
+  }
+);
+NotificationItem.displayName = "NotificationItem";
+const NotificationCenter = React.forwardRef(
+  ({
+    title = "Notifications",
+    unreadCount,
+    onMarkAllRead,
+    markAllLabel = "Mark all read",
+    tabs,
+    activeTab,
+    defaultTab,
+    onTabChange,
+    emptyState,
+    className = "",
+    children,
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-notification-center";
+    const isTabControlled = activeTab !== void 0;
+    const [uncontrolledTab, setUncontrolledTab] = useState(defaultTab ?? tabs?.[0]?.value);
+    const currentTab = isTabControlled ? activeTab : uncontrolledTab;
+    const selectTab = (value) => {
+      if (!isTabControlled) setUncontrolledTab(value);
+      onTabChange?.(value);
+    };
+    const handleTabKeyDown = (e, index) => {
+      if (!tabs) return;
+      let target;
+      switch (e.key) {
+        case "ArrowRight":
+          e.preventDefault();
+          target = tabs[(index + 1) % tabs.length];
+          break;
+        case "ArrowLeft":
+          e.preventDefault();
+          target = tabs[(index - 1 + tabs.length) % tabs.length];
+          break;
+        case "Home":
+          e.preventDefault();
+          target = tabs[0];
+          break;
+        case "End":
+          e.preventDefault();
+          target = tabs[tabs.length - 1];
+          break;
+      }
+      if (target) {
+        selectTab(target.value);
+        const tabList = e.target.parentElement;
+        const buttons = tabList?.querySelectorAll(`.${baseClass}__tab`);
+        buttons?.[tabs.indexOf(target)]?.focus();
+      }
+    };
+    const hasItems = React.Children.count(children) > 0;
+    const classes = [baseClass, className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs("section", { ...rest, ref, className: classes, children: [
+      /* @__PURE__ */ jsxs("header", { className: `${baseClass}__header`, children: [
+        /* @__PURE__ */ jsxs("div", { className: `${baseClass}__heading`, children: [
+          /* @__PURE__ */ jsx("span", { className: `${baseClass}__title`, children: title }),
+          unreadCount !== void 0 && unreadCount > 0 && /* @__PURE__ */ jsxs("span", { className: `${baseClass}__unread`, children: [
+            unreadCount,
+            " unread"
+          ] })
+        ] }),
+        onMarkAllRead && /* @__PURE__ */ jsx("button", { type: "button", className: `${baseClass}__mark-all`, onClick: onMarkAllRead, children: markAllLabel })
+      ] }),
+      tabs && tabs.length > 0 && /* @__PURE__ */ jsx("div", { className: `${baseClass}__tabs`, role: "tablist", "aria-label": `${title} filters`, children: tabs.map((tab, index) => {
+        const isActive = tab.value === currentTab;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            role: "tab",
+            "aria-selected": isActive,
+            tabIndex: isActive ? 0 : -1,
+            className: [
+              `${baseClass}__tab`,
+              isActive ? `${baseClass}__tab--active` : ""
+            ].filter(Boolean).join(" "),
+            onClick: () => selectTab(tab.value),
+            onKeyDown: (e) => handleTabKeyDown(e, index),
+            children: [
+              tab.label,
+              tab.count !== void 0 && /* @__PURE__ */ jsx("span", { className: `${baseClass}__tab-count`, children: tab.count })
+            ]
+          },
+          tab.value
+        );
+      }) }),
+      /* @__PURE__ */ jsx("div", { className: `${baseClass}__list`, children: hasItems ? children : emptyState ?? /* @__PURE__ */ jsx(
+        EmptyState,
+        {
+          icon: "notifications",
+          title: "Nothing new",
+          description: "Notifications will collect here as they arrive.",
+          size: "compact"
+        }
+      ) })
+    ] });
+  }
+);
+NotificationCenter.displayName = "NotificationCenter";
+export {
+  NotificationCenter,
+  NotificationItem
+};

package/components/Prose/Prose.css

@@ -192,8 +192,17 @@
    TABLES
    ============================================ */
 
+/* The table is its own scroll container. Prose styles markup it does not
+   render, so it cannot wrap the table in a scrolling div — `display: block`
+   makes the table element itself the scroller. The cost is deliberate: the
+   table sizes to its content instead of filling the container, because the
+   inner anonymous table box a block table generates cannot be stretched.
+   A clipped or shattered table is the worse failure. */
 .ds-prose table {
-  width: 100%;
+  display: block;
+  width: max-content;
+  max-width: 100%;
+  overflow-x: auto;
   border-collapse: collapse;
 }
 
@@ -207,10 +216,18 @@
   text-align: start;
 }
 
+/* Cells never break words, whatever the surrounding context does. An
+   ancestor that sets `overflow-wrap: anywhere` (ChatMessage does, so a long
+   URL cannot widen a bubble) otherwise inherits in and collapses every
+   column's minimum width to one character, which lets auto table layout
+   squeeze a heading into "Co / m / pa / ny" rather than let the table reach
+   its natural width. Holding the floor is what gives the scroll above
+   something to scroll. */
 .ds-prose th,
 .ds-prose td {
   padding: var(--padding-xs) var(--padding-sm-md);
   border-block-end: var(--border-xs) solid var(--color-divider);
+  overflow-wrap: normal;
 }
 
 /* ============================================

package/components/Reasoning/Reasoning.css

@@ -128,12 +128,16 @@
   align-items: center;
 }
 
+/* The band travels dim → bright → dim, and stays narrow, matching
+   AgentStatus's sweep stop for stop: the two sit in the same conversation,
+   so a shimmer that read differently here would look like a second effect
+   rather than the same one. */
 .ds-reasoning--streaming .ds-reasoning__summary:not(.ds-reasoning__summary--node) {
   background-image: linear-gradient(
     100deg,
-    var(--color-text-primary) 35%,
-    var(--color-text-tertiary) 50%,
-    var(--color-text-primary) 65%
+    var(--color-text-tertiary) 44%,
+    var(--color-text-primary) 50%,
+    var(--color-text-tertiary) 56%
   );
   background-size: 250% 100%;
   background-clip: text;
@@ -183,7 +187,18 @@
      the thought-for line never shifts the trace. */
   margin-left: calc(var(--icon-size-md) / 2 - var(--border-md) / 2);
   padding-left: calc(var(--icon-size-md) / 2 + var(--gap-sm-md) - var(--border-md) / 2);
-  border-left: var(--border-md) solid var(--color-divider);
+  /* The rail dissolves at its foot — the Timeline's end-of-line treatment.
+     A border can't carry a gradient, so the border only reserves the
+     geometry (transparent, same width) and the stripe is painted under it:
+     a border-box background sized to the border's own column. */
+  border-left: var(--border-md) solid transparent;
+  background:
+    linear-gradient(
+        to bottom,
+        var(--color-divider) calc(100% - var(--gap-lg) * 2),
+        var(--color-bg-container-primary-transparent)
+      )
+      left top / var(--border-md) 100% no-repeat border-box;
   color: var(--color-text-secondary);
   font-family: var(--font-paragraph-family);
   font-size: var(--font-paragraph-size);

package/components/ShaderField/ShaderField.css

@@ -0,0 +1,24 @@
+/* ShaderField — the canvas only.
+   Placement, clipping and any fade-to-page mask belong to the positioned
+   ancestor the caller provides: where the field sits is a layout decision,
+   and baking one in would make the component unusable anywhere else. */
+
+.ds-shader-field {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  display: block;
+  /* Scenery, never a target — a full-bleed canvas that swallowed clicks would
+     make whatever it covers unreachable. */
+  pointer-events: none;
+  /* Reveals only once a context is live and the first frame is drawn, so a
+     machine that cannot run the shader never shows an empty canvas — it stays
+     on the caller's fallback instead. */
+  opacity: 0;
+  transition: opacity var(--motion-duration-slower) var(--motion-ease-entrance);
+}
+
+.ds-shader-field[data-status='active'] {
+  opacity: 1;
+}

package/components/ShaderField/ShaderField.d.ts

@@ -0,0 +1,68 @@
+import { default as React } from 'react';
+import { ShaderBlob, ShaderParams } from './useShaderField';
+export type { ShaderBlob, ShaderParams, ShaderFieldParams, ShaderFieldState, } from './useShaderField';
+export { useShaderField, DEFAULT_SHADER_BLOBS, DEFAULT_SHADER_PARAMS } from './useShaderField';
+export { BLOB_COUNT } from './field.glsl';
+/**
+ * How the renderer has resolved.
+ *
+ * `pending` is the one that matters to a caller: the context is still coming
+ * up, so neither the field nor a fallback should be painted yet — showing a
+ * fallback here and swapping it a frame later reads as two backgrounds loading
+ * in sequence.
+ */
+export type ShaderFieldStatus = 'pending' | 'active' | 'unavailable';
+/** Props owned by ShaderField itself — everything else falls through to the canvas. */
+type ShaderFieldOwnProps = {
+    /**
+     * Field parameters, merged over the shipped defaults, so passing one
+     * property changes one thing. Changing them never rebuilds the GL state.
+     */
+    params?: Partial<ShaderParams>;
+    /**
+     * The light sources. Defaults to an eight-source composition on the core
+     * accent tokens. Fewer than `BLOB_COUNT` entries is fine — unused slots park
+     * off-field; more are ignored, because the shader's uniform arrays are
+     * fixed-size.
+     */
+    blobs?: readonly ShaderBlob[];
+    /**
+     * False keeps WebGL entirely unmounted and reports `unavailable`, so the
+     * caller's fallback is the whole background. This is the kill switch: a
+     * config lever, or an A/B against the fallback.
+     */
+    enabled?: boolean;
+    /**
+     * Called whenever the renderer's status changes. Drive the fallback layer's
+     * visibility from this — the component deliberately does not own one, since
+     * what to paint instead is a design decision, not a rendering one.
+     */
+    onStatusChange?: (status: ShaderFieldStatus) => void;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface ShaderFieldProps extends ShaderFieldOwnProps, Omit<React.ComponentPropsWithoutRef<'canvas'>, keyof ShaderFieldOwnProps> {
+}
+/**
+ * ShaderField paints an ambient WebGL2 field of soft Gaussian light sources,
+ * each sampling a semantic colour token at runtime — so the whole thing
+ * re-themes with `data-theme`, and with any scoped custom-property override,
+ * without the caller wiring anything up.
+ *
+ * It is scenery, not interface: nothing about it is a signal, so its motion
+ * cannot be mistaken for feedback. Two consequences follow, and both are
+ * handled here rather than left to the caller.
+ *
+ * It honours reduced motion in JavaScript. The system's motion tokens collapse
+ * under `prefers-reduced-motion`, but that guard is CSS-only and cannot see a
+ * `requestAnimationFrame` loop; a GPU-driven surface has to check the query
+ * itself. This one renders a single static frame and never starts its loop.
+ *
+ * And it always reports how it resolved. No WebGL2, a blocked or lost GPU
+ * context, a renderer that stalls before its first frame, or `enabled={false}`
+ * all arrive at `unavailable` through `onStatusChange`, so the caller can keep
+ * a plain CSS fallback painted underneath. The canvas fills its positioned
+ * ancestor and is inert to pointer events; give that ancestor the placement,
+ * the clipping and any mask.
+ */
+export declare const ShaderField: React.ForwardRefExoticComponent<ShaderFieldProps & React.RefAttributes<HTMLCanvasElement>>;

package/components/ShaderField/ShaderField.js

@@ -0,0 +1,54 @@
+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";
+import "./ShaderField.css";
+const WATCHDOG_MS = 1500;
+const ShaderField = React.forwardRef(
+  ({
+    params,
+    blobs = DEFAULT_SHADER_BLOBS,
+    enabled = true,
+    onStatusChange,
+    className = "",
+    ...rest
+  }, ref) => {
+    const canvasRef = useRef(null);
+    React.useImperativeHandle(ref, () => canvasRef.current);
+    const fieldParams = useMemo(
+      () => ({ ...DEFAULT_SHADER_PARAMS, ...params, blobs }),
+      [params, blobs]
+    );
+    const { supported, active } = useShaderField(canvasRef, fieldParams, enabled);
+    const [gaveUp, setGaveUp] = useState(false);
+    useEffect(() => {
+      if (!enabled || active || !supported) return;
+      const timer = window.setTimeout(() => setGaveUp(true), WATCHDOG_MS);
+      return () => window.clearTimeout(timer);
+    }, [enabled, active, supported]);
+    const status = !enabled || !supported ? "unavailable" : active ? "active" : gaveUp ? "unavailable" : "pending";
+    const notify = useRef(onStatusChange);
+    notify.current = onStatusChange;
+    useEffect(() => {
+      notify.current?.(status);
+    }, [status]);
+    if (!enabled) return null;
+    const classes = ["ds-shader-field", className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsx(
+      "canvas",
+      {
+        ...rest,
+        ref: canvasRef,
+        className: classes,
+        "data-status": status,
+        "aria-hidden": "true"
+      }
+    );
+  }
+);
+ShaderField.displayName = "ShaderField";
+export {
+  DEFAULT_SHADER_BLOBS,
+  DEFAULT_SHADER_PARAMS,
+  ShaderField,
+  useShaderField
+};