@cianfrani/ai-ui 0.1.0-alpha.0

package/dist/types/index.d.ts

@@ -0,0 +1,7 @@
+import "./semantic";
+import "./visual";
+import "./native-styles";
+export * from "./semantic/index";
+export * from "./visual/index";
+export * from "./lib/has-slot-controller";
+export * from "./lib/tool-tone";

package/dist/types/lib/has-slot-controller.d.ts

@@ -0,0 +1,21 @@
+import type { ReactiveController, ReactiveControllerHost } from "lit";
+/**
+ * Reactive controller that tracks whether named/default slots have content.
+ *
+ * Usage:
+ *   private readonly hasSlot = new HasSlotController(this, "[default]");
+ *   // then in render():
+ *   this.hasSlot.test("[default]") // → boolean
+ */
+export declare class HasSlotController implements ReactiveController {
+    host: ReactiveControllerHost & Element;
+    slotNames: string[];
+    constructor(host: ReactiveControllerHost & Element, ...slotNames: string[]);
+    private hasDefaultSlot;
+    private hasNamedSlot;
+    /** Test whether a slot has content. Use `"[default]"` for the default slot. */
+    test(slotName: string): boolean;
+    hostConnected(): void;
+    hostDisconnected(): void;
+    private handleSlotChange;
+}

package/dist/types/lib/tool-tone.d.ts

@@ -0,0 +1,2 @@
+export type ToolTone = "read" | "write" | "edit" | "bash" | "generic";
+export declare function getToolTone(name: string): ToolTone;

package/dist/types/native-styles.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Baseline styles for native elements within ai-* shadow roots.
+ * Import and include in any ai component that renders native elements.
+ */
+export declare const nativeStyles: import("lit").CSSResult;

package/dist/types/semantic/ai-conversation.d.ts

@@ -0,0 +1,28 @@
+import { LitElement } from "lit";
+/**
+ * Root ordered transcript container for message-first AI conversations.
+ *
+ * @slot - Ordered records: ai-message, ai-tool-call, ai-tool-result, ai-thinking, ai-event, or native elements.
+ *
+ * @cssprop --ai-conversation-background - Conversation background. Default: transparent
+ * @cssprop --ai-conversation-color - Default text color. Default: var(--ai-color-text)
+ * @cssprop --ai-conversation-gap - Vertical gap between direct child records. Default: var(--ai-space-lg)
+ * @cssprop --ai-conversation-compact-gap - Gap when density="compact". Default: var(--ai-space-sm)
+ * @cssprop --ai-conversation-live-border-color - Optional visual marker for live conversations. Default: transparent
+ */
+export declare class AiConversation extends LitElement {
+    /** Spacing density for transcript rows. Invalid values fall back to comfortable. */
+    density: "comfortable" | "compact";
+    /** Whether this is a live/streaming region. Adds aria-live="polite" by default. */
+    live: boolean;
+    /** Accessible label for the conversation region. */
+    label: string;
+    static styles: import("lit").CSSResult;
+    private get normalizedDensity();
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ai-conversation": AiConversation;
+    }
+}

package/dist/types/semantic/ai-event.d.ts

