@urbicon-ui/blocks 6.43.0 → 6.44.0

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

@@ -39,6 +39,13 @@ export declare const chatMessageVariants: ((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;
+    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;

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

@@ -11,6 +11,13 @@ export const chatMessageVariants = tv({
         header: ['flex min-w-0 items-center gap-2'],
         roleName: ['text-sm font-medium text-text-secondary select-none'],
         avatar: ['shrink-0'],
+        // Everything that belongs UNDER the bubble — citations, the error alert, the
+        // footer — lives in this column, not as a sibling of `container`. It is what
+        // makes those rows inherit the bubble's side: a user bubble sits right, so
+        // its timestamp and citations must too. `items-*` per role does the aligning
+        // (see the compounds), and the width cap lives here rather than on `bubble`
+        // so an alert spans the column while the bubble still hugs its text.
+        column: ['flex min-w-0 flex-col'],
         // The content bubble (bubble layout) / the full-width column (plain layout).
         bubble: ['min-w-0 max-w-full'],
         // Vertical stack of the rendered parts.
@@ -29,21 +36,29 @@ export const chatMessageVariants = tv({
         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'],
+        // status alert — stretches across the column (the bubble hugs its text, an
+        // error does not).
+        statusAlert: ['mt-1 w-full'],
+        // Footer row holding actions + metadata. Its height is set by the metadata
+        // line (`min-h-5`), NOT by the action buttons: those are `opacity-0` until
+        // hover/focus, so letting them size the row reserved ~28px of blank strip
+        // under every single message. `-my-1` below lets them overhang the shorter
+        // row instead of growing it.
+        footer: ['flex min-h-5 items-center gap-2'],
         actions: [
-            'flex items-center gap-1 opacity-0',
+            'flex items-center gap-1 -my-1 opacity-0',
             'transition-opacity duration-[var(--blocks-duration-fast)] ease-out',
             'group-hover/message:opacity-100 group-focus-within/message:opacity-100'
         ],
+        // Renders through CoreIconButton, so this carries only what the core does not
+        // supply — no flex centring, cursor or `focus-visible:outline-none` here (the
+        // core has no variant engine, so a repeat would resolve by stylesheet order).
         actionButton: [
-            'inline-flex items-center justify-center rounded-modify p-1.5',
-            'text-text-tertiary cursor-pointer',
+            'rounded-modify p-1.5',
+            'text-text-tertiary',
             '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'
+            'focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1'
         ],
         metadata: ['text-xs text-text-tertiary']
     },
@@ -52,6 +67,7 @@ export const chatMessageVariants = tv({
             bubble: {},
             // Document-like: full-width content under an avatar + role header row.
             plain: {
+                column: 'w-full items-stretch',
                 bubble: 'w-full',
                 partsFlow: 'gap-3'
             }
@@ -64,30 +80,46 @@ export const chatMessageVariants = tv({
         density: {
             comfortable: {
                 root: 'gap-1.5',
+                column: 'gap-1.5',
                 partsFlow: 'gap-2'
             },
             compact: {
                 root: 'gap-1',
+                column: 'gap-1',
                 partsFlow: 'gap-1.5'
             }
         }
     },
     compoundVariants: [
         // ── bubble layout: role tint + alignment ────────────────────────────────
+        // Bubbles ride the BRIDGE tier, not `contain`. `contain` (2 px) is the
+        // architectural-panel radius — correct on a 600 px Card, where it reads as
+        // a precise edge, but on a ~200 px bubble the same 2 px reads as a plain
+        // rectangle. Optical radius scales with the area it turns. `bridge` (6 px)
+        // is the middle tier and stays brand-themeable, so a consumer retunes
+        // bubbles via `--radius-bridge` instead of overriding this slot.
         {
             layout: 'bubble',
             role: 'user',
             class: {
-                // Reverse so the (avatar-less) bubble packs to the right edge.
+                // Reverse so the (avatar-less) column packs to the right edge, and
+                // right-align its rows so timestamp + citations hang off the same edge
+                // as the bubble instead of drifting to the left margin.
                 container: 'flex-row-reverse',
-                bubble: 'max-w-[85%] rounded-contain bg-primary-subtle'
+                column: 'max-w-[85%] items-end',
+                bubble: 'rounded-bridge bg-primary-subtle',
+                // Metadata comes first in the DOM so it can sit against the bubble edge;
+                // reversing here puts that edge on the right for a user message while
+                // keeping the action bar on the inside.
+                footer: 'flex-row-reverse'
             }
         },
         {
             layout: 'bubble',
             role: 'assistant',
             class: {
-                bubble: 'max-w-[85%] rounded-contain bg-surface-elevated'
+                column: 'max-w-[85%] items-start',
+                bubble: 'rounded-bridge bg-surface-elevated'
             }
         },
         {
@@ -95,7 +127,8 @@ export const chatMessageVariants = tv({
             role: 'system',
             class: {
                 container: 'justify-center',
-                bubble: 'max-w-[90%] rounded-contain border border-border-subtle bg-surface-base text-sm text-text-secondary'
+                column: 'max-w-[90%] items-center',
+                bubble: 'rounded-bridge border border-border-subtle bg-surface-base text-sm text-text-secondary'
             }
         },
         // ── bubble layout: density padding ──────────────────────────────────────

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

@@ -68,10 +68,22 @@ export interface ChatMessageProps extends Omit<ChatMessageVariants, 'role'>, Omi
     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' */
+    /**
+     * Accessible label / tooltip for the copy action.
+     * @default the `accessibility.copy` translation
+     */
     copyLabel?: string;
-    /** Accessible label shown briefly after a successful copy. @default 'Copied' */
+    /**
+     * Label shown briefly after a successful copy.
+     * @default the `accessibility.copied` translation
+     */
     copiedLabel?: string;
+    /**
+     * Label shown briefly after a FAILED copy — e.g. a denied clipboard permission
+     * or a non-secure context.
+     * @default the `accessibility.copyFailed` translation
+     */
+    copyFailedLabel?: string;
     /** Accessible label / tooltip for the regenerate action. @default 'Regenerate' */
     regenerateLabel?: string;
     /** Label for the retry button in the error/aborted Alert. @default 'Retry' */
@@ -86,9 +98,12 @@ export interface ChatMessageProps extends Omit<ChatMessageVariants, 'role'>, Omi
     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 /
+     * column | bubble | partsFlow | attachment | attachmentIcon | attachmentName |
+     * attachmentSize | sourcesFooter | placeholder | statusAlert | footer | actions |
+     * actionButton | metadata. `column` wraps the bubble with everything under it
+     * (citations, status alert, footer) and carries the role-dependent alignment —
+     * override it to re-align a message's whole stack, not just the bubble.
+     * Reasoning and tool-call parts render through ReasoningDisclosure /
      * ToolCallCard, which take their own `slotClasses`.
      */
     slotClasses?: Partial<Record<ChatMessageSlots, string>>;

package/dist/components/Chat/CodeBlock/CodeBlock.svelte

@@ -3,17 +3,22 @@
   import { resolveIcon } from '../../../icons';
   import CopyIconDefault from '../../../icons/CopyIcon.svelte';
   import CheckIconDefault from '../../../icons/CheckIcon.svelte';
+  import { createCopyState } from '../../../internal/copy-state.svelte';
   import { codeBlockVariants, type CodeBlockVariants } from './code-block.variants';
   import type { CodeBlockProps } from './index';
 
   let {
     code,
     lang,
+    label,
+    variant = 'card',
     showCopy = true,
     wrap = false,
-    copyLabel = 'Copy code',
+    copyLabel = 'Copy',
     copiedLabel = 'Copied',
+    copyFailedLabel = 'Copy failed',
     onCopy,
+    onCopyError,
     actions,
     class: className,
     unstyled: unstyledProp = false,
@@ -28,7 +33,16 @@
   const CopyIcon = resolveIcon('copy', CopyIconDefault);
   const CheckIcon = resolveIcon('check', CheckIconDefault);
 
-  const variantProps: CodeBlockVariants = $derived({ wrap });
+  // Deliberately NOT routed through useBlocksI18n(). CodeBlock is a leaf with no
+  // other reason to pull the i18n registry, and doing so for three strings costs
+  // +5 KB gz here — which StreamingMarkdown and ReasoningDisclosure then inherit
+  // by embedding it (+25% each, measured against bundle-size.baseline.json). A
+  // consumer localises through the three label props; ChatMessage, which already
+  // carries the registry via Alert/Avatar/Button/Tooltip, does use the
+  // translations because there it is free. See technical-debt.md — splitting
+  // translations/en.ts per area would remove the trade-off.
+
+  const variantProps: CodeBlockVariants = $derived({ variant, wrap });
   const styles = $derived(codeBlockVariants(variantProps));
   const slotClasses = $derived(
     resolveSlotClasses(blocksConfig, 'CodeBlock', preset, variantProps, slotClassesProp)
@@ -45,54 +59,66 @@
     });
   }
 
-  const showHeader = $derived(!!lang || showCopy || !!actions);
-  const regionLabel = $derived(lang ? `${lang} code` : 'Code');
+  // `label` wins over `lang` in the header: an embedding parent (ToolCallCard)
+  // passes what the payload *is* ("Input"), which says more than the language it
+  // happens to be serialised in — and showing both is the same fact twice.
+  const headerLabel = $derived(label ?? lang);
+  const showHeader = $derived(!!headerLabel || showCopy || !!actions);
+  // The accessible name of the scroll region keeps naming the language when
+  // there is one: "Input code" is vaguer than "json code" for a screen reader.
+  const regionLabel = $derived(lang ? `${lang} code` : label ? `${label} code` : 'Code');
 
-  let copied = $state(false);
-  let resetTimer: ReturnType<typeof setTimeout> | undefined;
+  const copyState = createCopyState();
 
-  async function copyCode() {
-    try {
-      await navigator.clipboard.writeText(code);
-      copied = true;
-      if (resetTimer) clearTimeout(resetTimer);
-      resetTimer = setTimeout(() => {
-        copied = false;
-        resetTimer = undefined;
-      }, 2000);
+  async function handleCopy() {
+    const result = await copyState.copy(code);
+    if (result.ok) {
       onCopy?.(code);
-    } catch (err) {
-      // Never swallow silently — but leave state untouched so the UI does not
-      // falsely confirm a copy that failed (e.g. denied clipboard permission).
-      console.error('CodeBlock: failed to copy code', err);
+    } else if (onCopyError) {
+      onCopyError(result.error);
+    } else {
+      // Never silent: a copy that did nothing is the outcome most worth
+      // reporting, and the consumer opted out of handling it.
+      console.error('CodeBlock: failed to copy code', result.error);
     }
   }
 
-  // Clear a pending reset on unmount so the timer can't fire into a torn-down component.
-  $effect(() => () => {
-    if (resetTimer) clearTimeout(resetTimer);
-  });
+  // The button reports the outcome, all three of them. A denied clipboard
+  // permission used to leave it looking untouched (console-only).
+  const buttonText = $derived(
+    copyState.phase === 'copied'
+      ? copiedLabel
+      : copyState.phase === 'error'
+        ? copyFailedLabel
+        : copyLabel
+  );
 </script>
 
 <div class={cls('root', className)} {...restProps}>
   {#if showHeader}
     <div class={cls('header')}>
-      <span class={cls('langLabel')}>{lang ?? ''}</span>
+      <span class={cls('langLabel')}>{headerLabel ?? ''}</span>
       <div class="flex items-center gap-1">
         {@render actions?.()}
         {#if showCopy}
+          <!--
+            Icon-only: the button sits in a header whose other half already names
+            the payload, and a text button there outweighed the caption it was
+            supposed to serve. `title` carries the label for pointer users, the
+            live region below announces the outcome.
+          -->
           <button
             type="button"
             class={cls('copyButton')}
-            onclick={copyCode}
-            aria-label={copied ? copiedLabel : copyLabel}
+            onclick={handleCopy}
+            aria-label={buttonText}
+            title={buttonText}
           >
-            {#if copied}
+            {#if copyState.phase === 'copied'}
               <CheckIcon size={14} />
             {:else}
               <CopyIcon size={14} />
             {/if}
-            <span>{copied ? copiedLabel : copyLabel}</span>
           </button>
         {/if}
       </div>
@@ -111,10 +137,10 @@
     ></pre>
 
   <!--
-    Copy confirmation for screen readers. A label change on the button the user
-    just activated is not a reliable announcement — a live status region is. It
-    must exist in the DOM before `copied` flips, so it always renders and only
-    its text content changes.
+    Copy outcome for screen readers. A label change on the button the user just
+    activated is not a reliable announcement — a live status region is. It must
+    exist in the DOM before the phase flips, so it always renders and only its
+    text content changes.
   -->
-  <span class="sr-only" role="status">{copied ? copiedLabel : ''}</span>
+  <span class="sr-only" role="status">{copyState.phase === 'idle' ? '' : buttonText}</span>
 </div>

package/dist/components/Chat/CodeBlock/code-block.variants.d.ts

@@ -1,33 +1,40 @@
 import { type SlotNames, type VariantProps } from '../../../utils/variants.js';
 export declare const codeBlockVariants: ((props?: {
+    variant?: "card" | "plain" | undefined;
     wrap?: boolean | undefined;
 } | undefined) => {
     root: (props?: ({
+        variant?: "card" | "plain" | undefined;
         wrap?: boolean | 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?: ({
+        variant?: "card" | "plain" | undefined;
         wrap?: boolean | 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;
     langLabel: (props?: ({
+        variant?: "card" | "plain" | undefined;
         wrap?: boolean | 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;
     copyButton: (props?: ({
+        variant?: "card" | "plain" | undefined;
         wrap?: boolean | 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;
     pre: (props?: ({
+        variant?: "card" | "plain" | undefined;
         wrap?: boolean | 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;
     code: (props?: ({
+        variant?: "card" | "plain" | undefined;
         wrap?: boolean | 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;