@sableui/react 0.6.2 → 0.7.1

package/dist/components/theme-switcher/theme-switcher.meta.js

@@ -0,0 +1,99 @@
+// src/components/theme-switcher/theme-switcher.meta.ts
+var themeSwitcherMeta = {
+  name: "ThemeSwitcher",
+  summary: "A segmented light / dark / system switch. Presentational: it renders the selected color preference and reports changes via onValueChange; pair it with useSableTheme() when the app uses SableThemeProvider. A radiogroup of three icon buttons (sun / moon / desktop).",
+  status: "stable",
+  keywords: [
+    "theme switcher",
+    "color mode",
+    "dark mode",
+    "appearance"
+  ],
+  usage: {
+    description: "Use ThemeSwitcher for light, dark, and system color mode preference.",
+    bestPractices: [
+      {
+        guidance: "do",
+        description: "Use it where users expect appearance controls, such as app chrome or settings."
+      },
+      {
+        guidance: "do",
+        description: "Respect persisted system or user preference when initializing the control."
+      },
+      {
+        guidance: "dont",
+        description: "Do not use ThemeSwitcher to choose brand themes or component style presets."
+      },
+      {
+        guidance: "dont",
+        description: 'Do not hand-build another segmented capsule for a different choice. ThemeSwitcher wears the shared segmented look (lib/segmented); for any other single-select switch use ToggleGroup appearance="segmented".'
+      },
+      {
+        guidance: "dont",
+        description: "Do not omit the `system` option or default to a hardcoded mode. Overriding the OS preference is the single most common accessibility complaint about theme controls."
+      }
+    ]
+  },
+  related: {
+    components: [
+      "ThemeSelector",
+      "Switch",
+      "Toggle"
+    ]
+  },
+  props: [
+    {
+      name: "value",
+      type: '"light" | "dark" | "system"',
+      description: "The currently selected color preference."
+    },
+    {
+      name: "onValueChange",
+      type: "(value: ThemeMode) => void",
+      description: "Called with the next color preference when an option is chosen."
+    },
+    {
+      name: "label",
+      type: "string",
+      default: '"Theme"',
+      description: "Accessible label for the radiogroup."
+    },
+    {
+      name: "className",
+      type: "string",
+      description: "Merged onto the outer radiogroup container."
+    }
+  ],
+  tokensUsed: [
+    "border",
+    "card",
+    "muted-foreground",
+    "foreground",
+    "accent",
+    "accent-foreground",
+    "ring"
+  ],
+  a11y: [
+    'The container is role="radiogroup" with an aria-label; each option is role="radio" with aria-checked reflecting the selected value.',
+    "Each icon button carries an aria-label (Light / Dark / System) plus a title tooltip, since the visual is icon-only.",
+    "Focus-visible draws a 2px ring on the focused option; selection styling reads from aria-checked.",
+    "Presentational only: it does not change the document theme; pass useSableTheme().setPreference or apply the change in onValueChange."
+  ],
+  examples: [
+    {
+      label: "Controlled",
+      code: 'const [theme, setTheme] = useState<ThemeMode>("system")\n<ThemeSwitcher value={theme} onValueChange={setTheme} />'
+    },
+    {
+      label: "With SableThemeProvider",
+      code: "const { preference, setPreference } = useSableTheme()\n<ThemeSwitcher value={preference} onValueChange={setPreference} />"
+    },
+    {
+      label: "Light selected",
+      code: '<ThemeSwitcher value="light" onValueChange={setTheme} />'
+    }
+  ]
+};
+export {
+  themeSwitcherMeta
+};

package/dist/components/thinking-orb/index.js

@@ -0,0 +1,9 @@
+// src/components/thinking-orb/index.ts
+import {
+  ThinkingOrb
+} from "./thinking-orb.js";
+import { thinkingOrbMeta } from "./thinking-orb.meta.js";
+export {
+  ThinkingOrb,
+  thinkingOrbMeta
+};

