@shapesos/clay 0.14.0 → 0.16.0

package/dist/chat.js

@@ -5,14 +5,14 @@ import {
   copyMessageText,
   useChatContext,
   useCopyToClipboard
-} from "./chunk-3THOTQO3.js";
-import "./chunk-MDAWYZBI.js";
+} from "./chunk-GAZRZZRF.js";
+import "./chunk-UZKNSAAD.js";
 import "./chunk-NMKKU2UG.js";
-import "./chunk-XFJ6XMJZ.js";
+import "./chunk-2YCBDSPK.js";
 import "./chunk-PYDVANWI.js";
 import "./chunk-LXYCT4YO.js";
 import "./chunk-OLJIJYB5.js";
-import "./chunk-YZB6YXKK.js";
+import "./chunk-U3IXCSV6.js";
 import "./chunk-C77QMQNT.js";
 import "./chunk-UXT2H3FM.js";
 import "./chunk-JF3P66JF.js";

package/dist/{chunk-XFJ6XMJZ.js → chunk-2YCBDSPK.js}

@@ -8,7 +8,7 @@ import {
   BarChart,
   LineChart,
   PieChart
-} from "./chunk-YZB6YXKK.js";
+} from "./chunk-U3IXCSV6.js";
 import {
   Table,
   TableBody,
@@ -1001,4 +1001,4 @@ export {
    * See the LICENSE file in the root directory of this source tree.
    *)
 */
-//# sourceMappingURL=chunk-XFJ6XMJZ.js.map
+//# sourceMappingURL=chunk-2YCBDSPK.js.map

package/dist/{chunk-BR5S37SC.js → chunk-4VE6ZXXW.js}

@@ -96,43 +96,148 @@ var PromptInputSubmit = ({
 
 // src/components/ai-elements/mouse-grid/mouse-grid.tsx
 import { useEffect, useRef } from "react";
+
+// src/utils/prefers-reduced-motion.ts
+function prefersReducedMotion() {
+  return typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : false;
+}
+
+// src/components/ai-elements/mouse-grid/mouse-grid.tsx
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-function MouseGrid({ glowColor } = {}) {
+function MouseGrid({ glowColor, colorCycleMs = 4e3, autoDrift = false } = {}) {
   const layerRef = useRef(null);
+  const glowRef = useRef(null);
   useEffect(() => {
+    const driftEnabled = autoDrift && !prefersReducedMotion();
     let raf = 0;
+    let driftRaf = 0;
+    let lastDriftTime = 0;
     let clientX = 0;
     let clientY = 0;
+    let pointerInside = false;
+    let centerX = 0;
+    let centerY = 0;
+    let hasCenter = false;
+    function setCenter(x, y) {
+      const layer = layerRef.current;
+      if (!layer) {
+        return;
+      }
+      centerX = x;
+      centerY = y;
+      hasCenter = true;
+      layer.style.setProperty("--vibe-mx", `${x}px`);
+      layer.style.setProperty("--vibe-my", `${y}px`);
+    }
     function flush() {
       raf = 0;
       const layer = layerRef.current;
       if (!layer) {
         return;
       }
+      if (driftEnabled && !pointerInside) {
+        return;
+      }
       const rect = layer.getBoundingClientRect();
-      layer.style.setProperty("--vibe-mx", `${clientX - rect.left}px`);
-      layer.style.setProperty("--vibe-my", `${clientY - rect.top}px`);
+      setCenter(clientX - rect.left, clientY - rect.top);
     }
     function onMove(event) {
       clientX = event.clientX;
       clientY = event.clientY;
+      const layer = layerRef.current;
+      if (layer) {
+        const rect = layer.getBoundingClientRect();
+        pointerInside = clientX >= rect.left && clientX <= rect.right && clientY >= rect.top && clientY <= rect.bottom;
+      }
+      if (pointerInside) {
+        stopDrift();
+      } else {
+        startDrift();
+      }
       if (raf) {
         return;
       }
       raf = requestAnimationFrame(flush);
     }
+    function onPointerLeave() {
+      pointerInside = false;
+      startDrift();
+    }
+    function drift(time) {
+      const delta = lastDriftTime ? time - lastDriftTime : 16.67;
+      lastDriftTime = time;
+      driftRaf = requestAnimationFrame(drift);
+      const layer = layerRef.current;
+      if (!layer) {
+        return;
+      }
+      const { width, height } = layer.getBoundingClientRect();
+      if (!hasCenter) {
+        centerX = width / 2;
+        centerY = height / 2;
+      }
+      const targetX = width * (0.5 + 0.32 * Math.sin(time * 37e-5) + 0.12 * Math.sin(time * 91e-5));
+      const targetY = height * (0.5 + 0.32 * Math.cos(time * 41e-5) + 0.12 * Math.sin(time * 11e-4));
+      const alpha = 1 - Math.exp(-25e-4 * delta);
+      setCenter(centerX + (targetX - centerX) * alpha, centerY + (targetY - centerY) * alpha);
+    }
+    function startDrift() {
+      if (!driftEnabled || driftRaf) {
+        return;
+      }
+      lastDriftTime = 0;
+      driftRaf = requestAnimationFrame(drift);
+    }
+    function stopDrift() {
+      if (driftRaf) {
+        cancelAnimationFrame(driftRaf);
+        driftRaf = 0;
+      }
+    }
     window.addEventListener("mousemove", onMove, { passive: true });
+    document.documentElement.addEventListener("mouseleave", onPointerLeave);
+    startDrift();
     return () => {
       window.removeEventListener("mousemove", onMove);
+      document.documentElement.removeEventListener("mouseleave", onPointerLeave);
       if (raf) {
         cancelAnimationFrame(raf);
       }
+      stopDrift();
     };
-  }, []);
-  const glowStyle = glowColor ? { "--vibe-glow-color": glowColor } : void 0;
+  }, [autoDrift]);
+  const colorList = Array.isArray(glowColor) ? glowColor : glowColor != null ? [glowColor] : [];
+  const glowColorsKey = JSON.stringify(colorList);
+  useEffect(() => {
+    const glow = glowRef.current;
+    if (!glow) {
+      return;
+    }
+    const colors = JSON.parse(glowColorsKey).filter(Boolean);
+    const staticColor = colors[0];
+    if (staticColor) {
+      glow.style.setProperty("--vibe-glow-color", staticColor);
+    }
+    const clearColor = () => glow.style.removeProperty("--vibe-glow-color");
+    if (colors.length < 2 || prefersReducedMotion()) {
+      return staticColor ? clearColor : void 0;
+    }
+    let index = 0;
+    const raf = requestAnimationFrame(() => glow.style.setProperty("--vibe-glow-cycle", `${colorCycleMs}ms`));
+    const timer = setInterval(() => {
+      index = (index + 1) % colors.length;
+      glow.style.setProperty("--vibe-glow-color", colors[index]);
+    }, colorCycleMs);
+    return () => {
+      cancelAnimationFrame(raf);
+      clearInterval(timer);
+      glow.style.removeProperty("--vibe-glow-cycle");
+      clearColor();
+    };
+  }, [glowColorsKey, colorCycleMs]);
   return /* @__PURE__ */ jsxs("div", { ref: layerRef, "aria-hidden": "true", className: "vibe-mouse-grid-layer", children: [
     /* @__PURE__ */ jsx2("div", { className: "vibe-mouse-grid" }),
-    /* @__PURE__ */ jsx2("div", { className: "vibe-mouse-glow", style: glowStyle })
+    /* @__PURE__ */ jsx2("div", { ref: glowRef, className: "vibe-mouse-glow" })
   ] });
 }
 
@@ -148,7 +253,7 @@ var Suggestion = ({ suggestion, onClick, className, children, ...props }) => {
       type: "button",
       onClick: handleClick,
       className: cn(
-        "cursor-pointer whitespace-nowrap rounded-full border border-brown-30 bg-white px-4 py-2 text-sm text-brown-100 transition-colors hover:bg-brown-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brown-40",
+        "cursor-pointer whitespace-nowrap rounded-[12px] border border-brown-30 bg-white px-4 py-2 text-sm text-brown-100 transition-colors hover:bg-brown-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brown-40",
         className
       ),
       ...props,
@@ -168,4 +273,4 @@ export {
   Suggestions,
   Suggestion
 };
-//# sourceMappingURL=chunk-BR5S37SC.js.map
+//# sourceMappingURL=chunk-4VE6ZXXW.js.map

package/dist/chunk-4VE6ZXXW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ai-elements/prompt-input/prompt-input.tsx","../src/components/ai-elements/prompt-input/types.ts","../src/components/ai-elements/mouse-grid/mouse-grid.tsx","../src/utils/prefers-reduced-motion.ts","../src/components/ai-elements/suggestion/suggestion.tsx"],"sourcesContent":["import { forwardRef, useCallback } from \"react\";\nimport type { FormEventHandler, KeyboardEventHandler, MouseEventHandler } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/button/button\";\nimport { BUTTON_INTENT, BUTTON_SIZE } from \"@/components/button/constants\";\nimport { TextArea } from \"@/components/text-area/text-area\";\nimport { CHAT_STATUS } from \"./types\";\nimport type {\n  PromptInputFooterProps,\n  PromptInputProps,\n  PromptInputSubmitProps,\n  PromptInputTextareaProps,\n  PromptInputToolsProps,\n} from \"./types\";\n\n/* ------------------------------------------------------------------------------------------------\n * Originally vendored from `@vercel/ai-elements`'s `prompt-input` registry entry. Slimmed hard to\n * the creation-surface essentials a consumer composes into a prompt-launcher hero: `PromptInput`\n * (form wrapper), `PromptInputTextarea`, `PromptInputFooter`, `PromptInputTools`, `PromptInputSubmit`.\n *\n * Everything else from the upstream entry is intentionally dropped: the action menu\n * (`PromptInputActionMenu*`), attachment / screenshot actions, the attachments strip, the\n * provider/controller contexts, and the `Select` / `HoverCard` / `Command` / `Tab` families. That\n * also sheds the upstream `nanoid` (id-per-attachment) dependency.\n *\n * Rewiring to clay's single-sourced primitives let this primitive ship with ZERO new runtime\n * dependencies — diverging from the original shared spec, which assumed the kept set would still\n * lean on `@base-ui/react`, `ai`, and `lucide-react`:\n *   - upstream `InputGroupButton` (submit) → clay `Button` (filled, `type=\"button\"`, consumer label).\n *   - upstream `InputGroupTextarea`          → clay `TextArea` (auto-resize, transparent chrome).\n *   - `lucide-react` icons                   → clay's already-bundled `@tabler/icons-react`.\n *   - `ai`'s `ChatStatus`                     → a local ready/error status (see `./types`).\n *\n * Because clay's `Button` always renders `type=\"button\"`, native form submit isn't available;\n * both the Enter-key handler and the submit button trigger `form.requestSubmit()` explicitly. And\n * because clay's `TextArea` doesn't forward a `name` attribute, `PromptInput` reads the textarea's\n * value straight off the DOM at submit time rather than via `FormData` — keeping the form wrapper\n * decoupled from whoever controls the textarea's value.\n *\n * Types live in `./types`.\n * ------------------------------------------------------------------------------------------------ */\n\n/**\n * Form wrapper for a prompt composer. Renders a bordered, rounded surface; stacks its children\n * (textarea + footer) vertically. Reads the nested textarea's value on submit and forwards it to\n * `onSubmit`. Empty / whitespace-only submissions, and all submissions while `disabled`, are\n * ignored.\n */\nexport const PromptInput = ({ className, onSubmit, disabled, children, ...props }: PromptInputProps) => {\n  const handleSubmit: FormEventHandler<HTMLFormElement> = useCallback(\n    (event) => {\n      event.preventDefault();\n      if (disabled) {\n        return;\n      }\n      const textarea = event.currentTarget.querySelector(\"textarea\");\n      const text = textarea?.value ?? \"\";\n      if (!text.trim()) {\n        return;\n      }\n      onSubmit({ text }, event);\n    },\n    [disabled, onSubmit]\n  );\n\n  return (\n    <form\n      className={cn(\n        \"flex w-full flex-col overflow-hidden rounded-xl border bg-background shadow-lg shadow-foreground/5\",\n        className\n      )}\n      onSubmit={handleSubmit}\n      {...props}\n    >\n      {children}\n    </form>\n  );\n};\n\n/**\n * Auto-resizing textarea for the prompt composer. Wraps clay's `TextArea` and adds Enter-to-submit\n * (Shift+Enter inserts a newline; submission is suppressed while an IME composition is active). The\n * consumer's `onKeyDown` runs first and can `preventDefault()` to opt out of the built-in Enter\n * handling.\n *\n * Horizontal padding lives on the textarea itself (not the wrapper) so its overflow scrollbar sits\n * flush against the wrapper's right edge; the wrapper only owns the vertical padding.\n */\nexport const PromptInputTextarea = forwardRef<HTMLTextAreaElement, PromptInputTextareaProps>(\n  function PromptInputTextarea({ className, onKeyDown, placeholder = \"What would you like to know?\", ...props }, ref) {\n    const handleKeyDown: KeyboardEventHandler<HTMLTextAreaElement> = useCallback(\n      (event) => {\n        onKeyDown?.(event);\n        if (event.defaultPrevented) {\n          return;\n        }\n        if (event.key === \"Enter\" && !event.shiftKey && !event.nativeEvent.isComposing) {\n          event.preventDefault();\n          event.currentTarget.form?.requestSubmit();\n        }\n      },\n      [onKeyDown]\n    );\n\n    return (\n      <div className={cn(\"py-3\", className)}>\n        <TextArea ref={ref} className=\"px-4\" onKeyDown={handleKeyDown} placeholder={placeholder} {...props} />\n      </div>\n    );\n  }\n);\n\n/**\n * Footer row beneath the textarea — left tools and the right-aligned submit button. Horizontal\n * padding matches {@link PromptInputTextarea}'s (`px-4`) so the tools/submit align with the\n * textarea's text edges.\n */\nexport const PromptInputFooter = ({ className, ...props }: PromptInputFooterProps) => (\n  <div className={cn(\"flex items-center justify-between gap-1 px-4 pb-3\", className)} {...props} />\n);\n\n/** Left-aligned cluster inside {@link PromptInputFooter} (e.g. the submit hint). */\nexport const PromptInputTools = ({ className, ...props }: PromptInputToolsProps) => (\n  <div className={cn(\"flex min-w-0 items-center gap-1\", className)} {...props} />\n);\n\n/**\n * Submit button for the prompt composer — a filled clay `Button` whose text is the consumer's\n * `label` (pass a localized string for i18n). Always submits the form via `form.requestSubmit()` on\n * click (clay buttons render `type=\"button\"`); the consumer disables it while a generation is in\n * flight. `status` drives the color: `error` renders the error (red) intent, otherwise primary.\n */\nexport const PromptInputSubmit = ({\n  label = \"Submit\",\n  status = CHAT_STATUS.READY,\n  disabled,\n  className,\n}: PromptInputSubmitProps) => {\n  const handleClick = useCallback<MouseEventHandler<HTMLButtonElement>>((event) => {\n    event.currentTarget.form?.requestSubmit();\n  }, []);\n\n  return (\n    <Button\n      intent={status === CHAT_STATUS.ERROR ? BUTTON_INTENT.ERROR : BUTTON_INTENT.PRIMARY}\n      size={BUTTON_SIZE.XS}\n      className={className}\n      disabled={disabled}\n      onClick={handleClick}\n    >\n      {label}\n    </Button>\n  );\n};\n","import type { FormEvent, HTMLAttributes } from \"react\";\n\nimport type { TextAreaProps } from \"@/components/text-area/types\";\n\n/**\n * Submission status the submit button reflects. The composer has no cancellation and no\n * intermediate \"generating\" state of its own — the consumer disables the button while busy — so\n * only the idle and error states are modeled here.\n */\nexport const CHAT_STATUS = {\n  /** Idle / ready to submit. */\n  READY: \"ready\",\n  /** The last submission errored — the button shows a retry affordance. */\n  ERROR: \"error\",\n} as const;\n\n/** Submission status the submit button reflects. */\nexport type ChatStatus = (typeof CHAT_STATUS)[keyof typeof CHAT_STATUS];\n\n/** Payload emitted by {@link PromptInput} on submit. v1 carries only text (attachments are cut). */\nexport interface PromptInputMessage {\n  /** The current textarea value at submit time. */\n  text: string;\n}\n\n/** Props for the {@link PromptInput} form wrapper. */\nexport type PromptInputProps = Omit<HTMLAttributes<HTMLFormElement>, \"onSubmit\"> & {\n  /**\n   * Fired when the form is submitted (Enter key or the submit button) with non-empty text.\n   * Receives the captured message and the underlying form event.\n   */\n  onSubmit: (message: PromptInputMessage, event: FormEvent<HTMLFormElement>) => void;\n  /**\n   * Blocks submission across every trigger (Enter key, submit button, programmatic) when `true` —\n   * e.g. while a generation is in flight. The single gate that keeps the Enter path in sync with a\n   * disabled submit button. @default false\n   */\n  disabled?: boolean;\n};\n\n/** Props for {@link PromptInputTextarea} — clay `TextArea` props; `className` styles the wrapper. */\nexport type PromptInputTextareaProps = TextAreaProps;\n\n/** Props for {@link PromptInputFooter}. */\nexport type PromptInputFooterProps = HTMLAttributes<HTMLDivElement>;\n\n/** Props for {@link PromptInputTools}. */\nexport type PromptInputToolsProps = HTMLAttributes<HTMLDivElement>;\n\n/** Props for {@link PromptInputSubmit}. */\nexport interface PromptInputSubmitProps {\n  /** Button label — pass a localized string (i18n) from the consumer. @default \"Submit\" */\n  label?: string;\n  /** Drives the button color: `error` renders the red error intent, otherwise primary. @default \"ready\" */\n  status?: ChatStatus;\n  /** Whether the button is non-interactive (e.g. empty input or a generation in flight). */\n  disabled?: boolean;\n  /** Additional CSS class name. */\n  className?: string;\n}\n","import { useEffect, useRef } from \"react\";\n\nimport { prefersReducedMotion } from \"@/utils/prefers-reduced-motion\";\n\nimport type { MouseGridProps } from \"./types\";\n\n/**\n * Absolutely-positioned grid backdrop, confined to its nearest positioned ancestor (give the\n * parent `position: relative` + `overflow: hidden` to clip it). The grid is revealed only near the\n * cursor via a radial mask whose center is driven by the `--vibe-mx` / `--vibe-my` CSS vars,\n * updated by a rAF-throttled `mousemove` listener. Renders behind all content (`z-0`) and never\n * blocks pointer events.\n *\n * Cursor coordinates are translated from viewport space (`clientX` / `clientY`) into layer-local\n * space (minus the layer's `getBoundingClientRect()` origin) and written onto the layer element\n * itself — not the document root — so the glow tracks correctly even though the layer no longer\n * fills the viewport. The rect read happens inside the rAF so it batches with paint.\n *\n * Pure `useEffect` + `requestAnimationFrame`, no animation library. The `.vibe-mouse-grid-layer` /\n * `.vibe-mouse-grid` / `.vibe-mouse-glow` styles ship in `@shapesos/clay/blocks/styles.css`.\n *\n * With `autoDrift`, a second rAF loop wanders the glow center along a slow sum-of-sines path\n * whenever the cursor is outside the layer; it yields the moment the cursor re-enters (the\n * mousemove handler owns the vars then) and resumes on exit. Suppressed under `prefers-reduced-motion`.\n *\n * When `glowColor` is an array of 2+ colors, a `setInterval` cycles the `--vibe-glow-color` var\n * through the list every `colorCycleMs`; the `.vibe-mouse-glow` `background-color` transition\n * (duration = `--vibe-glow-cycle`) crossfades between them. Also suppressed under\n * `prefers-reduced-motion` (first color applied flat).\n */\nexport function MouseGrid({ glowColor, colorCycleMs = 4000, autoDrift = false }: MouseGridProps = {}) {\n  const layerRef = useRef<HTMLDivElement>(null);\n  const glowRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    // Drift only runs when `autoDrift` is on AND motion isn't reduced. When it's off, the cursor is\n    // tracked normally even outside the layer — so reduced-motion users don't get a frozen glow.\n    const driftEnabled = autoDrift && !prefersReducedMotion();\n\n    let raf = 0;\n    let driftRaf = 0;\n    let lastDriftTime = 0;\n    let clientX = 0;\n    let clientY = 0;\n    let pointerInside = false;\n    // Last applied glow center (layer-local px). Tracked across both modes so drift can resume from\n    // wherever the cursor left off instead of snapping to the wander path's current value.\n    let centerX = 0;\n    let centerY = 0;\n    let hasCenter = false;\n\n    function setCenter(x: number, y: number) {\n      const layer = layerRef.current;\n      if (!layer) {\n        return;\n      }\n      centerX = x;\n      centerY = y;\n      hasCenter = true;\n      layer.style.setProperty(\"--vibe-mx\", `${x}px`);\n      layer.style.setProperty(\"--vibe-my\", `${y}px`);\n    }\n    function flush() {\n      raf = 0;\n      const layer = layerRef.current;\n      if (!layer) {\n        return;\n      }\n      // While drift is active and the cursor is outside the layer, the drift loop owns the center —\n      // don't let the (out-of-bounds) cursor position fight it. Otherwise always track the cursor.\n      if (driftEnabled && !pointerInside) {\n        return;\n      }\n      const rect = layer.getBoundingClientRect();\n      setCenter(clientX - rect.left, clientY - rect.top);\n    }\n    function onMove(event: MouseEvent) {\n      clientX = event.clientX;\n      clientY = event.clientY;\n      const layer = layerRef.current;\n      if (layer) {\n        const rect = layer.getBoundingClientRect();\n        pointerInside =\n          clientX >= rect.left && clientX <= rect.right && clientY >= rect.top && clientY <= rect.bottom;\n      }\n      // Run the drift loop only when it has work to do (cursor outside) — pause it while inside.\n      if (pointerInside) {\n        stopDrift();\n      } else {\n        startDrift();\n      }\n      if (raf) {\n        return;\n      }\n      raf = requestAnimationFrame(flush);\n    }\n    // The cursor can leave the layer without another `mousemove` ever firing — e.g. when the layer\n    // fills the viewport (or Storybook's preview iframe) and the pointer exits it entirely. Reset\n    // the flag on document exit so drift resumes instead of freezing at the last in-bounds frame.\n    function onPointerLeave() {\n      pointerInside = false;\n      startDrift();\n    }\n    function drift(time: number) {\n      // Frame-rate-independent ease: convert elapsed ms into a per-frame factor so the glow reaches\n      // the wander target in the same wall-clock time at 60 Hz and 120 Hz (a fixed factor would be\n      // ~2× snappier on high-refresh displays). First frame falls back to a ~60 Hz delta.\n      const delta = lastDriftTime ? time - lastDriftTime : 16.67;\n      lastDriftTime = time;\n      driftRaf = requestAnimationFrame(drift);\n      const layer = layerRef.current;\n      if (!layer) {\n        return;\n      }\n      const { width, height } = layer.getBoundingClientRect();\n      if (!hasCenter) {\n        centerX = width / 2;\n        centerY = height / 2;\n      }\n      // Organic wander: two sines per axis, slow + offset, kept inside ~[6%, 94%] of the bounds.\n      const targetX = width * (0.5 + 0.32 * Math.sin(time * 0.00037) + 0.12 * Math.sin(time * 0.00091));\n      const targetY = height * (0.5 + 0.32 * Math.cos(time * 0.00041) + 0.12 * Math.sin(time * 0.0011));\n      // ~0.04 per frame at 60 Hz, but resolution-stable. Lets drift resume continuously from the\n      // cursor's exit point with no jump; the target moves far slower, so amplitude is intact.\n      const alpha = 1 - Math.exp(-0.0025 * delta);\n      setCenter(centerX + (targetX - centerX) * alpha, centerY + (targetY - centerY) * alpha);\n    }\n    function startDrift() {\n      if (!driftEnabled || driftRaf) {\n        return;\n      }\n      lastDriftTime = 0;\n      driftRaf = requestAnimationFrame(drift);\n    }\n    function stopDrift() {\n      if (driftRaf) {\n        cancelAnimationFrame(driftRaf);\n        driftRaf = 0;\n      }\n    }\n\n    window.addEventListener(\"mousemove\", onMove, { passive: true });\n    document.documentElement.addEventListener(\"mouseleave\", onPointerLeave);\n    // No pointer has been seen yet → idle, so start drifting immediately when enabled.\n    startDrift();\n    return () => {\n      window.removeEventListener(\"mousemove\", onMove);\n      document.documentElement.removeEventListener(\"mouseleave\", onPointerLeave);\n      if (raf) {\n        cancelAnimationFrame(raf);\n      }\n      stopDrift();\n    };\n  }, [autoDrift]);\n\n  // Normalize the single `glowColor` prop (a CSS color, a list of colors, or nothing) to an array,\n  // then serialize it: an inline array literal is a fresh ref each render, so keying the effect on\n  // the serialized content means only an actual color change re-runs it — not unrelated re-renders.\n  const colorList = Array.isArray(glowColor) ? glowColor : glowColor != null ? [glowColor] : [];\n  const glowColorsKey = JSON.stringify(colorList);\n\n  // Single owner of `--vibe-glow-color`: applies the first/only color flat, and crossfades through\n  // the list when there are 2+. Driving it from one effect (rather than a cycle vs. a React inline\n  // style) lets teardown reliably remove the var so a stale cycled color can't stick when cycling\n  // stops — it reverts to the CSS default instead.\n  useEffect(() => {\n    const glow = glowRef.current;\n    if (!glow) {\n      return;\n    }\n    const colors = (JSON.parse(glowColorsKey) as string[]).filter(Boolean);\n    const staticColor = colors[0];\n    if (staticColor) {\n      // Apply the first/static color flat (cycle duration still 0ms) so it doesn't fade in.\n      glow.style.setProperty(\"--vibe-glow-color\", staticColor);\n    }\n    const clearColor = () => glow.style.removeProperty(\"--vibe-glow-color\");\n    if (colors.length < 2 || prefersReducedMotion()) {\n      return staticColor ? clearColor : undefined;\n    }\n    // Enable the crossfade next frame, then advance the color on each interval. The transition\n    // duration equals the interval, so the blob is always smoothly in transit between colors.\n    let index = 0;\n    const raf = requestAnimationFrame(() => glow.style.setProperty(\"--vibe-glow-cycle\", `${colorCycleMs}ms`));\n    const timer = setInterval(() => {\n      index = (index + 1) % colors.length;\n      glow.style.setProperty(\"--vibe-glow-color\", colors[index]);\n    }, colorCycleMs);\n    return () => {\n      cancelAnimationFrame(raf);\n      clearInterval(timer);\n      glow.style.removeProperty(\"--vibe-glow-cycle\");\n      clearColor();\n    };\n  }, [glowColorsKey, colorCycleMs]);\n\n  return (\n    <div ref={layerRef} aria-hidden=\"true\" className=\"vibe-mouse-grid-layer\">\n      <div className=\"vibe-mouse-grid\" />\n      <div ref={glowRef} className=\"vibe-mouse-glow\" />\n    </div>\n  );\n}\n","/**\n * Whether the user has requested reduced motion via the OS / browser\n * (`(prefers-reduced-motion: reduce)`). SSR-safe — use it to gate any optional animation so it\n * doesn't run for users who've opted out.\n *\n * @returns `true` when reduced motion is requested; `false` otherwise (including non-browser /\n *   `matchMedia`-less environments, where there's no preference to honor).\n */\nexport function prefersReducedMotion(): boolean {\n  return typeof window !== \"undefined\" && typeof window.matchMedia === \"function\"\n    ? window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n    : false;\n}\n","import { useCallback } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\nimport type { SuggestionProps, SuggestionsProps } from \"./types\";\n\n/* ------------------------------------------------------------------------------------------------\n * Vendored + slimmed from `@vercel/ai-elements`'s `suggestion` registry entry. Upstream wraps the\n * pills in a shadcn `ScrollArea` and renders each as a shadcn `Button variant=\"outline\"`; clay has\n * neither, so this ships a dependency-free row (`flex flex-wrap`) of Tailwind-styled pills using\n * clay's named color tokens. Engine note: this is vendored ai-elements chrome, so it's Tailwind —\n * clay's `Button` is styled-components with fixed radii and can't produce this 12px pill.\n * ------------------------------------------------------------------------------------------------ */\n\n/**\n * A centered, wrapping row of {@link Suggestion} pills — e.g. starter prompts beneath a composer.\n * Compose `Suggestion` children inside.\n */\nexport const Suggestions = ({ className, ...props }: SuggestionsProps) => (\n  <div className={cn(\"flex flex-wrap items-center justify-center gap-3\", className)} {...props} />\n);\n\n/**\n * A single tappable suggestion pill. Renders `children` if provided, otherwise the `suggestion`\n * text, and calls `onClick(suggestion)` when clicked.\n */\nexport const Suggestion = ({ suggestion, onClick, className, children, ...props }: SuggestionProps) => {\n  const handleClick = useCallback(() => onClick?.(suggestion), [onClick, suggestion]);\n\n  return (\n    <button\n      type=\"button\"\n      onClick={handleClick}\n      className={cn(\n        \"cursor-pointer whitespace-nowrap rounded-[12px] border border-brown-30 bg-white px-4 py-2 text-sm text-brown-100 transition-colors hover:bg-brown-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brown-40\",\n        className\n      )}\n      {...props}\n    >\n      {children ?? suggestion}\n    </button>\n  );\n};\n"],"mappings":"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","names":["PromptInputTextarea","jsx","useCallback","jsx","useCallback"]}

package/dist/{chunk-3THOTQO3.js → chunk-GAZRZZRF.js}

@@ -1,13 +1,13 @@
 import {
   Block,
   BlockServices
-} from "./chunk-MDAWYZBI.js";
+} from "./chunk-UZKNSAAD.js";
 import {
   IconCheck,
   IconCopy,
   IconThumbDown,
   IconThumbUp
-} from "./chunk-XFJ6XMJZ.js";
+} from "./chunk-2YCBDSPK.js";
 import {
   IconButton
 } from "./chunk-PYDVANWI.js";
