@kitn.ai/ui 0.20.1 → 0.21.0

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;
 }