@motionscript/code 0.1.0-alpha.5 → 0.1.0-alpha.6

package/dist/node.js

@@ -1,867 +1,342 @@
-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 { node, Clip, Node2D, property, insetsProperty, lerpNumber, colorOps, command, driveCommand, } from "@motionscript/sdk";
-import { rangeToCharOffsets, charOffsetsToRange, TokenAdvanceCache, tokenizeCodeToIdLines, defaultCodeDiff, layoutCode, metricsSignature, makeAnim, defaultCodePhases, resolveTokenStates, moveProgress, canHighlight, ensureHighlighter, normalizeSource, DefaultHighlightStyle, drawCode, } from "./engine.js";
+import { Graphics2D, Paint, Types, component2d, lerpNumber, } from "@motionscript/sdk";
+import { DefaultHighlightStyle, TokenAdvanceCache, canHighlight, charOffsetsToRange, defaultCodeDiff, defaultCodePhases, drawCode, ensureHighlighter, layoutCode, makeAnim, metricsSignature, moveProgress, normalizeSource, rangeToCharOffsets, resolveTokenStates, tokenizeCodeToIdLines, } from "./engine.js";
 /** A row band's paint and corner radius when `highlightRows` is given neither. */
 const ROW_BAND_COLOR = "rgba(255, 255, 255, 0.12)";
 const ROW_BAND_RADIUS = 6;
