@kitn.ai/ui 0.16.0 → 0.17.0

package/dist/elements/thinking-bar.js

@@ -0,0 +1 @@
+import{d as p,s as g,i as n,c as r,z as i,S as u,h as b,k as m,j as f,t as l,q as h}from"./chunks/cn-Dogu6PbV.js";import{T as c}from"./chunks/text-shimmer-uh9V_KUh.js";import{c as x}from"./chunks/chevron-right-k2UFlIVK.js";var k=l('<button type=button class="flex items-center gap-1 text-sm transition-opacity hover:opacity-80">'),v=l('<button type=button class="text-muted-foreground hover:text-foreground border-muted-foreground/50 hover:border-foreground border-b border-dotted text-sm transition-colors">'),w=l("<div>");function y(o){const[t]=g(o,["class","text","onStop","stopLabel","onClick"]),s=()=>t.text??"Thinking",d=()=>t.stopLabel??"Answer now";return(()=>{var a=w();return n(a,r(u,{get when(){return t.onClick},get fallback(){return r(c,{class:"cursor-default text-sm font-medium",get children(){return s()}})},get children(){var e=k();return i(e,"click",t.onClick,!0),n(e,r(c,{class:"text-sm font-medium",get children(){return s()}}),null),n(e,r(x,{class:"text-muted-foreground size-4"}),null),e}}),null),n(a,r(u,{get when(){return t.onStop},get children(){var e=v();return i(e,"click",t.onStop,!0),n(e,d),e}}),null),b(()=>m(a,f("flex w-full items-center justify-between",t.class))),a})()}p(["click"]),h("kai-thinking-bar",{text:"Thinking",stoppable:!1,stopLabel:"Answer now"},(o,{dispatch:t,flag:s})=>r(y,{get text(){return o.text},get stopLabel(){return o.stopLabel},get onStop(){return s("stoppable")?()=>t("kai-stop"):void 0}}));

package/dist/elements/toast.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/elements/toast.js

