@urbicon-ui/blocks 6.35.0 → 6.36.0

package/dist/components/Chat/PromptInput/prompt-input.variants.d.ts

@@ -0,0 +1,90 @@
+import { type SlotNames, type VariantProps } from '../../../utils/variants.js';
+export declare const promptInputVariants: ((props?: {
+    size?: "sm" | "md" | undefined;
+} | undefined) => {
+    root: (props?: ({
+        size?: "sm" | "md" | 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;
+    attachmentsStrip: (props?: ({
+        size?: "sm" | "md" | 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;
+    attachmentChip: (props?: ({
+        size?: "sm" | "md" | 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;
+    attachmentThumb: (props?: ({
+        size?: "sm" | "md" | 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?: ({
+        size?: "sm" | "md" | 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?: ({
+        size?: "sm" | "md" | 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;
+    attachmentRemove: (props?: ({
+        size?: "sm" | "md" | 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;
+    textarea: (props?: ({
+        size?: "sm" | "md" | 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?: ({
+        size?: "sm" | "md" | 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;
+    leading: (props?: ({
+        size?: "sm" | "md" | 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;
+    trailing: (props?: ({
+        size?: "sm" | "md" | 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;
+    attachButton: (props?: ({
+        size?: "sm" | "md" | 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;
+    sendButton: (props?: ({
+        size?: "sm" | "md" | 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;
+    stopButton: (props?: ({
+        size?: "sm" | "md" | 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;
+    error: (props?: ({
+        size?: "sm" | "md" | 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;
+    hint: (props?: ({
+        size?: "sm" | "md" | undefined;
+    } & {
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
+    }) | undefined) => string;
+}) & {
+    readonly config: import("../../../utils/variants.js").TVConfig;
+};
+export type PromptInputVariants = VariantProps<typeof promptInputVariants>;
+/** Slot names derived from the tv() config — single source of truth for slotClasses. */
+export type PromptInputSlots = SlotNames<typeof promptInputVariants>;

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

@@ -0,0 +1,102 @@
+import { tv } from '../../../utils/variants.js';
+export const promptInputVariants = tv({
+    slots: {
+        // Single bordered composer surface. The focus ring lives on the container
+        // (focus-within) so the whole composer reads as one field even though the
+        // textarea inside is chromeless — the family's "one input" look.
+        root: [
+            'relative flex flex-col w-full box-border',
+            'bg-surface-base border border-border-default rounded-contain',
+            'transition-[border-color,box-shadow] duration-[var(--blocks-duration-fast)] ease-out',
+            'focus-within:border-primary focus-within:ring-2 focus-within:ring-primary focus-within:ring-offset-0',
+            // A file is being dragged over the composer.
+            'data-[dragging=true]:border-primary data-[dragging=true]:ring-2 data-[dragging=true]:ring-primary'
+        ],
+        // Chip strip above the textarea. Wraps; scrolls vertically if it grows past
+        // a couple of rows so the composer never explodes in height.
+        attachmentsStrip: ['flex flex-wrap gap-1.5', 'px-2.5 pt-2.5', 'max-h-32 overflow-y-auto'],
+        attachmentChip: [
+            'inline-flex items-center gap-1.5 max-w-full min-w-0',
+            'py-1 pl-1 pr-1.5',
+            'bg-surface-elevated border border-border-subtle rounded-modify'
+        ],
+        // Fixed box that holds either the image preview or the file icon.
+        attachmentThumb: [
+            'inline-flex items-center justify-center shrink-0',
+            'size-7 rounded-modify overflow-hidden',
+            'bg-surface-interactive text-text-tertiary',
+            '[&>img]:size-full [&>img]:object-cover'
+        ],
+        attachmentName: ['truncate text-xs text-text-primary min-w-0'],
+        attachmentSize: ['shrink-0 text-2xs text-text-tertiary tabular-nums'],
+        attachmentRemove: [
+            'inline-flex items-center justify-center shrink-0',
+            'size-5 rounded-modify',
+            'text-text-tertiary cursor-pointer',
+            'transition-[color,background-color] duration-[var(--blocks-duration-fast)] ease-out',
+            'hover:bg-surface-hover hover:text-text-primary',
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary'
+        ],
+        // Chromeless auto-growing textarea — the composer surface owns the border.
+        textarea: [
+            'w-full resize-none bg-transparent',
+            'text-text-primary placeholder:text-text-tertiary',
+            'border-0 outline-none focus:outline-none focus-visible:outline-none',
+            'disabled:cursor-not-allowed disabled:opacity-60'
+        ],
+        // Bottom bar: leading zone (attach) | spacer | trailing zone (send/stop).
+        actions: ['flex items-center justify-between gap-2 px-2 pb-2'],
+        leading: ['flex items-center gap-1 min-w-0'],
+        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',
+            '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'
+        ],
+        sendButton: [
+            'inline-flex items-center justify-center shrink-0',
+            'rounded-modify cursor-pointer',
+            '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'
+        ],
+        stopButton: [
+            'inline-flex items-center justify-center shrink-0',
+            'rounded-modify cursor-pointer',
+            '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'
+        ],
+        // Compact inline validation line (first rejection). role=status is set in
+        // the component; the empty state renders no box.
+        error: ['px-3 pb-2 text-xs text-danger'],
+        // Helper line under the composer (e.g. "Enter to send").
+        hint: ['px-3 pb-2 text-xs text-text-tertiary']
+    },
+    variants: {
+        size: {
+            sm: {
+                textarea: 'px-2.5 pt-2.5 text-sm leading-5',
+                attachButton: 'size-7',
+                sendButton: 'size-7',
+                stopButton: 'size-7'
+            },
+            md: {
+                textarea: 'px-3 pt-3 text-sm leading-6',
+                attachButton: 'size-8',
+                sendButton: 'size-8',
+                stopButton: 'size-8'
+            }
+        }
+    },
+    defaultVariants: {
+        size: 'md'
+    }
+});

package/dist/components/Chat/ReasoningDisclosure/ReasoningDisclosure.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+  import { Collapsible } from '../../../primitives';
+  import { getBlocksConfig, resolveSlotClasses } from '../../../provider';
+  import { resolveIcon } from '../../../icons';
+  import ChevronDownIconDefault from '../../../icons/ChevronDownIcon.svelte';
+  import StreamingMarkdown from '../StreamingMarkdown/StreamingMarkdown.svelte';
+  import { reasoningDisclosureVariants } from './reasoning-disclosure.variants';
+  import type { ReasoningDisclosureProps } from './index';
+
+  const ChevronDownIcon = resolveIcon('chevronDown', ChevronDownIconDefault);
+
+  let {
+    reasoning,
+    streaming = false,
+    open = $bindable(),
+    defaultOpen = false,
+    onOpenChange,
+    urlPolicy,
+    thinkingLabel = 'Thinking',
+    reasoningLabel = 'Reasoning',
+    formatDuration = (s: number) => `Thought for ${s}s`,
+    class: className,
+    unstyled: unstyledProp = false,
+    slotClasses: slotClassesProp = {},
+    preset,
+    ...restProps
+  }: ReasoningDisclosureProps = $props();
+
+  const blocksConfig = getBlocksConfig();
+  const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
+
+  // Forward arbitrary root attributes onto the underlying Collapsible without
+  // re-deriving its (very wide) props union: spreading the typed rest makes
+  // svelte-check reconcile HTMLAttributes' nullable `title` against
+  // Collapsible's narrowed one and blows the union-complexity budget (same
+  // workaround as ToolCallCard).
+  const rootProps = $derived(restProps as Record<string, unknown>);
+
+  const styles = $derived(reasoningDisclosureVariants());
+  const slotClasses = $derived(
+    resolveSlotClasses(blocksConfig, 'ReasoningDisclosure', preset, {}, slotClassesProp)
+  );
+
+  // Header label: streaming → thinking; settled with a duration → "Thought for
+  // Xs" (whole seconds); settled without one → the neutral reasoning label.
+  const stateLabel = $derived.by(() => {
+    if (streaming) return thinkingLabel;
+    if (reasoning.durationMs != null) {
+      return formatDuration(Math.round(reasoning.durationMs / 1000));
+    }
+    return reasoningLabel;
+  });
+
+  // The pulse lives here (not in the tv() config) so the dead-token guard never
+  // flags it; `motion-reduce:animate-none` respects prefers-reduced-motion.
+  const pulse = $derived(streaming ? 'animate-pulse motion-reduce:animate-none' : '');
+</script>
+
+<Collapsible
+  variant="default"
+  size="sm"
+  bind:open
+  {defaultOpen}
+  {onOpenChange}
+  class={className}
+  {...rootProps}
+>
+  {#snippet trigger({ open: isOpen, toggle, disabled, triggerId, contentId })}
+    <button
+      id={triggerId}
+      type="button"
+      class={unstyled
+        ? (slotClasses?.trigger ?? '')
+        : styles.trigger({ class: slotClasses?.trigger })}
+      aria-expanded={isOpen}
+      aria-controls={contentId}
+      {disabled}
+      onclick={toggle}
+    >
+      <span
+        class={unstyled
+          ? [slotClasses?.label, pulse].filter(Boolean).join(' ')
+          : styles.label({ class: [slotClasses?.label, pulse] })}
+      >
+        {stateLabel}
+      </span>
+      <ChevronDownIcon
+        class={unstyled
+          ? [slotClasses?.chevron, isOpen ? 'rotate-180' : ''].filter(Boolean).join(' ')
+          : styles.chevron({ class: [slotClasses?.chevron, isOpen ? 'rotate-180' : ''] })}
+      />
+    </button>
+  {/snippet}
+  <div
+    class={unstyled
+      ? (slotClasses?.content ?? '')
+      : styles.content({ class: slotClasses?.content })}
+  >
+    <StreamingMarkdown
+      content={reasoning.text}
+      {streaming}
+      {urlPolicy}
+      size="sm"
+      slotClasses={{ base: 'text-inherit' }}
+    />
+  </div>
+</Collapsible>

package/dist/components/Chat/ReasoningDisclosure/ReasoningDisclosure.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ReasoningDisclosureProps } from './index.js';
+declare const ReasoningDisclosure: import("svelte").Component<ReasoningDisclosureProps, {}, "open">;
+type ReasoningDisclosure = ReturnType<typeof ReasoningDisclosure>;
+export default ReasoningDisclosure;

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

@@ -0,0 +1,85 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ChatReasoningPart } from '../chat.types.js';
+import type { MarkdownUrlPolicy } from '../markdown/types.js';
+import type { ReasoningDisclosureSlots } from './reasoning-disclosure.variants.js';
+/**
+ * @description Default renderer for `reasoning` parts in ChatMessage. Wraps a
+ * model's thinking trace in a collapsed, muted disclosure: the header shows a
+ * state label ("Thinking" while streaming, "Thought for Xs" once settled with a
+ * duration, otherwise "Reasoning"), the body renders the reasoning text through
+ * StreamingMarkdown in a damped tertiary tone. Stays collapsed by default —
+ * including while streaming — so a growing reasoning trace never steals the
+ * answer's space; the caller drives the `streaming` flag (the part carries no
+ * status).
+ * @tag ai
+ * @related ChatMessage
+ * @related ToolCallCard
+ * @related StreamingMarkdown
+ * @stability experimental
+ *
+ * @example
+ * ```svelte
+ * <ReasoningDisclosure
+ *   reasoning={{ type: 'reasoning', text: model.reasoning, durationMs: 2400 }}
+ *   streaming={message.status === 'streaming'}
+ * />
+ * ```
+ */
+export interface ReasoningDisclosureProps extends Omit<HTMLAttributes<HTMLDivElement>, 'class' | 'children'> {
+    /** The reasoning part to render (`{ type: 'reasoning'; text; durationMs? }`). Required. */
+    reasoning: ChatReasoningPart;
+    /**
+     * The reasoning trace is currently growing. Drives the "Thinking" label and
+     * its pulse; supplied by the caller (the part itself carries no status).
+     * @default false
+     */
+    streaming?: boolean;
+    /**
+     * Whether the disclosure is expanded. Supports `bind:open`. Passing `open`
+     * without `bind:` requires mirroring every `onOpenChange` back into your state.
+     */
+    open?: boolean;
+    /**
+     * Initial expanded state for uncontrolled usage. Reasoning stays collapsed by
+     * default, even while streaming.
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /** Fires once per trigger-driven open transition, after the state is applied. */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * URL policy passed through to the inner StreamingMarkdown for any links in
+     * the reasoning text (same strict default — untrusted model output).
+     */
+    urlPolicy?: MarkdownUrlPolicy;
+    /**
+     * Header label while `streaming`.
+     * @default 'Thinking'
+     */
+    thinkingLabel?: string;
+    /**
+     * Header label once settled without a `durationMs`.
+     * @default 'Reasoning'
+     */
+    reasoningLabel?: string;
+    /**
+     * Header label once settled with a `durationMs`, receiving whole seconds
+     * (`Math.round(durationMs / 1000)`).
+     * @default (s) => `Thought for ${s}s`
+     */
+    formatDuration?: (seconds: number) => string;
+    /** Extra classes merged onto the root (the underlying Collapsible base). */
+    class?: string;
+    /** Strip ReasoningDisclosure's own tv() classes (trigger/label/chevron/content); the collapse mechanics stay. */
+    unstyled?: boolean;
+    /** Per-slot class overrides. Slots: `trigger` (header button), `label` (state label), `chevron`, `content` (markdown wrapper). */
+    slotClasses?: Partial<Record<ReasoningDisclosureSlots, string>>;
+    /**
+     * Apply a named preset registered via `<BlocksProvider presets={{ ReasoningDisclosure: {...} }}>`.
+     * Prefer this over `class` overrides when the requested look falls outside the
+     * semantic intent palette.
+     */
+    preset?: string;
+}
+export { default as ReasoningDisclosure } from './ReasoningDisclosure.svelte';
+export { type ReasoningDisclosureSlots, type ReasoningDisclosureVariants, reasoningDisclosureVariants } from './reasoning-disclosure.variants.js';

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

@@ -0,0 +1,2 @@
+export { default as ReasoningDisclosure } from './ReasoningDisclosure.svelte';
+export { reasoningDisclosureVariants } from './reasoning-disclosure.variants.js';

package/dist/components/Chat/ReasoningDisclosure/reasoning-disclosure.variants.d.ts

@@ -0,0 +1,20 @@
+import { type SlotNames, type VariantProps } from '../../../utils/variants.js';
+export declare const reasoningDisclosureVariants: ((props?: {} | undefined) => {
+    trigger: (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;
+    label: (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;
+    chevron: (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;
+    content: (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 ReasoningDisclosureVariants = VariantProps<typeof reasoningDisclosureVariants>;
+/** Slot names derived from the tv() config — single source of truth for slotClasses. */
+export type ReasoningDisclosureSlots = SlotNames<typeof reasoningDisclosureVariants>;

package/dist/components/Chat/ReasoningDisclosure/reasoning-disclosure.variants.js

@@ -0,0 +1,31 @@
+import { tv } from '../../../utils/variants.js';
+export const reasoningDisclosureVariants = tv({
+    slots: {
+        // The whole header row is the toggle. Muted (secondary) tone — reasoning is
+        // meta-content, subordinate to the answer. `size="sm"` rhythm, matching the
+        // Collapsible small size the disclosure sits on.
+        trigger: [
+            'flex w-full items-center justify-between gap-2 text-left',
+            'cursor-pointer py-2 text-sm font-medium text-text-secondary',
+            'transition-[color] duration-[var(--blocks-duration-fast)]',
+            'hover:text-primary',
+            'focus-visible:rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50',
+            'disabled:cursor-not-allowed disabled:opacity-50'
+        ],
+        // State label ("Thinking" / "Reasoning" / "Thought for Xs"). The streaming
+        // pulse is toggled in the component (animate-pulse motion-reduce:animate-none)
+        // so it stays off the dead-token guard.
+        label: 'min-w-0 truncate',
+        // Chevron shares the collapse motion tokens so the spin stays in sync with
+        // the panel; rotate-180 is applied in the component when open.
+        chevron: [
+            'h-4 w-4 shrink-0 text-text-tertiary',
+            'transition-transform duration-[var(--blocks-collapse-duration)] ease-[var(--blocks-collapse-easing)]',
+            'motion-reduce:duration-[1ms]'
+        ],
+        // Wrapper around StreamingMarkdown. `text-text-tertiary` is the damped
+        // reasoning tone; the markdown body inherits it (its base color override is
+        // `text-inherit`), while link/blockquote slots keep their own intents.
+        content: 'text-text-tertiary'
+    }
+});

package/dist/components/Chat/StreamingMarkdown/MdBlock.svelte

@@ -0,0 +1,99 @@
+<!-- Block-node dispatcher for StreamingMarkdown. Internal — not exported. -->
+<script lang="ts">
+  import CodeBlock from '../CodeBlock/CodeBlock.svelte';
+  import type { BlockNode } from '../markdown/types';
+  import type { MdRenderContext } from './md-context';
+  import MdBlockSelf from './MdBlock.svelte';
+  import MdInline from './MdInline.svelte';
+
+  let { block, ctx }: { block: BlockNode; ctx: MdRenderContext } = $props();
+
+  const headingTag = $derived(
+    block.kind === 'heading' ? `h${Math.min(6, block.level - 1 + ctx.headingLevelStart)}` : 'h2'
+  );
+
+  function alignClass(align: 'left' | 'center' | 'right' | null): string {
+    if (align === 'center') return 'text-center';
+    if (align === 'right') return 'text-end';
+    return 'text-start';
+  }
+</script>
+
+{#if block.kind === 'paragraph'}
+  <p class={ctx.classes.paragraph}><MdInline nodes={block.children} {ctx} /></p>
+{:else if block.kind === 'heading'}
+  <svelte:element this={headingTag} class={ctx.classes[`heading${block.level}`]}
+    ><MdInline nodes={block.children} {ctx} /></svelte:element
+  >
+{:else if block.kind === 'code-block'}
+  {#if ctx.renderers?.codeBlock}
+    {@render ctx.renderers.codeBlock({ code: block.code, lang: block.lang, open: block.open })}
+  {:else}
+    <CodeBlock class={ctx.classes.codeBlock} code={block.code} lang={block.lang} />
+  {/if}
+{:else if block.kind === 'list'}
+  <svelte:element
+    this={block.ordered ? 'ol' : 'ul'}
+    start={block.ordered ? block.start : undefined}
+    class={block.ordered ? ctx.classes.listOrdered : ctx.classes.listUnordered}
+  >
+    {#each block.items as item, i (i)}
+      <li class={item.checked === undefined ? ctx.classes.listItem : ctx.classes.taskItem}>
+        {#if item.checked !== undefined}
+          <input type="checkbox" checked={item.checked} disabled class={ctx.classes.taskCheckbox} />
+          <div class="min-w-0 flex-1">
+            {#each item.children as child, c (c)}
+              <MdBlockSelf block={child} {ctx} />
+            {/each}
+          </div>
+        {:else}
+          {#each item.children as child, c (c)}
+            <MdBlockSelf block={child} {ctx} />
+          {/each}
+        {/if}
+      </li>
+    {/each}
+  </svelte:element>
+{:else if block.kind === 'blockquote'}
+  <blockquote class={ctx.classes.blockquote}>
+    {#each block.children as child, c (c)}
+      <MdBlockSelf block={child} {ctx} />
+    {/each}
+  </blockquote>
+{:else if block.kind === 'table'}
+  <!-- Focusable scroll container (axe: scrollable-region-focusable) -->
+  <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+  <div
+    class={ctx.classes.tableWrapper}
+    role="region"
+    aria-label={ctx.tableRegionLabel}
+    tabindex="0"
+  >
+    <table class={ctx.classes.table}>
+      <thead>
+        <tr class={ctx.classes.tableRow}>
+          {#each block.header as cell, col (col)}
+            <th
+              scope="col"
+              class={[ctx.classes.tableHeadCell, alignClass(block.align[col] ?? null)]}
+              ><MdInline nodes={cell} {ctx} /></th
+            >
+          {/each}
+        </tr>
+      </thead>
+      <tbody>
+        {#each block.rows as row, r (r)}
+          <tr class={ctx.classes.tableRow}>
+            {#each row as cell, col (col)}
+              <td class={[ctx.classes.tableCell, alignClass(block.align[col] ?? null)]}
+                ><MdInline nodes={cell} {ctx} /></td
+              >
+            {/each}
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  </div>
+{:else if block.kind === 'hr'}
+  <hr class={ctx.classes.hr} />
+{/if}

package/dist/components/Chat/StreamingMarkdown/MdBlock.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { BlockNode } from '../markdown/types.js';
+import type { MdRenderContext } from './md-context.js';
+type $$ComponentProps = {
+    block: BlockNode;
+    ctx: MdRenderContext;
+};
+declare const MdBlock: import("svelte").Component<$$ComponentProps, {}, "">;
+type MdBlock = ReturnType<typeof MdBlock>;
+export default MdBlock;