svelte-streamdown 4.1.1 → 4.2.0

package/dist/utils/expand.svelte.js

@@ -0,0 +1,46 @@
+import { useKeyDown } from './useKeyDown.svelte.js';
+/**
+ * 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 const useExpand = (opts) => {
+    // The control that opened the overlay, so focus can return to it on close.
+    let trigger = null;
+    const set = (next) => {
+        const target = opts.getTarget();
+        opts.expanded = next;
+        if (target)
+            target.dataset.expanded = String(next);
+        if (next)
+            target?.focus();
+        else
+            trigger?.focus();
+    };
+    useKeyDown({
+        keys: ['Escape'],
+        get isActive() {
+            return opts.expanded;
+        },
+        callback: () => set(false)
+    });
+    return {
+        get expanded() {
+            return opts.expanded;
+        },
+        toggle: (from) => {
+            if (!opts.expanded)
+                trigger = from ?? null;
+            set(!opts.expanded);
+        }
+    };
+};

package/dist/utils/line-numbers.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Line-number options carried by a fence's info string. `token.lang` is the first
+ * word and `token.meta` the rest since 4.0.1, so this only ever sees the rest —
+ * `startLine=10 noLineNumbers` out of a ```ts fence.
+ *
+ * `lineNumbers` / `noLineNumbers` are upstream streamdown's per-block escape
+ * hatches; ours flip the `lineNumbers` prop either way because our prop defaults
+ * to false (upstream defaults to on).
+ *
+ * The rendering side is CSS counters on the per-line span that is already there
+ * (`counter-increment` + a `::before` printing `counter(sd-line)`, in the global
+ * block of Streamdown.svelte; `counter-reset` inline on the <pre> so `startLine`
+ * can move it): no element per line, and a pseudo-element's content is never part
+ * of a selection, so copy/download — which read the token text anyway — can never
+ * pick numbers up. The counter rule cannot live in the theme like the gutter's
+ * width and colour (`theme.code.lineNumber`), because a Tailwind
+ * `before:content-[counter(sd-line)]` class only exists if the consumer's
+ * Tailwind scanned this package.
+ */
+export declare const resolveLineNumbers: (meta: string | undefined, enabled: boolean) => {
+    enabled: boolean;
+    start: number;
+};

package/dist/utils/line-numbers.js

@@ -0,0 +1,30 @@
+/**
+ * Line-number options carried by a fence's info string. `token.lang` is the first
+ * word and `token.meta` the rest since 4.0.1, so this only ever sees the rest —
+ * `startLine=10 noLineNumbers` out of a ```ts fence.
+ *
+ * `lineNumbers` / `noLineNumbers` are upstream streamdown's per-block escape
+ * hatches; ours flip the `lineNumbers` prop either way because our prop defaults
+ * to false (upstream defaults to on).
+ *
+ * The rendering side is CSS counters on the per-line span that is already there
+ * (`counter-increment` + a `::before` printing `counter(sd-line)`, in the global
+ * block of Streamdown.svelte; `counter-reset` inline on the <pre> so `startLine`
+ * can move it): no element per line, and a pseudo-element's content is never part
+ * of a selection, so copy/download — which read the token text anyway — can never
+ * pick numbers up. The counter rule cannot live in the theme like the gutter's
+ * width and colour (`theme.code.lineNumber`), because a Tailwind
+ * `before:content-[counter(sd-line)]` class only exists if the consumer's
+ * Tailwind scanned this package.
+ */
+export const resolveLineNumbers = (meta, enabled) => {
+    // The tests are case-sensitive and `noLineNumbers` spells the word with a
+    // capital L, so the positive test can never match it; checked first anyway.
+    const on = meta
+        ? /\bnoLineNumbers\b/.test(meta)
+            ? false
+            : /\blineNumbers\b/.test(meta) || enabled
+        : enabled;
+    const start = meta?.match(/\bstartLine=(\d+)\b/);
+    return { enabled: on, start: start ? Number(start[1]) : 1 };
+};