-let Code = class Code extends Node2D {
-    /** The settled structure. During an edit, the structure the edit lands on. */
-    tokenLines = [];
-    /** The source `tokenLines` spells, so a frame compares it with `code` without joining every token. */
-    _linesSource = "";
-    /** What `tokenLines` were coloured and split with, so a frame notices a `language` or `theme` that has moved since. */
-    _linesBasis = { language: "", theme: "", highlighted: false };
-    /** The last `code` seen and its normalised form, so a frame that finds it unchanged does not scan it. */
-    _rawCode = null;
-    _normalCode = "";
-    transitions = [];
-    // Caches expensive scope.measureText() calls; cleared when the font
-    // signature (fontSize|fontFamily) changes. See TokenAdvanceCache.
-    advanceCache = new TokenAdvanceCache();
-    // Layout cache for *settled* frames. Bumped whenever tokenLines is
-    // reassigned, so a cache hit only ever happens on identical content. Frames
-    // inside a structural edit are served from that edit's own two cached
-    // layouts instead (see StructuralTransition).
-    structureVersion = 0;
-    layoutCacheKey = null;
-    layoutCache = null;
-    // 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();
-    // The bands highlightRows() left behind whole rows; empty means none.
-    rowBands = [];
-    /**
-     * Which token became which across an edit, and when each part of that
-     * edit happens. Construction-time-only (see {@link CodeStrategies}) —
-     * resolved once here rather than left as `?? defaultX` at every call site.
-     */
-    diffStrategy;
-    phaseStrategy;
-    constructor(props) {
-        super(props);
-        this.diffStrategy = props?.diffStrategy ?? defaultCodeDiff;
-        this.phaseStrategy = props?.phaseStrategy ?? defaultCodePhases;
-        this.applyProp("width", props?.width ?? "hug");
-        this.applyProp("height", props?.height ?? "hug");
-        this.applyProp("_driven", false);
-        // Best-effort, for a highlighter constructed outside the asset pipeline
-        // entirely (a bare `new Code(...)` in a test or a headless measure). On
-        // the timeline the authoritative load is the one `declareAssets` declares,
-        // which `AssetManager.loadAt` awaits *before* this node is laid out — so
-        // there the tokens are right the first time rather than upgrading later.
-        // (Theme is a synchronous color style; only the language parser loads.)
-        ensureHighlighter(undefined, [this.language]).catch(() => { });
-        this._sync();
-    }
-    /**
-     * Swap in a new settled structure, invalidating the layout cache.
-     *
-     * The one place `tokenLines` is written, because the cache key is a version
-     * counter rather than a hash of the content — a write that skipped the bump
-     * would keep serving the previous frame's geometry for the new listing.
-     */
-    setLines(lines, source, basis = this._basis()) {
-        if (this.tokenLines === lines)
-            return;
-        this.tokenLines = lines;
-        this._linesSource = source;
-        this._linesBasis = basis;
-        this.structureVersion++;
-        this.layoutCache = null;
-        this.layoutCacheKey = null;
-    }
-    /**
-     * The monospaced face this block measures and draws with, and the syntax
-     * grammar it tokenizes with.
-     *
-     * Both belong to *layout*: token x positions are measured against the face,
-     * and how many tokens there are depends on the grammar. Declared here, the
-     * grammar goes on the timeline as an ordinary asset: `AssetManager.loadAt`
-     * waits for it before the frame is laid out, so the first measurement is the
-     * right one. Nothing is freed on eviction — parsers are cheap to keep
-     * resident. The loader touches no node: `renderContent` re-tokenizes once
-     * the grammar is there.
-     */
-    declareAssets(assets) {
-        super.declareAssets(assets);
-        assets.font(this.fontFamily);
-        assets.loader(`shiki:lang:${this.language}`, grammarLoader(this.language), { gate: "layout" });
-    }
-    // ── Geometry ────────────────────────────────────────────────────────────
-    metrics() {
-        return {
-            fontSize: this.fontSize,
-            fontFamily: this.fontFamily,
-            lineHeight: this.lineHeight,
-            letterSpacing: this.letterSpacing,
-            padding: this.padding,
-            showLineNumbers: this.showLineNumbers,
-            lineNumberGap: this.lineNumberGap,
-        };
-    }
-    /** The structural edit currently in flight, if any. */
-    activeEdit() {
-        for (let i = this.transitions.length - 1; i >= 0; i--) {
-            const tr = this.transitions[i];
-            if (tr.kind === "structural")
-                return tr;
-        }
-        return null;
-    }
-    /** The row-band change in flight, if any; the latest wins. */
-    activeRows() {
-        for (let i = this.transitions.length - 1; i >= 0; i--) {
-            const tr = this.transitions[i];
-            if (tr.kind === "rows")
-                return tr;
-        }
-        return null;
-    }
-    settledLayout(m, scope) {
-        const key = `${this.structureVersion}|${metricsSignature(m)}|${this.advanceCache.signature(m.fontSize, m.fontFamily)}`;
-        if (this.layoutCache && this.layoutCacheKey === key)
-            return this.layoutCache;
-        const layout = layoutCode(this.tokenLines, m, this.advanceCache, scope);
-        this.layoutCache = layout;
-        this.layoutCacheKey = key;
-        return layout;
-    }
-    /**
-     * The one or two layouts this frame is drawn from.
-     *
-     * A settled frame has one. A frame inside an edit has two — where every
-     * token was, and where it is going — and the frame is a point between them.
-     * That is the whole reason an insert no longer piles its glyphs at the left
-     * margin: a token's destination is *computed*, not approximated by collapsing
-     * the advance of everything around it.
-     *
-     * Both endpoints are fixed for the edit's duration, so they are built once
-     * and cached on the transition rather than rebuilt per frame.
-     */
-    frameLayout(scope) {
-        const m = this.metrics();
-        const edit = this.activeEdit();
-        if (!edit) {
-            const layout = this.settledLayout(m, scope);
-            return { from: layout, to: layout, edit: null };
-        }
-        const key = `${metricsSignature(m)}|${this.advanceCache.signature(m.fontSize, m.fontFamily)}`;
-        if (edit.layoutKey !== key || !edit.fromLayout || !edit.toLayout) {
-            edit.fromLayout = layoutCode(edit.from, m, this.advanceCache, scope);
-            edit.toLayout = layoutCode(edit.to, m, this.advanceCache, scope);
-            edit.layoutKey = key;
-        }
-        return { from: edit.fromLayout, to: edit.toLayout, edit };
-    }
-    measure(constraints, scope) {
-        this._sync();
-        this.advanceCache.sync(this.advanceCache.signature(this.fontSize, this.fontFamily));
-        const wm = this.width;
-        const hm = this.height;
-        const { from, to, edit } = this.frameLayout(scope);
-        const t = moveProgress(edit);
-        const innerW = edit ? lerpNumber(from.innerW, to.innerW, t) : to.innerW;
-        const innerH = edit ? lerpNumber(from.innerH, to.innerH, t) : to.innerH;
-        const resolvedW = typeof wm === "number"
-            ? wm
-            : wm === "hug"
-                ? innerW + this.padding.left + this.padding.right
-                : constraints.maxWidth ?? 0;
-        const resolvedH = typeof hm === "number"
-            ? hm
-            : hm === "hug"
-                ? innerH + this.padding.top + this.padding.bottom
-                : constraints.maxHeight ?? 0;
-        return { width: resolvedW, height: resolvedH };
-    }
-    renderContent(ctx) {
-        // Refuse the ambient `<DefaultTextStyle>` / theme typography defaults for
-        // everything drawn inside this node.
-        //
-        // Those defaults describe the *document's* prose — a display face, a
-        // heading weight, a paragraph line-height — and a code block is not prose.
-        // Its own props are the vocabulary: `fontFamily` defaults to a monospaced
-        // face because column alignment depends on it, `letterSpacing` and
-        // `lineHeight` are tuned against that face, and every token is laid out at
-        // an x measured from those exact values. A scene-wide serif family or a
-        // 700 weight arriving through the draw scope would shape glyphs the
-        // geometry was never measured for, and the block would come apart
-        // column-by-column rather than merely look different.
-        ctx.pushTextStyle(null);
-        try {
-            // Also what upgrades a frame drawn as plain text to full highlighting
-            // the moment the asset loader resolves the grammar.
-            this._sync();
-            super.renderContent(ctx);
-        }
-        finally {
-            ctx.popTextStyle();
-        }
-    }
-    renderSelf(ctx) {
-        this.drawSelf(ctx);
-    }
-    /** A listing holds a listing — `append`/`insert`/`erase` are how it grows. */
-    acceptsChild(_child) {
-        return false;
-    }
-    /**
-     * The node's laid-out rect as a clip outline, so `clip` and any backdrop
-     * effect are confined to the block rather than to nothing — a listing set on
-     * a card is exactly where a backdrop blur is asked for.
-     */
-    clipSelf() {
-        return new Clip().rect({
-            width: this.layoutBounds.width,
-            height: this.layoutBounds.height,
-        });
-    }
-    /**
-     * A listing is grabbed by its **text**, line by ragged line, rather than by
-     * the rectangle the lines were laid out in.
-     *
-     * The default narrows a node's grab region to the outline it declares, and
-     * this node's outline is a box it no longer paints anything into. Code is
-     * mostly whitespace: a ten-line snippet with one long line is a rectangle
-     * that is largely empty, and in an editor every one of those empty pixels
-     * swallows a click meant for whatever sits behind or beneath it. Short of the
-     * text itself there is nothing there to have clicked.
-     *
-     * So the region is the union of the lines' own extents — each a line-height
-     * slot as wide as that line's ink — plus the gutter where line numbers are
-     * showing, since those are drawn glyphs too.
-     *
-     * Answered from the **cached** layout, which is what the last frame drew
-     * from, because a hit test arrives with no measurement scope and text cannot
-     * be measured without one. Where there is no usable cache — before the first
-     * frame, or mid-edit, when the geometry is an interpolation of two structures
-     * held on the transition — the box is the honest answer rather than a
-     * silhouette measured against stale metrics.
-     */
-    hitTestSelf(local, tolerance) {
-        this._sync();
-        const layout = this.hitLayout();
-        if (!layout)
-            return super.hitTestSelf(local, tolerance);
-        // Never *wider* than the box: `hug` sizes to the ink, but a fixed width
-        // narrower than the longest line would otherwise be hit outside itself.
-        if (!super.hitTestSelf(local, tolerance))
-            return false;
-        const half = (this.fontSize * this.lineHeight) / 2;
-        // Line numbers sit in the gutter, to the left of every line's own start,
-        // so a numbered blank line is still grabbable — by its number.
-        const gutter = this.showLineNumbers ? layout.gutter : 0;
-        const left = layout.startX - gutter - tolerance;
-        for (let i = 0; i < layout.lineY.length; i++) {
-            const width = (layout.lineW[i] ?? 0) + gutter;
-            if (width <= 0)
-                continue;
-            if (Math.abs(local.y - layout.lineY[i]) > half + tolerance)
-                continue;
-            if (local.x >= left && local.x <= layout.startX + (layout.lineW[i] ?? 0) + tolerance) {
-                return true;
-            }
-        }
-        return false;
-    }
-    /**
-     * The layout a hit test may be answered from: the settled cache, and only
-     * while it still matches the node's current metrics.
-     *
-     * The key is the one {@link settledLayout} writes minus its scope-dependent
-     * half — every input to it (`metricsSignature`, the advance cache's own
-     * signature) is readable without a measurer, which is precisely what makes
-     * the check possible here.
-     */
-    hitLayout() {
-        if (!this.layoutCache || this.activeEdit())
-            return null;
-        const m = this.metrics();
-        const key = `${this.structureVersion}|${metricsSignature(m)}|${this.advanceCache.signature(m.fontSize, m.fontFamily)}`;
-        return this.layoutCacheKey === key ? this.layoutCache : null;
-    }
-    // ── Editing commands ────────────────────────────────────────────────────
-    /**
-     * Append `code` to the end of the listing.
-     *
-     * Stated as *what the source becomes*; {@link editTo} works out the rest —
-     * which is why appending a line that closes a block re-highlights the lines
-     * above it, instead of colouring the new text as its own program.
-     */
-    append(args) {
-        this._sync();
-        const { code } = args.data;
-        return this.editTo(this.joinedSource() + code, args.duration, args.easing);
-    }
-    /** Insert `code` above the listing. */
-    prepend(args) {
-        this._sync();
-        const { code } = args.data;
-        return this.editTo(code + this.joinedSource(), args.duration, args.easing);
-    }
-    /**
-     * 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(args) {
-        this._sync();
-        const { position, code } = args.data;
-        const source = this.joinedSource();
-        const offset = this.offsetAt(position);
-        return this.editTo(source.slice(0, offset) + code + source.slice(offset), args.duration, args.easing);
-    }
-    /**
-     * Erase the code in `codeRange`.
-     *
-     * Named `erase` rather than `remove` because a `Code` is also a node, and
-     * `Node.remove(child)` takes a child out of the tree. Two methods spelled
-     * the same on one object, doing entirely different things, is worse than one
-     * of them having a slightly less obvious name.
-     *
-     * A range that covers whole lines takes their line breaks with it, so the
-     * rows below close up; a range inside a line takes only the characters, and
-     * the rest of the line reflows around the hole.
-     */
-    erase(args) {
-        this._sync();
-        const { target: codeRange } = args.data;
-        const { duration, easing } = args;
-        const source = this.joinedSource();
-        let { start, end } = rangeToCharOffsets(codeRange, this.lineLengths());
-        // `lines(2)` resolves to the *characters* of line 2, not to the row —
-        // taking those alone would leave an empty line behind where an editor
-        // would have closed the gap. This is also what makes a blank row
-        // removable at all: it has no characters, so its range is empty, and
-        // "delete nothing" is not what `lines(2)` was asking for.
-        const atLineStart = start === 0 || source[start - 1] === "\n";
-        const atLineEnd = end === source.length || source[end] === "\n";
-        if (atLineStart && atLineEnd) {
-            if (end < source.length)
-                end += 1;
-            else if (start > 0)
-                start -= 1;
-        }
-        else if (end <= start) {
-            return driveCommand(duration, () => { });
-        }
-        if (end <= start)
-            return driveCommand(duration, () => { });
-        return this.editTo(source.slice(0, start) + source.slice(end), duration, easing);
-    }
-    /** Replace the code in `codeRange` with `replacement`. */
-    replace(args) {
-        this._sync();
-        const { target: codeRange, replacement } = args.data;
-        const source = this.joinedSource();
-        const { start, end } = rangeToCharOffsets(codeRange, this.lineLengths());
-        return this.editTo(source.slice(0, start) + replacement + source.slice(end), args.duration, args.easing);
-    }
-    /**
-     * Highlight a range of code — or several at once (e.g.
-     * `CodeRanges.lines(2).word(5, 1, 3)`) — highlighted as one set: tokens
-     * within any of the ranges stay at opacity 1, tokens outside dim to
-     * `dim`. Persistent — call resetHighlight() to undo, or call highlight()
-     * again with a different range to cross-fade.
-     */
-    highlight(args) {
-        this._sync();
-        const { target: codeRange, dim } = args.data;
-        const { duration, easing } = args;
-        const toDim = dim ?? 0.4;
-        const matchIds = this.tokenIdsInRanges(normalizeCodeRanges(codeRange));
-        if (matchIds.size === 0)
-            return driveCommand(duration, () => { });
-        const fromDim = this.highlightDimOpacity ?? 1;
-        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, { keys: [0, 1], values: [fromOp, toOp] }));
-            }
-        }
-        // Which tokens are dimmed is state the *next* highlight reads to know
-        // what it is cross-fading from, so it is committed at the end and put
-        // back below it — a `finally` could only ever have run forwards.
-        return this.runDim(animTokens, duration, easing, (done) => {
-            this.highlightDimOpacity = done ? toDim : (hadPrevious ? fromDim : null);
-            this.highlightedIds = done ? matchIds : previousIds;
-        });
-    }
-    /**
-     * Fade all dimmed tokens back to opacity 1 and clear the persistent
-     * highlight state.
-     */
-    resetHighlight(args) {
-        this._sync();
-        const { duration, easing } = args;
-        if (this.highlightDimOpacity === null)
-            return driveCommand(duration, () => { });
-        const fromDim = this.highlightDimOpacity;
-        const previousIds = this.highlightedIds;
-        const animTokens = [];
-        for (const line of this.tokenLines) {
-            for (const tok of line.tokens) {
-                const fromOp = previousIds.has(tok.id) ? 1 : fromDim;
-                if (fromOp === 1)
-                    continue;
-                animTokens.push(makeAnim(tok.id, { keys: [0, 1], values: [fromOp, 1] }));
-            }
-        }
-        return this.runDim(animTokens, duration, easing, (done) => {
-            this.highlightDimOpacity = done ? null : fromDim;
-            this.highlightedIds = done ? new Set() : previousIds;
-        });
-    }
-    /**
-     * Lay a band of `color` behind whole rows: every line a range touches, across
-     * the block. Persistent, and independent of {@link highlight}'s dimming. A
-     * second call slides and resizes the bands onto their new rows, pairing them
-     * in the order given; `resetRowHighlight()` fades them out. A band keeps to
-     * its lines when an edit moves them.
-     */
-    highlightRows(args) {
-        this._sync();
-        const { target, color, radius } = args.data;
-        const paint = colorOps.resolve(color ?? ROW_BAND_COLOR);
-        const bands = this.rowBandsIn(normalizeCodeRanges(target), paint, Math.max(0, radius ?? ROW_BAND_RADIUS));
-        return this.runRows(this.rowBands, bands, args.duration, args.easing);
-    }
-    /** Fade every row band out and clear them. */
-    resetRowHighlight(args) {
-        this._sync();
-        return this.runRows(this.rowBands, [], args.duration, args.easing);
-    }
-    /**
-     * Animate the listing to a new source.
-     *
-     * The engine behind every editing command, and behind `to({ code })`. Every
-     * edit is expressed as the source it produces, tokenized, and then *diffed*
-     * against what is on screen — so a token that survived the edit keeps its
-     * identity and simply travels to its new column, and only what genuinely
-     * changed is faded.
-     *
-     * The result runs in three phases (see `phaseStrategy`): what is leaving
-     * fades out, what stays reflows, and only then does what is new arrive.
-     * Playing them together is what made a replacement read as a cross-dissolve
-     * of two unrelated listings rather than as an edit being made.
-     */
-    editTo(next, duration, easing) {
-        if (!this.mounted)
-            return driveCommand(duration, () => { });
-        next = normalizeSource(next);
-        const from = this.tokenLines;
-        const fromCode = this.joinedSource();
-        if (next === fromCode)
-            return driveCommand(duration, () => { });
-        const fromBasis = this._linesBasis;
-        const basis = this._basis();
-        const edit = this.diffStrategy(from, tokenizeCodeToIdLines(next, this.language, this.theme));
-        const transition = {
-            kind: "structural",
-            from,
-            to: edit.lines,
-            removedIds: edit.removedIds,
-            addedIds: edit.addedIds,
-            enteringLineIds: edit.newLineIds,
-            fromColorById: edit.fromColorById,
-            phases: this.phaseStrategy(edit.removedIds.size > 0, edit.addedIds.size > 0),
-            progress: 0,
-            layoutKey: null,
-            fromLayout: null,
-            toLayout: null,
-        };
-        // A re-tokenize triggered by the grammar landing mid-edit would mint fresh
-        // ids underneath this transition, and the transition is keyed by the ones
-        // it captured — so `_sync` leaves the structure alone while an edit is in
-        // flight, and compares the basis recorded here once it settles.
-        return driveCommand(duration, (t) => {
-            this._drive();
-            const running = t > 0 && t < 1;
-            const index = this.transitions.indexOf(transition);
-            if (running && index < 0)
-                this.transitions.push(transition);
-            else if (!running && index >= 0)
-                this.transitions.splice(index, 1);
-            transition.progress = easing ? easing(t) : t;
-            // The settle, in both directions: asked for a time before the edit
-            // starts, the listing is what preceded it; at or past the end, the
-            // result. A `finally` could only ever have run forwards.
-            if (t <= 0) {
-                this.setLines(from, fromCode, fromBasis);
-                this._writeProp("code", fromCode);
-            }
-            else {
-                this.setLines(edit.lines, next, basis);
-                this._writeProp("code", next);
-            }
-        });
-    }
-    /**
-     * Put a dim transition on the stack, drive its progress, take it off and
-     * commit at the end.
-     *
-     * A {@link Command} rather than a generator, which is what makes a listing
-     * scrubbable: membership is a function of `t` (on the stack for `0 < t < 1`,
-     * off it outside), `settle(done)` replaces the `finally` and takes *which
-     * way*, and `progress` is assigned from `t` rather than accumulated.
-     */
-    runDim(tokens, duration, easing, settle) {
-        if (!this.mounted)
-            return driveCommand(duration, () => { });
-        const transition = { kind: "dim", tokens, progress: 0 };
-        return driveCommand(duration, (t) => {
-            this._drive();
-            const running = t > 0 && t < 1;
-            const index = this.transitions.indexOf(transition);
-            if (running && index < 0)
-                this.transitions.push(transition);
-            else if (!running && index >= 0)
-                this.transitions.splice(index, 1);
-            transition.progress = easing ? easing(t) : t;
-            settle?.(t >= 1);
-        });
-    }
-    /** The same membership rule as {@link runDim}: on the stack strictly inside the run, settled at either end. */
-    runRows(from, to, duration, easing) {
-        if (!this.mounted || (from.length === 0 && to.length === 0))
-            return driveCommand(duration, () => { });
-        const transition = { kind: "rows", from, to, progress: 0 };
-        return driveCommand(duration, (t) => {
-            this._drive();
-            const running = t > 0 && t < 1;
-            const index = this.transitions.indexOf(transition);
-            if (running && index < 0)
-                this.transitions.push(transition);
-            else if (!running && index >= 0)
-                this.transitions.splice(index, 1);
-            transition.progress = easing ? easing(t) : t;
-            this.rowBands = t >= 1 ? to : from;
-        });
-    }
-    /**
-     * Route a tweened `code` through the diff engine.
-     *
-     * `to({ code })` is the form an author reaches for first — it is how every
-     * other prop is animated — and a bare string prop would otherwise land in the
-     * generic tween's discrete-snap bucket and simply cut at the end. Intercepted
-     * here it becomes the same three-phase edit the named commands produce, while
-     * the rest of the step's props tween alongside it untouched.
-     */
-    _prepareStep(to, duration, easing) {
-        if (!this.mounted)
-            return super._prepareStep(to, duration, easing);
-        this._sync();
-        const next = typeof to.code === "string" ? normalizeSource(to.code) : undefined;
-        if (next === undefined || next === this.joinedSource()) {
-            return super._prepareStep(to, duration, easing);
-        }
-        const rest = { ...to };
-        delete rest.code;
-        // Prepared before the edit, so a step that also moves `fontSize` has
-        // snapshotted its own start value against the listing that is still on
-        // screen.
-        const others = super._prepareStep(rest, duration, easing);
-        const edit = this.editTo(next, duration, easing)._stepper();
-        return {
-            seek: (elapsed) => {
-                others.seek(elapsed);
-                edit.seek(elapsed);
+/** Each `Code` component's strategies and edit cache, by the node class it generated. */
+const kits = new WeakMap();
+const NO_FOCUS = { dim: null, ids: new Set(), fade: null };
+const NO_BANDING = { bands: [], fade: null };
+/** A private entry: commands write it, documents and calls never see it. */
+function own(initial) {
+    return Types.custom(initial, { private: true });
+}
+const TARGET = Types.custom(undefined, { kind: "selector" });
+const TEXT = Types.text("", { multiline: true });
+/**
+ * A `Code` whose edits are paired and timed by `strategies`. {@link Code} is
+ * the one with the defaults; a project wanting another hands its own to the
+ * engine in its place (the key is the same).
+ *
+ * A listing and nothing else: no paint slots, and no box behind the tokens. A
+ * listing set on a card is a `Code` inside a hugging `Rect`.
+ */
+export function defineCode(strategies = {}) {
+    const kit = {
+        diff: strategies.diffStrategy ?? defaultCodeDiff,
+        phases: strategies.phaseStrategy ?? defaultCodePhases,
+        edits: new WeakMap(),
+    };
+    const act = (timeline, frame) => (frame ? timeline.animate(frame) : timeline.wait(0));
+    const component = component2d({
+        key: "code",
+        state: {
+            code: Types.custom("", { lerp: blendSource }),
+            language: "typescript",
+            fontFamily: "Fira Mono",
+            /** A built-in or registered theme name (e.g. `'github-dark'`), or a `CodeHighlightStyle` object. */
+            theme: Types.custom(DefaultHighlightStyle.name),
+            fontSize: 16,
+            lineHeight: 1.6,
+            // Extra space after every glyph, in px: folded into the advance a token is measured at.
+            letterSpacing: 1.1,
+            showLineNumbers: false,
+            // In space-widths, so it scales with fontSize.
+            lineNumberGap: 2,
+            listing: own(null),
+            edit: own(null),
+            focus: own(NO_FOCUS),
+            banding: own(NO_BANDING),
+        },
+        defaults: { width: "hug", height: "hug" },
+        allowedChildren: [],
+        // The grammar gates layout: how many tokens there are, and so where each sits, depends on it.
+        load: (loader, state) => {
+            loader.font(state.fontFamily);
+            loader.task(`shiki:lang:${state.language}`, grammarLoader(state.language), { before: "layout" });
+        },
+        commands: {
+            /** Append `code` to the end of the listing. */
+            append: {
+                args: { code: TEXT },
+                run: (timeline, state) => {
+                    const seen = current(state, kit);
+                    return act(timeline, editFrame(kit, seen, seen.source + timeline.args.code, basisOf(state)));
+                },
             },
-            advance: (dt) => {
-                const othersDone = others.advance(dt);
-                const editDone = edit.advance(dt);
-                return othersDone && editDone;
+            /** Insert `code` above the listing. */
+            prepend: {
+                args: { code: TEXT },
+                run: (timeline, state) => {
+                    const seen = current(state, kit);
+                    return act(timeline, editFrame(kit, seen, timeline.args.code + seen.source, basisOf(state)));
+                },
             },
-        };
-    }
-    // ── Source queries ──────────────────────────────────────────────────────
-    /**
-     * 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;
-        this._sync();
-        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);
-    }
-    joinedSource() {
-        return this._linesSource;
-    }
-    lineLengths() {
-        return this.tokenLines.map(line => line.tokens.reduce((acc, t) => acc + t.content.length, 0));
-    }
-    /** Character offset of a 1-indexed (line, col), clamped into the document. */
-    offsetAt(position) {
-        const lens = this.lineLengths();
-        if (lens.length === 0)
-            return 0;
-        const [rawLine, rawCol] = position;
-        const li = Math.max(0, Math.min(lens.length - 1, rawLine - 1));
-        let offset = 0;
-        for (let k = 0; k < li; k++)
-            offset += lens[k] + 1;
-        return offset + Math.max(0, Math.min(lens[li], rawCol - 1));
-    }
-    /**
-     * Resolve one or more CodeRanges to the set of token ids whose content
-     * overlaps any of them. Tokens that partially overlap are included.
-     */
-    tokenIdsInRanges(codeRanges) {
-        const result = new Set();
-        const lineLens = this.lineLengths();
-        if (lineLens.length === 0)
-            return result;
-        const offsets = codeRanges
-            .map(r => rangeToCharOffsets(r, lineLens))
-            .filter(({ start, end }) => end > start);
-        if (offsets.length === 0)
-            return result;
-        // Walk tokens with running offsets in the joined string, testing each
-        // token against every requested range's offsets.
-        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 (offsets.some(({ start, end }) => tEnd > start && tStart < end))
-                    result.add(tok.id);
-                off = tEnd;
-            }
-            if (li < this.tokenLines.length - 1)
-                off += 1; // newline
-        }
-        return result;
-    }
-    // ── Drawing ─────────────────────────────────────────────────────────────
-    /** One band per range, over every line it touches; a range past the end of the listing gives none. */
-    rowBandsIn(codeRanges, color, radius) {
-        const count = this.tokenLines.length;
-        const bands = [];
-        for (const range of codeRanges) {
-            const first = Math.max(1, Math.round(range.startLine ?? 1));
-            const last = Math.min(count, range.endLine == null || range.endLine === Infinity ? count : Math.round(range.endLine));
-            if (first > last)
-                continue;
-            bands.push({ startId: this.tokenLines[first - 1].id, endId: this.tokenLines[last - 1].id, color, radius });
-        }
-        return bands;
-    }
-    /**
-     * Thin delegator: everything about *how* a frame is painted (settled or
-     * mid structural-edit, entry/exit motion, colour cross-fade) lives in
-     * `drawCode` (the engine's `render.ts`) as a pure function over plain
-     * state — this just gathers that state from the node's own instance
-     * fields and caches.
-     */
-    drawSelf(draw) {
-        this.advanceCache.sync(this.advanceCache.signature(this.fontSize, this.fontFamily));
-        drawCode(draw, {
-            tokenLines: this.tokenLines,
-            metrics: this.metrics(),
-            advanceCache: this.advanceCache,
-            ...this.frameLayout(draw),
-            tokenStates: resolveTokenStates(this.tokenLines, this.transitions, this.highlightDimOpacity, this.highlightedIds),
-            highlightActive: this.highlightDimOpacity !== null || this.transitions.some(tr => tr.kind === "dim"),
-            rowBands: this.rowBands,
-            rowsEdit: this.activeRows(),
-            boxW: this.layoutBounds.width,
-        });
-    }
-    /** Each source the props have named, tokenized once, so a listing derived again keeps the ids a highlight selected. */
-    _derived = new Map();
-    /** The first command to apply after a restore starts from the props' listing. */
-    _drive() {
-        this._sync();
-        this._writeProp("_driven", true);
-    }
-    /**
-     * Bring the settled structure up to the props it is derived from.
-     *
-     * Pulled from every reader rather than pushed from a prop write, because
-     * `code`, `language` and `theme` can each be tweened or bound, and neither
-     * has a write to hang a subscription on. Never mid-edit: re-tokenizing mints
-     * fresh ids, and an in-flight transition is keyed by the ones it captured.
-     */
-    _sync() {
-        const code = this._normalised();
-        if (!this._driven) {
-            this.transitions.length = 0;
-            this.highlightDimOpacity = null;
-            if (this.highlightedIds.size > 0)
-                this.highlightedIds = new Set();
-            if (this.rowBands.length > 0)
-                this.rowBands = [];
-            this.setLines(this._structureFor(code), code);
-        }
-        else if (!this.activeEdit()) {
-            const basis = this._basis();
-            const was = this._linesBasis;
-            if (this._linesSource === code && was.language === basis.language && was.theme === basis.theme && was.highlighted === basis.highlighted)
-                return;
-            const lines = this._structureFor(code);
-            // The same text split the same way, only coloured differently: the
-            // tokens are the ones a highlight or a transition already names.
-            if (this._linesSource === code && was.language === basis.language && was.highlighted === basis.highlighted) {
-                adoptIds(this.tokenLines, lines);
-            }
-            this.setLines(lines, code, basis);
-        }
-    }
-    _normalised() {
-        const code = this.code;
-        if (code !== this._rawCode) {
-            this._rawCode = code;
-            this._normalCode = normalizeSource(code);
-        }
-        return this._normalCode;
-    }
-    _basis() {
-        return { language: this.language, theme: this.theme, highlighted: canHighlight(this.language, this.theme) };
-    }
-    _structureFor(code) {
-        const { language, theme, highlighted } = this._basis();
-        let entry = this._derived.get(code);
-        if (!entry || entry.language !== language || entry.theme !== theme || entry.highlighted !== highlighted) {
-            entry = {
-                language,
-                theme,
-                highlighted,
-                lines: tokenizeCodeToIdLines(code, language, theme),
-            };
-            this._derived.delete(code);
-            this._derived.set(code, entry);
-            if (this._derived.size > DERIVED_LISTINGS)
-                this._derived.delete(this._derived.keys().next().value);
-        }
-        return entry.lines;
-    }
-};
-__decorate([
-    property({ default: "" })
-], Code.prototype, "code", void 0);
-__decorate([
-    property({ default: "typescript" })
-], Code.prototype, "language", void 0);
-__decorate([
-    property({ default: "Fira Mono" })
-], Code.prototype, "fontFamily", void 0);
-__decorate([
-    property({ default: DefaultHighlightStyle.name })
-], 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: 2 })
-], Code.prototype, "lineNumberGap", void 0);
-__decorate([
-    insetsProperty()
-], Code.prototype, "padding", void 0);
-__decorate([
-    command({ args: [{ key: "code", kind: "text", multiline: true }] })
-], Code.prototype, "append", null);
-__decorate([
-    command({ args: [{ key: "code", kind: "text", multiline: true }] })
-], Code.prototype, "prepend", null);
-__decorate([
-    command({
-        args: [
-            // Two controls, one argument: the method takes a `[line, col]`
-            // tuple, so the pair a host draws is declared *inside* the value it
-            // composes into rather than flattened beside it.
-            {
-                key: "position", kind: "point", properties: {
-                    line: { kind: "number", default: 1, min: 1, step: 1 },
-                    col: { kind: "number", default: 1, min: 1, step: 1 },
+            /** Insert `code` before the 1-indexed `[line, col]`, clamped into the listing. */
+            insert: {
+                args: {
+                    position: Types.custom(undefined, {
+                        kind: "point",
+                        properties: {
+                            line: { kind: "number", default: 1, min: 1, step: 1 },
+                            col: { kind: "number", default: 1, min: 1, step: 1 },
+                        },
+                    }),
+                    code: TEXT,
+                },
+                run: (timeline, state) => {
+                    const seen = current(state, kit);
+                    const offset = offsetAt(seen.lines, timeline.args.position);
+                    const next = seen.source.slice(0, offset) + timeline.args.code + seen.source.slice(offset);
+                    return act(timeline, editFrame(kit, seen, next, basisOf(state)));
                 },
             },
-            { key: "code", kind: "text", default: "", multiline: true },
-        ],
-    })
-], Code.prototype, "insert", null);
-__decorate([
-    command({ key: "remove", args: [{ key: "target", kind: "selector" }] })
-], Code.prototype, "erase", null);
-__decorate([
-    command({ args: [{ key: "target", kind: "selector" }, { key: "replacement", kind: "text", default: "", multiline: true }] })
-], Code.prototype, "replace", null);
-__decorate([
-    command({ args: [{ key: "target", kind: "selector" }, { key: "dim", kind: "number", default: 0.4, min: 0, max: 1, step: 0.01, scale: 100, unit: "%" }] })
-], Code.prototype, "highlight", null);
-__decorate([
-    command()
-], Code.prototype, "resetHighlight", null);
-__decorate([
-    command({
-        args: [
-            { key: "target", kind: "selector" },
-            { key: "color", kind: "color", default: ROW_BAND_COLOR },
-            { key: "radius", kind: "number", default: ROW_BAND_RADIUS, min: 0, step: 1 },
-        ],
-    })
-], Code.prototype, "highlightRows", null);
-__decorate([
-    command()
-], Code.prototype, "resetRowHighlight", null);
-Code = __decorate([
-    node({
-        key: "code",
-        parentKey: "node",
-        forkable: true,
-        layout: {
-            defaultWidthMode: "hug",
-            defaultHeightMode: "hug",
-            acceptsChildren: false,
+            /**
+             * Erase the code in `target`. A range of whole lines takes their line
+             * breaks with it, so the rows below close up.
+             */
+            remove: {
+                args: { target: TARGET },
+                run: (timeline, state) => act(timeline, eraseFrame(kit, state, timeline.args.target)),
+            },
+            replace: {
+                args: { target: TARGET, replacement: TEXT },
+                run: (timeline, state) => {
+                    const seen = current(state, kit);
+                    const { start, end } = rangeToCharOffsets(timeline.args.target, lineLengths(seen.lines));
+                    const next = seen.source.slice(0, start) + timeline.args.replacement + seen.source.slice(end);
+                    return act(timeline, editFrame(kit, seen, next, basisOf(state)));
+                },
+            },
+            /**
+             * Dim everything outside `target` (one range or several) to `dim`.
+             * Persistent: a second highlight cross-fades from this one.
+             */
+            highlight: {
+                args: {
+                    target: TARGET,
+                    dim: Types.number(0.4, { min: 0, max: 1, step: 0.01, scale: 100, unit: "%" }),
+                },
+                run: (timeline, state) => act(timeline, highlightFrame(kit, state, timeline.args.target, timeline.args.dim)),
+            },
+            /** Fade every dimmed token back to full and clear the highlight. */
+            resetHighlight: (timeline, state) => act(timeline, resetHighlightFrame(kit, state)),
+            /**
+             * Lay a band of `color` behind every line a range touches. A second
+             * call slides the bands onto their new rows, paired in order; a band
+             * keeps to its lines through an edit.
+             */
+            highlightRows: {
+                args: {
+                    target: TARGET,
+                    color: Types.color(ROW_BAND_COLOR),
+                    radius: Types.number(ROW_BAND_RADIUS, { min: 0, step: 1 }),
+                },
+                run: (timeline, state) => {
+                    const seen = current(state, kit);
+                    const bands = rowBandsIn(seen.lines, normalizeCodeRanges(timeline.args.target), timeline.args.color, Math.max(0, timeline.args.radius ?? ROW_BAND_RADIUS));
+                    return act(timeline, rowsFrame(seen, state.banding.bands, bands));
+                },
+            },
+            /** Fade every row band out and clear them. */
+            resetRowHighlight: (timeline, state) => act(timeline, rowsFrame(current(state, kit), state.banding.bands, [])),
         },
-    })
-], Code);
-export { Code };
+        measure: (measurer, state) => measureListing(measurer, state, kit),
+        // Refuses the ambient text style: every column is measured against this face, so an
+        // inherited family or weight would shape glyphs the geometry was never measured for.
+        render: (ctx, state) => ctx.textStyle(null, () => drawListing(ctx, state, kit)),
+    });
+    kits.set(component.node, kit);
+    return component;
+}
+/**
+ * A syntax-highlighted listing whose edits animate token by token: each edit
+ * is diffed against what is on screen, so a token that survives travels to
+ * its new column and only what changed fades.
+ */
+export const Code = defineCode();
+/** What a listing shows now: its source, its token rows, and the edit in flight, if any. */
+export function listingOf(code) {
+    const kit = kits.get(code.constructor);
+    if (!kit)
+        throw new TypeError("listingOf takes a node a `Code` component built.");
+    const view = shown(code, kit);
+    return { source: view.source, lines: view.lines, edit: editOf(view) };
+}
+/** Every range matching the literal `text` in `source`, in order and not overlapping. Multi-line matches are found too. */
+export function findAllRanges(source, text) {
+    const ranges = [];
+    if (!text)
+        return ranges;
+    const joined = normalizeSource(sourceText(source));
+    const lineLens = joined.split("\n").map((line) => line.length);
+    let from = 0;
+    while (true) {
+        const idx = joined.indexOf(text, from);
+        if (idx === -1)
+            break;
+        ranges.push(charOffsetsToRange(idx, idx + text.length, lineLens));
+        from = idx + Math.max(1, text.length);
+    }
+    return ranges;
+}
+/** The `index`th range matching `text`, or `null`. */
+export function findRangeAt(source, text, index) {
+    return findAllRanges(source, text)[index] ?? null;
+}
+/** The first range matching `text`, or `null`. */
+export function findFirstRange(source, text) {
+    return findRangeAt(source, text, 0);
+}
+/**
+ * A `to({ code })` mid-flight comes first: it wrote `code` after any edit
+ * command did. Then an edit command in flight, then the settled listing.
+ */
+function shown(s, kit) {
+    const code = s.code;
+    if (typeof code !== "string") {
+        const { transition } = edited(settled(s, code.from, kit), code.to, basisOf(s), kit);
+        return { source: code.to, lines: transition.to, transition, progress: code.t };
+    }
+    if (s.edit)
+        return { source: normalizeSource(code), lines: s.edit.transition.to, transition: s.edit.transition, progress: s.edit.progress };
+    const listing = settled(s, normalizeSource(code), kit);
+    return { source: listing.source, lines: listing.lines, transition: null, progress: 1 };
+}
+function editOf(view) {
+    return view.transition ? { ...view.transition, progress: view.progress } : null;
+}
+/** The listing a command starts from. */
+function current(s, kit) {
+    return settled(s, normalizeSource(sourceText(s.code)), kit);
+}
+/**
+ * The structure `source` settles on. Until a listing command has acted, the
+ * props are all there is; after one, it is the listing that command left,
+ * recoloured keeping its ids when only the theme moved, and diffed onward
+ * when the source has (a `to({ code })` that landed, a binding).
+ */
+function settled(s, source, kit) {
+    const basis = basisOf(s);
+    const pinned = s.listing;
+    if (!pinned)
+        return derived(source, basis);
+    if (pinned.source !== source)
+        return edited(pinned, source, basis, kit).listing;
+    if (sameBasis(pinned.basis, basis))
+        return pinned;
+    if (pinned.basis.language === basis.language && pinned.basis.highlighted === basis.highlighted)
+        return recoloured(pinned, basis);
+    return derived(source, basis);
+}
+function basisOf(s) {
+    return { language: s.language, theme: s.theme, highlighted: canHighlight(s.language, s.theme) };
+}
+function sameBasis(a, b) {
+    return a.language === b.language && a.theme === b.theme && a.highlighted === b.highlighted;
+}
+/** The source `code` names: where a `to({ code })` is heading, mid-tween. */
+function sourceText(code) {
+    return typeof code === "string" ? code : code.to;
+}
+/**
+ * Mid-tween `code` holds both sources, so the frame can draw the edit between
+ * them; at either end it is a source again.
+ */
+function blendSource(from, to, t) {
+    const leaving = sourceText(from);
+    const arriving = sourceText(to);
+    const a = normalizeSource(leaving);
+    const b = normalizeSource(arriving);
+    // Nothing to edit: it snaps at the end, as any text does.
+    if (a === b)
+        return t >= 1 ? arriving : leaving;
+    if (t <= 0)
+        return a;
+    if (t >= 1)
+        return b;
+    return { from: a, to: b, t };
+}
+const DERIVED = new Map();
+/** Sources kept tokenized per basis, oldest dropped first; a bound `code` can name any number of them. */
+const DERIVED_LISTINGS = 256;
+/** The props' own listing, the same object (and ids) each time it is asked for again. */
+function derived(source, basis) {
+    return recall(DERIVED, basisKey(basis), source, DERIVED_LISTINGS, () => ({ source, lines: tokenize(source, basis), basis }));
+}
+const RECOLOURED = new WeakMap();
+/** `pinned` in another theme: the same text split the same way keeps the ids a highlight or a band names. */
+function recoloured(pinned, basis) {
+    let shelf = RECOLOURED.get(pinned.lines);
+    if (!shelf)
+        RECOLOURED.set(pinned.lines, shelf = new Map());
+    return recall(shelf, basisKey(basis), pinned.source, 4, () => {
+        const lines = tokenize(pinned.source, basis);
+        adoptIds(pinned.lines, lines);
+        return { source: pinned.source, lines, basis };
+    });
+}
+function edited(from, next, basis, kit) {
+    let shelf = kit.edits.get(from.lines);
+    if (!shelf)
+        kit.edits.set(from.lines, shelf = new Map());
+    return recall(shelf, basisKey(basis), next, 16, () => buildEdit(kit, from.lines, next, basis));
+}
+function buildEdit(kit, from, next, basis) {
+    const edit = kit.diff(from, tokenize(next, basis));
+    const transition = {
+        kind: "structural",
+        from,
+        to: edit.lines,
+        removedIds: edit.removedIds,
+        addedIds: edit.addedIds,
+        enteringLineIds: edit.newLineIds,
+        fromColorById: edit.fromColorById,
+        phases: kit.phases(edit.removedIds.size > 0, edit.addedIds.size > 0),
+        progress: 0,
+        layoutKey: null,
+        fromLayout: null,
+        toLayout: null,
+    };
+    return { transition, listing: { source: next, lines: edit.lines, basis } };
+}
+function tokenize(source, basis) {
+    // Best effort outside the asset pipeline (a test, a headless measure): on the timeline `load` has the grammar in first.
+    if (!basis.highlighted)
+        ensureHighlighter(undefined, [basis.language]).catch(() => { });
+    return tokenizeCodeToIdLines(source, basis.language, basis.theme);
+}
+const styleIds = new WeakMap();
+let nextStyleId = 1;
+function basisKey(basis) {
+    let theme;
+    if (typeof basis.theme === "string")
+        theme = `name:${basis.theme}`;
+    else {
+        let id = styleIds.get(basis.theme);
+        if (id === undefined)
+            styleIds.set(basis.theme, id = nextStyleId++);
+        theme = `style:${id}`;
+    }
+    return `${basis.language}\n${basis.highlighted ? 1 : 0}\n${theme}`;
+}
+/** Memoized by basis, then by source; a basis keeps `limit` sources, least recently asked for dropped first. */
+function recall(shelf, basis, source, limit, make) {
+    let row = shelf.get(basis);
+    if (!row)
+        shelf.set(basis, row = new Map());
+    const hit = row.get(source);
+    if (hit !== undefined) {
+        row.delete(source);
+        row.set(source, hit);
+        return hit;
+    }
+    const made = make();
+    row.set(source, made);
+    if (row.size > limit)
+        row.delete(row.keys().next().value);
+    return made;
+}
 /** Carry `from`'s line and token ids onto `to` when the two spell the same tokens. */
 function adoptIds(from, to) {
     if (from.length !== to.length)
@@ -881,15 +356,155 @@ function adoptIds(from, to) {
             to[i].tokens[j].id = from[i].tokens[j].id;
     }
 }
