@kitn.ai/ui 0.15.0 → 0.16.0

package/dist/components/form.d.ts

@@ -0,0 +1,103 @@
+import { JSX } from 'solid-js';
+import { CardEnvelope, CardHost, CardResolution } from '../primitives/card-contract';
+/** 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>;
+/** The internal widget identifiers `widgetFor` resolves to. */
+export type WidgetKind = 'text' | 'textarea' | 'password' | 'email' | 'url' | 'date' | 'datetime' | 'time' | 'number' | 'slider' | 'rating' | 'switch' | 'checkbox' | 'radio' | 'select' | 'checkbox-group' | 'multiselect' | 'repeater' | 'taglist' | 'fieldset' | 'unsupported';
+export declare const DEFAULT_INLINE_MAX = 4;
+/** Resolve the widget for a field. An explicit valid `x-kai-widget` always wins;
+ *  otherwise the type/format/enum/constraint combination selects the widget. */
+export declare function widgetFor(field: FormField, inlineMax: number): WidgetKind;
+/** Humanize a camelCase / snake_case property key into a label. */
+export declare function humanize(key: string): string;
+/** Field order: `x-kai-order` (filtered to known keys, missing appended) if
+ *  present, else `required` first then schema declaration order. */
+export declare function orderedKeys(def: FormDefinition): string[];
+/** Coerce a raw control value to the field's JSON type. Empty number string →
+ *  undefined; number/integer → Number; boolean → real boolean. */
+export declare function coerceValue(field: FormField, raw: unknown): unknown;
+export interface FormValidation {
+    valid: boolean;
+    fieldErrors: Record<string, string>;
+}
+/** Full client-side validation of `values` against the form definition. Returns a
+ *  per-field error map (the contract validator subset, applied field-by-field so
+ *  each field can show its own inline message). */
+export declare function validateForm(def: FormDefinition, values: Record<string, unknown>): FormValidation;
+export interface FormSummaryRow {
+    key: string;
+    label: string;
+    value: string;
+}
+/** Format one field's value for the read-only summary. */
+export declare function formatFieldValue(field: FormField | undefined, raw: unknown): string;
+/** Build the label→value rows for a submitted form, honoring x-kai-order. */
+export declare function summarizeForm(def: FormDefinition, data: Record<string, unknown>): FormSummaryRow[];
+/** Build the result object: coerced values with empty optional fields omitted.
+ *  `false` and `0` are kept (they are real values, not "empty"). */
+export declare function buildResult(def: FormDefinition, values: Record<string, unknown>): Record<string, unknown>;
+export interface FormProps {
+    /** The form definition (CardEnvelope.data). */
+    data?: FormDefinition;
+    /** The card id used to correlate every emitted CardEvent. */
+    cardId?: string;
+    /** The envelope title rendered in the card chrome. */
+    heading?: string;
+    /** Optional explicit CardHost (otherwise read from a CardProvider, otherwise the
+     *  bubbling `kai-card` CustomEvent off `hostElement`). */
+    host?: CardHost;
+    /** The custom-element host node, for the bubbling `kai-card` fallback emit. */
+    hostElement?: HTMLElement;
+    class?: string;
+    /** When set, render the chromed read-only view instead of the form inputs. */
+    resolution?: CardResolution;
+}
+/**
+ * `Form` — renders a JSON-Schema form definition into themed, accessible widgets
+ * inside `Card` chrome, validates input against that schema, and emits the
+ * collected, coerced, validated object up the Card contract as `submit`.
+ * Reads context/emits via a `CardProvider` when present, else the bubbling
+ * `kai-card` CustomEvent.
+ */
+export declare function Form(props: FormProps): JSX.Element;

package/dist/components/image.d.ts

@@ -0,0 +1,12 @@
+import { JSX } from 'solid-js';
+export interface GeneratedImageLike {
+    base64?: string;
+    uint8Array?: Uint8Array;
+    mediaType?: string;
+}
+export interface ImageProps extends GeneratedImageLike {
+    alt: string;
+    class?: string;
+}
+declare function Image(props: ImageProps): JSX.Element;
+export { Image };

package/dist/components/link-preview.d.ts

