svelte-streamdown 4.1.1 → 4.2.0

package/dist/Streamdown.svelte

@@ -6,7 +6,13 @@
 		type StreamdownProps
 	} from './context.svelte.js';
 	import { mergeTheme, shadcnTheme } from './theme.js';
-	import { parseBlocks, createParseBlocksCache } from './marked/index.js';
+	import {
+		parseBlocks,
+		createParseBlocksCache,
+		compileTags,
+		DEFAULT_TAGS
+	} from './marked/index.js';
+	import { normalizeHtmlIndentation as dedentHtml } from './utils/normalize-html-indentation.js';
 	import { hasUnclosedFence } from './utils/fence.js';
 
 	let {
@@ -30,6 +36,7 @@
 		controls,
 		codeBlockMaxHeight,
 		tableMaxHeight,
+		lineNumbers = false,
 		animation,
 		element = $bindable(),
 		icons,
@@ -38,6 +45,9 @@
 		sources,
 		inlineCitationsMode = 'carousel',
 		mdxComponents,
+		customTags,
+		literalTagContent,
+		normalizeHtmlIndentation = false,
 		components,
 		static: isStatic,
 		...snippets
@@ -59,6 +69,20 @@
 	// the last couple of blocks instead of the whole document.
 	const blocksCache = createParseBlocksCache();
 
+	// One compile per allowlist identity, shared by the lexer and the streaming
+	// completer so the two can never disagree about what counts as a tag.
+	const tags = $derived.by(() => {
+		const names = [...(customTags ?? []), ...Object.keys(mdxComponents ?? {})];
+		// With nothing to compile, share DEFAULT_TAGS: the lexer options cache is
+		// keyed on this object, so a private copy per instance would rebuild and
+		// retain its own ~20 tokenizer registrations for no reason.
+		return names.length === 0 && !literalTagContent?.length
+			? DEFAULT_TAGS
+			: compileTags(names, literalTagContent);
+	});
+
+	const source = $derived(normalizeHtmlIndentation ? dedentHtml(content) : content);
+
 	streamdown = new StreamdownContext({
 		get element() {
 			return element;
@@ -176,6 +200,7 @@
 				tableCopy: table.copy,
 				tableDownload: table.download,
 				tableDownloadFilename: table.filename ?? 'table',
+				tableFullscreen: table.enabled && tableSection.fullscreen !== false,
 				tableCsvSeparator: tableSection.csvSeparator ?? ',',
 				mermaid: mermaid.enabled,
 				mermaidDownload: mermaid.download,
@@ -188,6 +213,9 @@
 		get codeBlockMaxHeight() {
 			return codeBlockMaxHeight;
 		},
+		get lineNumbers() {
+			return lineNumbers;
+		},
 		get tableMaxHeight() {
 			return tableMaxHeight;
 		},
@@ -203,6 +231,9 @@
 		get mdxComponents() {
 			return mdxComponents;
 		},
+		get tags() {
+			return tags;
+		},
 		get components() {
 			return components;
 		}
@@ -211,7 +242,7 @@
 	const id = $props.id();
 
 	const blocks = $derived(
-		isStatic ? content : parseBlocks(content, streamdown.extensions, blocksCache)
+		isStatic ? source : parseBlocks(source, streamdown.extensions, blocksCache, tags)
 	);
 
 	// Only the tail of a live stream can be mid-fence — a static render is finished
@@ -223,12 +254,13 @@
 
 <div bind:this={element} class={className}>
 	{#if isStatic}
-		<Block static={isStatic} block={content} />
+		<Block static={isStatic} block={source} />
 	{:else}
 		{#each blocks as block, index (`${id}-block-${index}`)}
 			<Block
 				static={isStatic}
 				{block}
+				live={index === blocks.length - 1}
 				incomplete={lastBlockIncomplete && index === blocks.length - 1}
 			/>
 		{/each}
@@ -237,6 +269,29 @@
 
 <style global>
 	:global {
+		/* Line numbers: a counter on the line span that already exists (why it is
+		   here and not in the theme: see resolveLineNumbers). CSS ships as a string
+		   at runtime, so keep this short. */
+		[data-streamdown-code] pre[data-line-numbers] > code > span {
+			counter-increment: sd-line;
+		}
+
+		[data-streamdown-code] pre[data-line-numbers] > code > span::before {
+			content: counter(sd-line);
+		}
+
+		/* Lives here, not in Mermaid.svelte: the table overlay needs it on pages
+		   that never render a diagram. */
+		[data-expanded='true'] {
+			position: fixed;
+			top: 16px;
+			left: 16px;
+			width: calc(100vw - 32px);
+			height: calc(100vh - 32px);
+			z-index: 2147483647;
+			margin: 0px;
+		}
+
 		@keyframes sd-fade {
 			from {
 				opacity: 0;

package/dist/context.svelte.d.ts

@@ -28,6 +28,9 @@ export type Translations = {
         tableFormatHtml: string;
         tableFormatCsv: string;
         tableFormatTsv: string;
+        tableFullscreen: string;
+        exitTableFullscreen: string;
+        table: string;
         downloadDiagram: string;
         downloadDiagramPng: string;
         downloadDiagramSvg: string;
@@ -48,6 +51,8 @@ export type Translations = {
 };
 export declare const defaultTranslations: Translations;
 export interface StreamdownContext extends Omit<StreamdownProps, keyof Snippets | 'class' | 'theme' | 'highlightTheme' | 'inlineCitationsMode'> {
+    /** `customTags` + `mdxComponents` keys compiled once; lexer and completer share it. */
+    tags: TagMatchers;
     snippets: Snippets;
     highlightTheme: HighlightTheme;
     /** False while rendering a bulk update (a replacement or a paste-sized append); Block captures it per update. */
@@ -72,10 +77,11 @@ export declare class StreamdownContext<Source extends Record<string, any> = Reco
         snippets: Snippets<Source>;
         highlightTheme: HighlightTheme;
         animateUpdate: boolean;
+        tags: TagMatchers;
     });
 }
 export declare const useStreamdown: () => StreamdownContext<Record<string, any>>;
-import type { AlertToken, CodeToken, MathToken, SubSupToken, TableToken, THead, TBody, TFoot, THeadRow, TRow, TD, TH, Extension, GenericToken, CitationToken, MdxToken } from './marked/index.js';
+import type { AlertToken, CodeToken, MathToken, SubSupToken, TableToken, THead, TBody, TFoot, THeadRow, TRow, TD, TH, Extension, GenericToken, CitationToken, MdxToken, TagMatchers } from './marked/index.js';
 import type { Tokens } from 'marked';
 import type { CsvSeparator } from './utils/table-export.js';
 import type { ListItemToken, ListToken } from './marked/marked-list.js';
@@ -151,6 +157,7 @@ export type TableControls = boolean | {
     enabled?: boolean;
     copy?: boolean;
     download?: DownloadControl<TableToken>;
+    fullscreen?: boolean;
     csvSeparator?: CsvSeparator;
 };
 export type MermaidControls = boolean | {
@@ -173,6 +180,7 @@ export type ResolvedControls = {
     tableCopy: boolean;
     tableDownload: boolean;
     tableDownloadFilename: string | ((token: TableToken) => string);
+    tableFullscreen: boolean;
     tableCsvSeparator: CsvSeparator;
     mermaid: boolean;
     mermaidDownload: boolean;
@@ -206,6 +214,13 @@ export type StreamdownProps<Source extends Record<string, any> = Record<string,
         [K in keyof Translations]?: Partial<Translations[K]>;
     };
     controls?: Controls;
+    /**
+     * Number the lines of every code block. Default false — upstream defaults it on,
+     * but turning it on here would change every existing render. A fence can flip it
+     * either way with a `lineNumbers` / `noLineNumbers` meta word, and start at N with
+     * `startLine=N`.
+     */
+    lineNumbers?: boolean;
     codeBlockMaxHeight?: string;
     tableMaxHeight?: string;
     renderHtml?: boolean | ((token: Tokens.HTML | Tokens.Tag) => string);
@@ -221,6 +236,7 @@ export type StreamdownProps<Source extends Record<string, any> = Record<string,
         copy?: Snippet;
         download?: Snippet;
         fullscreen?: Snippet;
+        close?: Snippet;
         zoomIn?: Snippet;
         zoomOut?: Snippet;
         fitView?: Snippet;
@@ -234,6 +250,21 @@ export type StreamdownProps<Source extends Record<string, any> = Record<string,
         check?: Snippet;
     };
     extensions?: Extension[];
+    /**
+     * Extra tag names the MDX tokenizer accepts on top of PascalCase, so
+     * `<ai-thinking>**bold**</ai-thinking>` becomes a component with parsed
+     * children instead of a literal html block. Keys of `mdxComponents` are
+     * allowed automatically; nothing else lowercase is, so real HTML is untouched.
+     */
+    customTags?: string[];
+    /** Tags whose children render verbatim — no Markdown, `**` and `_` left alone. */
+    literalTagContent?: string[];
+    /**
+     * Dedent pretty-printed HTML before parsing, so a nested `<div>` indented four
+     * spaces after a blank line is not read as an indented code block. Off by
+     * default: dedenting is lossy, and `<pre>`/`<code>` bodies are never touched.
+     */
+    normalizeHtmlIndentation?: boolean;
     children?: Snippet<[{
         streamdown: StreamdownContext;
         token: GenericToken;

package/dist/context.svelte.js

@@ -19,6 +19,9 @@ export const defaultTranslations = {
         tableFormatHtml: 'HTML',
         tableFormatCsv: 'CSV',
         tableFormatTsv: 'TSV',
+        tableFullscreen: 'Expand table',
+        exitTableFullscreen: 'Collapse table',
+        table: 'Table',
         downloadDiagram: 'Download diagram',
         downloadDiagramPng: 'PNG',
         downloadDiagramSvg: 'SVG',

package/dist/index.d.ts

@@ -2,7 +2,8 @@ export { default as Streamdown } from './Streamdown.svelte';
 export { useStreamdown, defaultTranslations, type StreamdownProps, type Translations, type Controls, type CodeControls, type TableControls, type MermaidControls, type ResolvedControls } from './context.svelte.js';
 export { extractTableData, tableDataToCSV, tableDataToTSV, tableDataToMarkdown, tableDataToHTML, type TableData, type CsvSeparator } from './utils/table-export.js';
 export { theme, shadcnTheme, mergeTheme, type Theme } from './theme.js';
-export { type CodeToken, type Extension, type StreamdownToken, lex, parseBlocks } from './marked/index.js';
-export { parseIncompleteMarkdown, type Plugin, IncompleteMarkdownParser } from './utils/parse-incomplete-markdown.js';
+export { type CodeToken, type Extension, type StreamdownToken, type TagMatchers, compileTags, lex, parseBlocks } from './marked/index.js';
+export { normalizeHtmlIndentation } from './utils/normalize-html-indentation.js';
+export { parseIncompleteMarkdown, type Plugin, type CompleterOptions, IncompleteMarkdownParser } from './utils/parse-incomplete-markdown.js';
 export { defineLanguage, type LanguageDefinition } from '@tanstack/highlight';
 export type { HighlightTheme } from '@tanstack/highlight/theme';

package/dist/index.js

@@ -2,6 +2,7 @@ export { default as Streamdown } from './Streamdown.svelte';
 export { useStreamdown, defaultTranslations } from './context.svelte.js';
 export { extractTableData, tableDataToCSV, tableDataToTSV, tableDataToMarkdown, tableDataToHTML } from './utils/table-export.js';
 export { theme, shadcnTheme, mergeTheme } from './theme.js';
-export { lex, parseBlocks } from './marked/index.js';
+export { compileTags, lex, parseBlocks } from './marked/index.js';
+export { normalizeHtmlIndentation } from './utils/normalize-html-indentation.js';
 export { parseIncompleteMarkdown, IncompleteMarkdownParser } from './utils/parse-incomplete-markdown.js';
 export { defineLanguage } from '@tanstack/highlight';

package/dist/marked/index.d.ts

@@ -10,7 +10,7 @@ import { type TableToken, type THead, type TBody, type TFoot, type THeadRow, typ
 import { type DescriptionDetailToken, type DescriptionListToken, type DescriptionTermToken, type DescriptionToken } from './marked-dl.js';
 import { type AlignToken } from './marked-align.js';
 import { type CitationToken } from './marked-citations.js';
-import { type MdxToken } from './marked-mdx.js';
+import { type MdxToken, type TagMatchers } from './marked-mdx.js';
 export type GenericToken = {
     type: string;
     raw: string;
@@ -32,7 +32,7 @@ export type CodeToken = Tokens.Code & {
 };
 export type StreamdownToken = Exclude<MarkedToken, Tokens.List | Tokens.ListItem | Tokens.Table | Tokens.Code> | CodeToken | ListToken | ListItemToken | MathToken | AlertToken | FootnoteToken | SubSupToken | BrToken | HrToken | TableToken | THead | TBody | TFoot | THeadRow | TRow | TH | TD | DescriptionListToken | DescriptionToken | DescriptionDetailToken | DescriptionTermToken | AlignToken | CitationToken | MdxToken;
 export type { TableToken, THead, TBody, TFoot, THeadRow, TRow, TH, TD } from './marked-table.js';
-export declare const lex: (markdown: string, extensions?: Extension[]) => StreamdownToken[];
+export declare const lex: (markdown: string, extensions?: Extension[], tags?: TagMatchers) => StreamdownToken[];
 /**
  * Opaque incremental state for `parseBlocks`. Create one per Streamdown
  * instance (or per simulated stream) and pass it on every call: append-only
@@ -65,5 +65,6 @@ export type ParseBlocksCache = {
     lastUpdate: 'first' | 'stream' | 'bulk';
 };
 export declare const createParseBlocksCache: () => ParseBlocksCache;
-export declare const parseBlocks: (markdown: string, extensions?: Extension[], cache?: ParseBlocksCache) => string[];
-export type { MathToken, AlertToken, FootnoteToken, SubSupToken, BrToken, HrToken, AlignToken, CitationToken, MdxToken };
+export declare const parseBlocks: (markdown: string, extensions?: Extension[], cache?: ParseBlocksCache, tags?: TagMatchers) => string[];
+export { compileTags, DEFAULT_TAGS } from './marked-mdx.js';
+export type { TagMatchers, MathToken, AlertToken, FootnoteToken, SubSupToken, BrToken, HrToken, AlignToken, CitationToken, MdxToken };

package/dist/marked/index.js

@@ -10,13 +10,14 @@ import { markedTable } from './marked-table.js';
 import { markedDl } from './marked-dl.js';
 import { markedAlign } from './marked-align.js';
 import { markedCitations } from './marked-citations.js';
-import { markedMdx } from './marked-mdx.js';
-// Default plugin sets, in registration order. Hoisted so the options object
-// (and the regexes/closures inside each plugin) is built once, not per chunk.
-// The tokenizers are stateless at creation time — per-document state lives on
-// the Lexer instance (e.g. footnotes maps, reference-link defs), so a fresh
-// Lexer per call keeps documents isolated while the options are shared.
-const DEFAULT_LEX_EXTENSIONS = [
+import { markedMdx, DEFAULT_TAGS } from './marked-mdx.js';
+// Default plugin sets, in registration order. Built behind the options cache
+// below, so the options object (and the regexes/closures inside each plugin) is
+// built once per allowlist, not per chunk. The tokenizers are stateless at
+// creation time — per-document state lives on the Lexer instance (e.g. footnotes
+// maps, reference-link defs), so a fresh Lexer per call keeps documents isolated
+// while the options are shared.
+const defaultLexExtensions = (tags) => [
     markedHr,
     markedTable,
     ...markedFootnote(),
@@ -29,15 +30,15 @@ const DEFAULT_LEX_EXTENSIONS = [
     markedDl,
     markedAlign,
     markedCitations,
-    markedMdx
+    markedMdx(tags)
 ];
-const DEFAULT_BLOCK_EXTENSIONS = [
+const defaultBlockExtensions = (tags) => [
     markedHr,
     ...markedFootnote(),
     markedDl,
     markedTable,
     markedAlign,
-    markedMdx
+    markedMdx(tags)
 ];
 class StreamdownTokenizer extends Tokenizer {
     /**
@@ -104,38 +105,25 @@ const parseExtensions = (...extensions) => {
     });
     return options;
 };
-// Options objects are reusable across Lexer instances; cache them per
-// user-extension array (props are referentially stable across chunks) so the hot
-// path skips rebuilding ~20 tokenizer registrations on every streamed chunk. The
-// cached object carries one shared Tokenizer whose `lexer` back-pointer marked
-// re-stamps per Lexer construction — safe only because lexing is synchronous and
-// never re-entrant across documents.
-const DEFAULT_LEX_OPTIONS = parseExtensions(...DEFAULT_LEX_EXTENSIONS);
-const DEFAULT_BLOCK_OPTIONS = parseExtensions(...DEFAULT_BLOCK_EXTENSIONS);
-const lexOptionsCache = new WeakMap();
-const blockOptionsCache = new WeakMap();
-const getLexOptions = (extensions) => {
-    if (extensions.length === 0)
-        return DEFAULT_LEX_OPTIONS;
-    let options = lexOptionsCache.get(extensions);
-    if (!options) {
-        options = parseExtensions(...DEFAULT_LEX_EXTENSIONS, ...extensions);
-        lexOptionsCache.set(extensions, options);
-    }
-    return options;
-};
-const getBlockOptions = (extensions) => {
-    if (extensions.length === 0)
-        return DEFAULT_BLOCK_OPTIONS;
-    let options = blockOptionsCache.get(extensions);
-    if (!options) {
-        options = parseExtensions(...DEFAULT_BLOCK_EXTENSIONS, ...extensions.filter(({ level, applyInBlockParsing }) => level === 'block' && applyInBlockParsing));
-        blockOptionsCache.set(extensions, options);
-    }
+// Stand-in key for "no user extensions" so both cache levels stay WeakMaps —
+// the `extensions = []` default allocates a fresh array on every call.
+const NO_EXTENSIONS = [];
+const cached = (cache, tags, extensions, build) => {
+    let byExtensions = cache.get(tags);
+    if (!byExtensions)
+        cache.set(tags, (byExtensions = new WeakMap()));
+    const key = extensions.length === 0 ? NO_EXTENSIONS : extensions;
+    let options = byExtensions.get(key);
+    if (!options)
+        byExtensions.set(key, (options = build()));
     return options;
 };
-export const lex = (markdown, extensions = []) => {
-    return new Lexer(getLexOptions(extensions))
+const lexOptionsCache = new WeakMap();
+const blockOptionsCache = new WeakMap();
+const getLexOptions = (extensions, tags) => cached(lexOptionsCache, tags, extensions, () => parseExtensions(...defaultLexExtensions(tags), ...extensions));
+const getBlockOptions = (extensions, tags) => cached(blockOptionsCache, tags, extensions, () => parseExtensions(...defaultBlockExtensions(tags), ...extensions.filter(({ level, applyInBlockParsing }) => level === 'block' && applyInBlockParsing)));
+export const lex = (markdown, extensions = [], tags = DEFAULT_TAGS) => {
+    return new Lexer(getLexOptions(extensions, tags))
         .lex(markdown)
         .filter((token) => token.type !== 'space' && token.type !== 'footnote');
 };
@@ -182,7 +170,7 @@ class SplitLexer extends Lexer {
         return tokens;
     }
 }
-const blockTokensOf = (markdown, extensions) => new SplitLexer(getBlockOptions(extensions)).blockTokens(markdown, []);
+const blockTokensOf = (markdown, extensions, tags) => new SplitLexer(getBlockOptions(extensions, tags)).blockTokens(markdown, []);
 /**
  * Is `markdown` an append to `cache.content`?
  *
@@ -237,7 +225,7 @@ const updateKind = (isAppend, previousLength, length) => {
         return previousLength === 0 ? 'first' : 'bulk';
     return length - previousLength > BULK_APPEND_CHARS ? 'bulk' : 'stream';
 };
-export const parseBlocks = (markdown, extensions = [], cache) => {
+export const parseBlocks = (markdown, extensions = [], cache, tags = DEFAULT_TAGS) => {
     // Whether this call extends the content the cache already described — decided
     // by the same probe the fast path uses, so the contiguity fallback below still
     // counts as an append for the animation's purposes.
@@ -257,7 +245,7 @@ export const parseBlocks = (markdown, extensions = [], cache) => {
         const offset = cache.offsets[cut];
         if (appendable(markdown, cache, cut, offset)) {
             isAppend = true;
-            const tailTokens = blockTokensOf(markdown.slice(offset), extensions);
+            const tailTokens = blockTokensOf(markdown.slice(offset), extensions, tags);
             let tailLength = 0;
             for (const token of tailTokens)
                 tailLength += token.raw.length;
@@ -295,7 +283,7 @@ export const parseBlocks = (markdown, extensions = [], cache) => {
         }
     }
     // Full parse (first call, non-append update, or contiguity fallback).
-    const tokens = blockTokensOf(markdown, extensions);
+    const tokens = blockTokensOf(markdown, extensions, tags);
     if (cache) {
         cache.raws.length = 0;
         cache.keep.length = 0;
@@ -329,3 +317,4 @@ export const parseBlocks = (markdown, extensions = [], cache) => {
     }
     return blocks;
 };
+export { compileTags, DEFAULT_TAGS } from './marked-mdx.js';

package/dist/marked/marked-mdx.d.ts

@@ -9,4 +9,30 @@ export type MdxToken = {
     tokens?: Token[];
     text?: string;
 };
-export declare const markedMdx: Extension;
+/**
+ * The tag vocabulary the mdx tokenizer and the streaming completer share,
+ * compiled once per allowlist (upstream fb9f97c/b392fbe). PascalCase is always
+ * in it; lowercase/hyphenated names only ever come from `customTags` /
+ * `mdxComponents`, so this can never swallow a real HTML tag the way a blanket
+ * `/^<([a-zA-Z][\w-]*)/` would.
+ */
+export type TagMatchers = {
+    /** `<Tag …/>` */
+    selfClosing: RegExp;
+    /** `<Tag …>` */
+    openTag: RegExp;
+    /** `</Tag>` */
+    closeTag: RegExp;
+    /** `<Tag …>…</Tag>`, both ends on one line */
+    complete: RegExp;
+    /** a bare allowed tag name, anchored */
+    name: RegExp;
+    /** the non-PascalCase names, kept as strings so a half-typed one can be prefix-matched */
+    names: string[];
+    /** tags whose children are emitted as one literal text token */
+    literal: Set<string>;
+};
+export declare const compileTags: (customTags?: string[], literalTagContent?: string[]) => TagMatchers;
+/** PascalCase only — what every call that passes no allowlist gets. */
+export declare const DEFAULT_TAGS: TagMatchers;
+export declare const markedMdx: (tags?: TagMatchers) => Extension;

package/dist/marked/marked-mdx.js

@@ -1,4 +1,26 @@
 import { Lexer } from 'marked';
+const escapeName = (name) => name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+// Attribute names take hyphens (`data-id`), not just word characters.
+const ATTRS = '((?:\\s+[\\w-]+=(?:"[^"]*"|{[^}]*}))*)';
+export const compileTags = (customTags, literalTagContent) => {
+    // A tag whose content is literal is a custom tag by definition: listing it
+    // once in `literalTagContent` must be enough, without repeating it in
+    // `customTags`.
+    const allowed = [...new Set([...(customTags ?? []), ...(literalTagContent ?? [])])];
+    const names = ['[A-Z][a-zA-Z0-9]*', ...allowed.map(escapeName)].join('|');
+    const tag = `(${names})`;
+    return {
+        selfClosing: new RegExp(`^<${tag}${ATTRS}\\s*/>`),
+        openTag: new RegExp(`^<${tag}${ATTRS}\\s*>`),
+        closeTag: new RegExp(`^</${tag}>`),
+        complete: new RegExp(`^<${tag}${ATTRS}\\s*>.*?</\\1>`),
+        name: new RegExp(`^(?:${names})$`),
+        names: allowed,
+        literal: new Set(literalTagContent ?? [])
+    };
+};
+/** PascalCase only — what every call that passes no allowlist gets. */
+export const DEFAULT_TAGS = compileTags();
 const defaultLexer = new Lexer({ gfm: true });
 const defaultTokenizer = defaultLexer.options.tokenizer;
 /**
@@ -8,7 +30,7 @@ const defaultTokenizer = defaultLexer.options.tokenizer;
 function parseAttributes(attributeString) {
     const attributes = {};
     // Pattern: attr="value" or attr={value}
-    const attrPattern = /(\w+)=(?:"([^"]*)"|{([^}]*)})/g;
+    const attrPattern = /([\w-]+)=(?:"([^"]*)"|{([^}]*)})/g;
     let match;
     while ((match = attrPattern.exec(attributeString)) !== null) {
         const [, name, stringValue, expressionValue] = match;
@@ -38,16 +60,17 @@ function parseAttributes(attributeString) {
     }
     return attributes;
 }
-export const markedMdx = {
+export const markedMdx = (tags = DEFAULT_TAGS) => ({
     name: 'mdx',
     level: 'block',
     applyInBlockParsing: true,
     tokenizer(src) {
-        // Match MDX component tags (must start with capital letter)
+        // Match a tag from the allowlist (PascalCase plus anything `customTags` /
+        // `mdxComponents` added).
         // Self-closing: <Component attr="value" />
         // With children: <Component attr="value">content</Component>
         // First try self-closing tag
-        const selfClosingMatch = src.match(/^<([A-Z][a-zA-Z0-9]*)((?:\s+\w+=(?:"[^"]*"|{[^}]*}))*)\s*\/>/);
+        const selfClosingMatch = src.match(tags.selfClosing);
         if (selfClosingMatch) {
             const [raw, tagName, attributeString] = selfClosingMatch;
             const attributes = parseAttributes(attributeString);
@@ -60,7 +83,7 @@ export const markedMdx = {
             };
         }
         // Try paired tag with children
-        const openTagMatch = src.match(/^<([A-Z][a-zA-Z0-9]*)((?:\s+\w+=(?:"[^"]*"|{[^}]*}))*)\s*>/);
+        const openTagMatch = src.match(tags.openTag);
         if (openTagMatch) {
             const [openTag, tagName, attributeString] = openTagMatch;
             const attributes = parseAttributes(attributeString);
@@ -106,8 +129,14 @@ export const markedMdx = {
                 const contentStart = openTag.length;
                 const content = src.substring(contentStart, closingIndex);
                 const raw = src.substring(0, closingIndex + closingTag.length);
-                // Parse children as markdown
-                const tokens = content.trim() ? this.lexer.blockTokens(content.trim(), []) : [];
+                // Parse children as markdown — unless the tag is in `literalTagContent`,
+                // where the inner text is data, not Markdown (upstream b392fbe): one
+                // text token, nothing escaped, `**` and `_` left alone.
+                const tokens = tags.literal.has(tagName)
+                    ? [{ type: 'text', raw: content, text: content }]
+                    : content.trim()
+                        ? this.lexer.blockTokens(content.trim(), [])
+                        : [];
                 return {
                     type: 'mdx',
                     raw,
@@ -121,4 +150,4 @@ export const markedMdx = {
         }
         return undefined;
     }
-};
+});

package/dist/theme.d.ts

@@ -44,6 +44,7 @@ export declare const theme: {
         language: string;
         pre: string;
         line: string;
+        lineNumber: string;
     };
     codespan: {
         base: string;
@@ -68,6 +69,7 @@ export declare const theme: {
     table: {
         base: string;
         table: string;
+        expanded: string;
     };
     thead: {
         base: string;
@@ -196,6 +198,7 @@ export declare const shadcnTheme: {
         language: string;
         pre: string;
         line: string;
+        lineNumber: string;
     };
     codespan: {
         base: string;
@@ -220,6 +223,7 @@ export declare const shadcnTheme: {
     table: {
         base: string;
         table: string;
+        expanded: string;
     };
     thead: {
         base: string;
@@ -353,6 +357,7 @@ export declare const mergeTheme: (customTheme?: DeepPartialTheme, baseTheme?: "t
         language: string;
         pre: string;
         line: string;
+        lineNumber: string;
     };
     codespan: {
         base: string;
@@ -377,6 +382,7 @@ export declare const mergeTheme: (customTheme?: DeepPartialTheme, baseTheme?: "t
     table: {
         base: string;
         table: string;
+        expanded: string;
     };
     thead: {
         base: string;

package/dist/theme.js

@@ -44,7 +44,10 @@ export const theme = {
         buttons: 'flex items-center gap-2',
         language: 'ml-1 font-mono lowercase',
         pre: 'overflow-x-auto font-mono p-0 bg-gray-100/40',
-        line: 'block'
+        line: 'block',
+        // Gutter appearance only; the counter itself is a global rule in
+        // Streamdown.svelte (see the comment there) so numbers work without Tailwind.
+        lineNumber: 'before:inline-block before:w-8 before:pr-3 before:text-right before:text-gray-400 before:select-none'
     },
     codespan: {
         base: 'bg-gray-100 rounded px-1.5 py-0.5 font-mono text-[0.9em]'
@@ -68,7 +71,10 @@ export const theme = {
     },
     table: {
         base: 'overflow-x-auto max-w-full my-4 border border-gray-200 rounded-lg',
-        table: 'w-full border-collapse min-w-full'
+        table: 'w-full border-collapse min-w-full',
+        // Added to `base` while fullscreen; the fixed positioning itself comes from
+        // the global [data-expanded='true'] rule.
+        expanded: 'overflow-auto bg-white p-2 pt-10 shadow-2xl'
     },
     thead: {
         base: 'bg-gray-200/80'
@@ -196,7 +202,8 @@ export const shadcnTheme = {
         buttons: 'flex items-center gap-2',
         language: 'ml-1 font-mono lowercase',
         pre: 'overflow-x-auto font-mono p-0 bg-muted/40',
-        line: 'block '
+        line: 'block ',
+        lineNumber: 'before:inline-block before:w-8 before:pr-3 before:text-right before:text-muted-foreground before:select-none'
     },
     codespan: {
         base: 'bg-muted rounded px-1.5 py-0.5 font-mono text-foreground text-[0.9em]'
@@ -220,7 +227,8 @@ export const shadcnTheme = {
     },
     table: {
         base: 'overflow-x-auto max-w-full my-4 rounded-lg border border-border',
-        table: 'w-full border-collapse min-w-full'
+        table: 'w-full border-collapse min-w-full',
+        expanded: 'overflow-auto bg-background p-2 pt-10 shadow-2xl'
     },
     thead: {
         base: 'bg-muted/80'

package/dist/utils/expand.svelte.d.ts

@@ -0,0 +1,21 @@
+/**
+ * The fullscreen half of the mermaid expand behaviour (Mermaid.svelte:264-267)
+ * without panzoom's `expand()`, which is entangled with `zoomToFit` and a FLIP
+ * animation a table has no use for: state, Escape and focus only. The
+ * `position: fixed` comes from the global `[data-expanded='true']` rule in
+ * Streamdown.svelte.
+ *
+ * The flag lives in the caller (so the markup can drive `role`/`aria-*`/the
+ * expanded class from it); this only drives it.
+ *
+ * // ponytail: no open/close animation. Upgrade path: measure the target rect
+ * // either side of `set()` and run the same first/last invert panzoom does,
+ * // once that block is untangled from the zoom state it reads today.
+ */
+export declare const useExpand: (opts: {
+    expanded: boolean;
+    getTarget: () => HTMLElement | null | undefined;
+}) => {
+    readonly expanded: boolean;
+    toggle: (from?: HTMLElement | null) => void;
+};