package/dist/utils/normalize-html-indentation.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Four leading spaces after a blank line is an indented code block, HTML or not.
+ * A pretty-printed document therefore splits into html / code / html and the
+ * indented part renders as source in a code box (upstream 7f9127b).
+ *
+ * This strips the indentation off tag lines only. It is lossy inside `<pre>` and
+ * `<code>`, where whitespace is content, so those bodies are skipped and the
+ * whole thing is behind the opt-in `normalizeHtmlIndentation` prop.
+ */
+export declare const normalizeHtmlIndentation: (content: string) => string;

package/dist/utils/normalize-html-indentation.js

@@ -0,0 +1,52 @@
+/**
+ * Four leading spaces after a blank line is an indented code block, HTML or not.
+ * A pretty-printed document therefore splits into html / code / html and the
+ * indented part renders as source in a code box (upstream 7f9127b).
+ *
+ * This strips the indentation off tag lines only. It is lossy inside `<pre>` and
+ * `<code>`, where whitespace is content, so those bodies are skipped and the
+ * whole thing is behind the opt-in `normalizeHtmlIndentation` prop.
+ */
+// The indentation of a line whose first non-space character opens a tag, a
+// closing tag, or a comment/doctype. Anchored, and the tag itself is a lookahead
+// so the match is exactly the whitespace to drop.
+const INDENTED_TAG = /^[ \t]+(?=<[a-zA-Z!/])/;
+// Inside these, indentation is content. `<pre class=…>` and `<code>` both match.
+const LITERAL_OPEN = /<(?:pre|code)[\s/>]/gi;
+const LITERAL_CLOSE = /<\/(?:pre|code)>/gi;
+const count = (line, re) => {
+    re.lastIndex = 0;
+    let n = 0;
+    while (re.exec(line))
+        n++;
+    return n;
+};
+export const normalizeHtmlIndentation = (content) => {
+    // Only documents that start with a tag; anything else is Markdown whose
+    // indentation we have no business touching. Returned by identity so a Svelte
+    // `$derived` over it does not churn.
+    let i = 0;
+    while (i < content.length && (content[i] === ' ' || content[i] === '\n' || content[i] === '\t'))
+        i++;
+    if (content[i] !== '<')
+        return content;
+    const lines = content.split('\n');
+    let literalDepth = 0;
+    let changed = false;
+    for (let l = 0; l < lines.length; l++) {
+        const line = lines[l];
+        if (literalDepth === 0) {
+            const match = INDENTED_TAG.exec(line);
+            if (match) {
+                lines[l] = line.slice(match[0].length);
+                changed = true;
+            }
+        }
+        if (line.indexOf('<') !== -1) {
+            literalDepth += count(line, LITERAL_OPEN) - count(line, LITERAL_CLOSE);
+            if (literalDepth < 0)
+                literalDepth = 0;
+        }
+    }
+    return changed ? lines.join('\n') : content;
+};

package/dist/utils/parse-incomplete-markdown.d.ts

@@ -1,4 +1,16 @@
 import { type OpenFence } from './fence.js';