@@ -0,0 +1,23 @@
+import { JSX } from 'solid-js';
+import { CardEvent } from '../primitives/card-contract';
+import { LinkPreviewData } from '../primitives/link-preview';
+export interface LinkPreviewProps {
+    /** The card id correlating every emitted event. */
+    cardId: string;
+    /** The link payload (data-down). */
+    data: LinkPreviewData;
+    /** Emit a contract CardEvent up (host routes it). */
+    onEmit?: (event: CardEvent) => void;
+    /** Extra classes for the card root. */
+    class?: string;
+}
+/**
+ * `LinkPreview` — a pure, themed, accessible rich link / OG preview. Renders from the
+ * supplied metadata; it never fetches the network itself. When the payload is a
+ * bare `{ url }` and an app has registered a `configureLinkPreview` fetcher, it
+ * shows a skeleton, calls the hook, merges the result, and renders. Activating the
+ * card (click / Enter / Space) emits the contract `open` verb (`target:'tab'`); the
+ * host policy performs the navigation so it can veto/redirect.
+ */
+export declare function LinkPreview(props: LinkPreviewProps): JSX.Element;
+export type { LinkPreviewData } from '../primitives/link-preview';

package/dist/components/loader.d.ts

@@ -0,0 +1,60 @@
+export type LoaderVariant = 'circular' | 'classic' | 'pulse' | 'pulse-dot' | 'dots' | 'typing' | 'wave' | 'bars' | 'terminal' | 'text-blink' | 'text-shimmer' | 'loading-dots';
+export type LoaderSize = 'sm' | 'md' | 'lg';
+export interface LoaderProps {
+    variant?: LoaderVariant;
+    size?: LoaderSize;
+    text?: string;
+    class?: string;
+}
+export declare function CircularLoader(props: {
+    class?: string;
+    size?: LoaderSize;
+}): import("solid-js").JSX.Element;
+export declare function ClassicLoader(props: {
+    class?: string;
+    size?: LoaderSize;
+}): import("solid-js").JSX.Element;
+export declare function PulseLoader(props: {
+    class?: string;
+    size?: LoaderSize;
+}): import("solid-js").JSX.Element;
+export declare function PulseDotLoader(props: {
+    class?: string;
+    size?: LoaderSize;
+}): import("solid-js").JSX.Element;
+export declare function DotsLoader(props: {
+    class?: string;
+    size?: LoaderSize;
+}): import("solid-js").JSX.Element;
+export declare function TypingLoader(props: {
+    class?: string;
+    size?: LoaderSize;
+}): import("solid-js").JSX.Element;
+export declare function WaveLoader(props: {
+    class?: string;
+    size?: LoaderSize;
+}): import("solid-js").JSX.Element;
+export declare function BarsLoader(props: {
+    class?: string;
+    size?: LoaderSize;
+}): import("solid-js").JSX.Element;
+export declare function TerminalLoader(props: {
+    class?: string;
+    size?: LoaderSize;
+}): import("solid-js").JSX.Element;
+export declare function TextBlinkLoader(props: {
+    text?: string;
+    class?: string;
+    size?: LoaderSize;
+}): import("solid-js").JSX.Element;
+export declare function TextShimmerLoader(props: {
+    text?: string;
+    class?: string;
+    size?: LoaderSize;
+}): import("solid-js").JSX.Element;
+export declare function TextDotsLoader(props: {
+    text?: string;
+    class?: string;
+    size?: LoaderSize;
+}): import("solid-js").JSX.Element;
+export declare function Loader(props: LoaderProps): import("solid-js").JSX.Element;

package/dist/components/markdown.d.ts

@@ -0,0 +1,8 @@
+export interface MarkdownProps {
+    content: string;
+    id?: string;
+    class?: string;
+    codeTheme?: string;
+}
+declare function Markdown(props: MarkdownProps): import("solid-js").JSX.Element;
+export { Markdown };

package/dist/components/message-skills.d.ts

@@ -0,0 +1,15 @@
+import { JSX } from 'solid-js';
+export interface Skill {
+    id: string;
+    name: string;
+}
+export interface MessageSkillsProps {
+    skills: Skill[];
+    class?: string;
+}
+/**
+ * Displays skill badges above a message to indicate which skills
+ * were active when the message was generated.
+ */
+declare function MessageSkills(props: MessageSkillsProps): JSX.Element;
+export { MessageSkills };

package/dist/components/message.d.ts

