@svelterm/core 0.1.0 → 0.21.0

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;