@@ -0,0 +1,91 @@
+import { LitElement } from "lit";
+import type { TemplateResult } from "lit";
+/**
+ * Payload of the `ai-show` / `ai-hide` events.
+ *
+ * These events share a name but are emitted by three different components with
+ * distinct payloads. The `source` field discriminates which component fired, so
+ * listeners can narrow safely:
+ *
+ * ```ts
+ * el.addEventListener("ai-show", (e) => {
+ *   if (e.detail.source === "tool-call") {
+ *     console.log(e.detail.id, e.detail.name); // typed
+ *   }
+ * });
+ * ```
+ */
+export type AiShowHideDetail = {
+    source: "event";
+    kind: string;
+} | {
+    source: "thinking";
+    redacted: boolean;
+} | {
+    source: "tool-call";
+    open: boolean;
+    id: string;
+    name: string;
+};
+/**
+ * Non-message, non-operation transcript event.
+ *
+ * Represents status changes, model switches, checkpoints, notes,
+ * system messages, errors, or custom events within an AI transcript.
+ *
+ * @slot summary - Custom summary/label override
+ * @slot meta - Timestamps, source labels
+ * @slot - Default: event content
+ *
+ * @fires ai-show - Dispatched when opened. Bubbles, composed.
+ * @fires ai-hide - Dispatched when closed. Bubbles, composed.
+ *
+ * @cssprop --ai-event-background-color - Event background. Default: transparent
+ * @cssprop --ai-event-text-color - Event text color. Default: var(--ai-color-text-muted)
+ * @cssprop --ai-event-border-color - Event border color. Default: var(--ai-color-border)
+ * @cssprop --ai-event-border-width - Event border width. Default: 0
+ * @cssprop --ai-event-border-radius - Event border radius. Default: 0
+ * @cssprop --ai-event-content-gap - Content gap. Default: var(--ai-space-sm)
+ * @cssprop --ai-event-content-indent - Expanded content indentation. Default: clamp(20px, 7vw, 58px)
+ * @cssprop --ai-event-rule-color - Divider rule color. Default: subtle muted text color
+ * @cssprop --ai-event-open-rule-color - Divider rule color when expanded. Default: stronger muted text color
+ * @cssprop --ai-event-meta-color - Meta slot text color. Default: var(--ai-color-text-muted)
+ * @cssprop --ai-event-info-color - Info severity color. Default: var(--ai-color-info)
+ * @cssprop --ai-event-warning-color - Warning severity color. Default: var(--ai-color-warning)
+ * @cssprop --ai-event-error-color - Error severity color. Default: var(--ai-color-error)
+ */
+export declare class AiEvent extends LitElement {
+    /** Event kind. */
+    kind: "status" | "model-change" | "checkpoint" | "note" | "system" | "error" | "custom";
+    /** Severity level — controls accent color. */
+    severity: "info" | "warning" | "error";
+    /** Origin source identifier. */
+    source: string;
+    /** ID of the element this event pertains to (maps to `for` attribute). */
+    htmlFor: string;
+    /** Whether the event details are expanded. */
+    open: boolean;
+    private _details;
+    /** Expand the event details. */
+    show(): void;
+    /** Collapse the event details. */
+    hide(): void;
+    /** Toggle open state. Optionally force open/closed. */
+    toggle(force?: boolean): void;
+    private _prevOpen;
+    updated(): void;
+    private _onToggle;
+    private get _severityColor();
+    private get _kindLabel();
+    render(): TemplateResult;
+    static styles: import("lit").CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ai-event": AiEvent;
+    }
+    interface HTMLElementEventMap {
+        "ai-show": CustomEvent<AiShowHideDetail>;
+        "ai-hide": CustomEvent<AiShowHideDetail>;
+    }
+}

package/dist/types/semantic/ai-message.d.ts

@@ -0,0 +1,45 @@
+import { LitElement } from "lit";
+export type AiMessageRole = "user" | "assistant" | "system" | "tool";
+export type AiMessageStatus = "pending" | "running" | "success" | "error" | "cancelled" | "unknown";
+/**
+ * Message-first transcript record with role-specific pi-ui presentation.
+ *
+ * @slot - Content blocks, usually ai-markdown, ai-thinking, ai-tool-call, ai-tool-result, or ai-event.
+ * @slot meta - Timestamp, model, or other metadata. Prefer native <time>.
+ * @slot avatar - Optional actor avatar.
+ * @slot actor - Optional actor label.
+ *
+ * @cssprop --ai-message-background - Message body background. Default: transparent
+ * @cssprop --ai-message-color - Message text color. Default: inherit
+ * @cssprop --ai-message-border-color - Optional message border color. Default: transparent
+ * @cssprop --ai-message-border-width - Optional border width. Default: 0
+ * @cssprop --ai-message-radius - Optional message radius. Default: 0
+ * @cssprop --ai-message-gap - Gap between slotted content blocks. Default: var(--spacing-xs)
+ * @cssprop --ai-message-user-background - User bubble background. Default: var(--accent)
+ * @cssprop --ai-message-user-color - User bubble color. Default: var(--text-on-accent)
+ * @cssprop --ai-message-user-max-width - User bubble max width. Default: min(90%, 640px)
+ * @cssprop --ai-message-assistant-rail-color - Assistant rail color.
+ * @cssprop --ai-message-assistant-label-color - Assistant label color. Default: var(--text-muted)
+ * @cssprop --ai-message-meta-color - Meta text color. Default: var(--text-muted)
+ */
+export declare class AiMessage extends LitElement {
+    /** Message author/source role. Unknown values render as system-style rows. */
+    role: "user" | "assistant" | "system" | "tool";
+    /** Optional associated record id; maps to native `for` attribute. */
+    htmlFor: string;
+    /** Message lifecycle status. */
+    status: "pending" | "running" | "success" | "error" | "cancelled" | "unknown";
+    /** ISO-ish timestamp for metadata/association; visual formatting is left to slotted meta. */
+    timestamp: string;
+    /** Display label for role chrome. */
+    label: string;
+    static styles: import("lit").CSSResult;
+    private get normalizedRole();
+    private get actorLabel();
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ai-message": AiMessage;
+    }
+}