@@ -0,0 +1,54 @@
+import { JSX } from 'solid-js';
+import { ChatMessageAction, CustomAction } from '../elements/chat-types';
+export interface MessageProps extends JSX.HTMLAttributes<HTMLDivElement> {
+    children: JSX.Element;
+}
+declare function Message(props: MessageProps): JSX.Element;
+export interface MessageAvatarProps {
+    src: string;
+    alt: string;
+    fallback?: string;
+    class?: string;
+}
+declare function MessageAvatar(props: MessageAvatarProps): JSX.Element;
+export interface MessageContentProps extends JSX.HTMLAttributes<HTMLDivElement> {
+    children: JSX.Element | string;
+    markdown?: boolean;
+}
+declare function MessageContent(props: MessageContentProps): JSX.Element;
+export interface MessageActionsProps extends JSX.HTMLAttributes<HTMLDivElement> {
+    children: JSX.Element;
+}
+declare function MessageActions(props: MessageActionsProps): JSX.Element;
+export interface MessageActionBarProps {
+    /** Built-in action names and/or custom action descriptors, in order. */
+    actions: (ChatMessageAction | CustomAction)[];
+    /** `'always'` (default) keeps the bar visible; `'hover'` reveals it on
+     *  parent `.group` hover. */
+    reveal?: 'always' | 'hover';
+    /** Fired with the built-in name or the custom action id when a button is clicked. */
+    onAction: (id: string) => void;
+    class?: string;
+}
+/**
+ * The shared message action toolbar. Renders one ghost icon button per entry —
+ * built-in names pull their label+icon from the curated registry; custom
+ * descriptors use their `label` plus `actionIcon(icon)` (label-only when the
+ * icon is unknown or absent). `reveal="hover"` makes the bar fade in on the
+ * parent `.group`'s hover.
+ */
+declare function MessageActionBar(props: MessageActionBarProps): JSX.Element;
+export interface MessageActionProps {
+    tooltip: string;
+    children: JSX.Element;
+    side?: "top" | "bottom" | "left" | "right";
+    class?: string;
+}
+declare function MessageAction(props: MessageActionProps): JSX.Element;
+export interface MessageCopyButtonProps {
+    content: string;
+    size?: number;
+    class?: string;
+}
+declare function MessageCopyButton(props: MessageCopyButtonProps): JSX.Element;
+export { Message, MessageAvatar, MessageContent, MessageActions, MessageActionBar, MessageAction, MessageCopyButton };

package/dist/components/model-switcher.d.ts

@@ -0,0 +1,8 @@
+import { ModelOption } from '../types';
+export interface ModelSwitcherProps {
+    models: ModelOption[];
+    currentModelId: string;
+    onModelChange: (modelId: string) => void;
+    class?: string;
+}
+export declare function ModelSwitcher(props: ModelSwitcherProps): import("solid-js").JSX.Element;

package/dist/components/prompt-input.d.ts

@@ -0,0 +1,38 @@
+import { JSX } from 'solid-js';
+interface PromptInputContextType {
+    isLoading: boolean;
+    value: () => string;
+    setValue: (value: string) => void;
+    maxHeight: number | string;
+    onSubmit?: () => void;
+    disabled?: boolean;
+    textareaRef: HTMLTextAreaElement | undefined;
+    setTextareaRef: (el: HTMLTextAreaElement) => void;
+}
+declare function usePromptInput(): PromptInputContextType;
+export interface PromptInputProps extends JSX.HTMLAttributes<HTMLDivElement> {
+    isLoading?: boolean;
+    value?: string;
+    onValueChange?: (value: string) => void;
+    maxHeight?: number | string;
+    onSubmit?: () => void;
+    children: JSX.Element;
+    disabled?: boolean;
+}
+declare function PromptInput(props: PromptInputProps): JSX.Element;
+export interface PromptInputTextareaProps extends JSX.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    disableAutosize?: boolean;
+}
+declare function PromptInputTextarea(props: PromptInputTextareaProps): JSX.Element;
+export interface PromptInputActionsProps extends JSX.HTMLAttributes<HTMLDivElement> {
+    children: JSX.Element;
+}
+declare function PromptInputActions(props: PromptInputActionsProps): JSX.Element;
+export interface PromptInputActionProps {
+    tooltip?: string;
+    children: JSX.Element;
+    side?: 'top' | 'bottom' | 'left' | 'right';
+    class?: string;
+}
+declare function PromptInputAction(props: PromptInputActionProps): JSX.Element;
+export { PromptInput, PromptInputTextarea, PromptInputActions, PromptInputAction, usePromptInput, };

package/dist/components/prompt-suggestion.d.ts

@@ -0,0 +1,13 @@
+import { JSX } from 'solid-js';
+export interface PromptSuggestionProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
+    children: JSX.Element | string;
+    variant?: 'outline' | 'ghost' | 'default';
+    size?: 'sm' | 'md' | 'lg' | 'icon' | 'icon-sm';
+    highlight?: string;
+    /** Render as a full-width, left-aligned list row (the "suggested questions"
+     *  idiom) instead of a rounded pill. Wraps long text. Ignored in highlight
+     *  mode, which is always a list row. */
+    block?: boolean;
+}
+declare function PromptSuggestion(props: PromptSuggestionProps): JSX.Element;
+export { PromptSuggestion };

