@kitn.ai/ui 0.18.2 → 0.20.0

package/src/primitives/visualizer-sequences.ts

@@ -0,0 +1,350 @@
+/**
+ * Pure `state -> highlight set` mappers for the audio visualizer variants.
+ *
+ * Ported from livekit/components-js `packages/shadcn/hooks/agents-ui/`
+ * (Apache License 2.0). Upstream runs four separate animator hooks, each with
+ * its own requestAnimationFrame loop. We keep the sequences (verbatim) but move
+ * the timing into one shared driver, `use-sequencer.ts`.
+ *
+ * Every generator returns a NON-EMPTY array so callers can index with
+ * `sequence[tick % sequence.length]` without a guard.
+ */
+
+export type VisualizerState =
+  | 'idle'
+  | 'connecting'
+  | 'listening'
+  | 'thinking'
+  | 'speaking'
+  | 'disconnected';
+
+export interface Coordinate {
+  x: number;
+  y: number;
+}
+
+const KNOWN: readonly VisualizerState[] = [
+  'idle',
+  'connecting',
+  'listening',
+  'thinking',
+  'speaking',
+  // First-class since 2026-08-10 (Rob): the dead-connection look (flat wave,
+  // nothing lit) upstream renders for its 'disconnected' state. It was an
+  // alias for 'idle' until idle adopted upstream's gentle wave, which left
+  // the flat line unreachable.
+  'disconnected',
+];
+
+/**
+ * LiveKit's AgentState carries room-lifecycle values that mean nothing here.
+ * Accept them so markup ported from LiveKit works unchanged.
+ */
+const ALIASES: Record<string, VisualizerState> = {
+  // Both are dead-connection looks upstream, so 'failed' rides with
+  // 'disconnected' rather than 'idle'.
+  failed: 'disconnected',
+  initializing: 'connecting',
+  'pre-connect-buffering': 'connecting',
+};
+
+export function normalizeState(input: string | undefined): VisualizerState {
+  if (!input) return 'idle';
+  if ((KNOWN as readonly string[]).includes(input)) return input as VisualizerState;
+  return ALIASES[input] ?? 'idle';
+}
+
+// ---------------------------------------------------------------- bar
+
+export function barSequence(state: VisualizerState, barCount: number): number[][] {
+  switch (state) {
+    case 'connecting': {
+      // A mirrored pair sweeping outward: [0, n-1], [1, n-2], ...
+      const seq: number[][] = [];
+      for (let x = 0; x < barCount; x++) seq.push([x, barCount - 1 - x]);
+      return seq.length ? seq : [[]];
+    }
+    case 'listening':
+    case 'thinking': {
+      // Blink the center bar. -1 is a deliberate no-index frame (the "off" beat).
+      return [[Math.floor(barCount / 2)], [-1]];
+    }
+    case 'speaking':
+      return [Array.from({ length: barCount }, (_, i) => i)];
+    // Dead-connection look: mirrors idle (nothing lit) for now. A dedicated
+    // arm so the pending LiveKit disconnected-state measurement can adjust
+    // it in one line.
+    case 'disconnected':
+      return [[]];
+    case 'idle':
+    default:
+      return [[]];
+  }
+}
+
+export function barInterval(state: VisualizerState, barCount: number): number {
+  switch (state) {
+    // The whole sweep should take 2s regardless of how many bars it crosses.
+    case 'connecting':
+      return 2000 / Math.max(1, barCount);
+    case 'listening':
+      return 500;
+    case 'thinking':
+      return 150;
+    default:
+      return 1000;
+  }
+}
+
+// ---------------------------------------------------------------- grid
+
+/**
+ * Walk the perimeter of a ring `spread` cells out from center, clockwise.
+ *
+ * NOTE: This diverges from upstream use-agent-audio-visualizer-grid.ts in two ways:
+ * (1) We use separate centerX and centerY (upstream uses row-center for both axes).
+ *     Upstream never ships non-square grids, so the bug never manifested. Our public
+ *     API is square-only too now (the grid's single `count` prop, 2026-08-09), but
+ *     this function keeps taking rows/columns as plain params, so the correct
+ *     arbitrary-shape handling stays -- it costs nothing and guards any future caller.
+ * (2) We distinguish spread === 0 from spread === undefined (upstream treats 0 as falsy).
+ *     Again, upstream never ships spread=0 explicitly; we do for API completeness.
+ */
+function gridRing(rows: number, columns: number, spread: number): Coordinate[] {
+  const seq: Coordinate[] = [];
+  const centerX = Math.floor(columns / 2);
+  const centerY = Math.floor(rows / 2);
+  const topLeft = { x: Math.max(0, centerX - spread), y: Math.max(0, centerY - spread) };
+  const bottomRight = {
+    x: Math.min(columns - 1, centerX + spread),
+    y: Math.min(rows - 1, centerY + spread),
+  };
+
+  for (let x = topLeft.x; x <= bottomRight.x; x++) seq.push({ x, y: topLeft.y });
+  for (let y = topLeft.y + 1; y <= bottomRight.y; y++) seq.push({ x: bottomRight.x, y });
+  for (let x = bottomRight.x - 1; x >= topLeft.x; x--) seq.push({ x, y: bottomRight.y });
+  for (let y = bottomRight.y - 1; y > topLeft.y; y--) seq.push({ x: topLeft.x, y });
+
+  return seq;
+}
+
+export function gridSequence(
+  state: VisualizerState,
+  rows: number,
+  columns: number,
+  spread?: number,
+): Coordinate[] {
+  const center = { x: Math.floor(columns / 2), y: Math.floor(rows / 2) };
+
+  switch (state) {
+    case 'connecting': {
+      const maxSpread = Math.floor(Math.max(rows, columns) / 2);
+      const clamped = spread !== undefined ? Math.min(spread, maxSpread) : maxSpread;
+      const ring = gridRing(rows, columns, clamped);
+      return ring.length ? ring : [center];
+    }
+    case 'listening': {
+      // One lit frame followed by eight dark ones: a slow heartbeat.
+      const off = { x: -1, y: -1 };
+      return [center, off, off, off, off, off, off, off, off];
+    }
+    case 'thinking': {
+      // Sweep the middle row left to right, then back.
+      const y = Math.floor(rows / 2);
+      const seq: Coordinate[] = [];
+      for (let x = 0; x < columns; x++) seq.push({ x, y });
+      for (let x = columns - 1; x >= 0; x--) seq.push({ x, y });
+      return seq.length ? seq : [center];
+    }
+    // Dead-connection look: the same centre resting frame as idle
+    // (variant-grid suppresses the highlight for both, so nothing lights).
+    // A dedicated arm so the pending LiveKit measurement can adjust it in
+    // one line.
+    case 'disconnected':
+      return [center];
+    default:
+      return [center];
+  }
+}
+
+// ---------------------------------------------------------------- radial
+
+/** Largest divisor of `n` that is at most `max`. Always at least 1. */
+function largestDivisorAtMost(n: number, max: number): number {
+  const gcd = (a: number, b: number): number => {
+    while (b !== 0) {
+      const t = b;
+      b = a % b;
+      a = t;
+    }
+    return a;
+  };
+  for (let i = max; i >= 1; i--) if (gcd(n, i) === i) return i;
+  return 1;
+}
+
+/**
+ * Partition the ring into interleaved groups. Lighting one group per tick reads
+ * as a rotating pattern rather than a single travelling dot. Every index appears
+ * in exactly one group.
+ */
+function radialGroups(barCount: number): number[][] {
+  const divisor =
+    barCount > 8
+      ? barCount / largestDivisorAtMost(barCount, 4)
+      : largestDivisorAtMost(barCount, 2);
+  const safe = Math.max(1, Math.floor(divisor));
+  const perGroup = Math.floor(barCount / safe);
+  return Array.from({ length: safe }, (_, i) =>
+    Array.from({ length: perGroup }, (_, j) => j * safe + i),
+  );
+}
+
+export function radialSequence(state: VisualizerState, barCount: number): number[][] {
+  switch (state) {
+    case 'connecting': {
+      // Pair each bar with the one opposite it, sweeping around the circle.
+      const center = Math.floor(barCount / 2);
+      const seq: number[][] = [];
+      for (let x = 0; x < barCount; x++) seq.push([x, (x + center) % barCount]);
+      return seq.length ? seq : [[]];
+    }
+    case 'listening':
+    case 'thinking': {
+      const groups = radialGroups(barCount);
+      return groups.length ? groups : [[]];
+    }
+    case 'speaking':
+      return [Array.from({ length: barCount }, (_, i) => i)];
+    // Dead-connection look: mirrors idle (nothing lit) for now, one-line
+    // adjustable once the LiveKit measurement lands.
+    case 'disconnected':
+      return [[]];
+    case 'idle':
+    default:
+      return [[]];
+  }
+}
+
+export function radialInterval(state: VisualizerState): number {
+  switch (state) {
+    case 'connecting':
+    case 'listening':
+      return 500;
+    // Infinity parks the sequencer: `thinking` spins the whole container in CSS
+    // with every bar lit, so ticking would fight the animation.
+    case 'thinking':
+      return Infinity;
+    default:
+      return 1000;
+  }
+}
+
+// ---------------------------------------------------------------- shader
+
+/**
+ * Uniform targets for the aura and custom shaders. An array intensity means
+ * "ping-pong between these two" (see create-tween). `speaking` intensity is
+ * omitted from the pulse because live volume drives it instantly instead.
+ */
+export function shaderTargets(
+  state: VisualizerState,
+): { intensity: number | [number, number]; speed: number } {
+  switch (state) {
+    case 'listening':
+      return { intensity: [0.5, 0.8], speed: 2.5 };
+    case 'thinking':
+      return { intensity: [0.25, 0.5], speed: 4.0 };
+    // Same pulse as thinking, its own speed: uSpeed is the only
+    // state-correlated scalar besides intensity that reaches a custom
+    // shader's GLSL (see customUniforms in variant-custom.tsx), so the two
+    // transitional states sharing 4.0 made them indistinguishable to any
+    // consumer shader keying off the kit's uniforms -- the Custom story's
+    // per-state looks are the concrete consumer. Every state now maps to a
+    // distinct speed: idle 1, listening/speaking 2.5 (told apart by band
+    // energy), thinking 4, connecting 6.
+    case 'connecting':
+      return { intensity: [0.25, 0.5], speed: 6.0 };
+    case 'speaking':
+      return { intensity: 0.3, speed: 2.5 };
+    // Dead-connection look: idle's dim intensity but its OWN speed, so a
+    // shader keying off uSpeed can draw a dead line distinct from idle's
+    // calm ridge (see the connecting arm's comment: uSpeed is the only
+    // other state-correlated scalar reaching consumer GLSL). Still
+    // one-line adjustable once the LiveKit measurement lands.
+    case 'disconnected':
+      return { intensity: 0.3, speed: 0.5 };
+    case 'idle':
+    default:
+      return { intensity: 0.3, speed: 1 };
+  }
+}
+
+const WAVE_SPEED = 5;
+const WAVE_AMPLITUDE = 0.025;
+const WAVE_FREQUENCY = 10;
+
+/** Uniform targets for the wave shader. Same shape, different curve. */
+export function waveTargets(state: VisualizerState): {
+  speed: number;
+  amplitude: number;
+  frequency: number;
+  opacity: number | [number, number];
+  pulseDuration: number;
+} {
+  switch (state) {
+    case 'listening':
+      return {
+        speed: WAVE_SPEED,
+        amplitude: WAVE_AMPLITUDE,
+        frequency: WAVE_FREQUENCY,
+        opacity: [1.0, 0.3],
+        pulseDuration: 0.75,
+      };
+    case 'thinking':
+    case 'connecting':
+      return {
+        speed: WAVE_SPEED * 4,
+        amplitude: WAVE_AMPLITUDE / 4,
+        frequency: WAVE_FREQUENCY * 4,
+        opacity: [1.0, 0.3],
+        pulseDuration: 0.4,
+      };
+    case 'speaking':
+    // Upstream's wave switch has NO 'idle' arm: idle falls through to this
+    // same speaking/default arm (speed 10, amplitude 0.025, frequency 10,
+    // opacity 1), a gentle undulation (~1.05px centreline waviness, ~1.5px/s
+    // phase drift, measured on the md tile). Upstream's explicitly FLAT
+    // state is 'disconnected' -- the dedicated arm below. We had flattened
+    // idle instead; Rob wants upstream's look (2026-08-09).
+    case 'idle':
+      return {
+        speed: WAVE_SPEED * 2,
+        amplitude: WAVE_AMPLITUDE,
+        frequency: WAVE_FREQUENCY,
+        opacity: 1.0,
+        pulseDuration: 0,
+      };
+    // Upstream's EXPLICIT flat state, measured: 'disconnected' is the one
+    // arm of their wave switch that zeroes the line. First-class here since
+    // 2026-08-10 (Rob: 'the disconnected wave needs to be that kind of flat
+    // line'). `default` keeps the same flat targets for out-of-union
+    // strings, which normalizeState prevents real callers from reaching.
+    case 'disconnected':
+      return {
+        speed: WAVE_SPEED,
+        amplitude: 0,
+        frequency: 0,
+        opacity: 1.0,
+        pulseDuration: 0,
+      };
+    default:
+      return {
+        speed: WAVE_SPEED,
+        amplitude: 0,
+        frequency: 0,
+        opacity: 1.0,
+        pulseDuration: 0,
+      };
+  }
+}