package/dist/components/thinking-orb/thinking-orb.js

@@ -0,0 +1,126 @@
+"use client";
+
+// src/components/thinking-orb/thinking-orb.tsx
+import { useEffect, useRef } from "react";
+import { cn } from "../../lib/cn.js";
+import { useMotion } from "../../motion/MotionProvider.js";
+import {
+  ORB_PX,
+  ORB_RENDERERS,
+  orbTuning
+} from "./thinking-orb.render.js";
+import { jsx } from "react/jsx-runtime";
+var ORB_BOX = {
+  sm: "calc(var(--spacing) * 5)",
+  md: "calc(var(--spacing) * 8)",
+  lg: "calc(var(--spacing) * 16)"
+};
+var STILL_T = 0.6;
+var MAX_DPR = 2;
+function ThinkingOrb({
+  mode = "orbit",
+  size = "md",
+  speed = 1,
+  paused = false,
+  label = "Thinking",
+  className,
+  style,
+  ref,
+  ...props
+}) {
+  const canvasRef = useRef(null);
+  const { enabled } = useMotion();
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    const dpr = Math.min(MAX_DPR, globalThis.devicePixelRatio || 1);
+    let px = ORB_PX[size];
+    const fit = () => {
+      const measured = Math.round(canvas.getBoundingClientRect().width);
+      px = measured > 0 ? measured : ORB_PX[size];
+      canvas.width = Math.round(px * dpr);
+      canvas.height = Math.round(px * dpr);
+    };
+    fit();
+    const render = ORB_RENDERERS[mode];
+    const tuning = orbTuning(mode, size);
+    const rate = tuning.speed * speed;
+    const draw = (t) => {
+      const ink = globalThis.getComputedStyle(canvas).color;
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+      ctx.clearRect(0, 0, px, px);
+      ctx.fillStyle = ink;
+      ctx.strokeStyle = ink;
+      render(ctx, px, t, tuning);
+    };
+    const resizer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(() => {
+      fit();
+      if (!enabled || paused) draw(STILL_T);
+    });
+    resizer?.observe(canvas);
+    if (!enabled || paused) {
+      draw(STILL_T);
+      return () => resizer?.disconnect();
+    }
+    let frame = 0;
+    let running = false;
+    const tick = () => {
+      draw(performance.now() / 1e3 * rate);
+      if (running) frame = requestAnimationFrame(tick);
+    };
+    const start = () => {
+      if (running) return;
+      running = true;
+      frame = requestAnimationFrame(tick);
+    };
+    const stop = () => {
+      running = false;
+      cancelAnimationFrame(frame);
+    };
+    draw(performance.now() / 1e3 * rate);
+    let visible = true;
+    const observer = typeof IntersectionObserver === "undefined" ? null : new IntersectionObserver(([entry]) => {
+      visible = entry.isIntersecting;
+      if (visible && document.visibilityState !== "hidden") start();
+      else stop();
+    });
+    observer?.observe(canvas);
+    const onVisibility = () => {
+      if (document.visibilityState === "hidden") stop();
+      else if (visible) start();
+    };
+    document.addEventListener("visibilitychange", onVisibility);
+    if (!observer) start();
+    return () => {
+      stop();
+      observer?.disconnect();
+      resizer?.disconnect();
+      document.removeEventListener("visibilitychange", onVisibility);
+    };
+  }, [mode, size, speed, paused, enabled]);
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      role: "status",
+      "aria-label": label,
+      className: cn("inline-flex items-center justify-center", className),
+      style: { width: ORB_BOX[size], height: ORB_BOX[size], ...style },
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "canvas",
+        {
+          ref: canvasRef,
+          "aria-hidden": "true",
+          className: "block size-full"
+        }
+      )
+    }
+  );
+}
+ThinkingOrb.displayName = "ThinkingOrb";
+export {
+  ThinkingOrb
+};

package/dist/components/thinking-orb/thinking-orb.meta.js

