@kitn.ai/ui 0.28.0 → 0.30.0

package/src/components/tool.tsx

@@ -1,190 +0,0 @@
-import { type JSX, splitProps, createSignal, Show, For } from 'solid-js';
-import { cn } from '../utils/cn';
-import { Collapsible, CollapsibleTrigger, CollapsibleContent, type CollapsibleController } from '../ui/collapsible';
-import { Button } from '../ui/button';
-import { CheckCircle, ChevronDown, Loader2, Settings, XCircle } from 'lucide-solid';
-import type { ToolPart } from './tool-types';
-export type { ToolPart } from './tool-types';
-
-export interface ToolProps {
-  toolPart: ToolPart;
-  defaultOpen?: boolean;
-  /** Gate the disclosure trigger (programmatic control still works). */
-  disabled?: boolean;
-  /** Receive the open controller once mounted (forwarded from the Collapsible),
-   *  so a parent (the kai-tool facade) can drive/observe open state. */
-  controllerRef?: (api: CollapsibleController) => void;
-  class?: string;
-}
-
-function formatValue(value: unknown): string {
-  if (value === null) return 'null';
-  if (value === undefined) return 'undefined';
-  if (typeof value === 'string') return value;
-  if (typeof value === 'object') return JSON.stringify(value, null, 2);
-  return String(value);
-}
-
-function ToolStateIcon(props: { state: ToolPart['state'] }) {
-  return (
-    <>
-      <Show when={props.state === 'input-streaming'}>
-        <Loader2 class="size-4 animate-spin text-blue-500" />
-      </Show>
-      <Show when={props.state === 'input-available'}>
-        <Settings class="size-4 text-orange-500" />
-      </Show>
-      <Show when={props.state === 'output-available'}>
-        <CheckCircle class="size-4 text-green-500" />
-      </Show>
-      <Show when={props.state === 'output-error'}>
-        <XCircle class="size-4 text-red-500" />
-      </Show>
-    </>
-  );
-}
-
-// Status chips: a hue as text over a 15% translucent fill of the same hue
-// (mirroring the inline-code chip). The TEXT color comes from a theme token
-// (--color-tool-*) whose light value is darkened so it reaches WCAG AA (4.5:1)
-// on the faint fill, while dark mode keeps a brighter hue for AA on the dark
-// surface — both modes resolve via the token's `.dark` override. The FILL keeps
-// a fixed bright hue so the chip's colored tint looks the same in both modes.
-const STATE_TOKEN: Record<ToolPart['state'], string> = {
-  'input-streaming': 'var(--color-tool-blue)',
-  'input-available': 'var(--color-tool-amber)',
-  'output-available': 'var(--color-tool-green)',
-  'output-error': 'var(--color-tool-red)',
-};
-const STATE_FILL: Record<ToolPart['state'], string> = {
-  'input-streaming': 'hsl(217 91% 60%)', // blue
-  'input-available': 'hsl(38 92% 50%)', // amber
-  'output-available': 'hsl(142 71% 45%)', // green
-  'output-error': 'hsl(0 84% 60%)', // red
-};
-
-function stateChip(state: ToolPart['state']): JSX.CSSProperties {
-  return {
-    color: STATE_TOKEN[state],
-    background: `color-mix(in oklab, ${STATE_FILL[state]} 15%, transparent)`,
-  };
-}
-
-function ToolStateBadge(props: { state: ToolPart['state'] }) {
-  const baseClasses = 'px-2 py-1 rounded-full text-xs font-medium';
-  return (
-    <>
-      <Show when={props.state === 'input-streaming'}>
-        <span class={baseClasses} style={stateChip('input-streaming')}>
-          Processing
-        </span>
-      </Show>
-      <Show when={props.state === 'input-available'}>
-        <span class={baseClasses} style={stateChip('input-available')}>
-          Ready
-        </span>
-      </Show>
-      <Show when={props.state === 'output-available'}>
-        <span class={baseClasses} style={stateChip('output-available')}>
-          Completed
-        </span>
-      </Show>
-      <Show when={props.state === 'output-error'}>
-        <span class={baseClasses} style={stateChip('output-error')}>
-          Error
-        </span>
-      </Show>
-    </>
-  );
-}
-
-function Tool(props: ToolProps) {
-  const [local, rest] = splitProps(props, ['toolPart', 'defaultOpen', 'disabled', 'controllerRef', 'class']);
-  // Drive the Collapsible UNCONTROLLED (seed from defaultOpen) and read its open
-  // state via the controller it hands up — that same controller is forwarded to
-  // the facade so wireDisclosure can drive show/hide/toggle.
-  const [api, setApi] = createSignal<CollapsibleController>();
-  const isOpen = () => api()?.open() ?? (local.defaultOpen ?? false);
-
-  const state = () => local.toolPart.state;
-  const input = () => local.toolPart.input;
-  const output = () => local.toolPart.output;
-
-  return (
-    <div class={cn('mt-3 overflow-hidden rounded-lg bg-surface', local.class)}>
-      <Collapsible
-        defaultOpen={local.defaultOpen}
-        disabled={local.disabled}
-        controllerRef={(a) => { setApi(a); local.controllerRef?.(a); }}
-      >
-        <CollapsibleTrigger
-          as={(triggerProps: JSX.HTMLAttributes<HTMLButtonElement>) => (
-            <Button
-              variant="ghost"
-              class="h-auto w-full justify-between rounded-b-none px-3 py-2 font-normal"
-              {...triggerProps}
-            >
-              <div class="flex items-center gap-2">
-                <ToolStateIcon state={state()} />
-                <span class="font-mono text-sm font-medium">{local.toolPart.type}</span>
-                <ToolStateBadge state={state()} />
-              </div>
-              <ChevronDown class={cn('size-4 transition-transform', isOpen() && 'rotate-180')} />
-            </Button>
-          )}
-        />
-        <CollapsibleContent
-          class="data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down overflow-hidden"
-        >
-          <div class="space-y-3 p-3">
-            <Show when={input() && Object.keys(input()!).length > 0}>
-              <div>
-                <h4 class="text-muted-foreground mb-2 text-sm font-medium">Input</h4>
-                <div class="rounded bg-surface-strong p-2 font-mono text-sm">
-                  <For each={Object.entries(input()!)}>
-                    {([key, value]) => (
-                      <div class="mb-1">
-                        <span class="text-muted-foreground">{key}:</span>{' '}
-                        <span>{formatValue(value)}</span>
-                      </div>
-                    )}
-                  </For>
-                </div>
-              </div>
-            </Show>
-
-            <Show when={output()}>
-              <div>
-                <h4 class="text-muted-foreground mb-2 text-sm font-medium">Output</h4>
-                <div tabindex={0} class="max-h-60 overflow-auto rounded bg-surface-strong p-2 font-mono text-sm">
-                  <pre class="whitespace-pre-wrap">{formatValue(output())}</pre>
-                </div>
-              </div>
-            </Show>
-
-            <Show when={state() === 'output-error' && local.toolPart.errorText}>
-              <div>
-                <h4 class="mb-2 text-sm font-medium text-red-600 dark:text-red-400">Error</h4>
-                <div class="rounded bg-red-500/10 p-2 text-sm">
-                  {local.toolPart.errorText}
-                </div>
-              </div>
-            </Show>
-
-            <Show when={state() === 'input-streaming'}>
-              <div class="text-muted-foreground text-sm">Processing tool call...</div>
-            </Show>
-
-            <Show when={local.toolPart.toolCallId}>
-              <div class="text-muted-foreground pt-2 text-xs">
-                <span class="font-mono">Call ID: {local.toolPart.toolCallId}</span>
-              </div>
-            </Show>
-          </div>
-        </CollapsibleContent>
-      </Collapsible>
-    </div>
-  );
-}
-
-export { Tool };

