@svelterm/core 0.1.0 → 0.21.0

package/dist/src/css/color.js

@@ -1,79 +1,301 @@
-const ANSI_COLORS = {
-    black: 'black', red: 'red', green: 'green', yellow: 'yellow',
-    blue: 'blue', magenta: 'magenta', cyan: 'cyan', white: 'white',
-};
-const ANSI_RGB = {
-    black: [0, 0, 0], red: [255, 0, 0], green: [0, 255, 0], yellow: [255, 255, 0],
-    blue: [0, 0, 255], magenta: [255, 0, 255], cyan: [0, 255, 255], white: [255, 255, 255],
-};
+/**
+ * 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.
+ */
+// --- Public API ---
+/**
+ * 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 function expandLightDark(value, scheme = 'dark') {
+    if (!value.includes('light-dark('))
+        return value;
+    const start = value.indexOf('light-dark(');
+    const argsStart = start + 'light-dark('.length;
+    // Find the matching closing paren (track nesting for nested colour funcs).
+    let depth = 1;
+    let i = argsStart;
+    while (i < value.length && depth > 0) {
+        const ch = value[i];
+        if (ch === '(')
+            depth++;
+        else if (ch === ')')
+            depth--;
+        if (depth === 0)
+            break;
+        i++;
+    }
+    if (depth !== 0)
+        return value; // unbalanced — give up, let resolveColor fail loudly
+    const args = value.slice(argsStart, i);
+    // Split on the comma at depth 0 (commas inside nested parens aren't separators).
+    let split = -1;
+    let d = 0;
+    for (let j = 0; j < args.length; j++) {
+        const ch = args[j];
+        if (ch === '(')
+            d++;
+        else if (ch === ')')
+            d--;
+        else if (ch === ',' && d === 0) {
+            split = j;
+            break;
+        }
+    }
+    if (split < 0)
+        return value;
+    const lightArg = args.slice(0, split).trim();
+    const darkArg = args.slice(split + 1).trim();
+    const picked = scheme === 'light' ? lightArg : darkArg;
+    const before = value.slice(0, start);
+    const after = value.slice(i + 1);
+    // Recurse so additional light-dark()s elsewhere in the string are also expanded.
+    return expandLightDark(before + picked + after, scheme);
+}
 export function resolveColor(value) {
     const lower = value.toLowerCase().trim();
-    // ANSI named colors (exact match, highest priority)
-    const ansiName = ANSI_COLORS[lower];
-    if (ansiName)
-        return ansiName;
-    // Hex colors
+    // ANSI named colors (exact match, highest priority for terminal rendering)
+    if (lower in ANSI_COLORS)
+        return ANSI_COLORS[lower];
+    // transparent — terminal output has no alpha layer, so the closest
+    // semantic match is "no colour set": let the parent's bg show through.
+    if (lower === 'transparent')
+        return 'default';
+    // Hex colors stay truecolor, even when they equal a basic ANSI colour:
+    // keywords are themeable (mapped to SGR names the terminal palette can
+    // restyle), an explicit hex is exact.
     if (lower.startsWith('#')) {
-        const expanded = expandHex(lower);
-        return hexToNearestAnsi(expanded) ?? expanded;
-    }
-    // rgb() / rgba()
-    if (lower.startsWith('rgb')) {
-        return parseRgbFunc(lower);
+        return expandHex(lower);
     }
-    // hsl() / hsla()
-    if (lower.startsWith('hsl')) {
-        return parseHslFunc(lower);
+    // Color functions
+    const funcMatch = lower.match(/^(\w+)\((.+)\)$/);
+    if (funcMatch) {
+        const rgb = parseColorFunction(funcMatch[1], funcMatch[2]);
+        if (rgb) {
+            const alpha = parseFunctionAlpha(funcMatch[1], funcMatch[2]);
+            if (alpha <= 0)
+                return 'default';
+            const base = rgbToColor(rgb[0], rgb[1], rgb[2]);
+            return alpha < 1 ? base + toHex(Math.round(alpha * 255)) : base;
+        }
     }
     // CSS named colors
-    const named = CSS_NAMED_COLORS[lower];
-    if (named)
-        return named;
+    if (lower in CSS_NAMED_COLORS)
+        return CSS_NAMED_COLORS[lower];
     return 'default';
 }
-function expandHex(hex) {
-    const h = hex.slice(1);
-    if (h.length === 3)
-        return '#' + h[0] + h[0] + h[1] + h[1] + h[2] + h[2];
-    return hex;
+/** Nominal xterm values for blending over SGR colour names. */
+const NOMINAL_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],
+    // The terminal's actual default bg is unknowable — assume black.
+    default: [0, 0, 0],
+};
+/**
+ * Composite an alpha colour (#rrggbbaa) over a base colour, returning
+ * opaque #rrggbb. Opaque over-colours return unchanged.
+ */
+export function blendColor(under, over) {
+    if (!over.startsWith('#') || over.length !== 9)
+        return over;
+    const alpha = parseInt(over.slice(7, 9), 16) / 255;
+    const overRgb = [
+        parseInt(over.slice(1, 3), 16),
+        parseInt(over.slice(3, 5), 16),
+        parseInt(over.slice(5, 7), 16),
+    ];
+    const underRgb = under.startsWith('#')
+        ? [parseInt(under.slice(1, 3), 16), parseInt(under.slice(3, 5), 16), parseInt(under.slice(5, 7), 16)]
+        : NOMINAL_RGB[under] ?? NOMINAL_RGB.default;
+    const mixed = overRgb.map((channel, i) => Math.round(channel * alpha + underRgb[i] * (1 - alpha)));
+    return '#' + mixed.map(c => toHex(c)).join('');
 }