-/** Sources a node keeps tokenized, oldest dropped first; a bound `code` can name any number of them. */
-const DERIVED_LISTINGS = 16;
 /**
- * Normalize `highlight()`'s `codeRange` argument to a plain array: a single
- * `CodeRange` (a plain object, not iterable) becomes a one-element array; a
- * `CodeRangeChain`/plain array of ranges spreads as-is. `CodeRange` and
- * `CodeRangeChain` are distinguished by iterability, not `instanceof` — a
- * bare array of `CodeRange`s (no chain) works the same way. The `{ list }` shape
- * a chain used to serialise as is read as the chain it came from.
+ * Each command writes the listing it acted on, at every time it is asked for,
+ * so the ids it captured are the ones drawn; before it starts the timeline has
+ * put back the props, and the listing is derived from them again.
+ */
+function editFrame(kit, seen, source, basis) {
+    const next = normalizeSource(source);
+    if (next === seen.source)
+        return null;
+    const { transition, listing } = buildEdit(kit, seen.lines, next, basis);
+    // Three phases (see `phaseStrategy`): what leaves fades out, what stays reflows, then what is new arrives.
+    return (t) => (t <= 0 ? { code: seen.source, listing: seen, edit: null }
+        : t >= 1 ? { code: next, listing, edit: null }
+            : { code: next, listing, edit: { transition, progress: t } });
+}
+function eraseFrame(kit, state, target) {
+    const seen = current(state, kit);
+    const source = seen.source;
+    let { start, end } = rangeToCharOffsets(target, lineLengths(seen.lines));
+    // `lines(2)` resolves to the characters of line 2: the row goes too, as an editor would close the gap. That is also what makes a blank row removable.
+    const atLineStart = start === 0 || source[start - 1] === "\n";
+    const atLineEnd = end === source.length || source[end] === "\n";
+    if (atLineStart && atLineEnd) {
+        if (end < source.length)
+            end += 1;
+        else if (start > 0)
+            start -= 1;
+    }
+    else if (end <= start) {
+        return null;
+    }
+    if (end <= start)
+        return null;
+    return editFrame(kit, seen, source.slice(0, start) + source.slice(end), basisOf(state));
+}
+function highlightFrame(kit, state, target, dim) {
+    const seen = current(state, kit);
+    const toDim = dim ?? 0.4;
+    const matchIds = tokenIdsInRanges(seen.lines, normalizeCodeRanges(target));
+    if (matchIds.size === 0)
+        return null;
+    const previous = state.focus;
+    const fromDim = previous.dim ?? 1;
+    const hadPrevious = previous.ids.size > 0;
+    const tokens = [];
+    for (const line of seen.lines) {
+        for (const tok of line.tokens) {
+            const fromOp = !hadPrevious || previous.ids.has(tok.id) ? 1 : fromDim;
+            const toOp = matchIds.has(tok.id) ? 1 : toDim;
+            if (fromOp === toOp)
+                continue;
+            tokens.push(makeAnim(tok.id, { keys: [0, 1], values: [fromOp, toOp] }));
+        }
+    }
+    // Which tokens are dimmed is what the next highlight cross-fades from, so it is committed at the end and put back below it.
+    const before = { dim: hadPrevious ? fromDim : null, ids: previous.ids, fade: null };
+    const done = { dim: toDim, ids: matchIds, fade: null };
+    return (t) => ({
+        listing: seen,
+        focus: t <= 0 ? before : t >= 1 ? done : { ...before, fade: { kind: "dim", tokens, progress: t } },
+    });
+}
+function resetHighlightFrame(kit, state) {
+    const previous = state.focus;
+    if (previous.dim === null)
+        return null;
+    const seen = current(state, kit);
+    const fromDim = previous.dim;
+    const tokens = [];
+    for (const line of seen.lines) {
+        for (const tok of line.tokens) {
+            const fromOp = previous.ids.has(tok.id) ? 1 : fromDim;
+            if (fromOp === 1)
+                continue;
+            tokens.push(makeAnim(tok.id, { keys: [0, 1], values: [fromOp, 1] }));
+        }
+    }
+    const before = { dim: fromDim, ids: previous.ids, fade: null };
+    return (t) => ({
+        listing: seen,
+        focus: t >= 1 ? NO_FOCUS : t <= 0 ? before : { ...before, fade: { kind: "dim", tokens, progress: t } },
+    });
+}
+function rowsFrame(seen, from, to) {
+    if (from.length === 0 && to.length === 0)
+        return null;
+    return (t) => ({
+        listing: seen,
+        banding: t >= 1 ? { bands: to, fade: null }
+            : t <= 0 ? { bands: from, fade: null }
+                : { bands: from, fade: { kind: "rows", from, to, progress: t } },
+    });
+}
+function lineLengths(lines) {
+    return lines.map((line) => line.tokens.reduce((acc, t) => acc + t.content.length, 0));
+}
+/** Character offset of a 1-indexed (line, col), clamped into the document. */
+function offsetAt(lines, position) {
+    const lens = lineLengths(lines);
+    if (lens.length === 0)
+        return 0;
+    const [rawLine, rawCol] = position;
+    const li = Math.max(0, Math.min(lens.length - 1, rawLine - 1));
+    let offset = 0;
+    for (let k = 0; k < li; k++)
+        offset += lens[k] + 1;
+    return offset + Math.max(0, Math.min(lens[li], rawCol - 1));
+}
+/** The ids of every token any of `codeRanges` overlaps, partly or wholly. */
+function tokenIdsInRanges(lines, codeRanges) {
+    const result = new Set();
+    const lineLens = lineLengths(lines);
+    if (lineLens.length === 0)
+        return result;
+    const offsets = codeRanges
+        .map((r) => rangeToCharOffsets(r, lineLens))
+        .filter(({ start, end }) => end > start);
+    if (offsets.length === 0)
+        return result;
+    let off = 0;
+    for (let li = 0; li < lines.length; li++) {
+        for (const tok of lines[li].tokens) {
+            const tStart = off;
+            const tEnd = off + tok.content.length;
+            if (offsets.some(({ start, end }) => tEnd > start && tStart < end))
+                result.add(tok.id);
+            off = tEnd;
+        }
+        if (li < lines.length - 1)
+            off += 1;
+    }
+    return result;
+}
+/** One band per range, over every line it touches; a range past the end of the listing gives none. */
+function rowBandsIn(lines, codeRanges, color, radius) {
+    const count = lines.length;
+    const bands = [];
+    for (const range of codeRanges) {
+        const first = Math.max(1, Math.round(range.startLine ?? 1));
+        const last = Math.min(count, range.endLine == null || range.endLine === Infinity ? count : Math.round(range.endLine));
+        if (first > last)
+            continue;
+        bands.push({ startId: lines[first - 1].id, endId: lines[last - 1].id, color, radius });
+    }
+    return bands;
+}
+/**
+ * A single range (a plain object) as a one-element array; a chain or an array
+ * of ranges as itself; the `{ list }` a chain serialises as, as that chain.
  */
 function normalizeCodeRanges(codeRange) {
     const maybeIterable = codeRange;
@@ -912,4 +527,141 @@ function grammarLoader(language) {
     }
     return load;
 }