package/src/components/use-card-resolution.ts

@@ -1,44 +0,0 @@
-// Shared resolution controller for interactive cards. Precedence:
-//   props.resolution  (host-driven / re-hydrated)   >   local optimistic flip   >   none
-// A new `data` identity clears the local flip (a fresh card definition is interactive
-// again), but an explicit prop keeps it resolved. `isOptimistic` is true only for a
-// flip made this session (used to announce via role="status"; silent on re-hydrate).
-//
-// A resolution is `isResolved` when present at all; `isTerminal` for the finished
-// states (action | submit | expired) and `isDeferred` for `dismissed` — a set-aside
-// card that still offers a Reopen affordance.
-import { createSignal, createMemo, createEffect, on, type Accessor } from 'solid-js';
-import type { CardResolution } from '../primitives/card-contract';
-
-export interface ResolutionController<R extends CardResolution = CardResolution> {
-  resolution: Accessor<R | undefined>;
-  isResolved: Accessor<boolean>;
-  /** A finished resolution the user can't take back here (action | submit | expired). */
-  isTerminal: Accessor<boolean>;
-  /** A deferred resolution (`dismissed`) — set aside, still re-openable. */
-  isDeferred: Accessor<boolean>;
-  isOptimistic: Accessor<boolean>;
-  setLocal: (r: R) => void;
-}
-
-/** The resolution kinds that are finished and not re-openable from the card. */
-const TERMINAL_KINDS = new Set<CardResolution['kind']>(['action', 'submit', 'expired']);
-
-export function useCardResolution<R extends CardResolution = CardResolution>(opts: {
-  prop: Accessor<R | undefined>;
-  data: Accessor<unknown>;
-}): ResolutionController<R> {
-  const [local, setLocal] = createSignal<R | undefined>(undefined);
-  // Reset the optimistic flip when a NEW data identity arrives (deferred so mount
-  // doesn't clobber an initial prop). The prop still wins via the memo below.
-  createEffect(on(opts.data, () => setLocal(undefined), { defer: true }));
-  const resolution = createMemo(() => opts.prop() ?? local());
-  const isResolved = createMemo(() => resolution() !== undefined);
-  const isTerminal = createMemo(() => {
-    const r = resolution();
-    return r !== undefined && TERMINAL_KINDS.has(r.kind);
-  });
-  const isDeferred = createMemo(() => resolution()?.kind === 'dismissed');
-  const isOptimistic = createMemo(() => opts.prop() === undefined && local() !== undefined);
-  return { resolution, isResolved, isTerminal, isDeferred, isOptimistic, setLocal };
-}

