@actioneer/ads 0.6.0 → 0.8.0

package/components/agent-icon.d.ts

@@ -1,76 +0,0 @@
-import * as React from "react";
-/**
- * AgentIcon — the "living agent" creative-icon family (the second special-icon
- * tier alongside {@link PixelIcon}). 24 self-contained, dependency-free animated
- * marks: a hatched tile field clipped to a silhouette, paired rectangular eyes,
- * and four interaction states —
- *
- *   • `default`  — a slow breathing settle (idle, gently alive)
- *   • `thinking` — a cool focus scan crosses the shifting hatch as the eyes search
- *   • `acting`   — a quick speaking size cadence (a.k.a. "speaking")
- *   • `sleep`    — the silhouette floats, desaturates, and closes its eyes
- *
- * Left uncontrolled it is interactive: hover/focus → `thinking`, click → `acting`
- * for 1.5s, then it settles. Pass `state` to drive it externally (an agent's live
- * status), which turns the pointer interactions off unless `interactive` is set.
- *
- * These are EXPRESSIVE marks for unique moments (an agent avatar, a voice/thinking
- * surface, an empty state) — not functional UI glyphs. For those use the Phosphor
- * registry at `@/lib/icons` (principle 4). The whole thing is one SVG + injected
- * CSS keyframes: no OGL/WebGL, no external dependency, safe in ADS and the product.
- */
-export type AgentIconName = "orb" | "heart" | "soft-square" | "hex" | "spark" | "clover-x" | "ripple" | "bloom" | "sun" | "pulse" | "triangle" | "quad-flower" | "hexagon" | "star" | "stack" | "butterfly" | "octagon" | "heart-drop" | "soft-scallop" | "arch" | "pentagon" | "diamond" | "leaf" | "dome";
-export type AgentIconState = "default" | "thinking" | "acting" | "sleep";
-/** Named product-safe recolors. Raw palette values stay inside ADS. */
-export type AgentIconColorPreset = "field";
-interface AgentConfig {
-    id: AgentIconName;
-    name: string;
-    color: string;
-    eyeColor: string;
-    eyeY?: number;
-    shape: string;
-}
-/** The 24 agent forms. All eyes share the one ink tone (source override). */
-export declare const AGENT_ICONS: readonly AgentConfig[];
-/** Names in registry order (matches the source's 01–24 numbering). */
-export declare const AGENT_ICON_NAMES: AgentIconName[];
-export interface AgentIconProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
-    /** Which of the 24 agent forms to render. */
-    agent: AgentIconName;
-    /**
-     * Drive the state externally (an agent's live status). When set, pointer
-     * interactions are OFF unless `interactive` is also true.
-     */
-    state?: AgentIconState;
-    /**
-     * Force interactivity on/off. Defaults to interactive when `state` is
-     * uncontrolled, and static when `state` is provided.
-     */
-    interactive?: boolean;
-    /** Rendered size in px (square). Defaults to 40. */
-    size?: number;
-    /** Number of tiles per side. Defaults to 7; larger display marks can use a denser field. */
-    tileGridSize?: number;
-    /** Scale applied to the paired eyes. Defaults to 1. */
-    eyeScale?: number;
-    /** Override the paired eye color without changing the hatch palette. */
-    eyeColor?: string;
-    /** Play the staggered tile-assembly animation when mounted. Defaults to true. */
-    animateOnMount?: boolean;
-    /**
-     * Override the mark's base hue (any CSS hex). The five-tone hatch palette is
-     * re-derived from it, so the whole silhouette recolors. Defaults to the
-     * form's own registry color.
-     */
-    color?: string;
-    /** Product-safe named recolor. `color` wins when both are supplied. */
-    colorPreset?: AgentIconColorPreset;
-    /**
-     * Eyes follow the cursor (the "Field Agent" greeter treatment). Tracks the
-     * pointer globally; disabled under reduced motion.
-     */
-    trackPointer?: boolean;
-}
-export declare const AgentIcon: React.ForwardRefExoticComponent<AgentIconProps & React.RefAttributes<HTMLSpanElement>>;
-export {};

package/components/agent-icon.js

