@svelterm/core 0.1.0 → 0.21.0

package/dist/src/layout/flex.js

@@ -2,10 +2,10 @@ export function computeMainStart(justify, freeSpace, count, hasGrow) {
     if (hasGrow || count === 0)
         return 0;
     switch (justify) {
-        case 'end': return freeSpace;
-        case 'center': return Math.floor(freeSpace / 2);
-        case 'space-around': return Math.floor(freeSpace / (count * 2));
-        case 'space-evenly': return Math.floor(freeSpace / (count + 1));
+        case 'end': return Math.max(0, freeSpace);
+        case 'center': return Math.floor(freeSpace / 2); // allows negative for overflow
+        case 'space-around': return freeSpace > 0 ? Math.floor(freeSpace / (count * 2)) : 0;
+        case 'space-evenly': return freeSpace > 0 ? Math.floor(freeSpace / (count + 1)) : 0;
         default: return 0;
     }
 }

package/dist/src/layout/size.js

@@ -17,9 +17,10 @@ export function resolveSize(value, available) {
 }
 export function constrain(value, min, max) {
     let result = value;
-    if (min != null)
-        result = Math.max(result, min);
+    // Apply max first, then min — per CSS spec, min wins when conflicting
     if (max != null)
         result = Math.min(result, max);
+    if (min != null)
+        result = Math.max(result, min);
     return result;
 }

package/dist/src/layout/text.d.ts

@@ -1,7 +1,8 @@
-export declare function wrapText(text: string, width: number): string[];
+export type WordBreak = 'normal' | 'break-all';
+export declare function wrapText(text: string, width: number, wordBreak?: WordBreak): string[];
 export declare function truncateText(text: string, width: number): string;
 export declare function truncateMiddle(text: string, width: number): string;
