@urbicon-ui/blocks 6.40.4 → 6.43.2

package/dist/components/Chat/A2UIView/urbicon/a2ui-urbicon.variants.d.ts

@@ -0,0 +1,43 @@
+import { type SlotNames, type VariantProps } from '../../../../utils/variants.js';
+/**
+ * Extra slot styles the Urbicon A2UI dispatcher needs BEYOND the base
+ * `a2uiViewVariants` slots it inherits through the render context (column, row,
+ * list, icon, image, errorChip, pending, …). These are for the raw-HTML bits the
+ * Urbicon catalog renders itself — the `Section` archetype, plain body text, the
+ * field-error line — everything else renders through a real Urbicon component
+ * that carries its own tokens.
+ *
+ * Loaded LOCALLY by `UrbiconA2UINode.svelte` (never by the base `A2UIView` /
+ * `A2UINode`), so `urbicon/` value code stays out of the Basic bundle. Pure
+ * semantic tokens — no `dark:`, no hardcoded colours.
+ */
+export declare const a2uiUrbiconVariants: ((props?: {} | undefined) => {
+    section: (props?: ({} & {
+        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;
+    sectionHeader: (props?: ({} & {
+        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;
+    sectionTitle: (props?: ({} & {
+        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;
+    sectionDescription: (props?: ({} & {
+        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;
+    body: (props?: ({} & {
+        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;
+    fieldError: (props?: ({} & {
+        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;
+    field: (props?: ({} & {
+        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;
+    emptyStateCta: (props?: ({} & {
+        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 A2UIViewUrbiconVariants = VariantProps<typeof a2uiUrbiconVariants>;
+export type A2UIViewUrbiconSlots = SlotNames<typeof a2uiUrbiconVariants>;

package/dist/components/Chat/A2UIView/urbicon/a2ui-urbicon.variants.js

@@ -0,0 +1,33 @@
+import { tv } from '../../../../utils/variants.js';
+/**
+ * Extra slot styles the Urbicon A2UI dispatcher needs BEYOND the base
+ * `a2uiViewVariants` slots it inherits through the render context (column, row,
+ * list, icon, image, errorChip, pending, …). These are for the raw-HTML bits the
+ * Urbicon catalog renders itself — the `Section` archetype, plain body text, the
+ * field-error line — everything else renders through a real Urbicon component
+ * that carries its own tokens.
+ *
+ * Loaded LOCALLY by `UrbiconA2UINode.svelte` (never by the base `A2UIView` /
+ * `A2UINode`), so `urbicon/` value code stays out of the Basic bundle. Pure
+ * semantic tokens — no `dark:`, no hardcoded colours.
+ */
+export const a2uiUrbiconVariants = tv({
+    slots: {
+        /** Section wrapper (title/description block + body). */
+        section: 'flex min-w-0 flex-col gap-3',
+        /** Section header (title + optional description). */
+        sectionHeader: 'flex min-w-0 flex-col gap-1',
+        /** Section title heading. */
+        sectionTitle: 'min-w-0 text-lg font-semibold leading-tight text-text-primary',
+        /** Section description (secondary text under the title). */
+        sectionDescription: 'min-w-0 text-sm text-text-secondary',
+        /** Plain body text (Text variant=body — PLAIN, no Markdown). */
+        body: 'min-w-0 break-words text-sm text-text-primary',
+        /** A form field's error message line (shown under a field when `error` is non-empty). */
+        fieldError: 'mt-1 text-xs text-danger',
+        /** Wrapper around a form field + its error line. */
+        field: 'flex min-w-0 flex-col',
+        /** Wrapper for the EmptyState call-to-action. */
+        emptyStateCta: 'mt-2 flex justify-center'
+    }
+});

package/dist/components/Chat/A2UIView/urbicon/urbicon-axes.gen.d.ts

@@ -0,0 +1,7 @@
+/** One variant axis: its allowed values (sorted) and documented default. */
+export interface UrbiconAxis {
+    readonly values: readonly string[];
+    readonly default?: string;
+}
+/** Urbicon component name → axis name → axis. The Urbicon A2UI registry references these. */
+export declare const URBICON_AXES: Readonly<Record<string, Readonly<Record<string, UrbiconAxis>>>>;

package/dist/components/Chat/A2UIView/urbicon/urbicon-axes.gen.js

@@ -0,0 +1,86 @@
+// DO NOT EDIT — generated by scripts/a2ui-axes-gen.ts (`bun run a2ui:axes`).
+// Source: packages/design-content/content/component-catalog.json (docs-gen artifact).
+//
+// The variant-axis truth of the Urbicon components the A2UI catalog maps. The
+// hand-curated registry couples to this (values ⊆ axis; default ===; every
+// `urbicon` reference exists) so the catalog can never advertise a value the real
+// component does not support. Regenerate after docs:gen with `bun run a2ui:axes`.
+/** Urbicon component name → axis name → axis. The Urbicon A2UI registry references these. */
+export const URBICON_AXES = {
+    Accordion: {
+        size: { values: ["lg", "md", "sm"], default: "md" },
+        variant: { values: ["card", "default", "ghost"], default: "default" },
+    },
+    Alert: {
+        intent: { values: ["danger", "info", "neutral", "primary", "success", "warning"], default: "primary" },
+        size: { values: ["lg", "md", "sm"], default: "md" },
+        variant: { values: ["filled", "inline", "soft"], default: "soft" },
+    },
+    Avatar: {
+        intent: { values: ["danger", "neutral", "primary", "secondary", "success", "warning"], default: "neutral" },
+        size: { values: ["2xl", "lg", "md", "sm", "xl", "xs"], default: "md" },
+        variant: { values: ["circle", "rounded", "square"], default: "circle" },
+    },
+    Badge: {
+        intent: { values: ["danger", "neutral", "primary", "secondary", "success", "warning"], default: "primary" },
+        size: { values: ["lg", "md", "sm", "xs"], default: "md" },
+        variant: { values: ["dot", "filled", "outlined", "soft"], default: "filled" },
+    },
+    Button: {
+        intent: { values: ["danger", "neutral", "primary", "secondary", "success", "warning"], default: "neutral" },
+        size: { values: ["2xs", "lg", "md", "sm", "xl", "xs"], default: "md" },
+        variant: { values: ["filled", "ghost", "outlined", "text"], default: "filled" },
+    },
+    Card: {
+        variant: { values: ["elevated", "floating", "outlined", "quiet"], default: "quiet" },
+    },
+    Checkbox: {
+        intent: { values: ["danger", "neutral", "primary", "secondary", "success", "warning"], default: "primary" },
+        size: { values: ["lg", "md", "sm", "xs"], default: "md" },
+        variant: { values: ["filled", "ghost", "outlined"], default: "outlined" },
+    },
+    Input: {
+        intent: { values: ["danger", "default", "success", "warning"], default: "default" },
+        size: { values: ["lg", "md", "sm", "xl", "xs"], default: "md" },
+        variant: { values: ["filled", "ghost", "outlined", "underline"], default: "outlined" },
+    },
+    Progress: {
+        intent: { values: ["danger", "neutral", "primary", "secondary", "success", "warning"], default: "primary" },
+        size: { values: ["lg", "md", "sm", "xs"], default: "md" },
+    },
+    RadioGroup: {
+        orientation: { values: ["horizontal", "vertical"], default: "vertical" },
+    },
+    Select: {
+        size: { values: ["lg", "md", "sm", "xl", "xs"], default: "md" },
+        variant: { values: ["filled", "ghost", "outlined", "underline"], default: "outlined" },
+    },
+    Separator: {
+        orientation: { values: ["horizontal", "vertical"], default: "horizontal" },
+        size: { values: ["lg", "md", "sm"], default: "md" },
+    },
+    Slider: {
+        intent: { values: ["danger", "neutral", "primary", "secondary", "success", "warning"], default: "primary" },
+        size: { values: ["lg", "md", "sm"], default: "md" },
+        variant: { values: ["default", "rail"], default: "default" },
+    },
+    Stepper: {
+        orientation: { values: ["horizontal", "vertical"], default: "horizontal" },
+        size: { values: ["lg", "md", "sm"], default: "md" },
+        variant: { values: ["default", "minimal", "outlined"], default: "default" },
+    },
+    Textarea: {
+        intent: { values: ["danger", "default", "success", "warning"], default: "default" },
+        size: { values: ["lg", "md", "sm", "xl", "xs"], default: "md" },
+    },
+    TimeInput: {
+        intent: { values: ["danger", "default", "success", "warning"], default: "default" },
+        size: { values: ["lg", "md", "sm"], default: "md" },
+        variant: { values: ["filled", "ghost", "outlined"], default: "outlined" },
+    },
+    Toggle: {
+        intent: { values: ["danger", "neutral", "primary", "secondary", "success", "warning"], default: "primary" },
+        size: { values: ["lg", "md", "sm", "xs"], default: "md" },
+        variant: { values: ["default", "dot"], default: "default" },
+    },
+};

package/dist/components/Chat/ChatMessage/ChatMessage.svelte

@@ -1,5 +1,8 @@
 <script lang="ts">
+  import { useBlocksI18n } from '../../../i18n';
   import { getBlocksConfig, resolveSlotClasses } from '../../../provider';
+  import { createCopyState } from '../../../internal/copy-state.svelte';
+  import CoreIconButton from '../../../internal/core/CoreIconButton.svelte';
   import { Alert, Avatar, Button, Skeleton, Tooltip } from '../../../primitives';
   import { resolveIcon } from '../../../icons';
   import SparklesIconDefault from '../../../icons/SparklesIcon.svelte';
@@ -34,8 +37,9 @@
     layout = 'bubble',
     density = 'comfortable',
     roleLabels,
-    copyLabel = 'Copy message',
-    copiedLabel = 'Copied',
+    copyLabel,
+    copiedLabel,
+    copyFailedLabel,
     regenerateLabel = 'Regenerate',
     retryLabel = 'Retry',
     errorLabel = 'Something went wrong',
@@ -47,9 +51,15 @@
     ...restProps
   }: ChatMessageProps = $props();
 
+  const bt = useBlocksI18n();
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
 
+  // Localised by default instead of hardcoded English in the prop signature.
+  const copyText = $derived(copyLabel ?? bt('accessibility.copy'));
+  const copiedText = $derived(copiedLabel ?? bt('accessibility.copied'));
+  const copyFailedText = $derived(copyFailedLabel ?? bt('accessibility.copyFailed'));
+
   const SparklesIcon = resolveIcon('sparkles', SparklesIconDefault);
   const UserIcon = resolveIcon('user', UserIconDefault);
   const InfoIcon = resolveIcon('info', InfoIconDefault);
@@ -93,7 +103,7 @@
   });
 
   // Concatenated text parts — what the copy action writes to the clipboard.
-  const copyText = $derived(
+  const messageText = $derived(
     message.parts.flatMap((p) => (p.type === 'text' ? [p.text] : [])).join('\n\n')
   );
 
@@ -114,27 +124,22 @@
   );
 
   // ── Copy interaction ─────────────────────────────────────────────────────
-  let copied = $state(false);
-  let resetTimer: ReturnType<typeof setTimeout> | undefined;
+  const copyState = createCopyState();
+
+  // Reports all three outcomes. A failed copy used to be console-only, so the
+  // action bar looked identical whether the clipboard write worked or not.
+  const copyButtonText = $derived(
+    copyState.phase === 'copied'
+      ? copiedText
+      : copyState.phase === 'error'
+        ? copyFailedText
+        : copyText
+  );
 
   async function copyMessage() {
-    try {
-      await navigator.clipboard.writeText(copyText);
-      copied = true;
-      if (resetTimer) clearTimeout(resetTimer);
-      resetTimer = setTimeout(() => {
-        copied = false;
-        resetTimer = undefined;
-      }, 2000);
-    } catch (err) {
-      // Never confirm a copy that failed (e.g. denied clipboard permission).
-      console.error('ChatMessage: failed to copy message', err);
-    }
+    const result = await copyState.copy(messageText);
+    if (!result.ok) console.error('ChatMessage: failed to copy message', result.error);
   }
-
-  $effect(() => () => {
-    if (resetTimer) clearTimeout(resetTimer);
-  });
 </script>
 
 {#snippet defaultAvatar(role: ChatRole)}
@@ -249,65 +254,43 @@
   <div class={cls('actions')}>
     <!-- No copy for text-less messages (tool-call/reasoning-only): copying an
          empty string and confirming "Copied" would be a lie (review finding). -->
-    {#if copyText}
-      <Tooltip label={copyLabel}>
-        <button
-          type="button"
+    {#if messageText}
+      <Tooltip label={copyButtonText}>
+        <CoreIconButton
           class={cls('actionButton')}
           onclick={copyMessage}
-          aria-label={copied ? copiedLabel : copyLabel}
+          aria-label={copyButtonText}
         >
-          {#if copied}
+          {#if copyState.phase === 'copied'}
             <CheckIcon size={16} />
           {:else}
             <CopyIcon size={16} />
           {/if}
-        </button>
+        </CoreIconButton>
       </Tooltip>
     {/if}
     {#if onRegenerate}
       <Tooltip label={regenerateLabel}>
-        <button
-          type="button"
+        <CoreIconButton
           class={cls('actionButton')}
           onclick={onRegenerate}
           aria-label={regenerateLabel}
         >
           <RefreshIcon size={16} />
-        </button>
+        </CoreIconButton>
       </Tooltip>
     {/if}
   </div>
 {/snippet}
 
-<div class={cls('root', className)} data-role={message.role} data-status={status} {...restProps}>
-  {#if layout === 'plain'}
-    <div class={cls('header')}>
-      {#if avatar}
-        {@render avatar({ role: message.role })}
-      {:else}
-        {@render defaultAvatar(message.role)}
-      {/if}
-      <span class={cls('roleName')}>{roleLabel}</span>
-    </div>
-    <div class={cls('bubble')}>
-      {@render body()}
-    </div>
-  {:else}
-    <div class={cls('container')}>
-      {#if message.role !== 'user'}
-        {#if avatar}
-          {@render avatar({ role: message.role })}
-        {:else}
-          {@render defaultAvatar(message.role)}
-        {/if}
-      {/if}
-      <div class={cls('bubble')}>
-        {@render body()}
-      </div>
-    </div>
-  {/if}
-
+<!--
+  `column` wraps the bubble together with everything that hangs under it —
+  citations, the status alert, the footer. They must be siblings of the bubble
+  INSIDE the column, not of `container`: the column is what carries the
+  role-dependent side (`items-end` for a user message), so the timestamp ends up
+  under the bubble's own edge instead of at the left margin.
+-->
+{#snippet belowBubble()}
   {#if sources.length}
     <div class={cls('sourcesFooter')}>
       {#each sources as source, i (source.id)}
@@ -326,20 +309,63 @@
     </div>
   {/if}
 
+  <!--
+    Metadata first in the DOM, actions second — and the footer reverses for a
+    user message (see the variants). That ordering is what puts the timestamp
+    against the bubble's own edge on BOTH sides: the action bar is `opacity-0`
+    until hover, so whichever element comes first at the edge is the only one
+    visible there. Actions-first left the timestamp floating one button-width in
+    from the edge, attached to nothing.
+  -->
   <div class={cls('footer')}>
-    {#if actions}
-      {@render actions({ message })}
-    {:else}
-      {@render defaultActions()}
-    {/if}
     {#if metadata}
       {@render metadata({ message })}
     {:else if createdAtTime}
       <time class={cls('metadata')} datetime={createdAtIso}>{createdAtTime}</time>
     {/if}
+    {#if actions}
+      {@render actions({ message })}
+    {:else}
+      {@render defaultActions()}
+    {/if}
   </div>
+{/snippet}
+
+<div class={cls('root', className)} data-role={message.role} data-status={status} {...restProps}>
+  {#if layout === 'plain'}
+    <div class={cls('header')}>
+      {#if avatar}
+        {@render avatar({ role: message.role })}
+      {:else}
+        {@render defaultAvatar(message.role)}
+      {/if}
+      <span class={cls('roleName')}>{roleLabel}</span>
+    </div>
+    <div class={cls('column')}>
+      <div class={cls('bubble')}>
+        {@render body()}
+      </div>
+      {@render belowBubble()}
+    </div>
+  {:else}
+    <div class={cls('container')}>
+      {#if message.role !== 'user'}
+        {#if avatar}
+          {@render avatar({ role: message.role })}
+        {:else}
+          {@render defaultAvatar(message.role)}
+        {/if}
+      {/if}
+      <div class={cls('column')}>
+        <div class={cls('bubble')}>
+          {@render body()}
+        </div>
+        {@render belowBubble()}
+      </div>
+    </div>
+  {/if}
 
-  <!-- Copy confirmation for screen readers — a live status region, present
-       before `copied` flips so it always announces the change. -->
-  <span class="sr-only" role="status">{copied ? copiedLabel : ''}</span>
+  <!-- Copy outcome for screen readers — a live status region, present before the
+       phase flips so it always announces the change. -->
+  <span class="sr-only" role="status">{copyState.phase === 'idle' ? '' : copyButtonText}</span>
 </div>

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

@@ -2,131 +2,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;
+    density?: "compact" | "comfortable" | undefined;
 } | undefined) => {
     root: (props?: ({
         layout?: "bubble" | "plain" | undefined;
         role?: "user" | "system" | "assistant" | undefined;
-        density?: "comfortable" | "compact" | undefined;
+        density?: "compact" | "comfortable" | 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;
+        density?: "compact" | "comfortable" | 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;
+        density?: "compact" | "comfortable" | 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;
+        density?: "compact" | "comfortable" | 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;
+        density?: "compact" | "comfortable" | 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;
+    column: (props?: ({
+        layout?: "bubble" | "plain" | undefined;
+        role?: "user" | "system" | "assistant" | undefined;
+        density?: "compact" | "comfortable" | 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;
+        density?: "compact" | "comfortable" | 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;
+        density?: "compact" | "comfortable" | 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;
+        density?: "compact" | "comfortable" | 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;
+        density?: "compact" | "comfortable" | 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;
+        density?: "compact" | "comfortable" | 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;
+        density?: "compact" | "comfortable" | 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;
+        density?: "compact" | "comfortable" | 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;
+        density?: "compact" | "comfortable" | 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;
+        density?: "compact" | "comfortable" | 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;
+        density?: "compact" | "comfortable" | 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;
+        density?: "compact" | "comfortable" | 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;
+        density?: "compact" | "comfortable" | 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;
+        density?: "compact" | "comfortable" | 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;