@kitn.ai/ui 0.17.0 → 0.18.0

package/src/components/toast.tsx

@@ -1,14 +1,14 @@
 import {
   createSignal, createEffect, onCleanup, on, For, Show, createMemo,
 } from 'solid-js';
-import { X, Check } from 'lucide-solid';
+import { X, Check, AlertTriangle, XCircle, Info } from 'lucide-solid';
 import { cn } from '../utils/cn';
 import { createPresence } from '../ui/overlay';
 import {
-  type ToastItem, type ToastVariant, resolveDuration,
+  type ToastItem, type ToastVariant, type ToastAppearance, resolveDuration,
 } from '../primitives/toast-store';
 
-export type { ToastItem, ToastVariant };
+export type { ToastItem, ToastVariant, ToastAppearance };
 
 /** Why a toast went away — surfaced to `onDismiss` (and the facade event). */
 export type ToastDismissReason = 'timeout' | 'close' | 'action';
@@ -27,6 +27,12 @@ export interface ToastRegionProps {
   /** Stacking: 'expanded' (default, full column) | 'collapsed' (Sonner-style
    *  pile that expands on hover/focus). Attribute: stack. */
   stack?: 'expanded' | 'collapsed';
+  /** Region-level default appearance for toasts that don't set their own. A
+   *  per-toast `appearance` always wins. Defaults to `'pill'`. */
+  appearance?: ToastAppearance;
+  /** Region-level default inverse treatment for toasts that don't set their own.
+   *  A per-toast `inverse` always wins. Defaults to `false`. */
+  inverse?: boolean;
   /** When set, this region renders only the toasts scoped to that element and
    *  anchors over its bounds (top-center), following it on scroll/resize. Unset =
    *  the global, viewport-anchored region. */
@@ -60,6 +66,10 @@ interface ToastProps {
   /** Hold the auto-dismiss timer (the region sets this true while the whole stack
    *  is hovered/expanded, so peers don't dismiss out from under the cursor). */
   paused?: boolean;
+  /** Region-level default appearance, used when the item doesn't set its own. */
+  appearance?: ToastAppearance;
+  /** Region-level default inverse, used when the item doesn't set its own. */
+  inverse?: boolean;
 }
 
 /**
@@ -73,6 +83,18 @@ export function Toast(props: ToastProps) {
   const presence = createPresence(open);
   const variant = () => props.item.variant ?? 'neutral';
   const dismissible = () => props.item.dismissible !== false;
+  // Item-level value wins, then the region-level default, then the built-in default.
+  const appearance = (): ToastAppearance => props.item.appearance ?? props.appearance ?? 'pill';
+  const inverse = (): boolean => props.item.inverse ?? props.inverse ?? false;
+
+  // Surface + accent colors, swapped for the high-contrast inverse treatment so the
+  // toast pops on EITHER appearance, in light AND dark. The inverse surface is the
+  // foreground color, so action/close/muted text switch to the background color.
+  const surfaceClass = () =>
+    inverse() ? 'bg-foreground text-background border-transparent' : 'bg-popover text-popover-foreground border-border';
+  const mutedClass = () => (inverse() ? 'text-background/70' : 'text-muted-foreground');
+  const actionClass = () => (inverse() ? 'text-background hover:text-background/80' : 'text-primary hover:text-primary/80');
+  const closeClass = () => (inverse() ? 'text-background/70 hover:text-background' : 'text-muted-foreground hover:text-foreground');
 
   let remaining = resolveDuration(props.item);
   let startedAt = 0;
@@ -128,45 +150,107 @@ export function Toast(props: ToastProps) {
     if (!keepOpen) { clear(); reason = 'action'; setOpen(false); }
   };
 
+  // Leading variant icon — shared by both appearances. In the card it sits at the
+  // top, so nudge it down to align with the title's cap height.
+  const iconAlign = () => (appearance() === 'card' ? 'mt-0.5' : undefined);
+  const VariantIcon = () => (
+    <>
+      <Show when={variant() === 'success'}>
+        <Check class={cn('size-4 shrink-0 text-emerald-500', iconAlign())} />
+      </Show>
+      <Show when={variant() === 'warning'}>
+        <AlertTriangle class={cn('size-4 shrink-0 text-warning', iconAlign())} />
+      </Show>
+      <Show when={variant() === 'error'}>
+        <XCircle class={cn('size-4 shrink-0 text-destructive', iconAlign())} />
+      </Show>
+      <Show when={variant() === 'info'}>
+        <Info class={cn('size-4 shrink-0 text-info', iconAlign())} />
+      </Show>
+    </>
+  );
+
+  const ActionButton = (p: { class?: string }) => (
+    <Show when={props.item.action}>
+      {(action) => (
+        <button
+          type="button"
+          onClick={act}
+          class={cn(
+            appearance() === 'card'
+              ? cn(
+                  'inline-flex shrink-0 items-center rounded-md border px-2.5 py-1 text-xs font-medium transition-colors',
+                  inverse()
+                    ? 'border-background/30 text-background hover:bg-background/10'
+                    : 'border-border text-foreground hover:bg-accent',
+                )
+              : cn('shrink-0 rounded-md text-sm font-medium underline-offset-2 hover:underline', actionClass()),
+            p.class,
+          )}
+        >
+          {action().label}
+        </button>
+      )}
+    </Show>
+  );
+
+  const CloseButton = () => (
+    <Show when={dismissible()}>
+      <button
+        type="button"
+        onClick={close}
+        aria-label="Dismiss"
+        class={cn(
+          '-mr-1 flex size-5 shrink-0 items-center justify-center rounded-md transition-colors',
+          closeClass(),
+        )}
+      >
+        <X class="size-3.5" />
+      </button>
+    </Show>
+  );
+
   return (
     <Show when={presence.present()}>
       <div
         ref={presence.setRef}
         role="status"
+        data-appearance={appearance()}
+        data-inverse={inverse() ? '' : undefined}
         data-closed={presence.state() === 'closed' ? '' : undefined}
         onPointerEnter={() => setHovered(true)}
         onPointerLeave={() => setHovered(false)}
         class={cn(
-          'pointer-events-auto flex items-center gap-3 rounded-full border px-4 py-2.5 text-sm shadow-lg',
-          'bg-popover text-popover-foreground border-border',
+          'pointer-events-auto border text-sm shadow-lg',
+          surfaceClass(),
           'animate-in fade-in-0 slide-in-from-top-4',
           'data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:slide-out-to-top-2',
+          appearance() === 'card'
+            ? 'flex min-w-[24rem] items-start gap-3 rounded-xl p-4 shadow-xl'
+            : 'flex items-center gap-3 rounded-full px-4 py-2.5',
         )}
       >
-        <Show when={variant() === 'success'}>
-          <Check class="size-4 shrink-0 text-emerald-500" />
-        </Show>
-        <span class="min-w-0 flex-1 truncate">{props.item.message}</span>
-        <Show when={props.item.action}>
-          {(action) => (
-            <button
-              type="button"
-              onClick={act}
-              class="text-primary hover:text-primary/80 shrink-0 rounded-md text-sm font-medium underline-offset-2 hover:underline"
-            >
-              {action().label}
-            </button>
-          )}
-        </Show>
-        <Show when={dismissible()}>
-          <button
-            type="button"
-            onClick={close}
-            aria-label="Dismiss"
-            class="text-muted-foreground hover:text-foreground -mr-1 flex size-5 shrink-0 items-center justify-center rounded-md transition-colors"
-          >
-            <X class="size-3.5" />
-          </button>
+        <VariantIcon />
+        <Show
+          when={appearance() === 'card'}
+          fallback={
+            <>
+              <span class="min-w-0 flex-1 truncate">{props.item.message}</span>
+              <ActionButton />
+              <CloseButton />
+            </>
+          }
+        >
+          <div class="min-w-0 flex-1">
+            <div class="font-medium leading-snug">{props.item.message}</div>
+            <Show when={props.item.description}>
+              <div class={cn('mt-1 line-clamp-2 text-xs leading-snug', mutedClass())}>
+                {props.item.description}
+              </div>
+            </Show>
+            <ActionButton class="mt-2" />
+          </div>
+          <CloseButton />
         </Show>
       </div>
     </Show>
@@ -333,7 +417,7 @@ export function ToastRegion(props: ToastRegionProps) {
             'pointer-events-none fixed z-[100] flex flex-col gap-2',
             anchor()
               ? ANCHOR_FLEX[position()]
-              : cn('max-w-[min(28rem,calc(100vw-2rem))]', POSITION_CLASSES[position()]),
+              : cn('max-w-[min(30rem,calc(100vw-2rem))]', POSITION_CLASSES[position()]),
           )}
           style={anchor() ? anchorStyle(position(), anchor()!) : undefined}
         >
@@ -341,6 +425,8 @@ export function ToastRegion(props: ToastRegionProps) {
             {(item) => (
               <Toast
                 item={item}
+                appearance={props.appearance}
+                inverse={props.inverse}
                 onDismiss={(reason) => props.onDismiss?.(item.id, reason)}
                 onAction={(label) => props.onAction?.(item.id, label)}
               />
@@ -368,7 +454,7 @@ export function ToastRegion(props: ToastRegionProps) {
             anchored edge. */}
         <div
           class="pointer-events-auto relative transition-[height] duration-200 ease-out"
