@kitn.ai/ui
Version:
Framework-agnostic, Shadow-DOM web components for building AI chat interfaces — works in React, Vue, Angular, Svelte, or plain HTML. Authored in SolidJS.
513 lines • 273 kB
JSON
[
{
"name": "Artifact",
"group": "Components",
"sourceFile": "src/components/artifact.tsx",
"props": [
{
"name": "src",
"type": "undefined | string",
"displayType": "undefined | string",
"optional": true,
"scalar": true,
"description": "URL the preview iframe frames."
},
{
"name": "files",
"type": "undefined | { path: string; url?: undefined | string; code?: undefined | string; language?: undefined | string; type?: undefined | \"html\" | \"pdf\" | \"image\" | \"other\"; additions?: undefined | number; deletions?: undefined | number; status?: undefined | \"added\" | \"modified\" | \"deleted\" | \"renamed\" | \"untracked\" }[]",
"displayType": "undefined | { path: string; url?: undefined | string; code?: undefined | string; language?: undefined | string; type?: undefined | \"html\" | \"pdf\" | \"image\" | \"other\"; additions?: undefined | number; deletions?: undefined | number; status?: undefined | \"added\" | \"modified\" | \"deleted\" | \"renamed\" | \"untracked\" }[]",
"optional": true,
"scalar": false,
"description": "Files for the Code tab's tree (+ each file's preview `url`)."
},
{
"name": "tab",
"type": "undefined | \"preview\" | \"code\"",
"displayType": "undefined | \"preview\" | \"code\"",
"optional": true,
"scalar": true,
"description": "Controlled active tab — when set, the artifact follows it (re-asserted on every change). When undefined the tab is uncontrolled (see `defaultTab`)."
},
{
"name": "defaultTab",
"type": "undefined | \"preview\" | \"code\"",
"displayType": "undefined | \"preview\" | \"code\"",
"optional": true,
"scalar": true,
"description": "Uncontrolled INITIAL tab (used only when `tab` is undefined). The user can then freely switch tabs; defaults to `preview`."
},
{
"name": "activeFile",
"type": "undefined | string",
"displayType": "undefined | string",
"optional": true,
"scalar": true,
"description": "Selected file path (syncs tree highlight + Code source + preview)."
},
{
"name": "sandbox",
"type": "undefined | string",
"displayType": "undefined | string",
"optional": true,
"scalar": true,
"description": "iframe `sandbox` override. Default `allow-scripts allow-forms`."
},
{
"name": "iframeTitle",
"type": "undefined | string",
"displayType": "undefined | string",
"optional": true,
"scalar": true,
"description": "Accessible iframe title.",
"default": "'Artifact preview'"
},
{
"name": "maximized",
"type": "undefined | false | true",
"displayType": "undefined | false | true",
"optional": true,
"scalar": true,
"description": "Controlled maximize view-state (drives the expand/restore button).",
"default": "false"
},
{
"name": "showNav",
"type": "undefined | false | true",
"displayType": "undefined | false | true",
"optional": true,
"scalar": true,
"description": "Show the back/forward nav buttons. Default `true`."
},
{
"name": "showReload",
"type": "undefined | false | true",
"displayType": "undefined | false | true",
"optional": true,
"scalar": true,
"description": "Show the reload button. Default `true`."
},
{
"name": "showHome",
"type": "undefined | false | true",
"displayType": "undefined | false | true",
"optional": true,
"scalar": true,
"description": "Show the home button. Default `true`."
},
{
"name": "showPathField",
"type": "undefined | false | true",
"displayType": "undefined | false | true",
"optional": true,
"scalar": true,
"description": "Show the editable path/address field. Default `true`."
},
{
"name": "showTabs",
"type": "undefined | false | true",
"displayType": "undefined | false | true",
"optional": true,
"scalar": true,
"description": "Show the Preview|Code tab toggle. Default `true`."
},
{
"name": "expandable",
"type": "undefined | false | true",
"displayType": "undefined | false | true",
"optional": true,
"scalar": true,
"description": "Show the expand-to-fill button. Default `false` (opt-in)."
},
{
"name": "openInTab",
"type": "undefined | false | true",
"displayType": "undefined | false | true",
"optional": true,
"scalar": true,
"description": "Show the open-in-new-tab button. Default `false` (opt-in)."
},
{
"name": "standalone",
"type": "undefined | false | true",
"displayType": "undefined | false | true",
"optional": true,
"scalar": true,
"description": "Standalone chrome: rounded + bordered (default in-panel = square, borderless)."
},
{
"name": "readonlyPath",
"type": "undefined | false | true",
"displayType": "undefined | false | true",
"optional": true,
"scalar": true,
"description": "Make the path field read-only (visible, nav-tracking, non-editable)."
},
{
"name": "displayUrl",
"type": "undefined | string",
"displayType": "undefined | string",
"optional": true,
"scalar": true,
"description": "Friendly address shown in the path field INSTEAD of the real current url (read-only, non-navigable). Use when the framed url is not consumer-facing (e.g. a `data:` blob) so a clean address is shown instead of leaking it. Unset = show the real url (editable per `readonlyPath`)."
}
],
"callbacks": [
{
"name": "onNavigate",
"type": "undefined | (url: string) => void",
"displayType": "undefined | (url: string) => void",
"description": "Fired when the preview navigates (back/forward/reload/path-edit/file-click)."
},
{
"name": "onTabChange",
"type": "undefined | (tab: ArtifactTab) => void",
"displayType": "undefined | (tab: ArtifactTab) => void",
"description": "Fired when the Preview|Code tab changes."
},
{
"name": "onFileSelect",
"type": "undefined | (path: string) => void",
"displayType": "undefined | (path: string) => void",
"description": "Fired when a file is selected in the tree."
},
{
"name": "onMaximizeChange",
"type": "undefined | (maximized: boolean) => void",
"displayType": "undefined | (maximized: boolean) => void",
"description": "Fired when the expand/restore button toggles the maximize view-state."
},
{
"name": "controllerRef",
"type": "undefined | (controller: ArtifactController) => void",
"displayType": "undefined | (controller: ArtifactController) => void",
"description": "Receive the imperative controller once mounted. The `<kai-artifact>` facade forwards these as element methods (back/forward/reload/home/navigate/ selectFile/openExternal/maximize/restore)."
}
],
"slots": [],
"tokens": [],
"extendsHtmlAttributes": true,
"description": "`Artifact` — a framed, switchable generated-artifact viewer. A functional nav toolbar (back · forward · reload · home + editable path field + Preview|Code toggle) over a sandboxed `<iframe>` (Preview) or a file-tree + `<kai-code-block>` (Code). The component self-navigates the iframe and emits `kai-navigate` / `kai-tab-change` / `kai-file-select` so a consumer can observe/sync."
},
{
"name": "Attachment",
"group": "Components",
"sourceFile": "src/components/attachments.tsx",
"props": [
{
"name": "data",
"type": "{ id: string; type: \"file\" | \"source-document\"; filename?: undefined | string; mediaType?: undefined | string; url?: undefined | string; title?: undefined | string }",
"displayType": "{ id: string; type: \"file\" | \"source-document\"; filename?: undefined | string; mediaType?: undefined | string; url?: undefined | string; title?: undefined | string }",
"optional": false,
"scalar": false,
"description": ""
}
],
"callbacks": [
{
"name": "onRemove",
"type": "undefined | () => void",
"displayType": "undefined | () => void",
"description": ""
}
],
"slots": [
{
"name": "children",
"description": ""
}
],
"tokens": [],
"extendsHtmlAttributes": true,
"description": ""
},
{
"name": "AttachmentEmpty",
"group": "Components",
"sourceFile": "src/components/attachments.tsx",
"props": [],
"callbacks": [],
"slots": [
{
"name": "children",
"description": ""
}
],
"tokens": [],
"extendsHtmlAttributes": true,
"description": ""
},
{
"name": "AttachmentHoverCard",
"group": "Components",
"sourceFile": "src/components/attachments.tsx",
"props": [
{
"name": "openDelay",
"type": "undefined | number",
"displayType": "undefined | number",
"optional": true,
"scalar": true,
"description": "",
"default": "0"
},
{
"name": "closeDelay",
"type": "undefined | number",
"displayType": "undefined | number",
"optional": true,
"scalar": true,
"description": "",
"default": "0"
}
],
"callbacks": [],
"slots": [
{
"name": "children",
"description": ""
}
],
"tokens": [],
"extendsHtmlAttributes": false,
"description": ""
},
{
"name": "AttachmentHoverCardContent",
"group": "Components",
"sourceFile": "src/components/attachments.tsx",
"props": [],
"callbacks": [],
"slots": [
{
"name": "children",
"description": ""
}
],
"tokens": [],
"extendsHtmlAttributes": false,
"description": ""
},
{
"name": "AttachmentHoverCardTrigger",
"group": "Components",
"sourceFile": "src/components/attachments.tsx",
"props": [],
"callbacks": [],
"slots": [
{
"name": "children",
"description": ""
}
],
"tokens": [],
"extendsHtmlAttributes": false,
"description": ""
},
{
"name": "AttachmentInfo",
"group": "Components",
"sourceFile": "src/components/attachments.tsx",
"props": [
{
"name": "showMediaType",
"type": "undefined | false | true",
"displayType": "undefined | false | true",
"optional": true,
"scalar": true,
"description": ""
}
],
"callbacks": [],
"slots": [],
"tokens": [],
"extendsHtmlAttributes": true,
"description": ""
},
{
"name": "AttachmentPreview",
"group": "Components",
"sourceFile": "src/components/attachments.tsx",
"props": [],
"callbacks": [
{
"name": "fallbackIcon",
"type": "undefined | null | number | false | true | Node | { length: number; toString: () => string; toLocaleString: { (): string; (locales: string | string[], options?: Intl.NumberFormatOptions & Intl.DateTimeFormatOptions): string; }; pop: () => JSX.Element; push: (...items: JSX.Element[]) => number; concat: { (...items: ConcatArray<JSX.Element>[]): JSX.Element[]; (...items: (JSX.Element | ConcatArray<JSX.Element>)[]): JSX.Element[]; }; join: (separator?: string) => string; reverse: () => JSX.Element[]; shift: () => JSX.Element; slice: (start?: number, end?: number) => JSX.Element[]; sort: (compareFn?: ((a: JSX.Element, b: JSX.Element) => number) | undefined) => JSX.ArrayElement; splice: { (start: number, deleteCount?: number): JSX.Element[]; (start: number, deleteCount: number, ...items: JSX.Element[]): JSX.Element[]; }; unshift: (...items: JSX.Element[]) => number; indexOf: (searchElement: JSX.Element, fromIndex?: number) => number; lastIndexOf: (searchElement: JSX.Element, fromIndex?: number) => number; every: { <S extends JSX.Element>(predicate: (value: JSX.Element, index: number, array: JSX.Element[]) => value is S, thisArg?: any): this is S[]; (predicate: (value: JSX.Element, index: number, array: JSX.Element[]) => unknown, thisArg?: any): boolean; }; some: (predicate: (value: JSX.Element, index: number, array: JSX.Element[]) => unknown, thisArg?: any) => boolean; forEach: (callbackfn: (value: JSX.Element, index: number, array: JSX.Element[]) => void, thisArg?: any) => void; map: <U>(callbackfn: (value: JSX.Element, index: number, array: JSX.Element[]) => U, thisArg?: any) => U[]; filter: { <S extends JSX.Element>(predicate: (value: JSX.Element, index: number, array: JSX.Element[]) => value is S, thisArg?: any): S[]; (predicate: (value: JSX.Element, index: number, array: JSX.Element[]) => unknown, thisArg?: any): JSX.Element[]; }; reduce: { (callbackfn: (previousValue: JSX.Element, currentValue: JSX.Element, currentIndex: number, array: JSX.Element[]) => JSX.Element): JSX.Element; (callbackfn: (previousValue: JSX.Element, currentValue: JSX.Element, currentIndex: number, array: JSX.Element[]) => JSX.Element, initialValue: JSX.Element): JSX.Element; <U>(callbackfn: (previousValue: U, currentValue: JSX.Element, currentIndex: number, array: JSX.Element[]) => U, initialValue: U): U; }; reduceRight: { (callbackfn: (previousValue: JSX.Element, currentValue: JSX.Element, currentIndex: number, array: JSX.Element[]) => JSX.Element): JSX.Element; (callbackfn: (previousValue: JSX.Element, currentValue: JSX.Element, currentIndex: number, array: JSX.Element[]) => JSX.Element, initialValue: JSX.Element): JSX.Element; <U>(callbackfn: (previousValue: U, currentValue: JSX.Element, currentIndex: number, array: JSX.Element[]) => U, initialValue: U): U; }; find: { <S extends JSX.Element>(predicate: (value: JSX.Element, index: number, obj: JSX.Element[]) => value is S, thisArg?: any): S | undefined; (predicate: (value: JSX.Element, index: number, obj: JSX.Element[]) => unknown, thisArg?: any): JSX.Element; }; findIndex: (predicate: (value: JSX.Element, index: number, obj: JSX.Element[]) => unknown, thisArg?: any) => number; fill: (value: JSX.Element, start?: number, end?: number) => JSX.ArrayElement; copyWithin: (target: number, start: number, end?: number) => JSX.ArrayElement; entries: () => ArrayIterator<[number, JSX.Element]>; keys: () => ArrayIterator<number>; values: () => ArrayIterator<JSX.Element>; includes: (searchElement: JSX.Element, fromIndex?: number) => boolean; flatMap: <U, This = undefined>(callback: (this: This, value: JSX.Element, index: number, array: JSX.Element[]) => U | readonly U[], thisArg?: This | undefined) => U[]; flat: <A, D extends number = 1>(this: A, depth?: D | undefined) => FlatArray<A, D>[]; at: (index: number) => JSX.Element; findLast: { <S extends JSX.Element>(predicate: (value: JSX.Element, index: number, array: JSX.Element[]) => value is S, thisArg?: any): S | undefined; (predicate: (value: JSX.Element, index: number, array: JSX.Element[]) => unknown, thisArg?: any): JSX.Element; }; findLastIndex: (predicate: (value: JSX.Element, index: number, array: JSX.Element[]) => unknown, thisArg?: any) => number; toReversed: () => JSX.Element[]; toSorted: (compareFn?: ((a: JSX.Element, b: JSX.Element) => number) | undefined) => JSX.Element[]; toSpliced: { (start: number, deleteCount: number, ...items: JSX.Element[]): JSX.Element[]; (start: number, deleteCount?: number): JSX.Element[]; }; with: (index: number, value: JSX.Element) => JSX.Element[]; __@iterator@2613: () => ArrayIterator<JSX.Element>; __@unscopables@2615: { [x: number]: boolean | undefined; length?: boolean | undefined; toString?: boolean | undefined; toLocaleString?: boolean | undefined; pop?: boolean | undefined; push?: boolean | undefined; concat?: boolean | undefined; join?: boolean | undefined; reverse?: boolean | undefined; shift?: boolean | undefined; slice?: boolean | undefined; sort?: boolean | undefined; splice?: boolean | undefined; unshift?: boolean | undefined; indexOf?: boolean | undefined; lastIndexOf?: boolean | undefined; every?: boolean | undefined; some?: boolean | undefined; forEach?: boolean | undefined; map?: boolean | undefined; filter?: boolean | undefined; reduce?: boolean | undefined; reduceRight?: boolean | undefined; find?: boolean | undefined; findIndex?: boolean | undefined; fill?: boolean | undefined; copyWithin?: boolean | undefined; entries?: boolean | undefined; keys?: boolean | undefined; values?: boolean | undefined; includes?: boolean | undefined; flatMap?: boolean | undefined; flat?: boolean | undefined; at?: boolean | undefined; findLast?: boolean | undefined; findLastIndex?: boolean | undefined; toReversed?: boolean | undefined; toSorted?: boolean | undefined; toSpliced?: boolean | undefined; with?: boolean | undefined; [Symbol.iterator]?: boolean | undefined; readonly [Symbol.unscopables]?: boolean | undefined; } } | string & {}",
"displayType": "undefined | null | number | false | true | Node | { length: number; toString: () => string; toLocaleString: { (): string; (locales: string | string[], options?: Intl.NumberFormatOptions & Intl.DateTimeFormatOptions): string; }; pop: () => JSX.Element; push: (...items: JSX.Element[]) => number; concat: { (...items: ConcatArray<JSX.Element>[]): JSX.Element[]; (...items: (JSX.Element | ConcatArray<JSX.Element>)[]): JSX.Element[]; }; join: (separator?: string) => string; reverse: () => JSX.Element[]; shift: () => JSX.Element; slice: (start?: number, end?: number) => JSX.Element[]; sort: (compareFn?: ((a: JSX.Element, b: JSX.Element) => number) | undefined) => JSX.ArrayElement; splice: { (start: number, deleteCount?: number): JSX.Element[]; (start: number, deleteCount: number, ...items: JSX.Element[]): JSX.Element[]; }; unshift: (...items: JSX.Element[]) => number; indexOf: (searchElement: JSX.Element, fromIndex?: number) => number; lastIndexOf: (searchElement: JSX.Element, fromIndex?: number) => number; every: { <S extends JSX.Element>(predicate: (value: JSX.Element, index: number, array: JSX.Element[]) => value is S, thisArg?: any): this is S[]; (predicate: (value: JSX.Element, index: number, array: JSX.Element[]) => unknown, thisArg?: any): boolean; }; some: (predicate: (value: JSX.Element, index: number, array: JSX.Element[]) => unknown, thisArg?: any) => boolean; forEach: (callbackfn: (value: JSX.Element, index: number, array: JSX.Element[]) => void, thisArg?: any) => void; map: <U>(callbackfn: (value: JSX.Element, index: number, array: JSX.Element[]) => U, thisArg?: any) => U[]; filter: { <S extends JSX.Element>(predicate: (value: JSX.Element, index: number, array: JSX.Element[]) => value is S, thisArg?: any): S[]; (predicate: (value: JSX.Element, index: number, array: JSX.Element[]) => unknown, thisArg?: any): JSX.Element[]; }; reduce: { (callbackfn: (previousValue: JSX.Element, currentValue: JSX.Element, currentIndex: number, array: JSX.Element[]) => JSX.Element): JSX.Element; (callbackfn: (previousValue: JSX.Element, currentValue: JSX.Element, currentIndex: number, array: JSX.Element[]) => JSX.Element, initialValue: JSX.Element): JSX.Element; <U>(callbackfn: (previousValue: U, currentValue: JSX.Element, currentIndex: number, array: JSX.Element[]) => U, initialValue: U): U; }; reduceRight: { (callbackfn: (previousValue: JSX.Element, currentValue: JSX.Element, currentIndex: number, array: JSX.Element[]) => JSX.Element): JSX.Element; (callbackfn: (previousValue: JSX.Element, currentValue: JSX.Element, currentIndex: number, array: JSX.Element[]) => JSX.Element, initialValue: JSX.Element): JSX.Element; <U>(callbackfn: (previousValue: U, currentValue: JSX.Element, currentIndex: number, array: JSX.Element[]) => U, initialValue: U): U; }; find: { <S extends JSX.Element>(predicate: (value: JSX.Element, index: number, obj: JSX.Element[]) => value is S, thisArg?: any): S | undefined; (predicate: (value: JSX.Element, index: number, obj: JSX.Element[]) => unknown, thisArg?: any): JSX.Element; }; findIndex: (predicate: (value: JSX.Element, index: number, obj: JSX.Element[]) => unknown, thisArg?: any) => number; fill: (value: JSX.Element, start?: number, end?: number) => JSX.ArrayElement; copyWithin: (target: number, start: number, end?: number) => JSX.ArrayElement; entries: () => ArrayIterator<[number, JSX.Element]>; keys: () => ArrayIterator<number>; values: () => ArrayIterator<JSX.Element>; includes: (searchElement: JSX.Element, fromIndex?: number) => boolean; flatMap: <U, This = undefined>(callback: (this: This, value: JSX.Element, index: number, array: JSX.Element[]) => U | readonly U[], thisArg?: This | undefined) => U[]; flat: <A, D extends number = 1>(this: A, depth?: D | undefined) => FlatArray<A, D>[]; at: (index: number) => JSX.Element; findLast: { <S extends JSX.Element>(predicate: (value: JSX.Element, index: number, array: JSX.Element[]) => value is S, thisArg?: any): S | undefined; (predicate: (value: JSX.Element, index: number, array: JSX.Element[]) => unknown, thisArg?: any): JSX.Element; }; findLastIndex: (predicate: (value: JSX.Element, index: number, array: JSX.Element[]) => unknown, thisArg?: any) => number; toReversed: () => JSX.Element[]; toSorted: (compareFn?: ((a: JSX.Element, b: JSX.Element) => number) | undefined) => JSX.Element[]; toSpliced: { (start: number, deleteCount: number, ...items: JSX.Element[]): JSX.Element[]; (start: number, deleteCount?: number): JSX.Element[]; }; with: (index: number, value: JSX.Element) => JSX.Element[]; __@iterator@2613: () => ArrayIterator<JSX.Element>; __@unscopables@2615: { [x: number]: boolean | undefined; length?: boolean | undefined; toString?: boolean | undefined; toLocaleString?: boolean | undefined; pop?: boolean | undefined; push?: boolean | undefined; concat?: boolean | undefined; join?: boolean | undefined; reverse?: boolean | undefined; shift?: boolean | undefined; slice?: boolean | undefined; sort?: boolean | undefined; splice?: boolean | undefined; unshift?: boolean | undefined; indexOf?: boolean | undefined; lastIndexOf?: boolean | undefined; every?: boolean | undefined; some?: boolean | undefined; forEach?: boolean | undefined; map?: boolean | undefined; filter?: boolean | undefined; reduce?: boolean | undefined; reduceRight?: boolean | undefined; find?: boolean | undefined; findIndex?: boolean | undefined; fill?: boolean | undefined; copyWithin?: boolean | undefined; entries?: boolean | undefined; keys?: boolean | undefined; values?: boolean | undefined; includes?: boolean | undefined; flatMap?: boolean | undefined; flat?: boolean | undefined; at?: boolean | undefined; findLast?: boolean | undefined; findLastIndex?: boolean | undefined; toReversed?: boolean | undefined; toSorted?: boolean | undefined; toSpliced?: boolean | undefined; with?: boolean | undefined; [Symbol.iterator]?: boolean | undefined; readonly [Symbol.unscopables]?: boolean | undefined; } } | string & {}",
"description": ""
}
],
"slots": [],
"tokens": [],
"extendsHtmlAttributes": true,
"description": ""
},
{
"name": "AttachmentRemove",
"group": "Components",
"sourceFile": "src/components/attachments.tsx",
"props": [
{
"name": "label",
"type": "undefined | string",
"displayType": "undefined | string",
"optional": true,
"scalar": true,
"description": "",
"default": "'Remove'"
}
],
"callbacks": [],
"slots": [
{
"name": "children",
"description": ""
}
],
"tokens": [],
"extendsHtmlAttributes": false,
"description": ""
},
{
"name": "Attachments",
"group": "Components",
"sourceFile": "src/components/attachments.tsx",
"props": [
{
"name": "variant",
"type": "undefined | \"grid\" | \"inline\" | \"list\"",
"displayType": "undefined | \"grid\" | \"inline\" | \"list\"",
"optional": true,
"scalar": true,
"description": "",
"default": "'grid'"
}
],
"callbacks": [],
"slots": [
{
"name": "children",
"description": ""
}
],
"tokens": [],
"extendsHtmlAttributes": true,
"description": ""
},
{
"name": "BarsLoader",
"group": "Components",
"sourceFile": "src/components/loader.tsx",
"props": [
{
"name": "size",
"type": "undefined | \"sm\" | \"md\" | \"lg\"",
"displayType": "undefined | \"sm\" | \"md\" | \"lg\"",
"optional": true,
"scalar": true,
"description": "",
"default": "'md'"
}
],
"callbacks": [],
"slots": [],
"tokens": [],
"extendsHtmlAttributes": false,
"description": ""
},
{
"name": "Card",
"group": "Components",
"sourceFile": "src/components/card.tsx",
"props": [
{
"name": "heading",
"type": "undefined | string",
"displayType": "undefined | string",
"optional": true,
"scalar": true,
"description": "Heading rendered in the card chrome (the contract's CardEnvelope.title). NB: NOT `title` — `title` is a reserved IDL attr (see define.tsx RESERVED)."
},
{
"name": "description",
"type": "undefined | string",
"displayType": "undefined | string",
"optional": true,
"scalar": true,
"description": "Optional supporting text under the heading."
},
{
"name": "errorMessage",
"type": "undefined | string",
"displayType": "undefined | string",
"optional": true,
"scalar": true,
"description": "When set, the card renders its standard inline error state INSTEAD of body."
},
{
"name": "dense",
"type": "undefined | false | true",
"displayType": "undefined | false | true",
"optional": true,
"scalar": true,
"description": "Compact spacing for dense lists of cards."
},
{
"name": "headingId",
"type": "undefined | string",
"displayType": "undefined | string",
"optional": true,
"scalar": true,
"description": "Stable id for the heading (so composing cards can `aria-labelledby` it). Auto-generated when omitted."
},
{
"name": "dismissible",
"type": "undefined | false | true",
"displayType": "undefined | false | true",
"optional": true,
"scalar": true,
"description": "Render a dismiss (×) button that hides the card and calls `onDismiss`. Opt-in, OFF by default — the contract cards never set it, so they are unaffected."
},
{
"name": "href",
"type": "undefined | string",
"displayType": "undefined | string",
"optional": true,
"scalar": true,
"description": "Render the whole card as a link (`<a>`). Wins over `clickable`."
},
{
"name": "target",
"type": "undefined | string",
"displayType": "undefined | string",
"optional": true,
"scalar": true,
"description": "`target` for the `href` anchor."
},
{
"name": "rel",
"type": "undefined | string",
"displayType": "undefined | string",
"optional": true,
"scalar": true,
"description": "`rel` for the `href` anchor (default `noopener noreferrer` when `target=\"_blank\"`)."
},
{
"name": "clickable",
"type": "undefined | false | true",
"displayType": "undefined | false | true",
"optional": true,
"scalar": true,
"description": "Make the whole card behave like a button: `role=\"button\"`, a tabindex, and Enter/Space activation, firing `onCardClick`. Ignored when `href` is set. A clickable/href card must NOT also contain footer action buttons — that nests interactive elements. Use `actions` OR clickable, never both."
}
],
"callbacks": [
{
"name": "media",
"type": "undefined | null | number | false | true | Node | { length: number; toString: () => string; toLocaleString: { (): string; (locales: string | string[], options?: Intl.NumberFormatOptions & Intl.DateTimeFormatOptions): string; }; pop: () => JSX.Element; push: (...items: JSX.Element[]) => number; concat: { (...items: ConcatArray<JSX.Element>[]): JSX.Element[]; (...items: (JSX.Element | ConcatArray<JSX.Element>)[]): JSX.Element[]; }; join: (separator?: string) => string; reverse: () => JSX.Element[]; shift: () => JSX.Element; slice: (start?: number, end?: number) => JSX.Element[]; sort: (compareFn?: ((a: JSX.Element, b: JSX.Element) => number) | undefined) => JSX.ArrayElement; splice: { (start: number, deleteCount?: number): JSX.Element[]; (start: number, deleteCount: number, ...items: JSX.Element[]): JSX.Element[]; }; unshift: (...items: JSX.Element[]) => number; indexOf: (searchElement: JSX.Element, fromIndex?: number) => number; lastIndexOf: (searchElement: JSX.Element, fromIndex?: number) => number; every: { <S extends JSX.Element>(predicate: (value: JSX.Element, index: number, array: JSX.Element[]) => value is S, thisArg?: any): this is S[]; (predicate: (value: JSX.Element, index: number, array: JSX.Element[]) => unknown, thisArg?: any): boolean; }; some: (predicate: (value: JSX.Element, index: number, array: JSX.Element[]) => unknown, thisArg?: any) => boolean; forEach: (callbackfn: (value: JSX.Element, index: number, array: JSX.Element[]) => void, thisArg?: any) => void; map: <U>(callbackfn: (value: JSX.Element, index: number, array: JSX.Element[]) => U, thisArg?: any) => U[]; filter: { <S extends JSX.Element>(predicate: (value: JSX.Element, index: number, array: JSX.Element[]) => value is S, thisArg?: any): S[]; (predicate: (value: JSX.Element, index: number, array: JSX.Element[]) => unknown, thisArg?: any): JSX.Element[]; }; reduce: { (callbackfn: (previousValue: JSX.Element, currentValue: JSX.Element, currentIndex: number, array: JSX.Element[]) => JSX.Element): JSX.Element; (callbackfn: (previousValue: JSX.Element, currentValue: JSX.Element, currentIndex: number, array: JSX.Element[]) => JSX.Element, initialValue: JSX.Element): JSX.Element; <U>(callbackfn: (previousValue: U, currentValue: JSX.Element, currentIndex: number, array: JSX.Element[]) => U, initialValue: U): U; }; reduceRight: { (callbackfn: (previousValue: JSX.Element, currentValue: JSX.Element, currentIndex: number, array: JSX.Element[]) => JSX.Element): JSX.Element; (callbackfn: (previousValue: JSX.Element, currentValue: JSX.Element, currentIndex: number, array: JSX.Element[]) => JSX.Element, initialValue: JSX.Element): JSX.Element; <U>(callbackfn: (previousValue: U, currentValue: JSX.Element, currentIndex: number, array: JSX.Element[]) => U, initialValue: U): U; }; find: { <S extends JSX.Element>(predicate: (value: JSX.Element, index: number, obj: JSX.Element[]) => value is S, thisArg?: any): S | undefined; (predicate: (value: JSX.Element, index: number, obj: JSX.Element[]) => unknown, thisArg?: any): JSX.Element; }; findIndex: (predicate: (value: JSX.Element, index: number, obj: JSX.Element[]) => unknown, thisArg?: any) => number; fill: (value: JSX.Element, start?: number, end?: number) => JSX.ArrayElement; copyWithin: (target: number, start: number, end?: number) => JSX.ArrayElement; entries: () => ArrayIterator<[number, JSX.Element]>; keys: () => ArrayIterator<number>; values: () => ArrayIterator<JSX.Element>; includes: (searchElement: JSX.Element, fromIndex?: number) => boolean; flatMap: <U, This = undefined>(callback: (this: This, value: JSX.Element, index: number, array: JSX.Element[]) => U | readonly U[], thisArg?: This | undefined) => U[]; flat: <A, D extends number = 1>(this: A, depth?: D | undefined) => FlatArray<A, D>[]; at: (index: number) => JSX.Element; findLast: { <S extends JSX.Element>(predicate: (value: JSX.Element, index: number, array: JSX.Element[]) => value is S, thisArg?: any): S | undefined; (predicate: (value: JSX.Element, index: number, array: JSX.Element[]) => unknown, thisArg?: any): JSX.Element; }; findLastIndex: (predicate: (value: JSX.Element, index: number, array: JSX.Element[]) => unknown, thisArg?: any) => number; toReversed: () => JSX.Element[]; toSorted: (compareFn?: ((a: JSX.Element, b: JSX.Element) => number) | undefined) => JSX.Element[]; toSpliced: { (start: number, deleteCount: number, ...items: JSX.Element[]): JSX.Element[]; (start: number, deleteCount?: number): JSX.Element[]; }; with: (index: number, value: JSX.Element) => JSX.Element[]; __@iterator@2613: () => ArrayIterator<JSX.Element>; __@unscopables@2615: { [x: number]: boolean | undefined; length?: boolean | undefined; toString?: boolean | undefined; toLocaleString?: boolean | undefined; pop?: boolean | undefined; push?: boolean | undefined; concat?: boolean | undefined; join?: boolean | undefined; reverse?: boolean | undefined; shift?: boolean | undefined; slice?: boolean | undefined; sort?: boolean | undefined; splice?: boolean | undefined; unshift?: boolean | undefined; indexOf?: boolean | undefined; lastIndexOf?: boolean | undefined; every?: boolean | undefined; some?: boolean | undefined; forEach?: boolean | undefined; map?: boolean | undefined; filter?: boolean | undefined; reduce?: boolean | undefined; reduceRight?: boolean | undefined; find?: boolean | undefined; findIndex?: boolean | undefined; fill?: boolean | undefined; copyWithin?: boolean | undefined; entries?: boolean | undefined; keys?: boolean | undefined; values?: boolean | undefined; includes?: boolean | undefined; flatMap?: boolean | undefined; flat?: boolean | undefined; at?: boolean | undefined; findLast?: boolean | undefined; findLastIndex?: boolean | undefined; toReversed?: boolean | undefined; toSorted?: boolean | undefined; toSpliced?: boolean | undefined; with?: boolean | undefined; [Symbol.iterator]?: boolean | undefined; readonly [Symbol.unscopables]?: boolean | undefined; } } | string & {}",
"displayType": "undefined | null | number | false | true | Node | { length: number; toString: () => string; toLocaleString: { (): string; (locales: string | string[], options?: Intl.NumberFormatOptions & Intl.DateTimeFormatOptions): string; }; pop: () => JSX.Element; push: (...items: JSX.Element[]) => number; concat: { (...items: ConcatArray<JSX.Element>[]): JSX.Element[]; (...items: (JSX.Element | ConcatArray<JSX.Element>)[]): JSX.Element[]; }; join: (separator?: string) => string; reverse: () => JSX.Element[]; shift: () => JSX.Element; slice: (start?: number, end?: number) => JSX.Element[]; sort: (compareFn?: ((a: JSX.Element, b: JSX.Element) => number) | undefined) => JSX.ArrayElement; splice: { (start: number, deleteCount?: number): JSX.Element[]; (start: number, deleteCount: number, ...items: JSX.Element[]): JSX.Element[]; }; unshift: (...items: JSX.Element[]) => number; indexOf: (searchElement: JSX.Element, fromIndex?: number) => number; lastIndexOf: (searchElement: JSX.Element, fromIndex?: number) => number; every: { <S extends JSX.Element>(predicate: (value: JSX.Element, index: number, array: JSX.Element[]) => value is S, thisArg?: any): this is S[]; (predicate: (value: JSX.Element, index: number, array: JSX.Element[]) => unknown, thisArg?: any): boolean; }; some: (predicate: (value: JSX.Element, index: number, array: JSX.Element[]) => unknown, thisArg?: any) => boolean; forEach: (callbackfn: (value: JSX.Element, index: number, array: JSX.Element[]) => void, thisArg?: any) => void; map: <U>(callbackfn: (value: JSX.Element, index: number, array: JSX.Element[]) => U, thisArg?: any) => U[]; filter: { <S extends JSX.Element>(predicate: (value: JSX.Element, index: number, array: JSX.Element[]) => value is S, thisArg?: any): S[]; (predicate: (value: JSX.Element, index: number, array: JSX.Element[]) => unknown, thisArg?: any): JSX.Element[]; }; reduce: { (callbackfn: (previousValue: JSX.Element, currentValue: JSX.Element, currentIndex: number, array: JSX.Element[]) => JSX.Element): JSX.Element; (callbackfn: (previousValue: JSX.Element, currentValue: JSX.Element, currentIndex: number, array: JSX.Element[]) => JSX.Element, initialValue: JSX.Element): JSX.Element; <U>(callbackfn: (previousValue: U, currentValue: JSX.Element, currentIndex: number, array: JSX.Element[]) => U, initialValue: U): U; }; reduceRight: { (callbackfn: (previousValue: JSX.Element, currentValue: JSX.Element, currentIndex: number, array: JSX.Element[]) => JSX.Element): JSX.Element; (callbackfn: (previousValue: JSX.Element, currentValue: JSX.Element, currentIndex: number, array: JSX.Element[]) => JSX.Element, initialValue: JSX.Element): JSX.Element; <U>(callbackfn: (previousValue: U, currentValue: JSX.Element, currentIndex: number, array: JSX.Element[]) => U, initialValue: U): U; }; find: { <S extends JSX.Element>(predicate: (value: JSX.Element, index: number, obj: JSX.Element[]) => value is S, thisArg?: any): S | undefined; (predicate: (value: JSX.Element, index: number, obj: JSX.Element[]) => unknown, thisArg?: any): JSX.Element; }; findIndex: (predicate: (value: JSX.Element, index: number, obj: JSX.Element[]) => unknown, thisArg?: any) => number; fill: (value: JSX.Element, start?: number, end?: number) => JSX.ArrayElement; copyWithin: (target: number, start: number, end?: number) => JSX.ArrayElement; entries: () => ArrayIterator<[number, JSX.Element]>; keys: () => ArrayIterator<number>; values: () => ArrayIterator<JSX.Element>; includes: (searchElement: JSX.Element, fromIndex?: number) => boolean; flatMap: <U, This = undefined>(callback: (this: This, value: JSX.Element, index: number, array: JSX.Element[]) => U | readonly U[], thisArg?: This | undefined) => U[]; flat: <A, D extends number = 1>(this: A, depth?: D | undefined) => FlatArray<A, D>[]; at: (index: number) => JSX.Element; findLast: { <S extends JSX.Element>(predicate: (value: JSX.Element, index: number, array: JSX.Element[]) => value is S, thisArg?: any): S | undefined; (predicate: (value: JSX.Element, index: number, array: JSX.Element[]) => unknown, thisArg?: any): JSX.Element; }; findLastIndex: (predicate: (value: JSX.Element, index: number, array: JSX.Element[]) => unknown, thisArg?: any) => number; toReversed: () => JSX.Element[]; toSorted: (compareFn?: ((a: JSX.Element, b: JSX.Element) => number) | undefined) => JSX.Element[]; toSpliced: { (start: number, deleteCount: number, ...items: JSX.Element[]): JSX.Element[]; (start: number, deleteCount?: number): JSX.Element[]; }; with: (index: number, value: JSX.Element) => JSX.Element[]; __@iterator@2613: () => ArrayIterator<JSX.Element>; __@unscopables@2615: { [x: number]: boolean | undefined; length?: boolean | undefined; toString?: boolean | undefined; toLocaleString?: boolean | undefined; pop?: boolean | undefined; push?: boolean | undefined; concat?: boolean | undefined; join?: boolean | undefined; reverse?: boolean | undefined; shift?: boolean | undefined; slice?: boolean | undefined; sort?: boolean | undefined; splice?: boolean | undefined; unshift?: boolean | undefined; indexOf?: boolean | undefined; lastIndexOf?: boolean | undefined; every?: boolean | undefined; some?: boolean | undefined; forEach?: boolean | undefined; map?: boolean | undefined; filter?: boolean | undefined; reduce?: boolean | undefined; reduceRight?: boolean | undefined; find?: boolean | undefined; findIndex?: boolean | undefined; fill?: boolean | undefined; copyWithin?: boolean | undefined; entries?: boolean | undefined; keys?: boolean | undefined; values?: boolean | undefined; includes?: boolean | undefined; flatMap?: boolean | undefined; flat?: boolean | undefined; at?: boolean | undefined; findLast?: boolean | undefined; findLastIndex?: boolean | undefined; toReversed?: boolean | undefined; toSorted?: boolean | undefined; toSpliced?: boolean | undefined; with?: boolean | undefined; [Symbol.iterator]?: boolean | undefined; readonly [Symbol.unscopables]?: boolean | undefined; } } | string & {}",
"description": "Media region (image/icon) rendered above the heading."
},
{
"name": "actions",
"type": "undefined | null | number | false | true | Node | { length: number; toString: () => string; toLocaleString: { (): string; (locales: string | string[], options?: Intl.NumberFormatOptions & Intl.DateTimeFormatOptions): string; }; pop: () => JSX.Element; push: (...items: JSX.Element[]) => number; concat: { (...items: ConcatArray<JSX.Element>[]): JSX.Element[]; (...items: (JSX.Element | ConcatArray<JSX.Element>)[]): JSX.Element[]; }; join: (separator?: string) => string; reverse: () => JSX.Element[]; shift: () => JSX.Element; slice: (start?: number, end?: number) => JSX.Element[]; sort: (compareFn?: ((a: JSX.Element, b: JSX.Element) => number) | undefined) => JSX.ArrayElement; splice: { (start: number, deleteCount?: number): JSX.Element[]; (start: number, deleteCount: number, ...items: JSX.Element[]): JSX.Element[]; }; unshift: (...items: JSX.Element[]) => number; indexOf: (searchElement: JSX.Element, fromIndex?: number) => number; lastIndexOf: (searchElement: JSX.Element, fromIndex?: number) => number; every: { <S extends JSX.Element>(predicate: (value: JSX.Element, index: number, array: JSX.Element[]) => value is S, thisArg?: any): this is S[]; (predicate: (value: JSX.Element, index: number, array: JSX.Element[]) => unknown, thisArg?: any): boolean; }; some: (predicate: (value: JSX.Element, index: number, array: JSX.Element[]) => unknown, thisArg?: any) => boolean; forEach: (callbackfn: (value: JSX.Element, index: number, array: JSX.Element[]) => void, thisArg?: any) => void; map: <U>(callbackfn: (value: JSX.Element, index: number, array: JSX.Element[]) => U, thisArg?: any) => U[]; filter: { <S extends JSX.Element>(predicate: (value: JSX.Element, index: number, array: JSX.Element[]) => value is S, thisArg?: any): S[]; (predicate: (value: JSX.Element, index: number, array: JSX.Element[]) => unknown, thisArg?: any): JSX.Element[]; }; reduce: { (callbackfn: (previousValue: JSX.Element, currentValue: JSX.Element, currentIndex: number, array: JSX.Element[]) => JSX.Element): JSX.Element; (callbackfn: (previousValue: JSX.Element, currentValue: JSX.Element, currentIndex: number, array: JSX.Element[]) => JSX.Element, initialValue: JSX.Element): JSX.Element; <U>(callbackfn: (previousValue: U, currentValue: JSX.Element, currentIndex: number, array: JSX.Element[]) => U, initialValue: U): U; }; reduceRight: { (callbackfn: (previousValue: JSX.Element, currentValue: JSX.Element, currentIndex: number, array: JSX.Element[]) => JSX.Element): JSX.Element; (callbackfn: (previousValue: JSX.Element, currentValue: JSX.Element, currentIndex: number, array: JSX.Element[]) => JSX.Element, initialValue: JSX.Element): JSX.Element; <U>(callbackfn: (previousValue: U, currentValue: JSX.Element, currentIndex: number, array: JSX.Element[]) => U, initialValue: U): U; }; find: { <S extends JSX.Element>(predicate: (value: JSX.Element, index: number, obj: JSX.Element[]) => value is S, thisArg?: any): S | undefined; (predicate: (value: JSX.Element, index: number, obj: JSX.Element[]) => unknown, thisArg?: any): JSX.Element; }; findIndex: (predicate: (value: JSX.Element, index: number, obj: JSX.Element[]) => unknown, thisArg?: any) => number; fill: (value: JSX.Element, start?: number, end?: number) => JSX.ArrayElement; copyWithin: (target: number, start: number, end?: number) => JSX.ArrayElement; entries: () => ArrayIterator<[number, JSX.Element]>; keys: () => ArrayIterator<number>; values: () => ArrayIterator<JSX.Element>; includes: (searchElement: JSX.Element, fromIndex?: number) => boolean; flatMap: <U, This = undefined>(callback: (this: This, value: JSX.Element, index: number, array: JSX.Element[]) => U | readonly U[], thisArg?: This | undefined) => U[]; flat: <A, D extends number = 1>(this: A, depth?: D | undefined) => FlatArray<A, D>[]; at: (index: number) => JSX.Element; findLast: { <S extends JSX.Element>(predicate: (value: JSX.Element, index: number, array: JSX.Element[]) => value is S, thisArg?: any): S | undefined; (predicate: (value: JSX.Element, index: number, array: JSX.Element[]) => unknown, thisArg?: any): JSX.Element; }; findLastIndex: (predicate: (value: JSX.Element, index: number, array: JSX.Element[]) => unknown, thisArg?: any) => number; toReversed: () => JSX.Element[]; toSorted: (compareFn?: ((a: JSX.Element, b: JSX.Element) => number) | undefined) => JSX.Element[]; toSpliced: { (start: number, deleteCount: number, ...items: JSX.Element[]): JSX.Element[]; (start: number, deleteCount?: number): JSX.Element[]; }; with: (index: number, value: JSX.Element) => JSX.Element[]; __@iterator@2613: () => ArrayIterator<JSX.Element>; __@unscopables@2615: { [x: number]: boolean | undefined; length?: boolean | undefined; toString?: boolean | undefined; toLocaleString?: boolean | undefined; pop?: boolean | undefined; push?: boolean | undefined; concat?: boolean | undefined; join?: boolean | undefined; reverse?: boolean | undefined; shift?: boolean | undefined; slice?: boolean | undefined; sort?: boolean | undefined; splice?: boolean | undefined; unshift?: boolean | undefined; indexOf?: boolean | undefined; lastIndexOf?: boolean | undefined; every?: boolean | undefined; some?: boolean | undefined; forEach?: boolean | undefined; map?: boolean | undefined; filter?: boolean | undefined; reduce?: boolean | undefined; reduceRight?: boolean | undefined; find?: boolean | undefined; findIndex?: boolean | undefined; fill?: boolean | undefined; copyWithin?: boolean | undefined; entries?: boolean | undefined; keys?: boolean | undefined; values?: boolean | undefined; includes?: boolean | undefined; flatMap?: boolean | undefined; flat?: boolean | undefined; at?: boolean | undefined; findLast?: boolean | undefined; findLastIndex?: boolean | undefined; toReversed?: boolean | undefined; toSorted?: boolean | undefined; toSpliced?: boolean | undefined; with?: boolean | undefined; [Symbol.iterator]?: boolean | undefined; readonly [Symbol.unscopables]?: boolean | undefined; } } | string & {}",
"displayType": "undefined | null | number | false | true | Node | { length: number; toString: () => string; toLocaleString: { (): string; (locales: string | string[], options?: Intl.NumberFormatOptions & Intl.DateTimeFormatOptions): string; }; pop: () => JSX.Element; push: (...items: JSX.Element[]) => number; concat: { (...items: ConcatArray<JSX.Element>[]): JSX.Element[]; (...items: (JSX.Element | ConcatArray<JSX.Element>)[]): JSX.Element[]; }; join: (separator?: string) => string; reverse: () => JSX.Element[]; shift: () => JSX.Element; slice: (start?: number, end?: number) => JSX.Element[]; sort: (compareFn?: ((a: JSX.Element, b: JSX.Element) => number) | undefined) => JSX.ArrayElement; splice: { (start: number, deleteCount?: number): JSX.Element[]; (start: number, deleteCount: number, ...items: JSX.Element[]): JSX.Element[]; }; unshift: (...items: JSX.Element[]) => number; indexOf: (searchElement: JSX.Element, fromIndex?: number) => number; lastIndexOf: (searchElement: JSX.Element, fromIndex?: number) => number; every: { <S extends JSX.Element>(predicate: (value: JSX.Element, index: number, array: JSX.Element[]) => value is S, thisArg?: any): this is S[]; (predicate: (value: JSX.Element, index: number, array: JSX.Element[]) => unknown, thisArg?: any): boolean; }; some: (predicate: (value: JSX.Element, index: number, array: JSX.Element[]) => unknown, thisArg?: any) => boolean; forEach: (callbackfn: (value: JSX.Element, index: number, array: JSX.Element[]) => void, thisArg?: any) => void; map: <U>(callbackfn: (value: JSX.Element, index: number, array: JSX.Element[]) => U, thisArg?: any) => U[]; filter: { <S extends JSX.Element>(predicate: (value: JSX.Element, index: number, array: JSX.Element[]) => value is S, thisArg?: any): S[]; (predicate: (value: JSX.Element, index: number, array: JSX.Element[]) => unknown, thisArg?: any): JSX.Element[]; }; reduce: { (callbackfn: (previousValue: JSX.Element, currentValue: JSX.Element, currentIndex: number, array: JSX.Element[]) => JSX.Element): JSX.Element; (callbackfn: (previousValue: JSX.Element, currentValue: JSX.Element, currentIndex: number, array: JSX.Element[]) => JSX.Element, initialValue: JSX.Element): JSX.Element; <U>(callbackfn: (previousValue: U, currentValue: JSX.Element, currentIndex: number, array: JSX.Element[]) => U, initialValue: U): U; }; reduceRight: { (callbackfn: (previousValue: JSX.Element, currentValue: JSX.Element, currentIndex: number, array: JSX.Element[]) => JSX.Element): JSX.Element; (callbackfn: (previousValue: JSX.Element, currentValue: JSX.Element, currentIndex: number, array: JSX.Element[]) => JSX.Element, initialValue: JSX.Element): JSX.Element; <U>(callbackfn: (previousValue: U, currentValue: JSX.Element, currentIndex: number, array: JSX.Element[]) => U, initialValue: U): U; }; find: { <S extends JSX.Element>(predicate: (value: JSX.Element, index: number, obj: JSX.Element[]) => value is S, thisArg?: any): S | undefined; (predicate: (value: JSX.Element, index: number, obj: JSX.Element[]) => unknown, thisArg?: any): JSX.Element; }; findIndex: (predicate: (value: JSX.Element, index: number, obj: JSX.Element[]) => unknown, thisArg?: any) => number; fill: (value: JSX.Element, start?: number, end?: number) => JSX.ArrayElement; copyWithin: (target: number, start: number, end?: number) => JSX.ArrayElement; entries: () => ArrayIterator<[number, JSX.Element]>; keys: () => ArrayIterator<number>; values: () => ArrayIterator<JSX.Element>; includes: (searchElement: JSX.Element, fromIndex?: number) => bool