@svelterm/core 0.1.0 → 0.23.0

package/dist/src/cli/svt.js

@@ -0,0 +1,76 @@
+/**
+ * svt — debug-protocol client. Connects to a `run(App, { debug: true })`
+ * app's WebSocket server, sends one request, prints the JSON result.
+ *
+ *   svt tree                       # DOM.getDocument
+ *   svt query '.card'              # DOM.querySelector
+ *   svt style <nodeId>             # CSS.getComputedStyle
+ *   svt box <nodeId>               # DOM.getBoxModel
+ *   svt console                    # Console.getEntries
+ *   svt raw DOM.getDocument '{}'   # any method + JSON params
+ *
+ *   --port <n>   debug server port (default 9444)
+ */
+import { WebSocket } from 'ws';
+export async function runSvt(argv) {
+    const { rest, port } = extractPort(argv);
+    const command = buildCommand(rest);
+    if (!command) {
+        printUsage();
+        process.exit(1);
+    }
+    const result = await request(port, command);
+    process.stdout.write(JSON.stringify(result, null, 2) + '\n');
+}
+function buildCommand(argv) {
+    const [verb, ...args] = argv;
+    switch (verb) {
+        case 'tree': return { method: 'DOM.getDocument', params: {} };
+        case 'query': return { method: 'DOM.querySelector', params: { selector: args[0] } };
+        case 'style': return { method: 'CSS.getComputedStyle', params: { nodeId: Number(args[0]) } };
+        case 'box': return { method: 'DOM.getBoxModel', params: { nodeId: Number(args[0]) } };
+        case 'console': return { method: 'Console.getEntries', params: { count: Number(args[0]) || 100 } };
+        case 'raw': return { method: args[0], params: args[1] ? JSON.parse(args[1]) : {} };
+        default: return null;
+    }
+}
+function request(port, command) {
+    return new Promise((resolve, reject) => {
+        const ws = new WebSocket(`ws://127.0.0.1:${port}`);
+        const timer = setTimeout(() => { ws.close(); reject(new Error('timed out')); }, 3000);
+        ws.on('open', () => ws.send(JSON.stringify({ id: 1, ...command })));
+        ws.on('message', (data) => {
+            clearTimeout(timer);
+            const msg = JSON.parse(data.toString());
+            ws.close();
+            if (msg.error)
+                reject(new Error(msg.error.message));
+            else
+                resolve(msg.result);
+        });
+        ws.on('error', () => {
+            clearTimeout(timer);
+            reject(new Error(`cannot connect on port ${port} — run the target app with run(App, { debug: true })`));
+        });
+    });
+}
+function extractPort(argv) {
+    const rest = [];
+    let port = 9444;
+    for (let i = 0; i < argv.length; i++) {
+        if (argv[i] === '--port')
+            port = Number(argv[++i]) || port;
+        else
+            rest.push(argv[i]);
+    }
+    return { rest, port };
+}
+function printUsage() {
+    console.error(`Usage: svt <command> [--port <n>]
+  tree                 print the node tree
+  query <selector>     find a node id by CSS selector
+  style <nodeId>       computed style for a node
+  box <nodeId>         layout box for a node
+  console [count]      recent console entries
+  raw <method> [json]  any protocol method with JSON params`);
+}

package/dist/src/components/text-buffer.js

