@urbicon-ui/blocks 6.34.0 → 6.36.0

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

@@ -0,0 +1,82 @@
+<!--
+  Recursive inline-node renderer for StreamingMarkdown. Internal — not exported.
+
+  Whitespace discipline: every branch keeps its element glued to the control-flow
+  tags (no newline between `}` and `<strong>`), because stray template whitespace
+  becomes a visible space inside underlines / code backgrounds. Guarded by the
+  exact-textContent test in StreamingMarkdown.svelte.test.ts.
+-->
+<script lang="ts">
+  import { resolveIcon } from '../../../icons';
+  import ImageIconDefault from '../../../icons/ImageIcon.svelte';
+  import CitationChip from '../CitationChip/CitationChip.svelte';
+  import type { CitationSource } from '../CitationChip';
+  import type { InlineNode } from '../markdown/types';
+  import { checkLinkUrl } from '../markdown/url-policy';
+  import type { MdRenderContext } from './md-context';
+  import MdInlineSelf from './MdInline.svelte';
+
+  const ImageIcon = resolveIcon('image', ImageIconDefault);
+
+  let { nodes, ctx }: { nodes: InlineNode[]; ctx: MdRenderContext } = $props();
+
+  // The citation snippet override receives the same sanitized-URL contract as
+  // renderers.link/image: a source.url that fails the policy is stripped
+  // before it ever reaches consumer markup (review finding, P1 wave).
+  function safeCitationSource(source: CitationSource | undefined): CitationSource | undefined {
+    if (!source?.url) return source;
+    const check = checkLinkUrl(source.url, ctx.urlPolicy);
+    return check.ok ? { ...source, url: check.href } : { ...source, url: undefined };
+  }
+</script>
+
+<!--
+  Index keys throughout: inline/block node arrays are write-once (the engine
+  replaces the whole block object on change, never reorders within it), so
+  position IS identity here.
+-->
+{#each nodes as node, i (i)}
+  {#if node.kind === 'text'}{node.text}{:else if node.kind === 'strong'}<strong
+      ><MdInlineSelf nodes={node.children} {ctx} /></strong
+    >{:else if node.kind === 'em'}<em><MdInlineSelf nodes={node.children} {ctx} /></em
+    >{:else if node.kind === 'strike'}<del><MdInlineSelf nodes={node.children} {ctx} /></del
+    >{:else if node.kind === 'code'}<code class={ctx.classes.inlineCode}>{node.text}</code
+    >{:else if node.kind === 'link'}{#if ctx.renderers?.link}{@render ctx.renderers.link({
+        href: node.href,
+        title: node.title,
+        children: node.children,
+        blocked: node.blocked === true
+      })}{:else if node.blocked}<span class={ctx.classes.linkBlocked}
+        ><MdInlineSelf nodes={node.children} {ctx} /></span
+      >{:else}<a
+        class={ctx.classes.link}
+        href={node.href}
+        title={node.title}
+        target={ctx.linkTarget}
+        rel={ctx.linkTarget === '_blank' ? 'noopener noreferrer' : undefined}
+        ><MdInlineSelf nodes={node.children} {ctx} /></a
+      >{/if}{:else if node.kind === 'image'}{#if ctx.renderers?.image}{@render ctx.renderers.image({
+        src: node.src,
+        alt: node.alt,
+        title: node.title,
+        blocked: node.blocked === true
+      })}{:else if node.blocked}<span class={ctx.classes.imageBlocked}
+        ><ImageIcon class="size-3.5 shrink-0" /><span class="truncate">{node.alt}</span></span
+      >{:else}<img
+        class={ctx.classes.image}
+        src={node.src}
+        alt={node.alt}
+        title={node.title}
+        loading="lazy"
+      />{/if}{:else if node.kind === 'citation'}{#if ctx.renderers?.citation}{@render ctx.renderers.citation(
+        {
+          id: node.id,
+          source: safeCitationSource(ctx.citations?.get(node.id)?.source),
+          index: ctx.citations?.get(node.id)?.index
+        }
+      )}{:else}{@const entry = ctx.citations?.get(node.id)}{#if entry}<CitationChip
+          source={entry.source}
+          index={entry.index}
+          urlPolicy={ctx.urlPolicy}
+        />{:else}{`[${node.id}]`}{/if}{/if}{:else if node.kind === 'break'}<br />{/if}
+{/each}

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

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

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

@@ -0,0 +1,118 @@
+<script lang="ts">
+  import { getBlocksConfig, resolveSlotClasses } from '../../../provider';
+  import { createIncrementalParser } from '../markdown/blocks';
+  import type { MarkdownParseOptions, MarkdownUrlPolicy } from '../markdown/types';
+  import type { CitationSource } from '../CitationChip';
+  import MdBlock from './MdBlock.svelte';
+  import type { MdRenderContext } from './md-context';
+  import {
+    streamingMarkdownVariants,
+    type StreamingMarkdownVariants
+  } from './streaming-markdown.variants';
+  import type { StreamingMarkdownProps } from './index';
+
+  let {
+    content,
+    streaming = false,
+    sources,
+    urlPolicy,
+    renderers,
+    autolink = false,
+    headingLevelStart = 1,
+    linkTarget = '_blank',
+    tableRegionLabel = 'Table',
+    size = 'md',
+    class: className = '',
+    unstyled: unstyledProp = false,
+    slotClasses: slotClassesProp = {},
+    preset,
+    ...restProps
+  }: StreamingMarkdownProps = $props();
+
+  const blocksConfig = getBlocksConfig();
+  const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
+
+  const variantProps: StreamingMarkdownVariants = $derived({ size });
+  const styles = $derived(streamingMarkdownVariants(variantProps));
+
+  const slotClasses = $derived(
+    resolveSlotClasses(blocksConfig, 'StreamingMarkdown', preset, variantProps, slotClassesProp)
+  );
+
+  /** Final class string per slot — computed once here so MdBlock/MdInline stay dumb. */
+  const classes = $derived.by(() => {
+    const out: Record<string, string> = {};
+    for (const [name, slotFn] of Object.entries(styles)) {
+      const override = slotClasses?.[name as keyof typeof slotClasses];
+      out[name] = unstyled ? (override ?? '') : slotFn({ class: override });
+    }
+    return out;
+  });
+
+  const citations = $derived(
+    sources?.length
+      ? new Map(sources.map((source, i) => [source.id, { source, index: i + 1 }]))
+      : undefined
+  );
+
+  // ── Parser lifecycle ───────────────────────────────────────────────────────
+  // The incremental parser is plain (non-reactive) state, rebuilt only when a
+  // parse *option* changes: the citation-id set, autolink, or the urlPolicy
+  // reference (keep `urlPolicy` referentially stable in consumers). A rebuild
+  // re-parses the full content; block keys are index-sequential in both the
+  // old and new parser, so the keyed {#each} patches instead of remounting.
+  // Appends mutate the parser inside $derived.by — legal, since none of the
+  // mutated values are reactive state; the guard on `parser.source` makes
+  // re-evaluation idempotent.
+  let parser = createIncrementalParser();
+  let parserOptionsKey: string | undefined;
+  let parserPolicy: MarkdownUrlPolicy | undefined;
+
+  const doc = $derived.by(() => {
+    const ids = sources?.map((s) => s.id) ?? [];
+    // JSON keeps distinct id sets distinct - a plain join can collide and
+    // would then skip a required parser rebuild.
+    const optionsKey = `${autolink ? 1 : 0}|${JSON.stringify(ids)}`;
+    if (optionsKey !== parserOptionsKey || urlPolicy !== parserPolicy) {
+      const options: MarkdownParseOptions = {
+        urlPolicy,
+        autolink,
+        citationIds: ids.length ? new Set(ids) : undefined
+      };
+      parser = createIncrementalParser(options);
+      parserOptionsKey = optionsKey;
+      parserPolicy = urlPolicy;
+    }
+    if (content !== parser.source) {
+      if (content.startsWith(parser.source)) {
+        parser.append(content.slice(parser.source.length));
+      } else {
+        parser.reset();
+        parser.append(content);
+      }
+    }
+    return parser.document;
+  });
+
+  const ctx = $derived<MdRenderContext>({
+    classes,
+    renderers,
+    citations,
+    urlPolicy,
+    headingLevelStart,
+    linkTarget,
+    tableRegionLabel
+  });
+</script>
+
+<div
+  class={unstyled
+    ? [slotClasses?.base, className].filter(Boolean).join(' ')
+    : styles.base({ class: [slotClasses?.base, className] })}
+  {...restProps}
+>
+  {#each doc.blocks as block (block.key)}
+    <MdBlock {block} {ctx} />
+  {/each}
+  {#if streaming}<span class={classes.cursor} aria-hidden="true"></span>{/if}
+</div>

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

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

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

@@ -0,0 +1,86 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { CitationSource } from '../CitationChip/index.js';
+import type { MarkdownUrlPolicy } from '../markdown/types.js';
+import type { MarkdownRenderers } from './md-context.js';
+import type { StreamingMarkdownSlots, StreamingMarkdownVariants } from './streaming-markdown.variants.js';
+/**
+ * Props interface for StreamingMarkdown component
+ *
+ * @description Streaming-safe markdown renderer for LLM output. Parses a growing
+ * `content` string incrementally (settled blocks are never re-rendered) and renders
+ * to a real component tree — never through `{@html}`, so raw HTML in the source
+ * stays inert text. Links and images pass a strict-by-default URL policy
+ * (external images blocked unless allowlisted). Citation markers like `[1]`
+ * resolve to CitationChip when a matching entry exists in `sources`; code fences
+ * render through CodeBlock. Per-node-type `renderers` snippets hook in syntax
+ * highlighting, custom links, images, or citations without adding dependencies.
+ *
+ * @tag ai
+ * @tag display
+ * @related CodeBlock
+ * @related CitationChip
+ * @stability experimental
+ *
+ * @example
+ * ```svelte
+ * <StreamingMarkdown content={message.text} streaming={message.status === 'streaming'} />
+ * ```
+ *
+ * @example
+ * ```svelte
+ * <StreamingMarkdown
+ *   content={answer}
+ *   sources={[{ id: '1', title: 'Design tokens', url: 'https://ui.urbicon.de/tokens' }]}
+ *   urlPolicy={{ allowedImagePrefixes: ['https://cdn.example.com/'] }}
+ * />
+ * ```
+ */
+export interface StreamingMarkdownProps extends StreamingMarkdownVariants, Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Markdown source. Append-only growth streams incrementally; any other change re-parses. */
+    content: string;
+    /** Shows a pulsing cursor after the last block while the answer streams @default false */
+    streaming?: boolean;
+    /**
+     * Citation sources. Ids activate `[id]` / `【id】` markers in the content,
+     * rendering them as CitationChip (1-based index follows array order).
+     * Markers without a matching id stay plain text.
+     */
+    sources?: CitationSource[];
+    /**
+     * URL policy for links and images. Strict by default: links limited to
+     * http/https/mailto/tel + relative, every external image blocked. Keep the
+     * object referentially stable — a new reference re-parses the content.
+     */
+    urlPolicy?: MarkdownUrlPolicy;
+    /** Per-node-type snippet overrides (code highlighting, router links, lightboxes, …) */
+    renderers?: MarkdownRenderers;
+    /** Recognize bare `https://…` autolinks (GFM-style) @default false */
+    autolink?: boolean;
+    /**
+     * DOM heading level that markdown `#` maps to (deeper levels shift along,
+     * clamped at h6). Visual sizing keeps following the author's level. Set to
+     * 3 in chat surfaces so message headings stay out of the page outline.
+     * @default 1
+     */
+    headingLevelStart?: 1 | 2 | 3 | 4 | 5 | 6;
+    /** Target for rendered links; `rel="noopener noreferrer"` is added for `_blank` @default '_blank' */
+    linkTarget?: '_blank' | '_self';
+    /** aria-label for the focusable scrollable region around tables @default 'Table' */
+    tableRegionLabel?: string;
+    /** Type scale: `md` inherits the surrounding font size, `sm` is compact @default 'md' */
+    size?: 'sm' | 'md';
+    /** Custom CSS class */
+    class?: string;
+    /** Remove default styles */
+    unstyled?: boolean;
+    /** Per-slot class overrides. Slots: base | paragraph | heading1–6 | inlineCode | link | linkBlocked | image | imageBlocked | listUnordered | listOrdered | listItem | taskItem | taskCheckbox | blockquote | codeBlock | tableWrapper | table | tableRow | tableHeadCell | tableCell | hr | cursor */
+    slotClasses?: Partial<Record<StreamingMarkdownSlots, string>>;
+    /**
+     * Apply a named preset registered via `<BlocksProvider presets={{ StreamingMarkdown: {...} }}>`.
+     * Prefer this over `class` overrides for reusable custom looks.
+     */
+    preset?: string;
+}
+export type { MarkdownRenderers } from './md-context.js';
+export { default as StreamingMarkdown } from './StreamingMarkdown.svelte';
+export { type StreamingMarkdownSlots, type StreamingMarkdownVariants, streamingMarkdownVariants } from './streaming-markdown.variants.js';

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

@@ -0,0 +1,2 @@
+export { default as StreamingMarkdown } from './StreamingMarkdown.svelte';
+export { streamingMarkdownVariants } from './streaming-markdown.variants.js';

package/dist/components/Chat/StreamingMarkdown/md-context.d.ts

@@ -0,0 +1,58 @@
+import type { Snippet } from 'svelte';
+import type { CitationSource } from '../CitationChip/index.js';
+import type { InlineNode, MarkdownUrlPolicy } from '../markdown/types.js';
+/**
+ * Snippet overrides per markdown node type. Each snippet fully replaces the
+ * built-in renderer for that node — the hook point for syntax highlighting,
+ * lightboxes, router-aware links, or custom citation chips, without pulling
+ * any of those dependencies into the core.
+ */
+export interface MarkdownRenderers {
+    codeBlock?: Snippet<[{
+        code: string;
+        lang?: string;
+        open?: boolean;
+    }]>;
+    /** `href` is already policy-checked: empty string when `blocked` is true. */
+    link?: Snippet<[{
+        href: string;
+        title?: string;
+        children: InlineNode[];
+        blocked: boolean;
+    }]>;
+    /** `src` is already policy-checked: empty string when `blocked` is true. */
+    image?: Snippet<[{
+        src: string;
+        alt: string;
+        title?: string;
+        blocked: boolean;
+    }]>;
+    /** `source.url` is already policy-checked: stripped (undefined) when blocked. */
+    citation?: Snippet<[{
+        id: string;
+        source?: CitationSource;
+        index?: number;
+    }]>;
+}
+/**
+ * Internal render context threaded through MdBlock/MdInline. One object
+ * instead of five props; deliberately not a Svelte context — the tree is
+ * private to StreamingMarkdown and explicit prop flow keeps it inspectable.
+ */
+export interface MdRenderContext {
+    /** Resolved class string per variant slot (tv() + slotClasses + unstyled already applied). */
+    classes: Readonly<Record<string, string>>;
+    renderers?: MarkdownRenderers;
+    /** Citation id → source + 1-based display index; only set when `sources` were provided. */
+    citations?: ReadonlyMap<string, {
+        source: CitationSource;
+        index: number;
+    }>;
+    /** Forwarded to CitationChip so popover links obey the same policy as inline links. */
+    urlPolicy?: MarkdownUrlPolicy;
+    /** Markdown h1 renders as this DOM heading level (clamped at h6). */
+    headingLevelStart: number;
+    linkTarget: '_blank' | '_self';
+    /** aria-label for the focusable scrollable table region. */
+    tableRegionLabel: string;
+}

package/dist/components/Chat/StreamingMarkdown/md-context.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Chat/StreamingMarkdown/streaming-markdown.variants.d.ts

@@ -0,0 +1,145 @@
+import { type SlotNames, type VariantProps } from '../../../utils/variants.js';
+export declare const streamingMarkdownVariants: ((props?: {
+    size?: "sm" | "md" | undefined;
+} | undefined) => {
+    base: (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;
+    paragraph: (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;
+    heading1: (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;
+    heading2: (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;
+    heading3: (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;
+    heading4: (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;
+    heading5: (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;
+    heading6: (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;
+    inlineCode: (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;
+    link: (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;
+    linkBlocked: (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;
+    image: (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;
+    imageBlocked: (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;
+    listUnordered: (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;
+    listOrdered: (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;
+    listItem: (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;
+    taskItem: (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;
+    taskCheckbox: (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;
+    blockquote: (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;
+    codeBlock: (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;
+    tableWrapper: (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;
+    table: (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;
+    tableRow: (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;
+    tableHeadCell: (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;
+    tableCell: (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;
+    hr: (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;
+    cursor: (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 StreamingMarkdownVariants = VariantProps<typeof streamingMarkdownVariants>;
+/** Slot names derived from the tv() config — single source of truth for slotClasses. */
+export type StreamingMarkdownSlots = SlotNames<typeof streamingMarkdownVariants>;

package/dist/components/Chat/StreamingMarkdown/streaming-markdown.variants.js

@@ -0,0 +1,73 @@
+import { tv } from '../../../utils/variants.js';
+export const streamingMarkdownVariants = tv({
+    slots: {
+        // Inherits the surrounding type scale at `md` so chat surfaces stay in
+        // control of the base font size; `sm` opts into a compact scale.
+        base: 'min-w-0 break-words text-text-primary',
+        paragraph: 'mt-4 leading-relaxed first:mt-0',
+        heading1: 'mt-6 text-2xl font-semibold leading-tight first:mt-0',
+        heading2: 'mt-6 text-xl font-semibold leading-tight first:mt-0',
+        heading3: 'mt-5 text-lg font-semibold leading-snug first:mt-0',
+        heading4: 'mt-5 text-base font-semibold leading-snug first:mt-0',
+        heading5: 'mt-4 text-sm font-semibold first:mt-0',
+        heading6: 'mt-4 text-sm font-medium text-text-secondary first:mt-0',
+        inlineCode: 'rounded-modify bg-neutral-subtle px-1 py-0.5 font-mono text-[0.9em]',
+        link: [
+            'rounded-modify text-primary underline underline-offset-2',
+            'hover:text-primary-emphasis',
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50'
+        ],
+        // Policy-blocked link: inert text, dotted underline as the "this was a
+        // link" cue. The original URL never reaches the DOM.
+        linkBlocked: 'text-text-secondary underline decoration-dotted underline-offset-2',
+        image: 'mt-4 max-w-full rounded-contain border border-border-subtle first:mt-0',
+        // Alt-text fallback chip for policy-blocked images.
+        imageBlocked: [
+            'mt-1 inline-flex max-w-full items-center gap-1.5 rounded-modify',
+            'bg-neutral-subtle px-2 py-1 text-xs text-text-secondary'
+        ],
+        // Lists hug their introducing sentence (mt-2, not mt-4) — that is the
+        // typographically correct rhythm and keeps nested lists compact too.
+        listUnordered: 'mt-2 list-disc space-y-1 ps-5 marker:text-text-tertiary first:mt-0',
+        listOrdered: 'mt-2 list-decimal space-y-1 ps-5 marker:text-text-tertiary first:mt-0',
+        listItem: 'leading-relaxed',
+        // Task items replace the list marker with a checkbox; -ms-5 cancels the
+        // list padding so the checkbox sits where the marker was.
+        taskItem: '-ms-5 flex list-none items-start gap-2 leading-relaxed',
+        taskCheckbox: 'pointer-events-none mt-1 size-3.5 accent-primary',
+        blockquote: 'mt-4 border-s-2 border-border-emphasis ps-4 text-text-secondary first:mt-0',
+        codeBlock: 'mt-4 first:mt-0',
+        tableWrapper: [
+            'mt-4 overflow-x-auto rounded-contain border border-border-subtle first:mt-0',
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50'
+        ],
+        table: 'w-full border-collapse text-sm',
+        tableRow: '',
+        // Cell alignment comes from the column's delimiter row and is applied
+        // per cell in the renderer (text-start/center/end), never here.
+        tableHeadCell: 'border-b border-border-default bg-surface-elevated px-3 py-2 font-semibold',
+        tableCell: 'border-b border-border-subtle px-3 py-2 align-top',
+        hr: 'mt-6 border-t border-border-subtle first:mt-0',
+        cursor: [
+            '-mb-0.5 ms-0.5 inline-block h-[1em] w-0.5 bg-text-secondary',
+            'motion-safe:animate-pulse'
+        ]
+    },
+    variants: {
+        size: {
+            sm: {
+                base: 'text-sm',
+                heading1: 'text-xl',
+                heading2: 'text-lg',
+                heading3: 'text-base',
+                heading4: 'text-sm',
+                heading5: 'text-sm',
+                heading6: 'text-xs'
+            },
+            md: {}
+        }
+    },
+    defaultVariants: {
+        size: 'md'
+    }
+});