@urbicon-ui/blocks 6.35.0 → 6.36.0

package/dist/components/Chat/ChatMessage/chat-message.variants.d.ts

@@ -0,0 +1,138 @@
+import { type SlotNames, type VariantProps } from '../../../utils/variants.js';
+export declare const chatMessageVariants: ((props?: {
+    layout?: "bubble" | "plain" | undefined;
+    role?: "user" | "system" | "assistant" | undefined;
+    density?: "comfortable" | "compact" | undefined;
+} | undefined) => {
+    root: (props?: ({
+        layout?: "bubble" | "plain" | undefined;
+        role?: "user" | "system" | "assistant" | undefined;
+        density?: "comfortable" | "compact" | undefined;
+    } & {
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
+    }) | undefined) => string;
+    container: (props?: ({
+        layout?: "bubble" | "plain" | undefined;
+        role?: "user" | "system" | "assistant" | undefined;
+        density?: "comfortable" | "compact" | undefined;
+    } & {
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
+    }) | undefined) => string;
+    header: (props?: ({
+        layout?: "bubble" | "plain" | undefined;
+        role?: "user" | "system" | "assistant" | undefined;
+        density?: "comfortable" | "compact" | undefined;
+    } & {
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
+    }) | undefined) => string;
+    roleName: (props?: ({
+        layout?: "bubble" | "plain" | undefined;
+        role?: "user" | "system" | "assistant" | undefined;
+        density?: "comfortable" | "compact" | undefined;
+    } & {
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
+    }) | undefined) => string;
+    avatar: (props?: ({
+        layout?: "bubble" | "plain" | undefined;
+        role?: "user" | "system" | "assistant" | undefined;
+        density?: "comfortable" | "compact" | undefined;
+    } & {
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
+    }) | undefined) => string;
+    bubble: (props?: ({
+        layout?: "bubble" | "plain" | undefined;
+        role?: "user" | "system" | "assistant" | undefined;
+        density?: "comfortable" | "compact" | undefined;
+    } & {
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
+    }) | undefined) => string;
+    partsFlow: (props?: ({
+        layout?: "bubble" | "plain" | undefined;
+        role?: "user" | "system" | "assistant" | undefined;
+        density?: "comfortable" | "compact" | undefined;
+    } & {
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
+    }) | undefined) => string;
+    attachment: (props?: ({
+        layout?: "bubble" | "plain" | undefined;
+        role?: "user" | "system" | "assistant" | undefined;
+        density?: "comfortable" | "compact" | undefined;
+    } & {
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
+    }) | undefined) => string;
+    attachmentIcon: (props?: ({
+        layout?: "bubble" | "plain" | undefined;
+        role?: "user" | "system" | "assistant" | undefined;
+        density?: "comfortable" | "compact" | undefined;
+    } & {
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
+    }) | undefined) => string;
+    attachmentName: (props?: ({
+        layout?: "bubble" | "plain" | undefined;
+        role?: "user" | "system" | "assistant" | undefined;
+        density?: "comfortable" | "compact" | undefined;
+    } & {
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
+    }) | undefined) => string;
+    attachmentSize: (props?: ({
+        layout?: "bubble" | "plain" | undefined;
+        role?: "user" | "system" | "assistant" | undefined;
+        density?: "comfortable" | "compact" | undefined;
+    } & {
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
+    }) | undefined) => string;
+    sourcesFooter: (props?: ({
+        layout?: "bubble" | "plain" | undefined;
+        role?: "user" | "system" | "assistant" | undefined;
+        density?: "comfortable" | "compact" | undefined;
+    } & {
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
+    }) | undefined) => string;
+    placeholder: (props?: ({
+        layout?: "bubble" | "plain" | undefined;
+        role?: "user" | "system" | "assistant" | undefined;
+        density?: "comfortable" | "compact" | undefined;
+    } & {
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
+    }) | undefined) => string;
+    statusAlert: (props?: ({
+        layout?: "bubble" | "plain" | undefined;
+        role?: "user" | "system" | "assistant" | undefined;
+        density?: "comfortable" | "compact" | undefined;
+    } & {
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
+    }) | undefined) => string;
+    footer: (props?: ({
+        layout?: "bubble" | "plain" | undefined;
+        role?: "user" | "system" | "assistant" | undefined;
+        density?: "comfortable" | "compact" | undefined;
+    } & {
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
+    }) | undefined) => string;
+    actions: (props?: ({
+        layout?: "bubble" | "plain" | undefined;
+        role?: "user" | "system" | "assistant" | undefined;
+        density?: "comfortable" | "compact" | undefined;
+    } & {
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
+    }) | undefined) => string;
+    actionButton: (props?: ({
+        layout?: "bubble" | "plain" | undefined;
+        role?: "user" | "system" | "assistant" | undefined;
+        density?: "comfortable" | "compact" | undefined;
+    } & {
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
+    }) | undefined) => string;
+    metadata: (props?: ({
+        layout?: "bubble" | "plain" | undefined;
+        role?: "user" | "system" | "assistant" | undefined;
+        density?: "comfortable" | "compact" | undefined;
+    } & {
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
+    }) | undefined) => string;
+}) & {
+    readonly config: import("../../../utils/variants.js").TVConfig;
+};
+export type ChatMessageVariants = VariantProps<typeof chatMessageVariants>;
+/** Slot names derived from the tv() config — single source of truth for slotClasses. */
+export type ChatMessageSlots = SlotNames<typeof chatMessageVariants>;