+/** By the node's state view, one object per node that `measure` and `render` are both handed. */
+const measuredBy = new WeakMap();
+function measuredOf(state) {
+    let found = measuredBy.get(state);
+    if (!found)
+        measuredBy.set(state, found = { advances: new TokenAdvanceCache(), measurer: null, scope: null, settled: null, edit: null });
+    return found;
+}
+function metricsOf(s) {
+    return {
+        fontSize: s.fontSize,
+        fontFamily: s.fontFamily,
+        lineHeight: s.lineHeight,
+        letterSpacing: s.letterSpacing,
+        padding: s.padding,
+        showLineNumbers: s.showLineNumbers,
+        lineNumberGap: s.lineNumberGap,
+    };
+}
+/**
+ * The one or two layouts a frame is drawn from: a settled frame has one, a
+ * frame inside an edit two (where every token was, and where it is going).
+ * `null` for a node never measured, which has nothing to measure them with.
+ */
+function layoutsOf(measured, view, m) {
+    const signature = measured.advances.signature(m.fontSize, m.fontFamily);
+    measured.advances.sync(signature);
+    const key = `${metricsSignature(m)}|${signature}`;
+    const scope = measured.scope;
+    if (!view.transition) {
+        const hit = measured.settled;
+        if (hit && hit.lines === view.lines && hit.key === key)
+            return { from: hit.layout, to: hit.layout };
+        if (!scope)
+            return null;
+        const layout = layoutCode(view.lines, m, measured.advances, scope);
+        measured.settled = { lines: view.lines, key, layout };
+        return { from: layout, to: layout };
+    }
+    const hit = measured.edit;
+    if (hit && hit.transition === view.transition && hit.key === key)
+        return hit;
+    if (!scope)
+        return null;
+    const both = {
+        transition: view.transition,
+        key,
+        from: layoutCode(view.transition.from, m, measured.advances, scope),
+        to: layoutCode(view.transition.to, m, measured.advances, scope),
+    };
+    measured.edit = both;
+    return both;
+}
+function measureListing(measurer, s, kit) {
+    const measured = measuredOf(s);
+    if (measured.measurer !== measurer) {
+        measured.measurer = measurer;
+        measured.scope = {
+            measureText: (text, fontSize, fontFamily, fontWeight, letterSpacing) => measurer.text(text, { fontFamily, fontSize, fontWeight, letterSpacing }),
+        };
+    }
+    const view = shown(s, kit);
+    const m = metricsOf(s);
+    const layouts = layoutsOf(measured, view, m);
+    if (!layouts)
+        return { width: 0, height: 0 };
+    const t = moveProgress(view.transition ? { phases: view.transition.phases, progress: view.progress } : null);
+    const innerW = view.transition ? lerpNumber(layouts.from.innerW, layouts.to.innerW, t) : layouts.to.innerW;
+    const innerH = view.transition ? lerpNumber(layouts.from.innerH, layouts.to.innerH, t) : layouts.to.innerH;
+    return { width: innerW + m.padding.left + m.padding.right, height: innerH + m.padding.top + m.padding.bottom };
+}
+const NO_PAINT = { fill: [], stroke: [], shadow: [], overlay: [], start: 0, end: 1, clip: false };
+const NOTHING = () => { };
+function drawListing(ctx, s, kit) {
+    const measured = measuredOf(s);
+    const view = shown(s, kit);
+    const m = metricsOf(s);
+    const layouts = layoutsOf(measured, view, m);
+    // Paints nothing: it declares the outline picking and backdrop effects read.
+    Paint.draw(ctx, NO_PAINT, null, { clipShape: outlineOf(view, layouts, m, ctx.size), children: NOTHING });
+    const scope = measured.scope;
+    if (!layouts || !scope)
+        return;
+    const { focus, banding } = s;
+    drawCode({ draw: (graphics) => ctx.draw(graphics), measureText: scope.measureText }, {
+        tokenLines: view.lines,
+        metrics: m,
+        advanceCache: measured.advances,
+        from: layouts.from,
+        to: layouts.to,
+        edit: editOf(view),
+        tokenStates: resolveTokenStates(view.lines, focus.fade ? [focus.fade] : [], focus.dim, focus.ids),
+        highlightActive: focus.dim !== null || focus.fade !== null,
+        rowBands: banding.bands,
+        rowsEdit: banding.fade,
+        boxW: ctx.size.width,
+    });
+}
+/**
+ * A listing is grabbed by its text, line by ragged line: each line a slot as
+ * wide as its ink, plus the gutter where numbers show, inside the box. Code is
+ * mostly whitespace, and its empty corners would swallow clicks meant for what
+ * is behind it. Mid-edit, or before it is laid out, the box.
+ */
+function outlineOf(view, layouts, m, size) {
+    const box = { x: 0, y: 0, width: size.width, height: size.height };
+    if (view.transition || !layouts)
+        return new Graphics2D().rect(box);
+    const layout = layouts.to;
+    const half = (m.fontSize * m.lineHeight) / 2;
+    const gutter = m.showLineNumbers ? layout.gutter : 0;
+    const left = Math.max(layout.startX - gutter, -size.width / 2);
+    const outline = new Graphics2D();
+    let lines = 0;
+    for (let i = 0; i < layout.lineY.length; i++) {
+        const ink = layout.lineW[i] ?? 0;
+        if (ink + gutter <= 0)
+            continue;
+        const right = Math.min(layout.startX + ink, size.width / 2);
+        const y = layout.lineY[i];
+        const top = Math.min(y + half, size.height / 2);
+        const bottom = Math.max(y - half, -size.height / 2);
+        if (right < left || top < bottom)
+            continue;
+        // The row's own centre where the box leaves it whole, so a whole row is tested at its own centre.
+        const whole = top === y + half && bottom === y - half;
+        outline.rect({
+            x: (left + right) / 2,
+            y: whole ? y : (top + bottom) / 2,
+            width: right - left,
+            height: whole ? 2 * half : top - bottom,
+        });
+        lines++;
+    }
+    // No line has ink: the box with itself cut away, so nothing is grabbed (an empty outline would fall back to the box).
+    return lines > 0 ? outline : new Graphics2D().rect(box).rect(box).cut();
+}
 //# sourceMappingURL=node.js.map