-export declare function measureText(text: string, availWidth: number): {
+export declare function measureText(text: string, availWidth: number, wordBreak?: WordBreak): {
     width: number;
     height: number;
 };

package/dist/src/layout/text.js

@@ -1,6 +1,20 @@
-export function wrapText(text, width) {
+import { graphemes, charWidth, stringWidth } from './unicode.js';
+/** True when every unit is a single-cell ASCII character. */
+function isPlainAscii(text) {
+    for (let i = 0; i < text.length; i++) {
+        if (text.charCodeAt(i) < 0x20 || text.charCodeAt(i) > 0x7e)
+            return false;
+    }
+    return true;
+}
+export function wrapText(text, width, wordBreak = 'normal') {
     if (text === '')
         return [''];
+    if (isPlainAscii(text))
+        return wrapAscii(text, width, wordBreak);
+    return wrapGraphemes(text, width, wordBreak);
+}
+function wrapAscii(text, width, wordBreak) {
     if (text.length <= width)
         return [text];
     const lines = [];
@@ -10,43 +24,108 @@ export function wrapText(text, width) {
             lines.push(remaining);
             break;
         }
-        // Find last space within width
-        let breakAt = remaining.lastIndexOf(' ', width);
+        // break-all wraps at any character; normal prefers the last space
+        const breakAt = wordBreak === 'break-all' ? -1 : remaining.lastIndexOf(' ', width);
         if (breakAt <= 0) {
-            // No space found — hard break at width
-            breakAt = width;
-            lines.push(remaining.substring(0, breakAt));
-            remaining = remaining.substring(breakAt);
+            // Hard break at width (break-all, or no space found)
+            lines.push(remaining.substring(0, width));
+            remaining = remaining.substring(width);
         }
         else {
             lines.push(remaining.substring(0, breakAt));
             remaining = remaining.substring(breakAt + 1); // skip the space
         }
+        if (wordBreak === 'break-all')
+            remaining = remaining.replace(/^ /, '');
+    }
+    return lines;
+}
+/** Wrap by cell width over grapheme clusters — wide glyphs never split. */
+function wrapGraphemes(text, width, wordBreak) {
+    if (stringWidth(text) <= width)
+        return [text];
+    const cells = graphemes(text).map(g => ({ g, w: charWidth(g) }));
+    const lines = [];
+    let line = '';
+    let lineWidth = 0;
+    let lastSpaceIndex = -1; // index into `line` string of the last space
+    for (const { g, w } of cells) {
+        if (lineWidth + w > width && lineWidth > 0) {
+            if (wordBreak === 'normal' && lastSpaceIndex > 0 && g !== ' ') {
+                // Move the partial word down to the next line
+                const carried = line.slice(lastSpaceIndex + 1);
+                lines.push(line.slice(0, lastSpaceIndex));
+                line = carried;
+                lineWidth = stringWidth(carried);
+            }
+            else {
+                lines.push(line);
+                line = '';
+                lineWidth = 0;
+            }
+            if (g === ' ')
+                continue; // breaks eat the space
+        }
+        line += g;
+        lineWidth += w;
+        if (g === ' ')
+            lastSpaceIndex = line.length - 1;
+        else if (lastSpaceIndex >= line.length)
+            lastSpaceIndex = -1;
     }
+    if (line !== '')
+        lines.push(line);
     return lines;
 }
 export function truncateText(text, width) {
     if (width <= 0)
         return '';
-    if (text.length <= width)
+    if (stringWidth(text) <= width)
         return text;
     if (width === 1)
         return '…';
-    return text.substring(0, width - 1) + '…';
+    let out = '';
+    let used = 0;
+    for (const g of graphemes(text)) {
+        const w = charWidth(g);
+        if (used + w > width - 1)
+            break;
+        out += g;
+        used += w;
+    }
+    return out + '…';
 }
 export function truncateMiddle(text, width) {
     if (width <= 0)
         return '';
-    if (text.length <= width)
+    if (stringWidth(text) <= width)
         return text;
     if (width <= 3)
-        return text.substring(0, width - 1) + '…';
-    const half = Math.floor((width - 1) / 2);
-    const endLen = width - 1 - half;
-    return text.substring(0, half) + '…' + text.substring(text.length - endLen);
+        return truncateText(text, width);
+    const cells = graphemes(text).map(g => ({ g, w: charWidth(g) }));
+    const budget = width - 1;
+    const headBudget = Math.floor(budget / 2);
+    let head = '';
+    let used = 0;
+    for (const { g, w } of cells) {
+        if (used + w > headBudget)
+            break;
+        head += g;
+        used += w;
+    }
+    const tailBudget = budget - used;
+    let tail = '';
+    let tailUsed = 0;
+    for (let i = cells.length - 1; i >= 0; i--) {
+        if (tailUsed + cells[i].w > tailBudget)
+            break;
+        tail = cells[i].g + tail;
+        tailUsed += cells[i].w;
+    }
+    return head + '…' + tail;
 }
-export function measureText(text, availWidth) {
-    const lines = wrapText(text, availWidth);
-    const maxLineWidth = lines.reduce((max, line) => Math.max(max, line.length), 0);
+export function measureText(text, availWidth, wordBreak = 'normal') {
+    const lines = wrapText(text, availWidth, wordBreak);
+    const maxLineWidth = lines.reduce((max, line) => Math.max(max, stringWidth(line)), 0);
     return { width: maxLineWidth, height: lines.length };
 }

package/dist/src/layout/unicode.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Grapheme segmentation and terminal cell widths. Terminals allot two
+ * columns to East Asian wide/fullwidth characters and (by modern
+ * convention) emoji; combining marks ride their base; a handful of
+ * characters occupy no column at all.
+ */
+/** Split into user-perceived characters (grapheme clusters). */
+export declare function graphemes(text: string): string[];
+/**
+ * The cell width of one grapheme cluster: the max of its code points'
+ * widths — a ZWJ emoji sequence is as wide as its widest member, a
+ * combining sequence as wide as its base.
+ */
+export declare function charWidth(grapheme: string): number;
+/** The code-unit index of the grapheme boundary after `index`. */
+export declare function nextGraphemeBoundary(text: string, index: number): number;
+/** The code-unit index of the grapheme boundary before `index`. */
+export declare function prevGraphemeBoundary(text: string, index: number): number;
+/** The total cell width of a string. */
+export declare function stringWidth(text: string): number;

package/dist/src/layout/unicode.js

@@ -0,0 +1,121 @@
+/**
+ * Grapheme segmentation and terminal cell widths. Terminals allot two
+ * columns to East Asian wide/fullwidth characters and (by modern
+ * convention) emoji; combining marks ride their base; a handful of
+ * characters occupy no column at all.
+ */
+const segmenter = new Intl.Segmenter(undefined, { granularity: 'grapheme' });
+/** Split into user-perceived characters (grapheme clusters). */
+export function graphemes(text) {
+    if (text === '')
+        return [];
+    const out = [];
+    for (const segment of segmenter.segment(text))
+        out.push(segment.segment);
+    return out;
+}
+/**
+ * East Asian wide/fullwidth ranges plus wide-rendering emoji blocks.
+ * Compact interval table over code points; derived from UAX #11 and the
+ * ranges terminals treat as wide in practice.
+ */
+const WIDE_RANGES = [
+    [0x1100, 0x115f], // Hangul Jamo leading consonants
+    [0x2e80, 0x303e], // CJK Radicals … CJK Symbols and Punctuation
+    [0x3041, 0x33ff], // Hiragana … CJK Compatibility
+    [0x3400, 0x4dbf], // CJK Extension A
+    [0x4e00, 0x9fff], // CJK Unified Ideographs
+    [0xa000, 0xa4cf], // Yi
+    [0xa960, 0xa97f], // Hangul Jamo Extended-A
+    [0xac00, 0xd7a3], // Hangul Syllables
+    [0xf900, 0xfaff], // CJK Compatibility Ideographs
+    [0xfe10, 0xfe19], // Vertical forms
+    [0xfe30, 0xfe6f], // CJK Compatibility Forms, Small Form Variants
+    [0xff00, 0xff60], // Fullwidth Forms
+    [0xffe0, 0xffe6], // Fullwidth signs
+    [0x1f004, 0x1f004], // Mahjong red dragon
+    [0x1f0cf, 0x1f0cf], // Playing card joker
+    [0x1f18e, 0x1f18e], // AB button
+    [0x1f191, 0x1f19a], // Squared CL … VS
+    [0x1f200, 0x1f2ff], // Enclosed ideographic supplement
+    [0x1f300, 0x1f64f], // Misc symbols & pictographs, emoticons
+    [0x1f680, 0x1f6ff], // Transport & map symbols
+    [0x1f900, 0x1f9ff], // Supplemental symbols & pictographs
+    [0x1fa70, 0x1faff], // Symbols & pictographs extended-A
+    [0x20000, 0x2fffd], // CJK Extension B …
+    [0x30000, 0x3fffd], // CJK Extension G …
+];
+/** Zero-column code points: combining marks handled via category check. */
+const ZERO_WIDTH = new Set([
+    0x200b, // zero width space
+    0x200c, // zero width non-joiner
+    0x200d, // zero width joiner
+    0xfeff, // BOM / zero width no-break space
+]);
+const COMBINING_RE = /\p{Mn}|\p{Me}/u;
+function codePointWidth(cp) {
+    if (ZERO_WIDTH.has(cp))
+        return 0;
+    const char = String.fromCodePoint(cp);
+    if (COMBINING_RE.test(char))
+        return 0;
+    for (const [start, end] of WIDE_RANGES) {
+        if (cp >= start && cp <= end)
+            return 2;
+        if (cp < start)
+            break;
+    }
+    return 1;
+}
+/**
+ * The cell width of one grapheme cluster: the max of its code points'
+ * widths — a ZWJ emoji sequence is as wide as its widest member, a
+ * combining sequence as wide as its base.
+ */
+export function charWidth(grapheme) {
+    let width = 0;
+    for (const char of grapheme) {
+        width = Math.max(width, codePointWidth(char.codePointAt(0)));
+    }
+    return width;
+}
+/** The code-unit index of the grapheme boundary after `index`. */
+export function nextGraphemeBoundary(text, index) {
+    if (index >= text.length)
+        return text.length;
+    for (const segment of segmenter.segment(text)) {
+        const end = segment.index + segment.segment.length;
+        if (end > index)
+            return end;
+    }
+    return text.length;
+}
+/** The code-unit index of the grapheme boundary before `index`. */
+export function prevGraphemeBoundary(text, index) {
+    if (index <= 0)
+        return 0;
+    let previous = 0;
+    for (const segment of segmenter.segment(text)) {
+        if (segment.index >= index)
+            break;
+        previous = segment.index;
+    }
+    return previous;
+}
+/** The total cell width of a string. */
+export function stringWidth(text) {
+    // Fast path: ASCII (the overwhelmingly common case)
+    let ascii = true;
+    for (let i = 0; i < text.length; i++) {
+        if (text.charCodeAt(i) > 0x7e) {
+            ascii = false;
+            break;
+        }
+    }
+    if (ascii)
+        return text.length;
+    let width = 0;
+    for (const grapheme of graphemes(text))
+        width += charWidth(grapheme);
+    return width;
+}

package/dist/src/render/animation-clock.d.ts

@@ -0,0 +1,51 @@
+import { TermNode } from '../renderer/node.js';
+import { type KeyframeResolution } from '../css/animation.js';
+import type { KeyframeStop } from '../css/parser.js';
+import type { ResolvedStyle } from '../css/compute.js';
+export type { KeyframeResolution } from '../css/animation.js';
+/**
+ * Drives CSS animations: discovers animated elements after style
+ * resolution, applies the current keyframe onto their resolved styles,
+ * and ticks a frame timer while any animation is live. The consumer
+ * wires `onFrame` to re-apply and repaint.
+ */
+export declare class AnimationClock {
+    private now;
+    private active;
+    private transitions;
+    /** Last-seen target values per transitioned node, as CSS property → value. */
+    private transitionTargets;
+    private timer;
+    onFrame?: () => void;
+    constructor(now?: () => number);
+    get activeCount(): number;
+    /** Whether this node's animation needs re-layout each frame (vs repaint only). */
+    touchesLayout(node: TermNode): boolean;
+    /**
+     * Track transitioned elements and start a one-shot transition when a
+     * tracked property's target value changed since the last sync. When
+     * `resolvedIds` is given (incremental restyle), only subtrees rooted
+     * at those nodes are compared — other nodes' styles may carry
+     * mid-animation values that are not new targets.
+     */
+    syncTransitions(root: TermNode, styles: Map<number, ResolvedStyle>, resolvedIds?: Set<number>): void;
+    /** Reconcile active animations with the tree's current resolved styles. */
+    sync(root: TermNode, styles: Map<number, ResolvedStyle>, keyframes: Map<string, KeyframeStop[]>, resolution?: KeyframeResolution): void;
+    /**
+     * Apply the current animation state of each animation onto the styles
+     * map. Returns the nodes touched, each flagged with whether it needs
+     * re-layout; finished animations hold their final keyframe and are
+     * pruned.
+     */
+    apply(styles: Map<number, ResolvedStyle>): {
+        node: TermNode;
+        touchesLayout: boolean;
+    }[];
+    private applyEntries;
+    stop(): void;
+    private discover;
+    private discoverTransitions;
+    /** Snapshot the node's target values; start a transition on any change. */
+    private trackTransitionTargets;
+    private updateTimer;
+}

package/dist/src/render/animation-clock.js

@@ -0,0 +1,213 @@
+import { AnimationRunner } from '../css/animation-runner.js';
+import { resolveKeyframeStops } from '../css/animation.js';
+import { parseEasing } from '../css/easing.js';
+/** The runner's easing for a CSS timing-function value; invalid → linear. */
+function easingFor(value) {
+    return parseEasing(value) ?? (t => t);
+}
+/** Parse a transition-property value into the tracked-property filter. */
+function transitionedProperties(value) {
+    const names = new Set();
+    for (const raw of value.split(',')) {
+        const name = raw.trim();
+        if (name === 'all')
+            return { all: true, names };
+        names.add(name === 'background' ? 'background-color' : name);
+    }
+    return { all: false, names };
+}
+function cellValue(value) {
+    return typeof value === 'number' && value >= 0 ? `${value}cell` : null;
+}
+/** Properties transitions can animate, read from the resolved style as CSS values. */
+const TRANSITIONABLE = [
+    { css: 'color', read: s => s.fg },
+    { css: 'background-color', read: s => s.bg },
+    { css: 'width', read: s => cellValue(s.width) },
+    { css: 'height', read: s => cellValue(s.height) },
+    { css: 'padding-top', read: s => cellValue(s.paddingTop) },
+    { css: 'padding-right', read: s => cellValue(s.paddingRight) },
+    { css: 'padding-bottom', read: s => cellValue(s.paddingBottom) },
+    { css: 'padding-left', read: s => cellValue(s.paddingLeft) },
+    { css: 'margin-top', read: s => cellValue(s.marginTop) },
+    { css: 'margin-right', read: s => cellValue(s.marginRight) },
+    { css: 'margin-bottom', read: s => cellValue(s.marginBottom) },
+    { css: 'margin-left', read: s => cellValue(s.marginLeft) },
+    { css: 'gap', read: s => cellValue(s.gap) },
+    { css: 'top', read: s => cellValue(s.top) },
+    { css: 'right', read: s => cellValue(s.right) },
+    { css: 'bottom', read: s => cellValue(s.bottom) },
+    { css: 'left', read: s => cellValue(s.left) },
+];
+/** Repaint cadence while animations run — colours interpolate, so ~30fps. */
+const FRAME_INTERVAL_MS = 33;
+/**
+ * Drives CSS animations: discovers animated elements after style
+ * resolution, applies the current keyframe onto their resolved styles,
+ * and ticks a frame timer while any animation is live. The consumer
+ * wires `onFrame` to re-apply and repaint.
+ */
+export class AnimationClock {
+    now;
+    active = new Map();
+    transitions = new Map();
+    /** Last-seen target values per transitioned node, as CSS property → value. */
+    transitionTargets = new Map();
+    timer = null;
+    onFrame;
+    constructor(now = Date.now) {
+        this.now = now;
+    }
+    get activeCount() {
+        return this.active.size + this.transitions.size;
+    }
+    /** Whether this node's animation needs re-layout each frame (vs repaint only). */
+    touchesLayout(node) {
+        return (this.active.get(node.id)?.runner.touchesLayout
+            || this.transitions.get(node.id)?.runner.touchesLayout) ?? false;
+    }
+    /**
+     * Track transitioned elements and start a one-shot transition when a
+     * tracked property's target value changed since the last sync. When
+     * `resolvedIds` is given (incremental restyle), only subtrees rooted
+     * at those nodes are compared — other nodes' styles may carry
+     * mid-animation values that are not new targets.
+     */
+    syncTransitions(root, styles, resolvedIds) {
+        const seen = new Set();
+        this.discoverTransitions(root, styles, resolvedIds === undefined, resolvedIds, seen);
+        for (const id of this.transitionTargets.keys()) {
+            if (!seen.has(id)) {
+                this.transitionTargets.delete(id);
+                this.transitions.delete(id);
+            }
+        }
+        this.updateTimer();
+    }
+    /** Reconcile active animations with the tree's current resolved styles. */
+    sync(root, styles, keyframes, resolution) {
+        const seen = new Set();
+        this.discover(root, styles, keyframes, seen, resolution);
+        for (const id of this.active.keys()) {
+            if (!seen.has(id))
+                this.active.delete(id);
+        }
+        this.updateTimer();
+    }
+    /**
+     * Apply the current animation state of each animation onto the styles
+     * map. Returns the nodes touched, each flagged with whether it needs
+     * re-layout; finished animations hold their final keyframe and are
+     * pruned.
+     */
+    apply(styles) {
+        const dirty = [];
+        this.applyEntries(this.active, styles, dirty);
+        this.applyEntries(this.transitions, styles, dirty);
+        this.updateTimer();
+        return dirty;
+    }
+    applyEntries(entries, styles, dirty) {
+        for (const [id, anim] of entries) {
+            const style = styles.get(id);
+            if (!style)
+                continue;
+            const elapsed = this.now() - anim.start;
+            anim.runner.apply(style, elapsed);
+            dirty.push({ node: anim.node, touchesLayout: anim.runner.touchesLayout });
+            if (anim.runner.isFinished(elapsed))
+                entries.delete(id);
+        }
+    }
+    stop() {
+        if (this.timer !== null) {
+            clearInterval(this.timer);
+            this.timer = null;
+        }
+    }
+    discover(node, styles, keyframes, seen, resolution) {
+        if (node.nodeType === 'element') {
+            const style = styles.get(node.id);
+            const name = style?.animationName;
+            const stops = name ? keyframes.get(name) : undefined;
+            if (style && name && stops && style.animationDuration > 0) {
+                const existing = this.active.get(node.id);
+                if (!existing || existing.name !== name || existing.duration !== style.animationDuration) {
+                    const resolved = resolution
+                        ? resolveKeyframeStops(stops, resolution, node.id)
+                        : stops;
+                    this.active.set(node.id, {
+                        node,
+                        runner: new AnimationRunner(resolved, style.animationDuration, style.animationIterationCount, easingFor(style.animationTimingFunction)),
+                        name,
+                        duration: style.animationDuration,
+                        start: this.now(),
+                    });
+                }
+                seen.add(node.id);
+            }
+        }
+        for (const child of node.children)
+            this.discover(child, styles, keyframes, seen, resolution);
+    }
+    discoverTransitions(node, styles, parentResolved, resolvedIds, seen) {
+        const subtreeResolved = parentResolved || (resolvedIds?.has(node.id) ?? false);
+        if (node.nodeType === 'element') {
+            const style = styles.get(node.id);
+            if (style?.transitionProperty && style.transitionDuration > 0) {
+                seen.add(node.id);
+                if (subtreeResolved)
+                    this.trackTransitionTargets(node, style);
+            }
+        }
+        for (const child of node.children) {
+            this.discoverTransitions(child, styles, subtreeResolved, resolvedIds, seen);
+        }
+    }
+    /** Snapshot the node's target values; start a transition on any change. */
+    trackTransitionTargets(node, style) {
+        const included = transitionedProperties(style.transitionProperty);
+        const targets = {};
+        for (const prop of TRANSITIONABLE) {
+            if (!included.all && !included.names.has(prop.css))
+                continue;
+            const value = prop.read(style);
+            if (value !== null)
+                targets[prop.css] = value;
+        }
+        const previous = this.transitionTargets.get(node.id);
+        this.transitionTargets.set(node.id, targets);
+        if (!previous)
+            return; // first sight — the initial style never transitions
+        const fromDecls = [];
+        const toDecls = [];
+        for (const [property, target] of Object.entries(targets)) {
+            const before = previous[property];
+            if (before !== undefined && before !== target) {
+                fromDecls.push({ property, value: before });
+                toDecls.push({ property, value: target });
+            }
+        }
+        if (fromDecls.length === 0)
+            return;
+        const stops = [
+            { offset: 0, declarations: fromDecls },
+            { offset: 1, declarations: toDecls },
+        ];
+        this.transitions.set(node.id, {
+            node,
+            runner: new AnimationRunner(stops, style.transitionDuration, 1, easingFor(style.transitionTimingFunction)),
+            name: '',
+            duration: style.transitionDuration,
+            start: this.now(),
+        });
+    }
+    updateTimer() {
+        if (this.activeCount > 0 && this.timer === null) {
+            this.timer = setInterval(() => this.onFrame?.(), FRAME_INTERVAL_MS);
+        }
+        else if (this.activeCount === 0) {
+            this.stop();
+        }
+    }
+}

package/dist/src/render/ansi-text.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Minimal ANSI/SGR parser for the <svt-ansi> passthrough element:
+ * pre-styled tool output (git diff, ls --color, build logs) renders as
+ * styled cells. SGR sequences apply; every other escape sequence is
+ * dropped. Content is `pre` — lines split on newline, no wrapping.
+ */
+export interface AnsiCell {
+    char: string;
+    fg: string;
+    bg: string;
+    bold: boolean;
+    dim: boolean;
+    italic: boolean;
+    underline: boolean;
+    strikethrough: boolean;
+    inverse: boolean;
+}
+/** The xterm 256-palette entry as #rrggbb (16–255; 0–15 use names/brights). */
+export declare function palette256(index: number): string;
+/** Parse ANSI-styled text into lines of styled cells. */
+export declare function parseAnsiText(text: string): AnsiCell[][];
+/** Width/height of parsed content (pre semantics — longest line, no wrap). */
+export declare function measureAnsiText(text: string): {
+    width: number;
+    height: number;
+};