@urbicon-ui/blocks 6.40.4 → 6.43.2

package/dist/components/Chat/ToolCallCard/ToolCallCard.svelte

@@ -153,20 +153,25 @@
   {#if children}
     {@render children(toolCall)}
   {:else}
+    <!--
+      The payloads render as `plain` CodeBlocks: this card already IS the frame,
+      so a bordered child card would stack a second outline at the same radius
+      inside the first. The section caption moved into the block's own header
+      too — "Input" above a header reading "json" was one chrome row and one
+      label too many for a single payload.
+    -->
     <div class={cls('body')}>
       {#if toolCall.errorMessage}
         <p class={cls('errorMessage')}>{toolCall.errorMessage}</p>
       {/if}
       {#if toolCall.input !== undefined}
         <div class={cls('section')}>
-          <span class={cls('sectionLabel')}>{inputLabel}</span>
-          <CodeBlock lang="json" code={stringify(toolCall.input)} />
+          <CodeBlock variant="plain" label={inputLabel} code={stringify(toolCall.input)} />
         </div>
       {/if}
       {#if toolCall.output !== undefined}
         <div class={cls('section')}>
-          <span class={cls('sectionLabel')}>{outputLabel}</span>
-          <CodeBlock lang="json" code={stringify(toolCall.output)} />
+          <CodeBlock variant="plain" label={outputLabel} code={stringify(toolCall.output)} />
         </div>
       {/if}
     </div>

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

@@ -59,9 +59,9 @@ export interface ToolCallCardProps extends Omit<HTMLAttributes<HTMLDivElement>,
     completeLabel?: string;
     /** Header badge label for the `error` state. @default 'Failed' */
     errorLabel?: string;
-    /** Heading above the input code block. @default 'Input' */
+    /** Caption in the input payload's header. @default 'Input' */
     inputLabel?: string;
-    /** Heading above the output code block. @default 'Output' */
+    /** Caption in the output payload's header. @default 'Output' */
     outputLabel?: string;
     /** Extra classes merged onto the root card element. */
     class?: string;
@@ -70,7 +70,8 @@ export interface ToolCallCardProps extends Omit<HTMLAttributes<HTMLDivElement>,
     /**
      * Per-slot class overrides. Slots: `trigger` (header button), `triggerLeft`,
      * `triggerRight`, `spinner`, `toolName`, `chevron`, `body`, `section`,
-     * `sectionLabel`, `errorMessage`.
+     * `errorMessage`. The payloads render as `variant="plain"` CodeBlocks — style
+     * those through `<BlocksProvider presets={{ CodeBlock: {...} }}>`.
      */
     slotClasses?: Partial<Record<ToolCallCardSlots, string>>;
     /**

package/dist/components/Chat/ToolCallCard/tool-call-card.variants.d.ts

@@ -24,9 +24,6 @@ export declare const toolCallCardVariants: ((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;
-    sectionLabel: (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;
     errorMessage: (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;

package/dist/components/Chat/ToolCallCard/tool-call-card.variants.js

@@ -28,10 +28,10 @@ export const toolCallCardVariants = tv({
         ],
         // Default body wrapper (input/output sections + error line).
         body: 'flex flex-col gap-3',
-        // One labelled block (heading + CodeBlock).
-        section: 'flex flex-col gap-1',
-        // Small tertiary heading above each code block.
-        sectionLabel: 'text-xs font-medium text-text-tertiary',
+        // One payload block. The caption lives in the CodeBlock's own header (it is
+        // passed as `label`), so this is a plain positioning wrapper — no heading row
+        // of its own, which is what removed a whole chrome level from the card.
+        section: 'flex flex-col',
         // Error message line shown above the sections.
         errorMessage: 'text-sm text-danger'
     }

package/dist/components/CopyButton/CopyButton.svelte

@@ -3,6 +3,7 @@
   import { resolveIcon } from '../../icons';
   import CheckIconDefault from '../../icons/CheckIcon.svelte';
   import CopyIconDefault from '../../icons/CopyIcon.svelte';
+  import { createCopyState } from '../../internal/copy-state.svelte';
   import { Button } from '../../primitives/Button';
   import { getBlocksConfig, resolveSlotClasses } from '../../provider';
   import { copyButtonVariants } from './copy-button.variants';
@@ -40,8 +41,11 @@
   const blocksConfig = getBlocksConfig();
   const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
 
-  let state = $state<'idle' | 'copied' | 'error'>('idle');
-  let timer: ReturnType<typeof setTimeout> | undefined;
+  // Shares the clipboard state machine with CodeBlock and ChatMessage — see
+  // internal/copy-state.svelte.ts for why the outcome is returned rather than
+  // delivered through callbacks captured at init.
+  const copyState = createCopyState({ timeout: () => timeout });
+  const state = $derived(copyState.phase);
 
   const copyText = $derived(label ?? bt('accessibility.copy'));
   const copiedText = $derived(copiedLabel ?? bt('accessibility.copied'));
@@ -91,25 +95,11 @@
   // visible text be the name (WCAG 2.5.3), keeping any consumer aria-label.
   const ariaLabel = $derived(label ? ariaLabelProp : (ariaLabelProp ?? copyText));
 
-  function scheduleReset() {
-    clearTimeout(timer);
-    if (timeout > 0) timer = setTimeout(() => (state = 'idle'), timeout);
-  }
-
   async function handleCopy() {
-    try {
-      if (!navigator.clipboard?.writeText) throw new Error('Clipboard API unavailable');
-      await navigator.clipboard.writeText(value);
-      state = 'copied';
-      onCopy?.(value);
-    } catch (error) {
-      state = 'error';
-      onError?.(error);
-    }
-    scheduleReset();
+    const result = await copyState.copy(value);
+    if (result.ok) onCopy?.(value);
+    else onError?.(result.error);
   }
-
-  $effect(() => () => clearTimeout(timer));
 </script>
 
 <span class="contents">

package/dist/components/CopyButton/copy-button.variants.d.ts

@@ -1,23 +1,23 @@
 import { type SlotNames, type VariantProps } from '../../utils/variants.js';
 export declare const copyButtonVariants: ((props?: {
     size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xs" | undefined;
-    state?: "error" | "idle" | "copied" | undefined;
+    state?: "copied" | "error" | "idle" | undefined;
 } | undefined) => {
     base: (props?: ({
         size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xs" | undefined;
-        state?: "error" | "idle" | "copied" | undefined;
+        state?: "copied" | "error" | "idle" | 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;
     icon: (props?: ({
         size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xs" | undefined;
-        state?: "error" | "idle" | "copied" | undefined;
+        state?: "copied" | "error" | "idle" | 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;
     label: (props?: ({
         size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xs" | undefined;
-        state?: "error" | "idle" | "copied" | undefined;
+        state?: "copied" | "error" | "idle" | 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;

package/dist/components/FileUpload/fileUpload.variants.js

@@ -8,14 +8,19 @@ export const fileUploadVariants = tv({
             'rounded-contain border-2 border-dashed',
             'border-border-default bg-surface-base',
             'cursor-pointer select-none',
-            'transition-[color,background-color,border-color,box-shadow,transform]',
+            // `scale`, NOT `transform`: Tailwind 4 emits `scale-*` as the discrete
+            // `scale:` property — the `dragging` compounds below lift the zone with
+            // `scale-[1.01]`, which a `transform` entry never animated.
+            'transition-[color,background-color,border-color,box-shadow,scale]',
             'duration-[var(--blocks-duration-fast)]',
             'ease-[var(--blocks-ease-gentle)]',
             'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2'
         ],
         dropzoneIcon: [
             'text-text-quaternary',
-            'transition-[color,transform] duration-[var(--blocks-duration-fast)]'
+            // `scale`, NOT `transform` — the `dragging` compounds pop the icon with
+            // `scale-110` (discrete `scale:` property in Tailwind 4).
+            'transition-[color,scale] duration-[var(--blocks-duration-fast)]'
         ],
         dropzoneTitle: ['font-medium text-text-primary'],
         dropzoneDescription: ['text-text-tertiary text-center max-w-xs'],
@@ -24,7 +29,10 @@ export const fileUploadVariants = tv({
         fileItem: [
             'group relative flex items-center gap-3',
             'rounded-contain border border-border-hairline bg-surface-quiet',
-            'transition-[background-color,border-color,box-shadow,opacity,transform]',
+            // No transform entry: nothing on this slot sets a scale/translate/rotate
+            // utility, and Tailwind 4 would emit those as discrete properties anyway —
+            // `transform` was dead weight.
+            'transition-[background-color,border-color,box-shadow,opacity]',
             'duration-[var(--blocks-duration-fast)]',
             'hover:border-border-default hover:shadow-[var(--blocks-shadow-sm)]'
         ],
@@ -49,7 +57,10 @@ export const fileUploadVariants = tv({
         fileItemError: ['text-danger'],
         fileItemStatusIcon: [
             'flex-shrink-0',
-            'transition-[color,transform] duration-[var(--blocks-duration-fast)]'
+            // Colour only: the icon is swapped per status, never scaled/rotated, so a
+            // `transform` entry animated nothing (Tailwind 4 emits transforms as the
+            // discrete scale/translate/rotate properties).
+            'transition-[color] duration-[var(--blocks-duration-fast)]'
         ]
     },
     variants: {

package/dist/components/PinInput/PinInput.svelte

@@ -261,6 +261,7 @@
     role="group"
     aria-labelledby={label ? labelId : undefined}
     aria-label={label ? undefined : ariaLabel}
+    aria-disabled={disabled ? 'true' : undefined}
     class={unstyled ? (slotClasses?.group ?? '') : styles.group({ class: slotClasses?.group })}
   >
     {#each cellKeys as key, i (key)}

package/dist/components/PinInput/pin-input.variants.js

@@ -74,9 +74,11 @@ export const pinInputVariants = tv({
             error: { message: FIELD_MESSAGE_TONES.error },
             helper: { message: FIELD_MESSAGE_TONES.helper }
         },
+        // The error FRAME is not declared here — it lives in the compound stage
+        // below, where it beats `intent` by construction. See the precedence note
+        // on the first compound entry.
         error: {
             true: {
-                cell: fieldErrorFrame(focus),
                 message: FIELD_MESSAGE_TONES.error
             }
         },
@@ -85,6 +87,17 @@ export const pinInputVariants = tv({
         }
     },
     compoundVariants: [
+        // ── Validation precedence: `error` beats `intent`, explicitly ────────────
+        // Both axes paint the SAME three buckets (border-color plus the focused
+        // border/ring tint), so exactly one of them can win. Emitting the error
+        // frame here rather than on the `error` axis makes that rule structural:
+        // compounds always fold after every axis, so `error: true` overrides
+        // whatever `intent` painted regardless of how the axes are ordered above
+        // (it used to hinge purely on `error` being DECLARED after `intent`).
+        {
+            error: true,
+            class: { cell: fieldErrorFrame(focus) }
+        },
         // Ghost keeps a transparent border at rest — even under an intent. The error
         // state drops this so validation feedback (border-danger) stays visible.
         {

package/dist/components/TimeInput/time-input.variants.js

@@ -89,9 +89,11 @@ export const timeInputVariants = tv({
             error: { message: FIELD_MESSAGE_TONES.error },
             helper: { message: FIELD_MESSAGE_TONES.helper }
         },
+        // The error FRAME is not declared here — it lives in the compound stage
+        // below, where it beats `intent` by construction. See the precedence note
+        // on the first compound entry.
         error: {
             true: {
-                field: fieldErrorFrame(focus),
                 message: FIELD_MESSAGE_TONES.error
             }
         },
@@ -103,6 +105,19 @@ export const timeInputVariants = tv({
         }
     },
     compoundVariants: [
+        // ── Validation precedence: `error` beats `intent`, explicitly ────────────
+        // Both axes paint the SAME three buckets (border-color plus the focused
+        // border/ring tint), so exactly one of them can win. Emitting the error
+        // frame here rather than on the `error` axis makes that rule structural:
+        // compounds always fold after every axis, so `error: true` overrides
+        // whatever `intent` painted regardless of how the axes are ordered above
+        // (it used to hinge purely on `error` being DECLARED after `intent`).
+        // Folding after `fullWidth` too is harmless: that axis only paints layout
+        // buckets (`w`, `justify-content`), which never collide with the frame.
+        {
+            error: true,
+            class: { field: fieldErrorFrame(focus) }
+        },
         {
             variant: 'ghost',
             error: false,