@graph-artifact/core 0.1.13 → 0.1.15

package/dist/layout/edges/paths.d.ts

@@ -47,6 +47,10 @@ export declare function generateSmoothPath(points: Point[], straightEnds?: boole
 /**
  * Basis spline path (d3 curveBasis style): smoother than Catmull-Rom and
  * naturally reduces sharp elbows in orthogonal-ish routes.
+ *
+ * Starts and ends with straight segments to ensure the path connects exactly
+ * to the computed node boundary intersection points, then uses B-spline
+ * interpolation for smooth curves through the middle waypoints.
  */
 export declare function generateBasisPath(points: Point[]): string;
 /**

package/dist/layout/edges/paths.js

@@ -182,9 +182,67 @@ export function generateSmoothPath(points, straightEnds = false) {
     }
     return path;
 }
+/**
+ * Attempt to add intermediate points along long segments to create more
+ * natural curves through the B-spline. This helps smooth out L-shaped
+ * or Z-shaped routes that would otherwise have sharp corners.
+ */
+function subdivideIfNeeded(points, maxSegmentLen = 80) {
+    if (points.length < 2)
+        return points;
+    const result = [points[0]];
+    for (let i = 1; i < points.length; i++) {
+        const prev = points[i - 1];
+        const curr = points[i];
+        const dx = curr.x - prev.x;
+        const dy = curr.y - prev.y;
+        const len = Math.hypot(dx, dy);
+        if (len > maxSegmentLen) {
+            // Add midpoint(s) to break up long segments
+            const subdivisions = Math.ceil(len / maxSegmentLen);
+            for (let j = 1; j < subdivisions; j++) {
+                const t = j / subdivisions;
+                result.push({
+                    x: prev.x + dx * t,
+                    y: prev.y + dy * t,
+                });
+            }
+        }
+        result.push(curr);
+    }
+    return result;
+}
+/**
+ * Check if all points are nearly collinear (forming a straight line).
+ * Used to avoid unnecessary B-spline curves on edges that should be straight.
+ */
+function isNearlyStraight(points, threshold = 8) {
+    if (points.length <= 2)
+        return true;
+    const first = points[0];
+    const last = points[points.length - 1];
+    const dx = last.x - first.x;
+    const dy = last.y - first.y;
+    const len = Math.hypot(dx, dy);
+    if (len < 1e-6)
+        return true; // coincident endpoints
+    // Check perpendicular distance of each inner point from the first→last line
+    for (let i = 1; i < points.length - 1; i++) {
+        const px = points[i].x - first.x;
+        const py = points[i].y - first.y;
+        const dist = Math.abs(px * dy - py * dx) / len;
+        if (dist > threshold)
+            return false;
+    }
+    return true;
+}
 /**
  * Basis spline path (d3 curveBasis style): smoother than Catmull-Rom and
  * naturally reduces sharp elbows in orthogonal-ish routes.
+ *
+ * Starts and ends with straight segments to ensure the path connects exactly
+ * to the computed node boundary intersection points, then uses B-spline
+ * interpolation for smooth curves through the middle waypoints.
  */
 export function generateBasisPath(points) {
     if (points.length < 2)
@@ -192,26 +250,96 @@ export function generateBasisPath(points) {
     if (points.length === 2) {
         return `M${points[0].x},${points[0].y}L${points[1].x},${points[1].y}`;
     }
-    // Repeat endpoints to mirror open basis behavior.
-    const p = [points[0], points[0], ...points, points[points.length - 1], points[points.length - 1]];
-    let path = '';
-    let started = false;
+    // If all points are nearly collinear, use a straight line instead of B-spline
+    // This avoids unnecessary curves on edges that should be straight (e.g., start→Dashboard)
+    if (isNearlyStraight(points)) {
+        const first = points[0];
+        const last = points[points.length - 1];
+        return `M${first.x},${first.y}L${last.x},${last.y}`;
+    }
+    // For 3-point L-shaped routes, create a smooth curve using cubic bezier
+    // that rounds the corner instead of making a sharp turn
+    if (points.length === 3) {
+        const [p0, corner, p2] = points;
+        // Calculate distances to determine curve tightness
+        const d1 = Math.hypot(corner.x - p0.x, corner.y - p0.y);
+        const d2 = Math.hypot(p2.x - corner.x, p2.y - corner.y);
+        const minDist = Math.min(d1, d2);
+        // Control point offset - how far along each segment to place control points
+        // Larger values = tighter corner, smaller = rounder corner
+        const tension = Math.min(0.4, minDist * 0.3 / Math.max(d1, d2, 1));
+        const offset1 = Math.max(20, d1 * tension);
+        const offset2 = Math.max(20, d2 * tension);
+        // Direction vectors
+        const dir1x = (corner.x - p0.x) / d1;
+        const dir1y = (corner.y - p0.y) / d1;
+        const dir2x = (p2.x - corner.x) / d2;
+        const dir2y = (p2.y - corner.y) / d2;
+        // Control points pulled back from corner along each segment
+        const cp1 = {
+            x: corner.x - dir1x * offset1,
+            y: corner.y - dir1y * offset1,
+        };
+        const cp2 = {
+            x: corner.x + dir2x * offset2,
+            y: corner.y + dir2y * offset2,
+        };
+        // Use cubic bezier: start -> line to approach -> curve through corner -> line to end
+        return `M${p0.x},${p0.y}L${cp1.x},${cp1.y}Q${corner.x},${corner.y},${cp2.x},${cp2.y}L${p2.x},${p2.y}`;
+    }
+    // For 4+ points, subdivide long segments then apply B-spline
+    const subdivided = subdivideIfNeeded(points, 60);
+    // Start path at exact first point
+    const first = subdivided[0];
+    const last = subdivided[subdivided.length - 1];
+    let path = `M${first.x},${first.y}`;
+    // For B-spline middle section, we need at least 4 points.
+    // Use inner points (excluding first and last) for the spline.
+    const inner = subdivided.slice(1, -1);
+    if (inner.length < 2) {
+        // Not enough inner points for B-spline, use the 3-point logic
+        if (subdivided.length === 3) {
+            const [p0, corner, p2] = subdivided;
+            const d1 = Math.hypot(corner.x - p0.x, corner.y - p0.y);
+            const d2 = Math.hypot(p2.x - corner.x, p2.y - corner.y);
+            const offset = Math.min(d1, d2) * 0.3;
+            const dir1x = d1 > 0 ? (corner.x - p0.x) / d1 : 0;
+            const dir1y = d1 > 0 ? (corner.y - p0.y) / d1 : 0;
+            const dir2x = d2 > 0 ? (p2.x - corner.x) / d2 : 0;
+            const dir2y = d2 > 0 ? (p2.y - corner.y) / d2 : 0;
+            const cp1 = { x: corner.x - dir1x * offset, y: corner.y - dir1y * offset };
+            const cp2 = { x: corner.x + dir2x * offset, y: corner.y + dir2y * offset };
+            return `M${p0.x},${p0.y}L${cp1.x},${cp1.y}Q${corner.x},${corner.y},${cp2.x},${cp2.y}L${p2.x},${p2.y}`;
+        }
+        // Fallback to straight lines
+        for (let i = 1; i < subdivided.length; i++) {
+            path += `L${subdivided[i].x},${subdivided[i].y}`;
+        }
+        return path;
+    }
+    // Draw a short straight segment toward the first inner point
+    // to ensure smooth transition from exact start point
+    const toFirst = inner[0];
+    const startBlend = {
+        x: first.x + (toFirst.x - first.x) * 0.25,
+        y: first.y + (toFirst.y - first.y) * 0.25,
+    };
+    path += `L${startBlend.x},${startBlend.y}`;
+    // B-spline through inner points with repeated endpoints for clamping
+    const p = [startBlend, startBlend, ...inner, inner[inner.length - 1], inner[inner.length - 1]];
     for (let i = 0; i <= p.length - 4; i++) {
         const p0 = p[i];
         const p1 = p[i + 1];
         const p2 = p[i + 2];
         const p3 = p[i + 3];
         // Cubic Bézier equivalent of uniform cubic B-spline segment.
-        const b0 = { x: (p0.x + 4 * p1.x + p2.x) / 6, y: (p0.y + 4 * p1.y + p2.y) / 6 };
         const b1 = { x: (4 * p1.x + 2 * p2.x) / 6, y: (4 * p1.y + 2 * p2.y) / 6 };
         const b2 = { x: (2 * p1.x + 4 * p2.x) / 6, y: (2 * p1.y + 4 * p2.y) / 6 };
         const b3 = { x: (p1.x + 4 * p2.x + p3.x) / 6, y: (p1.y + 4 * p2.y + p3.y) / 6 };
-        if (!started) {
-            path = `M${b0.x},${b0.y}`;
-            started = true;
-        }
         path += `C${b1.x},${b1.y},${b2.x},${b2.y},${b3.x},${b3.y}`;
     }
+    // End with straight segment to exact last point
+    path += `L${last.x},${last.y}`;
     return path;
 }
 // ─── Rounded Polyline Path (for orthogonal-ish ER routes) ──────────────────

package/dist/layout/index.js

@@ -95,6 +95,25 @@ export function layoutNodes(parsed, options, nodeSizeOverrides) {
                 height: bounds.height,
             });
             nodes.unshift(buildSubgraphNode(subgraph, bounds, theme));
+            // Center start/end nodes within the subgraph (state diagrams)
+            if (parsed.diagramType === 'state') {
+                for (const nodeId of subgraph.nodeIds) {
+                    // Check if this is a start or end node for this subgraph
+                    if (nodeId.startsWith('[*]_start_') || nodeId.startsWith('[*]_end_')) {
+                        const nodePos = positions.get(nodeId);
+                        if (nodePos) {
+                            // Center horizontally within subgraph
+                            const centeredX = bounds.x + (bounds.width - nodePos.width) / 2;
+                            positions.set(nodeId, { ...nodePos, x: centeredX });
+                            // Update the corresponding React Flow node
+                            const rfNode = nodes.find(n => n.id === nodeId);
+                            if (rfNode) {
+                                rfNode.position.x = centeredX;
+                            }
+                        }
+                    }
+                }
+            }
         }
     }
     const nodeShapes = new Map(parsed.nodes.map(n => [n.id, n.shape]));