@@ -220,4 +220,4 @@ export {
   MESSAGE_ROLE,
   ChatMessage
 };
-//# sourceMappingURL=chunk-3THOTQO3.js.map
+//# sourceMappingURL=chunk-GAZRZZRF.js.map

package/dist/{chunk-YZB6YXKK.js → chunk-U3IXCSV6.js}

@@ -98,6 +98,11 @@ var CHART_PALETTE = [
 ];
 var OTHERS_SLICE_COLOR = colors["brown-60"];
 var DEFAULT_OTHERS_CATEGORY_LABELS = ["others", "other"];
+var NONE_CATEGORY_VALUES = ["", "(none)", "none", "null", "undefined", "n/a", "-"];
+function isNoneCategory(value) {
+  if (value === null || value === void 0) return true;
+  return NONE_CATEGORY_VALUES.includes(String(value).trim().toLowerCase());
+}
 function isOthersCategory(value, labels) {
   if (value === null || value === void 0) return false;
   if (labels.length === 0) return false;
@@ -171,6 +176,13 @@ function truncateLabel(value, maxChars) {
   if (s.length <= maxChars) return s;
   return s.slice(0, Math.max(1, maxChars - 1)).trimEnd() + "\u2026";
 }
+var compactNumberFormat = new Intl.NumberFormat("en-US", { notation: "compact", maximumFractionDigits: 1 });
+function compactNumberTickFormatter(value) {
+  if (value === null || value === void 0) return "";
+  const n = typeof value === "number" ? value : Number(value);
+  if (!Number.isFinite(n)) return String(value);
+  return compactNumberFormat.format(n);
+}
 function evenlyDistributedVisibleIndices(n, target) {
   if (n <= target) {
     return new Set(Array.from({ length: n }, (_, i) => i));
@@ -196,6 +208,11 @@ function defaultLineChartTickFormatter(categoryCount, visibleIndices) {
 
 // src/components/chart/bar-chart/bar-chart.tsx
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var STACK_TOTAL_KEY = "__stackTotal";
+var VALUE_LABEL_HEADROOM = 20;
+function sumSeries(row, keys) {
+  return keys.reduce((sum, key) => sum + (Number(row[key]) || 0), 0);
+}
 function BarChart({
   data,
   xKey,
@@ -221,15 +238,24 @@ function BarChart({
     [data, seriesKeys]
   );
   const resolvedShowLegend = showLegend ?? series.length > 1;
-  const resolvedShowValueLabels = showValueLabels ?? (!stacked && series.length === 1);
+  const resolvedShowValueLabels = showValueLabels ?? true;
+  const plotData = useMemo(() => {
+    if (!stacked || !resolvedShowValueLabels) return coercedData;
+    return coercedData.map((row) => ({ ...row, [STACK_TOTAL_KEY]: sumSeries(row, seriesKeys) }));
+  }, [coercedData, stacked, resolvedShowValueLabels, seriesKeys]);
   const resolvedAngle = xAxisAngle ?? (coercedData.length >= 8 ? -30 : 0);
   const resolvedTickFormatter = useMemo(
     () => xAxisTickFormatter ?? defaultBarTickFormatter(coercedData.length),
     [xAxisTickFormatter, coercedData.length]
   );
   const angledLabelPad = resolvedAngle === 0 ? 0 : Math.min(Math.abs(resolvedAngle) * 0.7, 40);
-  const chartMargin = { ...CHART_MARGIN, bottom: CHART_MARGIN.bottom + angledLabelPad };
-  return /* @__PURE__ */ jsx4(ChartContainer, { height, width, className, children: /* @__PURE__ */ jsxs3(RechartsBarChart, { data: coercedData, margin: chartMargin, barCategoryGap: "22%", children: [
+  const valueLabelHeadroom = resolvedShowValueLabels ? VALUE_LABEL_HEADROOM : 0;
+  const chartMargin = {
+    ...CHART_MARGIN,
+    top: CHART_MARGIN.top + valueLabelHeadroom,
+    bottom: CHART_MARGIN.bottom + angledLabelPad
+  };
+  return /* @__PURE__ */ jsx4(ChartContainer, { height, width, className, children: /* @__PURE__ */ jsxs3(RechartsBarChart, { data: plotData, margin: chartMargin, barCategoryGap: "22%", children: [
     showGrid ? /* @__PURE__ */ jsx4(CartesianGrid, { ...CHART_GRID_PROPS }) : null,
     showXAxis ? /* @__PURE__ */ jsx4(
       XAxis,
@@ -244,7 +270,7 @@ function BarChart({
         tickFormatter: resolvedTickFormatter
       }
     ) : null,
-    showYAxis ? /* @__PURE__ */ jsx4(YAxis, { ...CHART_AXIS_PROPS, width: 40 }) : null,
+    showYAxis ? /* @__PURE__ */ jsx4(YAxis, { ...CHART_AXIS_PROPS, width: 40, tickFormatter: compactNumberTickFormatter }) : null,
     showTooltip ? /* @__PURE__ */ jsx4(Tooltip, { cursor: { fill: BAR_TOOLTIP_CURSOR_FILL }, content: /* @__PURE__ */ jsx4(ChartTooltipContent, {}) }) : null,
     resolvedShowLegend ? /* @__PURE__ */ jsx4(
       Legend,
@@ -256,18 +282,23 @@ function BarChart({
         content: /* @__PURE__ */ jsx4(ChartLegendContent, { iconType: "square" })
       }
     ) : null,
-    series.map((s, i) => /* @__PURE__ */ jsx4(
-      Bar,
-      {
-        dataKey: s.key,
-        name: s.label,
-        fill: colorForSeriesIndex(i, palette),
-        stackId: stacked ? "default" : s.key,
-        radius: barRadius(stacked, i, series.length),
-        children: resolvedShowValueLabels ? /* @__PURE__ */ jsx4(LabelList, { dataKey: s.key, position: "top", style: CHART_VALUE_LABEL_STYLE }) : null
-      },
-      s.key
-    ))
+    series.map((s, i) => {
+      const isTopSegment = i === series.length - 1;
+      const labelDataKey = stacked ? STACK_TOTAL_KEY : s.key;
+      const showLabel = resolvedShowValueLabels && (!stacked || isTopSegment);
+      return /* @__PURE__ */ jsx4(
+        Bar,
+        {
+          dataKey: s.key,
+          name: s.label,
+          fill: colorForSeriesIndex(i, palette),
+          stackId: stacked ? "default" : s.key,
+          radius: barRadius(stacked, i, series.length),
+          children: showLabel ? /* @__PURE__ */ jsx4(LabelList, { dataKey: labelDataKey, position: "top", style: CHART_VALUE_LABEL_STYLE }) : null
+        },
+        s.key
+      );
+    })
   ] }) });
 }
 function barRadius(stacked, seriesIndex, seriesCount) {
@@ -340,7 +371,7 @@ function LineChart({
         tickFormatter: resolvedTickFormatter
       }
     ) : null,
-    showYAxis ? /* @__PURE__ */ jsx5(YAxis2, { ...CHART_AXIS_PROPS, width: 40 }) : null,
+    showYAxis ? /* @__PURE__ */ jsx5(YAxis2, { ...CHART_AXIS_PROPS, width: 40, tickFormatter: compactNumberTickFormatter }) : null,
     showTooltip ? /* @__PURE__ */ jsx5(Tooltip2, { content: /* @__PURE__ */ jsx5(ChartTooltipContent, {}) }) : null,
     resolvedShowLegend ? /* @__PURE__ */ jsx5(
       Legend2,
@@ -375,6 +406,42 @@ function LineChart({
 // src/components/chart/pie-chart/pie-chart.tsx
 import { useMemo as useMemo3 } from "react";
 import { Cell, Legend as Legend3, Pie, PieChart as RechartsPieChart, Tooltip as Tooltip3 } from "recharts";
+
+// src/components/chart/pie-chart/utils.ts
+function mergedOthersLabel(leftoverRows, categoryKey, othersCategoryLabels) {
+  const explicit = leftoverRows.find((row) => isOthersCategory(row[categoryKey], othersCategoryLabels));
+  if (explicit) return String(explicit[categoryKey]);
+  const fallback = othersCategoryLabels[0] ?? "Other";
+  return fallback.charAt(0).toUpperCase() + fallback.slice(1);
+}
+function buildPieSlices(data, categoryKey, valueKey, othersCategoryLabels, palette) {
+  const namedRows = [];
+  const namedColors = [];
+  const leftoverRows = [];
+  for (const row of data) {
+    const isLeftover = othersCategoryLabels.length > 0 && (isNoneCategory(row[categoryKey]) || isOthersCategory(row[categoryKey], othersCategoryLabels));
+    if (isLeftover) {
+      leftoverRows.push(row);
+    } else {
+      namedRows.push(row);
+      namedColors.push(colorForSeriesIndex(namedRows.length - 1, palette));
+    }
+  }
+  if (leftoverRows.length === 0) {
+    return { orderedData: namedRows, sliceColors: namedColors };
+  }
+  const total = leftoverRows.reduce((sum, row) => sum + (Number(row[valueKey]) || 0), 0);
+  const mergedRow = {
+    [categoryKey]: mergedOthersLabel(leftoverRows, categoryKey, othersCategoryLabels),
+    [valueKey]: total
+  };
+  return {
+    orderedData: [...namedRows, mergedRow],
+    sliceColors: [...namedColors, OTHERS_SLICE_COLOR]
+  };
+}
+
+// src/components/chart/pie-chart/pie-chart.tsx
 import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 function PieChart({
   data,
@@ -393,23 +460,7 @@ function PieChart({
 }) {
   const { orderedData, sliceColors } = useMemo3(() => {
     const coerced = coerceNumericColumns(data, [valueKey]);
-    const namedRows = [];
-    const namedColors = [];
-    const othersRows = [];
-    const othersColors = [];
-    for (const row of coerced) {
-      if (isOthersCategory(row[categoryKey], othersCategoryLabels)) {
-        othersRows.push(row);
-        othersColors.push(OTHERS_SLICE_COLOR);
-      } else {
-        namedRows.push(row);
-        namedColors.push(colorForSeriesIndex(namedRows.length - 1, palette));
-      }
-    }
-    return {
-      orderedData: [...namedRows, ...othersRows],
-      sliceColors: [...namedColors, ...othersColors]
-    };
+    return buildPieSlices(coerced, categoryKey, valueKey, othersCategoryLabels, palette);
   }, [data, valueKey, categoryKey, othersCategoryLabels, palette]);
   return /* @__PURE__ */ jsx6(ChartContainer, { height, width, className, children: /* @__PURE__ */ jsxs5(RechartsPieChart, { margin: PIE_CHART_MARGIN, children: [
     showTooltip ? /* @__PURE__ */ jsx6(Tooltip3, { content: /* @__PURE__ */ jsx6(ChartTooltipContent, {}) }) : null,
@@ -474,4 +525,4 @@ export {
   LineChart,
   PieChart
 };
-//# sourceMappingURL=chunk-YZB6YXKK.js.map
+//# sourceMappingURL=chunk-U3IXCSV6.js.map