cssprobe-cli 0.2.14 → 0.2.15

package/dist/collector-bundle.js

@@ -161,6 +161,7 @@ var __cssprobe_cli = (() => {
     const display = cs.display;
     const position = cs.position;
     const flexDir = cs.flexDirection;
+    const floatVal = cs.float;
     const overflowY = cs.overflowY;
     const overflowX = cs.overflowX;
     let role = "block";
@@ -168,6 +169,7 @@ var __cssprobe_cli = (() => {
     else if (position === "absolute") role = "absolute";
     else if (position === "sticky") role = "sticky";
     else if (display === "grid" || display === "inline-grid") role = "grid";
+    else if (floatVal && floatVal !== "none") role = "float";
     else if (display === "flex" || display === "inline-flex") {
       role = flexDir === "column" ? "flex-col" : "flex-row";
     } else if (display === "inline" || display === "inline-block") role = "inline";
@@ -216,6 +218,7 @@ var __cssprobe_cli = (() => {
         "boxSizing",
         "margin",
         "padding",
+        "float",
         "flexDirection",
         "flexGrow",
         "flexShrink",

package/dist/engine/collector.js

@@ -79,6 +79,7 @@ function classifyShape(cs, declared) {
     const display = cs.display;
     const position = cs.position;
     const flexDir = cs.flexDirection;
+    const floatVal = cs.float;
     const overflowY = cs.overflowY;
     const overflowX = cs.overflowX;
     let role = 'block';
@@ -90,6 +91,8 @@ function classifyShape(cs, declared) {
         role = 'sticky';
     else if (display === 'grid' || display === 'inline-grid')
         role = 'grid';
+    else if (floatVal && floatVal !== 'none')
+        role = 'float';
     else if (display === 'flex' || display === 'inline-flex') {
         role = flexDir === 'column' ? 'flex-col' : 'flex-row';
     }
@@ -139,7 +142,7 @@ function collectNode(el, maxText, crossOriginBlocked, blockedSheetUrls) {
         const props = {};
         const LAYOUT_PROPS = [
             'position', 'display', 'height', 'width', 'minHeight', 'maxHeight',
-            'overflowX', 'overflowY', 'boxSizing', 'margin', 'padding',
+            'overflowX', 'overflowY', 'boxSizing', 'margin', 'padding', 'float',
             'flexDirection', 'flexGrow', 'flexShrink', 'flexBasis', 'alignItems', 'justifyContent',
             'transform', 'filter', 'perspective', 'willChange', 'contain',
             'zIndex', 'top', 'left', 'right', 'bottom', 'visibility', 'opacity',

package/dist/engine/renderers/layout.js

@@ -10,6 +10,7 @@ function renderLayout(snapshot, findings) {
     const indentUnit = 2;
     const maxDepth = 8;
     const boxPad = 4;
+    const extractedAbs = new Set();
     const issueLocations = new Set();
     for (const f of findings) {
         if (f.location && (f.level === 'warning' || f.level === 'error'))
@@ -21,13 +22,26 @@ function renderLayout(snapshot, findings) {
         const ratio = nodeW / vpW;
         return Math.max(Math.round(available * ratio), 14);
     }
+    /** Recursively collect all position:absolute nodes in a subtree. */
+    function collectAbsDescendants(node, result) {
+        for (const child of node.children) {
+            if (child.props.position === 'absolute') {
+                result.push(child);
+                // Don't recurse into absolute children — they're collected as units
+            }
+            else {
+                // Recurse into non-absolute children to find deeper absolute descendants
+                collectAbsDescendants(child, result);
+            }
+        }
+    }
     const lines = [];
-    function renderBox(node, charW, depth, flat = false) {
+    function renderBox(node, charW, depth, flat = false, absMark = '') {
         const m = node.metrics.rect;
         const dimStr = `${Math.round(m.width)}\u00D7${Math.round(m.height)}`;
         const innerW = Math.max(charW - 2, 1);
-        const label = (0, utils_1.smartLabel)(node, innerW - 4);
-        const hasIssue = issueLocations.has(label);
+        const label = absMark + (0, utils_1.smartLabel)(node, innerW - 4 - absMark.length);
+        const hasIssue = issueLocations.has(label.replace(absMark, ''));
         const issueMark = hasIssue ? ' \u26A0' : '';
         const repeat = node.repeat && node.repeat > 1 ? node.repeat : 1;
         const boxLines = [];
@@ -39,33 +53,264 @@ function renderLayout(snapshot, findings) {
         const dimPart = ` ${dimStr} `;
         const topFillLen = Math.max(0, innerW - labelPart.length - dimPart.length);
         boxLines.push(`${utils_1.BOX.tl}${utils_1.BOX.h}${labelPart}${utils_1.BOX.h.repeat(topFillLen)}${utils_1.BOX.tr}${dimPart}${issueMark}`);
-        // Children
-        const children = node.children.filter(c => !(c.metrics.rect.width < 1 && c.metrics.rect.height < 1));
-        if (children.length === 0) {
-            boxLines.push(`${utils_1.BOX.v}${' '.repeat(innerW)}${utils_1.BOX.v}`);
+        // Children — split into normal flow and absolutely positioned (direct children only)
+        const allChildren = node.children.filter(c => !(c.metrics.rect.width < 1 && c.metrics.rect.height < 1));
+        const flowChildren = allChildren.filter(c => c.props.position !== 'absolute');
+        const absChildren = allChildren.filter(c => c.props.position === 'absolute');
+        const hasFloatedChildren = flowChildren.some(c => c.props.float && c.props.float !== 'none');
+        // If this node is a containing block, find all absolute descendants for column extraction
+        const isContainingBlock = node.props.position !== 'static' || node.containingBlockModifiers.length > 0;
+        let extractedDescendants = [];
+        if (isContainingBlock && !flat) {
+            // Collect from ALL children (not just flow) — absolute children in any subtree
+            for (const child of allChildren) {
+                if (child.props.position !== 'absolute') {
+                    collectAbsDescendants(child, extractedDescendants);
+                }
+            }
+            // Filter out full-width absolute elements (headers, footers, toolbars)
+            // These should be rendered inline, not as separate columns
+            extractedDescendants = extractedDescendants.filter(abs => {
+                return abs.metrics.rect.width < m.width * 0.8;
+            });
+            for (const abs of extractedDescendants) {
+                extractedAbs.add(abs);
+            }
         }
-        else if (flat) {
-            for (const child of children) {
-                const childLabel = (0, utils_1.nodeLabel)(child);
-                const childRepeat = child.repeat && child.repeat > 1 ? ` \u00D7${child.repeat}` : '';
-                const childDim = `${Math.round(child.metrics.rect.width)}\u00D7${Math.round(child.metrics.rect.height)}`;
-                const childLine = ` ${childLabel}${childRepeat} ${childDim} `;
-                if (childLine.length <= innerW) {
-                    boxLines.push(`${utils_1.BOX.v}${childLine}${' '.repeat(innerW - childLine.length)}${utils_1.BOX.v}`);
+        // Merge: all absolute elements (direct + extracted) as columns alongside flow children
+        // Mark direct abs children as extracted so they're skipped in nested rendering
+        // Filter out full-width absolute elements (they should be rendered inline)
+        const filteredAbsChildren = absChildren.filter(abs => abs.metrics.rect.width < m.width * 0.8);
+        const filteredExtracted = extractedDescendants.filter(abs => abs.metrics.rect.width < m.width * 0.8);
+        for (const abs of filteredAbsChildren)
+            extractedAbs.add(abs);
+        const allAbsMerged = [...filteredAbsChildren, ...filteredExtracted];
+        if (allAbsMerged.length > 0 && !flat) {
+            // Group ONLY flow children by horizontal overlap — overlapping flow elements stack in the same column
+            const flowGroups = [];
+            const sortedFlow = [...flowChildren].sort((a, b) => a.metrics.rect.x - b.metrics.rect.x);
+            for (const child of sortedFlow) {
+                const cx = child.metrics.rect.x;
+                const cr = cx + child.metrics.rect.width;
+                let placed = false;
+                for (const group of flowGroups) {
+                    const gx = group[0].metrics.rect.x;
+                    const gr = group[0].metrics.rect.x + group[0].metrics.rect.width;
+                    // Check if ranges overlap
+                    if (cx < gr && gx < cr) {
+                        group.push(child);
+                        placed = true;
+                        break;
+                    }
                 }
-                else {
-                    boxLines.push(`${utils_1.BOX.v}${childLine.slice(0, innerW)}${utils_1.BOX.v}`);
+                if (!placed)
+                    flowGroups.push([child]);
+            }
+            const columns = [];
+            for (const group of flowGroups) {
+                const maxW = Math.max(...group.map(c => c.metrics.rect.width));
+                // Find the largest marginLeft in the subtree — this indicates reserved space for abs elements
+                let maxMarginLeft = 0;
+                function findMaxMargin(node) {
+                    // Parse margin shorthand: "top right bottom left"
+                    const margin = node.props?.margin || '';
+                    if (margin) {
+                        const parts = margin.split(/\s+/);
+                        if (parts.length === 4) {
+                            const ml = parseFloat(parts[3]);
+                            if (!isNaN(ml) && ml > maxMarginLeft)
+                                maxMarginLeft = ml;
+                        }
+                        else if (parts.length === 2) {
+                            const ml = parseFloat(parts[1]);
+                            if (!isNaN(ml) && ml > maxMarginLeft)
+                                maxMarginLeft = ml;
+                        }
+                        else if (parts.length === 1) {
+                            const ml = parseFloat(parts[0]);
+                            if (!isNaN(ml) && ml > maxMarginLeft)
+                                maxMarginLeft = ml;
+                        }
+                    }
+                    for (const child of node.children)
+                        findMaxMargin(child);
                 }
+                for (const g of group)
+                    findMaxMargin(g);
+                const effectiveX = group[0].metrics.rect.x + maxMarginLeft;
+                columns.push({ nodes: group, isAbs: false, width: maxW, sortX: effectiveX });
+            }
+            for (const abs of allAbsMerged) {
+                columns.push({ nodes: [abs], isAbs: true, width: abs.metrics.rect.width, sortX: abs.metrics.rect.x });
+            }
+            columns.sort((a, b) => a.sortX - b.sortX);
+            // Assign character widths proportional to pixel widths
+            const totalPx = columns.reduce((sum, c) => sum + c.width, 0);
+            const colWidths = [];
+            let totalUsed = 0;
+            for (let i = 0; i < columns.length; i++) {
+                const ratio = columns[i].width / totalPx;
+                const w = Math.max(Math.round(innerW * ratio), 14);
+                colWidths.push(w);
+                totalUsed += w;
+            }
+            if (colWidths.length > 0 && innerW > totalUsed) {
+                colWidths[colWidths.length - 1] += innerW - totalUsed;
+            }
+            // Render each column
+            const colBoxes = [];
+            let maxLines = 0;
+            for (let i = 0; i < columns.length; i++) {
+                const col = columns[i];
+                const lines = [];
+                for (const node of col.nodes) {
+                    const mark = col.isAbs ? '[abs] ' : '';
+                    const box = renderBox(node, colWidths[i], depth + 1, true, mark);
+                    lines.push(...box);
+                }
+                colBoxes.push(lines);
+                if (lines.length > maxLines)
+                    maxLines = lines.length;
+            }
+            // Merge columns side by side
+            for (let lineIdx = 0; lineIdx < maxLines; lineIdx++) {
+                let merged = '';
+                for (let i = 0; i < colBoxes.length; i++) {
+                    const w = colWidths[i];
+                    if (i > 0)
+                        merged += ' ';
+                    if (lineIdx < colBoxes[i].length) {
+                        const line = colBoxes[i][lineIdx];
+                        if (line.length < w) {
+                            merged += line + ' '.repeat(w - line.length);
+                        }
+                        else {
+                            merged += line.slice(0, w);
+                        }
+                    }
+                    else {
+                        merged += ' '.repeat(w);
+                    }
+                }
+                boxLines.push(`${utils_1.BOX.v}${merged}${utils_1.BOX.v}`);
             }
         }
-        else if ((0, utils_1.isMultiColumn)(node)) {
-            // Calculate expanded count (considering repeat)
-            const expandedCount = children.reduce((sum, c) => sum + (c.repeat && c.repeat > 1 ? c.repeat : 1), 0);
-            if (expandedCount > 1) {
-                const isGrid = node.props.display === 'grid' || node.props.display === 'inline-grid';
-                const childLines = renderFlexChildren(children, innerW, depth + 1, m.width, isGrid);
-                for (const cl of childLines) {
-                    boxLines.push(`${utils_1.BOX.v}${cl}${utils_1.BOX.v}`);
+        else {
+            // Standard rendering — skip extracted absolute descendants
+            const children = allChildren.filter(c => !extractedAbs.has(c));
+            if (children.length === 0) {
+                boxLines.push(`${utils_1.BOX.v}${' '.repeat(innerW)}${utils_1.BOX.v}`);
+            }
+            else if (flat) {
+                for (const child of children) {
+                    const childLabel = (0, utils_1.nodeLabel)(child);
+                    const childRepeat = child.repeat && child.repeat > 1 ? ` \u00D7${child.repeat}` : '';
+                    const childDim = `${Math.round(child.metrics.rect.width)}\u00D7${Math.round(child.metrics.rect.height)}`;
+                    const childLine = ` ${childLabel}${childRepeat} ${childDim} `;
+                    if (childLine.length <= innerW) {
+                        boxLines.push(`${utils_1.BOX.v}${childLine}${' '.repeat(innerW - childLine.length)}${utils_1.BOX.v}`);
+                    }
+                    else {
+                        boxLines.push(`${utils_1.BOX.v}${childLine.slice(0, innerW)}${utils_1.BOX.v}`);
+                    }
+                }
+            }
+            else if ((0, utils_1.isMultiColumn)(node)) {
+                const expandedCount = children.reduce((sum, c) => sum + (c.repeat && c.repeat > 1 ? c.repeat : 1), 0);
+                if (expandedCount > 1) {
+                    const isGrid = node.props.display === 'grid' || node.props.display === 'inline-grid';
+                    const childLines = renderFlexChildren(children, innerW, depth + 1, m.width, isGrid);
+                    for (const cl of childLines) {
+                        boxLines.push(`${utils_1.BOX.v}${cl}${utils_1.BOX.v}`);
+                    }
+                }
+                else {
+                    for (const child of children) {
+                        const childBox = renderBox(child, Math.min(boxCharW(child.metrics.rect.width, depth + 1), innerW - 2), depth + 1);
+                        for (const cl of childBox) {
+                            const line = ` ${cl}`;
+                            if (line.length <= innerW + 1) {
+                                boxLines.push(`${utils_1.BOX.v}${line}${' '.repeat(Math.max(0, innerW - line.length + 1))}${utils_1.BOX.v}`);
+                            }
+                            else {
+                                boxLines.push(`${utils_1.BOX.v}${line.slice(0, innerW)}${utils_1.BOX.v}`);
+                            }
+                        }
+                    }
+                }
+            }
+            else if (hasFloatedChildren) {
+                // Float layout — render floated children as columns
+                const floated = children.filter(c => c.props.float && c.props.float !== 'none');
+                // Group floated children by x position overlap
+                const sortedFloated = [...floated].sort((a, b) => a.metrics.rect.x - b.metrics.rect.x);
+                const floatGroups = [];
+                for (const child of sortedFloated) {
+                    const cx = child.metrics.rect.x;
+                    const cr = cx + child.metrics.rect.width;
+                    let placed = false;
+                    for (const group of floatGroups) {
+                        const gx = group[0].metrics.rect.x;
+                        const gr = group[0].metrics.rect.x + group[0].metrics.rect.width;
+                        if (cx < gr && gx < cr) {
+                            group.push(child);
+                            placed = true;
+                            break;
+                        }
+                    }
+                    if (!placed)
+                        floatGroups.push([child]);
+                }
+                const floatCols = [];
+                for (const group of floatGroups) {
+                    const maxW = Math.max(...group.map(c => c.metrics.rect.width));
+                    floatCols.push({ nodes: group, width: maxW });
+                }
+                floatCols.sort((a, b) => a.nodes[0].metrics.rect.x - b.nodes[0].metrics.rect.x);
+                const totalPx = floatCols.reduce((sum, c) => sum + c.width, 0);
+                const colWidths = [];
+                let totalUsed = 0;
+                for (let i = 0; i < floatCols.length; i++) {
+                    const ratio = floatCols[i].width / totalPx;
+                    const w = Math.max(Math.round(innerW * ratio), 14);
+                    colWidths.push(w);
+                    totalUsed += w;
+                }
+                if (colWidths.length > 0 && innerW > totalUsed) {
+                    colWidths[colWidths.length - 1] += innerW - totalUsed;
+                }
+                const colBoxes = [];
+                let maxLines = 0;
+                for (let i = 0; i < floatCols.length; i++) {
+                    const lines = [];
+                    for (const n of floatCols[i].nodes) {
+                        const box = renderBox(n, colWidths[i], depth + 1, true);
+                        lines.push(...box);
+                    }
+                    colBoxes.push(lines);
+                    if (lines.length > maxLines)
+                        maxLines = lines.length;
+                }
+                for (let lineIdx = 0; lineIdx < maxLines; lineIdx++) {
+                    let merged = '';
+                    for (let i = 0; i < colBoxes.length; i++) {
+                        const w = colWidths[i];
+                        if (i > 0)
+                            merged += ' ';
+                        if (lineIdx < colBoxes[i].length) {
+                            const line = colBoxes[i][lineIdx];
+                            if (line.length < w) {
+                                merged += line + ' '.repeat(w - line.length);
+                            }
+                            else {
+                                merged += line.slice(0, w);
+                            }
+                        }
+                        else {
+                            merged += ' '.repeat(w);
+                        }
+                    }
+                    boxLines.push(`${utils_1.BOX.v}${merged}${utils_1.BOX.v}`);
                 }
             }
             else {
@@ -83,20 +328,6 @@ function renderLayout(snapshot, findings) {
                 }
             }
         }
-        else {
-            for (const child of children) {
-                const childBox = renderBox(child, Math.min(boxCharW(child.metrics.rect.width, depth + 1), innerW - 2), depth + 1);
-                for (const cl of childBox) {
-                    const line = ` ${cl}`;
-                    if (line.length <= innerW + 1) {
-                        boxLines.push(`${utils_1.BOX.v}${line}${' '.repeat(Math.max(0, innerW - line.length + 1))}${utils_1.BOX.v}`);
-                    }
-                    else {
-                        boxLines.push(`${utils_1.BOX.v}${line.slice(0, innerW)}${utils_1.BOX.v}`);
-                    }
-                }
-            }
-        }
         boxLines.push(`${utils_1.BOX.bl}${utils_1.BOX.h.repeat(innerW)}${utils_1.BOX.br}`);
         return boxLines;
     }

package/dist/engine/types.d.ts

@@ -49,6 +49,7 @@ export interface NodeProps {
     zIndex?: string;
     margin?: string;
     padding?: string;
+    float?: string;
     transform?: string;
     filter?: string;
     perspective?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cssprobe-cli",
-  "version": "0.2.14",
+  "version": "0.2.15",
   "description": "Runtime CSS probe — inspect layout, colors, backgrounds, fonts and more in a live browser. AI agents and shell automation.",
   "keywords": [
     "css",