@kitn.ai/ui 0.20.1 → 0.22.0

package/src/components/composer.tsx

@@ -469,11 +469,21 @@ export function Composer(props: ComposerProps): JSX.Element {
   const handleBlur = (e: FocusEvent) => { focused = false; clearPillSelection(); props.onBlur?.(e); };
 
   onMount(() => {
+    // Captured at SETUP and closed over, never re-resolved as a global inside
+    // `onCleanup`: cleanup can run after the host removed the DOM globals (a
+    // `kai-*` release is deferred one microtask past detachment, so an
+    // environment teardown gets in between), and a bare `document` there throws
+    // -- from a promise nobody holds, so it lands as an unhandled rejection that
+    // fails the run while every test passes. That is how this was found.
+    // See tests/components/teardown-without-dom-globals.test.tsx.
+    // `ownerDocument` rather than a captured `document`, matching the rest of
+    // this file and staying correct for a composer inside an iframe.
+    const doc = editable.ownerDocument;
     const onSelectionChange = () => {
       if (focused) updateTriggerState();
     };
-    document.addEventListener('selectionchange', onSelectionChange);
-    onCleanup(() => document.removeEventListener('selectionchange', onSelectionChange));
+    doc.addEventListener('selectionchange', onSelectionChange);
+    onCleanup(() => doc.removeEventListener('selectionchange', onSelectionChange));
   });
 
   // --- Imperative controller (Pattern C): hand the facade a handle over the

package/src/components/confirm-card.tsx

@@ -21,29 +21,33 @@ import { useCardHost } from '../primitives/card-host';
 import { AlertTriangle, Check, X } from 'lucide-solid';
 
 // ─────────────────────────────────────────────────────────────────────────────
-// Types (confirm.schema.json) — see src/primitives/card-schemas/confirm.schema.json
+// Types (confirm.schema.json) — AUTHORED IN ../primitives/card-data-types.ts.
+//
+// They used to be declared here, and moving them is the fourth instance of the
+// split card-tags.ts and card-component-types.ts already made twice: a type
+// import still has to RESOLVE, so while these lived in a `.tsx` no Node/no-DOM
+// project could name them (TS6142), which meant `@kitn.ai/ui/schemas` could not
+// re-export them and a TypeScript backend building a card envelope got
+// `data: unknown` while Python and Go read the full shape out of the published
+// JSON Schemas. They are also `type` aliases rather than `interface`s now, which
+// is what makes `el.data = myConfirmCardData` compile — see that file's header
+// for both measurements. Re-exported here, so this module's surface is unchanged.
 // ─────────────────────────────────────────────────────────────────────────────
 
-export type ConfirmActionStyle = 'primary' | 'default' | 'destructive';
-export type ConfirmTone = 'default' | 'warning' | 'danger';
+import type {
+  ConfirmAction,
+  ConfirmActionStyle,
+  ConfirmCardData,
+  ConfirmTone,
+} from '../primitives/card-data-types';
 
-export interface ConfirmAction {
-  id: string;
-  label: string;
-  style?: ConfirmActionStyle;
-  payload?: unknown;
-  default?: boolean;
-}
-
-export interface ConfirmCardData {
-  heading?: string;
-  body?: string;
-  tone?: ConfirmTone;
-  actions: ConfirmAction[]; // 1..4
-  dismissible?: boolean;
-}
-
-export type ConfirmCardEnvelope = CardEnvelope<'confirm', ConfirmCardData>;
+export type {
+  ConfirmAction,
+  ConfirmActionStyle,
+  ConfirmCardData,
+  ConfirmCardEnvelope,
+  ConfirmTone,
+} from '../primitives/card-data-types';
 
 export const CONFIRM_CARD_TYPE = 'confirm' as const;
 

package/src/components/context.tsx

@@ -2,12 +2,12 @@ import { type JSX, Show, createContext, createMemo, useContext } from 'solid-js'
 import { HoverCardRoot, HoverCardTrigger, HoverCardContent } from '../ui/hover-card';
 import { cn } from '../utils/cn';
 import { Button } from '../ui/button';
+import { ProgressBar, type ProgressTone } from '../ui/progress-bar';
 
 const ICON_RADIUS = 10;
 const ICON_VIEWBOX = 24;
 const ICON_CENTER = 12;
 const ICON_STROKE_WIDTH = 2;
-const PERCENT_MAX = 100;
 
 /** Default fraction (0–1) at which the meter transitions to the warning colour. */
 export const DEFAULT_WARN_THRESHOLD = 0.7;
@@ -206,7 +206,6 @@ export function ContextContentHeader(props: ContextContentHeaderProps) {
   const displayPct = createMemo(() => fmtPercent.format(usedPercent()));
   const used = createMemo(() => fmtCompact.format(ctx.usedTokens));
   const total = createMemo(() => fmtCompact.format(ctx.maxTokens));
-  const barWidth = createMemo(() => `${Math.min(usedPercent() * PERCENT_MAX, PERCENT_MAX)}%`);
 
   const severity = createMemo<ContextSeverity>(() => {
     const pct = usedPercent();
@@ -215,11 +214,16 @@ export function ContextContentHeader(props: ContextContentHeaderProps) {
     return 'ok';
   });
 
-  const colorClass = createMemo(() => {
+  // Severity used to pick a bare hue class and nothing else, so the meter was a
+  // pair of styled divs: no role, no value, invisible to assistive tech. Map it to
+  // the shared ProgressBar's semantic `tone` instead and let that primitive supply
+  // `role="progressbar"` + aria-valuenow/min/max, rather than hand-rolling those
+  // onto the divs.
+  const tone = createMemo<ProgressTone>(() => {
     const s = severity();
-    if (s === 'danger') return 'bg-red-400';
-    if (s === 'warn') return 'bg-yellow-400';
-    return 'bg-primary';
+    if (s === 'danger') return 'error';
+    if (s === 'warn') return 'warning';
+    return 'primary';
   });
 
   return (
@@ -232,12 +236,14 @@ export function ContextContentHeader(props: ContextContentHeaderProps) {
           </p>
         </div>
         <div class="space-y-2">
-          <div class="h-1.5 w-full rounded-full bg-muted overflow-hidden">
-            <div
-              class={cn('h-full rounded-full transition-all', colorClass())}
-              style={{ width: barWidth() }}
-            />
-          </div>
+          {/* Values are the raw token counts, so a screen reader announces
+              "190,000 of 200,000" rather than a bare percentage. */}
+          <ProgressBar
+            value={ctx.usedTokens}
+            max={ctx.maxTokens}
+            tone={tone()}
+            aria-label="Context usage"
+          />
         </div>
       </Show>
     </div>
@@ -306,7 +312,15 @@ export interface ContextUsageRowProps {
   children?: JSX.Element;
 }
 
-export function ContextInputUsage(props: ContextUsageRowProps) {
+// The four rows share one shape, but each still ships a `<Name>Props` alias: a
+// consumer typing a wrapper around one of them should not have to discover that
+// the shared name exists.
+export type ContextInputUsageProps = ContextUsageRowProps;
+export type ContextOutputUsageProps = ContextUsageRowProps;
+export type ContextReasoningUsageProps = ContextUsageRowProps;
+export type ContextCacheUsageProps = ContextUsageRowProps;
+
+export function ContextInputUsage(props: ContextInputUsageProps) {
   const ctx = useContextValue();
   return (
     <Show when={props.children || ctx.inputTokens}>
@@ -320,7 +334,7 @@ export function ContextInputUsage(props: ContextUsageRowProps) {
   );
 }
 
-export function ContextOutputUsage(props: ContextUsageRowProps) {
+export function ContextOutputUsage(props: ContextOutputUsageProps) {
   const ctx = useContextValue();
   return (
     <Show when={props.children || ctx.outputTokens}>
@@ -334,7 +348,7 @@ export function ContextOutputUsage(props: ContextUsageRowProps) {
   );
 }
 
-export function ContextReasoningUsage(props: ContextUsageRowProps) {
+export function ContextReasoningUsage(props: ContextReasoningUsageProps) {
   const ctx = useContextValue();
   return (
     <Show when={props.children || ctx.reasoningTokens}>
@@ -348,7 +362,7 @@ export function ContextReasoningUsage(props: ContextUsageRowProps) {
   );
 }
 
-export function ContextCacheUsage(props: ContextUsageRowProps) {
+export function ContextCacheUsage(props: ContextCacheUsageProps) {
   const ctx = useContextValue();
   return (
     <Show when={props.children || ctx.cacheTokens}>

package/src/components/conversation-item.tsx

@@ -43,6 +43,12 @@ export function ConversationItem(props: ConversationItemProps) {
   return (
     <button
       data-conversation-id={local.conversation.id}
+      // `isActive` drives the selected LOOK below; it has to reach assistive tech
+      // too, or the active conversation is visible only to sighted users. `true`
+      // rather than `page` because this selects a conversation within the app, it
+      // is not page navigation — same call as ui/agent-card.tsx and ui/pane-group.tsx
+      // (ui/nav.tsx uses `page` because its items really are nav links).
+      aria-current={local.isActive ? 'true' : undefined}
       onClick={() => local.onSelect(local.conversation.id)}
       class={cn(
         'w-full rounded-lg text-left transition-colors',

package/src/components/conversation-list.tsx

@@ -16,7 +16,9 @@ import type { ConversationSummary, ConversationGroup } from '../types';
  * surrounding region (the workspace puts the thread beside it, the standalone
  * element stands alone). `onExpand` reopens the rail.
  */
-export function CollapsedRail(props: { onExpand: () => void; class?: string }) {
+export interface CollapsedRailProps { onExpand: () => void; class?: string }
+
+export function CollapsedRail(props: CollapsedRailProps) {
   return (
     <Button
       variant="ghost" size="icon-sm" aria-label="Open sidebar"
@@ -94,7 +96,21 @@ export function ConversationList(props: ConversationListProps) {
     return grouped;
   });
 
-  const ungrouped = createMemo(() => groupedConversations().get(undefined) ?? []);
+  /**
+   * Everything that is NOT filed under a rendered group heading: no `groupId` at
+   * all, OR a `groupId` that matches no entry in `groups`.
+   *
+   * The second half used to be dropped on the floor. `groups` drives the render
+   * loop, so a conversation pointing at a group the consumer had not declared
+   * (a stale id, a group removed from the array, a filtered/paginated `groups`
+   * response) vanished from the sidebar with no error and no empty state — the
+   * list just silently held fewer rows than the data it was given. Falling through
+   * to "Ungrouped" keeps every conversation the consumer passed in reachable.
+   */
+  const ungrouped = createMemo(() => {
+    const known = new Set((local.groups ?? []).map((g) => g.id));
+    return filteredConversations().filter((c) => c.groupId == null || !known.has(c.groupId));
+  });
 
   return (
     <div class={cn('flex flex-col h-full bg-sidebar', local.class)}>

package/src/components/file-tree.tsx

@@ -18,28 +18,17 @@ import {
   File as FileIcon,
 } from 'lucide-solid';
 
-/** A single artifact file the tree can show + the preview can load. */
-export interface FileTreeFile {
-  /** Tree label/key. Folders are built from `/`-delimited segments. */
-  path: string;
-  /** Where the preview loads it (CDN/S3/dev-server/API). */
-  url?: string;
-  /** Source for the Code tab. */
-  code?: string;
-  /** Language id for syntax highlighting (e.g. `html`, `css`, `tsx`). */
-  language?: string;
-  /** Kind — drives the icon + whether Code applies. */
-  type?: 'html' | 'pdf' | 'image' | 'other';
-  /** Lines added vs the base. Rendered as a trailing `+N` stat (success hue,
-   *  tabular-nums). Only shown when present; omit for a plain file row. */
-  additions?: number;
-  /** Lines removed vs the base. Rendered as a trailing `-N` stat (error hue). */
-  deletions?: number;
-  /** Change status vs the base. Drives a small trailing status letter in the
-   *  conventional VCS hue (added=green, modified=amber, deleted=red,
-   *  renamed=blue, untracked=muted). Only shown when present. */
-  status?: 'added' | 'modified' | 'deleted' | 'renamed' | 'untracked';
-}
+/** A single artifact file the tree can show + the preview can load.
+ *
+ *  AUTHORED IN ../primitives/card-data-types.ts as `ArtifactCardFile`, and aliased
+ *  here rather than declared, so there is ONE shape and not a copy of one. It has
+ *  to live in that `.ts` because `ArtifactCardData.files` reaches it: a type import
+ *  still has to RESOLVE, and a Node/no-DOM project (tsconfig.mcp.json has no `jsx`
+ *  on purpose) cannot resolve a `.tsx` at all — so leaving this declaration here
+ *  would put TS6142 back on any backend that names an artifact card payload. See
+ *  that file's header. */
+export type { ArtifactCardFile as FileTreeFile } from '../primitives/card-data-types';
+import type { ArtifactCardFile as FileTreeFile } from '../primitives/card-data-types';
 
 /** A change status a file can carry. */
 export type FileStatus = NonNullable<FileTreeFile['status']>;

package/src/components/file-upload.tsx

@@ -66,16 +66,22 @@ function FileUpload(props: FileUploadProps) {
       }
     };
 
-    window.addEventListener('dragenter', handleDragIn);
-    window.addEventListener('dragleave', handleDragOut);
-    window.addEventListener('dragover', handleDrag);
-    window.addEventListener('drop', handleDrop);
+    // Captured at SETUP and closed over, never re-resolved as a global inside
+    // `onCleanup`: cleanup can run after the host removed the DOM globals (a
+    // `kai-*` release is deferred one microtask past detachment, so an
+    // environment teardown gets in between), and a bare `window` there throws.
+    // See tests/components/teardown-without-dom-globals.test.tsx.
+    const win = window;
+    win.addEventListener('dragenter', handleDragIn);
+    win.addEventListener('dragleave', handleDragOut);
+    win.addEventListener('dragover', handleDrag);
+    win.addEventListener('drop', handleDrop);
 
     onCleanup(() => {
-      window.removeEventListener('dragenter', handleDragIn);
-      window.removeEventListener('dragleave', handleDragOut);
-      window.removeEventListener('dragover', handleDrag);
-      window.removeEventListener('drop', handleDrop);
+      win.removeEventListener('dragenter', handleDragIn);
+      win.removeEventListener('dragleave', handleDragOut);
+      win.removeEventListener('dragover', handleDrag);
+      win.removeEventListener('drop', handleDrop);
     });
   });
 

package/src/components/form.tsx

@@ -44,53 +44,20 @@ import {
 // Types (the JSON-Schema subset kai-form renders) — see form.schema.json.
 // ─────────────────────────────────────────────────────────────────────────────
 
-/** A field definition (the JSON Schema subset kai-form renders). */
-export interface FormField {
-  type: 'string' | 'number' | 'integer' | 'boolean' | 'array' | 'object';
-  title?: string;
-  description?: string;
-  default?: unknown;
-  enum?: unknown[];
-  format?: 'email' | 'uri' | 'url' | 'date' | 'date-time' | 'time';
-  minimum?: number;
-  maximum?: number;
-  minLength?: number;
-  maxLength?: number;
-  pattern?: string;
-  minItems?: number;
-  maxItems?: number;
-  items?: FormField | { enum: unknown[] };
-  properties?: Record<string, FormField>;
-  required?: string[];
-  readOnly?: boolean;
-  'x-kai-widget'?:
-    | 'textarea'
-    | 'slider'
-    | 'rating'
-    | 'radio'
-    | 'select'
-    | 'checkbox'
-    | 'password'
-    | 'switch';
-  'x-kai-placeholder'?: string;
-  'x-kai-step'?: number;
-}
-
-/** The form definition = CardEnvelope.data for type:'form'. */
-export interface FormDefinition {
-  type: 'object';
-  title?: string;
-  description?: string;
-  required?: string[];
-  properties: Record<string, FormField>;
-  'x-kai-order'?: string[];
-  'x-kai-inlineMax'?: number;
-  'x-kai-submitLabel'?: string;
-  'x-kai-dismissible'?: boolean;
-  'x-kai-actions'?: { id: string; label: string; variant?: 'default' | 'ghost' | 'outline' }[];
-}
-
-export type FormCardEnvelope = CardEnvelope<'form', FormDefinition>;
+// AUTHORED IN ../primitives/card-data-types.ts. See the note in confirm-card.tsx,
+// or that file's header, for why they left a `.tsx` and why they are `type`
+// aliases. `FormField` in particular CANNOT be an interface: it is
+// self-referential, so the element-types generator can only inline it down to a
+// `Record<string, unknown>` placeholder, and an interface is not assignable to
+// that. Re-exported here unchanged.
+
+import type { FormDefinition, FormField } from '../primitives/card-data-types';
+
+export type {
+  FormCardEnvelope,
+  FormDefinition,
+  FormField,
+} from '../primitives/card-data-types';
 
 /** The internal widget identifiers `widgetFor` resolves to. */
 export type WidgetKind =

package/src/components/loader.tsx

@@ -24,9 +24,36 @@ export interface LoaderProps {
   class?: string;
 }
 
+/** Props of the shape-only loader variants (no label). */
+export interface LoaderShapeProps {
+  class?: string;
+  size?: LoaderSize;
+}
+
+/** Props of the text-based loader variants, which also take the label. */
+export interface LoaderTextProps extends LoaderShapeProps {
+  text?: string;
+}
+
+// Every variant shortcut ships its own `<Name>Props` alias: a consumer typing a
+// wrapper around `<DotsLoader>` must be able to name its props without knowing
+// that nine components happen to share one shape.
+export type CircularLoaderProps = LoaderShapeProps;
+export type ClassicLoaderProps = LoaderShapeProps;
+export type PulseLoaderProps = LoaderShapeProps;
+export type PulseDotLoaderProps = LoaderShapeProps;
+export type DotsLoaderProps = LoaderShapeProps;
+export type TypingLoaderProps = LoaderShapeProps;
+export type WaveLoaderProps = LoaderShapeProps;
+export type BarsLoaderProps = LoaderShapeProps;
+export type TerminalLoaderProps = LoaderShapeProps;
+export type TextBlinkLoaderProps = LoaderTextProps;
+export type TextShimmerLoaderProps = LoaderTextProps;
+export type TextDotsLoaderProps = LoaderTextProps;
+
 // --- CircularLoader ---
 
-export function CircularLoader(props: { class?: string; size?: LoaderSize }) {
+export function CircularLoader(props: CircularLoaderProps) {
   const size = () => props.size ?? 'md';
   const sizeClasses = { sm: 'size-4', md: 'size-5', lg: 'size-6' };
   return (
@@ -44,7 +71,7 @@ export function CircularLoader(props: { class?: string; size?: LoaderSize }) {
 
 // --- ClassicLoader ---
 
-export function ClassicLoader(props: { class?: string; size?: LoaderSize }) {
+export function ClassicLoader(props: ClassicLoaderProps) {
   const size = () => props.size ?? 'md';
   const sizeClasses = { sm: 'size-4', md: 'size-5', lg: 'size-6' };
   const barSizes = {
@@ -81,7 +108,7 @@ export function ClassicLoader(props: { class?: string; size?: LoaderSize }) {
 
 // --- PulseLoader ---
 
-export function PulseLoader(props: { class?: string; size?: LoaderSize }) {
+export function PulseLoader(props: PulseLoaderProps) {
   const size = () => props.size ?? 'md';
   const sizeClasses = { sm: 'size-4', md: 'size-5', lg: 'size-6' };
   return (
@@ -94,7 +121,7 @@ export function PulseLoader(props: { class?: string; size?: LoaderSize }) {
 
 // --- PulseDotLoader ---
 
-export function PulseDotLoader(props: { class?: string; size?: LoaderSize }) {
+export function PulseDotLoader(props: PulseDotLoaderProps) {
   const size = () => props.size ?? 'md';
   const sizeClasses = { sm: 'size-1', md: 'size-2', lg: 'size-3' };
   return (
@@ -112,7 +139,7 @@ export function PulseDotLoader(props: { class?: string; size?: LoaderSize }) {
 
 // --- DotsLoader ---
 
-export function DotsLoader(props: { class?: string; size?: LoaderSize }) {
+export function DotsLoader(props: DotsLoaderProps) {
   const size = () => props.size ?? 'md';
   const dotSizes = { sm: 'h-1.5 w-1.5', md: 'h-2 w-2', lg: 'h-2.5 w-2.5' };
   const containerSizes = { sm: 'h-4', md: 'h-5', lg: 'h-6' };
@@ -136,7 +163,7 @@ export function DotsLoader(props: { class?: string; size?: LoaderSize }) {
 
 // --- TypingLoader ---
 
-export function TypingLoader(props: { class?: string; size?: LoaderSize }) {
+export function TypingLoader(props: TypingLoaderProps) {
   const size = () => props.size ?? 'md';
   const dotSizes = { sm: 'h-1 w-1', md: 'h-1.5 w-1.5', lg: 'h-2 w-2' };
   const containerSizes = { sm: 'h-4', md: 'h-5', lg: 'h-6' };
@@ -160,7 +187,7 @@ export function TypingLoader(props: { class?: string; size?: LoaderSize }) {
 
 // --- WaveLoader ---
 
-export function WaveLoader(props: { class?: string; size?: LoaderSize }) {
+export function WaveLoader(props: WaveLoaderProps) {
   const size = () => props.size ?? 'md';
   const barWidths = { sm: 'w-0.5', md: 'w-0.5', lg: 'w-1' };
   const containerSizes = { sm: 'h-4', md: 'h-5', lg: 'h-6' };
@@ -192,7 +219,7 @@ export function WaveLoader(props: { class?: string; size?: LoaderSize }) {
 
 // --- BarsLoader ---
 
-export function BarsLoader(props: { class?: string; size?: LoaderSize }) {
+export function BarsLoader(props: BarsLoaderProps) {
   const size = () => props.size ?? 'md';
   const barWidths = { sm: 'w-1', md: 'w-1.5', lg: 'w-2' };
   const containerSizes = { sm: 'h-4 gap-1', md: 'h-5 gap-1.5', lg: 'h-6 gap-2' };
@@ -216,7 +243,7 @@ export function BarsLoader(props: { class?: string; size?: LoaderSize }) {
 
 // --- TerminalLoader ---
 
-export function TerminalLoader(props: { class?: string; size?: LoaderSize }) {
+export function TerminalLoader(props: TerminalLoaderProps) {
   const size = () => props.size ?? 'md';
   const cursorSizes = { sm: 'h-3 w-1.5', md: 'h-4 w-2', lg: 'h-5 w-2.5' };
   const textSizes = { sm: 'text-xs', md: 'text-sm', lg: 'text-base' };
@@ -232,7 +259,7 @@ export function TerminalLoader(props: { class?: string; size?: LoaderSize }) {
 
 // --- TextBlinkLoader ---
 
-export function TextBlinkLoader(props: { text?: string; class?: string; size?: LoaderSize }) {
+export function TextBlinkLoader(props: TextBlinkLoaderProps) {
   const size = () => props.size ?? 'md';
   const textSizes = { sm: 'text-xs', md: 'text-sm', lg: 'text-base' };
   return (
@@ -250,7 +277,7 @@ export function TextBlinkLoader(props: { text?: string; class?: string; size?: L
 
 // --- TextShimmerLoader ---
 
-export function TextShimmerLoader(props: { text?: string; class?: string; size?: LoaderSize }) {
+export function TextShimmerLoader(props: TextShimmerLoaderProps) {
   const size = () => props.size ?? 'md';
   const textSizes = { sm: 'text-xs', md: 'text-sm', lg: 'text-base' };
   return (
@@ -270,7 +297,7 @@ export function TextShimmerLoader(props: { text?: string; class?: string; size?:
 
 // --- TextDotsLoader ---
 
-export function TextDotsLoader(props: { text?: string; class?: string; size?: LoaderSize }) {
+export function TextDotsLoader(props: TextDotsLoaderProps) {
   const size = () => props.size ?? 'md';
   const textSizes = { sm: 'text-xs', md: 'text-sm', lg: 'text-base' };
   return (

package/src/components/message-skills.tsx

@@ -3,8 +3,12 @@ import { cn } from "../utils/cn";
 
 // --- MessageSkills ---
 
+/** One skill badge. Also the shape of `<kai-skills>`' `skills` property and of a
+ *  `<kai-skill>` light-DOM child. */
 export interface Skill {
+  /** Stable identifier for the skill. */
   id: string;
+  /** Human-readable skill name shown on the badge. */
   name: string;
 }