@@ -0,0 +1 @@
+import{d as nt,a as z,e as Q,b as W,p as Y,c as v,i as w,F as U,u as V,h as B,j as C,g as G,k as X,A as H,G as Z,S as M,t as E,o as _,q as it}from"./chunks/cn-Dogu6PbV.js";import{c as at}from"./chunks/overlay-DydXYMQW.js";import{r as tt,t as st}from"./chunks/toast-store-D8cL3fWl.js";import{c as dt}from"./chunks/check-CDYaMYrM.js";import{x as lt}from"./chunks/x-CzxL27Ch.js";var ct=E('<button type=button 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">'),ut=E('<div role=status><span class="min-w-0 flex-1 truncate">'),mt=E('<button type=button class="text-primary hover:text-primary/80 shrink-0 rounded-md text-sm font-medium underline-offset-2 hover:underline">'),pt=E('<div role=region aria-label=Notifications aria-live=polite data-stack=collapsed><div class="pointer-events-auto relative transition-[height] duration-200 ease-out"style="min-width:16rem;max-width:min(28rem, calc(100vw - 2rem))">'),ft=E("<div role=region aria-label=Notifications aria-live=polite data-stack=expanded>"),vt=E("<div>");function ht(){var t,s;const[d,u]=z(typeof window<"u"&&((t=window.matchMedia)==null?void 0:t.call(window,"(prefers-reduced-motion: reduce)").matches)===!0);if(typeof window<"u"&&window.matchMedia){const o=window.matchMedia("(prefers-reduced-motion: reduce)"),l=()=>u(o.matches);(s=o.addEventListener)==null||s.call(o,"change",l),Y(()=>{var p;return(p=o.removeEventListener)==null?void 0:p.call(o,"change",l)})}return d}function et(t){const[s,d]=z(!0),u=at(s),o=()=>t.item.variant??"neutral",l=()=>t.item.dismissible!==!1;let p=tt(t.item),f=0,y,k="timeout";const h=()=>{y!==void 0&&(clearTimeout(y),y=void 0)},L=()=>{h(),!(p<=0)&&(f=Date.now(),y=setTimeout(()=>{k="timeout",d(!1)},p))},q=()=>{y!==void 0&&(h(),p-=Date.now()-f)},[F,j]=z(!1),R=()=>t.paused===!0||F();W(_(()=>tt(t.item),a=>{p=a,R()?h():L()})),W(_(R,a=>{a?q():L()},{defer:!0})),Y(h),W(()=>{!u.present()&&!s()&&t.onDismiss(k)});const S=()=>{h(),k="close",d(!1)},N=()=>{var a;const b=t.item.action;b&&((a=t.onAction)==null||a.call(t,b.label),b.onAction()===!1||(h(),k="action",d(!1)))};return v(M,{get when(){return u.present()},get children(){var a=ut(),b=a.firstChild;a.addEventListener("pointerleave",()=>j(!1)),a.addEventListener("pointerenter",()=>j(!0));var T=u.setRef;return typeof T=="function"?V(T,a):u.setRef=a,w(a,v(M,{get when(){return o()==="success"},get children(){return v(dt,{class:"size-4 shrink-0 text-emerald-500"})}}),b),w(b,()=>t.item.message),w(a,v(M,{get when(){return t.item.action},children:m=>(()=>{var $=mt();return $.$$click=N,w($,()=>m().label),$})()}),null),w(a,v(M,{get when(){return l()},get children(){var m=ct();return m.$$click=S,w(m,v(lt,{class:"size-3.5"})),m}}),null),B(m=>{var $=u.state()==="closed"?"":void 0,A=C("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","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");return $!==m.e&&G(a,"data-closed",m.e=$),A!==m.t&&X(a,m.t=A),m},{e:void 0,t:void 0}),a}})}const rt={"top-center":"top-4 left-1/2 -translate-x-1/2 items-center","top-right":"top-4 right-4 items-end","top-left":"top-4 left-4 items-start","bottom-center":"bottom-4 left-1/2 -translate-x-1/2 items-center flex-col-reverse","bottom-right":"bottom-4 right-4 items-end flex-col-reverse","bottom-left":"bottom-4 left-4 items-start flex-col-reverse"},xt={"top-center":"items-center","top-left":"items-start","top-right":"items-end","bottom-center":"items-center flex-col-reverse","bottom-left":"items-start flex-col-reverse","bottom-right":"items-end flex-col-reverse"},O=12;function ot(t,s){const d=s.left+s.width/2,u=s.top+O,o=s.bottom-O,l=s.left+O,p=s.right-O,f=`${Math.max(0,s.width-O*2)}px`;switch(t){case"top-left":return{top:`${u}px`,left:`${l}px`,transform:"none","max-width":f};case"top-right":return{top:`${u}px`,left:`${p}px`,transform:"translateX(-100%)","max-width":f};case"bottom-center":return{top:`${o}px`,left:`${d}px`,transform:"translate(-50%, -100%)","max-width":f};case"bottom-left":return{top:`${o}px`,left:`${l}px`,transform:"translateY(-100%)","max-width":f};case"bottom-right":return{top:`${o}px`,left:`${p}px`,transform:"translate(-100%, -100%)","max-width":f};default:return{top:`${u}px`,left:`${d}px`,transform:"translateX(-50%)","max-width":f}}}function gt(t){const s=()=>t.max??3,d=()=>t.position??"top-center",u=()=>t.stack??"expanded",o=ht(),l=()=>u()==="collapsed"&&!o(),[p,f]=z(!1),[y,k]=z(!1),h=()=>p()||y(),L=20,q=.05,F=48,j=8,R=()=>d().startsWith("bottom"),S=()=>R()?-1:1,[N,a]=z(F),b=e=>{if(!e||typeof window>"u")return;const i=()=>{const n=e.offsetHeight;n&&a(n)};if(i(),typeof ResizeObserver>"u")return;const r=new ResizeObserver(i);r.observe(e),Y(()=>r.disconnect())},T=e=>h()?`translateY(${S()*(N()+j)*e}px) scale(1)`:`translateY(${S()*L*e}px) scale(${1-q*e})`,m=()=>{const e=A().length;return e?h()?e*N()+(e-1)*j:N()+(e-1)*L:0},$=Q(()=>[...(t.toasts??[]).filter(e=>(e.target??void 0)===t.target)].reverse()),A=Q(()=>$().slice(0,s())),[D,I]=z(null);return W(()=>{const e=t.target;if(!e||typeof window>"u"){I(null);return}const i=()=>{const n=e.getBoundingClientRect();I({top:n.top,left:n.left,right:n.right,bottom:n.bottom,width:n.width})};i();const r=new ResizeObserver(i);r.observe(e),window.addEventListener("scroll",i,!0),window.addEventListener("resize",i),Y(()=>{r.disconnect(),window.removeEventListener("scroll",i,!0),window.removeEventListener("resize",i)})}),v(M,{get when(){return l()},get fallback(){return(()=>{var e=ft();return w(e,v(U,{get each(){return A()},children:i=>v(et,{item:i,onDismiss:r=>{var n;return(n=t.onDismiss)==null?void 0:n.call(t,i.id,r)},onAction:r=>{var n;return(n=t.onAction)==null?void 0:n.call(t,i.id,r)}})})),B(i=>{var r=C("pointer-events-none fixed z-[100] flex flex-col gap-2",D()?xt[d()]:C("max-w-[min(28rem,calc(100vw-2rem))]",rt[d()])),n=D()?ot(d(),D()):void 0;return r!==i.e&&X(e,i.e=r),i.t=Z(e,n,i.t),i},{e:void 0,t:void 0}),e})()},get children(){var e=pt(),i=e.firstChild;return e.$$focusout=()=>k(!1),e.$$focusin=()=>k(!0),e.addEventListener("pointerleave",()=>f(!1)),e.addEventListener("pointerenter",()=>f(!0)),w(i,v(U,{get each(){return A()},children:(r,n)=>(()=>{var g=vt();return V(c=>{n()===0&&b(c)},g),w(g,v(et,{item:r,get paused(){return h()},onDismiss:c=>{var x;return(x=t.onDismiss)==null?void 0:x.call(t,r.id,c)},onAction:c=>{var x;return(x=t.onAction)==null?void 0:x.call(t,r.id,c)}})),B(c=>{var x=n(),J=C("absolute inset-x-0 flex transition-[transform,opacity] duration-200 ease-out",R()?"bottom-0 origin-bottom":"top-0 origin-top",d().endsWith("right")?"justify-end":d().endsWith("left")?"justify-start":"justify-center"),K=String(s()-n()),P=T(n());return x!==c.e&&G(g,"data-depth",c.e=x),J!==c.t&&X(g,c.t=J),K!==c.a&&H(g,"z-index",c.a=K),P!==c.o&&H(g,"transform",c.o=P),c},{e:void 0,t:void 0,a:void 0,o:void 0}),g})()})),B(r=>{var n=h()?"":void 0,g=C("pointer-events-none fixed z-[100]",!D()&&rt[d()]),c=D()?ot(d(),D()):void 0,x=`${m()}px`;return n!==r.e&&G(e,"data-expanded",r.e=n),g!==r.t&&X(e,r.t=g),r.a=Z(e,c,r.a),x!==r.o&&H(i,"height",r.o=x),r},{e:void 0,t:void 0,a:void 0,o:void 0}),e}})}nt(["click","focusin","focusout"]),it("kai-toast-region",{toasts:[],position:"top-center",max:3,stack:"expanded",target:void 0},(t,{dispatch:s})=>{const d=()=>{const o=t.max,l=typeof o=="string"?parseInt(o,10):o;return typeof l=="number"&&!Number.isNaN(l)?l:3},u=o=>{st.dismiss(o)};return v(gt,{get toasts(){return t.toasts??[]},get position(){return t.position},get max(){return d()},get stack(){return t.stack},get target(){return t.target},onDismiss:(o,l)=>{u(o),s("kai-dismiss",{id:o,reason:l})},onAction:(o,l)=>s("kai-action",{id:o,label:l})})});

