@urbicon-ui/blocks 6.40.4 → 6.43.2

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;

package/dist/components/Chat/CodeBlock/code-block.variants.js

@@ -1,18 +1,11 @@
 import { tv } from '../../../utils/variants.js';
 export const codeBlockVariants = tv({
     slots: {
-        // Architectural surface — an elevated card, structure radius, clipped so the
-        // scrollable body respects the rounded corners.
-        root: [
-            'relative block w-full overflow-hidden box-border',
-            'bg-surface-elevated border border-border-subtle rounded-contain'
-        ],
-        // Header only renders when there is something to show (lang / copy / actions).
-        header: [
-            'flex items-center justify-between gap-2',
-            'px-3 py-1.5 border-b border-border-subtle'
-        ],
-        langLabel: ['font-mono text-xs text-text-tertiary select-none'],
+        root: ['relative block w-full overflow-hidden box-border'],
+        // Header only renders when there is something to show (label / lang / copy /
+        // actions).
+        header: ['flex items-center justify-between gap-2'],
+        langLabel: ['text-xs text-text-tertiary select-none'],
         copyButton: [
             'inline-flex items-center gap-1.5',
             'px-2 py-1 rounded-modify',
@@ -26,12 +19,33 @@ export const codeBlockVariants = tv({
         // never the page. Focusable + role=region so keyboard users can reach the
         // scroll (a11y for scrollable content).
         pre: [
-            'm-0 px-3 py-2.5',
+            'm-0',
             'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-inset'
         ],
         code: ['font-mono text-sm text-text-primary']
     },
     variants: {
+        /**
+         * `card` — the standalone block: own surface, own outline, own radius. This
+         * is the right frame when the code sits directly in a reading flow (a fenced
+         * block in streamed markdown).
+         *
+         * `plain` — the EMBEDDED block: no surface, no border, no radius, no padding
+         * of its own. A card inside a card is the single loudest source of visual
+         * noise in this family — nested outlines at the same radius, two header rows
+         * and three divider lines for one JSON payload. When the parent already
+         * frames the content (ToolCallCard), the code only needs its monospace face
+         * to read as code. The parent owns the frame; the child owns the text.
+         */
+        variant: {
+            card: {
+                root: 'bg-surface-elevated border border-border-subtle rounded-contain',
+                header: 'px-3 py-1.5 border-b border-border-subtle',
+                langLabel: 'font-mono',
+                pre: 'px-3 py-2.5'
+            },
+            plain: {}
+        },
         // false → single-line semantics, horizontal scroll inside the block.
         // true  → soft-wrap long lines, no horizontal scroll.
         wrap: {
@@ -46,6 +60,7 @@ export const codeBlockVariants = tv({
         }
     },
     defaultVariants: {
+        variant: 'card',
         wrap: false
     }
 });

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

@@ -2,11 +2,14 @@ import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 import type { CodeBlockSlots, CodeBlockVariants } from './code-block.variants.js';
 /**
- * @description Read-only code display card with a one-click copy interaction: the copy
+ * @description Read-only code display with a one-click copy interaction: the copy
  * button swaps its icon and label to a confirmation for two seconds and fires `onCopy`.
  * Renders raw text only — no built-in syntax highlighting; a consumer or the
  * StreamingMarkdown renderer can layer highlighting in via a snippet. Used by
  * StreamingMarkdown for fenced code blocks, and standalone for any code snippet.
+ * `variant="card"` (default) brings its own surface, outline and radius;
+ * `variant="plain"` drops all three for embedding inside a container that already
+ * frames the content (as ToolCallCard does), so nested outlines never stack.
  *
  * @tag ai
  * @tag display
@@ -23,6 +26,13 @@ export interface CodeBlockProps extends CodeBlockVariants, Omit<HTMLAttributes<H
     code: string;
     /** Language label shown in the header. Display-only — does not drive highlighting. */
     lang?: string;
+    /**
+     * Header caption, shown instead of `lang`. For an embedded block, what the
+     * payload *is* ("Input", "Response body") says more than the language it is
+     * serialised in — and rendering both states the same fact twice. `lang` still
+     * names the scrollable region for screen readers when both are given.
+     */
+    label?: string;
     /** Show the copy button in the header. */
     showCopy?: boolean;
     /**
@@ -30,19 +40,44 @@ export interface CodeBlockProps extends CodeBlockVariants, Omit<HTMLAttributes<H
      * block; `true` wraps with `whitespace-pre-wrap` + word breaking.
      */
     wrap?: boolean;
-    /** Accessible label / tooltip for the copy button in its idle state. */
+    /**
+     * Accessible label / tooltip for the copy button at rest. These three labels
+     * are plain English defaults rather than translations on purpose: pulling the
+     * i18n registry into this leaf costs +5 KB gz, which StreamingMarkdown and
+     * ReasoningDisclosure would inherit by embedding it. Pass your own strings to
+     * localise.
+     * @default 'Copy'
+     */
     copyLabel?: string;
-    /** Accessible label shown for two seconds after a successful copy. */
+    /**
+     * Label shown for two seconds after a successful copy.
+     * @default 'Copied'
+     */
     copiedLabel?: string;
+    /**
+     * Label shown for two seconds after a FAILED copy — e.g. a denied clipboard
+     * permission or a non-secure context.
+     * @default 'Copy failed'
+     */
+    copyFailedLabel?: string;
     /** Called with the copied code after a successful clipboard write. */
     onCopy?: (code: string) => void;
+    /**
+     * Called with the thrown reason when the clipboard write fails. Without a
+     * handler the failure is logged; either way the button reports it.
+     */
+    onCopyError?: (error: unknown) => void;
     /** Extra header actions rendered to the right, before the copy button. */
     actions?: Snippet;
     /** Extra classes merged onto the root element. */
     class?: string;
     /** Remove all default tv classes. */
     unstyled?: boolean;
-    /** Per-slot class overrides. Slots: root | header | langLabel | copyButton | pre | code */
+    /**
+     * Per-slot class overrides. Slots: root | header | langLabel | copyButton | pre | code.
+     * Note `variant="plain"` deliberately leaves root/header/pre without surface,
+     * outline or padding — the embedding parent supplies those.
+     */
     slotClasses?: Partial<Record<CodeBlockSlots, string>>;
     /**
      * Apply a named preset registered via `<BlocksProvider presets={{ CodeBlock: {...} }}>`.

package/dist/components/Chat/PromptInput/PromptInput.svelte

@@ -2,6 +2,7 @@
   import { onDestroy, tick } from 'svelte';
   import { useBlocksI18n } from '../../..';
   import { getBlocksConfig, resolveSlotClasses } from '../../../provider';
+  import CoreIconButton from '../../../internal/core/CoreIconButton.svelte';
   import { resolveIcon } from '../../../icons';
   import SendIconDefault from '../../../icons/SendIcon.svelte';
   import SquareIconDefault from '../../../icons/SquareIcon.svelte';
@@ -350,15 +351,14 @@
           </span>
           <span class={cls('attachmentName')} title={entry.file.name}>{entry.file.name}</span>
           <span class={cls('attachmentSize')}>{formatFileSize(entry.file.size)}</span>
-          <button
-            type="button"
+          <CoreIconButton
             class={cls('attachmentRemove')}
             data-attachment-remove
             aria-label={removeAttachmentLabel(entry.file.name)}
             onclick={() => removeAttachment(entry, i)}
           >
             <CloseIcon size={14} />
-          </button>
+          </CoreIconButton>
         </li>
       {/each}
     </ul>
@@ -382,15 +382,14 @@
   <div class={cls('actions')}>
     <div class={cls('leading')}>
       {#if allowAttachments}
-        <button
-          type="button"
+        <CoreIconButton
           class={cls('attachButton')}
           aria-label={attachLabel}
           {disabled}
           onclick={openFilePicker}
         >
           <PaperclipIcon size={iconSize} />
-        </button>
+        </CoreIconButton>
       {/if}
       {@render leading?.()}
     </div>
@@ -398,24 +397,18 @@
     <div class={cls('trailing')}>
       {@render trailing?.()}
       {#if busy}
-        <button
-          type="button"
-          class={cls('stopButton')}
-          aria-label={stopLabel}
-          onclick={() => onStop?.()}
-        >
+        <CoreIconButton class={cls('stopButton')} aria-label={stopLabel} onclick={() => onStop?.()}>
           <SquareIcon size={iconSize} />
-        </button>
+        </CoreIconButton>
       {:else}
-        <button
-          type="button"
+        <CoreIconButton
           class={cls('sendButton')}
           aria-label={sendLabel}
           disabled={!canSubmit}
           onclick={submit}
         >
           <SendIcon size={iconSize} />
-        </button>
+        </CoreIconButton>
       {/if}
     </div>
   </div>

package/dist/components/Chat/PromptInput/prompt-input.variants.js

@@ -29,13 +29,19 @@ export const promptInputVariants = tv({
         ],
         attachmentName: ['truncate text-xs text-text-primary min-w-0'],
         attachmentSize: ['shrink-0 text-2xs text-text-tertiary tabular-nums'],
+        // The icon-only controls below render through CoreIconButton, so they carry
+        // only what it does NOT supply. Its plumbing is flex centring, cursor/select,
+        // `focus-visible:outline-none` and the disabled trio (opacity, cursor,
+        // pointer-events) — repeating any of those here would be resolved by
+        // stylesheet order rather than the override ladder, since the core runs no
+        // variant engine. `disabled:hover:*` is likewise unnecessary: the core's
+        // `disabled:pointer-events-none` already stops hover from firing.
         attachmentRemove: [
-            'inline-flex items-center justify-center shrink-0',
-            'size-5 rounded-modify',
-            'text-text-tertiary cursor-pointer',
+            'shrink-0 size-5 rounded-modify',
+            '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:ring-2 focus-visible:ring-primary'
+            'focus-visible:ring-2 focus-visible:ring-primary'
         ],
         // Chromeless auto-growing textarea — the composer surface owns the border.
         textarea: [
@@ -50,29 +56,24 @@ export const promptInputVariants = tv({
         trailing: ['flex items-center gap-1 shrink-0'],
         // Icon-only affordance buttons.
         attachButton: [
-            'inline-flex items-center justify-center shrink-0',
-            'rounded-modify text-text-secondary cursor-pointer',
+            'shrink-0 rounded-modify text-text-secondary',
             '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:ring-2 focus-visible:ring-primary',
-            'disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent'
+            'focus-visible:ring-2 focus-visible:ring-primary'
         ],
         sendButton: [
-            'inline-flex items-center justify-center shrink-0',
-            'rounded-modify cursor-pointer',
+            'shrink-0 rounded-modify',
             'bg-primary text-text-on-primary',
             'transition-[color,background-color,opacity] duration-[var(--blocks-duration-fast)] ease-out',
             'hover:bg-primary-hover active:bg-primary-active',
-            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2',
-            'disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-primary'
+            'focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2'
         ],
         stopButton: [
-            'inline-flex items-center justify-center shrink-0',
-            'rounded-modify cursor-pointer',
+            'shrink-0 rounded-modify',
             'bg-neutral text-text-on-primary',
             'transition-[color,background-color] duration-[var(--blocks-duration-fast)] ease-out',
             'hover:bg-neutral-hover active:bg-neutral-active',
-            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2'
+            'focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2'
         ],
         // Compact inline validation line (first rejection). role=status is set in
         // the component; the empty state renders no box.