-          style={{ 'min-width': '16rem', 'max-width': 'min(28rem, calc(100vw - 2rem))', height: `${stageHeight()}px` }}
+          style={{ 'min-width': '16rem', 'max-width': 'min(30rem, calc(100vw - 2rem))', height: `${stageHeight()}px` }}
         >
           <For each={visible()}>
             {(item, i) => (
@@ -385,6 +471,8 @@ export function ToastRegion(props: ToastRegionProps) {
                 <Toast
                   item={item}
                   paused={open()}
+                  appearance={props.appearance}
+                  inverse={props.inverse}
                   onDismiss={(reason) => props.onDismiss?.(item.id, reason)}
                   onAction={(label) => props.onAction?.(item.id, label)}
                 />

package/src/components/tool-types.ts

@@ -0,0 +1,10 @@
+/** A tool-call part rendered by <Tool>. Pure type — kept JSX-free so it can be
+ *  imported by the framework-neutral state core and the React typecheck pass. */
+export interface ToolPart {
+  type: string;
+  state: 'input-streaming' | 'input-available' | 'output-available' | 'output-error';
+  input?: Record<string, unknown>;
+  output?: Record<string, unknown>;
+  toolCallId?: string;
+  errorText?: string;
+}

package/src/components/tool.tsx

@@ -1,21 +1,19 @@
 import { type JSX, splitProps, createSignal, Show, For } from 'solid-js';
 import { cn } from '../utils/cn';
-import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '../ui/collapsible';
+import { Collapsible, CollapsibleTrigger, CollapsibleContent, type CollapsibleController } from '../ui/collapsible';
 import { Button } from '../ui/button';
 import { CheckCircle, ChevronDown, Loader2, Settings, XCircle } from 'lucide-solid';
-
-export interface ToolPart {
-  type: string;
-  state: 'input-streaming' | 'input-available' | 'output-available' | 'output-error';
-  input?: Record<string, unknown>;
-  output?: Record<string, unknown>;
-  toolCallId?: string;
-  errorText?: string;
-}
+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;
 }
 
@@ -101,16 +99,24 @@ function ToolStateBadge(props: { state: ToolPart['state'] }) {
 }
 
 function Tool(props: ToolProps) {
-  const [local, rest] = splitProps(props, ['toolPart', 'defaultOpen', 'class']);
-  const [isOpen, setIsOpen] = createSignal(local.defaultOpen ?? false);
+  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-muted/30', local.class)}>
-      <Collapsible open={isOpen()} onOpenChange={setIsOpen}>
+    <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
@@ -134,7 +140,7 @@ function Tool(props: ToolProps) {
             <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-muted/50 p-2 font-mono text-sm">
+                <div class="rounded bg-surface-strong p-2 font-mono text-sm">
                   <For each={Object.entries(input()!)}>
                     {([key, value]) => (
                       <div class="mb-1">
@@ -150,7 +156,7 @@ function Tool(props: ToolProps) {
             <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-muted/50 p-2 font-mono text-sm">
+                <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>

package/src/components/voice-input.tsx

@@ -1,43 +1,126 @@
-import { splitProps, Show, For, createSignal } from 'solid-js';
+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;
 }
 
 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...' : isRecording() ? 'Stop recording' : 'Voice input';
+    isProcessing() ? 'Transcribing...' : isActive() ? 'Stop recording' : 'Voice input';
 
-  async function handleClick() {
-    if (isRecording()) {
-      stop();
-    } else {
+  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.
+  async function beginRecognition() {
+    try {
+      const text = await speech.start({
+        lang: props.lang,
+        onInterim: props.interim ? (t) => props.onInterim?.(t) : undefined,
+      });
+      if (text.trim()) local.onTranscription(text.trim());
+    } catch {
+      /* surfaced via speech.error; the mic returns to idle */
+    }
+  }
+
+  // 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 blob = await start();
-        setIsProcessing(true);
-        try {
-          const text = await local.onTranscribe(blob);
-          if (text.trim()) local.onTranscription(text.trim());
-        } finally {
-          setIsProcessing(false);
-        }
-      } catch {
+        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">
@@ -65,7 +148,7 @@ export function VoiceInput(props: VoiceInputProps) {
   return (
     <div class={cn('relative inline-flex items-center justify-center', local.class)}>
       {/* Animated pulse rings when recording */}
-      <Show when={isRecording()}>
+      <Show when={isActive()}>
         <For each={[0, 1, 2]}>
           {(index) => (
             <div
@@ -88,16 +171,16 @@ export function VoiceInput(props: VoiceInputProps) {
           disabled={local.disabled || isProcessing()}
           class={cn(
             'relative z-10 rounded-full transition-all duration-300',
-            isRecording() && 'bg-destructive text-white hover:bg-destructive/80',
+            isActive() && 'bg-destructive text-white hover:bg-destructive/80',
           )}
         >
           <Show when={isProcessing()}>
             <Spinner />
           </Show>
-          <Show when={!isProcessing() && isRecording()}>
+          <Show when={!isProcessing() && isActive()}>
             <StopIcon />
           </Show>
-          <Show when={!isProcessing() && !isRecording()}>
+          <Show when={!isProcessing() && !isActive()}>
             <MicIcon />
           </Show>
         </Button>