package/dist/components/reasoning.d.ts

@@ -0,0 +1,20 @@
+import { JSX } from 'solid-js';
+export interface ReasoningProps {
+    children: JSX.Element;
+    class?: string;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    isStreaming?: boolean;
+}
+declare function Reasoning(props: ReasoningProps): JSX.Element;
+export interface ReasoningTriggerProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
+    children: JSX.Element;
+}
+declare function ReasoningTrigger(props: ReasoningTriggerProps): JSX.Element;
+export interface ReasoningContentProps extends JSX.HTMLAttributes<HTMLDivElement> {
+    children: JSX.Element;
+    markdown?: boolean;
+    contentClass?: string;
+}
+declare function ReasoningContent(props: ReasoningContentProps): JSX.Element;
+export { Reasoning, ReasoningTrigger, ReasoningContent };

package/dist/components/response-stream.d.ts

@@ -0,0 +1,14 @@
+export type Mode = 'typewriter' | 'fade';
+export interface ResponseStreamProps {
+    textStream: string | AsyncIterable<string>;
+    mode?: Mode;
+    speed?: number;
+    class?: string;
+    onComplete?: () => void;
+    as?: string;
+    fadeDuration?: number;
+    segmentDelay?: number;
+    characterChunkSize?: number;
+}
+declare function ResponseStream(props: ResponseStreamProps): import("solid-js").JSX.Element;
+export { ResponseStream };

package/dist/components/scroll-button.d.ts

@@ -0,0 +1,7 @@
+export interface ScrollButtonProps {
+    class?: string;
+    variant?: 'outline' | 'ghost' | 'default';
+    size?: 'sm' | 'md' | 'lg' | 'icon' | 'icon-sm';
+}
+declare function ScrollButton(props: ScrollButtonProps): import("solid-js").JSX.Element;
+export { ScrollButton };

package/dist/components/slash-command.d.ts

@@ -0,0 +1,15 @@
+export interface SlashCommandItem {
+    id: string;
+    label: string;
+    description?: string;
+    category?: string;
+}
+export interface SlashCommandProps {
+    commands: SlashCommandItem[];
+    activeIds?: string[];
+    onSelect: (command: SlashCommandItem) => void;
+    compact?: boolean;
+    class?: string;
+}
+declare function SlashCommand(props: SlashCommandProps): import("solid-js").JSX.Element;
+export { SlashCommand };

package/dist/components/source.d.ts

@@ -0,0 +1,23 @@
+import { JSX } from 'solid-js';
+export interface SourceProps {
+    href: string;
+    children: JSX.Element;
+}
+declare function Source(props: SourceProps): JSX.Element;
+export interface SourceTriggerProps {
+    label?: string | number;
+    showFavicon?: boolean;
+    class?: string;
+}
+declare function SourceTrigger(props: SourceTriggerProps): JSX.Element;
+export interface SourceContentProps {
+    title: string;
+    description: string;
+    class?: string;
+}
+declare function SourceContent(props: SourceContentProps): JSX.Element;
+declare function SourceList(props: {
+    children: JSX.Element;
+    class?: string;
+}): JSX.Element;
+export { Source, SourceTrigger, SourceContent, SourceList };

package/dist/components/tasks-card.d.ts