package/dist/types/semantic/ai-thinking.d.ts

@@ -0,0 +1,41 @@
+import { LitElement } from "lit";
+import "./ai-tool-call";
+/**
+ * Specialized assistant content block for model reasoning.
+ *
+ * @slot - Thinking content if content property is not set.
+ * @slot meta - Optional metadata.
+ *
+ * @fires ai-show - Emitted when disclosure opens. Bubbles, composed.
+ * @fires ai-hide - Emitted when disclosure closes. Bubbles, composed.
+ *
+ * @cssprop --ai-thinking-color - Thinking content color.
+ * @cssprop --ai-thinking-muted-color - Muted/placeholder color.
+ * @cssprop --ai-thinking-max-height - Max scroll height. Default: 140px
+ * @cssprop --ai-thinking-summary-color - Summary color.
+ */
+export declare class AiThinking extends LitElement {
+    /** Thinking text to render. Prefer property binding for streaming content. */
+    content: string;
+    /** Origin of the thinking block. */
+    source: "model" | "assistant" | "unknown";
+    /** Thinking exists but is not available. */
+    redacted: boolean;
+    /** Whether the disclosure is expanded. */
+    open: boolean;
+    /** Optional summary headline. Defaults to a first-sentence summary of content. */
+    headline: string;
+    static styles: import("lit").CSSResult;
+    show(): void;
+    hide(): void;
+    toggle(force?: boolean): void;
+    private handleShow;
+    private handleHide;
+    protected updated(changed: Map<string, unknown>): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ai-thinking": AiThinking;
+    }
+}

package/dist/types/semantic/ai-tool-call.d.ts

@@ -0,0 +1,59 @@
+import { LitElement, nothing } from "lit";
+export type ToolCallKind = "tool" | "shell" | "file" | "search" | "delegate" | "network" | "custom" | "unknown";
+export type ToolCallEffect = "read" | "write" | "mixed" | "unknown";
+export type ToolCallStatus = "pending" | "running" | "success" | "error" | "cancelled" | "unknown";
+/**
+ * Specialized assistant content block for a tool call.
+ *
+ * @slot summary - Custom summary row/header
+ * @slot input - Tool input/arguments; native <pre><code> is recommended.
+ * @slot - Result/details content, commonly nested ai-tool-result.
+ *
+ * @fires ai-show - Emitted when disclosure opens. Bubbles, composed.
+ * @fires ai-hide - Emitted when disclosure closes. Bubbles, composed.
+ *
+ * @cssprop --ai-tool-call-background - Tool call background.
+ * @cssprop --ai-tool-call-color - Tool call text color.
+ * @cssprop --ai-tool-call-border-color - Tool call border color.
+ * @cssprop --ai-tool-call-summary-background - Summary row background.
+ * @cssprop --ai-tool-call-input-background - Input slot background.
+ * @cssprop --ai-tool-call-status-color - Generic status color.
+ * @cssprop --ai-tool-call-success-color - Success status color.
+ * @cssprop --ai-tool-call-error-color - Error status color.
+ * @cssprop --ai-tool-call-running-color - Running status color.
+ */
+export declare class AiToolCall extends LitElement {
+    static styles: import("lit").CSSResult;
+    id: string;
+    name: string;
+    label: string;
+    kind: "tool" | "shell" | "file" | "search" | "delegate" | "network" | "custom" | "unknown";
+    effect: "read" | "write" | "mixed" | "unknown";
+    headline: string;
+    subline: string;
+    status: "pending" | "running" | "success" | "error" | "cancelled" | "unknown";
+    open: boolean;
+    private readonly hasSlot;
+    private get tone();
+    private get badgeText();
+    private get headlineText();
+    private get hasBodyContent();
+    private get hasInputContent();
+    private get hasSummaryContent();
+    private get isExpandable();
+    private get hasVisibleHeaderContent();
+    show(): void;
+    hide(): void;
+    toggle(force?: boolean): void;
+    private emitToggle;
+    private handleToggle;
+    protected updated(changed: Map<string, unknown>): void;
+    private renderIcon;
+    private renderHeaderContent;
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ai-tool-call": AiToolCall;
+    }
+}