package/dist/layout/sequenceLayout.js

@@ -28,7 +28,8 @@ const LABEL_LINE_HEIGHT = 16;
 const LABEL_GAP_BELOW = 6;
 const TOP_PADDING = 20;
 const LEFT_PADDING = 40;
-const LIFELINE_START_OFFSET = 40;
+const LIFELINE_START_OFFSET = 0; // Lifelines connect directly to participant bottom
+const FIRST_MESSAGE_PADDING = 50; // Space below participants before first message row
 const BOTTOM_PARTICIPANT_GAP = 40;
 const ANCHOR_WIDTH = 2;
 const ANCHOR_HEIGHT = 2;
@@ -131,10 +132,12 @@ export function layoutSequenceDiagram(sequence, theme, metadata) {
     // ── Compute message Y positions ──
     // Each message row is tall enough for its label above the line.
     // Notes consume their own vertical rows before the message they precede.
+    // Lifeline starts at participant bottom (visually connects)
     const lifelineStartY = seq.topPadding + seq.participantHeight + seq.lifelineStartOffset;
     const messageY = [];
     const noteYPositions = new Map();
-    let currentY = lifelineStartY;
+    // Messages start with padding below participants (room for labels, numbers, arrows)
+    let currentY = lifelineStartY + FIRST_MESSAGE_PADDING;
     const noteSpaceBefore = new Map();
     if (sequence.notes) {
         for (let ni = 0; ni < sequence.notes.length; ni++) {

package/dist/parsers/state.js

@@ -2,67 +2,206 @@ import { prep } from './helpers.js';
 // Matches node IDs: regular words OR the special [*] start/end marker
 const NODE_ID = /(\[\*\]|[\w]+)/;
 const EDGE_RE = new RegExp(`^${NODE_ID.source}\\s*-->\\s*${NODE_ID.source}(?:\\s*:\\s*(.+))?`);
+// Matches composite state declarations: state StateName { or state "Label" as StateName {
+const COMPOSITE_STATE_RE = /^state\s+(?:"([^"]+)"\s+as\s+)?(\w+)\s*\{/i;
 export function parseStateDiagram(syntax) {
     const lines = prep(syntax);
     if (!lines.some(l => /^stateDiagram(-v2)?$/i.test(l)))
         return null;
+    // Pre-scan: identify all composite states before parsing edges
+    // This is needed because edges like `A --> CompositeState` may appear
+    // before the `state CompositeState { }` declaration.
+    const compositeStates = new Set();
+    for (const line of lines) {
+        const compositeMatch = line.match(COMPOSITE_STATE_RE);
+        if (compositeMatch) {
+            compositeStates.add(compositeMatch[2]);
+        }
+    }
     const nodeMap = new Map();
     const edges = [];
-    // Track [*] usage: first occurrence as source = start, as target = end
-    let hasStart = false;
-    let hasEnd = false;
-    function ensureStartNode() {
-        if (!hasStart) {
-            hasStart = true;
-            nodeMap.set('[*]_start', { id: '[*]_start', label: '', shape: 'circle' });
+    const subgraphs = [];
+    // Track composite state nesting
+    const stateStack = []; // stack of parent state IDs
+    const nodeParent = new Map(); // nodeId -> parent composite state ID
+    // Track [*] usage per context (global or within composite state)
+    const startNodes = new Map(); // context -> start node ID
+    const endNodes = new Map(); // context -> end node ID
+    function getContext() {
+        return stateStack.length > 0 ? stateStack[stateStack.length - 1] : '__global__';
+    }
+    function ensureStartNode(context) {
+        if (!startNodes.has(context)) {
+            const id = context === '__global__' ? '[*]_start' : `[*]_start_${context}`;
+            startNodes.set(context, id);
+            nodeMap.set(id, { id, label: '', shape: 'circle' });
+            if (context !== '__global__') {
+                nodeParent.set(id, context);
+            }
         }
+        return startNodes.get(context);
     }
-    function ensureEndNode() {
-        if (!hasEnd) {
-            hasEnd = true;
-            nodeMap.set('[*]_end', { id: '[*]_end', label: '', shape: 'doublecircle' });
+    function ensureEndNode(context) {
+        if (!endNodes.has(context)) {
+            const id = context === '__global__' ? '[*]_end' : `[*]_end_${context}`;
+            endNodes.set(context, id);
+            nodeMap.set(id, { id, label: '', shape: 'doublecircle' });
+            if (context !== '__global__') {
+                nodeParent.set(id, context);
+            }
         }
+        return endNodes.get(context);
     }
-    function ensureNode(id) {
+    function ensureNode(id, context) {
         if (id === '[*]')
             return; // handled per-edge based on position
+        if (compositeStates.has(id))
+            return; // composite states are subgraphs, not nodes
         if (nodeMap.has(id))
             return;
         nodeMap.set(id, { id, label: id, shape: 'round' });
+        if (context !== '__global__') {
+            nodeParent.set(id, context);
+        }
     }
-    for (const line of lines) {
-        if (/^(stateDiagram|state|note|direction)\s/i.test(line))
-            continue;
+    for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        // Skip diagram declaration and direction
         if (/^stateDiagram(-v2)?$/i.test(line))
             continue;
+        if (/^direction\s/i.test(line))
+            continue;
+        if (/^note\s/i.test(line))
+            continue;
+        // Check for closing brace (end of composite state)
+        if (line === '}') {
+            stateStack.pop();
+            continue;
+        }
+        // Check for composite state declaration: state StateName {
+        const compositeMatch = line.match(COMPOSITE_STATE_RE);
+        if (compositeMatch) {
+            const label = compositeMatch[1] || compositeMatch[2];
+            const id = compositeMatch[2];
+            const context = getContext();
+            // Create subgraph entry
+            subgraphs.push({
+                id,
+                label,
+                nodeIds: [], // will be populated later
+            });
+            // If nested inside another composite state, track parent
+            if (context !== '__global__') {
+                nodeParent.set(id, context);
+            }
+            // Push onto stack for child nodes
+            stateStack.push(id);
+            continue;
+        }
+        // Skip simple state declarations (state StateName) without braces
+        if (/^state\s+/i.test(line) && !line.includes('{'))
+            continue;
+        // Parse transitions
         const m = line.match(EDGE_RE);
         if (m) {
             const rawSource = m[1];
             const rawTarget = m[2];
             const label = m[3]?.trim();
+            const context = getContext();
             // Resolve [*] to start or end based on edge position
             let source;
             let target;
+            let sourceSubgraphId;
+            let targetSubgraphId;
             if (rawSource === '[*]') {
-                ensureStartNode();
-                source = '[*]_start';
+                source = ensureStartNode(context);
+            }
+            else if (compositeStates.has(rawSource)) {
+                // Edge from composite state: use subgraph boundary
+                source = rawSource; // temporary, will be replaced
+                sourceSubgraphId = rawSource;
             }
             else {
-                ensureNode(rawSource);
+                ensureNode(rawSource, context);
                 source = rawSource;
             }
             if (rawTarget === '[*]') {
-                ensureEndNode();
-                target = '[*]_end';
+                target = ensureEndNode(context);
+            }
+            else if (compositeStates.has(rawTarget)) {
+                // Edge to composite state: use subgraph boundary
+                target = rawTarget; // temporary, will be replaced
+                targetSubgraphId = rawTarget;
             }
             else {
-                ensureNode(rawTarget);
+                ensureNode(rawTarget, context);
                 target = rawTarget;
             }
-            edges.push({ source, target, label });
+            edges.push({ source, target, label, sourceSubgraphId, targetSubgraphId });
+        }
+    }
+    // Populate subgraph nodeIds based on nodeParent mapping
+    for (const subgraph of subgraphs) {
+        subgraph.nodeIds = [];
+        for (const [nodeId, parentId] of nodeParent.entries()) {
+            if (parentId === subgraph.id) {
+                subgraph.nodeIds.push(nodeId);
+            }
+        }
+    }
+    // Build maps for incoming vs outgoing edge representative nodes
+    // Use start node for incoming edges (so they enter from above)
+    // Use end node for outgoing edges ONLY if an explicit end node exists
+    // (i.e., there's a [*] transition inside the subgraph). Otherwise use start node.
+    // This prevents orphan end nodes that dagre positions randomly.
+    const subgraphIncomingRep = new Map(); // for targetSubgraphId
+    const subgraphOutgoingRep = new Map(); // for sourceSubgraphId
+    for (const subgraph of subgraphs) {
+        // For incoming edges: use start node (top of subgraph)
+        const startNode = startNodes.get(subgraph.id);
+        if (startNode) {
+            subgraphIncomingRep.set(subgraph.id, startNode);
+        }
+        else if (subgraph.nodeIds.length > 0) {
+            subgraphIncomingRep.set(subgraph.id, subgraph.nodeIds[0]);
+        }
+        // For outgoing edges: use end node (now guaranteed to exist for subgraphs with outgoing edges)
+        const endNode = endNodes.get(subgraph.id);
+        if (endNode) {
+            subgraphOutgoingRep.set(subgraph.id, endNode);
+        }
+        else if (startNode) {
+            subgraphOutgoingRep.set(subgraph.id, startNode);
+        }
+        else if (subgraph.nodeIds.length > 0) {
+            subgraphOutgoingRep.set(subgraph.id, subgraph.nodeIds[0]);
+        }
+    }
+    // Fix edges that reference composite states: replace subgraph ID with appropriate representative node
+    for (const edge of edges) {
+        if (edge.sourceSubgraphId && edge.source === edge.sourceSubgraphId) {
+            // Outgoing edge: use end node (bottom) so target renders below subgraph
+            const repNode = subgraphOutgoingRep.get(edge.sourceSubgraphId);
+            if (repNode) {
+                edge.source = repNode;
+            }
+        }
+        if (edge.targetSubgraphId && edge.target === edge.targetSubgraphId) {
+            // Incoming edge: use start node (top) so edge enters from above
+            const repNode = subgraphIncomingRep.get(edge.targetSubgraphId);
+            if (repNode) {
+                edge.target = repNode;
+            }
         }
     }
     if (nodeMap.size === 0)
         return null;
-    return { kind: 'graph', direction: 'TB', diagramType: 'state', nodes: Array.from(nodeMap.values()), edges };
+    return {
+        kind: 'graph',
+        direction: 'TB',
+        diagramType: 'state',
+        nodes: Array.from(nodeMap.values()),
+        edges,
+        subgraphs: subgraphs.length > 0 ? subgraphs : undefined,
+    };
 }

package/dist/theme/dark.js

@@ -25,14 +25,14 @@ const font = {
     family: "'Roboto', sans-serif",
     mono: "'Roboto Mono', monospace",
     size: {
-        xxs: '9px',
-        xs: '10px',
-        sm: '11px',
-        md: '12px',
-        base: '13px',
-        lg: '14px',
-        xl: '16px',
-        xxl: '18px',
+        xxs: '10px',
+        xs: '11px',
+        sm: '12px',
+        md: '13px',
+        base: '14px',
+        lg: '16px',
+        xl: '18px',
+        xxl: '20px',
     },
     weight: {
         regular: 400,
@@ -98,7 +98,7 @@ const edgeDefaults = {
     style: { stroke: color.gray3, strokeWidth: 1.5 },
     labelStyle: {
         fill: color.gray3,
-        fontSize: 12,
+        fontSize: 13,
         fontWeight: font.weight.medium,
         fontFamily: font.family,
     },
@@ -145,7 +145,7 @@ const nodeBase = {
 // ─── Per-Node-Type Sizing ───────────────────────────────────────────────────
 const nodeStyles = {
     flow: {
-        diamond: { labelMaxWidth: '100px' },
+        diamond: { labelMaxWidth: '140px' },
         markdownCode: { backgroundColor: color.darkBg3, padding: `${space[1]} ${space[2]}` },
     },
     state: {
@@ -165,7 +165,7 @@ const nodeStyles = {
     subgraph: {
         pointerEvents: 'none',
         borderStyle: '1px dashed',
-        bgOpacity: '44',
+        bgOpacity: '88',
         labelOffset: 28,
     },
     detail: {

package/dist/theme/light.js

@@ -25,14 +25,14 @@ const font = {
     family: "'Roboto', sans-serif",
     mono: "'Roboto Mono', monospace",
     size: {
-        xxs: '9px',
-        xs: '10px',
-        sm: '11px',
-        md: '12px',
-        base: '13px',
-        lg: '14px',
-        xl: '16px',
-        xxl: '18px',
+        xxs: '10px',
+        xs: '11px',
+        sm: '12px',
+        md: '13px',
+        base: '14px',
+        lg: '16px',
+        xl: '18px',
+        xxl: '20px',
     },
     weight: {
         regular: 400,
@@ -98,7 +98,7 @@ const edgeDefaults = {
     style: { stroke: color.gray3, strokeWidth: 1.5 },
     labelStyle: {
         fill: color.gray4,
-        fontSize: 12,
+        fontSize: 13,
         fontWeight: font.weight.medium,
         fontFamily: font.family,
     },
@@ -145,7 +145,7 @@ const nodeBase = {
 // ─── Per-Node-Type Sizing ───────────────────────────────────────────────────
 const nodeStyles = {
     flow: {
-        diamond: { labelMaxWidth: '100px' },
+        diamond: { labelMaxWidth: '140px' },
         markdownCode: { backgroundColor: color.darkBg3, padding: `${space[1]} ${space[2]}` },
     },
     state: {

package/dist/utils/boxShadow.d.ts

@@ -0,0 +1,9 @@
+export interface BoxShadowExtent {
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+    max: number;
+}
+export declare function getBoxShadowExtent(boxShadow: string | null | undefined): BoxShadowExtent;
+export declare function getBoxShadowMaxExtent(boxShadow: string | null | undefined): number;

package/dist/utils/boxShadow.js

@@ -0,0 +1,103 @@
+function splitOutsideParens(input, delimiter) {
+    const out = [];
+    let buf = '';
+    let depth = 0;
+    for (let i = 0; i < input.length; i++) {
+        const ch = input[i];
+        if (ch === '(')
+            depth++;
+        if (ch === ')')
+            depth = Math.max(0, depth - 1);
+        if (depth === 0 && ch === delimiter) {
+            const s = buf.trim();
+            if (s)
+                out.push(s);
+            buf = '';
+            continue;
+        }
+        buf += ch;
+    }
+    const s = buf.trim();
+    if (s)
+        out.push(s);
+    return out;
+}
+function splitWhitespaceOutsideParens(input) {
+    const out = [];
+    let buf = '';
+    let depth = 0;
+    for (let i = 0; i < input.length; i++) {
+        const ch = input[i];
+        if (ch === '(')
+            depth++;
+        if (ch === ')')
+            depth = Math.max(0, depth - 1);
+        const isWs = ch === ' ' || ch === '\t' || ch === '\n' || ch === '\r';
+        if (depth === 0 && isWs) {
+            const s = buf.trim();
+            if (s)
+                out.push(s);
+            buf = '';
+            continue;
+        }
+        buf += ch;
+    }
+    const s = buf.trim();
+    if (s)
+        out.push(s);
+    return out;
+}
+function isLengthToken(token) {
+    // Keep intentionally conservative: we only care about px/unitless values.
+    return /^-?\d*\.?\d+(px)?$/i.test(token);
+}
+function parsePx(token) {
+    const t = token.trim().toLowerCase();
+    const n = t.endsWith('px') ? parseFloat(t.slice(0, -2)) : parseFloat(t);
+    return Number.isFinite(n) ? n : 0;
+}
+export function getBoxShadowExtent(boxShadow) {
+    if (!boxShadow)
+        return { left: 0, right: 0, top: 0, bottom: 0, max: 0 };
+    const src = String(boxShadow).trim();
+    if (!src || src === 'none')
+        return { left: 0, right: 0, top: 0, bottom: 0, max: 0 };
+    let left = 0;
+    let right = 0;
+    let top = 0;
+    let bottom = 0;
+    // box-shadow is a comma-separated list, but colors can contain commas (rgba()).
+    const shadows = splitOutsideParens(src, ',');
+    for (const shadow of shadows) {
+        const tokens = splitWhitespaceOutsideParens(shadow);
+        if (tokens.length < 2)
+            continue;
+        if (tokens.includes('inset'))
+            continue;
+        const lengths = [];
+        for (const tok of tokens) {
+            if (!isLengthToken(tok))
+                continue;
+            lengths.push(parsePx(tok));
+            if (lengths.length >= 4)
+                break;
+        }
+        if (lengths.length < 2)
+            continue;
+        const offsetX = lengths[0];
+        const offsetY = lengths[1];
+        const blur = Math.max(0, lengths[2] ?? 0);
+        const spread = lengths[3] ?? 0;
+        const base = Math.max(0, blur + spread);
+        // Extents outside the element box in each direction.
+        left = Math.max(left, Math.max(0, base - offsetX));
+        right = Math.max(right, Math.max(0, base + offsetX));
+        top = Math.max(top, Math.max(0, base - offsetY));
+        bottom = Math.max(bottom, Math.max(0, base + offsetY));
+    }
+    const max = Math.max(left, right, top, bottom);
+    return { left, right, top, bottom, max };
+}
+export function getBoxShadowMaxExtent(boxShadow) {
+    return getBoxShadowExtent(boxShadow).max;
+}