package/src/components/voice-input.tsx

@@ -1,222 +0,0 @@
-import { splitProps, Show, For, createSignal, createEffect, on } from 'solid-js';
-import { cn } from '../utils/cn';
-import { Button } from '../ui/button';
-import { Tooltip } from '../ui/tooltip';
-import { useVoiceRecorder } from '../primitives/use-voice-recorder';
-import { useSpeechRecognition } from '../primitives/use-speech-recognition';
-
-/** Imperative handle exposed via `controllerRef` — surfaces the recorder's latent
- *  start/stop so the `<kai-voice-input>` facade can forward them as instance
- *  methods (push-to-talk). Both run the SAME getUserMedia → blob → transcription
- *  path as clicking the mic, so manual + programmatic emit identically. */
-export interface VoiceInputController {
-  /** Begin recording programmatically (same path as clicking the mic). */
-  start(): void;
-  /** Stop the in-progress recording (produces the blob → onTranscribe). */
-  stop(): void;
-}
-
-export interface VoiceInputProps {
-  onTranscribe: (audio: Blob) => Promise<string>;
-  onTranscription: (text: string) => void;
-  disabled?: boolean;
-  class?: string;
-  /** Host supplied a `transcribe` callback. When true the MediaRecorder →
-   *  onTranscribe path runs. When false the component prefers native
-   *  SpeechRecognition (capable browsers), falling back to record-only. */
-  hasTranscribe?: boolean;
-  /** BCP-47 language tag for native recognition (e.g. `en-US`). */
-  lang?: string;
-  /** Emit live partial transcripts via `onInterim` (native path only). */
-  interim?: boolean;
-  /** Live partial transcript from native recognition (when `interim`). */
-  onInterim?: (text: string) => void;
-  /** Fires whenever recording starts or stops. Guarded against the spurious
-   *  initial `false` — only true transitions emit (the facade maps this to
-   *  kai-recording-change). */
-  onRecordingChange?: (recording: boolean) => void;
-  /** Receive the imperative controller once mounted. The `<kai-voice-input>`
-   *  facade forwards these as element methods (start/stop). */
-  controllerRef?: (controller: VoiceInputController) => void;
-  /** A recognition session failed or produced nothing. `error` is the platform
-   *  error code, the thrown exception's name, or `no-result` when the session
-   *  ended with no error and no text. The facade maps this to kai-voice-error. */
-  onError?: (detail: { source: 'recognition'; error: string; message: string }) => void;
-}
-
-export function VoiceInput(props: VoiceInputProps) {
-  const [local] = splitProps(props, ['onTranscribe', 'onTranscription', 'disabled', 'class']);
-  const { isRecording, start, stop } = useVoiceRecorder();
-  const speech = useSpeechRecognition({ interim: props.interim });
-  const [isProcessing, setIsProcessing] = createSignal(false);
-
-  // Path selection (§6): a `transcribe` callback always wins (MediaRecorder →
-  // host transcriber). Otherwise prefer native SpeechRecognition when the browser
-  // supports it. The unsupported-no-callback case falls through to recording the
-  // blob (→ onTranscribe → kai-audio-captured) with no text.
-  const useNative = () => !props.hasTranscribe && speech.isSupported;
-
-  const label = () =>
-    isProcessing() ? 'Transcribing...' : isActive() ? 'Stop recording' : 'Voice input';
-
-  const isActive = () => (useNative() ? speech.isListening() : isRecording());
-
-  // Native path: SpeechRecognition resolves with the final transcript when it
-  // ends (click again or controller.stop()). Final text → onTranscription.
-  // Every other outcome reaches onError, so a session can never end in silence
-  // (W4 symptom 1: runtime errors set a signal nothing read, and an empty
-  // result fired no event at all).
-  async function beginRecognition() {
-    let errored = false;
-    try {
-      const text = await speech.start({
-        lang: props.lang,
-        onInterim: props.interim ? (t) => props.onInterim?.(t) : undefined,
-        onError: (error, message) => {
-          errored = true;
-          props.onError?.({ source: 'recognition', error, message });
-        },
-      });
-      if (text.trim()) {
-        local.onTranscription(text.trim());
-      } else if (!errored) {
-        // No error, no text: the session ended cleanly having heard nothing.
-        // Reported through the SAME error event (as `no-result`) rather than an
-        // empty kai-transcription, so kai-transcription keeps its contract
-        // (final text exists) and one listener covers every failed session; the
-        // code distinguishes "user said nothing" from "recognition broke".
-        props.onError?.({
-          source: 'recognition',
-          error: 'no-result',
-          message: 'Speech recognition ended without capturing any text',
-        });
-      }
-    } catch (err) {
-      // start() itself threw (unsupported, or the platform refused to start).
-      if (!errored) {
-        props.onError?.({
-          source: 'recognition',
-          error: err instanceof Error ? err.name : 'unknown',
-          message: err instanceof Error ? err.message : String(err),
-        });
-      }
-    }
-  }
-
-  // Begin recording, then run transcription once the blob resolves. Shared by the
-  // mic click and the imperative start() so both flows emit identically. start()
-  // resolves its Blob when the recorder stops (click again or controller.stop()).
-  async function beginRecording() {
-    try {
-      const blob = await start();
-      setIsProcessing(true);
-      try {
-        const text = await local.onTranscribe(blob);
-        if (text.trim()) local.onTranscription(text.trim());
-      } finally {
-        setIsProcessing(false);
-      }
-    } catch {
-      setIsProcessing(false);
-    }
-  }
-
-  // Drive whichever path is active (§6: start/stop must follow the live path).
-  function begin() {
-    if (useNative()) void beginRecognition();
-    else void beginRecording();
-  }
-  function end() {
-    if (useNative()) speech.stop();
-    else stop();
-  }
-
-  async function handleClick() {
-    if (isActive()) end();
-    else begin();
-  }
-
-  // Emit recording transitions to the host. `on(..., { defer: true })` skips the
-  // initial mount value (a spurious {recording:false}) — only real start/stop
-  // transitions fire. Drives BOTH manual (click) and programmatic (start/stop)
-  // since they all flip the active path's signal (MediaRecorder or recognition).
-  createEffect(on(isActive, (recording) => {
-    props.onRecordingChange?.(recording);
-  }, { defer: true }));
-
-  // Imperative controller (Pattern C): hand the facade a start/stop handle.
-  // start() runs the active path; stop() ends the in-progress session (resolving
-  // the active path's promise). Guard start() so a double-start while already
-  // active is a no-op (matches the click toggle).
-  props.controllerRef?.({
-    start: () => { if (!isActive()) begin(); },
-    stop: () => end(),
-  });
-
-  // Mic icon (not recording)
-  const MicIcon = () => (
-    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-      <path d="M12 1a3 3 0 00-3 3v8a3 3 0 006 0V4a3 3 0 00-3-3z" />
-      <path d="M19 10v2a7 7 0 01-14 0v-2" />
-      <line x1="12" y1="19" x2="12" y2="23" />
-      <line x1="8" y1="23" x2="16" y2="23" />
-    </svg>
-  );
-
-  // Square stop icon (recording)
-  const StopIcon = () => (
-    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
-      <rect x="4" y="4" width="16" height="16" rx="2" />
-    </svg>
-  );
-
-  // Spinner (processing transcription)
-  const Spinner = () => (
-    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="animate-spin">
-      <path d="M21 12a9 9 0 11-6.219-8.56" />
-    </svg>
-  );
-
-  return (
-    <div class={cn('relative inline-flex items-center justify-center', local.class)}>
-      {/* Animated pulse rings when recording */}
-      <Show when={isActive()}>
-        <For each={[0, 1, 2]}>
-          {(index) => (
-            <div
-              class="absolute inset-0 animate-ping rounded-full border-2 border-red-400/30"
-              style={{
-                "animation-delay": `${index * 0.3}s`,
-                "animation-duration": "2s",
-              }}
-            />
-          )}
-        </For>
-      </Show>
-
-      <Tooltip content={label()}>
-        <Button
-          variant="ghost"
-          size="icon-sm"
-          aria-label={label()}
-          onClick={handleClick}
-          disabled={local.disabled || isProcessing()}
-          class={cn(
-            'relative z-10 rounded-full transition-all duration-300',
-            isActive() && 'bg-destructive text-white hover:bg-destructive/80',
-          )}
-        >
-          <Show when={isProcessing()}>
-            <Spinner />
-          </Show>
-          <Show when={!isProcessing() && isActive()}>
-            <StopIcon />
-          </Show>
-          <Show when={!isProcessing() && !isActive()}>
-            <MicIcon />
-          </Show>
-        </Button>
-      </Tooltip>
-    </div>
-  );
-}