@@ -1,3 +1,4 @@
+import { nextGraphemeBoundary, prevGraphemeBoundary } from '../layout/unicode.js';
 export class TextBuffer {
     _text;
     _cursor;
@@ -18,16 +19,18 @@ export class TextBuffer {
     delete() {
         if (this._cursor >= this._text.length)
             return;
-        this._text = this._text.substring(0, this._cursor) + this._text.substring(this._cursor + 1);
+        const end = nextGraphemeBoundary(this._text, this._cursor);
+        this._text = this._text.substring(0, this._cursor) + this._text.substring(end);
     }
     backspace() {
         if (this._cursor <= 0)
             return;
-        this._text = this._text.substring(0, this._cursor - 1) + this._text.substring(this._cursor);
-        this._cursor--;
+        const start = prevGraphemeBoundary(this._text, this._cursor);
+        this._text = this._text.substring(0, start) + this._text.substring(this._cursor);
+        this._cursor = start;
     }
-    moveLeft() { this.cursor--; }
-    moveRight() { this.cursor++; }
+    moveLeft() { this._cursor = prevGraphemeBoundary(this._text, this._cursor); }
+    moveRight() { this._cursor = nextGraphemeBoundary(this._text, this._cursor); }
     home() { this._cursor = 0; }
     end() { this._cursor = this._text.length; }
     clearToStart() {

package/dist/src/css/animation-runner.d.ts

@@ -1,17 +1,26 @@
 import type { KeyframeStop } from './parser.js';
-import type { ResolvedStyle } from './compute.js';
+import { type ResolvedStyle } from './compute.js';
+import type { Easing } from './easing.js';
 /**
- * Runs a CSS animation by applying keyframe properties at the current time.
- * Terminal animations are discrete (no interpolation between color values).
+ * Runs a CSS animation by applying keyframe properties at the current
+ * time. Colours interpolate in RGB space between stops; properties that
+ * cannot mix (booleans, `default` colours) switch discretely at the
+ * segment midpoint, matching CSS's rule for non-interpolable values.
+ * The easing function shapes progress within each keyframe segment,
+ * as animation-timing-function does in CSS.
  */
 export declare class AnimationRunner {
     private keyframes;
     private duration;
     private iterations;
-    constructor(keyframes: KeyframeStop[], durationMs: number, iterations: number);
-    /** Apply the appropriate keyframe declarations to a style at the given elapsed time */
+    private easing;
+    /** True when any keyframe animates a property that affects layout. */
+    readonly touchesLayout: boolean;
+    constructor(keyframes: KeyframeStop[], durationMs: number, iterations: number, easing?: Easing);
+    /** Apply the animation's state at the given elapsed time to a style */
     apply(style: ResolvedStyle, elapsedMs: number): void;
     isFinished(elapsedMs: number): boolean;
     private getProgress;
-    private getKeyframeAt;
+    /** The keyframe pair bracketing `progress`, with position inside that segment. */
+    private segmentAt;
 }

package/dist/src/css/animation-runner.js

@@ -1,28 +1,58 @@
+import { applyDeclaration } from './compute.js';
 import { resolveColor } from './color.js';
+import { lerpColor, lerpNumber } from './interpolate.js';
+import { parseCellLength } from './values.js';
+/** Properties whose animation only needs repaint; anything else re-layouts. */
+const PAINT_ONLY_PROPERTIES = new Set([
+    'color', 'background', 'background-color',
+    'font-weight', 'font-style', 'text-decoration',
+    'opacity', 'visibility',
+]);
 /**
- * Runs a CSS animation by applying keyframe properties at the current time.
- * Terminal animations are discrete (no interpolation between color values).
+ * Runs a CSS animation by applying keyframe properties at the current
+ * time. Colours interpolate in RGB space between stops; properties that
+ * cannot mix (booleans, `default` colours) switch discretely at the
+ * segment midpoint, matching CSS's rule for non-interpolable values.
+ * The easing function shapes progress within each keyframe segment,
+ * as animation-timing-function does in CSS.
  */
 export class AnimationRunner {
     keyframes;
     duration;
     iterations;
-    constructor(keyframes, durationMs, iterations) {
+    easing;
+    /** True when any keyframe animates a property that affects layout. */
+    touchesLayout;
+    constructor(keyframes, durationMs, iterations, easing = t => t) {
         this.keyframes = keyframes.sort((a, b) => a.offset - b.offset);
         this.duration = durationMs;
         this.iterations = iterations;
+        this.easing = easing;
+        this.touchesLayout = this.keyframes.some(stop => stop.declarations.some(decl => !PAINT_ONLY_PROPERTIES.has(decl.property)));
     }
-    /** Apply the appropriate keyframe declarations to a style at the given elapsed time */
+    /** Apply the animation's state at the given elapsed time to a style */
     apply(style, elapsedMs) {
         if (this.keyframes.length === 0 || this.duration <= 0)
             return;
         const progress = this.getProgress(elapsedMs);
-        const kf = this.getKeyframeAt(progress);
-        if (!kf)
-            return;
-        for (const decl of kf.declarations) {
+        const segment = this.segmentAt(progress);
+        const { from, to } = segment;
+        const localT = this.easing(segment.localT);
+        // Hold the earlier stop's values, then interpolate toward the next
+        for (const decl of from.declarations) {
             applyAnimatedProperty(style, decl);
         }
+        if (!to)
+            return;
+        for (const decl of to.declarations) {
+            const fromDecl = from.declarations.find(d => d.property === decl.property);
+            if (fromDecl) {
+                applyInterpolatedProperty(style, fromDecl, decl, localT);
+            }
+            else if (localT >= 0.5) {
+                applyAnimatedProperty(style, decl);
+            }
+        }
     }
     isFinished(elapsedMs) {
         if (this.iterations === Infinity)
@@ -38,35 +68,56 @@ export class AnimationRunner {
             return 1; // finished — hold at end
         return (elapsedMs % this.duration) / this.duration;
     }
-    getKeyframeAt(progress) {
-        // Discrete: find the last keyframe whose offset <= progress
-        let result = null;
-        for (const kf of this.keyframes) {
-            if (kf.offset <= progress)
-                result = kf;
+    /** The keyframe pair bracketing `progress`, with position inside that segment. */
+    segmentAt(progress) {
+        let index = 0;
+        for (let i = 0; i < this.keyframes.length; i++) {
+            if (this.keyframes[i].offset <= progress)
+                index = i;
             else
                 break;
         }
-        return result ?? this.keyframes[0];
+        const from = this.keyframes[index];
+        const to = this.keyframes[index + 1] ?? null;
+        if (!to)
+            return { from, to: null, localT: 0 };
+        const span = to.offset - from.offset;
+        const localT = span > 0 ? (progress - from.offset) / span : 1;
+        return { from, to, localT };
     }
 }
 function applyAnimatedProperty(style, decl) {
-    switch (decl.property) {
-        case 'color':
-            style.fg = resolveColor(decl.value);
+    applyDeclaration(style, decl.property, decl.value);
+}
+function applyInterpolatedProperty(style, from, to, t) {
+    switch (to.property) {
+        case 'color': {
+            const mixed = lerpColor(resolveColor(from.value), resolveColor(to.value), t);
+            if (mixed !== null) {
+                style.fg = mixed;
+                return;
+            }
             break;
+        }
         case 'background-color':
-        case 'background':
-            style.bg = resolveColor(decl.value);
-            break;
-        case 'font-weight':
-            style.bold = decl.value === 'bold' || parseInt(decl.value) >= 700;
-            break;
-        case 'font-style':
-            style.italic = decl.value === 'italic';
-            break;
-        case 'opacity':
-            style.dim = decl.value === 'dim' || (parseFloat(decl.value) < 1);
+        case 'background': {
+            const mixed = lerpColor(resolveColor(from.value), resolveColor(to.value), t);
+            if (mixed !== null) {
+                style.bg = mixed;
+                return;
+            }
             break;
+        }
+        default: {
+            // Single cell/ch lengths interpolate; everything else is discrete
+            const a = parseCellLength(from.value);
+            const b = parseCellLength(to.value);
+            if (a !== null && b !== null) {
+                applyDeclaration(style, to.property, `${lerpNumber(a, b, t)}cell`);
+                return;
+            }
+        }
     }
+    // Non-interpolable (booleans, keywords, default colours): discrete at the midpoint
+    applyAnimatedProperty(style, t >= 0.5 ? to : from);
 }

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

@@ -3,3 +3,15 @@ import type { CSSStyleSheet, KeyframeStop } from './parser.js';
  * Extract keyframe definitions from a parsed stylesheet.
  */
 export declare function getKeyframes(sheet: CSSStyleSheet): Map<string, KeyframeStop[]>;
+/** Context for resolving var()/light-dark() inside keyframe declarations. */
+export interface KeyframeResolution {
+    /** Per-node custom properties, as collectVariables produces. */
+    variables: Map<number, Map<string, string>>;
+    scheme: 'dark' | 'light';
+}
+/**
+ * Resolve var() and light-dark() in keyframe values against the animated
+ * element. Resolution happens once when the animation starts; later
+ * custom-property changes don't retarget a running animation.
+ */
+export declare function resolveKeyframeStops(stops: KeyframeStop[], resolution: KeyframeResolution, nodeId: number): KeyframeStop[];

package/dist/src/css/animation.js

@@ -1,6 +1,27 @@
+import { expandLightDark } from './color.js';
+import { resolveVar } from './variables.js';
 /**
  * Extract keyframe definitions from a parsed stylesheet.
  */
 export function getKeyframes(sheet) {
     return sheet.keyframes;
 }
+/**
+ * Resolve var() and light-dark() in keyframe values against the animated
+ * element. Resolution happens once when the animation starts; later
+ * custom-property changes don't retarget a running animation.
+ */
+export function resolveKeyframeStops(stops, resolution, nodeId) {
+    const vars = resolution.variables.get(nodeId) ?? new Map();
+    return stops.map(stop => ({
+        offset: stop.offset,
+        declarations: stop.declarations.map(decl => {
+            let value = decl.value;
+            if (value.includes('var('))
+                value = resolveVar(value, vars);
+            if (value.includes('light-dark('))
+                value = expandLightDark(value, resolution.scheme);
+            return { property: decl.property, value };
+        }),
+    }));
+}

package/dist/src/css/calc.js

@@ -1,3 +1,4 @@
+import { parseCellLength } from './values.js';
 /**
  * Evaluate CSS math functions: calc(), min(), max(), clamp().
  * Returns the computed cell value, or null if the input is not a math function.
@@ -100,9 +101,9 @@ function resolveValue(value, available) {
     if (trimmed.endsWith('%')) {
         return available * parseFloat(trimmed) / 100;
     }
-    if (trimmed.endsWith('cell')) {
-        return parseFloat(trimmed);
-    }
+    const cellLength = parseCellLength(trimmed);
+    if (cellLength !== null)
+        return cellLength;
     // Bare number (for multipliers like * 2)
     const num = parseFloat(trimmed);
     return isNaN(num) ? 0 : num;

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

@@ -1 +1,20 @@
+/**
+ * CSS Color Level 4 parser and resolver.
+ *
+ * Supports: hex (#rgb, #rrggbb, #rrggbbaa), rgb(), hsl(), hwb(),
+ * lab(), lch(), oklab(), oklch(), named colours, transparent,
+ * light-dark(a, b) (resolved against the active colorScheme).
+ * Both legacy comma syntax and modern space + / alpha syntax.
+ */
+/**
+ * Expand `light-dark(a, b)` to whichever side matches the active scheme.
+ * Recursive on the chosen side so `light-dark(light-dark(...), x)` works.
+ * Returns the input unchanged when no light-dark() call is present.
+ */
+export declare function expandLightDark(value: string, scheme?: 'dark' | 'light'): string;
 export declare function resolveColor(value: string): string;
+/**
+ * Composite an alpha colour (#rrggbbaa) over a base colour, returning
+ * opaque #rrggbb. Opaque over-colours return unchanged.
+ */
+export declare function blendColor(under: string, over: string): string;