@motion-script/code 0.1.0

package/dist/node.js

@@ -0,0 +1,882 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { createHighlighter } from "shiki";
+import { rangeToCharOffsets } from "./code-range";
+import { parseColor, Node, tween, property, resolvePadding, lerpEdgeInset } from "@motion-script/core";
+let globalHighlighter = null;
+let highlighterPromise = null;
+function ensureHighlighter(themes = ['github-dark'], langs = ['typescript', 'javascript', 'json', 'python']) {
+    if (globalHighlighter)
+        return Promise.resolve(globalHighlighter);
+    if (!highlighterPromise) {
+        highlighterPromise = createHighlighter({ themes, langs }).then(h => {
+            globalHighlighter = h;
+            return h;
+        });
+    }
+    return highlighterPromise;
+}
+export async function initSyntaxHighlighter(themes = ['github-dark'], langs = ['typescript', 'javascript', 'json', 'python']) {
+    globalHighlighter = await ensureHighlighter(themes, langs);
+}
+let nextTokenId = 1;
+let nextLineId = 1;
+function makeIdToken(content, color) {
+    return { id: nextTokenId++, content, color };
+}
+function makeIdLine(tokens) {
+    return { id: nextLineId++, tokens };
+}
+function tokenizeCodeToIdLines(code, language, theme) {
+    if (!globalHighlighter) {
+        return code.split('\n').map(line => makeIdLine([makeIdToken(line, '#d1d5db')]));
+    }
+    const result = globalHighlighter.codeToTokens(code, { lang: language, theme: theme });
+    return result.tokens.map(line => makeIdLine(line.map(tok => makeIdToken(tok.content, tok.color))));
+}
+function sampleCurve(keys, values, p) {
+    if (p <= keys[0])
+        return values[0];
+    if (p >= keys[keys.length - 1])
+        return values[values.length - 1];
+    for (let i = 0; i < keys.length - 1; i++) {
+        if (p <= keys[i + 1]) {
+            const span = keys[i + 1] - keys[i];
+            const local = span === 0 ? 0 : (p - keys[i]) / span;
+            return values[i] + (values[i + 1] - values[i]) * local;
+        }
+    }
+    return values[values.length - 1];
+}
+export class Code extends Node {
+    tokenLines = [];
+    tokenized = false;
+    transitions = [];
+    // Persistent dim state set by highlight() — applied during render to all
+    // tokens whose id is NOT in the highlight set. null means "not highlighting".
+    highlightDimOpacity = null;
+    highlightedIds = new Set();
+    constructor(props) {
+        super(props);
+        this.applyProp("width", props.width ?? "hug");
+        this.applyProp("height", props.height ?? "hug");
+        ensureHighlighter();
+        this.tokenize();
+    }
+    set(props) {
+        super.set(props);
+        if (props.code !== undefined || props.language !== undefined || props.theme !== undefined) {
+            this.tokenized = false;
+        }
+    }
+    tokenize() {
+        this.tokenLines = tokenizeCodeToIdLines(this.code, this.language, this.theme);
+        this.tokenized = !!globalHighlighter;
+    }
+    prepare(storage) {
+        storage.requestLoader(async () => ensureHighlighter([this.theme], [this.language]));
+    }
+    // A token's advance width, honoring letterSpacing. The renderer applies the
+    // same letterSpacing when drawing (see drawSelf), so measure and draw stay
+    // in lockstep. fontWeight is left default; letterSpacing is the 5th arg.
+    tokenAdvance(scope, content) {
+        return scope.measureText(content, this.fontSize, this.fontFamily, undefined, this.letterSpacing);
+    }
+    // Horizontal gap between the line-number column and the code text. Kept in
+    // one place so gutterWidth() and the line-number x in drawSelf() agree.
+    // Sized in space-widths via the lineNumberGap prop so it scales with font.
+    gutterGap(scope) {
+        return scope.measureText(' ', this.fontSize, this.fontFamily) * this.lineNumberGap;
+    }
+    gutterWidth(scope) {
+        if (!this.showLineNumbers)
+            return 0;
+        const maxLine = Math.max(1, this.tokenLines.length);
+        const sample = String(maxLine);
+        const digitW = scope.measureText(sample, this.fontSize, this.fontFamily);
+        // digit column + the gap that separates the number from the code text.
+        return digitW + this.gutterGap(scope);
+    }
+    measure(constraints, scope) {
+        const pad = this.padding;
+        const wm = this.width;
+        const hm = this.height;
+        const lineH = this.fontSize * this.lineHeight;
+        const stateById = this.resolveTokenStates();
+        const lineHeightScales = this.resolveLineHeightScales();
+        let measuredW = 0;
+        let measuredH = 0;
+        const gutter = this.gutterWidth(scope);
+        for (const line of this.tokenLines) {
+            let lineW = 0;
+            for (const tok of line.tokens) {
+                const ws = stateById.get(tok.id)?.widthScale ?? 1;
+                lineW += this.tokenAdvance(scope, tok.content) * ws;
+            }
+            if (lineW > measuredW)
+                measuredW = lineW;
+            measuredH += lineH * (lineHeightScales.get(line.id) ?? 1);
+        }
+        measuredW += gutter;
+        const resolvedW = typeof wm === "number"
+            ? wm
+            : wm === "hug"
+                ? measuredW + pad.left + pad.right
+                : constraints.maxWidth ?? 0;
+        const resolvedH = typeof hm === "number"
+            ? hm
+            : hm === "hug"
+                ? measuredH + pad.top + pad.bottom
+                : constraints.maxHeight ?? 0;
+        return { width: resolvedW, height: resolvedH };
+    }
+    onRender(ctx) {
+        super.onRender(ctx);
+        if (!this.tokenized && globalHighlighter) {
+            this.tokenize();
+        }
+        this.drawSelf(ctx);
+    }
+    *append(code, duration, easing) {
+        const newLines = tokenizeCodeToIdLines(code, this.language, this.theme);
+        this.tokenLines = [...this.tokenLines, ...newLines];
+        const animTokens = [];
+        const lineHeightScales = new Map();
+        const introducedIds = new Set();
+        for (const line of newLines) {
+            lineHeightScales.set(line.id, { keys: [0, 1], values: [0, 1] });
+            for (const tok of line.tokens) {
+                introducedIds.add(tok.id);
+                animTokens.push(makeAnim(tok.id, {
+                    opacity: { keys: [0, 1], values: [0, 1] },
+                }));
+            }
+        }
+        yield* this.runTransition({ tokens: animTokens, lineHeightScales, introducedIds }, duration, easing);
+    }
+    *prepend(code, duration, easing) {
+        const newLines = tokenizeCodeToIdLines(code, this.language, this.theme);
+        this.tokenLines = [...newLines, ...this.tokenLines];
+        const animTokens = [];
+        const lineHeightScales = new Map();
+        const introducedIds = new Set();
+        for (const line of newLines) {
+            lineHeightScales.set(line.id, { keys: [0, 1], values: [0, 1] });
+            for (const tok of line.tokens) {
+                introducedIds.add(tok.id);
+                animTokens.push(makeAnim(tok.id, {
+                    opacity: { keys: [0, 1], values: [0, 1] },
+                }));
+            }
+        }
+        yield* this.runTransition({ tokens: animTokens, lineHeightScales, introducedIds }, duration, easing);
+    }
+    /**
+     * Highlight a range of code: tokens within the range stay at opacity 1,
+     * tokens outside dim to `opacity`. Persistent — call resetHighlight() to
+     * undo, or call highlight() again with a different range to cross-fade.
+     */
+    *highlight(codeRange, duration = 0.4, easing, opacity = 0.4) {
+        const matchIds = this.tokenIdsInRange(codeRange);
+        if (matchIds.size === 0) {
+            yield* tween(duration, () => { });
+            return;
+        }
+        const fromDim = this.highlightDimOpacity ?? 1;
+        const toDim = opacity;
+        const hadPrevious = this.highlightedIds.size > 0;
+        const previousIds = this.highlightedIds;
+        const animTokens = [];
+        for (const line of this.tokenLines) {
+            for (const tok of line.tokens) {
+                const wasHighlighted = !hadPrevious || previousIds.has(tok.id);
+                const isHighlighted = matchIds.has(tok.id);
+                const fromOp = wasHighlighted ? 1 : fromDim;
+                const toOp = isHighlighted ? 1 : toDim;
+                if (fromOp === toOp)
+                    continue;
+                animTokens.push(makeAnim(tok.id, {
+                    opacity: { keys: [0, 1], values: [fromOp, toOp] },
+                }));
+            }
+        }
+        try {
+            yield* this.runTransition({ tokens: animTokens }, duration, easing);
+        }
+        finally {
+            this.highlightDimOpacity = toDim;
+            this.highlightedIds = matchIds;
+        }
+    }
+    /**
+     * Fade all dimmed tokens back to opacity 1 and clear the persistent
+     * highlight state.
+     */
+    *resetHighlight(duration = 0.4, easing) {
+        if (this.highlightDimOpacity === null) {
+            yield* tween(duration, () => { });
+            return;
+        }
+        const fromDim = this.highlightDimOpacity;
+        const previousIds = this.highlightedIds;
+        const animTokens = [];
+        for (const line of this.tokenLines) {
+            for (const tok of line.tokens) {
+                const wasHighlighted = previousIds.has(tok.id);
+                const fromOp = wasHighlighted ? 1 : fromDim;
+                if (fromOp === 1)
+                    continue;
+                animTokens.push(makeAnim(tok.id, {
+                    opacity: { keys: [0, 1], values: [fromOp, 1] },
+                }));
+            }
+        }
+        try {
+            yield* this.runTransition({ tokens: animTokens }, duration, easing);
+        }
+        finally {
+            this.highlightDimOpacity = null;
+            this.highlightedIds = new Set();
+        }
+    }
+    /**
+     * Replace the tokens in `codeRange` with `next`, cross-fading widths and
+     * opacities.
+     */
+    *replace(codeRange, next, duration, easing) {
+        const span = this.rangeToTokenSpan(codeRange);
+        if (!span) {
+            yield* tween(duration, () => { });
+            return;
+        }
+        const replacementLineGroups = tokenizeCodeToIdLines(next, this.language, this.theme);
+        const replacementTokens = [];
+        for (let i = 0; i < replacementLineGroups.length; i++) {
+            for (const tok of replacementLineGroups[i].tokens)
+                replacementTokens.push(tok);
+            if (i < replacementLineGroups.length - 1) {
+                replacementTokens.push(makeIdToken('\n'));
+            }
+        }
+        const oldTokens = [];
+        for (let li = span.fromLine; li <= span.toLine; li++) {
+            const line = this.tokenLines[li];
+            const start = li === span.fromLine ? span.fromIdx : 0;
+            const end = li === span.toLine ? span.toIdx : line.tokens.length;
+            for (let ti = start; ti < end; ti++)
+                oldTokens.push(line.tokens[ti]);
+        }
+        const fromLine = this.tokenLines[span.fromLine];
+        const toLine = this.tokenLines[span.toLine];
+        const prefix = fromLine.tokens.slice(0, span.fromIdx);
+        const suffix = toLine.tokens.slice(span.toIdx);
+        const mergedLine = makeIdLine([
+            ...prefix,
+            ...oldTokens,
+            ...replacementTokens,
+            ...suffix,
+        ]);
+        mergedLine.id = fromLine.id;
+        const before = this.tokenLines.slice(0, span.fromLine);
+        const after = this.tokenLines.slice(span.toLine + 1);
+        this.tokenLines = [...before, mergedLine, ...after];
+        const oldIds = new Set(oldTokens.map(t => t.id));
+        const animTokens = [];
+        const introducedIds = new Set();
+        for (const tok of oldTokens) {
+            animTokens.push(makeAnim(tok.id, {
+                opacity: { keys: [0, 0.5, 1], values: [1, 0, 0] },
+                widthScale: { keys: [0, 0.5, 1], values: [1, 0, 0] },
+            }));
+        }
+        for (const tok of replacementTokens) {
+            introducedIds.add(tok.id);
+            animTokens.push(makeAnim(tok.id, {
+                opacity: { keys: [0, 0.5, 1], values: [0, 0, 1] },
+                widthScale: { keys: [0, 0.5, 1], values: [0, 1, 1] },
+            }));
+        }
+        try {
+            yield* this.runTransition({ tokens: animTokens, introducedIds }, duration, easing);
+        }
+        finally {
+            for (const line of this.tokenLines) {
+                line.tokens = line.tokens.filter(tok => !oldIds.has(tok.id));
+            }
+        }
+    }
+    /**
+     * Insert `code` at the given (line, col). Both are 1-indexed; col is the
+     * column BEFORE which the new content is inserted (col=1 means start of
+     * line). If `code` contains newlines, new lines are created in the middle
+     * of the existing line.
+     */
+    *insert(position, code, duration, easing) {
+        if (this.tokenLines.length === 0) {
+            this.tokenLines = [makeIdLine([])];
+        }
+        const [rawLine, rawCol] = position;
+        const lineIdx = Math.max(0, Math.min(this.tokenLines.length - 1, rawLine - 1));
+        const targetLine = this.tokenLines[lineIdx];
+        const lineText = targetLine.tokens.map(t => t.content).join('');
+        const col = Math.max(0, Math.min(lineText.length, rawCol - 1));
+        // Split the target line's tokens at the character offset `col`.
+        const { before: tokBefore, after: tokAfter } = splitTokensAt(targetLine.tokens, col);
+        const insertedLineGroups = tokenizeCodeToIdLines(code, this.language, this.theme);
+        const animTokens = [];
+        const lineHeightScales = new Map();
+        const introducedIds = new Set();
+        // Two curves:
+        //   - `newLineIntro`: for tokens on a line that's growing in height
+        //     (multi-line insert). Token opacity ramps linearly 0→1 to match
+        //     the line's heightScale ramp, so text, line number, and row
+        //     height all reveal together. No widthScale anim needed — there's
+        //     no existing content at the same x.
+        //   - `inlineIntro`: for tokens being spliced into an existing line
+        //     (single-line insert). The line's height isn't animating, so the
+        //     suffix has to make room horizontally — widthScale 0→1 over the
+        //     first half, then opacity fades in over the second half.
+        const collectIntro = (toks, mode) => {
+            for (const tok of toks) {
+                introducedIds.add(tok.id);
+                if (mode === 'newLine') {
+                    animTokens.push(makeAnim(tok.id, {
+                        opacity: { keys: [0, 1], values: [0, 1] },
+                    }));
+                }
+                else {
+                    animTokens.push(makeAnim(tok.id, {
+                        opacity: { keys: [0, 0.5, 1], values: [0, 0, 1] },
+                        widthScale: { keys: [0, 0.5, 1], values: [0, 1, 1] },
+                    }));
+                }
+            }
+        };
+        let newLines;
+        if (insertedLineGroups.length === 1) {
+            // Single-line insertion: splice tokens into the existing line.
+            const insertedTokens = insertedLineGroups[0].tokens;
+            collectIntro(insertedTokens, 'inline');
+            const merged = makeIdLine([...tokBefore, ...insertedTokens, ...tokAfter]);
+            merged.id = targetLine.id;
+            newLines = [merged];
+        }
+        else {
+            // Multi-line insertion. Split the inserted content into:
+            //   first  = prefix + insertedLineGroups[0]   (sits on the original line)
+            //   middle = insertedLineGroups[1..-2]        (entirely new lines)
+            //   last   = insertedLineGroups[-1] + suffix  (the original line's tail)
+            //
+            // Pre-existing tokens (tokBefore, tokAfter) keep their identity and
+            // shouldn't animate. Newly tokenized groups fade in.
+            //
+            // Critical for height animation: the line that contains the host
+            // line's pre-existing content must reuse the host id and NOT get a
+            // heightScale animation. The other produced lines are genuinely new
+            // and get the 0→1 reveal. We pick which side inherits the host id
+            // by where the cut lands — if tokAfter is empty (cut at end of
+            // line), the first produced line owns the original content. If
+            // tokBefore is empty (cut at start), the last produced line owns
+            // it. Otherwise both sides hold original content and the first
+            // keeps the host id by default.
+            const firstInserted = insertedLineGroups[0].tokens;
+            const middleInserted = insertedLineGroups.slice(1, -1).map(g => g.tokens);
+            const lastInserted = insertedLineGroups[insertedLineGroups.length - 1].tokens;
+            // The inheritor side (whichever produced line keeps the host id)
+            // doesn't get a height animation, so its inserted tokens need the
+            // inline (width-collapse) intro. The genuinely-new lines get the
+            // newLine intro (token fade matches the line's height ramp).
+            const cutAtStart = tokBefore.length === 0;
+            const firstLine = makeIdLine([...tokBefore, ...firstInserted]);
+            const middleLines = middleInserted.map(toks => makeIdLine(toks));
+            const lastLine = makeIdLine([...lastInserted, ...tokAfter]);
+            const inheritor = cutAtStart ? lastLine : firstLine;
+            inheritor.id = targetLine.id;
+            collectIntro(firstInserted, firstLine === inheritor ? 'inline' : 'newLine');
+            for (const m of middleInserted)
+                collectIntro(m, 'newLine');
+            collectIntro(lastInserted, lastLine === inheritor ? 'inline' : 'newLine');
+            // Every produced line OTHER than the inheritor is genuinely new and
+            // grows in height from 0→1.
+            const allProduced = [firstLine, ...middleLines, lastLine];
+            for (const ln of allProduced) {
+                if (ln.id !== targetLine.id) {
+                    lineHeightScales.set(ln.id, { keys: [0, 1], values: [0, 1] });
+                }
+            }
+            newLines = allProduced;
+        }
+        this.tokenLines = [
+            ...this.tokenLines.slice(0, lineIdx),
+            ...newLines,
+            ...this.tokenLines.slice(lineIdx + 1),
+        ];
+        yield* this.runTransition({ tokens: animTokens, lineHeightScales, introducedIds }, duration, easing);
+    }
+    /**
+     * Remove the tokens in `codeRange`. If the range spans whole lines, those
+     * lines collapse their height; partial line ranges only remove tokens
+     * (the surrounding text reflows).
+     */
+    *remove(codeRange, duration, easing) {
+        const span = this.rangeToTokenSpan(codeRange);
+        if (!span) {
+            yield* tween(duration, () => { });
+            return;
+        }
+        const removedTokens = [];
+        const fullyRemovedLineIds = [];
+        // A line is "fully removed" when the range covers every one of its
+        // tokens. Fully-removed lines get a height collapse + linear fade.
+        // Partially-removed lines keep their height; their removed tokens
+        // shrink horizontally so the surrounding text reflows.
+        for (let li = span.fromLine; li <= span.toLine; li++) {
+            const line = this.tokenLines[li];
+            const start = li === span.fromLine ? span.fromIdx : 0;
+            const end = li === span.toLine ? span.toIdx : line.tokens.length;
+            for (let ti = start; ti < end; ti++)
+                removedTokens.push(line.tokens[ti]);
+            if (start === 0 && end === line.tokens.length) {
+                fullyRemovedLineIds.push(line.id);
+            }
+        }
+        const animTokens = [];
+        const lineHeightScales = new Map();
+        const fullyRemovedLineIdSet = new Set(fullyRemovedLineIds);
+        const fullyRemovedTokenIds = new Set();
+        for (const line of this.tokenLines) {
+            if (fullyRemovedLineIdSet.has(line.id)) {
+                for (const tok of line.tokens)
+                    fullyRemovedTokenIds.add(tok.id);
+            }
+        }
+        // Whole-line removal: linear fade matching the linear height collapse,
+        // so text, line number, and row height all close together.
+        for (const lineId of fullyRemovedLineIds) {
+            lineHeightScales.set(lineId, { keys: [0, 1], values: [1, 0] });
+        }
+        for (const tok of removedTokens) {
+            if (fullyRemovedTokenIds.has(tok.id)) {
+                animTokens.push(makeAnim(tok.id, {
+                    opacity: { keys: [0, 1], values: [1, 0] },
+                }));
+            }
+            else {
+                // Partial-line removal: still need width to collapse so the
+                // surrounding text on the line doesn't leave a gap.
+                animTokens.push(makeAnim(tok.id, {
+                    opacity: { keys: [0, 0.5, 1], values: [1, 0, 0] },
+                    widthScale: { keys: [0, 0.5, 1], values: [1, 0, 0] },
+                }));
+            }
+        }
+        const removedTokenIds = new Set(removedTokens.map(t => t.id));
+        try {
+            yield* this.runTransition({ tokens: animTokens, lineHeightScales }, duration, easing);
+        }
+        finally {
+            // Drop the tokens that animated out, then drop any lines that are
+            // either marked-fully-removed or have ended up empty.
+            const remaining = [];
+            for (const line of this.tokenLines) {
+                if (fullyRemovedLineIdSet.has(line.id))
+                    continue;
+                line.tokens = line.tokens.filter(tok => !removedTokenIds.has(tok.id));
+                remaining.push(line);
+            }
+            this.tokenLines = remaining;
+            // Clean up highlight state pointing at removed tokens.
+            for (const id of removedTokenIds)
+                this.highlightedIds.delete(id);
+        }
+    }
+    /**
+     * Find every range matching the literal string `text` in the current
+     * source. Multi-line matches are supported.
+     */
+    findAllRanges(text) {
+        const ranges = [];
+        if (!text)
+            return ranges;
+        const source = this.joinedSource();
+        const lineLens = this.lineLengths();
+        let from = 0;
+        while (true) {
+            const idx = source.indexOf(text, from);
+            if (idx === -1)
+                break;
+            ranges.push(charOffsetsToRange(idx, idx + text.length, lineLens));
+            from = idx + Math.max(1, text.length);
+        }
+        return ranges;
+    }
+    /**
+     * Find the `index`th range matching `text`. Returns null if not found.
+     */
+    findRangeAt(text, index) {
+        const all = this.findAllRanges(text);
+        return all[index] ?? null;
+    }
+    /**
+     * Find the first range matching `text`. Returns null if not found.
+     */
+    findFirstRange(text) {
+        return this.findRangeAt(text, 0);
+    }
+    *runTransition(partial, duration, easing) {
+        const transition = {
+            tokens: partial.tokens,
+            lineHeightScales: partial.lineHeightScales ?? new Map(),
+            progress: 0,
+            introducedIds: partial.introducedIds ?? new Set(),
+        };
+        this.transitions.push(transition);
+        try {
+            yield* tween(duration, (rawT) => {
+                transition.progress = easing ? easing(rawT) : rawT;
+            });
+        }
+        finally {
+            this.transitions = this.transitions.filter(t => t !== transition);
+        }
+    }
+    joinedSource() {
+        return this.tokenLines
+            .map(line => line.tokens.map(t => t.content).join(''))
+            .join('\n');
+    }
+    lineLengths() {
+        return this.tokenLines.map(line => line.tokens.reduce((acc, t) => acc + t.content.length, 0));
+    }
+    /**
+     * Resolve a CodeRange to the set of token ids whose content overlaps the
+     * range. Tokens that partially overlap are included.
+     */
+    tokenIdsInRange(codeRange) {
+        const result = new Set();
+        const lineLens = this.lineLengths();
+        if (lineLens.length === 0)
+            return result;
+        const { start: rStart, end: rEnd } = rangeToCharOffsets(codeRange, lineLens);
+        if (rEnd <= rStart)
+            return result;
+        // Walk tokens with running offsets in the joined string.
+        let off = 0;
+        for (let li = 0; li < this.tokenLines.length; li++) {
+            const line = this.tokenLines[li];
+            for (const tok of line.tokens) {
+                const tStart = off;
+                const tEnd = off + tok.content.length;
+                if (tEnd > rStart && tStart < rEnd) {
+                    result.add(tok.id);
+                }
+                off = tEnd;
+            }
+            if (li < this.tokenLines.length - 1)
+                off += 1; // newline
+        }
+        return result;
+    }
+    /**
+     * Resolve a CodeRange to a structural (fromLine, fromIdx)..(toLine, toIdx)
+     * token span. Snaps to whole tokens (any token that overlaps the range is
+     * included). Returns null if no tokens overlap.
+     */
+    rangeToTokenSpan(codeRange) {
+        const lineLens = this.lineLengths();
+        if (lineLens.length === 0)
+            return null;
+        const { start: rStart, end: rEnd } = rangeToCharOffsets(codeRange, lineLens);
+        if (rEnd <= rStart)
+            return null;
+        let off = 0;
+        let fromLine = -1, fromIdx = -1, toLine = -1, toIdx = -1;
+        for (let li = 0; li < this.tokenLines.length; li++) {
+            const line = this.tokenLines[li];
+            for (let ti = 0; ti < line.tokens.length; ti++) {
+                const tok = line.tokens[ti];
+                const tStart = off;
+                const tEnd = off + tok.content.length;
+                if (tEnd > rStart && tStart < rEnd) {
+                    if (fromLine === -1) {
+                        fromLine = li;
+                        fromIdx = ti;
+                    }
+                    toLine = li;
+                    toIdx = ti + 1;
+                }
+                off = tEnd;
+            }
+            if (li < this.tokenLines.length - 1)
+                off += 1;
+        }
+        if (fromLine === -1)
+            return null;
+        return { fromLine, fromIdx, toLine, toIdx };
+    }
+    drawSelf(draw) {
+        const pad = this.padding;
+        const lineH = this.fontSize * this.lineHeight;
+        const stateById = this.resolveTokenStates();
+        const lineHeightScales = this.resolveLineHeightScales();
+        const lineWidths = this.tokenLines.map(line => {
+            let w = 0;
+            for (const tok of line.tokens) {
+                const ws = stateById.get(tok.id)?.widthScale ?? 1;
+                w += this.tokenAdvance(draw, tok.content) * ws;
+            }
+            return w;
+        });
+        const maxLineWidth = Math.max(...lineWidths, 0);
+        const gutter = this.gutterWidth(draw);
+        const blockWidth = maxLineWidth + gutter + pad.left + pad.right;
+        const lineHeights = this.tokenLines.map(line => lineH * (lineHeightScales.get(line.id) ?? 1));
+        const totalContentHeight = lineHeights.reduce((a, b) => a + b, 0);
+        const blockHeight = totalContentHeight + pad.top + pad.bottom;
+        const startX = -blockWidth / 2 + pad.left + gutter;
+        const startY = -blockHeight / 2 + pad.top;
+        // Gutter line-number color: a muted version of the standard text color.
+        const lineNumColor = [0.45, 0.5, 0.55, 1];
+        let yCursor = startY;
+        // Visible line counter — only fully-non-collapsed lines get a number.
+        // We number every modeled line (1-indexed) regardless of hScale so that
+        // animations that collapse a line still show its label fading out, which
+        // matches normal editor behaviour.
+        for (let lineIdx = 0; lineIdx < this.tokenLines.length; lineIdx++) {
+            const line = this.tokenLines[lineIdx];
+            const hScale = lineHeightScales.get(line.id) ?? 1;
+            // The renderer centers each single-token block on the (x, y) we pass
+            // (it shifts by -blockWidth/2, -blockHeight/2). So we anchor every
+            // token at the *center* of its cell, not its top-left/baseline:
+            //   - y: the vertical middle of this line's slot. The slot is
+            //     lineHeights[lineIdx] tall (= lineH * hScale); the full-size
+            //     glyph block stays centered in it as the slot collapses.
+            //   - x: the horizontal middle of each token (set per-token below).
+            // Passing lineHeight makes the token block's height deterministic
+            // (fontSize * lineHeight) rather than the font's natural metrics, so
+            // the vertical center lands exactly on the slot center.
+            const centerY = yCursor + lineHeights[lineIdx] / 2;
+            if (this.showLineNumbers) {
+                const label = String(lineIdx + 1);
+                const labelW = draw.measureText(label, this.fontSize, this.fontFamily);
+                // Right-align the number so its right edge sits one gutterGap to
+                // the left of where the code text begins.
+                const gx = -blockWidth / 2 + pad.left + (gutter - labelW) - this.gutterGap(draw);
+                // When a highlight is active, the number dims along with the code
+                // unless the WHOLE line is highlighted. We take the min opacity of
+                // the line's tokens: a fully-highlighted line is all 1s (bright),
+                // any dimmed token drags the number down. This also tweens for
+                // free during highlight()/resetHighlight() transitions.
+                const lineHighlightOpacity = this.lineHighlightOpacity(line, stateById);
+                draw.text({
+                    text: label,
+                    fontSize: this.fontSize,
+                    fontFamily: this.fontFamily,
+                    lineHeight: this.lineHeight,
+                    x: gx + labelW / 2,
+                    y: centerY,
+                    align: 'left',
+                })
+                    .fill([{ type: "color", color: lineNumColor, opacity: hScale * lineHighlightOpacity }]);
+            }
+            let x = startX;
+            for (const token of line.tokens) {
+                if (token.content.length === 0)
+                    continue;
+                const color = token.color ? parseColor(token.color) : [0.82, 0.84, 0.86, 1];
+                const state = stateById.get(token.id);
+                const opacity = (state?.opacity ?? 1) * hScale;
+                const offsetY = state?.offsetY ?? 0;
+                const widthScale = state?.widthScale ?? 1;
+                // Advance width includes letterSpacing, matching what the
+                // renderer lays down when drawing with the same letterSpacing.
+                const tokWidth = this.tokenAdvance(draw, token.content);
+                if (opacity > 0 && widthScale > 0) {
+                    draw.text({
+                        text: token.content,
+                        fontSize: this.fontSize,
+                        fontFamily: this.fontFamily,
+                        lineHeight: this.lineHeight,
+                        letterSpacing: this.letterSpacing,
+                        // Token is drawn at its natural width regardless of
+                        // widthScale (widthScale only shrinks the advance), so
+                        // its visual center is always x + tokWidth/2.
+                        x: x + tokWidth / 2,
+                        y: centerY + offsetY,
+                        align: 'left',
+                    })
+                        .fill([{ type: "color", color, opacity }]);
+                }
+                x += tokWidth * widthScale;
+            }
+            yCursor += lineHeights[lineIdx];
+        }
+    }
+    // Is a highlight currently engaged — either a persistent dim is set, or a
+    // highlight()/resetHighlight() cross-fade is mid-flight? Intro/exit
+    // animations (append/insert/remove) are NOT highlights, so the line-number
+    // dimming below stays inert for them and only `hScale` affects the number.
+    isHighlightActive() {
+        if (this.highlightDimOpacity !== null)
+            return true;
+        return this.transitions.some(tr => tr.introducedIds.size === 0
+            && tr.lineHeightScales.size === 0);
+    }
+    // Opacity multiplier for a line's number under the active highlight. The
+    // number stays bright only when the WHOLE line is highlighted, so we take
+    // the min token opacity on the line. Returns 1 (no dimming) when no
+    // highlight is active, so insert/remove intros don't drag the number down.
+    lineHighlightOpacity(line, stateById) {
+        if (!this.isHighlightActive())
+            return 1;
+        let min = 1;
+        for (const tok of line.tokens) {
+            if (tok.content.length === 0)
+                continue;
+            const op = stateById.get(tok.id)?.opacity ?? 1;
+            if (op < min)
+                min = op;
+        }
+        return min;
+    }
+    resolveTokenStates() {
+        const out = new Map();
+        if (this.highlightDimOpacity !== null) {
+            const dim = this.highlightDimOpacity;
+            for (const line of this.tokenLines) {
+                for (const tok of line.tokens) {
+                    const isHighlighted = this.highlightedIds.has(tok.id);
+                    out.set(tok.id, { opacity: isHighlighted ? 1 : dim, offsetY: 0, widthScale: 1 });
+                }
+            }
+        }
+        for (const tr of this.transitions) {
+            const t = tr.progress;
+            for (const at of tr.tokens) {
+                const op = sampleCurve(at.opacityKeys, at.opacity, t);
+                const oy = sampleCurve(at.offsetYKeys, at.offsetY, t);
+                const ws = sampleCurve(at.widthScaleKeys, at.widthScale, t);
+                const prev = out.get(at.id);
+                out.set(at.id, {
+                    opacity: op,
+                    offsetY: oy,
+                    widthScale: prev ? prev.widthScale * ws : ws,
+                });
+            }
+        }
+        return out;
+    }
+    resolveLineHeightScales() {
+        const out = new Map();
+        for (const tr of this.transitions) {
+            const t = tr.progress;
+            for (const [lineId, curve] of tr.lineHeightScales) {
+                const v = sampleCurve(curve.keys, curve.values, t);
+                out.set(lineId, (out.get(lineId) ?? 1) * v);
+            }
+        }
+        return out;
+    }
+}
+__decorate([
+    property({ default: "" })
+], Code.prototype, "code", void 0);
+__decorate([
+    property({ default: "typescript" })
+], Code.prototype, "language", void 0);
+__decorate([
+    property({ default: "JetBrains Mono" })
+], Code.prototype, "fontFamily", void 0);
+__decorate([
+    property({ default: "github-dark" })
+], Code.prototype, "theme", void 0);
+__decorate([
+    property({ default: 16 })
+], Code.prototype, "fontSize", void 0);
+__decorate([
+    property({ default: 1.6 })
+], Code.prototype, "lineHeight", void 0);
+__decorate([
+    property({ default: 1.1 })
+], Code.prototype, "letterSpacing", void 0);
+__decorate([
+    property({ default: false })
+], Code.prototype, "showLineNumbers", void 0);
+__decorate([
+    property({ default: 4 })
+], Code.prototype, "lineNumberGap", void 0);
+__decorate([
+    property({ default: 0, mapper: resolvePadding, tween: lerpEdgeInset })
+], Code.prototype, "padding", void 0);
+function makeAnim(id, curves) {
+    const op = curves.opacity ?? { keys: [0, 1], values: [1, 1] };
+    const oy = curves.offsetY ?? { keys: [0, 1], values: [0, 0] };
+    const ws = curves.widthScale ?? { keys: [0, 1], values: [1, 1] };
+    return {
+        id,
+        opacity: op.values,
+        opacityKeys: op.keys,
+        offsetY: oy.values,
+        offsetYKeys: oy.keys,
+        widthScale: ws.values,
+        widthScaleKeys: ws.keys,
+    };
+}
+/**
+ * Split `tokens` at character offset `col` (relative to the joined content of
+ * the tokens). If `col` falls inside a token, that token is split into two new
+ * tokens with fresh ids (the original id is discarded — it didn't exist as a
+ * single unit on either side of the cut).
+ */
+function splitTokensAt(tokens, col) {
+    const before = [];
+    const after = [];
+    let off = 0;
+    for (const tok of tokens) {
+        const tStart = off;
+        const tEnd = off + tok.content.length;
+        if (tEnd <= col) {
+            before.push(tok);
+        }
+        else if (tStart >= col) {
+            after.push(tok);
+        }
+        else {
+            const cut = col - tStart;
+            before.push(makeIdToken(tok.content.slice(0, cut), tok.color));
+            after.push(makeIdToken(tok.content.slice(cut), tok.color));
+        }
+        off = tEnd;
+    }
+    return { before, after };
+}
+/**
+ * Convert [start, end) character offsets in joined source to a CodeRange.
+ * Lines/cols in the returned range are 1-indexed.
+ */
+function charOffsetsToRange(start, end, lineLengths) {
+    let off = 0;
+    let startLine = 1, startCol = 1, endLine = 1, endCol = 1;
+    let foundStart = false;
+    for (let li = 0; li < lineLengths.length; li++) {
+        const lineStart = off;
+        const lineEnd = off + lineLengths[li];
+        if (!foundStart && start >= lineStart && start <= lineEnd) {
+            startLine = li + 1;
+            startCol = (start - lineStart) + 1;
+            foundStart = true;
+        }
+        if (end >= lineStart && end <= lineEnd) {
+            endLine = li + 1;
+            endCol = (end - lineStart) + 1;
+            break;
+        }
+        off = lineEnd + 1;
+    }
+    return { startLine, startCol, endLine, endCol };
+}
+//# sourceMappingURL=node.js.map