@kitn.ai/ui/dist/components/composer-dom.d.ts

Framework-agnostic, Shadow-DOM web components for building AI chat interfaces — works in React, Vue, Angular, Svelte, or plain HTML. Authored in SolidJS.

import { EntityRef, ComposerDoc } from '../primitives/composer-model';
export declare const ZWSP = "\u200B";
export declare const ENTITY_ATTR = "data-kai-entity";
export declare const entityStore: WeakMap<HTMLElement, EntityRef>;
export declare function isEntityEl(node: Node | null): node is HTMLElement;
/**
 * A TreeWalker over the editable's text nodes that SKIPS text inside entity
 * pills. Pills are atomic and contribute nothing to the text model — their inner
 * label text must not pollute caret offsets, trigger detection, or highlight
 * ranges. (Without this, the text seen at a caret right after a pill is the
 * pill's label, so `/` reads as glued to the label instead of starting a token.)
 */
export declare function createTextWalker(root: HTMLElement): TreeWalker;
/**
 * The leading sigil shown on a "light" pill, by kind: skills `/`, agents `@`.
 * Skills and agents render as decorated inline text led by their sigil; this is
 * what makes them read like `/my-skill` / `@my-agent` rather than a chip.
 * Returns '' for kinds rendered as a richer CHIP (plugins, and any other/unknown
 * kind) — those carry an icon instead of a sigil. The sigil is visual only: it
 * never enters the text model (the entity is read from `entityStore`, and the
 * text walker skips pill-internal nodes).
 */
export declare function kindSigil(kind: string): string;
/**
 * Default monochrome (currentColor) glyph per entity kind, for the richer CHIP
 * kinds shown in the trigger menu / on plugin pills: plugin = plug. (Skills and
 * agents are light sigil-text pills — see `kindSigil` — so they take no glyph on
 * the pill, though the menu may still show one.) Returns inline SVG markup
 * (trusted — no user input), or '' for kinds without a default. An item's own
 * `icon` always takes precedence over this.
 */
export declare function kindGlyph(kind: string): string;
export declare function createEntityEl(doc: Document, entity: EntityRef, kindIcons?: Record<string, string>): HTMLElement;
export declare function parseDom(root: HTMLElement): ComposerDoc;
export declare function renderDoc(root: HTMLElement, doc: ComposerDoc, ownerDoc?: Document, kindIcons?: Record<string, string>): void;