package/src/test-utils/fake-clock.ts

@@ -0,0 +1,88 @@
+import { vi, beforeEach, afterEach } from 'vitest';
+
+/**
+ * Shared fake `requestAnimationFrame` + `performance.now()` clock for tests
+ * that need to drive time deterministically instead of racing real timers.
+ *
+ * requestAnimationFrame's timestamp and performance.now() share a time origin
+ * per spec, so production code can read either. Stubbing them off the same
+ * fake `now` keeps the two from silently disagreeing.
+ *
+ * The stub holds a REAL per-registration queue, matching a real browser: a
+ * single frame fires every callback that was pending BEFORE that frame, all
+ * with the SAME advanced `now`, in registration order -- so two
+ * independently-animating things under test (e.g. a `createTween`'s own step
+ * loop and `ShaderCanvas`'s separate `draw` loop, both requestAnimationFrame
+ * consumers, both mounted at once) tick together on one `advance()` call
+ * instead of the second silently stealing the first's slot.
+ *
+ * This used to be a single PENDING-callback slot, not a queue: a second
+ * consumer scheduling a new frame before `advance()` ran overwrote the
+ * first rather than queueing behind it. That was fine for anything that only
+ * ever has ONE thing pending at a time (the common case, e.g. bar/grid/radial's
+ * single sequencer tick, or a lone `createTween`), which is why switching to a
+ * queue does not change any of those. It was NOT fine for a mounted shader
+ * variant, where a tween and ShaderCanvas's `draw` are both independently
+ * pending at once: `draw` always registers last and re-arms itself every
+ * `advance()`, so it permanently "won" the single slot and the tween's step
+ * never fired -- silently defeating any test trying to prove something holds
+ * while UNIFORM VALUES genuinely change every frame (see
+ * `variant-custom.test.tsx`'s recompile-guard test for the concrete case this
+ * was fixed for).
+ *
+ * `cancelAnimationFrame` cancels by id now (each `requestAnimationFrame` call
+ * gets its own), not by clearing whatever happens to be in the single slot --
+ * required once more than one callback can be pending at a time, so a
+ * `cancelAnimationFrame(idA)` cannot accidentally drop a DIFFERENT pending
+ * callback `idB`.
+ *
+ * Call once per `describe` block (or at file scope for the whole file); it
+ * registers `beforeEach`/`afterEach` hooks scoped to wherever it is called,
+ * exactly like inlining the hooks would, and returns the driver bound to
+ * that scope's fake clock.
+ */
+export function installFakeClock() {
+  let now = 0;
+  let nextId = 1;
+  let pending = new Map<number, (t: number) => void>();
+
+  beforeEach(() => {
+    now = 0;
+    nextId = 1;
+    pending = new Map();
+    vi.stubGlobal('requestAnimationFrame', (cb: FrameRequestCallback) => {
+      const id = nextId++;
+      pending.set(id, cb as (t: number) => void);
+      return id;
+    });
+    vi.stubGlobal('cancelAnimationFrame', (id: number) => {
+      pending.delete(id);
+    });
+    vi.stubGlobal('performance', { now: () => now });
+  });
+
+  afterEach(() => vi.unstubAllGlobals());
+
+  /**
+   * Advance the fake clock and run every callback pending BEFORE this call,
+   * all at the new `now` -- one simulated frame. A callback that reschedules
+   * itself (the normal RAF-loop pattern) lands in a FRESH pending set for the
+   * NEXT `advance()`, not this one: snapshotting the callback list before
+   * invoking any of them is what keeps a self-rescheduling loop from looping
+   * forever inside a single `advance()` call, matching how a real browser
+   * frame never re-enters itself either.
+   */
+  function advance(ms: number) {
+    now += ms;
+    const callbacks = Array.from(pending.values());
+    pending = new Map();
+    for (const cb of callbacks) cb(now);
+  }
+
+  /** Whether at least one requestAnimationFrame callback is currently pending. */
+  function isFramePending(): boolean {
+    return pending.size > 0;
+  }
+
+  return { advance, isFramePending };
+}