package/dist/types/semantic/ai-tool-result.d.ts

@@ -0,0 +1,44 @@
+import { LitElement } from "lit";
+export type ToolResultStatus = "success" | "error" | "cancelled" | "unknown";
+export type ToolResultChannel = "result" | "stdout" | "stderr" | "log" | "unknown";
+export declare function normalizeToolOutput(content: string): string;
+/**
+ * Specialized runtime/tool output content block.
+ *
+ * @slot - Output content. If absent and content is set, renders normalized output in <pre>.
+ * @slot meta - Optional source/channel/truncation metadata.
+ *
+ * @cssprop --ai-tool-result-color - Output text color.
+ * @cssprop --ai-tool-result-background - Output background.
+ * @cssprop --ai-tool-result-meta-color - Meta slot text color.
+ * @cssprop --ai-tool-result-error-color - Error text color.
+ * @cssprop --ai-tool-result-code-color - Code/output text color.
+ * @cssprop --ai-tool-result-code-font - Code/output font family.
+ * @cssprop --ai-tool-result-max-height - Maximum output height. Default: 240px
+ */
+export declare class AiToolResult extends LitElement {
+    /** Associated ai-tool-call[id]. Missing/mismatched ids are allowed. */
+    htmlFor: string;
+    /** Tool/result source name. */
+    name: string;
+    /** Result status. */
+    status: "success" | "error" | "cancelled" | "unknown";
+    /** Output channel. */
+    channel: "result" | "stdout" | "stderr" | "log" | "unknown";
+    /** MIME/content type hint. */
+    contentType: string;
+    /** Raw output content. Prefer property binding for large content. */
+    content: string;
+    /** Whether the rendered output was truncated upstream. */
+    truncated: boolean;
+    private readonly hasSlot;
+    static styles: import("lit").CSSResult;
+    private get hasDefaultContent();
+    private get hasMetaContent();
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ai-tool-result": AiToolResult;
+    }
+}

package/dist/types/semantic/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./ai-conversation";
+export * from "./ai-message";
+export * from "./ai-tool-call";
+export * from "./ai-tool-result";
+export * from "./ai-thinking";
+export * from "./ai-event";

package/dist/types/visual/avatar.d.ts

@@ -0,0 +1,34 @@
+import { LitElement } from "lit";
+/**
+ * Actor/agent identity marker.
+ *
+ * @slot - Custom avatar content/icon.
+ *
+ * @cssprop --size - Avatar width/height.
+ * @cssprop --background-color - Fallback background.
+ * @cssprop --text-color - Initials/icon color.
+ * @cssprop --border-color - Border color.
+ * @cssprop --border-radius - Avatar radius.
+ * @cssprop --font-size - Initials font size.
+ * @cssprop --font-weight - Initials font weight. Default: 700
+ */
+export declare class AiAvatar extends LitElement {
+    /** Image source URL. When set, renders an <img>. */
+    src: string;
+    /** Display name. Used for initials fallback and img alt text. */
+    name: string;
+    /** Size preset. */
+    size: "sm" | "md" | "lg";
+    /** Semantic color tone. */
+    tone: "neutral" | "accent" | "user" | "assistant" | "agent";
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+    protected updated(): void;
+    private getInitials;
+    private getToneColors;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ai-avatar": AiAvatar;
+    }
+}