@@ -1,265 +0,0 @@
-"use client";
-import { jsx as L } from "react/jsx-runtime";
-import * as s from "react";
-import { cn as ee } from "../lib/cn.js";
-const te = {
-  field: "#4565d5"
-};
-function b(e, n, c, i = -Math.PI / 2) {
-  const p = [], t = e * 2;
-  for (let a = 0; a < t; a += 1) {
-    const g = a % 2 === 0 ? n : c, h = i + Math.PI * a / e;
-    p.push(
-      `${(18 + Math.cos(h) * g).toFixed(2)},${(18 + Math.sin(h) * g).toFixed(2)}`
-    );
-  }
-  return p.join(" ");
-}
-function y(e, n, c) {
-  const i = (t, a) => Number.parseInt(t.slice(1), 16) >> a & 255, p = (t) => Math.round(i(e, t) + (i(n, t) - i(e, t)) * c);
-  return `#${[16, 8, 0].map((t) => p(t).toString(16).padStart(2, "0")).join("")}`;
-}
-function ae(e) {
-  return [
-    y(e, "#16213f", 0.2),
-    y(e, "#ffffff", 0.04),
-    y(e, "#ffffff", 0.16),
-    y(e, "#ffffff", 0.3),
-    y(e, "#233055", 0.1)
-  ];
-}
-const j = [
-  { spacing: 2.15, strokeWidth: 1.38, phase: 0 },
-  { spacing: 2.65, strokeWidth: 1.72, phase: 0.38 },
-  { spacing: 3.1, strokeWidth: 1.78, phase: 0.72 },
-  { spacing: 3.65, strokeWidth: 2.2, phase: 1.06 }
-];
-function ne(e, n, c = 7) {
-  const i = ae(e.color), p = y(e.color, "#4fe6ff", 0.58), t = Math.max(4, Math.min(12, Math.round(c))), a = 36 / t, g = Math.min(0.18, a * 0.05), h = (t - 1) / 2, $ = Math.max(Math.hypot(h, h), 1), v = [...e.id].reduce((l, r) => l + r.charCodeAt(0), 0), C = i.flatMap(
-    (l, r) => j.map(
-      (f, m) => `
-      <pattern id="${n}-hatch-${r}-${m}" width="${f.spacing}" height="${f.spacing}" patternUnits="userSpaceOnUse" patternTransform="rotate(45) translate(${f.phase} 0)">
-        <rect width="${f.strokeWidth}" height="${f.spacing}" fill="${l}" />
-      </pattern>`
-    )
-  ).join(""), k = [];
-  for (let l = 0; l < t; l += 1)
-    for (let r = 0; r < t; r += 1) {
-      const f = (r * 3 + l * 5 + v) % i.length, m = (r + l * 2 + v) % j.length, d = Math.hypot(r - h, l - h) / $, w = Math.round(d * 620);
-      k.push(
-        `<rect class="agent-avatar__tile" x="${(r * a + g).toFixed(3)}" y="${(l * a + g).toFixed(3)}" width="${(a - g * 2).toFixed(3)}" height="${(a - g * 2).toFixed(3)}" rx="0.18" fill="url(#${n}-hatch-${f}-${m})" style="--agent-tile-delay: ${w}ms" />`
-      );
-    }
-  return `
-    <defs>
-      <clipPath id="${n}-shape" clipPathUnits="userSpaceOnUse">${e.shape}</clipPath>
-      ${C}
-      <pattern id="${n}-focus-hatch" width="2.3" height="2.3" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
-        <rect width="1.46" height="2.3" fill="${p}" />
-      </pattern>
-    </defs>
-    <g class="agent-avatar__field" clip-path="url(#${n}-shape)">${k.join("")}</g>
-    <rect class="agent-avatar__focus-scan" x="-8" y="1" width="7" height="34" rx="3.5" fill="url(#${n}-focus-hatch)" clip-path="url(#${n}-shape)" aria-hidden="true" />
-  `;
-}
-function re(e, n = 1) {
-  const c = 4 * n, i = 7 * n, t = (e.eyeY ?? 13) + 3.5 - i / 2, a = Math.min(1, c * 0.25), g = 14 - c / 2, h = 22 - c / 2;
-  return `
-    <g class="agent-avatar__eyes" fill="${e.eyeColor}" aria-hidden="true">
-      <rect class="agent-avatar__eye agent-avatar__eye--left" x="${g.toFixed(3)}" y="${t.toFixed(3)}" width="${c.toFixed(3)}" height="${i.toFixed(3)}" rx="${a.toFixed(3)}" />
-      <rect class="agent-avatar__eye agent-avatar__eye--right" x="${h.toFixed(3)}" y="${t.toFixed(3)}" width="${c.toFixed(3)}" height="${i.toFixed(3)}" rx="${a.toFixed(3)}" />
-    </g>
-  `;
-}
-const E = [
-  { id: "orb", name: "Orb", color: "#8b66f6", shape: '<circle cx="18" cy="18" r="15.5" />' },
-  { id: "heart", name: "Heart", color: "#ff4a3d", eyeY: 12.5, shape: '<path d="M18 33 5.3 20.6C-1.3 13.7 3.2 4 11.1 4c3.1 0 5.6 1.7 6.9 4.2C19.3 5.7 21.8 4 24.9 4c7.9 0 12.4 9.7 5.8 16.6Z" />' },
-  { id: "soft-square", name: "Soft square", color: "#3b94d2", shape: '<rect x="3" y="3" width="30" height="30" rx="8" />' },
-  { id: "hex", name: "Hex", color: "#f28aaa", shape: '<polygon points="10,3 26,3 34,18 26,33 10,33 2,18" />' },
-  { id: "spark", name: "Spark", color: "#9669ee", shape: '<path d="M18 1c3 8 9 14 17 17-8 3-14 9-17 17-3-8-9-14-17-17C9 15 15 9 18 1Z" />' },
-  { id: "clover-x", name: "Clover X", color: "#118a65", shape: '<path d="M18 11C14 3 7 2 4 6c-3 4 0 9 6 12-6 3-9 8-6 12 3 4 10 3 14-5 4 8 11 9 14 5 3-4 0-9-6-12 6-3 9-8 6-12-3-4-10-3-14 5Z" />' },
-  { id: "ripple", name: "Ripple", color: "#0d8d67", shape: `<polygon points="${b(10, 15.5, 13.8)}" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round" />` },
-  { id: "bloom", name: "Bloom", color: "#f29ab7", shape: '<circle cx="18" cy="9.5" r="6.8"/><circle cx="25.4" cy="13.8" r="6.8"/><circle cx="25.4" cy="22.2" r="6.8"/><circle cx="18" cy="26.5" r="6.8"/><circle cx="10.6" cy="22.2" r="6.8"/><circle cx="10.6" cy="13.8" r="6.8"/>' },
-  { id: "sun", name: "Sun", color: "#ffb51b", shape: `<polygon points="${b(10, 16, 12.2)}" />` },
-  { id: "pulse", name: "Pulse", color: "#ff6d27", shape: `<polygon points="${b(18, 16, 14.2)}" />` },
-  { id: "triangle", name: "Triangle", color: "#ffb317", eyeY: 14.5, shape: '<path d="M16.2 4.5a2.05 2.05 0 0 1 3.6 0l13.1 24.3A2.15 2.15 0 0 1 31 32H5a2.15 2.15 0 0 1-1.9-3.2Z" />' },
-  { id: "quad-flower", name: "Quad flower", color: "#3f96d6", shape: '<circle cx="11" cy="11" r="8"/><circle cx="25" cy="11" r="8"/><circle cx="11" cy="25" r="8"/><circle cx="25" cy="25" r="8"/>' },
-  { id: "hexagon", name: "Hexagon", color: "#3a92d1", shape: '<polygon points="18,2.5 32,10.5 32,25.5 18,33.5 4,25.5 4,10.5" />' },
-  { id: "star", name: "Star", color: "#ffb91c", eyeY: 14, shape: `<polygon points="${b(5, 16, 7.3)}" />` },
-  { id: "stack", name: "Stack", color: "#ff4a42", shape: '<rect x="4" y="3" width="28" height="11" rx="5.5"/><rect x="4" y="12.5" width="28" height="11" rx="5.5"/><rect x="4" y="22" width="28" height="11" rx="5.5"/>' },
-  { id: "butterfly", name: "Butterfly", color: "#ef91af", shape: '<path d="M18 18C18 8 13 3 4 3c0 9 3 14 11 15-8 1-11 6-11 15 9 0 14-5 14-15 0 10 5 15 14 15 0-9-3-14-11-15 8-1 11-6 11-15-9 0-14 5-14 15Z" />' },
-  { id: "octagon", name: "Octagon", color: "#128862", shape: '<polygon points="11,3 25,3 33,11 33,25 25,33 11,33 3,25 3,11" />' },
-  { id: "heart-drop", name: "Heart drop", color: "#f38dac", eyeY: 12.5, shape: '<path d="M18 34 5.8 21.4C-.8 14.6 3.1 4 11.2 4c3.2 0 5.6 1.7 6.8 4.3C19.2 5.7 21.6 4 24.8 4c8.1 0 12 10.6 5.4 17.4Z" />' },
-  { id: "soft-scallop", name: "Soft scallop", color: "#f19bb1", shape: `<polygon points="${b(12, 15.6, 14.4)}" stroke="currentColor" stroke-width="2" stroke-linejoin="round" />` },
-  { id: "arch", name: "Arch", color: "#0f8c65", shape: '<path d="M5 33V17C5 8.7 10.8 3 18 3s13 5.7 13 14v16Z" />' },
-  { id: "pentagon", name: "Pentagon", color: "#936af0", eyeY: 13.5, shape: '<polygon points="18,2 33,13 27,33 9,33 3,13" />' },
-  { id: "diamond", name: "Diamond", color: "#368fd0", shape: '<polygon points="18,2 34,18 18,34 2,18" />' },
-  { id: "leaf", name: "Leaf", color: "#ff7028", shape: '<path d="M4 32V18C4 10.3 10.3 4 18 4h14v14c0 7.7-6.3 14-14 14Z" />' },
-  { id: "dome", name: "Dome", color: "#ffb614", shape: '<path d="M4 33V18C4 9.7 10.7 3 19 3h1c7.2 0 13 5.8 13 13v17Z" />' }
-].map((e) => ({ ...e, eyeColor: "#171820" })), de = E.map((e) => e.id), z = "ads-agent-icon-styles", ie = `
-.agent-avatar { display: inline-block; flex: none; color: var(--agent-color, #4565d5); line-height: 0; }
-.agent-avatar__svg { display: block; width: 100%; height: 100%; overflow: visible; shape-rendering: geometricPrecision; }
-.agent-avatar__character,
-.agent-avatar__field,
-.agent-avatar__eyes,
-.agent-avatar__focus-scan { transform-box: fill-box; transform-origin: center; will-change: transform; }
-.agent-avatar__focus-scan { opacity: 0; pointer-events: none; }
-/* Tiles rest VISIBLE (opacity 1, scale 1 - no base hiding). The tile-assembly
-   intro is a pure-CSS mount animation: 'both' fill holds the collapsed 0%
-   frame through its stagger delay, then settles at the visible 100% frame.
-   If the animation never runs, the tile still shows its natural visible state,
-   so the mark can never be trapped invisible. */
-.agent-avatar__tile { transform-box: fill-box; transform-origin: center; animation: ads-agent-tile-intro 620ms cubic-bezier(0.22, 0.72, 0.24, 1) both; animation-delay: var(--agent-tile-delay, 0ms); }
-.agent-avatar[data-agent-animate-on-mount="false"] .agent-avatar__tile { animation: none; opacity: 1; transform: none; }
-/* Field Agent pointer tracking: eyes ease toward the cursor; overrides the
-   state eye animation while the pointer is active. */
-.agent-avatar.is-pointer-tracking .agent-avatar__eyes { animation: none !important; transform: translate(var(--agent-pointer-eye-x, 0), var(--agent-pointer-eye-y, 0)); transition: transform 70ms linear; }
-.agent-avatar[data-agent-state="default"] .agent-avatar__character { animation: ads-agent-default-breathe 3.6s ease-in-out infinite; animation-delay: var(--agent-delay, 0s); }
-.agent-avatar[data-agent-state="thinking"] .agent-avatar__field { animation: ads-agent-thinking-field 2.15s ease-in-out infinite, ads-agent-thinking-color 3.2s ease-in-out infinite; animation-delay: var(--agent-delay, 0s), var(--agent-delay, 0s); }
-.agent-avatar[data-agent-state="thinking"] .agent-avatar__eyes { animation: ads-agent-thinking-eyes 1.65s cubic-bezier(0.65, 0, 0.35, 1) infinite; animation-delay: var(--agent-delay, 0s); }
-.agent-avatar[data-agent-state="thinking"] .agent-avatar__focus-scan { animation: ads-agent-thinking-scan 2.15s cubic-bezier(0.45, 0, 0.2, 1) infinite; animation-delay: var(--agent-delay, 0s); }
-.agent-avatar[data-agent-state="acting"] .agent-avatar__character { animation: ads-agent-acting-size 720ms cubic-bezier(0.33, 1, 0.68, 1) infinite; animation-delay: var(--agent-delay, 0s); }
-.agent-avatar[data-agent-state="sleep"] .agent-avatar__character { animation: ads-agent-sleep-float 4.8s ease-in-out infinite; animation-delay: var(--agent-delay, 0s); }
-.agent-avatar[data-agent-state="sleep"] .agent-avatar__field { animation: ads-agent-sleep-dim 4.8s ease-in-out infinite; animation-delay: var(--agent-delay, 0s); }
-.agent-avatar[data-agent-state="sleep"] .agent-avatar__eyes { animation: ads-agent-sleep-eyes 4.8s ease-in-out infinite; animation-delay: var(--agent-delay, 0s); }
-@keyframes ads-agent-default-breathe { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-0.45px) scale(1.018, 0.985); } }
-@keyframes ads-agent-tile-intro { 0% { opacity: 0; transform: scale(0); } 100% { opacity: 1; transform: scale(1); } }
-@keyframes ads-agent-thinking-field { 0%, 100% { transform: rotate(-1.6deg) scale(0.99); } 50% { transform: rotate(1.6deg) scale(1.025); } }
-@keyframes ads-agent-thinking-color { 0%, 100% { filter: hue-rotate(-8deg) saturate(1.08) brightness(1); } 50% { filter: hue-rotate(24deg) saturate(1.48) brightness(1.13); } }
-@keyframes ads-agent-thinking-scan { 0% { opacity: 0; transform: translateX(0); } 16% { opacity: 0.22; } 42% { opacity: 0.92; } 72% { opacity: 0.35; } 100% { opacity: 0; transform: translateX(51px); } }
-@keyframes ads-agent-thinking-eyes { 0%, 18%, 100% { transform: translateX(-1.15px); } 48%, 68% { transform: translateX(1.15px); } }
-@keyframes ads-agent-acting-size { 0%, 100% { transform: scale(1.1); } 28% { transform: scale(1.2); } 48% { transform: scale(1.125); } 72% { transform: scale(1.185); } }
-@keyframes ads-agent-sleep-float { 0%, 100% { transform: translateY(0) rotate(-0.6deg); } 50% { transform: translateY(-1.25px) rotate(0.6deg); } }
-@keyframes ads-agent-sleep-dim { 0%, 100% { opacity: 0.68; filter: saturate(0.52) brightness(1.04); } 50% { opacity: 0.82; filter: saturate(0.68) brightness(1.1); } }
-@keyframes ads-agent-sleep-eyes { 0%, 100% { transform: translateY(1.7px) scaleY(0.18); } 50% { transform: translateY(2px) scaleY(0.14); } }
-@keyframes ads-agent-cute-hello { 0%, 100% { transform: translateY(0) rotate(0) scale(1); } 16% { transform: translateY(0.8px) rotate(0) scale(1.05, 0.93); } 38% { transform: translateY(-2.4px) rotate(-4deg) scale(0.96, 1.07); } 56% { transform: translateY(-1.2px) rotate(3deg) scale(1.025, 0.985); } 74% { transform: translateY(0.25px) rotate(-1.2deg) scale(0.99, 1.015); } }
-@keyframes ads-agent-cute-blink { 0%, 28%, 46%, 100% { transform: translateY(0) scaleY(1); } 36% { transform: translateY(2.7px) scaleY(0.16); } }
-/* Hover greeting: the whole mark gives a quick playful "hello" wave and a
-   blink (the Field Agent greeter behaviour). Pure CSS on :hover; the
-   pointer-tracking rule above wins on the eyes when the pointer is active. */
-@media (hover: hover) and (pointer: fine) {
-  .agent-avatar[data-agent-interactive="true"]:hover .agent-avatar__svg { animation: ads-agent-cute-hello 680ms cubic-bezier(0.2, 0.82, 0.24, 1) both; }
-  .agent-avatar[data-agent-interactive="true"][data-agent-state="default"]:hover .agent-avatar__eyes { animation: ads-agent-cute-blink 680ms ease-in-out both; }
-}
-@media (prefers-reduced-motion: reduce) {
-  .agent-avatar__character,
-  .agent-avatar__field,
-  .agent-avatar__eyes,
-  .agent-avatar__focus-scan,
-  .agent-avatar__tile { animation: none !important; opacity: 1; transform: none; transition: none; }
-}
-`;
-function oe() {
-  s.useEffect(() => {
-    if (typeof document > "u" || document.getElementById(z)) return;
-    const e = document.createElement("style");
-    e.id = z, e.textContent = ie, document.head.appendChild(e);
-  }, []);
-}
-const se = s.forwardRef(
-  ({
-    agent: e,
-    state: n,
-    interactive: c,
-    size: i = 40,
-    tileGridSize: p = 7,
-    eyeScale: t = 1,
-    eyeColor: a,
-    animateOnMount: g = !0,
-    color: h,
-    colorPreset: $,
-    trackPointer: v,
-    className: C,
-    style: k,
-    ...l
-  }, r) => {
-    oe();
-    const f = s.useMemo(
-      () => E.find((o) => o.id === e) ?? E[0],
-      [e]
-    ), m = h ?? ($ ? te[$] : void 0), d = s.useMemo(() => !m && !a ? f : {
-      ...f,
-      ...m ? { color: m } : {},
-      ...a ? { eyeColor: a } : {}
-    }, [f, m, a]), w = s.useRef(null), B = s.useCallback(
-      (o) => {
-        w.current = o, typeof r == "function" ? r(o) : r && (r.current = o);
-      },
-      [r]
-    ), I = s.useId(), F = s.useMemo(
-      () => `agent-${d.id}-${I.replace(/[^a-zA-Z0-9]/g, "")}`,
-      [d.id, I]
-    ), T = n !== void 0, M = c ?? !T, [D, N] = s.useState("default"), Y = s.useRef(void 0), U = T ? n : D, W = s.useMemo(() => `-${([...d.id].reduce((S, A) => S + A.charCodeAt(0), 0) % 9 * 0.11).toFixed(2)}s`, [d.id]), q = s.useMemo(
-      () => `<g class="agent-avatar__character">${ne(
-        d,
-        F,
-        p
-      )}${re(d, t)}</g>`,
-      [t, d, F, p]
-    );
-    s.useEffect(() => () => window.clearTimeout(Y.current), []), s.useEffect(() => {
-      const o = w.current;
-      if (!v || !o || window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
-      const S = 82, A = 1.55, V = 1.05;
-      let P = 0, H = 0, _ = 0;
-      const Q = () => {
-        _ = 0;
-        const u = o.getBoundingClientRect(), O = P - (u.left + u.width / 2), R = H - (u.top + u.height / 2), x = Math.hypot(O, R), Z = Math.min(x / S, 1), J = x > 0 ? O / x : 0, K = x > 0 ? R / x : 0;
-        o.style.setProperty("--agent-pointer-eye-x", `${(J * A * Z).toFixed(3)}px`), o.style.setProperty("--agent-pointer-eye-y", `${(K * V * Z).toFixed(3)}px`);
-      }, X = (u) => {
-        P = u.clientX, H = u.clientY, o.classList.add("is-pointer-tracking"), _ || (_ = requestAnimationFrame(Q));
-      };
-      return window.addEventListener("pointermove", X, { passive: !0 }), () => {
-        window.removeEventListener("pointermove", X), _ && cancelAnimationFrame(_), o.classList.remove("is-pointer-tracking"), o.style.removeProperty("--agent-pointer-eye-x"), o.style.removeProperty("--agent-pointer-eye-y");
-      };
-    }, [v]);
-    const G = M ? {
-      onClick: () => {
-        window.clearTimeout(Y.current), N("acting"), Y.current = window.setTimeout(() => N("default"), 1500);
-      }
-    } : {};
-    return /* @__PURE__ */ L(
-      "span",
-      {
-        ref: B,
-        className: ee(
-          "agent-avatar",
-          M && "cursor-pointer rounded-md outline-none focus-visible:ring-3 focus-visible:ring-ring",
-          C
-        ),
-        "data-agent-icon": d.id,
-        "data-agent-state": U,
-        "data-agent-interactive": M ? "true" : "false",
-        "data-agent-animate-on-mount": g ? "true" : "false",
-        role: "img",
-        "aria-label": `${d.name} agent icon`,
-        tabIndex: M ? 0 : void 0,
-        style: {
-          "--agent-color": d.color,
-          "--agent-delay": W,
-          width: i,
-          height: i,
-          ...k
-        },
-        ...G,
-        ...l,
-        children: /* @__PURE__ */ L(
-          "svg",
-          {
-            className: "agent-avatar__svg",
-            viewBox: "0 0 36 36",
-            focusable: "false",
-            "aria-hidden": "true",
-            dangerouslySetInnerHTML: { __html: q }
-          }
-        )
-      }
-    );
-  }
-);
-se.displayName = "AgentIcon";
-export {
-  E as AGENT_ICONS,
-  de as AGENT_ICON_NAMES,
-  se as AgentIcon
-};

package/components/ai-elements/queue.d.ts

@@ -1,60 +0,0 @@
-import { Button } from '../button';
-import { Collapsible, CollapsibleContent } from '../collapsible';
-import * as React from "react";
-export type QueueMessagePart = {
-    type: string;
-    text?: string;
-    url?: string;
-    filename?: string;
-    mediaType?: string;
-};
-export type QueueMessage = {
-    id: string;
-    parts: QueueMessagePart[];
-};
-export type QueueTodo = {
-    id: string;
-    title: string;
-    description?: string;
-    status?: "pending" | "completed";
-};
-export type QueueItemProps = React.ComponentProps<"li">;
-export declare const QueueItem: ({ className, ...props }: QueueItemProps) => React.JSX.Element;
-export type QueueItemIndicatorProps = React.ComponentProps<"span"> & {
-    completed?: boolean;
-};
-export declare const QueueItemIndicator: ({ completed, className, ...props }: QueueItemIndicatorProps) => React.JSX.Element;
-export type QueueItemContentProps = React.ComponentProps<"span"> & {
-    completed?: boolean;
-};
-export declare const QueueItemContent: ({ completed, className, ...props }: QueueItemContentProps) => React.JSX.Element;
-export type QueueItemDescriptionProps = React.ComponentProps<"div"> & {
-    completed?: boolean;
-};
-export declare const QueueItemDescription: ({ completed, className, ...props }: QueueItemDescriptionProps) => React.JSX.Element;
-export type QueueItemActionsProps = React.ComponentProps<"div">;
-export declare const QueueItemActions: ({ className, ...props }: QueueItemActionsProps) => React.JSX.Element;
-export type QueueItemActionProps = Omit<React.ComponentProps<typeof Button>, "variant" | "size">;
-export declare const QueueItemAction: ({ className, ...props }: QueueItemActionProps) => React.JSX.Element;
-export type QueueItemAttachmentProps = React.ComponentProps<"div">;
-export declare const QueueItemAttachment: ({ className, ...props }: QueueItemAttachmentProps) => React.JSX.Element;
-export type QueueItemImageProps = React.ComponentProps<"img">;
-export declare const QueueItemImage: ({ className, ...props }: QueueItemImageProps) => React.JSX.Element;
-export type QueueItemFileProps = React.ComponentProps<"span">;
-export declare const QueueItemFile: ({ children, className, ...props }: QueueItemFileProps) => React.JSX.Element;
-export type QueueListProps = React.ComponentProps<"div">;
-export declare const QueueList: ({ children, className, ...props }: QueueListProps) => React.JSX.Element;
-export type QueueSectionProps = React.ComponentProps<typeof Collapsible>;
-export declare const QueueSection: ({ className, defaultOpen, ...props }: QueueSectionProps) => React.JSX.Element;
-export type QueueSectionTriggerProps = React.ComponentProps<"button">;
-export declare const QueueSectionTrigger: ({ children, className, ...props }: QueueSectionTriggerProps) => React.JSX.Element;
-export type QueueSectionLabelProps = React.ComponentProps<"span"> & {
-    count?: number;
-    label: string;
-    icon?: React.ReactNode;
-};
-export declare const QueueSectionLabel: ({ count, label, icon, className, ...props }: QueueSectionLabelProps) => React.JSX.Element;
-export type QueueSectionContentProps = React.ComponentProps<typeof CollapsibleContent>;
-export declare const QueueSectionContent: ({ className, ...props }: QueueSectionContentProps) => React.JSX.Element;
-export type QueueProps = React.ComponentProps<"div">;
-export declare const Queue: ({ className, ...props }: QueueProps) => React.JSX.Element;

package/components/ai-elements/queue.js

@@ -1,193 +0,0 @@
-"use client";
-import { jsx as s, jsxs as n } from "react/jsx-runtime";
-import { cn as a } from "../../lib/cn.js";
-import { Button as c } from "../button.js";
-import { Collapsible as l, CollapsibleContent as u, CollapsibleTrigger as m } from "../collapsible.js";
-import { Paperclip as d, ChevronDown as p } from "../../lib/icons.js";
-const y = ({ className: e, ...t }) => /* @__PURE__ */ s(
-  "li",
-  {
-    className: a(
-      "group flex flex-col gap-1 rounded-md px-3 py-1 text-base transition-colors hover:bg-muted",
-      e
-    ),
-    ...t
-  }
-), N = ({
-  completed: e = !1,
-  className: t,
-  ...o
-}) => /* @__PURE__ */ s(
-  "span",
-  {
-    "aria-hidden": !0,
-    className: a(
-      // ADS status dots are square, not circular (principle 6).
-      "mt-0.5 inline-block size-2.5 shrink-0 rounded-dot",
-      e ? "bg-success" : "bg-tertiary",
-      t
-    ),
-    ...o
-  }
-), Q = ({
-  completed: e = !1,
-  className: t,
-  ...o
-}) => /* @__PURE__ */ s(
-  "span",
-  {
-    className: a(
-      "line-clamp-1 grow break-words",
-      e ? "text-tertiary line-through" : "text-secondary",
-      t
-    ),
-    ...o
-  }
-), v = ({
-  completed: e = !1,
-  className: t,
-  ...o
-}) => /* @__PURE__ */ s(
-  "div",
-  {
-    className: a(
-      "ml-6 text-xs text-tertiary",
-      e && "line-through",
-      t
-    ),
-    ...o
-  }
-), I = ({
-  className: e,
-  ...t
-}) => /* @__PURE__ */ s("div", { className: a("flex shrink-0 gap-1", e), ...t }), w = ({
-  className: e,
-  ...t
-}) => /* @__PURE__ */ s(
-  c,
-  {
-    type: "button",
-    variant: "ghost",
-    size: "icon-xs",
-    className: a(
-      "size-6 text-tertiary opacity-0 transition-opacity",
-      "hover:text-foreground focus-visible:opacity-100 group-hover:opacity-100",
-      e
-    ),
-    ...t
-  }
-), C = ({
-  className: e,
-  ...t
-}) => /* @__PURE__ */ s("div", { className: a("mt-1 flex flex-wrap gap-2", e), ...t }), k = ({
-  className: e,
-  ...t
-}) => /* @__PURE__ */ s(
-  "img",
-  {
-    alt: "",
-    height: 32,
-    width: 32,
-    className: a(
-      "size-8 rounded-md border border-border object-cover",
-      e
-    ),
-    ...t
-  }
-), z = ({
-  children: e,
-  className: t,
-  ...o
-}) => /* @__PURE__ */ n(
-  "span",
-  {
-    className: a(
-      "flex items-center gap-1 rounded-md bg-muted px-2 py-1 text-xs text-secondary",
-      t
-    ),
-    ...o,
-    children: [
-      /* @__PURE__ */ s(d, { className: "size-3 shrink-0" }),
-      /* @__PURE__ */ s("span", { className: "max-w-28 truncate", children: e })
-    ]
-  }
-), j = ({
-  children: e,
-  className: t,
-  ...o
-}) => /* @__PURE__ */ s(
-  "div",
-  {
-    className: a("-mb-1 mt-2 max-h-40 overflow-y-auto pr-1", t),
-    ...o,
-    children: /* @__PURE__ */ s("ul", { children: e })
-  }
-), S = ({
-  className: e,
-  defaultOpen: t = !0,
-  ...o
-}) => /* @__PURE__ */ s(l, { className: a(e), defaultOpen: t, ...o }), A = ({
-  children: e,
-  className: t,
-  ...o
-}) => /* @__PURE__ */ s(m, { asChild: !0, children: /* @__PURE__ */ s(
-  "button",
-  {
-    type: "button",
-    className: a(
-      "group flex w-full items-center justify-between rounded-md bg-muted px-3 py-2 text-left font-normal text-base text-secondary transition-colors hover:bg-accent",
-      t
-    ),
-    ...o,
-    children: e
-  }
-) }), D = ({
-  count: e,
-  label: t,
-  icon: o,
-  className: r,
-  ...i
-}) => /* @__PURE__ */ n("span", { className: a("flex items-center gap-2", r), ...i, children: [
-  /* @__PURE__ */ s(
-    p,
-    {
-      strokeWidth: 2,
-      className: "size-4 shrink-0 transition-transform group-data-[state=closed]:-rotate-90 motion-reduce:transition-none"
-    }
-  ),
-  o,
-  /* @__PURE__ */ n("span", { children: [
-    e,
-    " ",
-    t
-  ] })
-] }), L = ({
-  className: e,
-  ...t
-}) => /* @__PURE__ */ s(u, { className: a(e), ...t }), T = ({ className: e, ...t }) => /* @__PURE__ */ s(
-  "div",
-  {
-    className: a(
-      "flex flex-col gap-2 rounded-xl bg-card px-3 py-2",
-      e
-    ),
-    ...t
-  }
-);
-export {
-  T as Queue,
-  y as QueueItem,
-  w as QueueItemAction,
-  I as QueueItemActions,
-  C as QueueItemAttachment,
-  Q as QueueItemContent,
-  v as QueueItemDescription,
-  z as QueueItemFile,
-  k as QueueItemImage,
-  N as QueueItemIndicator,
-  j as QueueList,
-  S as QueueSection,
-  L as QueueSectionContent,
-  D as QueueSectionLabel,
-  A as QueueSectionTrigger
-};

package/components/ai-elements/speech-input.d.ts

@@ -1,16 +0,0 @@
-import { ComponentProps } from 'react';
-import { Button } from '../button';
-export type SpeechInputProps = Omit<ComponentProps<typeof Button>, "children" | "onError"> & {
-    /** Fires with each finalized phrase (interim results are ignored). */
-    onTranscriptionChange?: (text: string) => void;
-    /**
-     * Fallback for browsers without the Web Speech API (Firefox / Safari).
-     * Receives the recorded audio blob and should resolve to the transcribed
-     * text, which is then passed to `onTranscriptionChange`.
-     */
-    onAudioRecorded?: (audioBlob: Blob) => Promise<string>;
-    /** Fires on permission / recognition failures (e.g. `"not-allowed"`). */
-    onError?: (error: string) => void;
-    lang?: string;
-};
-export declare const SpeechInput: ({ className, onTranscriptionChange, onAudioRecorded, onError, lang, disabled, ...props }: SpeechInputProps) => import("react").JSX.Element;