@svelterm/core 0.1.0 → 0.21.0

package/dist/src/css/compute.js

@@ -1,5 +1,7 @@
+import { NodeMap } from '../utils/node-map.js';
+import { resolvePseudoElements } from './pseudo-elements.js';
 import { matchesSelector } from './selector.js';
-import { resolveColor } from './color.js';
+import { resolveColor, expandLightDark } from './color.js';
 import { parseCellValue, parseSizeValue, parseJustify, parseAlign } from './values.js';
 import { collectVariables, resolveVar } from './variables.js';
 import { computeSpecificity, compareSpecificity } from './specificity.js';
@@ -13,7 +15,15 @@ const DEFAULT_MEDIA = {
 };
 const INLINE_ELEMENTS = new Set(['span', 'a', 'strong', 'em', 'b', 'i', 'u', 'code', 'small', 'sub', 'sup']);
 const TABLE_ELEMENTS = {
-    table: 'table', tr: 'table-row', td: 'table-cell', th: 'table-cell',
+    table: 'table',
+    tr: 'table-row',
+    td: 'table-cell', th: 'table-cell',
+    thead: 'table-header-group',
+    tbody: 'table-row-group',
+    tfoot: 'table-footer-group',
+    caption: 'table-caption',
+    colgroup: 'table-column-group',
+    col: 'table-column',
 };
 function defaultDisplay(tag) {
     if (!tag)
@@ -25,49 +35,68 @@ function defaultDisplay(tag) {
     return 'block';
 }
 export function defaultStyle(tag) {
+    const defaultPaddingLeft = tag === 'ul' ? 2 : tag === 'ol' ? 4 : 0;
     return {
         fg: 'default', bg: 'default',
         bold: false, italic: false, underline: false, strikethrough: false, dim: false,
         display: defaultDisplay(tag),
         flexDirection: 'row',
-        justifyContent: 'start', alignItems: 'start', alignSelf: 'auto',
+        justifyContent: 'start', alignItems: 'stretch', alignSelf: 'auto',
         gap: 0,
-        paddingTop: 0, paddingRight: 0, paddingBottom: 0, paddingLeft: 0,
+        paddingTop: 0, paddingRight: 0, paddingBottom: 0, paddingLeft: defaultPaddingLeft,
         width: null, height: null,
         minWidth: null, minHeight: null, maxWidth: null, maxHeight: null,
         marginTop: 0, marginRight: 0, marginBottom: 0, marginLeft: 0,
         flexGrow: 0, flexShrink: 1, flexBasis: 'auto', flexWrap: 'nowrap', order: 0,
         gridTemplateColumns: null, gridTemplateRows: null,
+        gridColumnStart: null, gridColumnEnd: null, gridColumnSpan: null,
+        gridRowStart: null, gridRowEnd: null, gridRowSpan: null,
+        gridTemplateAreas: null, gridArea: null,
         animationName: null, animationDuration: 0, animationIterationCount: 1,
-        borderStyle: 'none', borderColor: 'default',
+        animationTimingFunction: 'ease',
+        transitionProperty: null, transitionDuration: 0,
+        transitionTimingFunction: 'ease',
+        borderStyle: 'none', borderColor: 'default', borderCorner: 'none',
         borderTop: true, borderRight: true, borderBottom: true, borderLeft: true,
+        boxSizing: 'border-box',
         overflow: 'visible',
         textOverflow: 'clip',
         whiteSpace: 'normal',
-        textAlign: 'left',
+        wordBreak: 'normal',
+        opacity: 1,
+        textAlign: tag === 'button' ? 'center' : 'left',
+        textTransform: 'none',
         position: 'static',
         top: null, right: null, bottom: null, left: null,
         zIndex: 0,
         visibility: 'visible',
+        captionSide: 'top',
+        tableLayout: 'auto',
+        verticalAlign: 'top',
+        borderCollapse: 'separate',
+        borderSpacingH: 0,
+        borderSpacingV: 0,
+        emptyCells: 'show',
     };
 }
 export function resolveStyles(root, stylesheet, media, availWidth, availHeight) {
     const hasContainerRules = stylesheet.rules.some(r => r.container);
     // Filter by media if context provided; always filter @supports
     const filtered = media ? filterByMedia(stylesheet, media) : filterSupports(stylesheet);
+    const scheme = media?.colorScheme ?? 'dark';
     if (!hasContainerRules) {
         // Simple path: no container queries
         const variables = collectVariables(root, filtered);
-        const styles = new Map();
-        resolveNode(root, filtered, styles, variables);
+        const styles = new NodeMap();
+        resolveNode(root, filtered, styles, variables, scheme);
         return styles;
     }
     // Two-pass for container queries:
     // Pass 1: resolve without @container rules to get initial layout
     const withoutContainer = filterContainerRules(filtered, false);
     const variables1 = collectVariables(root, withoutContainer);
-    const styles1 = new Map();
-    resolveNode(root, withoutContainer, styles1, variables1);
+    const styles1 = new NodeMap();
+    resolveNode(root, withoutContainer, styles1, variables1, scheme);
     // Compute layout to get container dimensions
     const layout = computeLayout(root, styles1, availWidth ?? media?.width ?? 80, availHeight ?? media?.height ?? 24);
     // Pass 2: evaluate container rules against computed layout
@@ -81,8 +110,8 @@ export function resolveStyles(root, stylesheet, media, availWidth, availHeight)
         keyframes: filtered.keyframes,
     };
     const variables2 = collectVariables(root, withMatchingContainers);
-    const styles2 = new Map();
-    resolveNode(root, withMatchingContainers, styles2, variables2);
+    const styles2 = new NodeMap();
+    resolveNode(root, withMatchingContainers, styles2, variables2, scheme);
     return styles2;
 }
 function filterSupports(stylesheet) {
@@ -106,14 +135,15 @@ export function filterByMedia(stylesheet, context) {
 const SUPPORTED_PROPERTIES = new Set([
     'display', 'flex-direction', 'justify-content', 'align-items', 'align-self',
     'gap', 'flex-grow', 'flex-shrink', 'flex-wrap', 'flex', 'order',
-    'grid-template-columns',
+    'grid-template-columns', 'grid-column',
     'padding', 'padding-top', 'padding-right', 'padding-bottom', 'padding-left',
     'margin', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left',
     'width', 'height', 'min-width', 'min-height', 'max-width', 'max-height',
     'color', 'background-color', 'background',
-    'font-weight', 'font-style', 'text-decoration', 'text-align', 'text-overflow',
-    'white-space', 'overflow', 'visibility', 'opacity',
-    'border', 'border-style', 'border-color',
+    'font-weight', 'font-style', 'text-decoration', 'text-align', 'text-overflow', 'text-transform',
+    'white-space', 'word-break', 'overflow', 'visibility', 'opacity',
+    'border', 'border-style', 'border-color', 'border-corner',
+    'box-sizing',
     'position', 'top', 'right', 'bottom', 'left', 'z-index',
 ]);
 function filterContainerRules(stylesheet, include) {
@@ -174,20 +204,21 @@ function evaluateSupports(condition) {
     const property = condition.substring(0, colonIdx).trim();
     return SUPPORTED_PROPERTIES.has(property);
 }
-export function resolveNode(node, stylesheet, styles, variables) {
+export function resolveNode(node, stylesheet, styles, variables, scheme = 'dark') {
     if (node.nodeType === 'element') {
         const vars = variables.get(node.id) ?? new Map();
         const parentStyle = node.parent ? styles.get(node.parent.id) : undefined;
-        const resolved = computeStyle(node, stylesheet, vars, parentStyle);
+        const resolved = computeStyle(node, stylesheet, vars, parentStyle, scheme);
         styles.set(node.id, resolved);
         node.cache.resolvedStyle = resolved;
         node.cache.classAttr = node.attributes.get('class') ?? '';
+        resolvePseudoElements(node, stylesheet, styles, vars, scheme);
     }
     for (const child of node.children) {
-        resolveNode(child, stylesheet, styles, variables);
+        resolveNode(child, stylesheet, styles, variables, scheme);
     }
 }
-function computeStyle(node, stylesheet, vars, parentStyle) {
+function computeStyle(node, stylesheet, vars, parentStyle, scheme = 'dark') {
     const style = defaultStyle(node.tag);
     // Collect all matching declarations with specificity
     const scored = [];
@@ -231,14 +262,34 @@ function computeStyle(node, stylesheet, vars, parentStyle) {
             }
         }
         else {
-            applyDeclaration(style, decl.property, decl.value);
+            applyDeclaration(style, decl.property, decl.value, scheme);
+        }
+    }
+    // Inline style="..." attribute — applied last (higher than any selector specificity)
+    const inline = node.attributes?.get('style');
+    if (inline) {
+        for (const decl of parseInlineStyle(inline)) {
+            applyDeclaration(style, decl.property, resolveVar(decl.value, vars), scheme);
         }
     }
     return style;
 }
+function parseInlineStyle(text) {
+    const result = [];
+    for (const part of text.split(';')) {
+        const colon = part.indexOf(':');
+        if (colon < 0)
+            continue;
+        const property = part.slice(0, colon).trim().toLowerCase();
+        const value = part.slice(colon + 1).trim();
+        if (property && value)
+            result.push({ property, value });
+    }
+    return result;
+}
 const INHERITABLE_PROPERTIES = new Set([
     'color', 'font-weight', 'font-style', 'text-decoration',
-    'white-space', 'text-align', 'visibility', 'opacity',
+    'white-space', 'word-break', 'text-align', 'visibility', 'opacity',
 ]);
 function applyInherit(style, property, parentStyle) {
     switch (property) {
@@ -262,14 +313,21 @@ function applyInherit(style, property, parentStyle) {
         case 'white-space':
             style.whiteSpace = parentStyle.whiteSpace;
             break;
+        case 'word-break':
+            style.wordBreak = parentStyle.wordBreak;
+            break;
         case 'text-align':
             style.textAlign = parentStyle.textAlign;
             break;
+        case 'text-transform':
+            style.textTransform = parentStyle.textTransform;
+            break;
         case 'visibility':
             style.visibility = parentStyle.visibility;
             break;
         case 'opacity':
             style.dim = parentStyle.dim;
+            style.opacity = parentStyle.opacity;
             break;
     }
 }
@@ -295,14 +353,17 @@ function applyInitial(style, property, tag) {
             break;
     }
 }
-function applyDeclaration(style, property, value) {
+export function applyDeclaration(style, property, value, scheme = 'dark') {
+    // light-dark(a, b) is valid wherever a colour is — expand once at the
+    // top so the property-specific branches don't each have to know about it.
+    const v = value.includes('light-dark(') ? expandLightDark(value, scheme) : value;
     switch (property) {
         case 'color':
-            style.fg = resolveColor(value);
+            style.fg = resolveColor(v);
             break;
         case 'background-color':
         case 'background':
-            style.bg = resolveColor(value);
+            style.bg = resolveColor(v);
             break;
         case 'font-weight':
             style.bold = value === 'bold' || parseInt(value) >= 700;
@@ -317,7 +378,14 @@ function applyDeclaration(style, property, value) {
                 style.strikethrough = true;
             break;
         case 'display':
-            if (['block', 'inline', 'inline-block', 'flex', 'grid', 'table', 'table-row', 'table-cell', 'none'].includes(value)) {
+            if ([
+                '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',
+            ].includes(value)) {
                 style.display = value;
             }
             break;
@@ -416,6 +484,10 @@ function applyDeclaration(style, property, value) {
             }
             break;
         }
+        case 'box-sizing':
+            if (value === 'border-box' || value === 'content-box')
+                style.boxSizing = value;
+            break;
         case 'margin-top':
             style.marginTop = value === 'auto' ? -1 : parseSizeOrCell(value);
             break;
@@ -459,15 +531,52 @@ function applyDeclaration(style, property, value) {
         case 'grid-template-rows':
             style.gridTemplateRows = value;
             break;
+        case 'grid-column': {
+            const line = parseGridLine(value);
+            style.gridColumnStart = line.start;
+            style.gridColumnEnd = line.end;
+            if (line.span !== null)
+                style.gridColumnSpan = line.span;
+            break;
+        }
+        case 'grid-row': {
+            const line = parseGridLine(value);
+            style.gridRowStart = line.start;
+            style.gridRowEnd = line.end;
+            if (line.span !== null)
+                style.gridRowSpan = line.span;
+            break;
+        }
+        case 'grid-template-areas':
+            style.gridTemplateAreas = value === 'none' ? null : value;
+            break;
+        case 'grid-area':
+            parseGridArea(style, value);
+            break;
         case 'animation':
             parseAnimationShorthand(style, value);
             break;
+        case 'transition':
+            parseTransitionShorthand(style, value);
+            break;
+        case 'transition-property':
+            style.transitionProperty = value === 'none' ? null : value;
+            break;
+        case 'transition-duration':
+            style.transitionDuration = parseDuration(value);
+            break;
+        case 'transition-timing-function':
+            style.transitionTimingFunction = value;
+            break;
         case 'animation-name':
             style.animationName = value === 'none' ? null : value;
             break;
         case 'animation-duration':
             style.animationDuration = parseDuration(value);
             break;
+        case 'animation-timing-function':
+            style.animationTimingFunction = value;
+            break;
         case 'animation-iteration-count':
             style.animationIterationCount = value === 'infinite' ? Infinity : (parseInt(value) || 1);
             break;
@@ -480,7 +589,11 @@ function applyDeclaration(style, property, value) {
                 style.borderStyle = value;
             break;
         case 'border-color':
-            style.borderColor = value === 'currentColor' ? style.fg : resolveColor(value);
+            style.borderColor = value === 'currentColor' ? style.fg : resolveColor(v);
+            break;
+        case 'border-corner':
+            if (value === 'h' || value === 'v' || value === 'none')
+                style.borderCorner = value;
             break;
         case 'border-top':
             setIndividualBorderSide(style, 'borderTop', value);
@@ -510,12 +623,21 @@ function applyDeclaration(style, property, value) {
             else
                 style.whiteSpace = 'normal';
             break;
+        case 'word-break':
+            style.wordBreak = value === 'break-all' ? 'break-all' : 'normal';
+            break;
         case 'text-align':
             if (value === 'center' || value === 'right')
                 style.textAlign = value;
             else
                 style.textAlign = 'left';
             break;
+        case 'text-transform':
+            if (value === 'uppercase' || value === 'lowercase' || value === 'capitalize')
+                style.textTransform = value;
+            else
+                style.textTransform = 'none';
+            break;
         case 'position':
             if (value === 'relative' || value === 'absolute' || value === 'fixed')
                 style.position = value;
@@ -540,18 +662,48 @@ function applyDeclaration(style, property, value) {
         case 'visibility':
             style.visibility = value === 'hidden' ? 'hidden' : 'visible';
             break;
+        case 'caption-side':
+            style.captionSide = value === 'bottom' ? 'bottom' : 'top';
+            break;
+        case 'table-layout':
+            style.tableLayout = value === 'fixed' ? 'fixed' : 'auto';
+            break;
+        case 'border-collapse':
+            style.borderCollapse = value === 'collapse' ? 'collapse' : 'separate';
+            break;
+        case 'empty-cells':
+            style.emptyCells = value === 'hide' ? 'hide' : 'show';
+            break;
+        case 'border-spacing': {
+            // One value applies to both axes; two values are horizontal then vertical.
+            const parts = value.split(/\s+/).map(parseCellValue);
+            style.borderSpacingH = parts[0] ?? 0;
+            style.borderSpacingV = (parts.length > 1 ? parts[1] : parts[0]) ?? 0;
+            break;
+        }
+        case 'vertical-align':
+            if (value === 'top' || value === 'middle' || value === 'bottom' || value === 'baseline') {
+                style.verticalAlign = value;
+            }
+            break;
         case 'opacity':
             if (value === 'dim') {
                 style.dim = true;
             }
             else {
                 const num = parseFloat(value);
-                style.dim = !isNaN(num) && num < 1;
+                if (!isNaN(num))
+                    style.opacity = Math.max(0, Math.min(1, num));
             }
             break;
     }
 }
-const BORDER_STYLES = new Set(['none', 'single', 'double', 'rounded', 'heavy']);
+const BORDER_STYLES = new Set([
+    'none', 'single', 'double', 'rounded', 'heavy', 'ascii',
+    'eighth-cell-inner', 'eighth-cell-outer',
+    'half-cell-inner', 'half-cell-outer',
+    'full-cell',
+]);
 function setIndividualBorderSide(style, side, value) {
     const enabled = value === 'true' || value === '1';
     // When setting individual sides, disable all others first (if this is the first individual side set)
@@ -576,14 +728,71 @@ function parseSizeOrCell(value) {
         return value;
     return parseCellValue(value);
 }
+/** Parse grid-area: an area name, or numeric row-start / col-start / row-end / col-end lines. */
+function parseGridArea(style, value) {
+    const trimmed = value.trim();
+    if (trimmed.includes('/')) {
+        const parts = trimmed.split('/').map(s => s.trim());
+        style.gridRowStart = parseIntOrNull(parts[0]);
+        if (parts.length > 1)
+            style.gridColumnStart = parseIntOrNull(parts[1]);
+        if (parts.length > 2)
+            style.gridRowEnd = parseIntOrNull(parts[2]);
+        if (parts.length > 3)
+            style.gridColumnEnd = parseIntOrNull(parts[3]);
+        return;
+    }
+    if (/^\d+$/.test(trimmed)) {
+        style.gridRowStart = parseInt(trimmed);
+        return;
+    }
+    style.gridArea = trimmed;
+}
+/** Parse a grid line value (grid-column/grid-row): span N | start / end | start */
+function parseGridLine(value) {
+    const trimmed = value.trim();
+    if (trimmed.startsWith('span')) {
+        return { start: null, end: null, span: parseInt(trimmed.replace('span', '').trim()) || 1 };
+    }
+    const parts = trimmed.split('/').map(s => s.trim());
+    return {
+        start: parseIntOrNull(parts[0]),
+        end: parts.length === 2 ? parseIntOrNull(parts[1]) : null,
+        span: null,
+    };
+}
+function parseIntOrNull(s) {
+    const n = parseInt(s);
+    return isNaN(n) ? null : n;
+}
+const TIMING_KEYWORDS = new Set([
+    'ease', 'linear', 'ease-in', 'ease-out', 'ease-in-out', 'step-start', 'step-end',
+]);
+const EASING_FUNCTION_PATTERN = /(?:cubic-bezier|steps)\([^)]*\)/;
+/**
+ * Pull an easing function token (`cubic-bezier(...)`/`steps(...)`) out of a
+ * shorthand value so the remainder can be split on whitespace and commas
+ * without breaking inside the function's arguments.
+ */
+function extractEasingFunction(value) {
+    const match = EASING_FUNCTION_PATTERN.exec(value);
+    if (!match)
+        return { easing: null, rest: value };
+    return { easing: match[0], rest: value.replace(match[0], ' ') };
+}
 function parseAnimationShorthand(style, value) {
     if (value === 'none') {
         style.animationName = null;
         return;
     }
-    const parts = value.split(/\s+/);
-    for (const part of parts) {
-        if (part.endsWith('s') && !part.endsWith('ss')) {
+    const { easing, rest } = extractEasingFunction(value);
+    if (easing)
+        style.animationTimingFunction = easing;
+    for (const part of rest.split(/\s+/)) {
+        if (TIMING_KEYWORDS.has(part)) {
+            style.animationTimingFunction = part;
+        }
+        else if (part.endsWith('s') && !part.endsWith('ss')) {
             style.animationDuration = parseDuration(part);
         }
         else if (part === 'infinite') {
@@ -592,11 +801,41 @@ function parseAnimationShorthand(style, value) {
         else if (/^\d+$/.test(part)) {
             style.animationIterationCount = parseInt(part);
         }
-        else if (!['ease', 'linear', 'ease-in', 'ease-out', 'ease-in-out', 'normal', 'reverse', 'alternate', 'forwards', 'backwards', 'both', 'running', 'paused'].includes(part)) {
+        else if (part && !['normal', 'reverse', 'alternate', 'forwards', 'backwards', 'both', 'running', 'paused'].includes(part)) {
             style.animationName = part;
         }
     }
 }
+/** Parse `transition: <property> <duration> [...]`, comma-separated groups. */
+function parseTransitionShorthand(style, value) {
+    const trimmed = value.trim();
+    if (trimmed === 'none') {
+        style.transitionProperty = null;
+        style.transitionDuration = 0;
+        return;
+    }
+    const { easing, rest } = extractEasingFunction(trimmed);
+    if (easing)
+        style.transitionTimingFunction = easing;
+    const properties = [];
+    let duration = 0;
+    for (const group of rest.split(',')) {
+        for (const token of group.trim().split(/\s+/)) {
+            if (/^\d*\.?\d+(ms|s)$/.test(token)) {
+                if (duration === 0)
+                    duration = parseDuration(token);
+            }
+            else if (TIMING_KEYWORDS.has(token)) {
+                style.transitionTimingFunction = token;
+            }
+            else if (token) {
+                properties.push(token);
+            }
+        }
+    }
+    style.transitionProperty = properties.length > 0 ? properties.join(',') : 'all';
+    style.transitionDuration = duration;
+}
 function parseDuration(value) {
     if (value.endsWith('ms'))
         return parseFloat(value);

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

@@ -5,4 +5,4 @@
  *
  * Adapts to dark/light mode via @media (prefers-color-scheme).
  */
-export declare const DEFAULT_STYLESHEET = "\nh1, h2, h3, h4, h5, h6 { font-weight: bold; }\nstrong, b { font-weight: bold; }\nem, i { font-style: italic; }\nu { text-decoration: underline; }\ns, del, strike { text-decoration: line-through; }\na { text-decoration: underline; }\npre { display: flex; }\np { margin-top: 1cell; margin-bottom: 1cell; }\nh1 { margin-top: 1cell; margin-bottom: 1cell; }\nh2 { margin-top: 1cell; margin-bottom: 1cell; }\nh3, h4, h5, h6 { margin-top: 1cell; margin-bottom: 1cell; }\nhr { height: 1cell; width: 100%; margin-top: 1cell; margin-bottom: 1cell; }\nblockquote { margin-left: 2cell; border-left: true; border-style: single; border-color: gray; padding-left: 1cell; }\nli { padding-left: 3cell; }\nul, ol { margin-top: 1cell; margin-bottom: 1cell; }\nmark { background-color: yellow; color: black; }\nkbd { border: single; border-color: gray; padding: 0 1cell; }\nabbr { text-decoration: underline; }\nsamp { color: cyan; }\nvar { font-style: italic; }\ndt { font-weight: bold; }\ndd { margin-left: 2cell; }\nfigure { margin-left: 2cell; margin-right: 2cell; margin-top: 1cell; margin-bottom: 1cell; }\nfigcaption { font-style: italic; }\n\n@media (prefers-color-scheme: dark) {\n    code { color: cyan; }\n    a { color: #5599ff; }\n    mark { background-color: #666600; color: white; }\n}\n\n@media (prefers-color-scheme: light) {\n    code { color: #8800cc; }\n    a { color: #0044cc; }\n}\n";
+export declare const DEFAULT_STYLESHEET = "\nh1, h2, h3, h4, h5, h6 { font-weight: bold; }\nstrong, b { font-weight: bold; }\nem, i { font-style: italic; }\nu { text-decoration: underline; }\ns, del, strike { text-decoration: line-through; }\na { text-decoration: underline; }\npre { display: flex; }\np { margin-top: 1cell; margin-bottom: 1cell; }\nh1 { margin-top: 1cell; margin-bottom: 1cell; }\nh2 { margin-top: 1cell; margin-bottom: 1cell; }\nh3, h4, h5, h6 { margin-top: 1cell; margin-bottom: 1cell; }\nhr { height: 1cell; width: 100%; margin-top: 1cell; margin-bottom: 1cell; }\nblockquote { margin-left: 2cell; border-left: true; border-style: single; border-color: gray; padding-left: 1cell; }\nli { padding-left: 3cell; }\nul, ol { margin-top: 1cell; margin-bottom: 1cell; }\nmark { background-color: yellow; color: black; }\nkbd { border: single; border-color: gray; padding: 0 1cell; }\nprogress, meter { display: inline-block; width: 20cell; height: 1cell; }\ninput[type=\"checkbox\"], input[type=\"radio\"] { display: inline-block; width: 3cell; height: 1cell; }\ndetails:not([open]) > :not(summary) { display: none; }\nsummary { padding-left: 2cell; }\nselect { display: inline-block; height: 1cell; }\nselect option, select optgroup { display: none; }\nabbr { text-decoration: underline; }\nsamp { color: cyan; }\nvar { font-style: italic; }\ndt { font-weight: bold; }\ndd { margin-left: 2cell; }\ntable { border-spacing: 2cell 0; }\nth { font-weight: bold; text-align: center; }\ncaption { text-align: center; }\nfigure { margin-left: 2cell; margin-right: 2cell; margin-top: 1cell; margin-bottom: 1cell; }\nfigcaption { font-style: italic; }\n\n@media (prefers-color-scheme: dark) {\n    code { color: cyan; }\n    a { color: #5599ff; }\n    mark { background-color: #666600; color: white; }\n}\n\n@media (prefers-color-scheme: light) {\n    code { color: #8800cc; }\n    a { color: #0044cc; }\n}\n";

package/dist/src/css/defaults.js

@@ -23,11 +23,20 @@ li { padding-left: 3cell; }
 ul, ol { margin-top: 1cell; margin-bottom: 1cell; }
 mark { background-color: yellow; color: black; }
 kbd { border: single; border-color: gray; padding: 0 1cell; }
+progress, meter { display: inline-block; width: 20cell; height: 1cell; }
+input[type="checkbox"], input[type="radio"] { display: inline-block; width: 3cell; height: 1cell; }
+details:not([open]) > :not(summary) { display: none; }
+summary { padding-left: 2cell; }
+select { display: inline-block; height: 1cell; }
+select option, select optgroup { display: none; }
 abbr { text-decoration: underline; }
 samp { color: cyan; }
 var { font-style: italic; }
 dt { font-weight: bold; }
 dd { margin-left: 2cell; }
+table { border-spacing: 2cell 0; }
+th { font-weight: bold; text-align: center; }
+caption { text-align: center; }
 figure { margin-left: 2cell; margin-right: 2cell; margin-top: 1cell; margin-bottom: 1cell; }
 figcaption { font-style: italic; }
 

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

@@ -0,0 +1,9 @@
+/**
+ * CSS easing functions: keywords, cubic-bezier(), and steps().
+ *
+ * An easing maps segment progress t ∈ [0, 1] to eased progress. Keyframe
+ * animations apply it per segment; transitions over their single segment.
+ */
+export type Easing = (t: number) => number;
+/** Parse a CSS easing value; null when the value is not a valid easing. */
+export declare function parseEasing(value: string): Easing | null;

package/dist/src/css/easing.js

@@ -0,0 +1,95 @@
+/**
+ * CSS easing functions: keywords, cubic-bezier(), and steps().
+ *
+ * An easing maps segment progress t ∈ [0, 1] to eased progress. Keyframe
+ * animations apply it per segment; transitions over their single segment.
+ */
+const KEYWORD_CONTROL_POINTS = {
+    'ease': [0.25, 0.1, 0.25, 1],
+    'ease-in': [0.42, 0, 1, 1],
+    'ease-out': [0, 0, 0.58, 1],
+    'ease-in-out': [0.42, 0, 0.58, 1],
+};
+/** Parse a CSS easing value; null when the value is not a valid easing. */
+export function parseEasing(value) {
+    const trimmed = value.trim();
+    if (trimmed === 'linear')
+        return t => t;
+    if (trimmed === 'step-start')
+        return steps(1, 'start');
+    if (trimmed === 'step-end')
+        return steps(1, 'end');
+    const preset = KEYWORD_CONTROL_POINTS[trimmed];
+    if (preset)
+        return cubicBezier(...preset);
+    if (trimmed.startsWith('cubic-bezier('))
+        return parseCubicBezier(trimmed);
+    if (trimmed.startsWith('steps('))
+        return parseSteps(trimmed);
+    return null;
+}
+function parseCubicBezier(value) {
+    const args = functionArguments(value, 'cubic-bezier');
+    if (args === null || args.length !== 4)
+        return null;
+    const numbers = args.map(Number);
+    if (numbers.some(isNaN))
+        return null;
+    const [x1, y1, x2, y2] = numbers;
+    if (x1 < 0 || x1 > 1 || x2 < 0 || x2 > 1)
+        return null;
+    return cubicBezier(x1, y1, x2, y2);
+}
+function parseSteps(value) {
+    const args = functionArguments(value, 'steps');
+    if (args === null || args.length < 1 || args.length > 2)
+        return null;
+    const count = parseInt(args[0], 10);
+    if (isNaN(count) || count <= 0 || String(count) !== args[0])
+        return null;
+    const position = args[1] ?? 'end';
+    if (!['start', 'end', 'jump-start', 'jump-end'].includes(position))
+        return null;
+    return steps(count, position.endsWith('start') ? 'start' : 'end');
+}
+/** The comma-separated arguments of `name(...)`, or null if malformed. */
+function functionArguments(value, name) {
+    if (!value.startsWith(`${name}(`) || !value.endsWith(')'))
+        return null;
+    return value.slice(name.length + 1, -1).split(',').map(s => s.trim());
+}
+function steps(count, position) {
+    return t => {
+        if (t >= 1)
+            return 1;
+        const step = position === 'start' ? Math.ceil(t * count) : Math.floor(t * count);
+        return Math.min(step / count, 1);
+    };
+}
+/**
+ * A CSS cubic bezier: fixed endpoints (0,0) and (1,1) with the given
+ * control points. Evaluated by solving x(s) = t for the curve parameter s
+ * (bisection — x is monotone since x1, x2 ∈ [0, 1]), then reading y(s).
+ */
+function cubicBezier(x1, y1, x2, y2) {
+    const sample = (p1, p2, s) => {
+        const inv = 1 - s;
+        return 3 * inv * inv * s * p1 + 3 * inv * s * s * p2 + s * s * s;
+    };
+    return t => {
+        if (t <= 0)
+            return 0;
+        if (t >= 1)
+            return 1;
+        let low = 0;
+        let high = 1;
+        for (let i = 0; i < 32; i++) {
+            const mid = (low + high) / 2;
+            if (sample(x1, x2, mid) < t)
+                low = mid;
+            else
+                high = mid;
+        }
+        return sample(y1, y2, (low + high) / 2);
+    };
+}

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

@@ -6,4 +6,4 @@ import { type ResolvedStyle } from './compute.js';
  * descendants using the same resolveNode function as full resolution.
  * Variables are collected once from the full tree for consistency.
  */
-export declare function resolveStylesIncremental(root: TermNode, stylesheet: CSSStyleSheet, existingStyles: Map<number, ResolvedStyle>, dirtyNodes: Set<TermNode>, onResolve?: (nodeId: number) => void, onLayoutAffected?: (node: TermNode) => void): Map<number, ResolvedStyle>;
+export declare function resolveStylesIncremental(root: TermNode, stylesheet: CSSStyleSheet, existingStyles: Map<number, ResolvedStyle>, dirtyNodes: Set<TermNode>, onResolve?: (nodeId: number) => void, onLayoutAffected?: (node: TermNode) => void, scheme?: 'dark' | 'light'): Map<number, ResolvedStyle>;