@@ -0,0 +1,142 @@
+// src/components/thinking-orb/thinking-orb.meta.ts
+var thinkingOrbMeta = {
+  name: "ThinkingOrb",
+  summary: "Canvas dot-cloud 'agent is thinking' indicator. Three generated modes (orbit / globe / mesh) drawn from pure math \u2014 no icon dependency, no animation library. Ink follows currentColor; size steps are separately tuned.",
+  status: "stable",
+  keywords: [
+    "thinking",
+    "orb",
+    "agent",
+    "ai",
+    "chat",
+    "loading",
+    "streaming",
+    "indeterminate",
+    "canvas"
+  ],
+  usage: {
+    description: "Use ThinkingOrb while an AI agent is working and there is nothing specific to report yet \u2014 before the first token streams, or between tool calls. It is a richer, more characterful sibling of Spinner for the one place in a product where the wait is the experience.",
+    bestPractices: [
+      {
+        guidance: "do",
+        description: "Reserve it for the single active agent state \u2014 the composer, the streaming message header, a standalone thinking screen. One orb on screen reads as intent; several read as decoration."
+      },
+      {
+        guidance: "do",
+        description: "Switch mode to say what kind of work is happening: orbit for generic thinking, globe while searching or retrieving, mesh while relating sources or running tools. Pair it with a text status so the phase is legible without decoding the animation."
+      },
+      {
+        guidance: "do",
+        description: 'Use size="sm" inline in a message row or composer and size="lg" only when the orb is the main thing on screen. The size steps are separately tuned, not scaled, so the small one stays legible.'
+      },
+      {
+        guidance: "dont",
+        description: "Do not put one on every row of a list or in a repeated skeleton. Each orb runs its own animation frame loop painting hundreds of arcs; use Skeleton for content-shaped waits and Spinner inside buttons."
+      },
+      {
+        guidance: "dont",
+        description: "Do not use it for a determinate wait. It carries no sense of how far along anything is \u2014 reach for Progress when a percentage exists."
+      },
+      {
+        guidance: "dont",
+        description: "Do not rely on the animation alone to announce the wait. Give the label a short constant phrase (it is the role=status announcement) or place a status message next to it."
+      },
+      {
+        guidance: "dont",
+        description: 'Do not pass a label that changes while the orb is up. It is the accessible name of a live region, so every change re-announces the whole thing \u2014 feed it a per-token phase and a screen reader interrupts on each delta: "Chromatic drift" \u2192 "Chromatic drift \xB7 rgb-shift" \u2192 "Chromatic drift \xB7 rgb-shift \u2192 grain", which is unusable. The label names the wait ("Thinking"); the phase belongs in adjacent text, as in the "Inline with a status line" example. If the phase must be announced, announce it once when the turn settles from a separate live region \u2014 not per update.'
+      }
+    ]
+  },
+  related: {
+    components: ["Spinner", "Skeleton", "Progress", "InlineStatus", "ChatComposer", "Message"]
+  },
+  props: [
+    {
+      name: "mode",
+      type: '"orbit" | "globe" | "mesh"',
+      default: '"orbit"',
+      description: "Which cloud to draw. orbit = generic working, globe = searching/retrieving (a scan band sweeps pole to pole), mesh = relating things (nodes wire to near neighbours and signals run the edges)."
+    },
+    {
+      name: "size",
+      type: '"sm" | "md" | "lg"',
+      default: '"md"',
+      description: "Rendered box on the spacing scale: sm 5 units (20px at the default spacing; inline in a composer or message row), md 8 (32px; beside a status line), lg 16 (64px; standalone). The box moves with density like the text beside it, and the canvas re-measures it. Each step has its own dot density, dot size and speed."
+    },
+    {
+      name: "speed",
+      type: "number",
+      default: "1",
+      description: "Multiplier on top of the per-size tuned speed. Below ~0.5 the orb reads as stalled."
+    },
+    {
+      name: "paused",
+      type: "boolean",
+      default: "false",
+      description: "Freeze on a representative still frame without unmounting."
+    },
+    {
+      name: "label",
+      type: "string",
+      default: '"Thinking"',
+      description: "Accessible label announced by screen readers while visible (sets aria-label on the role=status element). Must stay constant for as long as the orb is mounted \u2014 it names the wait, it does not report progress."
+    },
+    {
+      name: "className",
+      type: "string",
+      description: "Set the ink with a semantic text-* token (the dots are drawn from the element's computed color). The box is sized by the size prop, not by className."
+    }
+  ],
+  tokensUsed: ["foreground", "muted-foreground", "primary"],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "none",
+      part: "Root",
+      why: "The orb appears when work starts, and the point cloud is already in motion on its first painted frame. There is nothing to stage."
+    },
+    {
+      slot: "response",
+      recipe: "none",
+      part: "Root",
+      why: "It reports state; it is not a control. A hover reaction would suggest the wait is something you can click your way out of."
+    },
+    {
+      slot: "transition",
+      recipe: "none",
+      part: "Root",
+      why: "Changing `mode` swaps the renderer on the next frame: the cloud is redrawn as the new shape, not morphed into it. The phase change is carried by the status text beside the orb, which is what a reader actually reads; a per-particle morph would be decoration on top of it."
+    },
+    {
+      slot: "activity",
+      recipe: "custom",
+      part: "Root",
+      why: "The cloud is drawn per frame on a canvas by a single requestAnimationFrame loop \u2014 no CSS animation exists to name here. The loop reads the motion policy itself, which is the part worth checking when auditing: `custom` means the kill-switch is honoured in JS rather than by --motion-scale."
+    }
+  ],
+  a11y: [
+    "Wrapped in role=status, a polite live region, with an aria-label (default 'Thinking'); the canvas itself is aria-hidden.",
+    "Because that label is the live region's accessible name, it must not change while the orb is mounted \u2014 a name that churns re-announces on every change, so a phase recomputed per streamed delta becomes an interruption per delta. Keep the label constant and let the phase live in adjacent text; announce an outcome once when the work settles, from a separate region.",
+    "Ink is the element's computed color, so contrast is the consumer's token choice \u2014 pair with foreground or muted-foreground rather than a decorative tint.",
+    "Honours the motion policy: under prefers-reduced-motion or <MotionProvider> off, it paints one still frame and never starts an animation loop.",
+    "The loop also stops when the orb scrolls out of view or the tab is backgrounded, so a forgotten orb cannot burn a CPU core."
+  ],
+  examples: [
+    { label: "Default", code: "<ThinkingOrb />" },
+    {
+      label: "Modes",
+      code: '<ThinkingOrb mode="orbit" size="lg" />\n<ThinkingOrb mode="globe" size="lg" />\n<ThinkingOrb mode="mesh" size="lg" />'
+    },
+    {
+      label: "Inline with a status line (the label stays constant, the phase moves)",
+      code: '<InlineStatus icon={<ThinkingOrb mode="globe" size="sm" label="Searching" />}>Searching your workspace\u2026</InlineStatus>'
+    },
+    {
+      label: "Tinted and paused",
+      code: '<ThinkingOrb size="lg" className="text-primary" paused />'
+    }
+  ]
+};
+export {
+  thinkingOrbMeta
+};