package/src/ui/action-icons.ts

@@ -1,7 +1,7 @@
 import type { Component } from 'solid-js';
 import {
   Copy, ThumbsUp, ThumbsDown, RefreshCw, Pencil,
-  Share, Bookmark, Download, Link, Trash2, Check, X, Star, Flag, Reply, MoreHorizontal,
+  Share, Bookmark, Download, Link, Trash2, Check, X, Star, Flag, Reply, MoreHorizontal, Volume2,
 } from 'lucide-solid';
 import type { ChatMessageAction } from '../elements/chat-types';
 
@@ -33,6 +33,7 @@ const ICONS: Record<string, IconComponent> = {
   flag: Flag,
   reply: Reply,
   more: MoreHorizontal,
+  'volume-2': Volume2,
 };
 
 /** Resolve a curated icon name to its component, or `undefined` when unknown

package/src/ui/icon.tsx

@@ -8,6 +8,7 @@ import {
   House, Clock, Lock, Box, Briefcase, PanelLeft, Circle, SlidersHorizontal, Workflow, SquarePen,
   Archive, ArrowUp, Bookmark, Copy, Ellipsis, ExternalLink, Flag,
   GitBranch, GitPullRequest, ListFilter, RotateCw,
+  Moon, Sun,
 } from 'lucide-solid';
 
 type IconComponent = Component<{ class?: string }>;
@@ -64,6 +65,9 @@ const NAMED_ICONS: Record<string, IconComponent> = {
   'git-pull-request': GitPullRequest,
   'list-filter': ListFilter,
   'rotate-cw': RotateCw,
+  // Theme / appearance glyphs.
+  moon: Moon,
+  sun: Sun,
 };
 
 /** Render an item icon.

package/src/ui/overlay.tsx

@@ -206,7 +206,14 @@ export function usePosition(
     // on unmount via onCleanup.
     const cleanup = autoUpdate(ref, float, update);
     let ro: ResizeObserver | undefined;
-    if (typeof ResizeObserver === 'function') {
+    // Only a REAL element can be observed. The composer's trigger menu anchors to a
+    // VIRTUAL reference (a caret-rect object exposing just getBoundingClientRect, no
+    // DOM node); ResizeObserver.observe() throws "parameter 1 is not of type 'Element'"
+    // on it, and that uncaught throw aborts this effect before onCleanup registers,
+    // which corrupted the menu's reactive scope so it never re-opened after the first
+    // time. autoUpdate already tracks the virtual anchor; this ResizeObserver is a
+    // real-element-only add-on for ancestor/element resizes.
+    if (typeof ResizeObserver === 'function' && ref instanceof Element) {
       ro = new ResizeObserver(update);
       ro.observe(ref);
       for (const ancestor of getOverflowAncestors(ref)) {

package/src/ui/resizable.tsx

@@ -237,7 +237,13 @@ function ResizablePanel(props: ResizablePanelProps) {
 // --- ResizableHandle ---
 
 export interface ResizableHandleProps extends JSX.HTMLAttributes<HTMLDivElement> {
-  withHandle?: boolean;
+  /**
+   * Divider affordance drawn inside the 8px grab zone:
+   * - `line` (default) — a 1px hairline, transparent at rest, tinting on hover/drag.
+   * - `grip` — a dotted grip handle.
+   * - `none` — no visible divider (invisible hit-area only).
+   */
+  handle?: 'line' | 'grip' | 'none';
   onPanelResize?: (delta: number) => void;
   /** Keyboard nudge step in pixels (default 16). Home/End jump to min/max. */
   keyboardStep?: number;