package/dist/components/Chat/ChatMessage/chat-message.variants.js

@@ -0,0 +1,118 @@
+import { tv } from '../../../utils/variants.js';
+export const chatMessageVariants = tv({
+    slots: {
+        // Group scope drives the hover/focus reveal of the action bar. `min-w-0`
+        // so long code/markdown scrolls inside the message, never the page.
+        root: ['group/message flex w-full min-w-0 flex-col'],
+        // Bubble layout: avatar beside the bubble. Plain layout ignores this and
+        // uses `header` + `content` instead.
+        container: ['flex min-w-0 items-start gap-3'],
+        // Plain-layout header row: avatar + role name above the full-width content.
+        header: ['flex min-w-0 items-center gap-2'],
+        roleName: ['text-sm font-medium text-text-secondary select-none'],
+        avatar: ['shrink-0'],
+        // The content bubble (bubble layout) / the full-width column (plain layout).
+        bubble: ['min-w-0 max-w-full'],
+        // Vertical stack of the rendered parts.
+        partsFlow: ['flex min-w-0 flex-col'],
+        // reasoning and tool-call parts render through ReasoningDisclosure /
+        // ToolCallCard (own slotClasses there); override via partRenderers.
+        // attachments
+        attachment: [
+            'inline-flex max-w-full items-center gap-2 rounded-modify border border-border-subtle bg-surface-base px-2.5 py-1.5 text-sm no-underline',
+            'transition-[color,background-color] duration-[var(--blocks-duration-fast)] ease-out'
+        ],
+        attachmentIcon: ['shrink-0 text-text-tertiary'],
+        attachmentName: ['min-w-0 truncate text-text-primary'],
+        attachmentSize: ['shrink-0 text-xs text-text-tertiary'],
+        // sources footer
+        sourcesFooter: ['flex flex-wrap items-center gap-1.5 pt-1'],
+        // streaming placeholder (zero parts)
+        placeholder: ['py-1'],
+        // status alert
+        statusAlert: ['mt-1'],
+        // footer row holding actions + metadata
+        footer: ['flex items-center gap-2'],
+        actions: [
+            'flex items-center gap-1 opacity-0',
+            'transition-opacity duration-[var(--blocks-duration-fast)] ease-out',
+            'group-hover/message:opacity-100 group-focus-within/message:opacity-100'
+        ],
+        actionButton: [
+            'inline-flex items-center justify-center rounded-modify p-1.5',
+            'text-text-tertiary cursor-pointer',
+            'transition-[color,background-color] duration-[var(--blocks-duration-fast)] ease-out',
+            'hover:bg-surface-hover hover:text-text-primary',
+            'focus-visible:outline-none focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1'
+        ],
+        metadata: ['text-xs text-text-tertiary']
+    },
+    variants: {
+        layout: {
+            bubble: {},
+            // Document-like: full-width content under an avatar + role header row.
+            plain: {
+                bubble: 'w-full',
+                partsFlow: 'gap-3'
+            }
+        },
+        role: {
+            user: {},
+            assistant: {},
+            system: {}
+        },
+        density: {
+            comfortable: {
+                root: 'gap-1.5',
+                partsFlow: 'gap-2'
+            },
+            compact: {
+                root: 'gap-1',
+                partsFlow: 'gap-1.5'
+            }
+        }
+    },
+    compoundVariants: [
+        // ── bubble layout: role tint + alignment ────────────────────────────────
+        {
+            layout: 'bubble',
+            role: 'user',
+            class: {
+                // Reverse so the (avatar-less) bubble packs to the right edge.
+                container: 'flex-row-reverse',
+                bubble: 'max-w-[85%] rounded-contain bg-primary-subtle'
+            }
+        },
+        {
+            layout: 'bubble',
+            role: 'assistant',
+            class: {
+                bubble: 'max-w-[85%] rounded-contain bg-surface-elevated'
+            }
+        },
+        {
+            layout: 'bubble',
+            role: 'system',
+            class: {
+                container: 'justify-center',
+                bubble: 'max-w-[90%] rounded-contain border border-border-subtle bg-surface-base text-sm text-text-secondary'
+            }
+        },
+        // ── bubble layout: density padding ──────────────────────────────────────
+        {
+            layout: 'bubble',
+            density: 'comfortable',
+            class: { bubble: 'px-3.5 py-2.5' }
+        },
+        {
+            layout: 'bubble',
+            density: 'compact',
+            class: { bubble: 'px-3 py-2' }
+        }
+    ],
+    defaultVariants: {
+        layout: 'bubble',
+        role: 'assistant',
+        density: 'comfortable'
+    }
+});