package/dist/elements/tool.js

@@ -0,0 +1 @@
+import{q as r,c as o,S as n}from"./chunks/cn-Dogu6PbV.js";import{T as a}from"./chunks/tool-GJ3vwp1U.js";r("kai-tool",{tool:void 0,open:!1},(t,{flag:e})=>o(n,{get when(){return t.tool},get children(){return o(a,{get toolPart(){return t.tool},get defaultOpen(){return e("open")}})}}));

package/dist/elements/voice-input.js

@@ -0,0 +1 @@
+import{a as m,p as x,s as T,i as f,c as r,F as M,A as B,S as p,n as y,j as k,h as z,k as C,t as h,q as j}from"./chunks/cn-Dogu6PbV.js";import{B as R}from"./chunks/button-CKyYD9G4.js";import{T as E}from"./chunks/tooltip-DwKAz4XR.js";function S(c={}){const n=c.mimeType??"audio/webm;codecs=opus",[i,a]=m(!1),[v,s]=m(null);let t,l=[],u;async function b(){s(null),l=[];try{const o=await navigator.mediaDevices.getUserMedia({audio:!0});return t=new MediaRecorder(o,{mimeType:n}),t.ondataavailable=e=>{e.data.size>0&&l.push(e.data)},t.onstop=()=>{const e=new Blob(l,{type:n});o.getTracks().forEach(d=>d.stop()),a(!1),u?.(e)},t.start(),a(!0),new Promise(e=>{u=e})}catch(o){throw s(o instanceof Error?o.message:"Microphone access denied"),a(!1),o}}function g(){t&&t.state==="recording"&&t.stop()}return x(()=>g()),{isRecording:i,error:v,start:b,stop:g}}var V=h('<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><path d="M19 10v2a7 7 0 01-14 0v-2"></path><line x1=12 y1=19 x2=12 y2=23></line><line x1=8 y1=23 x2=16 y2=23>'),F=h('<svg width=14 height=14 viewBox="0 0 24 24"fill=currentColor><rect x=4 y=4 width=16 height=16 rx=2>'),P=h('<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">'),$=h("<div>"),q=h('<div class="absolute inset-0 animate-ping rounded-full border-2 border-red-400/30"style=animation-duration:2s>');function A(c){const[n]=T(c,["onTranscribe","onTranscription","disabled","class"]),{isRecording:i,start:a,stop:v}=S(),[s,t]=m(!1),l=()=>s()?"Transcribing...":i()?"Stop recording":"Voice input";async function u(){if(i())v();else try{const e=await a();t(!0);try{const d=await n.onTranscribe(e);d.trim()&&n.onTranscription(d.trim())}finally{t(!1)}}catch{t(!1)}}const b=()=>V(),g=()=>F(),o=()=>P();return(()=>{var e=$();return f(e,r(p,{get when(){return i()},get children(){return r(M,{each:[0,1,2],children:d=>(()=>{var w=q();return B(w,"animation-delay",`${d*.3}s`),w})()})}}),null),f(e,r(E,{get content(){return l()},get children(){return r(R,{variant:"ghost",size:"icon-sm",get"aria-label"(){return l()},onClick:u,get disabled(){return n.disabled||s()},get class(){return k("relative z-10 rounded-full transition-all duration-300",i()&&"bg-destructive text-white hover:bg-destructive/80")},get children(){return[r(p,{get when(){return s()},get children(){return r(o,{})}}),r(p,{get when(){return y(()=>!s())()&&i()},get children(){return r(g,{})}}),r(p,{get when(){return y(()=>!s())()&&!i()},get children(){return r(b,{})}})]}})}}),null),z(()=>C(e,k("relative inline-flex items-center justify-center",n.class))),e})()}j("kai-voice-input",{transcribe:void 0,disabled:!1},(c,{dispatch:n,flag:i})=>r(A,{get disabled(){return i("disabled")},onTranscribe:async a=>(n("kai-audio-captured",{blob:a}),c.transcribe?c.transcribe(a):""),onTranscription:a=>n("kai-transcription",{text:a})}));

