@svelterm/core 0.1.0 → 0.21.0

package/dist/src/css/incremental.js

@@ -15,7 +15,7 @@ const LAYOUT_PROPERTIES = [
  * descendants using the same resolveNode function as full resolution.
  * Variables are collected once from the full tree for consistency.
  */
-export function resolveStylesIncremental(root, stylesheet, existingStyles, dirtyNodes, onResolve, onLayoutAffected) {
+export function resolveStylesIncremental(root, stylesheet, existingStyles, dirtyNodes, onResolve, onLayoutAffected, scheme = 'dark') {
     if (dirtyNodes.size === 0)
         return existingStyles;
     // Collect variables from the full tree — same as full resolution
@@ -28,7 +28,7 @@ export function resolveStylesIncremental(root, stylesheet, existingStyles, dirty
         const oldStyle = existingStyles.get(node.id);
         // Re-resolve this node and all its descendants using the
         // same resolveNode function as full resolution
-        resolveNode(node, stylesheet, result, variables);
+        resolveNode(node, stylesheet, result, variables, scheme);
         onResolve?.(node.id);
         const newStyle = result.get(node.id);
         if (oldStyle && newStyle && onLayoutAffected && isLayoutAffecting(oldStyle, newStyle)) {

package/dist/src/css/interpolate.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Value interpolation for animations and transitions. Colours mix in RGB
+ * space; endpoints are returned exactly so ANSI palette names survive at
+ * t=0 and t=1.
+ */
+/**
+ * Mix two resolved colours (SGR names or #rrggbb) at t ∈ [0,1].
+ * Returns null when either endpoint has no RGB value (`default`) —
+ * callers fall back to a discrete switch.
+ */
+export declare function lerpColor(from: string, to: string, t: number): string | null;
+/** Linear interpolation rounded to whole cells. */
+export declare function lerpNumber(from: number, to: number, t: number): number;

package/dist/src/css/interpolate.js

@@ -0,0 +1,41 @@
+/**
+ * Value interpolation for animations and transitions. Colours mix in RGB
+ * space; endpoints are returned exactly so ANSI palette names survive at
+ * t=0 and t=1.
+ */
+/** Nominal xterm palette values for the SGR colour names we emit. */
+const ANSI_RGB = {
+    black: [0, 0, 0], red: [205, 0, 0], green: [0, 205, 0], yellow: [205, 205, 0],
+    blue: [0, 0, 238], magenta: [205, 0, 205], cyan: [0, 205, 205], white: [229, 229, 229],
+};
+/**
+ * Mix two resolved colours (SGR names or #rrggbb) at t ∈ [0,1].
+ * Returns null when either endpoint has no RGB value (`default`) —
+ * callers fall back to a discrete switch.
+ */
+export function lerpColor(from, to, t) {
+    if (t <= 0)
+        return from;
+    if (t >= 1)
+        return to;
+    const a = colorToRgb(from);
+    const b = colorToRgb(to);
+    if (!a || !b)
+        return null;
+    const channels = a.map((channel, i) => Math.round(channel + (b[i] - channel) * t));
+    return '#' + channels.map(c => c.toString(16).padStart(2, '0')).join('');
+}
+/** Linear interpolation rounded to whole cells. */
+export function lerpNumber(from, to, t) {
+    return Math.round(from + (to - from) * t);
+}
+function colorToRgb(color) {
+    if (color.startsWith('#') && color.length >= 7) {
+        return [
+            parseInt(color.slice(1, 3), 16),
+            parseInt(color.slice(3, 5), 16),
+            parseInt(color.slice(5, 7), 16),
+        ];
+    }
+    return ANSI_RGB[color] ?? null;
+}

package/dist/src/css/parser.js

@@ -171,14 +171,28 @@ function parseRule(css, start, rules, media, supports, container) {
     pos = selectorEnd + 1;
     const declarations = [];
     while (pos < css.length) {
-        pos = skipWhitespace(css, pos);
+        pos = skipWhitespaceAndComments(css, pos);
         if (pos >= css.length || css[pos] === '}') {
             pos++;
             break;
         }
+        // Check for nested @media inside a rule block
+        if (css.substring(pos, pos + 6) === '@media') {
+            // Flush current declarations as a rule
+            if (selectors.length > 0 && declarations.length > 0) {
+                rules.push({ selectors: [...selectors], declarations: [...declarations], media, supports, container });
+                declarations.length = 0;
+            }
+            pos = parseNestedMediaBlock(css, pos, rules, selectors, supports, container);
+            continue;
+        }
         const colonPos = css.indexOf(':', pos);
-        if (colonPos === -1)
-            break;
+        const nextBrace = css.indexOf('{', pos);
+        // If a brace comes before a colon, this might be a nested selector — skip it
+        if (colonPos === -1 || (nextBrace !== -1 && nextBrace < colonPos)) {
+            pos = skipToClosingBrace(css, pos);
+            continue;
+        }
         const property = css.substring(pos, colonPos).trim();
         const valueEnd = findValueEnd(css, colonPos + 1);
         const value = css.substring(colonPos + 1, valueEnd).trim();
@@ -192,6 +206,48 @@ function parseRule(css, start, rules, media, supports, container) {
     }
     return pos;
 }
+/** Parse a nested @media block inside a selector block */
+function parseNestedMediaBlock(css, start, rules, parentSelectors, supports, container) {
+    let pos = start + 6; // skip "@media"
+    pos = skipWhitespace(css, pos);
+    const bracePos = css.indexOf('{', pos);
+    if (bracePos === -1)
+        return skipToClosingBrace(css, pos);
+    const rawCondition = css.substring(pos, bracePos).trim();
+    const condition = rawCondition.startsWith('(') && !rawCondition.includes(') and (')
+        ? rawCondition.slice(1, -1).trim()
+        : rawCondition;
+    pos = bracePos + 1;
+    // Parse declarations inside the nested @media block
+    const declarations = [];
+    while (pos < css.length) {
+        pos = skipWhitespaceAndComments(css, pos);
+        if (pos >= css.length || css[pos] === '}') {
+            pos++;
+            break;
+        }
+        const colonPos = css.indexOf(':', pos);
+        if (colonPos === -1)
+            break;
+        const property = css.substring(pos, colonPos).trim();
+        const valueEnd = findValueEnd(css, colonPos + 1);
+        const value = css.substring(colonPos + 1, valueEnd).trim();
+        declarations.push({ property, value });
+        pos = valueEnd;
+        if (pos < css.length && css[pos] === ';')
+            pos++;
+    }
+    if (parentSelectors.length > 0 && declarations.length > 0) {
+        rules.push({
+            selectors: [...parentSelectors],
+            declarations,
+            media: condition,
+            supports,
+            container,
+        });
+    }
+    return pos;
+}
 function skipToClosingBrace(css, pos) {
     let depth = 0;
     while (pos < css.length) {

package/dist/src/css/pseudo-elements.d.ts

@@ -0,0 +1,9 @@
+import { TermNode } from '../renderer/node.js';
+import { CSSStyleSheet } from './parser.js';
+import { type ResolvedStyle } from './compute.js';
+/**
+ * Resolve ::before/::after for one element: build the pseudo's style from
+ * matching rules, materialise (or drop) its synthetic box on the node, and
+ * record the style under the synthetic node's id.
+ */
+export declare function resolvePseudoElements(node: TermNode, stylesheet: CSSStyleSheet, styles: Map<number, ResolvedStyle>, vars: Map<string, string>, scheme: 'dark' | 'light'): void;

package/dist/src/css/pseudo-elements.js

@@ -0,0 +1,97 @@
+import { TermNode } from '../renderer/node.js';
+import { matchesSelector, splitPseudoElement } from './selector.js';
+import { computeSpecificity, compareSpecificity } from './specificity.js';
+import { resolveVar } from './variables.js';
+import { defaultStyle, applyDeclaration } from './compute.js';
+/**
+ * Resolve ::before/::after for one element: build the pseudo's style from
+ * matching rules, materialise (or drop) its synthetic box on the node, and
+ * record the style under the synthetic node's id.
+ */
+export function resolvePseudoElements(node, stylesheet, styles, vars, scheme) {
+    node.pseudoBefore = syncPseudo(node, node.pseudoBefore, 'before', stylesheet, styles, vars, scheme);
+    node.pseudoAfter = syncPseudo(node, node.pseudoAfter, 'after', stylesheet, styles, vars, scheme);
+}
+function syncPseudo(host, existing, which, stylesheet, styles, vars, scheme) {
+    const declarations = collectPseudoDeclarations(host, which, stylesheet, vars);
+    const content = resolveContent(declarations, host);
+    if (content === null) {
+        if (existing)
+            styles.delete(existing.id);
+        return null;
+    }
+    // Pseudo boxes behave like spans: inline, inheriting visuals at paint time
+    const style = defaultStyle('span');
+    for (const decl of declarations) {
+        if (decl.property === 'content')
+            continue;
+        applyDeclaration(style, decl.property, decl.value, scheme);
+    }
+    const pseudoNode = existing ?? createPseudoNode(host);
+    pseudoNode.children[0].text = content;
+    styles.set(pseudoNode.id, style);
+    return pseudoNode;
+}
+function collectPseudoDeclarations(host, which, stylesheet, vars) {
+    const scored = [];
+    let order = 0;
+    for (const rule of stylesheet.rules) {
+        for (const selector of rule.selectors) {
+            const { base, pseudoElement } = splitPseudoElement(selector);
+            if (pseudoElement !== which)
+                continue;
+            if (base !== '' && !matchesSelector(host, base))
+                continue;
+            const specificity = computeSpecificity(selector);
+            for (const decl of rule.declarations) {
+                if (decl.property.startsWith('--'))
+                    continue;
+                scored.push({
+                    property: decl.property,
+                    value: resolveVar(decl.value, vars),
+                    specificity,
+                    order: order++,
+                });
+            }
+        }
+    }
+    scored.sort((a, b) => {
+        const specCmp = compareSpecificity(a.specificity, b.specificity);
+        return specCmp !== 0 ? specCmp : a.order - b.order;
+    });
+    return scored;
+}
+/**
+ * The winning `content` value rendered to text, or null when the pseudo
+ * generates no box (no content declaration, `none`/`normal`, or empty).
+ */
+function resolveContent(declarations, host) {
+    const winner = declarations.filter(d => d.property === 'content').pop();
+    if (!winner)
+        return null;
+    const text = parseContentValue(winner.value, host);
+    return text === '' ? null : text;
+}
+const CONTENT_TOKEN = /"([^"]*)"|'([^']*)'|attr\(\s*([^)\s]+)\s*\)/g;
+/** content: a space-separated sequence of quoted strings and attr() lookups. */
+function parseContentValue(value, host) {
+    const trimmed = value.trim();
+    if (trimmed === 'none' || trimmed === 'normal')
+        return '';
+    let text = '';
+    for (const match of trimmed.matchAll(CONTENT_TOKEN)) {
+        if (match[3] !== undefined)
+            text += host.attributes.get(match[3]) ?? '';
+        else
+            text += match[1] ?? match[2] ?? '';
+    }
+    return text;
+}
+function createPseudoNode(host) {
+    const pseudoNode = new TermNode('element', 'svt-pseudo');
+    pseudoNode.parent = host;
+    const textNode = new TermNode('text', '');
+    textNode.parent = pseudoNode;
+    pseudoNode.children.push(textNode);
+    return pseudoNode;
+}

package/dist/src/css/selector.d.ts

@@ -3,15 +3,30 @@ export interface ParsedSelector {
     tag?: string;
     id?: string;
     classes: string[];
-    pseudo?: string;
-    pseudoArg?: string;
+    pseudos: PseudoSelector[];
     attributes: AttrSelector[];
     universal?: boolean;
 }
+interface PseudoSelector {
+    name: string;
+    arg?: string;
+}
+type AttrOp = '=' | '^=' | '$=' | '*=' | '~=' | '|=';
 interface AttrSelector {
     name: string;
+    op?: AttrOp;
     value?: string;
 }
 export declare function parseSelector(selector: string): ParsedSelector;
+export type PseudoElement = 'before' | 'after';
+/**
+ * Split a trailing ::before/::after (or legacy single-colon form) off a
+ * selector. Selectors with a pseudo-element style a synthetic box, never
+ * the host element itself.
+ */
+export declare function splitPseudoElement(selector: string): {
+    base: string;
+    pseudoElement: PseudoElement | null;
+};
 export declare function matchesSelector(node: TermNode, selector: string): boolean;
 export {};

package/dist/src/css/selector.js

@@ -1,5 +1,6 @@
+import { hasBooleanAttribute } from '../renderer/node.js';
 export function parseSelector(selector) {
-    const result = { classes: [], attributes: [] };
+    const result = { classes: [], pseudos: [], attributes: [] };
     let pos = 0;
     // Universal selector
     if (pos < selector.length && selector[pos] === '*') {
@@ -40,7 +41,8 @@ export function parseSelector(selector) {
             while (pos < selector.length && /[a-zA-Z0-9_-]/.test(selector[pos]))
                 pos++;
             const name = selector.substring(start, pos);
-            // Functional pseudo-class: :not(...), :nth-child(...)
+            // Functional pseudo-class: :not(...), :where(...), :is(...)
+            let arg;
             if (pos < selector.length && selector[pos] === '(') {
                 pos++;
                 const argStart = pos;
@@ -53,10 +55,10 @@ export function parseSelector(selector) {
                     if (depth > 0)
                         pos++;
                 }
-                result.pseudoArg = selector.substring(argStart, pos).trim();
+                arg = selector.substring(argStart, pos).trim();
                 pos++; // skip closing )
             }
-            result.pseudo = name;
+            result.pseudos.push({ name, arg });
         }
         else {
             pos++;
@@ -66,12 +68,20 @@ export function parseSelector(selector) {
 }
 function parseAttrSelector(selector, pos) {
     const nameStart = pos;
-    while (pos < selector.length && selector[pos] !== '=' && selector[pos] !== ']')
+    while (pos < selector.length && !'^$*~|=]'.includes(selector[pos]))
         pos++;
     const name = selector.substring(nameStart, pos).trim();
-    if (pos < selector.length && selector[pos] === '=') {
-        pos++; // skip =
-        let value = '';
+    let op;
+    if ('^$*~|'.includes(selector[pos]) && selector[pos + 1] === '=') {
+        op = (selector[pos] + '=');
+        pos += 2;
+    }
+    else if (selector[pos] === '=') {
+        op = '=';
+        pos++;
+    }
+    if (op) {
+        let value;
         if (pos < selector.length && (selector[pos] === '"' || selector[pos] === "'")) {
             const quote = selector[pos];
             pos++;
@@ -81,16 +91,43 @@ function parseAttrSelector(selector, pos) {
             value = selector.substring(valStart, pos);
             pos++; // skip closing quote
         }
+        else {
+            const valStart = pos;
+            while (pos < selector.length && selector[pos] !== ']')
+                pos++;
+            value = selector.substring(valStart, pos).trim();
+        }
         while (pos < selector.length && selector[pos] !== ']')
             pos++;
         pos++; // skip ]
-        return { selector: { name, value }, end: pos };
+        return { selector: { name, op, value }, end: pos };
     }
     while (pos < selector.length && selector[pos] !== ']')
         pos++;
     pos++; // skip ]
     return { selector: { name }, end: pos };
 }
+function attrValueMatches(actual, op, operand) {
+    switch (op) {
+        case '=': return actual === operand;
+        case '^=': return operand !== '' && actual.startsWith(operand);
+        case '$=': return operand !== '' && actual.endsWith(operand);
+        case '*=': return operand !== '' && actual.includes(operand);
+        case '~=': return operand !== '' && actual.split(/\s+/).includes(operand);
+        case '|=': return actual === operand || actual.startsWith(operand + '-');
+    }
+}
+/**
+ * Split a trailing ::before/::after (or legacy single-colon form) off a
+ * selector. Selectors with a pseudo-element style a synthetic box, never
+ * the host element itself.
+ */
+export function splitPseudoElement(selector) {
+    const match = /^(.*?)::?(before|after)$/.exec(selector.trim());
+    if (!match)
+        return { base: selector, pseudoElement: null };
+    return { base: match[1], pseudoElement: match[2] };
+}
 export function matchesSelector(node, selector) {
     if (node.nodeType !== 'element')
         return false;
@@ -233,13 +270,14 @@ function matchesParsed(node, parsed) {
             return false;
     }
     for (const attr of parsed.attributes) {
-        if (!node.attributes.has(attr.name))
+        const actual = node.attributes.get(attr.name);
+        if (actual === undefined)
             return false;
-        if (attr.value !== undefined && node.attributes.get(attr.name) !== attr.value)
+        if (attr.op !== undefined && !attrValueMatches(actual, attr.op, attr.value ?? ''))
             return false;
     }
-    if (parsed.pseudo) {
-        if (!matchesPseudo(node, parsed.pseudo, parsed.pseudoArg))
+    for (const pseudo of parsed.pseudos) {
+        if (!matchesPseudo(node, pseudo.name, pseudo.arg))
             return false;
     }
     return true;
@@ -251,13 +289,90 @@ function matchesPseudo(node, pseudo, arg) {
         case 'hover': return node.attributes.get('data-hovered') === 'true';
         case 'first-child': return isFirstChild(node);
         case 'last-child': return isLastChild(node);
+        case 'only-child': return isFirstChild(node) && isLastChild(node);
+        case 'empty': return hasNoRenderedChildren(node);
+        case 'first-of-type':
+            return matchesNth(node, '1', { fromEnd: false, sameType: true });
+        case 'last-of-type':
+            return matchesNth(node, '1', { fromEnd: true, sameType: true });
+        case 'only-of-type':
+            return matchesNth(node, '1', { fromEnd: false, sameType: true })
+                && matchesNth(node, '1', { fromEnd: true, sameType: true });
+        case 'checked': return hasBooleanAttribute(node, 'checked');
+        case 'disabled':
+            return isFormControl(node) && hasBooleanAttribute(node, 'disabled');
+        case 'enabled':
+            return isFormControl(node) && !hasBooleanAttribute(node, 'disabled');
         case 'not':
             if (!arg)
                 return false;
             return !matchesParsed(node, parseSelector(arg));
+        case 'where':
+        case 'is':
+            if (!arg)
+                return false;
+            return matchesSelectorList(node, arg);
+        case 'nth-child':
+            return matchesNth(node, arg, { fromEnd: false, sameType: false });
+        case 'nth-last-child':
+            return matchesNth(node, arg, { fromEnd: true, sameType: false });
+        case 'nth-of-type':
+            return matchesNth(node, arg, { fromEnd: false, sameType: true });
+        case 'nth-last-of-type':
+            return matchesNth(node, arg, { fromEnd: true, sameType: true });
         default: return false;
     }
 }
+function matchesNth(node, arg, opts) {
+    if (!arg || !node.parent)
+        return false;
+    const siblings = node.parent.children.filter(c => c.nodeType === 'element' && (!opts.sameType || c.tag === node.tag));
+    const position = siblings.indexOf(node);
+    if (position < 0)
+        return false;
+    const index = opts.fromEnd ? siblings.length - position : position + 1;
+    const formula = parseNth(arg);
+    if (!formula)
+        return false;
+    const { a, b } = formula;
+    // index = a*n + b for some integer n >= 0
+    if (a === 0)
+        return index === b;
+    const n = (index - b) / a;
+    return n >= 0 && Number.isInteger(n);
+}
+/** Parse an An+B expression ("odd", "even", "3", "2n", "2n+1", "-n+3"). */
+function parseNth(arg) {
+    const s = arg.trim().toLowerCase();
+    if (s === 'odd')
+        return { a: 2, b: 1 };
+    if (s === 'even')
+        return { a: 2, b: 0 };
+    const match = /^([+-]?\d*)n\s*(?:([+-])\s*(\d+))?$|^([+-]?\d+)$/.exec(s);
+    if (!match)
+        return null;
+    if (match[4] !== undefined)
+        return { a: 0, b: parseInt(match[4]) };
+    const aText = match[1];
+    const a = aText === '' || aText === '+' ? 1 : aText === '-' ? -1 : parseInt(aText);
+    const b = match[2] ? (match[2] === '-' ? -1 : 1) * parseInt(match[3]) : 0;
+    return { a, b };
+}
+/** Match a comma-separated list of compound selectors (the argument of :where()/:is()). */
+function matchesSelectorList(node, list) {
+    return list.split(',').some(item => matchesParsed(node, parseSelector(item.trim())));
+}
+/** Tags that participate in :enabled/:disabled matching, as in browsers. */
+const FORM_CONTROL_TAGS = new Set([
+    'input', 'button', 'select', 'textarea', 'option', 'optgroup', 'fieldset',
+]);
+function isFormControl(node) {
+    return FORM_CONTROL_TAGS.has(node.tag ?? '');
+}
+/** :empty — comments and zero-length text nodes are ignored, as in browsers. */
+function hasNoRenderedChildren(node) {
+    return node.children.every(child => child.nodeType === 'comment' || (child.nodeType === 'text' && !child.text));
+}
 function isFirstChild(node) {
     if (!node.parent)
         return false;

package/dist/src/css/specificity.js

@@ -31,8 +31,8 @@ export function computeSpecificity(selector) {
             const nameStart = pos;
             pos = skipName(selector, pos);
             const name = selector.substring(nameStart, pos);
-            if (name === 'not' && pos < selector.length && selector[pos] === '(') {
-                // :not() specificity = specificity of its argument
+            if ((name === 'not' || name === 'is' || name === 'where') && pos < selector.length && selector[pos] === '(') {
+                // :not()/:is() specificity = most specific argument; :where() = zero
                 pos++;
                 const argStart = pos;
                 let depth = 1;
@@ -46,10 +46,12 @@ export function computeSpecificity(selector) {
                 }
                 const arg = selector.substring(argStart, pos);
                 pos++; // skip )
-                const argSpec = computeSpecificity(arg);
-                ids += argSpec[0];
-                classes += argSpec[1];
-                elements += argSpec[2];
+                if (name !== 'where') {
+                    const argSpec = mostSpecificArgument(arg);
+                    ids += argSpec[0];
+                    classes += argSpec[1];
+                    elements += argSpec[2];
+                }
             }
             else if (pos < selector.length && selector[pos] === '(') {
                 classes++; // other functional pseudo-class
@@ -69,6 +71,15 @@ export function computeSpecificity(selector) {
     }
     return [ids, classes, elements];
 }
+function mostSpecificArgument(list) {
+    let best = [0, 0, 0];
+    for (const item of list.split(',')) {
+        const spec = computeSpecificity(item.trim());
+        if (compareSpecificity(spec, best) > 0)
+            best = spec;
+    }
+    return best;
+}
 function skipName(selector, pos) {
     while (pos < selector.length && /[a-zA-Z0-9_-]/.test(selector[pos]))
         pos++;

package/dist/src/css/values.d.ts

@@ -1,7 +1,12 @@
 import type { ResolvedStyle } from './compute.js';
+/**
+ * Parse a length in cells, returning the unrounded number, or null when the
+ * value is not a cell/ch length (keywords like `stretch` end in "ch" too).
+ */
+export declare function parseCellLength(value: string): number | null;
 /**
  * Parse a cell value from CSS. Accepts:
- * - `5cell` → 5
+ * - `5cell` / `5ch` → 5
  * - `0` → 0 (unitless zero is valid CSS)
  * - Returns 0 for unrecognised values (browser-only units like px, em, rem)
  */

package/dist/src/css/values.js

@@ -1,17 +1,24 @@
+/** A number with the cell unit or its browser-CSS alias ch (one character width). */
+const CELL_LENGTH = /^([+-]?(?:\d+\.?\d*|\.\d+))(cell|ch)$/;
+/**
+ * Parse a length in cells, returning the unrounded number, or null when the
+ * value is not a cell/ch length (keywords like `stretch` end in "ch" too).
+ */
+export function parseCellLength(value) {
+    const match = CELL_LENGTH.exec(value.trim());
+    return match ? parseFloat(match[1]) : null;
+}
 /**
  * Parse a cell value from CSS. Accepts:
- * - `5cell` → 5
+ * - `5cell` / `5ch` → 5
  * - `0` → 0 (unitless zero is valid CSS)
  * - Returns 0 for unrecognised values (browser-only units like px, em, rem)
  */
 export function parseCellValue(value) {
     if (value === '0')
         return 0;
-    if (value.endsWith('cell')) {
-        const num = parseFloat(value);
-        return isNaN(num) ? 0 : Math.round(num);
-    }
-    return 0;
+    const length = parseCellLength(value);
+    return length === null ? 0 : Math.round(length);
 }
 export function parseSizeValue(value) {
     if (value === 'auto')

package/dist/src/debug/context.d.ts

@@ -0,0 +1,13 @@
+import type { TermNode } from '../renderer/node.js';
+import type { ResolvedStyle } from '../css/compute.js';
+import type { LayoutBox } from '../layout/engine.js';
+/** Live render state the inspection domains read from. */
+export interface DebugContext {
+    root: TermNode;
+    styles: () => Map<number, ResolvedStyle> | undefined;
+    layout: () => Map<number, LayoutBox> | undefined;
+    /** Schedule a repaint after a domain mutates the tree. */
+    requestRender?: () => void;
+}
+/** Depth-first search for a node by id under the context root. */
+export declare function findNodeById(root: TermNode, id: number): TermNode | null;

package/dist/src/debug/context.js

@@ -0,0 +1,11 @@
+/** Depth-first search for a node by id under the context root. */
+export function findNodeById(root, id) {
+    if (root.id === id)
+        return root;
+    for (const child of root.children) {
+        const found = findNodeById(child, id);
+        if (found)
+            return found;
+    }
+    return null;
+}

package/dist/src/debug/css.d.ts

@@ -0,0 +1,12 @@
+/**
+ * CSS domain — computed style inspection over the debug protocol.
+ * Returns the resolved style svelterm actually used to paint a node.
+ */
+import { type DebugContext } from './context.js';
+import type { DebugDomain } from './server.js';
+export declare class CssDomain implements DebugDomain {
+    private ctx;
+    constructor(ctx: DebugContext);
+    handle(method: string, params: Record<string, any>): any;
+    private computedStyle;
+}

package/dist/src/debug/css.js

@@ -0,0 +1,28 @@
+/**
+ * CSS domain — computed style inspection over the debug protocol.
+ * Returns the resolved style svelterm actually used to paint a node.
+ */
+import { findNodeById } from './context.js';
+export class CssDomain {
+    ctx;
+    constructor(ctx) {
+        this.ctx = ctx;
+    }
+    handle(method, params) {
+        switch (method) {
+            case 'getComputedStyle':
+                return { style: this.computedStyle(params.nodeId) };
+            default:
+                throw new Error(`CSS.${method} not implemented`);
+        }
+    }
+    computedStyle(nodeId) {
+        if (!findNodeById(this.ctx.root, nodeId))
+            throw new Error(`No node with id ${nodeId}`);
+        const style = this.ctx.styles()?.get(nodeId);
+        if (!style)
+            throw new Error(`No computed style for node ${nodeId}`);
+        // Structured-clone-safe copy (drop any functions/undefined)
+        return JSON.parse(JSON.stringify(style));
+    }
+}