@@ -265,12 +271,15 @@ function readBound(el: HTMLElement, kind: 'min' | 'max', containerPx: number, fa
 
 function ResizableHandle(props: ResizableHandleProps) {
   const [local, rest] = splitProps(props, [
-    'withHandle', 'onPanelResize', 'class', 'keyboardStep', 'static', 'orientation',
+    'handle', 'onPanelResize', 'class', 'keyboardStep', 'static', 'orientation',
   ]);
   const ctx = useContext(ResizableContext);
   const orientation = () => local.orientation ?? ctx?.orientation ?? 'horizontal';
   const [isDragging, setIsDragging] = createSignal(false);
+  const [hovering, setHovering] = createSignal(false);
   const isStatic = () => !!local.static;
+  // Divider affordance; `line` (hairline) is the default.
+  const mode = () => local.handle ?? 'line';
 
   let startPos = 0;
   let prevEl: HTMLElement | null = null;
@@ -481,18 +490,33 @@ function ResizableHandle(props: ResizableHandleProps) {
     nextEl = null;
   };
 
+  // The full-strip drag highlight is only for `grip`/`none`; `line` shows its tint
+  // on the hairline alone (below), so the whole 8px zone must stay transparent.
+  const showStripHighlight = () => isDragging() && mode() !== 'line';
+  // Hairline tint (priority: dragging > hovering > rest). Inline CSS-var values
+  // with literal-hex fallbacks — this renders in a shadow root AND in light-DOM
+  // stories, where Tailwind arbitrary-value classes aren't reliably present.
+  const lineColor = () =>
+    isDragging()
+      ? 'var(--color-muted, #f4f4f5)'
+      : hovering()
+        ? 'var(--color-border, #e4e4e7)'
+        : 'transparent';
+
   return (
     <div
       class={cn('relative flex items-center justify-center', local.class)}
       style={{
         cursor: isStatic() ? 'default' : isHoriz() ? 'col-resize' : 'row-resize',
         [isHoriz() ? 'width' : 'height']: '8px',
-        'background': isDragging() ? 'var(--color-muted-foreground, #98989f)' : 'transparent',
-        'opacity': isDragging() ? '0.3' : '1',
+        'background': showStripHighlight() ? 'var(--color-muted-foreground, #98989f)' : 'transparent',
+        'opacity': showStripHighlight() ? '0.3' : '1',
       }}
       onPointerDown={handlePointerDown}
       onPointerMove={handlePointerMove}
       onPointerUp={handlePointerUp}
+      onPointerEnter={() => setHovering(true)}
+      onPointerLeave={() => setHovering(false)}
       onDblClick={handleDblClick}
       onKeyDown={handleKeyDown}
       role="separator"
@@ -505,7 +529,7 @@ function ResizableHandle(props: ResizableHandleProps) {
       aria-valuenow={valueNow()}
       {...rest}
     >
-      <Show when={local.withHandle}>
+      <Show when={mode() === 'grip'}>
         <div
           class={cn(
             'z-10 flex items-center justify-center',
@@ -529,6 +553,20 @@ function ResizableHandle(props: ResizableHandleProps) {
           </svg>
         </div>
       </Show>
+      <Show when={mode() === 'line'}>
+        {/* 1px hairline centered in the 8px grab zone; never eats the drag. */}
+        <div
+          class="pointer-events-none"
+          data-handle-line
+          style={{
+            position: 'absolute',
+            background: lineColor(),
+            ...(isHoriz()
+              ? { top: '0', bottom: '0', left: '50%', width: '1px', transform: 'translateX(-0.5px)' }
+              : { left: '0', right: '0', top: '50%', height: '1px', transform: 'translateY(-0.5px)' }),
+          }}
+        />
+      </Show>
     </div>
   );
 }
@@ -539,8 +577,8 @@ export interface ResizableProps {
   orientation?: Orientation;
   /** Fired on drag-end / keyboard resize / visibility change with the current panel sizes (percent). */
   onChange?: (sizes: number[]) => void;
-  /** Show a visible grip on each interactive handle. */
-  withHandle?: boolean;
+  /** Divider affordance on each interactive handle: `line` (default), `grip`, or `none`. */
+  handle?: 'line' | 'grip' | 'none';
   class?: string;
   /** Which panel index is maximized (null = none). Hides the others. */
   maximizedIndex?: number | null;
@@ -559,7 +597,7 @@ export interface ResizableProps {
  */
 function Resizable(props: ResizableProps) {
   const [local] = splitProps(props, [
-    'orientation', 'onChange', 'withHandle', 'class', 'children', 'maximizedIndex', 'onMaximizeChange',
+    'orientation', 'onChange', 'handle', 'class', 'children', 'maximizedIndex', 'onMaximizeChange',
   ]);
   const orientation = () => local.orientation ?? 'horizontal';
 
@@ -627,7 +665,7 @@ function Resizable(props: ResizableProps) {
             <>
               <Show when={i() > 0}>
                 <ResizableHandle
-                  withHandle={local.withHandle}
+                  handle={local.handle ?? 'line'}
                   static={panel.locked || renderPanels()[i() - 1]?.locked}
                   onPanelResize={() => emitChange()}
                 />

package/dist/elements/chunks/action-icons-Dtl8Ox5D.js

@@ -1 +0,0 @@
-import{e as t}from"./ellipsis-CUiEJ6R1.js";import{f as i,b as s,s as p,p as m,c as k}from"./share-BdenF0wQ.js";import{c as d}from"./check-fhmRksq_.js";import{d as y}from"./download-BDQwcFav.js";import{l as c}from"./link-vko7AttA.js";import{I as a}from"./Icon-C2LTALdM.js";import{c as o,m as r}from"./define-CNSKFZCd.js";import{s as n}from"./star-DY6z1UUH.js";import{a as f,t as h}from"./thumbs-up-BR33KLfA.js";import{x as l}from"./x-Ckwicf6g.js";var v=[["path",{d:"M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8",key:"v9h5vc"}],["path",{d:"M21 3v5h-5",key:"1q7to0"}],["path",{d:"M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16",key:"3uifl3"}],["path",{d:"M8 16H3v5",key:"1cv678"}]],x=e=>o(a,r(e,{name:"RefreshCw",iconNode:v})),M=x,g=[["polyline",{points:"9 17 4 12 9 7",key:"hvgpf2"}],["path",{d:"M20 18v-2a4 4 0 0 0-4-4H4",key:"5vmcpk"}]],u=e=>o(a,r(e,{name:"Reply",iconNode:g})),w=u,N=[["path",{d:"M3 6h18",key:"d0wm0j"}],["path",{d:"M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6",key:"4alrt4"}],["path",{d:"M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2",key:"v07s0e"}],["line",{x1:"10",x2:"10",y1:"11",y2:"17",key:"1uufr5"}],["line",{x1:"14",x2:"14",y1:"11",y2:"17",key:"xtxkd"}]],C=e=>o(a,r(e,{name:"Trash2",iconNode:N})),H=C;const L={copy:k,like:h,dislike:f,regenerate:M,edit:m,share:p,bookmark:s,download:y,link:c,trash:H,check:d,x:l,star:n,flag:i,reply:w,more:t};function R(e){if(e)return L[e]}const b={copy:"Copy",like:"Like",dislike:"Dislike",regenerate:"Regenerate",edit:"Edit"};export{b as B,R as a};

package/dist/elements/chunks/arrow-left-GbBceGBE.js

@@ -1 +0,0 @@
-import{I as o}from"./Icon-C2LTALdM.js";import{c as m,m as r}from"./define-CNSKFZCd.js";var e=[["path",{d:"m12 19-7-7 7-7",key:"1l729n"}],["path",{d:"M19 12H5",key:"x3x0zl"}]],t=a=>m(o,r(a,{name:"ArrowLeft",iconNode:e})),p=t;export{p as a};

package/dist/elements/chunks/chat-thread-Dz2qbzvI.js

@@ -1 +0,0 @@
-import{g as A,p as Q,s as B,c as r,u as z,k as M,m as _,i,t as c,v as U,w as G,x as J,h as K,o as N,S as h,q as b,n as W,F as X,a as E,b as q,C as Y}from"./define-CNSKFZCd.js";import{s as Z,n as ee}from"./composer-BZyPU6gD.js";import{c as $}from"./cn-CU7UAWzk.js";import{M as te,a as I,b as re}from"./message-CgKytiSB.js";import{c as ne}from"./message-feedback-Ds3-US0e.js";import{M as le}from"./model-switcher-BMtXGwLU.js";import{B as se}from"./button-DBDZebGr.js";import{c as oe}from"./chevron-down-DcRg1aRU.js";import{C as ae,a as ie,b as ce,c as ue,d as de,e as ge,f as he,g as me}from"./context-Cx6eQA_G.js";import{D as ve}from"./default-input-BZcwyKcP.js";const fe=50;function xe(){const[e,u]=A(!0);let o,s=!0;function x(){if(!o)return;const{scrollTop:g,scrollHeight:w,clientHeight:S}=o,y=w-g-S<fe;u(y),s=y}function k(g="smooth"){o&&(o.scrollTo({top:o.scrollHeight,behavior:g}),s=!0,u(!0))}function m(){s&&requestAnimationFrame(()=>k("instant"))}function T(g){o=g,g.addEventListener("scroll",x,{passive:!0});const w=new MutationObserver(m);w.observe(g,{childList:!0,subtree:!0,characterData:!0}),Q(()=>{g.removeEventListener("scroll",x),w.disconnect()})}return{ref:T,isAtBottom:e,scrollToBottom:k}}var pe=c("<div role=log tabindex=0>"),be=c("<div>"),we=c("<div aria-hidden=true>");const L=U();function Ce(){const e=G(L);if(!e)throw new Error("useChatContainer must be used within ChatContainer");return e}function ke(e){const[u,o]=B(e,["children","class"]),{ref:s,isAtBottom:x,scrollToBottom:k}=xe();return r(L.Provider,{value:{isAtBottom:x,scrollToBottom:k},get children(){var m=pe();return z(s,m),M(m,_({get class(){return $("flex flex-col overflow-y-auto",u.class)}},o),!1,!0),i(m,()=>u.children),m}})}function Te(e){const[u,o]=B(e,["children","class"]);return(()=>{var s=be();return M(s,_({get class(){return $("flex w-full flex-col",u.class)}},o),!1,!0),i(s,()=>u.children),s})()}function ye(e){const[u,o]=B(e,["class"]);return(()=>{var s=we();return M(s,_({get class(){return $("h-px w-full shrink-0 scroll-mt-4",u.class)}},o),!1,!1),s})()}function Se(e){const{isAtBottom:u,scrollToBottom:o}=Ce();return r(se,{get variant(){return e.variant??"outline"},get size(){return e.size??"sm"},"aria-label":"Scroll to bottom",get class(){return $("h-10 w-10 rounded-full transition-all duration-150 ease-out",u()?"pointer-events-none translate-y-4 scale-95 opacity-0":"translate-y-0 scale-100 opacity-100",e.class)},onClick:()=>o(),get children(){return r(oe,{class:"h-5 w-5"})}})}var $e=c('<aside part=sidebar class="flex w-64 shrink-0 flex-col overflow-hidden border-r border-border"><slot name=sidebar>'),Ae=c("<header part=header class=shrink-0><slot name=header>"),Be=c("<slot name=empty>"),Me=c('<div class="absolute bottom-4 left-1/2 flex w-full max-w-3xl -translate-x-1/2 justify-center px-5">'),_e=c('<div class="shrink-0 px-4"><div class="mx-auto flex max-w-3xl items-center gap-2 pb-2"><slot name=composer-actions>'),He=c("<slot name=composer>"),Fe=c('<div part=footer class="shrink-0 px-4 pb-3"><div class="mx-auto max-w-3xl text-center text-xs text-muted-foreground"><slot name=footer>'),Ve=c('<div><div class="flex h-full min-w-0 flex-1 flex-col"><div class="relative flex-1 overflow-hidden"></div><div class="shrink-0 px-4 pb-4"><div class="mx-auto max-w-3xl">'),ze=c('<div class="text-sm font-semibold text-foreground">'),Ee=c("<div class=space-y-1.5>"),qe=c('<header part=header-bar class="flex h-14 shrink-0 items-center justify-between border-b border-border px-5"><div class="flex items-center gap-2"><slot name=header-start></slot></div><div class="flex items-center gap-2"><slot name=header-end>'),Ie=c("<div>");function Le(e){const u=J(),o=()=>e.actionsReveal==="hover"?"hover":"always";let s;const x=ne({emit:n=>{var l;return(l=e.onMessageAction)==null?void 0:l.call(e,n)},target:()=>s}),[k,m]=A(e.value??""),[T,g]=A([]),w=()=>typeof e.value=="string"?e.value:k();K(()=>{const n=e.value;n!=null&&typeof n!="string"&&m(n)});const S=n=>{var l;m(n),(l=e.onValueChange)==null||l.call(e,n)},y=()=>{g([]),e.value===void 0&&m("")},H=()=>{var n;(n=e.onSubmit)==null||n.call(e,{value:Z(ee(w())),attachments:T()}),y()},R=n=>{var l,d;(e.suggestionMode??"submit")==="fill"?(S(n),(l=e.onSuggestionClick)==null||l.call(e,n)):((d=e.onSubmit)==null||d.call(e,{value:n,attachments:T()}),y())},j=()=>!!(e.chatTitle||e.models||e.context||e.headerStart||e.headerEnd),D=()=>e.persistSuggestions||e.messages.length===0?e.suggestions:void 0,O=()=>e.scrollButton!==!1;return N(()=>{var n;(n=e.controllerRef)==null||n.call(e,{focus:l=>{var d;return(d=s?.querySelector('[contenteditable]:not([contenteditable="false"]), textarea'))==null?void 0:d.focus(l)},clear:()=>{var l;m(""),g([]),(l=e.onValueChange)==null||l.call(e,"")},send:()=>H(),scrollToBottom:l=>{const d=s?.querySelector(".overflow-y-auto");d?.scrollTo({top:d.scrollHeight,behavior:l??"smooth"})}})}),r(Y,{get proseSize(){return e.proseSize},get codeTheme(){return e.codeTheme},get codeHighlight(){return e.codeHighlight!==!1},get portalMount(){return u.portalMount()},get children(){var n=Ve(),l=n.firstChild,d=l.firstChild,F=d.nextSibling,P=F.firstChild;return z(t=>s=t,n),i(n,r(h,{get when(){return e.sidebar},get children(){var t=$e(),a=t.firstChild;return a._$owner=b(),t}}),l),i(l,r(h,{get when(){return e.headerFull},get fallback(){return r(h,{get when(){return j()},get children(){var t=qe(),a=t.firstChild,p=a.firstChild,f=a.nextSibling,C=f.firstChild;return p._$owner=b(),i(a,r(h,{get when(){return e.chatTitle},get children(){var v=ze();return i(v,()=>e.chatTitle),v}}),null),i(f,r(h,{get when(){return e.models},get children(){return r(le,{get models(){return e.models},get currentModelId(){var v;return e.currentModel??((v=e.models[0])==null?void 0:v.id)??""},onModelChange:v=>{var V;return(V=e.onModelChange)==null?void 0:V.call(e,v)}})}}),C),i(f,r(h,{get when(){return e.context},get children(){return r(ae,{get usedTokens(){return e.context.usedTokens},get maxTokens(){return e.context.maxTokens},get inputTokens(){return e.context.inputTokens},get outputTokens(){return e.context.outputTokens},get estimatedCost(){return e.context.estimatedCost},get children(){return[r(ie,{}),r(ce,{get children(){return[r(ue,{}),r(de,{get children(){var v=Ee();return i(v,r(ge,{}),null),i(v,r(he,{}),null),v}}),r(me,{})]}})]}})}}),C),C._$owner=b(),t}})},get children(){var t=Ae(),a=t.firstChild;return a._$owner=b(),t}}),d),i(d,r(ke,{class:"h-full px-4 py-3",get children(){return[r(Te,{class:"mx-auto w-full max-w-3xl space-y-4",get children(){return[r(h,{get when(){return W(()=>!!e.empty)()&&e.messages.length===0},get children(){var t=Be();return t._$owner=b(),t}}),r(X,{get each(){return e.messages},children:t=>{const a=r(te,{get content(){return t.content},get reasoning(){return t.reasoning},get tools(){return t.tools},get attachments(){return t.attachments},get isUser(){return t.role==="user"},get markdown(){return t.role==="assistant"},get actions(){return t.actions},get actionsReveal(){return o()},get activeFeedback(){return x.resolveFeedback(t)},get copied(){return x.isCopied(t.id)},onAction:f=>x.handleAction(t,f)}),p=o()==="hover"?"group ":"";return r(h,{get when(){return t.avatar},get fallback(){return r(I,{get class(){return`${p}${t.role==="user"?"flex-col items-end":"flex-col items-start"}`},children:a})},children:f=>r(I,{class:p,get children(){return[r(re,{get src(){return f().src??""},get alt(){return f().alt??""},get fallback(){return f().fallback}}),(()=>{var C=Ie();return i(C,a),E(()=>q(C,`flex min-w-0 flex-1 flex-col ${t.role==="user"?"items-end":"items-start"}`)),C})()]}})})}}),r(ye,{})]}}),r(h,{get when(){return O()},get children(){var t=Me();return i(t,r(Se,{class:"shadow-sm"})),t}})]}})),i(l,r(h,{get when(){return e.composerActions},get children(){var t=_e(),a=t.firstChild,p=a.firstChild;return p._$owner=b(),t}}),F),i(P,r(h,{get when(){return e.composer},get fallback(){return r(ve,{get value(){return w()},get placeholder(){return e.placeholder},get loading(){return e.loading===!0},get suggestions(){return D()},get attachments(){return T()},get search(){return e.search===!0},get voice(){return e.voice===!0},get triggers(){return e.triggers},get kindIcons(){return e.kindIcons},onValueChange:S,onSubmit:H,onSuggestionClick:R,onAttachmentsChange:t=>{var a;g(t),(a=e.onAttachmentsChange)==null||a.call(e,t)},onSearch:()=>{var t;return(t=e.onSearch)==null?void 0:t.call(e)},onVoice:()=>{var t;return(t=e.onVoice)==null?void 0:t.call(e)}})},get children(){var t=He();return t._$owner=b(),t}})),i(l,r(h,{get when(){return e.footer},get children(){var t=Fe(),a=t.firstChild,p=a.firstChild;return p._$owner=b(),t}}),null),E(()=>q(n,`flex h-full bg-background ${e.class??""}`)),n}})}export{Le as C};

package/dist/elements/chunks/check-fhmRksq_.js

@@ -1 +0,0 @@
-import{I as m}from"./Icon-C2LTALdM.js";import{c as o,m as r}from"./define-CNSKFZCd.js";var c=[["path",{d:"M20 6 9 17l-5-5",key:"1gmf2c"}]],e=a=>o(m,r(a,{name:"Check",iconNode:c})),f=e;export{f as c};

package/dist/elements/chunks/chevron-down-DcRg1aRU.js

@@ -1 +0,0 @@
-import{I as r}from"./Icon-C2LTALdM.js";import{c as a,m}from"./define-CNSKFZCd.js";var e=[["path",{d:"m6 9 6 6 6-6",key:"qrunsl"}]],n=o=>a(r,m(o,{name:"ChevronDown",iconNode:e})),p=n;export{p as c};

package/dist/elements/chunks/chevron-right-ChzBcNJ-.js

@@ -1 +0,0 @@
-import{I as o}from"./Icon-C2LTALdM.js";import{c as a,m as r}from"./define-CNSKFZCd.js";var t=[["path",{d:"m9 18 6-6-6-6",key:"mthhwq"}]],e=m=>a(o,r(m,{name:"ChevronRight",iconNode:t})),h=e;export{h as c};

package/dist/elements/chunks/circle-B4fTe9v6.js

@@ -1 +0,0 @@
-import{I as c}from"./Icon-C2LTALdM.js";import{c as m,m as o}from"./define-CNSKFZCd.js";var a=[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}]],e=r=>m(c,o(r,{name:"Circle",iconNode:a})),i=e;export{i as c};

package/dist/elements/chunks/circle-check-CJV-3Rem.js

@@ -1 +0,0 @@
-import{I as c}from"./Icon-C2LTALdM.js";import{c as r,m as a}from"./define-CNSKFZCd.js";var e=[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["path",{d:"m9 12 2 2 4-4",key:"dzmm74"}]],o=m=>r(c,a(m,{name:"CircleCheck",iconNode:e})),i=o;export{i as c};