package/dist/types/visual/badge.d.ts

@@ -0,0 +1,32 @@
+import { LitElement } from "lit";
+/**
+ * Compact semantic label/status chip.
+ *
+ * @slot - Badge label.
+ *
+ * @cssprop --background-color - Badge background.
+ * @cssprop --text-color - Badge text color.
+ * @cssprop --border-color - Badge border color.
+ * @cssprop --border-radius - Badge radius.
+ * @cssprop --dot-color - Leading dot color.
+ * @cssprop --font-size - Font size.
+ * @cssprop --font-weight - Font weight. Default: 600
+ * @cssprop --inline-gap - Gap between dot/content.
+ */
+export declare class AiBadge extends LitElement {
+    /** Semantic color tone. */
+    tone: "neutral" | "accent" | "success" | "warning" | "error" | "info";
+    /** Size preset. */
+    size: "sm" | "md";
+    /** Whether to show a leading dot indicator. */
+    dot: boolean;
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+    protected updated(): void;
+    private getToneColors;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ai-badge": AiBadge;
+    }
+}

package/dist/types/visual/divider.d.ts

@@ -0,0 +1,26 @@
+import { LitElement } from "lit";
+/**
+ * Separator/section marker.
+ *
+ * @slot - Optional label/content centered in divider.
+ *
+ * @cssprop --line-color - Divider line color.
+ * @cssprop --line-width - Divider thickness.
+ * @cssprop --text-color - Label text color.
+ * @cssprop --label-background-color - Label background to mask line.
+ * @cssprop --label-gap - Gap between line and label.
+ */
+export declare class AiDivider extends LitElement {
+    /** Axis of the divider line. */
+    orientation: "horizontal" | "vertical";
+    /** Visual prominence of the divider. */
+    tone: "subtle" | "default" | "strong";
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+    protected updated(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ai-divider": AiDivider;
+    }
+}

package/dist/types/visual/icon.d.ts

@@ -0,0 +1,24 @@
+import { LitElement } from "lit";
+/**
+ * Consistent icon sizing/tone wrapper.
+ *
+ * @slot - SVG/icon content.
+ *
+ * @cssprop --size - Icon width/height.
+ * @cssprop --color - Icon color.
+ */
+export declare class AiIcon extends LitElement {
+    /** Size preset. */
+    size: "xs" | "sm" | "md" | "lg";
+    /** Semantic color tone. */
+    tone: "default" | "muted" | "accent" | "success" | "warning" | "error";
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+    protected updated(): void;
+    private getToneColor;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ai-icon": AiIcon;
+    }
+}

package/dist/types/visual/index.d.ts

@@ -0,0 +1,9 @@
+export * from "./stack";
+export * from "./surface";
+export * from "./text";
+export * from "./markdown";
+export * from "./badge";
+export * from "./status";
+export * from "./avatar";
+export * from "./icon";
+export * from "./divider";

package/dist/types/visual/markdown.d.ts

@@ -0,0 +1,52 @@
+import { LitElement } from "lit";
+/**
+ * Markdown content renderer. Parses and renders markdown source.
+ *
+ * @slot - Fallback content if content property is empty.
+ *
+ * @cssprop --ai-markdown-color - Body text color.
+ * @cssprop --ai-markdown-link-color - Link color.
+ * @cssprop --ai-markdown-code-background - Inline/block code background.
+ * @cssprop --ai-markdown-code-color - Code text color.
+ * @cssprop --ai-markdown-border-color - Blockquote/table/pre border.
+ * @cssprop --ai-markdown-heading-color - Heading color.
+ * @cssprop --ai-markdown-gap - Vertical rhythm between markdown blocks.
+ */
+export declare class AiMarkdown extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Markdown content to render. Does NOT reflect (large content). */
+    content: string;
+    /** Visual tone for prose style parity with pi-ui messages. */
+    tone: "assistant" | "user" | "system" | "tool";
+    /** Whether the content is trusted (affects link behavior). */
+    trusted: boolean;
+    private parseInlines;
+    private renderInline;
+    private parseTableRow;
+    private parseTableAligns;
+    private isTableSeparator;
+    private indentLevel;
+    private parseBlocks;
+    private parseCodeBlock;
+    private parseHeadingBlock;
+    private parseBlockquoteBlock;
+    private parseListBlock;
+    private skipBlankLines;
+    private parseNestedChildren;
+    private collectList;
+    private countNestedLines;
+    private parseTableBlock;
+    private parseParagraphBlock;
+    private startsStructuredBlock;
+    private startsTable;
+    private isTableStart;
+    private renderBlocks;
+    private renderBlock;
+    private renderMarkdown;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ai-markdown": AiMarkdown;
+    }
+}