+import { type TagMatchers } from '../marked/marked-mdx.js';
+/** Per-call knobs `Block.svelte` threads down from the Streamdown context. */
+export type CompleterOptions = {
+    /** The tag allowlist the lexer uses, so the completer never disagrees with it. */
+    tags?: TagMatchers;
+    /**
+     * Is this the block still being streamed into? Only there may a half-typed
+     * HTML tag be stripped — a sealed paragraph reading `if a <b then` must keep
+     * its tail forever (upstream 3e6a77d strips unconditionally; we do not).
+     */
+    live?: boolean;
+};
 export interface Plugin {
     name: string;
     pattern?: RegExp;
@@ -24,6 +36,8 @@ interface HandlerPayload {
 }
 interface ParseState {
     currentLine: number;
+    /** How many lines the text has, so a plugin can tell the last one. */
+    lineCount: number;
     context: 'normal' | 'list' | 'blockquote' | 'descriptionList';
     blockingContexts: Set<'code' | 'math' | 'center' | 'right'>;
     /** Delimiter that closes the open math block: '$$' or '\]'. */
@@ -40,18 +54,18 @@ interface ParseState {
         tagName: string;
         lineIndex: number;
     }>;
-    mdxLineStates?: Array<{
-        inMdx: boolean;
-        incompletePositions: number[];
-    }>;
+    /** Tag allowlist for this call (see CompleterOptions). */
+    tags: TagMatchers;
+    /** Is this the block still streaming (see CompleterOptions)? */
+    live: boolean;
 }
 export declare class IncompleteMarkdownParser {
     private plugins;
     private state;
     setState: (state: Partial<ParseState>) => void;
     constructor(plugins?: Plugin[]);
-    parse(text: string): string;
+    parse(text: string, options?: CompleterOptions): string;
     static createDefaultPlugins(): Plugin[];
 }
-export declare const parseIncompleteMarkdown: (text: string) => string;
+export declare const parseIncompleteMarkdown: (text: string, options?: CompleterOptions) => string;
 export {};

package/dist/utils/parse-incomplete-markdown.js

@@ -1,11 +1,15 @@
 import { closingFence, trackFence } from './fence.js';
+import { DEFAULT_TAGS } from '../marked/marked-mdx.js';
 export class IncompleteMarkdownParser {
     plugins = [];
     state = {
         currentLine: 0,
+        lineCount: 0,
         context: 'normal',
         blockingContexts: new Set(),
-        lineContexts: []
+        lineContexts: [],
+        tags: DEFAULT_TAGS,
+        live: true
     };
     setState = (state) => {
         this.state = { ...this.state, ...state };
@@ -14,15 +18,18 @@ export class IncompleteMarkdownParser {
         this.plugins = plugins;
     }
     // Main parsing methods
-    parse(text) {
+    parse(text, options) {
         if (!text || typeof text !== 'string') {
             return text;
         }
         this.state = {
             currentLine: 0,
+            lineCount: 0,
             context: 'normal',
             blockingContexts: new Set(),
-            lineContexts: []
+            lineContexts: [],
+            tags: options?.tags ?? DEFAULT_TAGS,
+            live: options?.live ?? true
         };
         let result = text;
         // Execute preprocess hooks for all plugins
@@ -50,6 +57,7 @@ export class IncompleteMarkdownParser {
         // Split into lines for processing
         const lines = result.split('\n');
         const processedLines = [...lines];
+        this.state.lineCount = processedLines.length;
         // Process each line with each plugin
         for (let i = 0; i < processedLines.length; i++) {
             this.state.currentLine = i;
@@ -99,7 +107,59 @@ export class IncompleteMarkdownParser {
     static createDefaultPlugins() {
         return [
             {
-                // Runs first: in a list item a '>' before a number is a comparison
+                // `Hello <div cla` and `<div>content</di` render as literal source on
+                // every chunk until the `>` lands (upstream 3e6a77d). Strip that tail —
+                // but only on the block still being streamed and only when the name is
+                // really a tag. Upstream strips `/<[a-zA-Z\/][^>]*$/` unconditionally,
+                // which on our per-block completer would eat the tail of a sealed
+                // paragraph reading `if a <b then` for good.
+                // Registered first so the mdx plugin below never sees a half-typed tag.
+                name: 'incompleteHtmlTag',
+                // Cheap gate: a line with no '<' can never match.
+                pattern: /</,
+                skipInBlockTypes: ['code', 'math'],
+                handler: ({ line, state }) => {
+                    // Only the streaming tail: the live block's LAST line. An unfinished
+                    // tag on an earlier line can never complete, and `live` is merely
+                    // "last block", so `Use the <div element to wrap it.` in a finished
+                    // document must keep its text. The patterns below are `$`-anchored,
+                    // so matching on the last line means matching at the end of the text.
+                    if (!state.live || state.currentLine !== state.lineCount - 1)
+                        return line;
+                    // The incomplete tag is the last '<' with no '>' after it, so anchor
+                    // there instead of letting `[^>]*$` backtrack from every '<' on the
+                    // line (that is quadratic on a line full of complete tags).
+                    const start = line.lastIndexOf('<');
+                    if (start === -1)
+                        return line;
+                    // `</` with the name not yet typed is unambiguous — no prose ends a
+                    // line that way — and it is the one frame a name check cannot catch.
+                    if (start === line.length - 2 && line[start + 1] === '/') {
+                        return isWithinCompleteInlineCode(line, start) ? line : line.slice(0, start);
+                    }
+                    const match = incompleteHtmlTag.exec(line.slice(start));
+                    if (!match)
+                        return line;
+                    const name = match[1];
+                    if (!isTagPrefix(name, state.tags))
+                        return line;
+                    // One-letter lowercase elements (a, b, i, p, q, s, u) are also how prose
+                    // looks: `if a <b then` on the last line of a finished document must keep
+                    // its text, and `live` cannot tell finished from streaming. Such a letter
+                    // only counts as a tag once an attribute has started (`<a href="`). An
+                    // uppercase letter (`<C`) can only be a component prefix, never prose.
+                    if (name.length === 1 && name === name.toLowerCase() && !match[0].includes('='))
+                        return line;
+                    // A '<' inside a closed code span is content, not a tag (a725579).
+                    if (isWithinCompleteInlineCode(line, start))
+                        return line;
+                    // No trimEnd (upstream does): 4.1.1 cut PascalCase tags at exactly
+                    // this offset, so `Some text <Comp` keeps rendering as `Some text `.
+                    return line.slice(0, start);
+                }
+            },
+            {
+                // In a list item a '>' before a number is a comparison
                 // ('- > 25: rich'), but marked reads it as a nested blockquote. Escaping it
                 // keeps the text, and the escape renders as a plain '>' (4fffb9f).
                 // `pattern` is only a cheap gate — a line whose first non-space character is
@@ -843,24 +903,21 @@ export class IncompleteMarkdownParser {
                 skipInBlockTypes: ['code', 'math', 'center', 'right'],
                 preprocess: ({ text, state }) => {
                     // Track MDX component states across the entire text
+                    const tags = state.tags;
                     const lines = text.split('\n');
                     const openTags = [];
-                    let mdxLineStates = [];
                     for (let i = 0; i < lines.length; i++) {
                         // Lines inside code fences or math blocks are opaque content: MDX-looking
                         // tags there must not open/close/track components.
                         const lineCtx = state.lineContexts?.[i];
                         if (lineCtx?.code || lineCtx?.math) {
-                            mdxLineStates[i] = { inMdx: false, incompletePositions: [] };
                             continue;
                         }
                         const line = lines[i];
-                        let inMdx = false;
-                        let incompletePositions = [];
                         // Find all MDX tags in the line
                         let searchPos = 0;
                         while (searchPos < line.length) {
-                            // Look for opening bracket with capital letter (MDX component)
+                            // Look for an opening bracket that starts an allowlisted tag
                             const tagStart = line.indexOf('<', searchPos);
                             if (tagStart === -1 || tagStart >= line.length - 1)
                                 break;
@@ -868,7 +925,7 @@ export class IncompleteMarkdownParser {
                             // Closing tag for a component opened on an earlier line. Handled
                             // inside the scan so a close that is part of a same-line complete
                             // pair (consumed below) is never double-counted against the stack.
-                            const closeTagMatch = line.substring(tagStart).match(/^<\/([A-Z][a-zA-Z0-9]*)>/);
+                            const closeTagMatch = line.substring(tagStart).match(tags.closeTag);
                             if (closeTagMatch) {
                                 const tagName = closeTagMatch[1];
                                 // Pop the innermost same-name open (LIFO) so the auto-appended
@@ -882,82 +939,38 @@ export class IncompleteMarkdownParser {
                                 searchPos = tagStart + closeTagMatch[0].length;
                                 continue;
                             }
-                            // Only match if starts with capital letter (MDX component)
-                            if (!/[A-Z]/.test(nextChar)) {
+                            // Every allowlisted name starts with a letter; cheap gate.
+                            if (!/[a-zA-Z]/.test(nextChar)) {
                                 searchPos = tagStart + 1;
                                 continue;
                             }
                             // Try to match complete self-closing tag
-                            const selfClosingMatch = line
-                                .substring(tagStart)
-                                .match(/^<([A-Z][a-zA-Z0-9]*)((?:\s+\w+=(?:"[^"]*"|{[^}]*}))*)\s*\/>/);
+                            const selfClosingMatch = line.substring(tagStart).match(tags.selfClosing);
                             if (selfClosingMatch) {
                                 searchPos = tagStart + selfClosingMatch[0].length;
                                 continue;
                             }
                             // Try to match complete opening tag with immediate closing
-                            const completeMatch = line
-                                .substring(tagStart)
-                                .match(/^<([A-Z][a-zA-Z0-9]*)((?:\s+\w+=(?:"[^"]*"|{[^}]*}))*)\s*>.*?<\/\1>/);
+                            const completeMatch = line.substring(tagStart).match(tags.complete);
                             if (completeMatch) {
                                 searchPos = tagStart + completeMatch[0].length;
                                 continue;
                             }
                             // Try to match opening tag
-                            const openTagMatch = line
-                                .substring(tagStart)
-                                .match(/^<([A-Z][a-zA-Z0-9]*)((?:\s+\w+=(?:"[^"]*"|{[^}]*}))*)\s*>/);
+                            const openTagMatch = line.substring(tagStart).match(tags.openTag);
                             if (openTagMatch) {
                                 const tagName = openTagMatch[1];
                                 openTags.push({ tagName, lineIndex: i });
-                                inMdx = true;
                                 searchPos = tagStart + openTagMatch[0].length;
                                 continue;
                             }
-                            // Check for incomplete self-closing (e.g., <Component /)
-                            const incompleteSelfClosing = line
-                                .substring(tagStart)
-                                .match(/^<([A-Z][a-zA-Z0-9]*)[^>]*\/$/);
-                            if (incompleteSelfClosing) {
-                                incompletePositions.push(tagStart);
-                                break; // This is at the end of the line
-                            }
-                            // Check for incomplete tag (no closing >) - only at end of line
-                            const incompleteTag = line
-                                .substring(tagStart)
-                                .match(/^<([A-Z][a-zA-Z0-9]*)(?:\s+[^>]*)?$/);
-                            if (incompleteTag) {
-                                incompletePositions.push(tagStart);
-                                break; // This is at the end of the line
-                            }
+                            // A tag cut off before its `>` is the last thing on the line (the
+                            // incompleteHtmlTag plugin, which ran first, strips it); scanning on
+                            // from the next character finds nothing and ends the loop.
                             searchPos = tagStart + 1;
                         }
-                        mdxLineStates[i] = { inMdx, incompletePositions };
                     }
-                    return {
-                        text,
-                        state: {
-                            mdxUnclosedTags: openTags,
-                            mdxLineStates
-                        }
-                    };
-                },
-                handler: ({ line, state }) => {
-                    // Remove incomplete MDX syntax (don't render it)
-                    const lineStates = state.mdxLineStates || [];
-                    const currentState = lineStates[state.currentLine];
-                    if (currentState?.incompletePositions && currentState.incompletePositions.length > 0) {
-                        // Process incomplete positions from right to left to preserve indices
-                        let result = line;
-                        for (let i = currentState.incompletePositions.length - 1; i >= 0; i--) {
-                            const pos = currentState.incompletePositions[i];
-                            const before = result.substring(0, pos);
-                            // Simply remove the incomplete MDX tag
-                            result = before;
-                        }
-                        return result;
-                    }
-                    return line;
+                    return { text, state: { mdxUnclosedTags: openTags } };
                 },
                 postprocess: ({ text, state }) => {
                     // Complete unclosed MDX components at the end
@@ -979,15 +992,104 @@ export class IncompleteMarkdownParser {
 // Legacy function for backward compatibility
 const defaultPlugins = IncompleteMarkdownParser.createDefaultPlugins();
 const defaultParser = new IncompleteMarkdownParser(defaultPlugins);
-export const parseIncompleteMarkdown = (text) => {
+export const parseIncompleteMarkdown = (text, options) => {
     if (!text || typeof text !== 'string') {
         return text;
     }
-    return defaultParser.parse(text);
+    return defaultParser.parse(text, options);
 };
 // Utility functions
 // Full test for the comparisonOperator plugin, whose `pattern` only gates it.
 const listItemComparison = /^(\s*(?:[-*+]|\d+[.)]) +)>(?==?\s*\$?\d)/;
+// An opening or closing tag that never got its '>', anchored at the line's last
+// '<': the name (hyphens allowed, so `</ai-thinking` is caught too), then any
+// number of COMPLETE attributes, then at most one still being typed. Upstream
+// accepts any `[^>]*` tail, which also swallows ordinary prose — `if a <b then
+// c` and `Use the <div element to wrap it.` both end in a `<name` with no '>'
+// after it. Requiring every attribute but the last to carry a quoted value is
+// what tells a half-typed tag from a sentence.
+const incompleteHtmlTag = /^<\/?([a-zA-Z][a-zA-Z0-9-]*)(?:\s+[\w-]+=(?:"[^"]*"|'[^']*'|\{[^}]*\}))*(?:\s+[\w-]*(?:=(?:"[^"]*|'[^']*|\{[^}]*)?)?)?\s*\/?$/;
+/**
+ * The HTML element names a half-typed tag may be stripped for. Deliberately a
+ * short list of what an LLM actually emits rather than the full HTML vocabulary:
+ * every name here is one the user will never mean literally at the end of a
+ * streamed line, which is what makes the strip safe. Anything else must come in
+ * through `customTags` / `mdxComponents`.
+ */
+const htmlElements = [
+    'a',
+    'abbr',
+    'b',
+    'blockquote',
+    'br',
+    'button',
+    'code',
+    'col',
+    'colgroup',
+    'dd',
+    'del',
+    'details',
+    'div',
+    'dl',
+    'dt',
+    'em',
+    'figcaption',
+    'figure',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'hr',
+    'i',
+    'iframe',
+    'img',
+    'input',
+    'ins',
+    'kbd',
+    'label',
+    'li',
+    'mark',
+    'ol',
+    'p',
+    'picture',
+    'pre',
+    'q',
+    's',
+    'samp',
+    'section',
+    'small',
+    'source',
+    'span',
+    'strong',
+    'sub',
+    'summary',
+    'sup',
+    'table',
+    'tbody',
+    'td',
+    'tfoot',
+    'th',
+    'thead',
+    'tr',
+    'u',
+    'ul',
+    'video'
+];
+// A tag arrives one character at a time, so `<d`, `<di` and `<div` must all be
+// recognised or the raw text flashes for a chunk or two anyway. Every prefix of
+// every name above, precomputed — ~250 entries, one Set lookup per probe.
+const htmlPrefixes = new Set();
+for (const element of htmlElements) {
+    for (let i = 1; i <= element.length; i++)
+        htmlPrefixes.add(element.slice(0, i));
+}
+/** Could `name` still grow into a tag we are allowed to strip? */
+const isTagPrefix = (name, tags) => htmlPrefixes.has(name.toLowerCase()) ||
+    // PascalCase is prefix-closed by construction, so this covers `<MyComp` too.
+    tags.name.test(name) ||
+    tags.names.some((tag) => tag.startsWith(name));
 // Emphasis/code markers, as a set so inlineCitation can scan a cell for them
 // without building a substring per bracket.
 const formattingChars = new Set(['*', '~', '`', '_']);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svelte-streamdown",
-	"version": "4.1.1",
+	"version": "4.2.0",
 	"packageManager": "pnpm@10.32.1",
 	"repository": {
 		"type": "git",