-function hexToNearestAnsi(hex) {
-    const r = parseInt(hex.slice(1, 3), 16);
-    const g = parseInt(hex.slice(3, 5), 16);
-    const b = parseInt(hex.slice(5, 7), 16);
-    for (const [name, [cr, cg, cb]] of Object.entries(ANSI_RGB)) {
-        if (r === cr && g === cg && b === cb)
-            return name;
+/** The alpha component of a colour-function value (legacy or modern). */
+function parseFunctionAlpha(name, args) {
+    let alphaStr = null;
+    if (args.includes(',')) {
+        const parts = args.split(',').map(s => s.trim());
+        if ((name === 'rgb' || name === 'rgba' || name === 'hsl' || name === 'hsla') && parts.length >= 4) {
+            alphaStr = parts[3];
+        }
+    }
+    else {
+        const slashIdx = args.indexOf('/');
+        if (slashIdx >= 0)
+            alphaStr = args.substring(slashIdx + 1).trim();
     }
-    return null;
+    if (alphaStr === null)
+        return 1;
+    const value = alphaStr.endsWith('%') ? parseFloat(alphaStr) / 100 : parseFloat(alphaStr);
+    if (isNaN(value))
+        return 1;
+    return Math.max(0, Math.min(1, value));
 }
-function parseRgbFunc(value) {
-    const match = value.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/);
-    if (!match)
-        return 'default';
-    const r = parseInt(match[1]);
-    const g = parseInt(match[2]);
-    const b = parseInt(match[3]);
-    return rgbToColor(r, g, b);
-}
-function parseHslFunc(value) {
-    const match = value.match(/hsla?\(\s*(\d+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%/);
-    if (!match)
-        return 'default';
-    const h = parseInt(match[1]);
-    const s = parseFloat(match[2]) / 100;
-    const l = parseFloat(match[3]) / 100;
-    const [r, g, b] = hslToRgb(h, s, l);
-    return rgbToColor(r, g, b);
+// --- Color function parsing ---
+function parseColorFunction(name, args) {
+    // Detect legacy comma syntax (rgb/hsl only)
+    const isLegacy = args.includes(',');
+    if (isLegacy) {
+        const parts = args.split(',').map(s => s.trim());
+        switch (name) {
+            case 'rgb':
+            case 'rgba': return parseRgbChannels(parts);
+            case 'hsl':
+            case 'hsla': return parseHslChannels(parts);
+            default: return null;
+        }
+    }
+    // Modern space-separated syntax with optional / alpha
+    const slashIdx = args.indexOf('/');
+    const channelStr = slashIdx >= 0 ? args.substring(0, slashIdx) : args;
+    const parts = channelStr.trim().split(/\s+/);
+    switch (name) {
+        case 'rgb':
+        case 'rgba': return parseRgbChannels(parts);
+        case 'hsl':
+        case 'hsla': return parseHslChannels(parts);
+        case 'hwb': return parseHwbChannels(parts);
+        case 'lab': return parseLabChannels(parts);
+        case 'lch': return parseLchChannels(parts);
+        case 'oklab': return parseOklabChannels(parts);
+        case 'oklch': return parseOklchChannels(parts);
+        default: return null;
+    }
 }
-function rgbToColor(r, g, b) {
-    const hex = '#' + toHex(r) + toHex(g) + toHex(b);
-    return hexToNearestAnsi(hex) ?? hex;
+// --- Channel parsers ---
+function parseRgbChannels(parts) {
+    if (parts.length < 3)
+        return null;
+    const r = parseChannelValue(parts[0], 255);
+    const g = parseChannelValue(parts[1], 255);
+    const b = parseChannelValue(parts[2], 255);
+    if (r == null || g == null || b == null)
+        return null;
+    return [clamp(r, 0, 255), clamp(g, 0, 255), clamp(b, 0, 255)];
 }
-function toHex(n) {
-    return Math.max(0, Math.min(255, Math.round(n))).toString(16).padStart(2, '0');
+function parseHslChannels(parts) {
+    if (parts.length < 3)
+        return null;
+    const h = parseAngle(parts[0]);
+    const s = parsePercent(parts[1]);
+    const l = parsePercent(parts[2]);
+    if (h == null || s == null || l == null)
+        return null;
+    return hslToRgb(h, s, l);
+}
+function parseHwbChannels(parts) {
+    if (parts.length < 3)
+        return null;
+    const h = parseAngle(parts[0]);
+    let w = parsePercent(parts[1]);
+    let b = parsePercent(parts[2]);
+    if (h == null || w == null || b == null)
+        return null;
+    // Normalise when w + b > 1
+    if (w + b > 1) {
+        const t = w + b;
+        w /= t;
+        b /= t;
+    }
+    return hwbToRgb(h, w, b);
+}
+function parseLabChannels(parts) {
+    if (parts.length < 3)
+        return null;
+    const L = parseChannelValue(parts[0], 100);
+    const a = parseFloat(parts[1]);
+    const b = parseFloat(parts[2]);
+    if (L == null || isNaN(a) || isNaN(b))
+        return null;
+    return labToRgb(L, a, b);
+}
+function parseLchChannels(parts) {
+    if (parts.length < 3)
+        return null;
+    const L = parseChannelValue(parts[0], 100);
+    const C = parseFloat(parts[1]);
+    const H = parseAngle(parts[2]);
+    if (L == null || isNaN(C) || H == null)
+        return null;
+    // LCH → LAB
+    const a = C * Math.cos(H * Math.PI / 180);
+    const b = C * Math.sin(H * Math.PI / 180);
+    return labToRgb(L, a, b);
+}
+function parseOklabChannels(parts) {
+    if (parts.length < 3)
+        return null;
+    const L = parseChannelValue(parts[0], 1);
+    const a = parseFloat(parts[1]);
+    const b = parseFloat(parts[2]);
+    if (L == null || isNaN(a) || isNaN(b))
+        return null;
+    return oklabToRgb(L, a, b);
+}
+function parseOklchChannels(parts) {
+    if (parts.length < 3)
+        return null;
+    const L = parseChannelValue(parts[0], 1);
+    const C = parseFloat(parts[1]);
+    const H = parseAngle(parts[2]);
+    if (L == null || isNaN(C) || H == null)
+        return null;
+    // OKLCH → OKLAB
+    const a = C * Math.cos(H * Math.PI / 180);
+    const b = C * Math.sin(H * Math.PI / 180);
+    return oklabToRgb(L, a, b);
 }
+// --- Value parsers ---
+/** Parse a number or percentage. maxVal is what 100% maps to. */
+function parseChannelValue(s, maxVal) {
+    s = s.trim();
+    if (s === 'none')
+        return 0;
+    if (s.endsWith('%')) {
+        const v = parseFloat(s);
+        return isNaN(v) ? null : (v / 100) * maxVal;
+    }
+    const v = parseFloat(s);
+    return isNaN(v) ? null : v;
+}
+/** Parse a percentage to 0-1. */
+function parsePercent(s) {
+    s = s.trim();
+    if (s === 'none')
+        return 0;
+    if (s.endsWith('%')) {
+        const v = parseFloat(s);
+        return isNaN(v) ? null : v / 100;
+    }
+    // Allow raw 0-1 values for oklab/oklch
+    const v = parseFloat(s);
+    return isNaN(v) ? null : v;
+}
+/** Parse an angle value with unit support. Returns degrees. */
+function parseAngle(s) {
+    s = s.trim();
+    if (s === 'none')
+        return 0;
+    if (s.endsWith('grad'))
+        return parseFloat(s) * 0.9;
+    if (s.endsWith('rad'))
+        return parseFloat(s) * 180 / Math.PI;
+    if (s.endsWith('turn'))
+        return parseFloat(s) * 360;
+    if (s.endsWith('deg'))
+        return parseFloat(s);
+    // Bare number = degrees
+    const v = parseFloat(s);
+    return isNaN(v) ? null : v;
+}
+// --- Colour space conversions ---
 function hslToRgb(h, s, l) {
+    h = ((h % 360) + 360) % 360; // normalise hue
     if (s === 0) {
         const v = Math.round(l * 255);
         return [v, v, v];
@@ -112,7 +334,94 @@ function hslToRgb(h, s, l) {
         Math.round((b + m) * 255),
     ];
 }
-// CSS Level 4 named colors (subset — most commonly used)
+function hwbToRgb(h, w, b) {
+    // Get pure hue colour
+    const [hr, hg, hb] = hslToRgb(h, 1, 0.5);
+    const factor = 1 - w - b;
+    return [
+        Math.round((hr / 255 * factor + w) * 255),
+        Math.round((hg / 255 * factor + w) * 255),
+        Math.round((hb / 255 * factor + w) * 255),
+    ];
+}
+/** OKLAB → sRGB */
+function oklabToRgb(L, a, b) {
+    // Oklab → LMS
+    const l_ = L + 0.3963377774 * a + 0.2158037573 * b;
+    const m_ = L - 0.1055613458 * a - 0.0638541728 * b;
+    const s_ = L - 0.0894841775 * a - 1.2914855480 * b;
+    const l = l_ * l_ * l_;
+    const m = m_ * m_ * m_;
+    const s = s_ * s_ * s_;
+    // LMS → linear sRGB
+    const lr = 4.0767416621 * l - 3.3077363322 * m + 0.2309101289 * s;
+    const lg = -1.2684380046 * l + 2.6097574011 * m - 0.3413193761 * s;
+    const lb = -0.0041960863 * l - 0.7034186147 * m + 1.7076147010 * s;
+    // Linear sRGB → sRGB (gamma) and scale to 0-255
+    return [
+        Math.round(clamp(linearToSrgb(lr), 0, 1) * 255),
+        Math.round(clamp(linearToSrgb(lg), 0, 1) * 255),
+        Math.round(clamp(linearToSrgb(lb), 0, 1) * 255),
+    ];
+}
+/** LAB (CIELAB) → sRGB */
+function labToRgb(L, a, b) {
+    // LAB → XYZ-D50
+    const fy = (L + 16) / 116;
+    const fx = a / 500 + fy;
+    const fz = fy - b / 200;
+    const D50_X = 0.3457 / 0.3585;
+    const D50_Y = 1.0;
+    const D50_Z = (1 - 0.3457 - 0.3585) / 0.3585;
+    const x = (fx > 6 / 29 ? fx * fx * fx : (116 * fx - 16) / 903.3) * D50_X;
+    const y = (L > 8 ? ((L + 16) / 116) ** 3 : L / 903.3) * D50_Y;
+    const z = (fz > 6 / 29 ? fz * fz * fz : (116 * fz - 16) / 903.3) * D50_Z;
+    // XYZ-D50 → XYZ-D65 (Bradford chromatic adaptation)
+    const xd = 0.9554734527 * x - 0.0230985368 * y + 0.0632593086 * z;
+    const yd = -0.0283697093 * x + 1.0099954580 * y + 0.0210415381 * z;
+    const zd = 0.0123140016 * x - 0.0205076964 * y + 1.3303899330 * z;
+    // XYZ-D65 → linear sRGB
+    const lr = 3.2404541621 * xd - 1.5371385940 * yd - 0.4985314096 * zd;
+    const lg = -0.9692660305 * xd + 1.8760108454 * yd + 0.0415560175 * zd;
+    const lb = 0.0556434309 * xd - 0.2040259135 * yd + 1.0572251882 * zd;
+    return [
+        Math.round(clamp(linearToSrgb(lr), 0, 1) * 255),
+        Math.round(clamp(linearToSrgb(lg), 0, 1) * 255),
+        Math.round(clamp(linearToSrgb(lb), 0, 1) * 255),
+    ];
+}
+/** Linear sRGB → sRGB gamma correction */
+function linearToSrgb(v) {
+    if (v <= 0.0031308)
+        return 12.92 * v;
+    return 1.055 * Math.pow(v, 1 / 2.4) - 0.055;
+}
+// --- Helpers ---
+function clamp(v, min, max) {
+    return Math.max(min, Math.min(max, v));
+}
+function expandHex(hex) {
+    const h = hex.slice(1);
+    if (h.length === 3)
+        return '#' + h[0] + h[0] + h[1] + h[1] + h[2] + h[2];
+    if (h.length === 4)
+        return '#' + h[0] + h[0] + h[1] + h[1] + h[2] + h[2] + h[3] + h[3];
+    return hex;
+}
+function rgbToColor(r, g, b) {
+    // Computed colours (rgb(), hsl(), oklch(), …) stay truecolor like hex —
+    // only keywords map to themeable ANSI names.
+    return '#' + toHex(r) + toHex(g) + toHex(b);
+}
+function toHex(n) {
+    return Math.max(0, Math.min(255, Math.round(n))).toString(16).padStart(2, '0');
+}
+// --- ANSI colours ---
+const ANSI_COLORS = {
+    black: 'black', red: 'red', green: 'green', yellow: 'yellow',
+    blue: 'blue', magenta: 'magenta', cyan: 'cyan', white: 'white',
+};
+// --- CSS named colours (all 148) ---
 const CSS_NAMED_COLORS = {
     aliceblue: '#f0f8ff', antiquewhite: '#faebd7', aqua: '#00ffff', aquamarine: '#7fffd4',
     azure: '#f0ffff', beige: '#f5f5dc', bisque: '#ffe4c4', blanchedalmond: '#ffebcd',

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

@@ -1,4 +1,6 @@
 import { TermNode } from '../renderer/node.js';
+import { NodeMap } from '../utils/node-map.js';
+export type StyleMap = NodeMap<ResolvedStyle>;
 import { CSSStyleSheet } from './parser.js';
 import { type MediaContext } from './media.js';
 export interface ResolvedStyle {
@@ -9,7 +11,7 @@ export interface ResolvedStyle {
     underline: boolean;
     strikethrough: boolean;
     dim: boolean;
-    display: 'block' | 'inline' | 'inline-block' | 'flex' | 'grid' | 'table' | 'table-row' | 'table-cell' | 'none' | 'contents';
+    display: 'block' | 'inline' | 'inline-block' | 'flex' | 'grid' | 'table' | 'inline-table' | 'table-row' | 'table-cell' | 'table-row-group' | 'table-header-group' | 'table-footer-group' | 'table-caption' | 'table-column-group' | 'table-column' | 'none' | 'contents';
     flexDirection: 'row' | 'column' | 'row-reverse' | 'column-reverse';
     justifyContent: 'start' | 'end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
     alignItems: 'start' | 'end' | 'center' | 'stretch';
@@ -36,19 +38,36 @@ export interface ResolvedStyle {
     order: number;
     gridTemplateColumns: string | null;
     gridTemplateRows: string | null;
+    gridColumnStart: number | null;
+    gridColumnEnd: number | null;
+    gridColumnSpan: number | null;
+    gridRowStart: number | null;
+    gridRowEnd: number | null;
+    gridRowSpan: number | null;
+    gridTemplateAreas: string | null;
+    gridArea: string | null;
     animationName: string | null;
     animationDuration: number;
     animationIterationCount: number;
-    borderStyle: 'none' | 'single' | 'double' | 'rounded' | 'heavy';
+    animationTimingFunction: string;
+    transitionProperty: string | null;
+    transitionDuration: number;
+    transitionTimingFunction: string;
+    borderStyle: 'none' | 'single' | 'double' | 'rounded' | 'heavy' | 'ascii' | 'eighth-cell-inner' | 'eighth-cell-outer' | 'half-cell-inner' | 'half-cell-outer' | 'full-cell';
+    borderCorner: 'none' | 'h' | 'v';
     borderColor: string;
     borderTop: boolean;
     borderRight: boolean;
     borderBottom: boolean;
     borderLeft: boolean;
+    boxSizing: 'border-box' | 'content-box';
     overflow: 'visible' | 'hidden' | 'scroll' | 'auto';
     textOverflow: 'clip' | 'ellipsis' | 'ellipsis-middle';
     whiteSpace: 'normal' | 'nowrap' | 'pre';
+    wordBreak: 'normal' | 'break-all';
+    opacity: number;
     textAlign: 'left' | 'center' | 'right';
+    textTransform: 'none' | 'uppercase' | 'lowercase' | 'capitalize';
     position: 'static' | 'relative' | 'absolute' | 'fixed';
     top: number | null;
     right: number | null;
@@ -56,8 +75,16 @@ export interface ResolvedStyle {
     left: number | null;
     zIndex: number;
     visibility: 'visible' | 'hidden';
+    captionSide: 'top' | 'bottom';
+    tableLayout: 'auto' | 'fixed';
+    verticalAlign: 'top' | 'middle' | 'bottom' | 'baseline';
+    borderCollapse: 'separate' | 'collapse';
+    borderSpacingH: number;
+    borderSpacingV: number;
+    emptyCells: 'show' | 'hide';
 }
 export declare function defaultStyle(tag?: string): ResolvedStyle;
 export declare function resolveStyles(root: TermNode, stylesheet: CSSStyleSheet, media?: MediaContext, availWidth?: number, availHeight?: number): Map<number, ResolvedStyle>;
 export declare function filterByMedia(stylesheet: CSSStyleSheet, context: MediaContext): CSSStyleSheet;
-export declare function resolveNode(node: TermNode, stylesheet: CSSStyleSheet, styles: Map<number, ResolvedStyle>, variables: Map<number, Map<string, string>>): void;
+export declare function resolveNode(node: TermNode, stylesheet: CSSStyleSheet, styles: Map<number, ResolvedStyle>, variables: Map<number, Map<string, string>>, scheme?: 'dark' | 'light'): void;
+export declare function applyDeclaration(style: ResolvedStyle, property: string, value: string, scheme?: 'dark' | 'light'): void;