package/dist/types/visual/stack.d.ts

@@ -0,0 +1,32 @@
+import { LitElement } from "lit";
+/**
+ * Flex layout primitive.
+ *
+ * @slot - Stack children.
+ *
+ * @cssprop --gap - Overrides computed gap.
+ * @cssprop --align-items - Overrides align-items.
+ * @cssprop --justify-content - Overrides justify-content.
+ */
+export declare class AiStack extends LitElement {
+    /** Flex direction. */
+    direction: "row" | "column";
+    /** Gap between children. */
+    gap: "none" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+    /** Cross-axis alignment. */
+    align: "start" | "center" | "end" | "stretch" | "baseline";
+    /** Main-axis justification. */
+    justify: "start" | "center" | "end" | "between" | "around" | "evenly";
+    /** Whether children wrap. */
+    wrap: boolean;
+    /** Whether to use inline-flex instead of flex. */
+    inline: boolean;
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+    protected updated(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ai-stack": AiStack;
+    }
+}

package/dist/types/visual/status.d.ts

@@ -0,0 +1,33 @@
+import { LitElement } from "lit";
+/**
+ * Status dot/icon indicator.
+ *
+ * @slot - Optional custom icon/content.
+ *
+ * @cssprop --size - Indicator size.
+ * @cssprop --color - Indicator color.
+ * @cssprop --idle-color - Idle color.
+ * @cssprop --running-color - Running color.
+ * @cssprop --success-color - Success color.
+ * @cssprop --error-color - Error color.
+ * @cssprop --cancelled-color - Cancelled color.
+ * @cssprop --pulse-duration - Running pulse duration. Default: 1.5s
+ */
+export declare class AiStatus extends LitElement {
+    /** Current status state. */
+    state: "idle" | "running" | "success" | "error" | "cancelled" | "unknown";
+    /** Size preset. */
+    size: "xs" | "sm" | "md" | "lg";
+    /** Display variant — dot or icon. */
+    variant: "dot" | "icon";
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+    protected updated(): void;
+    private getStateColor;
+    private getFallbackIconPath;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ai-status": AiStatus;
+    }
+}

package/dist/types/visual/surface.d.ts

@@ -0,0 +1,34 @@
+import { LitElement } from "lit";
+/**
+ * Themed container/surface.
+ *
+ * @slot - Surface content.
+ *
+ * @cssprop --background-color - Surface background.
+ * @cssprop --text-color - Surface text color.
+ * @cssprop --border-color - Border color.
+ * @cssprop --border-width - Border width.
+ * @cssprop --border-radius - Border radius.
+ * @cssprop --shadow - Box shadow.
+ * @cssprop --hover-background-color - Hover background when interactive.
+ * @cssprop --focus-ring - Focus ring for slotted/native focus styling.
+ */
+export declare class AiSurface extends LitElement {
+    /** Visual variant. */
+    variant: "flat" | "outlined" | "raised" | "sunken";
+    /** Semantic color tone. */
+    tone: "neutral" | "accent" | "success" | "warning" | "error" | "info";
+    /** Border radius preset. */
+    radius: "none" | "sm" | "md" | "lg" | "pill";
+    /** Whether the surface is clickable/hoverable. */
+    interactive: boolean;
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+    protected updated(): void;
+    private getToneColors;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ai-surface": AiSurface;
+    }
+}