package/dist/components/thinking-orb/thinking-orb.render.js

@@ -0,0 +1,252 @@
+// src/components/thinking-orb/thinking-orb.render.ts
+var ORB_PX = { sm: 20, md: 32, lg: 64 };
+var ORB_TUNING = {
+  orbit: {
+    sm: { density: 0.35, dotScale: 3.4, speed: 1.9 },
+    md: { density: 0.55, dotScale: 2.3, speed: 1.5 },
+    lg: { density: 1, dotScale: 1.6, speed: 1.2 }
+  },
+  globe: {
+    sm: { density: 0.16, dotScale: 3.2, speed: 1.6 },
+    md: { density: 0.4, dotScale: 2.2, speed: 1.3 },
+    lg: { density: 1, dotScale: 1.5, speed: 1 }
+  },
+  mesh: {
+    sm: { density: 0.22, dotScale: 3.2, speed: 2.2 },
+    md: { density: 0.5, dotScale: 2.2, speed: 1.8 },
+    lg: { density: 1, dotScale: 1.6, speed: 1.4 }
+  }
+};
+function orbTuning(mode, size) {
+  return ORB_TUNING[mode][size];
+}
+var TAU = Math.PI * 2;
+var MIN_R = 0.3;
+function hash(a, b) {
+  const n = Math.sin(a * 12.9898 + b * 78.233) * 43758.5453;
+  return n - Math.floor(n);
+}
+function spherePoint(i, n) {
+  const golden = Math.PI * (3 - Math.sqrt(5));
+  const y = 1 - 2 * (i + 0.5) / n;
+  const r = Math.sqrt(Math.max(0, 1 - y * y));
+  const theta = i * golden;
+  return [r * Math.cos(theta), y, r * Math.sin(theta)];
+}
+function count(base, density, floor = 3) {
+  return Math.max(floor, Math.round(base * Math.sqrt(density)));
+}
+function dotBase(size, dotScale) {
+  return (size / 300) ** 0.6 * dotScale;
+}
+function projector(yaw, pitch, cx, cy, radius) {
+  const sy = Math.sin(yaw);
+  const cyaw = Math.cos(yaw);
+  const sp = Math.sin(pitch);
+  const cp = Math.cos(pitch);
+  return (x, y, z) => {
+    const rx = x * cyaw + z * sy;
+    const rz = -x * sy + z * cyaw;
+    const ry = y * cp - rz * sp;
+    const depth = y * sp + rz * cp;
+    return [cx + rx * radius, cy - ry * radius, depth];
+  };
+}
+function ringBasis(ax, ay, az) {
+  const [rx, ry, rz] = Math.abs(ax) < 0.9 ? [1, 0, 0] : [0, 1, 0];
+  let e1x = ay * rz - az * ry;
+  let e1y = az * rx - ax * rz;
+  let e1z = ax * ry - ay * rx;
+  const len = Math.max(1e-6, Math.hypot(e1x, e1y, e1z));
+  e1x /= len;
+  e1y /= len;
+  e1z /= len;
+  const e2x = ay * e1z - az * e1y;
+  const e2y = az * e1x - ax * e1z;
+  const e2z = ax * e1y - ay * e1x;
+  return [
+    [e1x, e1y, e1z],
+    [e2x, e2y, e2z]
+  ];
+}
+function paintDots(ctx, dots) {
+  dots.sort((a, b) => a.z - b.z);
+  for (const d of dots) {
+    if (d.a < 0.02) continue;
+    ctx.globalAlpha = Math.min(1, d.a);
+    ctx.beginPath();
+    ctx.arc(d.x, d.y, Math.max(MIN_R, d.r), 0, TAU);
+    ctx.fill();
+  }
+  ctx.globalAlpha = 1;
+}
+function paintLines(ctx, lines) {
+  for (const l of lines) {
+    if (l.a < 0.02) continue;
+    ctx.globalAlpha = Math.min(1, l.a);
+    ctx.lineWidth = l.w;
+    ctx.beginPath();
+    ctx.moveTo(l.x1, l.y1);
+    ctx.lineTo(l.x2, l.y2);
+    ctx.stroke();
+  }
+  ctx.globalAlpha = 1;
+}
+var orbit = (ctx, size, t, tuning) => {
+  const c = size / 2;
+  const radius = size / 2 * 0.84;
+  const project = projector(t * 0.12, 0.3, c, c, radius);
+  const rs = dotBase(size, tuning.dotScale);
+  const rings = count(10, tuning.density);
+  const traceN = count(34, tuning.density, 10);
+  const particles = count(3, tuning.density, 2);
+  const dots = [];
+  for (let i = 0; i < rings; i++) {
+    const a = hash(i, 1.7);
+    const b = hash(i, 5.2);
+    const c2 = hash(i, 8.9);
+    const rr = 0.45 + 0.5 * a;
+    const phi = a * TAU;
+    const theta = Math.acos(2 * b - 1);
+    const ax = Math.sin(theta) * Math.cos(phi);
+    const ay = Math.cos(theta);
+    const az = Math.sin(theta) * Math.sin(phi);
+    const [e1, e2] = ringBasis(ax, ay, az);
+    const spin = (0.3 + 0.6 * c2) * (c2 > 0.5 ? 1 : -1);
+    for (let g = 0; g < traceN; g++) {
+      const th = g / traceN * TAU;
+      const cs = Math.cos(th) * rr;
+      const sn = Math.sin(th) * rr;
+      const [x, y, z] = project(
+        e1[0] * cs + e2[0] * sn,
+        e1[1] * cs + e2[1] * sn,
+        e1[2] * cs + e2[2] * sn
+      );
+      const depth = (z + 1) / 2;
+      dots.push({ x, y, z, r: 0.6 * rs, a: 0.08 + 0.14 * depth });
+    }
+    for (let p = 0; p < particles; p++) {
+      const th = t * spin + p / particles * TAU + b * 6;
+      const cs = Math.cos(th) * rr;
+      const sn = Math.sin(th) * rr;
+      const [x, y, z] = project(
+        e1[0] * cs + e2[0] * sn,
+        e1[1] * cs + e2[1] * sn,
+        e1[2] * cs + e2[2] * sn
+      );
+      const depth = (z + 1) / 2;
+      dots.push({ x, y, z, r: (0.85 + 1.2 * depth) * rs, a: 0.4 + 0.55 * depth });
+    }
+  }
+  paintDots(ctx, dots);
+};
+var globe = (ctx, size, t, tuning) => {
+  const c = size / 2;
+  const radius = size / 2 * 0.86;
+  const project = projector(t * 0.5, 0.38, c, c, radius);
+  const rs = dotBase(size, tuning.dotScale);
+  const latRings = count(15, tuning.density, 5);
+  const lonDensity = count(40, tuning.density, 8);
+  const scan = 2 * Math.abs(t * 0.22 % 2 - 1) - 1;
+  const dots = [];
+  for (let i = 0; i <= latRings; i++) {
+    const lat = -Math.PI / 2 + i / latRings * Math.PI;
+    const cl = Math.cos(lat);
+    const sl = Math.sin(lat);
+    const n = Math.max(1, Math.round(Math.abs(cl) * lonDensity));
+    const near = Math.max(0, 1 - Math.abs(sl - scan) / 0.24);
+    for (let j = 0; j < n; j++) {
+      const lon = j / n * TAU;
+      const [x, y, z] = project(cl * Math.cos(lon), sl, cl * Math.sin(lon));
+      const depth = (z + 1) / 2;
+      dots.push({
+        x,
+        y,
+        z,
+        r: (0.45 + 1 * depth + 0.9 * near) * rs,
+        a: 0.1 + 0.4 * depth + 0.5 * near * depth
+      });
+    }
+  }
+  paintDots(ctx, dots);
+};
+var mesh = (ctx, size, t, tuning) => {
+  const c = size / 2;
+  const radius = size / 2 * 0.82;
+  const project = projector(t * 0.18, 0.32, c, c, radius);
+  const rs = dotBase(size, tuning.dotScale);
+  const nodeN = count(26, tuning.density, 8);
+  const signals = count(4, tuning.density, 1);
+  const threshold = Math.min(1, 0.78 * Math.sqrt(26 / nodeN));
+  const edgeGain = Math.min(1.6, 1 / Math.sqrt(tuning.density));
+  const pts = [];
+  for (let i = 0; i < nodeN; i++) {
+    const [bx, by, bz] = spherePoint(i, nodeN);
+    const x = bx + 0.16 * Math.sin(t * 0.6 + i * 1.7);
+    const y = by + 0.16 * Math.sin(t * 0.5 + i * 2.9);
+    const z = bz + 0.16 * Math.sin(t * 0.7 + i * 4.3);
+    const len = Math.max(1e-6, Math.hypot(x, y, z));
+    pts.push([x / len, y / len, z / len]);
+  }
+  const projected = pts.map(([x, y, z]) => project(x, y, z));
+  const lines = [];
+  for (let i = 0; i < nodeN; i++) {
+    for (let j = i + 1; j < nodeN; j++) {
+      const d = Math.hypot(
+        pts[i][0] - pts[j][0],
+        pts[i][1] - pts[j][1],
+        pts[i][2] - pts[j][2]
+      );
+      if (d >= threshold) continue;
+      const [x1, y1, z1] = projected[i];
+      const [x2, y2, z2] = projected[j];
+      const depth = ((z1 + z2) / 2 + 1) / 2;
+      lines.push({
+        x1,
+        y1,
+        x2,
+        y2,
+        w: Math.max(0.6, 0.5 * rs),
+        // Fade with distance so an edge appears and dissolves rather than
+        // popping in when two nodes drift across the threshold.
+        a: (1 - d / threshold) * (0.14 + 0.34 * depth) * edgeGain
+      });
+    }
+  }
+  const dots = [];
+  for (let i = 0; i < nodeN; i++) {
+    const [x, y, z] = projected[i];
+    const depth = (z + 1) / 2;
+    dots.push({ x, y, z, r: (0.7 + 1.1 * depth) * rs, a: 0.35 + 0.5 * depth });
+  }
+  for (let s = 0; s < signals; s++) {
+    const cycle = t * 0.5 + s * 7.31;
+    const tick = Math.floor(cycle);
+    const p = cycle - tick;
+    const from = Math.floor(hash(tick, s * 3.1 + 1.7) * nodeN);
+    const to = Math.floor(hash(tick, s * 5.7 + 4.2) * nodeN);
+    if (from === to || !pts[from] || !pts[to]) continue;
+    const x = pts[from][0] + (pts[to][0] - pts[from][0]) * p;
+    const y = pts[from][1] + (pts[to][1] - pts[from][1]) * p;
+    const z = pts[from][2] + (pts[to][2] - pts[from][2]) * p;
+    const len = Math.max(1e-6, Math.hypot(x, y, z));
+    const [px, py, pz] = project(x / len, y / len, z / len);
+    const depth = (pz + 1) / 2;
+    dots.push({
+      x: px,
+      y: py,
+      z: pz,
+      r: (1.1 + 1.2 * depth) * rs,
+      // Fade in and out at the ends of the run so a signal does not blink.
+      a: Math.sin(p * Math.PI) * (0.6 + 0.4 * depth)
+    });
+  }
+  paintLines(ctx, lines);
+  paintDots(ctx, dots);
+};
+var ORB_RENDERERS = { orbit, globe, mesh };
+export {
+  ORB_PX,
+  ORB_RENDERERS,
+  orbTuning
+};

package/dist/components/toast/index.js

@@ -0,0 +1,29 @@
+// src/components/toast/index.ts
+import {
+  ToastProvider,
+  ToastViewport,
+  ToastRoot,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction,
+  ToastContent,
+  toast,
+  useToast,
+  useToastManager
+} from "./toast.js";
+import { toastMeta } from "./toast.meta.js";
+export {
+  ToastAction,
+  ToastClose,
+  ToastContent,
+  ToastDescription,
+  ToastProvider,
+  ToastRoot,
+  ToastTitle,
+  ToastViewport,
+  toast,
+  toastMeta,
+  useToast,
+  useToastManager
+};