package/dist/elements.d.ts

@@ -101,11 +101,11 @@ export interface KaiCardsElement extends HTMLElement {
   /** Color mode (`auto` follows prefers-color-scheme). */
   theme?: 'light' | 'dark' | 'auto';
   /** The stream of card envelopes to render. Set as a JS PROPERTY: `el.cards = [...]`. */
-  cards?: { type: string; id: string; data: unknown; title?: string; resolution?: { kind: "action"; action: string; payload?: unknown; at?: string } | { kind: "submit"; data: unknown; at?: string } }[];
+  cards?: { type: string; id: string; data: unknown; title?: string; resolution?: { kind: "action"; action: string; payload?: unknown; at?: string } | { kind: "submit"; data: unknown; at?: string } | { kind: "dismissed"; at?: string } | { kind: "expired"; reason?: string; at?: string } }[];
   /** Optional type→tag overrides/additions (merged over the built-ins). Property: `el.types`. Typed as a plain string map (not the `CardTagMap` alias) so the generated React wrapper inlines it instead of emitting an unresolved named type. */
   types?: Record<string, string>;
   /** Optional CardPolicy handling child events. Property: `el.policy`. */
-  policy?: { onSubmit?: (cardId: string, data: unknown) => void; onAction?: (cardId: string, action: string, payload?: unknown) => void; onSendPrompt?: (text: string, opts: { mode: "compose" | "send"; context?: unknown; }) => void; onOpen?: (url: string, target: "tab" | "artifact") => void; onState?: (cardId: string, patch: unknown) => void; onDismiss?: (cardId: string) => void; onError?: (cardId: string, message: string) => void; maxSendPromptMode?: "compose" | "send" };
+  policy?: { onSubmit?: (cardId: string, data: unknown) => void; onAction?: (cardId: string, action: string, payload?: unknown) => void; onSendPrompt?: (text: string, opts: { mode: "compose" | "send"; context?: unknown; }) => void; onOpen?: (url: string, target: "tab" | "artifact") => void; onState?: (cardId: string, patch: unknown) => void; onDismiss?: (cardId: string) => void; onReopen?: (cardId: string) => void; onError?: (cardId: string, message: string) => void; maxSendPromptMode?: "compose" | "send" };
 }
 
 export interface KaiChainOfThoughtElement extends HTMLElement {
@@ -119,7 +119,7 @@ export interface KaiChatElement extends HTMLElement {
   /** Color mode (`auto` follows prefers-color-scheme). */
   theme?: 'light' | 'dark' | 'auto';
   /** The full message thread to render, newest last. Each entry carries its role, content, and optional reasoning/tools/attachments/actions. Set as a JS property (`el.messages = [...]`). */
-  messages: { id: string; role: "user" | "assistant"; content: string; reasoning?: undefined | { text: string; label?: undefined | string }; tools?: undefined | { type: string; state: "input-streaming" | "input-available" | "output-available" | "output-error"; input?: undefined | Record<string, unknown>; output?: undefined | Record<string, unknown>; toolCallId?: undefined | string; errorText?: undefined | string }[]; attachments?: undefined | { id: string; type: "file" | "source-document"; filename?: undefined | string; mediaType?: undefined | string; url?: undefined | string; title?: undefined | string }[]; actions?: undefined | ("copy" | "like" | "dislike" | "regenerate" | "edit" | { id: string; label: string; icon?: undefined | string; tooltip?: undefined | string })[]; avatar?: undefined | { src?: undefined | string; fallback?: undefined | string; alt?: undefined | string } }[];
+  messages: { id: string; role: "user" | "assistant"; content: string; reasoning?: undefined | { text: string; label?: undefined | string }; tools?: undefined | { type: string; state: "input-streaming" | "input-available" | "output-available" | "output-error"; input?: undefined | Record<string, unknown>; output?: undefined | Record<string, unknown>; toolCallId?: undefined | string; errorText?: undefined | string }[]; attachments?: undefined | { id: string; type: "file" | "source-document"; filename?: undefined | string; mediaType?: undefined | string; url?: undefined | string; title?: undefined | string }[]; actions?: undefined | ("copy" | "like" | "dislike" | "regenerate" | "edit" | { id: string; label: string; icon?: undefined | string; tooltip?: undefined | string })[]; avatar?: undefined | { src?: undefined | string; fallback?: undefined | string; alt?: undefined | string }; feedback?: undefined | "like" | "dislike" }[];
   /** Controlled value of the input. When set, the host owns the input text and must update it on `kai-value-change`; leave unset for uncontrolled behavior. */
   value?: string;
   /** Placeholder text shown in the empty input. */
@@ -207,6 +207,25 @@ export interface KaiCodeBlockElement extends HTMLElement {
   proseSize?: "xs" | "sm" | "base" | "lg";
 }
 
+export interface KaiCompareElement extends HTMLElement {
+  /** Color mode (`auto` follows prefers-color-scheme). */
+  theme?: 'light' | 'dark' | 'auto';
+  /** The compare definition (prompt + the two candidates). Set as a JS PROPERTY: `el.data = { prompt, candidates: [A, B], collapse? }`. Import `ResponseCompareData` from `@kitn.ai/ui` for the full shape. */
+  data?: Record<string, unknown>;
+  /** Stable id correlating every emitted event. Attribute: `compare-id`. */
+  compareId?: string;
+  /** Re-hydrate / control the user's pick. Set as a JS PROPERTY: `el.selection = { chosenId, rejectedIds }`. Renders the collapsed winner. */
+  selection?: Record<string, unknown>;
+  /** Layout: `'auto'` (default — columns when wide, tabs when narrow, by CONTAINER width) | `'columns'` (side-by-side) | `'tabs'` (pills to switch). Attribute: `layout`. */
+  layout?: "auto" | "columns" | "tabs";
+  /** Prose/text size for the rendered candidates. Attribute: `prose-size`. */
+  proseSize?: "xs" | "sm" | "base" | "lg";
+  /** Shiki theme for code blocks in the candidates. Attribute: `code-theme`. */
+  codeTheme?: string;
+  /** Whether code blocks are syntax-highlighted. Attribute: `code-highlight`. */
+  codeHighlight?: boolean;
+}
+
 export interface KaiConfirmElement extends HTMLElement {
   /** Color mode (`auto` follows prefers-color-scheme). */
   theme?: 'light' | 'dark' | 'auto';
@@ -368,7 +387,7 @@ export interface KaiMessageElement extends HTMLElement {
   /** Color mode (`auto` follows prefers-color-scheme). */
   theme?: 'light' | 'dark' | 'auto';
   /** The full message object. Set as a JS property. */
-  message?: { id: string; role: "user" | "assistant"; content: string; reasoning?: { text: string; label?: string }; tools?: { type: string; state: "input-streaming" | "input-available" | "output-available" | "output-error"; input?: Record<string, unknown>; output?: Record<string, unknown>; toolCallId?: string; errorText?: string }[]; attachments?: { id: string; type: "file" | "source-document"; filename?: string; mediaType?: string; url?: string; title?: string }[]; actions?: ("copy" | "like" | "dislike" | "regenerate" | "edit" | { id: string; label: string; icon?: string; tooltip?: string })[]; avatar?: { src?: string; fallback?: string; alt?: string } };
+  message?: { id: string; role: "user" | "assistant"; content: string; reasoning?: { text: string; label?: string }; tools?: { type: string; state: "input-streaming" | "input-available" | "output-available" | "output-error"; input?: Record<string, unknown>; output?: Record<string, unknown>; toolCallId?: string; errorText?: string }[]; attachments?: { id: string; type: "file" | "source-document"; filename?: string; mediaType?: string; url?: string; title?: string }[]; actions?: ("copy" | "like" | "dislike" | "regenerate" | "edit" | { id: string; label: string; icon?: string; tooltip?: string })[]; avatar?: { src?: string; fallback?: string; alt?: string }; feedback?: "like" | "dislike" };
   /** Convenience for simple cases when not passing a `message` object. */
   role?: "user" | "assistant";
   /** Convenience content (used when `message` is not set). */
@@ -623,6 +642,21 @@ export interface KaiThinkingBarElement extends HTMLElement {
   stopLabel?: string;
 }
 
+export interface KaiToastRegionElement extends HTMLElement {
+  /** Color mode (`auto` follows prefers-color-scheme). */
+  theme?: 'light' | 'dark' | 'auto';
+  /** The toasts to render. Newest is shown on top. Set as a JS property (array); pass a new array reference to update. */
+  toasts: { id: string; message: string; variant?: undefined | "neutral" | "success"; action?: undefined | { label: string; onAction: () => void | false }; duration?: undefined | number; dismissible?: undefined | boolean; target?: undefined | HTMLElement }[];
+  /** Stack anchor: `'top-center'` (default), `'top-right'`, `'bottom-center'`, … */
+  position?: "top-center" | "top-right" | "top-left" | "bottom-center" | "bottom-right" | "bottom-left";
+  /** Max simultaneously-visible toasts; the rest queue. Defaults to `3`. */
+  max?: number;
+  /** Stacking: 'expanded' (default, full column) | 'collapsed' (Sonner-style pile that expands on hover/focus). Attribute: stack. */
+  stack?: "expanded" | "collapsed";
+  /** Container element to anchor this region to (JS property). Set by the store for a scoped region; unset = the global viewport region. */
+  target?: HTMLElement;
+}
+
 export interface KaiToolElement extends HTMLElement {
   /** Color mode (`auto` follows prefers-color-scheme). */
   theme?: 'light' | 'dark' | 'auto';
@@ -651,7 +685,7 @@ export interface KaiWorkspaceElement extends HTMLElement {
   /** Id of the open conversation, highlighted in the sidebar. */
   activeId?: string;
   /** The active conversation's message thread, newest last. Set as a JS property. */
-  messages: { id: string; role: "user" | "assistant"; content: string; reasoning?: undefined | { text: string; label?: undefined | string }; tools?: undefined | { type: string; state: "input-streaming" | "input-available" | "output-available" | "output-error"; input?: undefined | Record<string, unknown>; output?: undefined | Record<string, unknown>; toolCallId?: undefined | string; errorText?: undefined | string }[]; attachments?: undefined | { id: string; type: "file" | "source-document"; filename?: undefined | string; mediaType?: undefined | string; url?: undefined | string; title?: undefined | string }[]; actions?: undefined | ("copy" | "like" | "dislike" | "regenerate" | "edit" | { id: string; label: string; icon?: undefined | string; tooltip?: undefined | string })[]; avatar?: undefined | { src?: undefined | string; fallback?: undefined | string; alt?: undefined | string } }[];
+  messages: { id: string; role: "user" | "assistant"; content: string; reasoning?: undefined | { text: string; label?: undefined | string }; tools?: undefined | { type: string; state: "input-streaming" | "input-available" | "output-available" | "output-error"; input?: undefined | Record<string, unknown>; output?: undefined | Record<string, unknown>; toolCallId?: undefined | string; errorText?: undefined | string }[]; attachments?: undefined | { id: string; type: "file" | "source-document"; filename?: undefined | string; mediaType?: undefined | string; url?: undefined | string; title?: undefined | string }[]; actions?: undefined | ("copy" | "like" | "dislike" | "regenerate" | "edit" | { id: string; label: string; icon?: undefined | string; tooltip?: undefined | string })[]; avatar?: undefined | { src?: undefined | string; fallback?: undefined | string; alt?: undefined | string }; feedback?: undefined | "like" | "dislike" }[];
   value?: string;
   placeholder?: string;
   loading?: boolean;
@@ -693,6 +727,7 @@ declare global {
     'kai-checkpoint': KaiCheckpointElement;
     'kai-choice': KaiChoiceElement;
     'kai-code-block': KaiCodeBlockElement;
+    'kai-compare': KaiCompareElement;
     'kai-confirm': KaiConfirmElement;
     'kai-context': KaiContextElement;
     'kai-conversations': KaiConversationsElement;
@@ -725,6 +760,7 @@ declare global {
     'kai-tasks': KaiTasksElement;
     'kai-text-shimmer': KaiTextShimmerElement;
     'kai-thinking-bar': KaiThinkingBarElement;
+    'kai-toast-region': KaiToastRegionElement;
     'kai-tool': KaiToolElement;
     'kai-voice-input': KaiVoiceInputElement;
     'kai-workspace': KaiWorkspaceElement;

package/dist/index.d.ts

@@ -12,12 +12,18 @@ export { configureCodeHighlighting, isCodeHighlightingEnabled } from './primitiv
 export type { CodeHighlightingOptions } from './primitives/highlighter';
 export { configurePdfPreview, isPdfPreviewEnabled } from './primitives/pdf-preview';
 export type { PdfPreviewOptions } from './primitives/pdf-preview';
+export { toast, configureToasts, ensureMounted as ensureToastRegion, getToasts } from './primitives/toast-store';
+export type { ToastItem, ToastVariant, ToastAction, ToastOptions, ToastHandle, ToastFn, ToastConfig, } from './primitives/toast-store';
+export { Toast, ToastRegion } from './components/toast';
+export type { ToastRegionProps, ToastDismissReason, ToastPosition, } from './components/toast';
 export { CARD_CONTRACT_VERSION } from './primitives/card-contract';
 export type { CardEnvelope, CardContext, CardEvent, CardEventKind, CardResolution, CardHost, CardPolicy, } from './primitives/card-contract';
 export { applyResolution, resolutionFromEvent } from './primitives/card-resolution';
 export { CardProvider, useCardHost } from './primitives/card-host';
 export type { CardProviderProps } from './primitives/card-host';
 export { CARD_EVENT_NAME, emitCardEvent, routeCardEvent, listenForCardEvents } from './primitives/card-routing';
+export { dismissRecovery, defaultIsReopenable } from './primitives/card-recovery';
+export type { RecoveryToast, ReopenEnv, DismissRecoveryOptions, } from './primitives/card-recovery';
 export { validateAgainstSchema } from './primitives/card-validate';
 export type { JsonSchema, ValidationResult } from './primitives/card-validate';
 export { mountRemoteCard } from './remote/host-embed';
@@ -30,6 +36,8 @@ export { BUILTIN_CARD_TAGS, BUILTIN_CARD_COMPONENTS, mergeCardTags, mergeCardCom
 export type { CardComponent, CardComponentMap, CardTagMap } from './primitives/card-registry';
 export { Card } from './components/card';
 export type { CardProps } from './components/card';
+export { DismissedStub, stubIntent } from './components/dismissed-stub';
+export type { DismissedStubProps, DismissedCardType } from './components/dismissed-stub';
 export { Form, validateForm, buildResult, widgetFor, orderedKeys, coerceValue } from './components/form';
 export type { FormProps, FormField, FormDefinition, FormCardEnvelope, FormValidation, WidgetKind, } from './components/form';
 export { ConfirmCard, CONFIRM_CARD_TYPE, buttonVariantForStyle, normalizeActions, defaultActionId, } from './components/confirm-card';
@@ -70,6 +78,10 @@ export type { ArtifactProps, ArtifactFile, ArtifactTab } from './components/arti
 export { ChatContainer, ChatContainerRoot, ChatContainerContent, ChatContainerScrollAnchor, useChatContainer, } from './components/chat-container';
 export { Message, MessageAvatar, MessageContent, MessageActions, MessageAction, MessageCopyButton } from './components/message';
 export type { MessageCopyButtonProps } from './components/message';
+export { ResponseCompare, useResolved } from './components/response-compare';
+export type { ResponseCompareProps, CompareLayout, ResolvedController } from './components/response-compare';
+export { normalizeCandidates, buildSelection, isAnyStreaming, } from './components/response-compare';
+export type { CompareCandidate, ComparePair, CompareCollapse, ResponseCompareData, CompareSelection, } from './components/response-compare';
 export { MessageSkills } from './components/message-skills';
 export type { Skill as MessageSkill } from './components/message-skills';
 export { PromptInput, PromptInputTextarea, PromptInputActions, PromptInputAction, usePromptInput, } from './components/prompt-input';