package/dist/components/Chat/ChatMessage/index.d.ts

@@ -0,0 +1,102 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ChatMessageData, ChatMessagePart, ChatRole } from '../chat.types.js';
+import type { MarkdownUrlPolicy } from '../markdown/types.js';
+import type { ChatMessageSlots, ChatMessageVariants } from './chat-message.variants.js';
+/**
+ * Per-part snippet overrides keyed by part `type`. When a renderer exists for a
+ * part's type it replaces the built-in rendering for that part (one level up
+ * from StreamingMarkdown's node `renderers`) — this is how P3 swaps in
+ * ToolCallCard / ReasoningDisclosure and P4 adds A2UIView without touching this
+ * component. `source` is intentionally not overridable here: sources are
+ * collected into the citation footer, not rendered inline.
+ */
+export type ChatPartRenderers = {
+    [K in Exclude<ChatMessagePart['type'], 'source'>]?: Snippet<[
+        Extract<ChatMessagePart, {
+            type: K;
+        }>
+    ]>;
+};
+/**
+ * @description Renders one `ChatMessageData` — its ordered parts (markdown text via
+ * StreamingMarkdown, reasoning, tool-call status lines, policy-checked attachment
+ * chips) plus a citation footer, streaming placeholder, error/aborted Alert, a
+ * hover-revealed copy/regenerate action bar and a timestamp. `layout="bubble"`
+ * (default) tints and aligns per role; `layout="plain"` is a document-like
+ * full-width Claude-style column. Untrusted URLs never render as inline media —
+ * only as `urlPolicy`-checked download links. Compose many of these under
+ * ChatMessageList; the consumer owns the `ChatMessageData[]`.
+ *
+ * @tag ai
+ * @tag display
+ * @related ChatMessageList
+ * @related StreamingMarkdown
+ * @stability experimental
+ *
+ * @example
+ * ```svelte
+ * <ChatMessage message={msg} onRegenerate={() => regenerate(msg.id)} />
+ * ```
+ */
+export interface ChatMessageProps extends Omit<ChatMessageVariants, 'role'>, Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'class'> {
+    /** The message to render. The component never mutates it. */
+    message: ChatMessageData;
+    /**
+     * URL policy applied to attachment links and forwarded to StreamingMarkdown /
+     * CitationChip. Strict by default (untrusted LLM/server output). Keep it
+     * referentially stable to avoid re-parsing streamed markdown.
+     */
+    urlPolicy?: MarkdownUrlPolicy;
+    /** Provide to render a "Regenerate" action. Called on click. */
+    onRegenerate?: () => void;
+    /** Provide to render a "Retry" button in the error/aborted Alert. Called on click. */
+    onRetry?: () => void;
+    /** Avatar override. Receives the message role; default is the Avatar primitive with a role icon. */
+    avatar?: Snippet<[{
+        role: ChatRole;
+    }]>;
+    /** Action-bar override. Receives the message; default is copy (+ regenerate when `onRegenerate` is set). */
+    actions?: Snippet<[{
+        message: ChatMessageData;
+    }]>;
+    /** Metadata override. Receives the message; default is `createdAt` as a `<time>` element. */
+    metadata?: Snippet<[{
+        message: ChatMessageData;
+    }]>;
+    /** Per-part-type render overrides (see `ChatPartRenderers`). */
+    partRenderers?: ChatPartRenderers;
+    /** Display names per role, shown in the `plain`-layout header. */
+    roleLabels?: Partial<Record<ChatRole, string>>;
+    /** Accessible label / tooltip for the copy action. @default 'Copy message' */
+    copyLabel?: string;
+    /** Accessible label shown briefly after a successful copy. @default 'Copied' */
+    copiedLabel?: string;
+    /** Accessible label / tooltip for the regenerate action. @default 'Regenerate' */
+    regenerateLabel?: string;
+    /** Label for the retry button in the error/aborted Alert. @default 'Retry' */
+    retryLabel?: string;
+    /** Alert title for `status === 'error'`. @default 'Something went wrong' */
+    errorLabel?: string;
+    /** Alert title for `status === 'aborted'`. @default 'Generation stopped' */
+    abortedLabel?: string;
+    /** Extra classes merged onto the root element. */
+    class?: string;
+    /** Remove all default tv classes. */
+    unstyled?: boolean;
+    /**
+     * Per-slot class overrides. Slots: root | container | header | roleName | avatar |
+     * bubble | partsFlow | attachment | attachmentIcon | attachmentName | attachmentSize |
+     * sourcesFooter | placeholder | statusAlert | footer | actions | actionButton |
+     * metadata. Reasoning and tool-call parts render through ReasoningDisclosure /
+     * ToolCallCard, which take their own `slotClasses`.
+     */
+    slotClasses?: Partial<Record<ChatMessageSlots, string>>;
+    /**
+     * Apply a named preset registered via `<BlocksProvider presets={{ ChatMessage: {...} }}>`.
+     * Prefer this over `class` overrides for reusable custom looks.
+     */
+    preset?: string;
+}
+export { default as ChatMessage } from './ChatMessage.svelte';
+export { type ChatMessageSlots, type ChatMessageVariants, chatMessageVariants } from './chat-message.variants.js';

package/dist/components/Chat/ChatMessage/index.js

@@ -0,0 +1,2 @@
+export { default as ChatMessage } from './ChatMessage.svelte';
+export { chatMessageVariants } from './chat-message.variants.js';