@@ -0,0 +1,71 @@
+import { JSX } from 'solid-js';
+import { CardEnvelope, CardHost, CardResolution } from '../primitives/card-contract';
+export interface TasksTask {
+    id: string;
+    label: string;
+    description?: string;
+    checked?: boolean;
+    disabled?: boolean;
+}
+export interface TasksCardData {
+    mode?: 'select';
+    heading?: string;
+    tasks: TasksTask[];
+    selectAll?: boolean;
+    confirmLabel?: string;
+    allowEmpty?: boolean;
+    min?: number;
+    max?: number;
+}
+export interface TasksCardResult {
+    selected: string[];
+}
+export type TasksCardEnvelope = CardEnvelope<'tasks', TasksCardData>;
+export declare const TASKS_CARD_TYPE: "tasks";
+/** De-dupe tasks by id (first wins). Returns the usable list + an optional error. */
+export declare function normalizeTasks(tasks: unknown): {
+    tasks: TasksTask[];
+    error?: string;
+};
+/** The ids of the initially-checked tasks (in input order). */
+export declare function initialSelected(tasks: TasksTask[]): string[];
+/** The selected ids in input order (selection set ∩ tasks, preserving task order). */
+export declare function selectedInOrder(tasks: TasksTask[], selected: Set<string>): string[];
+/** The toggleable (non-disabled) task ids. */
+export declare function toggleableIds(tasks: TasksTask[]): string[];
+export type SelectAllState = 'checked' | 'unchecked' | 'indeterminate';
+/** Select-all tri-state over the toggleable rows. */
+export declare function selectAllState(tasks: TasksTask[], selected: Set<string>): SelectAllState;
+/** Whether select-all should be shown: requested AND not blocked by `max` (since
+ *  "all" would violate max). */
+export declare function showSelectAll(data: TasksCardData, tasks: TasksTask[]): boolean;
+/** Whether confirm is enabled for the current selection count. */
+export declare function canConfirm(data: TasksCardData, count: number): boolean;
+/** Whether an unchecked row is blocked because `max` is reached. */
+export declare function isMaxReached(data: TasksCardData, count: number): boolean;
+/** The disabled-reason text for confirm (for aria-describedby), or undefined. */
+export declare function confirmReason(data: TasksCardData, count: number): string | undefined;
+export interface TasksCardProps {
+    /** The tasks definition (CardEnvelope.data). */
+    data?: TasksCardData;
+    /** The card id used to correlate every emitted CardEvent. */
+    cardId?: string;
+    /** The envelope title rendered in the card chrome. */
+    heading?: string;
+    /** Optional explicit CardHost (otherwise read from a CardProvider, otherwise the
+     *  bubbling `kai-card` CustomEvent off `hostElement`). */
+    host?: CardHost;
+    /** The custom-element host node, for the bubbling `kai-card` fallback emit. */
+    hostElement?: HTMLElement;
+    class?: string;
+    /** When set, render the chromed read-only summary instead of the interactive controls. */
+    resolution?: CardResolution;
+}
+/**
+ * `TasksCard` — a selectable task/plan list (checkbox rows + optional select-all
+ * + a confirm button) inside `Card` chrome. Row toggling and select-all are local
+ * UI state; only the final confirm emits the Card contract's `submit` verb
+ * (`{ kind:'submit', cardId, data:{ selected } }`) with the checked ids in
+ * input order. Emits `ready` on mount and `error` for an unusable definition.
+ */
+export declare function TasksCard(props: TasksCardProps): JSX.Element;

package/dist/components/text-shimmer.d.ts

@@ -0,0 +1,9 @@
+import { JSX } from 'solid-js';
+export interface TextShimmerProps extends JSX.HTMLAttributes<HTMLElement> {
+    as?: string;
+    duration?: number;
+    spread?: number;
+    children: JSX.Element;
+}
+declare function TextShimmer(props: TextShimmerProps): JSX.Element;
+export { TextShimmer };

package/dist/components/thinking-bar.d.ts

@@ -0,0 +1,10 @@
+import { JSX } from 'solid-js';
+export interface ThinkingBarProps {
+    class?: string;
+    text?: string;
+    onStop?: () => void;
+    stopLabel?: string;
+    onClick?: () => void;
+}
+declare function ThinkingBar(props: ThinkingBarProps): JSX.Element;
+export { ThinkingBar };

package/dist/components/tool.d.ts

@@ -0,0 +1,16 @@
+import { JSX } from 'solid-js';
+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;
+}
+export interface ToolProps {
+    toolPart: ToolPart;
+    defaultOpen?: boolean;
+    class?: string;
+}
+declare function Tool(props: ToolProps): JSX.Element;
+export { Tool };

package/dist/components/use-card-resolution.d.ts

@@ -0,0 +1,12 @@
+import { Accessor } from 'solid-js';
+import { CardResolution } from '../primitives/card-contract';
+export interface ResolutionController {
+    resolution: Accessor<CardResolution | undefined>;
+    isResolved: Accessor<boolean>;
+    isOptimistic: Accessor<boolean>;
+    setLocal: (r: CardResolution) => void;
+}
+export declare function useCardResolution(opts: {
+    prop: Accessor<CardResolution | undefined>;
+    data: Accessor<unknown>;
+}): ResolutionController;

package/dist/components/voice-input.d.ts

@@ -0,0 +1,7 @@
+export interface VoiceInputProps {
+    onTranscribe: (audio: Blob) => Promise<string>;
+    onTranscription: (text: string) => void;
+    disabled?: boolean;
+    class?: string;
+}
+export declare function VoiceInput(props: VoiceInputProps): import("solid-js").JSX.Element;