markstream-svelte 0.0.6 → 0.1.0-beta.2

package/dist/components/CodeBlockNode.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { CodeBlockMonacoOptions, CodeBlockMonacoTheme } from '../types/monaco';
+import type { CodeBlockOptions, CodeBlockTheme, CodeBlockThemeProp, CodeBlockThemes } from '../types/codeBlock';
 import type { SvelteRenderableNode, SvelteRenderContext } from './shared/node-helpers';
 type Props = {
     node: SvelteRenderableNode;
@@ -6,10 +6,11 @@ type Props = {
     isDark?: boolean | undefined;
     loading?: boolean | undefined;
     stream?: boolean | undefined;
-    darkTheme?: CodeBlockMonacoTheme | undefined;
-    lightTheme?: CodeBlockMonacoTheme | undefined;
-    themes?: CodeBlockMonacoTheme[] | undefined;
-    monacoOptions?: CodeBlockMonacoOptions | undefined;
+    codeBlockOptions?: CodeBlockOptions | undefined;
+    theme?: CodeBlockThemeProp | undefined;
+    darkTheme?: CodeBlockTheme | undefined;
+    lightTheme?: CodeBlockTheme | undefined;
+    themes?: CodeBlockThemes | undefined;
     minWidth?: string | number | undefined;
     maxWidth?: string | number | undefined;
     isShowPreview?: boolean;

package/dist/components/NodeOutlet.svelte

@@ -71,6 +71,16 @@
   let shouldEscapeHtmlTag = $derived(resolveShouldEscapeHtmlTag())
   let htmlRenderNode = $derived(coerceBuiltinHtmlNode(node, resolvedType))
   let codeBlockInstanceKey = $derived(`${String(indexKey ?? 'code-block')}:${String((node as any)?.language ?? '')}:${(node as any)?.diff ? 'diff' : 'code'}`)
+  let preShowLineNumbers = $derived(
+    typeof context?.codeBlockProps?.showLineNumbers === 'boolean'
+      ? context.codeBlockProps.showLineNumbers
+      : typeof context?.codeBlockOptions?.disableLineNumbers === 'boolean'
+        ? !context.codeBlockOptions.disableLineNumbers
+        : false,
+  )
+  let preStyle = $derived(context?.codeBlockOptions?.overflow
+    ? `white-space: ${context.codeBlockOptions.overflow === 'scroll' ? 'pre' : 'pre-wrap'}`
+    : undefined)
   let escapedTextNode = $derived({
     type: 'text',
     content: String((node as any)?.content ?? (node as any)?.raw ?? ''),
@@ -105,6 +115,7 @@
     typewriter={context?.typewriter}
     fade={context?.fade}
     {...customInputs}
+    codeBlockOptions={context?.codeBlockOptions}
   />
 {:else if resolvedType === 'text' || resolvedType === 'text_special'}
   <TextNode {node} {context} {indexKey} typewriter={context?.typewriter} />
@@ -186,10 +197,10 @@
   {:else if codeMode === 'infographic'}
     <InfographicBlockNode {node} {context} {...customInputs} />
   {:else if codeMode === 'pre'}
-    <PreCodeNode {node} />
+    <PreCodeNode {node} showLineNumbers={preShowLineNumbers} style={preStyle} />
   {:else}
     {#key codeBlockInstanceKey}
-      <CodeBlockNode {node} {context} {...customInputs} />
+      <CodeBlockNode {node} {context} {...customInputs} codeBlockOptions={context?.codeBlockOptions} />
     {/key}
   {/if}
 {:else if resolvedType === 'label_open' || resolvedType === 'label_close'}

package/dist/components/NodeRenderer.svelte

@@ -34,10 +34,10 @@
     codeBlockStream = true,
     codeBlockDarkTheme = undefined,
     codeBlockLightTheme = undefined,
-    codeBlockMonacoOptions = undefined,
     renderCodeBlocksAsPre = false,
     codeBlockMinWidth = undefined,
     codeBlockMaxWidth = undefined,
+    codeBlockOptions = undefined,
     codeBlockProps = undefined,
     mermaidProps = undefined,
     d2Props = undefined,
@@ -167,10 +167,10 @@
     codeBlockStream,
     codeBlockDarkTheme,
     codeBlockLightTheme,
-    codeBlockMonacoOptions,
     renderCodeBlocksAsPre,
     codeBlockMinWidth,
     codeBlockMaxWidth,
+    codeBlockOptions,
     codeBlockProps,
     mermaidProps,
     d2Props,
@@ -259,8 +259,11 @@
     void renderedNodes
     void isDark
     void renderCodeBlocksAsPre
-    void codeBlockMonacoOptions
+    void codeBlockOptions
     void codeBlockProps
+    void codeBlockDarkTheme
+    void codeBlockLightTheme
+    void themes
     void mermaidProps
     void d2Props
     void infographicProps
@@ -388,12 +391,15 @@
     if (token !== enhancementToken || !rootEl)
       return
     enhancementHandle?.dispose()
-    enhancementHandle = await enhanceRenderedHtml(rootEl, {
+    const handle = await enhanceRenderedHtml(rootEl, {
       final: enhancementFinal,
       isDark,
       renderCodeBlocksAsPre,
-      monacoOptions: codeBlockMonacoOptions,
+      codeBlockOptions,
       codeBlockProps,
+      codeBlockDarkTheme,
+      codeBlockLightTheme,
+      themes,
       mermaidProps,
       d2Props,
       infographicProps,
@@ -401,6 +407,11 @@
       onCopy,
       isCancelled: () => token !== enhancementToken,
     })
+    if (token !== enhancementToken) {
+      handle.dispose()
+      return
+    }
+    enhancementHandle = handle
   }
 
   function hasLoadingNodes(nodes: SvelteRenderableNode[]): boolean {

package/dist/components/PreCodeNode.svelte

@@ -30,7 +30,7 @@
   let lineNumbersText = $derived(buildLineNumbersText(lineCount))
   let lineNumberLayoutStyle = $derived(
     showLineGutter
-      ? `--markstream-pre-line-number-width: ${Math.max(4, String(lineCount).length)}ch; --markstream-pre-diff-line-number-width: ${Math.max(4, String(lineCount).length)}ch; --markstream-code-padding-left: calc(var(--markstream-pre-line-number-padding-left, 2ch) + var(--markstream-pre-line-number-width, 2ch) + var(--markstream-pre-line-number-padding-right, 1ch) + var(--markstream-pre-line-number-separator-width, 2px) + var(--markstream-pre-line-number-gap-to-code, 1ch));`
+      ? `--markstream-pre-line-number-width: ${Math.max(2, String(lineCount).length)}ch; --markstream-pre-diff-line-number-width: ${Math.max(2, String(lineCount).length)}ch; --markstream-code-padding-left: calc(var(--markstream-pre-line-number-padding-left, 2ch) + var(--markstream-pre-line-number-width, 2ch) + var(--markstream-pre-line-number-padding-right, 1ch) + var(--markstream-pre-line-number-separator-width, 2px) + var(--markstream-pre-line-number-gap-to-code, 1ch));`
       : '',
   )
   let mergedStyle = $derived([lineNumberLayoutStyle, style].filter(Boolean).join(' '))

package/dist/components/shared/node-helpers.d.ts

@@ -1,7 +1,7 @@
 import type { SmoothMarkdownStreamOptions } from 'markstream-core';
 import type { BaseNode, HtmlPolicy, MarkdownIt, ParsedNode, ParseOptions } from 'stream-markdown-parser';
 import type { CustomComponentMap } from '../../customComponents';
-import type { CodeBlockMonacoOptions, CodeBlockMonacoTheme } from '../../types/monaco';
+import type { CodeBlockOptions, CodeBlockTheme, CodeBlockThemeProp, CodeBlockThemes } from '../../types/codeBlock';
 import { getHtmlTagFromContent, hasCompleteHtmlTagContent, normalizeCustomHtmlTags, normalizeCustomHtmlTagName as normalizeTagName, stripCustomHtmlWrapper } from 'stream-markdown-parser';
 export { getHtmlTagFromContent, hasCompleteHtmlTagContent, normalizeCustomHtmlTags, normalizeTagName, stripCustomHtmlWrapper, };
 export type SvelteRenderableNode = (ParsedNode | BaseNode) & Record<string, unknown>;
@@ -13,10 +13,10 @@ export interface CodeBlockPreviewPayload {
 }
 export type NodeRendererCodeBlockProps = Partial<{
     stream: boolean;
-    darkTheme: CodeBlockMonacoTheme;
-    lightTheme: CodeBlockMonacoTheme;
-    themes: CodeBlockMonacoTheme[];
-    monacoOptions: CodeBlockMonacoOptions;
+    theme: CodeBlockThemeProp;
+    darkTheme: CodeBlockTheme;
+    lightTheme: CodeBlockTheme;
+    themes: CodeBlockThemes;
     minWidth: string | number;
     maxWidth: string | number;
     isShowPreview: boolean;
@@ -30,6 +30,7 @@ export type NodeRendererCodeBlockProps = Partial<{
     showLineNumbers: boolean;
     htmlPreviewAllowScripts: boolean;
     htmlPreviewSandbox: string;
+    codeBlockOptions?: never;
 }> & Record<string, unknown>;
 export type NodeRendererMermaidProps = Partial<{
     maxHeight: string | null;
@@ -85,19 +86,19 @@ export interface NodeRendererProps {
     htmlPolicy?: HtmlPolicy;
     viewportPriority?: boolean;
     codeBlockStream?: boolean;
-    codeBlockDarkTheme?: CodeBlockMonacoTheme;
-    codeBlockLightTheme?: CodeBlockMonacoTheme;
-    codeBlockMonacoOptions?: CodeBlockMonacoOptions;
+    codeBlockDarkTheme?: CodeBlockTheme;
+    codeBlockLightTheme?: CodeBlockTheme;
     renderCodeBlocksAsPre?: boolean;
     codeBlockMinWidth?: string | number;
     codeBlockMaxWidth?: string | number;
+    codeBlockOptions?: CodeBlockOptions;
     codeBlockProps?: NodeRendererCodeBlockProps;
     mermaidProps?: NodeRendererMermaidProps;
     d2Props?: NodeRendererD2Props;
     infographicProps?: NodeRendererInfographicProps;
     customComponents?: CustomComponentMap;
     showTooltips?: boolean;
-    themes?: CodeBlockMonacoTheme[];
+    themes?: CodeBlockThemes;
     isDark?: boolean;
     customId?: string;
     indexKey?: number | string;
@@ -133,16 +134,16 @@ export interface SvelteRenderContext {
     customHtmlTags?: readonly string[];
     parseOptions?: ParseOptions;
     customMarkdownIt?: (md: MarkdownIt) => MarkdownIt;
+    codeBlockOptions?: CodeBlockOptions;
     codeBlockProps?: NodeRendererCodeBlockProps;
     mermaidProps?: NodeRendererMermaidProps;
     d2Props?: NodeRendererD2Props;
     infographicProps?: NodeRendererInfographicProps;
     customComponents?: CustomComponentMap;
     codeBlockThemes?: {
-        themes?: CodeBlockMonacoTheme[];
-        darkTheme?: CodeBlockMonacoTheme;
-        lightTheme?: CodeBlockMonacoTheme;
-        monacoOptions?: CodeBlockMonacoOptions;
+        themes?: CodeBlockThemes;
+        darkTheme?: CodeBlockTheme;
+        lightTheme?: CodeBlockTheme;
         minWidth?: string | number;
         maxWidth?: string | number;
     };

package/dist/components/shared/node-helpers.js

@@ -40,6 +40,7 @@ export function buildRenderContext(props, events = {}, textStreamState, streamRe
         customHtmlTags,
         parseOptions: props.parseOptions,
         customMarkdownIt: props.customMarkdownIt,
+        codeBlockOptions: props.codeBlockOptions,
         codeBlockProps: props.codeBlockProps,
         mermaidProps: props.mermaidProps,
         d2Props: props.d2Props,
@@ -49,7 +50,6 @@ export function buildRenderContext(props, events = {}, textStreamState, streamRe
             themes: props.themes,
             darkTheme: props.codeBlockDarkTheme,
             lightTheme: props.codeBlockLightTheme,
-            monacoOptions: props.codeBlockMonacoOptions,
             minWidth: props.codeBlockMinWidth,
             maxWidth: props.codeBlockMaxWidth,
         },

package/dist/enhanceRenderedHtml.d.ts

@@ -1,14 +1,17 @@
 import type { NodeRendererCodeBlockProps, NodeRendererD2Props, NodeRendererInfographicProps, NodeRendererMermaidProps } from './components/shared/node-helpers';
-import type { CodeBlockMonacoOptions } from './types/monaco';
+import type { CodeBlockOptions, CodeBlockTheme, CodeBlockThemes } from './types/codeBlock';
 export interface EnhanceRenderedHtmlOptions {
     final?: boolean;
     isDark?: boolean;
     renderCodeBlocksAsPre?: boolean;
-    monacoOptions?: CodeBlockMonacoOptions;
     d2ThemeId?: number | null;
     d2DarkThemeId?: number | null;
     showTooltips?: boolean;
+    codeBlockOptions?: CodeBlockOptions;
     codeBlockProps?: NodeRendererCodeBlockProps;
+    codeBlockDarkTheme?: CodeBlockTheme;
+    codeBlockLightTheme?: CodeBlockTheme;
+    themes?: CodeBlockThemes;
     mermaidProps?: NodeRendererMermaidProps;
     d2Props?: NodeRendererD2Props;
     infographicProps?: NodeRendererInfographicProps;

package/dist/enhanceRenderedHtml.js

@@ -3,7 +3,7 @@ import { getD2 } from './optional/d2';
 import { getInfographic } from './optional/infographic';
 import { getKatex } from './optional/katex';
 import { getMermaid } from './optional/mermaid';
-import { getUseMonaco } from './optional/monaco';
+import { getStreamDiffsRuntime } from './optional/streamDiffs';
 import { extractRenderedSvg, toSafeSvgMarkup } from './sanitizeSvg';
 import { hideTooltip, showTooltipForAnchor } from './tooltip/singletonTooltip';
 import { normalizeKaTeXRenderInput } from './utils/normalizeKaTeXRenderInput';
@@ -31,7 +31,7 @@ const DARK_THEME_OVERRIDES = {
     AB4: '#FBBF24',
     AB5: '#F59E0B',
 };
-const MONACO_LANGUAGE_ALIASES = {
+const LANGUAGE_ALIASES = {
     cjs: 'javascript',
     cts: 'typescript',
     d2lang: 'plaintext',
@@ -88,9 +88,15 @@ export async function enhanceRenderedHtml(root, options = {}) {
         if (!isActive())
             return handle;
         if (!options.renderCodeBlocksAsPre)
-            await renderMonaco(root, cleanupFns, options, isActive);
+            await renderCodeBlock(root, cleanupFns, options, isActive);
+        if (!isActive())
+            return handle;
     }
+    if (!isActive())
+        return handle;
     enhanceFootnotes(root, cleanupFns);
+    if (!isActive())
+        return handle;
     enhanceTooltips(root, cleanupFns, options);
     return handle;
 }
@@ -489,12 +495,27 @@ async function renderD2(root, cleanupFns, options, isActive) {
         }
     }
 }
-async function renderMonaco(root, cleanupFns, options, isActive) {
-    var _a, _b;
-    const monacoModule = await getUseMonaco();
-    if (!monacoModule || typeof monacoModule.useMonaco !== 'function' || !isActive())
-        return;
+async function renderCodeBlock(root, cleanupFns, options, isActive) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23;
     const preNodes = Array.from(root.querySelectorAll('pre[data-markstream-code-block="1"]'));
+    const fallbackWhiteSpace = ((_a = options.codeBlockOptions) === null || _a === void 0 ? void 0 : _a.overflow) === 'scroll' ? 'pre' : 'pre-wrap';
+    const maxHeight = (_b = options.codeBlockOptions) === null || _b === void 0 ? void 0 : _b.maxHeight;
+    for (const pre of preNodes) {
+        const codeNode = pre.querySelector('code');
+        if (!codeNode)
+            continue;
+        const normalizedLanguage = resolveCodeLanguage(pre, codeNode).trim().toLowerCase();
+        if (normalizedLanguage === 'mermaid' || normalizedLanguage === 'infographic' || normalizedLanguage === 'd2' || normalizedLanguage === 'd2lang')
+            continue;
+        pre.style.whiteSpace = fallbackWhiteSpace;
+        if (typeof maxHeight === 'number') {
+            pre.style.maxHeight = `${maxHeight}px`;
+            pre.style.overflow = 'auto';
+        }
+    }
+    const streamDiffsModule = await getStreamDiffsRuntime();
+    if (!streamDiffsModule || typeof streamDiffsModule.createCodeBlockRuntime !== 'function' || !isActive())
+        return;
     for (const pre of preNodes) {
         if (!isActive())
             return;
@@ -507,14 +528,19 @@ async function renderMonaco(root, cleanupFns, options, isActive) {
             continue;
         const source = codeNode.textContent || '';
         const diff = pre.dataset.markstreamDiff === '1';
+        const originalCode = decodeDataPayload(pre.dataset.markstreamOriginal);
         const updatedCode = decodeDataPayload(pre.dataset.markstreamUpdated);
-        const monacoLanguage = resolveMonacoLanguage(rawLanguage);
-        const renderLanguage = diff ? 'plaintext' : monacoLanguage;
-        const shell = createEnhancedBlockShell('code', diff ? `Diff / ${monacoLanguage}` : `Code / ${monacoLanguage}`, source, false, options, {
-            showHeader: ((_a = options.codeBlockProps) === null || _a === void 0 ? void 0 : _a.showHeader) !== false,
+        const runtimeLanguage = resolveLanguage(rawLanguage);
+        const shell = createEnhancedBlockShell('code', diff ? `Diff / ${runtimeLanguage}` : `Code / ${runtimeLanguage}`, source, false, options, {
+            showHeader: ((_c = options.codeBlockProps) === null || _c === void 0 ? void 0 : _c.showHeader) !== false,
         });
         shell.body.classList.add('markstream-svelte-enhanced-block__body--code');
-        shell.body.style.minHeight = `${estimateCodeBlockHeight(diff ? updatedCode || source : source, diff)}px`;
+        const estimatedHeight = estimateCodeBlockHeight(diff ? updatedCode || source : source, diff);
+        shell.body.style.minHeight = `${typeof maxHeight === 'number' ? Math.min(estimatedHeight, maxHeight) : estimatedHeight}px`;
+        if (typeof maxHeight === 'number') {
+            shell.body.style.maxHeight = `${maxHeight}px`;
+            shell.body.style.overflow = 'auto';
+        }
         const originalPre = pre.cloneNode(true);
         let helpers = null;
         let restored = false;
@@ -529,45 +555,108 @@ async function renderMonaco(root, cleanupFns, options, isActive) {
             catch {
                 // Ignore cleanup failures during fallback.
             }
-            if (shell.wrapper.isConnected)
+            if (shell.wrapper.parentNode)
                 shell.wrapper.replaceWith(originalPre.cloneNode(true));
         };
         pre.replaceWith(shell.wrapper);
-        helpers = monacoModule.useMonaco({
-            themes: ['vitesse-dark', 'vitesse-light'],
-            languages: Array.from(new Set([monacoLanguage, 'plaintext'])),
-            readOnly: true,
-            minimap: { enabled: false },
-            lineNumbers: 'on',
-            wordWrap: 'off',
-            revealDebounceMs: 75,
-            MAX_HEIGHT: 500,
-            fontSize: 13,
-            ...(options.monacoOptions || {}),
+        const userOptions = { ...((_d = options.codeBlockOptions) !== null && _d !== void 0 ? _d : {}) };
+        for (const key of [
+            'maxHeight',
+            'padding',
+            'tabSize',
+            'theme',
+            'themes',
+            'themeType',
+            'language',
+            'languages',
+            'stream',
+            'disableFileHeader',
+            'onThemeChange',
+            'renderCustomHeader',
+            'renderHeaderMetadata',
+            'renderHeaderPrefix',
+        ])
+            delete userOptions[key];
+        const parseDiffOptions = userOptions.parseDiffOptions && typeof userOptions.parseDiffOptions === 'object'
+            ? userOptions.parseDiffOptions
+            : {};
+        const nativeOptions = diff
+            ? {
+                diffStyle: 'split',
+                expandUnchanged: false,
+                collapsedContextThreshold: 5,
+                hunkSeparators: 'line-info',
+                ...userOptions,
+                parseDiffOptions: { context: 2, ...parseDiffOptions },
+            }
+            : userOptions;
+        const configuredTheme = (_e = options.codeBlockProps) === null || _e === void 0 ? void 0 : _e.theme;
+        const runtimeThemes = [
+            (_o = (_l = (_k = (_g = (_f = options.codeBlockProps) === null || _f === void 0 ? void 0 : _f.darkTheme) !== null && _g !== void 0 ? _g : (_j = (_h = options.codeBlockProps) === null || _h === void 0 ? void 0 : _h.themes) === null || _j === void 0 ? void 0 : _j[0]) !== null && _k !== void 0 ? _k : options.codeBlockDarkTheme) !== null && _l !== void 0 ? _l : (_m = options.themes) === null || _m === void 0 ? void 0 : _m[0]) !== null && _o !== void 0 ? _o : 'vitesse-dark',
+            (_w = (_u = (_t = (_q = (_p = options.codeBlockProps) === null || _p === void 0 ? void 0 : _p.lightTheme) !== null && _q !== void 0 ? _q : (_s = (_r = options.codeBlockProps) === null || _r === void 0 ? void 0 : _r.themes) === null || _s === void 0 ? void 0 : _s[1]) !== null && _t !== void 0 ? _t : options.codeBlockLightTheme) !== null && _u !== void 0 ? _u : (_v = options.themes) === null || _v === void 0 ? void 0 : _v[1]) !== null && _w !== void 0 ? _w : 'vitesse-light',
+        ];
+        const requestedTheme = typeof configuredTheme === 'string'
+            ? configuredTheme
+            : configuredTheme && typeof configuredTheme === 'object'
+                ? (options.isDark ? configuredTheme.dark : configuredTheme.light)
+                : options.isDark
+                    ? (_4 = (_2 = (_1 = (_y = (_x = options.codeBlockProps) === null || _x === void 0 ? void 0 : _x.darkTheme) !== null && _y !== void 0 ? _y : (_0 = (_z = options.codeBlockProps) === null || _z === void 0 ? void 0 : _z.themes) === null || _0 === void 0 ? void 0 : _0[0]) !== null && _1 !== void 0 ? _1 : options.codeBlockDarkTheme) !== null && _2 !== void 0 ? _2 : (_3 = options.themes) === null || _3 === void 0 ? void 0 : _3[0]) !== null && _4 !== void 0 ? _4 : 'vitesse-dark'
+                    : (_12 = (_10 = (_9 = (_6 = (_5 = options.codeBlockProps) === null || _5 === void 0 ? void 0 : _5.lightTheme) !== null && _6 !== void 0 ? _6 : (_8 = (_7 = options.codeBlockProps) === null || _7 === void 0 ? void 0 : _7.themes) === null || _8 === void 0 ? void 0 : _8[1]) !== null && _9 !== void 0 ? _9 : options.codeBlockLightTheme) !== null && _10 !== void 0 ? _10 : (_11 = options.themes) === null || _11 === void 0 ? void 0 : _11[1]) !== null && _12 !== void 0 ? _12 : 'vitesse-light';
+        const configuredUnsafeCSS = typeof nativeOptions.unsafeCSS === 'string' ? nativeOptions.unsafeCSS : '';
+        const showLineNumbers = (_14 = (_13 = options.codeBlockProps) === null || _13 === void 0 ? void 0 : _13.showLineNumbers) !== null && _14 !== void 0 ? _14 : ((_15 = options.codeBlockOptions) === null || _15 === void 0 ? void 0 : _15.disableLineNumbers) !== true;
+        const syncGeometry = () => {
+            var _a, _b, _c;
+            shell.body.style.setProperty('--diffs-tab-size', String((_b = (_a = options.codeBlockOptions) === null || _a === void 0 ? void 0 : _a.tabSize) !== null && _b !== void 0 ? _b : 4));
+            if (typeof ((_c = options.codeBlockOptions) === null || _c === void 0 ? void 0 : _c.padding) === 'number')
+                shell.body.style.setProperty('--diffs-gap-block', `${options.codeBlockOptions.padding}px`);
+            else
+                shell.body.style.removeProperty('--diffs-gap-block');
+        };
+        syncGeometry();
+        helpers = streamDiffsModule.createCodeBlockRuntime({
+            overflow: 'wrap',
+            ...nativeOptions,
+            themes: runtimeThemes,
+            theme: requestedTheme,
+            themeType: options.isDark ? 'dark' : 'light',
+            disableLineNumbers: !showLineNumbers,
+            MAX_HEIGHT: (_17 = (_16 = options.codeBlockOptions) === null || _16 === void 0 ? void 0 : _16.maxHeight) !== null && _17 !== void 0 ? _17 : 500,
+            fontSize: (_19 = (_18 = options.codeBlockOptions) === null || _18 === void 0 ? void 0 : _18.fontSize) !== null && _19 !== void 0 ? _19 : 13,
+            lineHeight: (_20 = options.codeBlockOptions) === null || _20 === void 0 ? void 0 : _20.lineHeight,
+            fontFamily: (_21 = options.codeBlockOptions) === null || _21 === void 0 ? void 0 : _21.fontFamily,
+            unsafeCSS: `[data-file], [data-diff] { --diffs-min-number-column-width-default: 2ch !important; }
+${configuredUnsafeCSS}`.trim(),
+            disableFileHeader: true,
+            stream: false,
+            onThemeChange: syncGeometry,
         });
         cleanupFns.push(restoreOriginalPre);
         try {
-            // Vue/React wire Monaco diff editors through dedicated components.
-            // Svelte currently enhances static HTML after the fact, and the diff
-            // editor path in stream-monaco can leave an empty shell or raise
-            // "no diff result available" during worker setup. Prefer a stable
-            // single-editor fallback that still preserves the diff source text.
-            await helpers.createEditor(shell.body, source, renderLanguage);
+            if (diff && typeof helpers.createDiffEditor === 'function') {
+                await helpers.createDiffEditor(shell.body, originalCode, updatedCode || source, runtimeLanguage);
+            }
+            else {
+                await ((_22 = helpers.createEditor) === null || _22 === void 0 ? void 0 : _22.call(helpers, shell.body, source, runtimeLanguage));
+            }
             if (!isActive()) {
                 restoreOriginalPre();
                 return;
             }
-            await ((_b = helpers.setTheme) === null || _b === void 0 ? void 0 : _b.call(helpers, options.isDark ? 'vitesse-dark' : 'vitesse-light'));
+            await ((_23 = helpers.setTheme) === null || _23 === void 0 ? void 0 : _23.call(helpers, requestedTheme));
             if (!isActive()) {
                 restoreOriginalPre();
                 return;
             }
             await waitForRenderFrame();
-            if (!hasVisibleMonacoContent(shell.body, source))
-                throw new Error('Monaco editor rendered no visible code content.');
-            shell.wrapper.dataset.markstreamMonaco = '1';
+            if (!isActive()) {
+                restoreOriginalPre();
+                return;
+            }
+            if (!hasVisibleCodeContent(shell.body, source))
+                throw new Error('Code editor rendered no visible code content.');
+            shell.wrapper.dataset.markstreamEnhanced = '1';
             if (diff)
-                shell.wrapper.dataset.markstreamMonacoDiff = '1';
+                shell.wrapper.dataset.markstreamEnhancedDiff = '1';
         }
         catch {
             restoreOriginalPre();
@@ -596,9 +685,9 @@ function resolveCodeLanguage(pre, codeNode) {
     const languageClass = Array.from(codeNode.classList).find(className => className.startsWith('language-'));
     return languageClass ? languageClass.slice('language-'.length) : 'plaintext';
 }
-function resolveMonacoLanguage(language) {
+function resolveLanguage(language) {
     const normalized = language.trim().toLowerCase();
-    return MONACO_LANGUAGE_ALIASES[normalized] || normalized || 'plaintext';
+    return LANGUAGE_ALIASES[normalized] || normalized || 'plaintext';
 }
 function estimateCodeBlockHeight(source, diff) {
     const lineCount = Math.max(1, source.split('\n').length);
@@ -606,9 +695,14 @@ function estimateCodeBlockHeight(source, diff) {
     const base = diff ? 180 : 96;
     return Math.min(520, base + lineCount * perLine);
 }
-function hasVisibleMonacoContent(body, source) {
+function hasVisibleCodeContent(body, source) {
     var _a;
-    const editor = body.querySelector('.monaco-editor');
+    // stream-diffs renders its surface inside these containers.
+    const editor = body.querySelector([
+        'diffs-container',
+        '.stream-diffs-shell',
+        '[data-stream-diffs-state]',
+    ].join(','));
     if (!editor)
         return false;
     const rect = editor.getBoundingClientRect();

package/dist/index.css

@@ -1299,8 +1299,8 @@ body > div[id^="dmermaid-"] {
   background: #0b1220;
 }
 
-.markstream-svelte .markstream-svelte-enhanced-block__body--code .monaco-editor,
-.markstream-svelte .markstream-svelte-enhanced-block__body--code .monaco-diff-editor {
+.markstream-svelte .markstream-svelte-enhanced-block__body--code .stream-diffs-shell,
+.markstream-svelte .markstream-svelte-enhanced-block__body--code diffs-container {
   min-height: inherit;
 }
 
@@ -1536,19 +1536,9 @@ body > div[id^="dmermaid-"] {
   box-shadow: 0 22px 44px -30px rgba(2, 6, 23, 0.95);
 }
 
-.markstream-svelte .code-block-container.is-plain-text .monaco-editor,
-.markstream-svelte .code-block-container.is-plain-text .monaco-editor .monaco-editor-background,
-.markstream-svelte .code-block-container.is-plain-text .monaco-editor .margin,
-.markstream-svelte .code-block-container.is-plain-text .monaco-editor .lines-content {
+.markstream-svelte .code-block-container.is-plain-text .stream-diffs-shell,
+.markstream-svelte .code-block-container.is-plain-text diffs-container {
   background: var(--vscode-editor-background, var(--markstream-code-fallback-bg)) !important;
-}
-
-.markstream-svelte .code-block-container.is-plain-text .monaco-editor,
-.markstream-svelte .code-block-container.is-plain-text .monaco-editor .margin,
-.markstream-svelte .code-block-container.is-plain-text .monaco-editor .view-lines,
-.markstream-svelte .code-block-container.is-plain-text .monaco-editor .view-line,
-.markstream-svelte .code-block-container.is-plain-text .monaco-editor .view-line span,
-.markstream-svelte .code-block-container.is-plain-text .monaco-editor .line-numbers {
   color: var(--vscode-editor-foreground, var(--markstream-code-fallback-fg)) !important;
 }
 
@@ -1619,7 +1609,6 @@ body > div[id^="dmermaid-"] {
 .markstream-svelte .code-block-body {
   position: relative;
   display: grid;
-  min-height: 96px;
   min-width: 0;
   overflow: hidden;
   background: var(--markstream-code-fallback-bg, var(--code-bg));
@@ -1686,10 +1675,6 @@ body > div[id^="dmermaid-"] {
   background: transparent;
 }
 
-.markstream-svelte .code-editor-container {
-  min-height: 96px;
-}
-
 .markstream-svelte .code-editor-container.is-hidden {
   opacity: 0;
   pointer-events: none;
@@ -1858,6 +1843,12 @@ body > div[id^="dmermaid-"] {
   --vscode-editor-foreground: var(--markstream-diff-editor-fg);
   --vscode-diffEditor-unchangedRegionForeground: var(--markstream-diff-unchanged-fg);
   --vscode-diffEditor-unchangedRegionBackground: var(--markstream-diff-unchanged-bg);
+  --vscode-diffEditor-insertedTextBackground: var(--markstream-diff-added-inline);
+  --vscode-diffEditor-removedTextBackground: var(--markstream-diff-removed-inline);
+  --vscode-diffEditor-insertedLineBackground: var(--markstream-diff-added-line);
+  --vscode-diffEditor-removedLineBackground: var(--markstream-diff-removed-line);
+  --vscode-diffEditor-insertedTextBorder: var(--markstream-diff-added-inline-border);
+  --vscode-diffEditor-removedTextBorder: var(--markstream-diff-removed-inline-border);
   --vscode-focusBorder: var(--markstream-diff-focus);
   --vscode-widget-shadow: var(--markstream-diff-widget-shadow);
 }
@@ -1867,56 +1858,6 @@ body > div[id^="dmermaid-"] {
   background: var(--markstream-diff-editor-bg);
 }
 
-.markstream-svelte .code-block-container .stream-monaco-diff-root {
-  --stream-monaco-gutter-gap: var(--markstream-diff-gutter-gap) !important;
-  --stream-monaco-line-number: var(--markstream-diff-line-number) !important;
-  --stream-monaco-line-number-active: var(--markstream-diff-line-number-active) !important;
-  --stream-monaco-added-fg: var(--markstream-diff-added-fg) !important;
-  --stream-monaco-removed-fg: var(--markstream-diff-removed-fg) !important;
-  --stream-monaco-added-line: var(--markstream-diff-added-line) !important;
-  --stream-monaco-removed-line: var(--markstream-diff-removed-line) !important;
-  --stream-monaco-added-inline: var(--markstream-diff-added-inline) !important;
-  --stream-monaco-removed-inline: var(--markstream-diff-removed-inline) !important;
-  --stream-monaco-added-inline-border: var(--markstream-diff-added-inline-border) !important;
-  --stream-monaco-removed-inline-border: var(--markstream-diff-removed-inline-border) !important;
-  --stream-monaco-added-line-fill: var(--markstream-diff-added-line-fill) !important;
-  --stream-monaco-removed-line-fill: var(--markstream-diff-removed-line-fill) !important;
-  --stream-monaco-unchanged-bg: var(--markstream-diff-unchanged-bg) !important;
-  --stream-monaco-unchanged-fg: var(--markstream-diff-unchanged-fg) !important;
-}
-
-.markstream-svelte .code-block-container .stream-monaco-diff-root .monaco-diff-editor .diffOverview,
-.markstream-svelte .code-block-container .stream-monaco-diff-root .decorationsOverviewRuler {
-  display: none !important;
-}
-
-.markstream-svelte .code-block-container .stream-monaco-diff-root .monaco-editor .diff-hidden-lines .center:not(.stream-monaco-unchanged-bridge-source),
-.markstream-svelte .code-block-container .stream-monaco-diff-root .stream-monaco-diff-unchanged-bridge {
-  --stream-monaco-unchanged-bg: var(--markstream-diff-unchanged-bg) !important;
-  --stream-monaco-unchanged-fg: var(--markstream-diff-unchanged-fg) !important;
-  background: var(--stream-monaco-unchanged-bg) !important;
-  color: var(--stream-monaco-unchanged-fg) !important;
-}
-
-.markstream-svelte .code-block-container .stream-monaco-diff-root .stream-monaco-diff-unchanged-bridge .stream-monaco-unchanged-summary,
-.markstream-svelte .code-block-container .stream-monaco-diff-root .stream-monaco-diff-unchanged-bridge .stream-monaco-unchanged-summary:hover,
-.markstream-svelte .code-block-container .stream-monaco-diff-root .stream-monaco-diff-unchanged-bridge .stream-monaco-unchanged-summary:focus-visible {
-  background: var(--stream-monaco-unchanged-bg) !important;
-  color: var(--markstream-diff-unchanged-fg) !important;
-}
-
-.markstream-svelte .code-block-container .stream-monaco-diff-root .stream-monaco-diff-unchanged-bridge .stream-monaco-unchanged-rail,
-.markstream-svelte .code-block-container .stream-monaco-diff-root .stream-monaco-diff-unchanged-bridge .stream-monaco-unchanged-reveal,
-.markstream-svelte .code-block-container .stream-monaco-diff-root .stream-monaco-diff-unchanged-bridge .stream-monaco-unchanged-reveal:hover,
-.markstream-svelte .code-block-container .stream-monaco-diff-root .stream-monaco-diff-unchanged-bridge .stream-monaco-unchanged-reveal:focus-visible {
-  background: var(--stream-monaco-unchanged-bg) !important;
-  color: var(--markstream-diff-unchanged-fg) !important;
-}
-
-.markstream-svelte .code-block-container .stream-monaco-diff-root .stream-monaco-diff-unchanged-bridge .stream-monaco-unchanged-rail {
-  border-right-color: var(--markstream-diff-unchanged-divider) !important;
-}
-
 .html-preview-frame__backdrop {
   position: fixed;
   inset: 0;