@rahmantech/litedesign 0.0.0-stage → 0.2.0

package/dist/extension/core.iife.js

@@ -0,0 +1,1230 @@
+"use strict";
+var __litedesign = (() => {
+  var __defProp = Object.defineProperty;
+  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+  var __getOwnPropNames = Object.getOwnPropertyNames;
+  var __hasOwnProp = Object.prototype.hasOwnProperty;
+  var __export = (target, all) => {
+    for (var name in all)
+      __defProp(target, name, { get: all[name], enumerable: true });
+  };
+  var __copyProps = (to, from, except, desc) => {
+    if (from && typeof from === "object" || typeof from === "function") {
+      for (let key of __getOwnPropNames(from))
+        if (!__hasOwnProp.call(to, key) && key !== except)
+          __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+    }
+    return to;
+  };
+  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+  // packages/core/src/index.ts
+  var index_exports = {};
+  __export(index_exports, {
+    EDGES: () => EDGES,
+    GRID_STEP: () => GRID_STEP,
+    LAYERS: () => LAYERS,
+    MAX_MARKERS: () => MAX_MARKERS,
+    MAX_NODES: () => MAX_NODES,
+    OVERLAY_HOST_ID: () => OVERLAY_HOST_ID,
+    RULE_IDS: () => RULE_IDS,
+    SPACING_SCALE: () => SPACING_SCALE,
+    VERSION: () => VERSION,
+    axisGap: () => axisGap,
+    blend: () => blend,
+    bottom: () => bottom,
+    buildGraph: () => buildGraph,
+    centerX: () => centerX,
+    centerY: () => centerY,
+    contrastRatio: () => contrastRatio,
+    defaultRules: () => defaultRules,
+    findGaps: () => findGaps,
+    findGuides: () => findGuides,
+    findIssues: () => findIssues,
+    findSiblingGaps: () => findSiblingGaps,
+    findVisualGaps: () => findVisualGaps,
+    isClose: () => isClose,
+    luminance: () => luminance,
+    overlaps: () => overlaps,
+    overlapsOn: () => overlapsOn,
+    parseColor: () => parseColor,
+    pathOf: () => pathOf,
+    projectionOverlap: () => projectionOverlap,
+    render: () => render,
+    resolveNode: () => resolveNode,
+    right: () => right,
+    round: () => round
+  });
+
+  // packages/core/src/geometry.ts
+  function right(rect) {
+    return rect.x + rect.w;
+  }
+  function bottom(rect) {
+    return rect.y + rect.h;
+  }
+  function centerX(rect) {
+    return rect.x + rect.w / 2;
+  }
+  function centerY(rect) {
+    return rect.y + rect.h / 2;
+  }
+  function overlaps(a, b) {
+    return a.x < right(b) && b.x < right(a) && a.y < bottom(b) && b.y < bottom(a);
+  }
+  function projectionOverlap(a, b, axis) {
+    return axis === "x" ? Math.max(0, Math.min(right(a), right(b)) - Math.max(a.x, b.x)) : Math.max(0, Math.min(bottom(a), bottom(b)) - Math.max(a.y, b.y));
+  }
+  function axisGap(a, b, axis) {
+    return axis === "x" ? b.x - right(a) : b.y - bottom(a);
+  }
+  function overlapsOn(a, b, axis, ratio = 0.5) {
+    const shared = projectionOverlap(a, b, axis);
+    const smallest = axis === "x" ? Math.min(a.w, b.w) : Math.min(a.h, b.h);
+    return smallest > 0 && shared / smallest >= ratio;
+  }
+  function isClose(a, b, tolerance) {
+    return Math.abs(a - b) <= tolerance;
+  }
+  function round(value, precision = 2) {
+    const factor = 10 ** precision;
+    return Math.round(value * factor) / factor;
+  }
+
+  // packages/core/src/align.ts
+  var TOLERANCE = 2;
+  var EDGES = [
+    { axis: "x", edge: "left", value: (rect) => rect.x },
+    { axis: "x", edge: "right", value: right },
+    { axis: "x", edge: "center", value: centerX },
+    { axis: "y", edge: "top", value: (rect) => rect.y },
+    { axis: "y", edge: "bottom", value: bottom },
+    { axis: "y", edge: "center", value: centerY }
+  ];
+  function findGuides(nodes, tolerance = TOLERANCE) {
+    const byId = new Map(nodes.map((node) => [node.id, node]));
+    const guides = [];
+    for (const spec of EDGES) {
+      const items = nodes.map((node) => ({ node, value: spec.value(node.rect) })).sort((a, b) => a.value - b.value);
+      let start = 0;
+      for (let i = 1; i <= items.length; i++) {
+        const previous = items[i - 1];
+        const current = items[i];
+        const breaks = current === void 0 || previous === void 0 || current.value - previous.value > tolerance;
+        if (!breaks) continue;
+        const cluster = items.slice(start, i);
+        start = i;
+        if (cluster.length < 2) continue;
+        const members = cluster.map((item) => item.node);
+        if (isAncestorChain(members, byId)) continue;
+        const total = cluster.reduce((sum, item) => sum + item.value, 0);
+        guides.push({
+          axis: spec.axis,
+          edge: spec.edge,
+          value: round(total / cluster.length),
+          members: members.map((node) => node.id)
+        });
+      }
+    }
+    return guides;
+  }
+  function isAncestorChain(members, byId) {
+    if (members.length < 2) return false;
+    const ids = new Set(members.map((node) => node.id));
+    let deepest = members[0];
+    for (const node of members) {
+      if (deepest === void 0 || node.depth > deepest.depth) deepest = node;
+    }
+    if (deepest === void 0) return false;
+    let hits = 0;
+    let current = deepest.parent === null ? void 0 : byId.get(deepest.parent);
+    while (current !== void 0) {
+      if (ids.has(current.id)) hits++;
+      current = current.parent === null ? void 0 : byId.get(current.parent);
+    }
+    return hits === members.length - 1;
+  }
+
+  // packages/core/src/color.ts
+  function parseColor(value) {
+    const text = value.trim().toLowerCase();
+    if (text === "" || text === "transparent") return null;
+    if (text.startsWith("#")) return parseHex(text);
+    const match = text.match(/^rgba?\(([^)]+)\)$/);
+    if (match === null) return null;
+    const body = match[1];
+    if (body === void 0) return null;
+    const parts = body.split(/[,/\s]+/).filter((part) => part !== "");
+    if (parts.length < 3) return null;
+    const [r, g, b, a] = parts;
+    return {
+      r: Number(r),
+      g: Number(g),
+      b: Number(b),
+      a: a === void 0 ? 1 : parseAlpha(a)
+    };
+  }
+  function parseAlpha(value) {
+    if (value.endsWith("%")) return Number(value.slice(0, -1)) / 100;
+    return Number(value);
+  }
+  function parseHex(text) {
+    const hex = text.slice(1);
+    if (hex.length === 3 || hex.length === 4) {
+      const [r, g, b, a] = hex.split("");
+      if (r === void 0 || g === void 0 || b === void 0) return null;
+      return {
+        r: Number.parseInt(r + r, 16),
+        g: Number.parseInt(g + g, 16),
+        b: Number.parseInt(b + b, 16),
+        a: a === void 0 ? 1 : Number.parseInt(a + a, 16) / 255
+      };
+    }
+    if (hex.length === 6 || hex.length === 8) {
+      return {
+        r: Number.parseInt(hex.slice(0, 2), 16),
+        g: Number.parseInt(hex.slice(2, 4), 16),
+        b: Number.parseInt(hex.slice(4, 6), 16),
+        a: hex.length === 8 ? Number.parseInt(hex.slice(6, 8), 16) / 255 : 1
+      };
+    }
+    return null;
+  }
+  function blend(source, destination) {
+    const a = source.a + destination.a * (1 - source.a);
+    if (a === 0) return { r: 0, g: 0, b: 0, a: 0 };
+    const mix = (src, dst) => (src * source.a + dst * destination.a * (1 - source.a)) / a;
+    return {
+      r: mix(source.r, destination.r),
+      g: mix(source.g, destination.g),
+      b: mix(source.b, destination.b),
+      a
+    };
+  }
+  function luminance(color) {
+    const channel = (value) => {
+      const s = value / 255;
+      return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+    };
+    return 0.2126 * channel(color.r) + 0.7152 * channel(color.g) + 0.0722 * channel(color.b);
+  }
+  function contrastRatio(a, b) {
+    const first = luminance(a);
+    const second = luminance(b);
+    const lighter = Math.max(first, second);
+    const darker = Math.min(first, second);
+    return (lighter + 0.05) / (darker + 0.05);
+  }
+
+  // packages/core/src/constants.ts
+  var MAX_NODES = 5e3;
+  var GRID_STEP = 8;
+  var SPACING_SCALE = 4;
+  var OVERLAY_HOST_ID = "__litedesign_overlay__";
+  var MAX_MARKERS = 250;
+
+  // packages/core/src/gaps.ts
+  function findSiblingGaps(nodes) {
+    const byParent = /* @__PURE__ */ new Map();
+    for (const node of nodes) {
+      const siblings = byParent.get(node.parent);
+      if (siblings) siblings.push(node);
+      else byParent.set(node.parent, [node]);
+    }
+    const gaps = [];
+    for (const siblings of byParent.values()) {
+      gaps.push(...axisGaps(siblings, "x"), ...axisGaps(siblings, "y"));
+    }
+    return gaps;
+  }
+  function axisGaps(siblings, axis) {
+    const sorted = [...siblings].sort(
+      (a, b) => axis === "x" ? a.rect.x - b.rect.x : a.rect.y - b.rect.y
+    );
+    const gaps = [];
+    for (let i = 0; i < sorted.length - 1; i++) {
+      const a = sorted[i];
+      const b = sorted[i + 1];
+      if (a === void 0 || b === void 0) continue;
+      const distance = axisGap(a.rect, b.rect, axis);
+      if (distance < 0.5) continue;
+      const cross = axis === "x" ? "y" : "x";
+      if (!overlapsOn(a.rect, b.rect, cross)) continue;
+      gaps.push({ a: a.id, b: b.id, axis, distance: round(distance), kind: "sibling" });
+    }
+    return gaps;
+  }
+  function findVisualGaps(nodes) {
+    const seen = /* @__PURE__ */ new Set();
+    const gaps = [];
+    const push = (a, b, axis, distance) => {
+      const key = pairKey(a.id, b.id, axis);
+      if (seen.has(key)) return;
+      seen.add(key);
+      gaps.push({ a: a.id, b: b.id, axis, distance: round(distance), kind: "visual" });
+    };
+    const byX = [...nodes].sort((a, b) => a.rect.x - b.rect.x);
+    const byRight = [...nodes].sort((a, b) => right(a.rect) - right(b.rect));
+    const byY = [...nodes].sort((a, b) => a.rect.y - b.rect.y);
+    const byBottom = [...nodes].sort((a, b) => bottom(a.rect) - bottom(b.rect));
+    for (const a of nodes) {
+      for (let j = firstAtLeast(byX, right(a.rect) - 0.5, (n) => n.rect.x); j < byX.length; j++) {
+        const b = byX[j];
+        if (b === void 0) continue;
+        if (!overlapsOn(a.rect, b.rect, "y")) continue;
+        push(a, b, "x", b.rect.x - right(a.rect));
+        break;
+      }
+      for (let j = lastAtMost(byRight, a.rect.x + 0.5, (n) => right(n.rect)); j >= 0; j--) {
+        const b = byRight[j];
+        if (b === void 0) continue;
+        if (!overlapsOn(a.rect, b.rect, "y")) continue;
+        push(b, a, "x", a.rect.x - right(b.rect));
+        break;
+      }
+      for (let j = firstAtLeast(byY, bottom(a.rect) - 0.5, (n) => n.rect.y); j < byY.length; j++) {
+        const b = byY[j];
+        if (b === void 0) continue;
+        if (!overlapsOn(a.rect, b.rect, "x")) continue;
+        push(a, b, "y", b.rect.y - bottom(a.rect));
+        break;
+      }
+      for (let j = lastAtMost(byBottom, a.rect.y + 0.5, (n) => bottom(n.rect)); j >= 0; j--) {
+        const b = byBottom[j];
+        if (b === void 0) continue;
+        if (!overlapsOn(a.rect, b.rect, "x")) continue;
+        push(b, a, "y", a.rect.y - bottom(b.rect));
+        break;
+      }
+    }
+    return gaps;
+  }
+  function findGaps(nodes) {
+    const siblings = findSiblingGaps(nodes);
+    const claimed = new Set(siblings.map((gap) => pairKey(gap.a, gap.b, gap.axis)));
+    const visual = findVisualGaps(nodes).filter(
+      (gap) => !claimed.has(pairKey(gap.a, gap.b, gap.axis))
+    );
+    return [...siblings, ...visual];
+  }
+  function pairKey(a, b, axis) {
+    return a < b ? `${a}|${b}|${axis}` : `${b}|${a}|${axis}`;
+  }
+  function firstAtLeast(list, target, value) {
+    let low = 0;
+    let high = list.length;
+    while (low < high) {
+      const middle = low + high >> 1;
+      const item = list[middle];
+      if (item !== void 0 && value(item) < target) low = middle + 1;
+      else high = middle;
+    }
+    return low;
+  }
+  function lastAtMost(list, target, value) {
+    let low = 0;
+    let high = list.length;
+    while (low < high) {
+      const middle = low + high >> 1;
+      const item = list[middle];
+      if (item !== void 0 && value(item) <= target) low = middle + 1;
+      else high = middle;
+    }
+    return low - 1;
+  }
+
+  // packages/core/src/extract.ts
+  var MAX_TEXT = 80;
+  function extractNode(el, id, parentId, depth) {
+    const rect = el.getBoundingClientRect();
+    return {
+      id,
+      selector: id,
+      tag: el.tagName.toLowerCase(),
+      rect: {
+        x: rect.left + window.scrollX,
+        y: rect.top + window.scrollY,
+        w: rect.width,
+        h: rect.height
+      },
+      box: readBox(el),
+      text: readText(el),
+      depth,
+      parent: parentId,
+      children: [],
+      styles: readStyles(el)
+    };
+  }
+  function readBox(el) {
+    return {
+      scrollW: el.scrollWidth,
+      scrollH: el.scrollHeight,
+      clientW: el.clientWidth,
+      clientH: el.clientHeight
+    };
+  }
+  function readText(el) {
+    let text = "";
+    for (const node of Array.from(el.childNodes)) {
+      if (node.nodeType === 3) text += node.textContent ?? "";
+    }
+    return text.replace(/\s+/g, " ").trim().slice(0, MAX_TEXT);
+  }
+  function readStyles(el) {
+    const style = getComputedStyle(el);
+    return {
+      display: style.display,
+      borderRadius: style.borderRadius,
+      color: style.color,
+      backgroundColor: style.backgroundColor,
+      fontSize: style.fontSize,
+      fontWeight: style.fontWeight,
+      padding: style.padding,
+      margin: style.margin,
+      gap: style.gap
+    };
+  }
+
+  // packages/core/src/rules/rule.ts
+  function defineRule(id, run) {
+    return Object.assign(run, { id });
+  }
+  function issue(input) {
+    const suffix = input.key === void 0 ? "" : `:${input.key}`;
+    return {
+      id: `${input.rule}:${input.selector}${suffix}`,
+      selector: input.selector,
+      rule: input.rule,
+      severity: input.severity,
+      kind: input.kind,
+      actual: input.actual,
+      expected: input.expected,
+      autoFix: input.autoFix
+    };
+  }
+
+  // packages/core/src/rules/alignment.ts
+  var TOLERANCE2 = 2;
+  var WINDOW = 4;
+  var alignmentNearMiss = defineRule("alignment-near-miss", (graph) => {
+    const issues = [];
+    for (const spec of EDGES) {
+      const items = graph.nodes.filter((node) => node.parent !== null).map((node) => ({ node, value: spec.value(node.rect) })).sort((a, b) => a.value - b.value);
+      let start = 0;
+      for (let i = 1; i <= items.length; i++) {
+        const previous = items[i - 1];
+        const current = items[i];
+        const breaks = current === void 0 || previous === void 0 || current.value - previous.value > WINDOW;
+        if (!breaks) continue;
+        const cluster = items.slice(start, i);
+        start = i;
+        if (cluster.length < 2) continue;
+        const first = cluster[0];
+        const last = cluster[cluster.length - 1];
+        if (first === void 0 || last === void 0) continue;
+        if (last.value - first.value <= TOLERANCE2) continue;
+        const target = cluster[Math.floor(cluster.length / 2)];
+        if (target === void 0) continue;
+        let worst = cluster[0];
+        if (worst === void 0) continue;
+        for (const item of cluster) {
+          if (Math.abs(item.value - target.value) > Math.abs(worst.value - target.value)) worst = item;
+        }
+        issues.push(
+          issue({
+            rule: "alignment-near-miss",
+            selector: worst.node.id,
+            key: spec.edge,
+            severity: "P2",
+            kind: "candidate",
+            actual: `${Math.round(worst.value * 10) / 10}px`,
+            expected: `${Math.round(target.value * 10) / 10}px`,
+            autoFix: false
+          })
+        );
+      }
+    }
+    return issues;
+  });
+
+  // packages/core/src/rules/contrast.ts
+  var WHITE = { r: 255, g: 255, b: 255, a: 1 };
+  var NORMAL_MINIMUM = 4.5;
+  var LARGE_MINIMUM = 3;
+  var contrastMinimum = defineRule("contrast", (graph) => {
+    const byId = new Map(graph.nodes.map((node) => [node.id, node]));
+    const issues = [];
+    for (const node of graph.nodes) {
+      if (node.text === "") continue;
+      const foreground = parseColor(node.styles.color);
+      if (foreground === null) continue;
+      const background = backgroundOf(node, byId);
+      const ratio = contrastRatio(blend(foreground, background), background);
+      const minimum = isLargeText(node) ? LARGE_MINIMUM : NORMAL_MINIMUM;
+      if (ratio >= minimum) continue;
+      issues.push(
+        issue({
+          rule: "contrast",
+          selector: node.id,
+          severity: "P1",
+          kind: "violation",
+          actual: `${Math.round(ratio * 100) / 100}:1`,
+          expected: `>= ${minimum}:1`,
+          autoFix: false
+        })
+      );
+    }
+    return issues;
+  });
+  function isLargeText(node) {
+    const size = Number.parseFloat(node.styles.fontSize);
+    const weight = Number.parseInt(node.styles.fontWeight, 10);
+    if (!Number.isFinite(size)) return false;
+    return size >= 24 || size >= 18.66 && weight >= 700;
+  }
+  function backgroundOf(node, byId) {
+    const layers = [];
+    let current = node;
+    while (current !== void 0) {
+      const color = parseColor(current.styles.backgroundColor);
+      if (color !== null && color.a > 0) {
+        layers.push(color);
+        if (color.a === 1) break;
+      }
+      current = current.parent === null ? void 0 : byId.get(current.parent);
+    }
+    let background = WHITE;
+    for (let i = layers.length - 1; i >= 0; i--) {
+      const layer = layers[i];
+      if (layer === void 0) continue;
+      background = blend(layer, background);
+    }
+    return background;
+  }
+
+  // packages/core/src/rules/overflow.ts
+  var SLACK = 1;
+  var overflowClipped = defineRule("overflow", (graph) => {
+    const issues = [];
+    for (const node of graph.nodes) {
+      if (node.styles.display.startsWith("inline")) continue;
+      if (node.box.clientW === 0 && node.box.clientH === 0) continue;
+      if (node.box.scrollW > node.box.clientW + SLACK) {
+        issues.push(
+          issue({
+            rule: "overflow",
+            selector: node.id,
+            key: "x",
+            severity: "P2",
+            kind: "violation",
+            actual: `${node.box.scrollW}px content in ${node.box.clientW}px`,
+            expected: "content fits horizontally",
+            autoFix: false
+          })
+        );
+      }
+      if (node.box.scrollH > node.box.clientH + SLACK) {
+        issues.push(
+          issue({
+            rule: "overflow",
+            selector: node.id,
+            key: "y",
+            severity: "P2",
+            kind: "violation",
+            actual: `${node.box.scrollH}px content in ${node.box.clientH}px`,
+            expected: "content fits vertically",
+            autoFix: false
+          })
+        );
+      }
+    }
+    return issues;
+  });
+
+  // packages/core/src/rules/radius.ts
+  var MIN_SAMPLES = 4;
+  var radiusConsistency = defineRule("radius-consistency", (graph) => {
+    const groups = /* @__PURE__ */ new Map();
+    for (const node of graph.nodes) {
+      const radius = normalizeRadius(node.styles.borderRadius);
+      if (radius === null) continue;
+      const group = groups.get(radius);
+      if (group) group.push(node);
+      else groups.set(radius, [node]);
+    }
+    if (groups.size < 2) return [];
+    const total = [...groups.values()].reduce((sum, group) => sum + group.length, 0);
+    if (total < MIN_SAMPLES) return [];
+    const ranked = [...groups.entries()].sort((a, b) => b[1].length - a[1].length);
+    const expected = ranked[0];
+    if (expected === void 0) return [];
+    const [expectedValue, expectedNodes] = expected;
+    const issues = [];
+    for (const [value, nodes] of ranked.slice(1)) {
+      if (nodes.length >= expectedNodes.length) continue;
+      for (const node of nodes) {
+        if (isPill(node)) continue;
+        issues.push(
+          issue({
+            rule: "radius-consistency",
+            selector: node.id,
+            severity: "P3",
+            kind: "candidate",
+            actual: value,
+            expected: expectedValue,
+            autoFix: true
+          })
+        );
+      }
+    }
+    return issues;
+  });
+  function normalizeRadius(value) {
+    const text = value.trim();
+    if (text === "" || text === "0px" || text === "0") return null;
+    const parts = text.split(/\s+/);
+    const unique = [...new Set(parts)];
+    if (unique.length === 1) return unique[0] ?? null;
+    return parts.join(" ");
+  }
+  function isPill(node) {
+    const text = node.styles.borderRadius;
+    if (text.includes("%")) return true;
+    const radius = Number.parseFloat(text);
+    if (!Number.isFinite(radius)) return false;
+    return radius >= Math.min(node.rect.w, node.rect.h) / 2;
+  }
+
+  // packages/core/src/rules/spacing.ts
+  var spacingScale = defineRule("spacing-scale", (graph) => {
+    const issues = [];
+    for (const gap of graph.gaps) {
+      if (gap.kind !== "sibling") continue;
+      const actual = Math.round(gap.distance);
+      if (actual <= 0 || actual % SPACING_SCALE === 0) continue;
+      issues.push(
+        issue({
+          rule: "spacing-scale",
+          selector: gap.a,
+          key: `${gap.axis}:${gap.b}`,
+          severity: "P2",
+          kind: "candidate",
+          actual: `${actual}px`,
+          expected: `${Math.round(actual / SPACING_SCALE) * SPACING_SCALE}px`,
+          autoFix: true
+        })
+      );
+    }
+    return issues;
+  });
+
+  // packages/core/src/rules/index.ts
+  var defaultRules = [
+    spacingScale,
+    alignmentNearMiss,
+    radiusConsistency,
+    overflowClipped,
+    contrastMinimum
+  ];
+  var RULE_IDS = defaultRules.map((rule) => rule.id);
+  function findIssues(graph, rules = defaultRules) {
+    return rules.flatMap((rule) => rule(graph));
+  }
+
+  // packages/core/src/walk.ts
+  var SKIP_TAGS = /* @__PURE__ */ new Set([
+    "script",
+    "style",
+    "link",
+    "meta",
+    "noscript",
+    "template",
+    "head",
+    "title",
+    "base"
+  ]);
+  var SHADOW_MARKER = ":host";
+  function pathOf(el) {
+    const parts = [];
+    let cur = el;
+    while (cur !== null) {
+      const parent = cur.parentElement;
+      if (parent !== null) {
+        const index = Array.prototype.indexOf.call(parent.children, cur) + 1;
+        parts.unshift(`${cur.tagName.toLowerCase()}:nth-child(${index})`);
+        cur = parent;
+        continue;
+      }
+      const host = shadowHostOf(cur);
+      if (host === null) break;
+      parts.unshift(SHADOW_MARKER);
+      cur = host;
+    }
+    return parts.length > 0 ? parts.join(" > ") : el.tagName.toLowerCase();
+  }
+  function shadowHostOf(el) {
+    const root = el.getRootNode();
+    return root.host ?? null;
+  }
+  function collectElements(root, maxNodes = MAX_NODES) {
+    const entries = [];
+    const rootPath = pathOf(root);
+    const visit = (el, parent, depth, index, boundary, parentPath) => {
+      if (entries.length >= maxNodes) return;
+      if (el.id === OVERLAY_HOST_ID) return;
+      const tag2 = el.tagName.toLowerCase();
+      if (SKIP_TAGS.has(tag2)) return;
+      if (!isVisible(el)) return;
+      const marker = boundary ? ` ${SHADOW_MARKER} > ` : " > ";
+      const id = parentPath === null ? rootPath : `${parentPath}${marker}${tag2}:nth-child(${index})`;
+      let self = parent;
+      const rect = el.getBoundingClientRect();
+      if (rect.width > 0 || rect.height > 0) {
+        entries.push({ el, id, depth, parent });
+        self = entries.length - 1;
+      }
+      const children = Array.from(el.children);
+      for (let i = 0; i < children.length; i++) {
+        const child = children[i];
+        if (child !== void 0) visit(child, self, depth + 1, i + 1, false, id);
+      }
+      const shadow = el.shadowRoot;
+      if (shadow !== null) {
+        const shadowChildren = Array.from(shadow.children);
+        for (let i = 0; i < shadowChildren.length; i++) {
+          const child = shadowChildren[i];
+          if (child !== void 0) visit(child, self, depth + 1, i + 1, true, id);
+        }
+      }
+    };
+    visit(root, -1, 0, 0, false, null);
+    return entries;
+  }
+  function isVisible(el) {
+    if (typeof el.checkVisibility === "function") return el.checkVisibility();
+    return getComputedStyle(el).display !== "none";
+  }
+
+  // packages/core/src/graph.ts
+  function buildGraph(root = null) {
+    const start = root ?? (typeof document === "undefined" ? null : document.body);
+    if (start === null) return emptyGraph();
+    const entries = collectElements(start);
+    const nodes = [];
+    const byId = /* @__PURE__ */ new Map();
+    const ids = [];
+    for (const entry of entries) {
+      const parentId = entry.parent >= 0 ? ids[entry.parent] ?? null : null;
+      const node = extractNode(entry.el, entry.id, parentId, entry.depth);
+      ids.push(node.id);
+      nodes.push(node);
+      byId.set(node.id, node);
+      if (parentId !== null) byId.get(parentId)?.children.push(node.id);
+    }
+    const graph = {
+      url: typeof location === "undefined" ? "" : location.href,
+      viewport: {
+        w: typeof innerWidth === "undefined" ? 0 : innerWidth,
+        h: typeof innerHeight === "undefined" ? 0 : innerHeight
+      },
+      nodes,
+      gaps: findGaps(nodes),
+      guides: findGuides(nodes),
+      issues: [],
+      truncated: entries.length >= MAX_NODES
+    };
+    graph.issues = findIssues(graph);
+    return graph;
+  }
+  function resolveNode(graph, selector) {
+    const direct = graph.nodes.find((node) => node.id === selector);
+    if (direct !== void 0) return direct;
+    if (typeof document === "undefined") return null;
+    let element = null;
+    try {
+      element = document.querySelector(selector);
+    } catch {
+      return null;
+    }
+    if (element === null) return null;
+    const id = pathOf(element);
+    return graph.nodes.find((node) => node.id === id) ?? null;
+  }
+  function emptyGraph() {
+    return {
+      url: "",
+      viewport: { w: 0, h: 0 },
+      nodes: [],
+      gaps: [],
+      guides: [],
+      issues: [],
+      truncated: false
+    };
+  }
+
+  // packages/core/src/render/layers.ts
+  var LAYERS = ["grid", "guide", "gap", "issue", "dim", "focus", "hover"];
+  var GUIDE_COLOR = {
+    left: "rgba(236, 72, 153, 0.55)",
+    right: "rgba(236, 72, 153, 0.55)",
+    center: "rgba(168, 85, 247, 0.55)",
+    top: "rgba(236, 72, 153, 0.55)",
+    bottom: "rgba(236, 72, 153, 0.55)"
+  };
+  var GAP_COLOR = "rgba(14, 165, 233, 0.9)";
+  var GUIDE_PADDING = 8;
+  var LABEL_LIMIT = 100;
+  var SEVERITY_COLOR = {
+    P0: "#dc2626",
+    P1: "#f97316",
+    P2: "#eab308",
+    P3: "#3b82f6"
+  };
+  var BASE = "position:absolute;pointer-events:none";
+  function createLayers(shadow) {
+    const layers = {};
+    for (const name of LAYERS) {
+      const layer = document.createElement("div");
+      layer.dataset.layer = name;
+      layer.style.cssText = `${BASE};inset:0`;
+      shadow.append(layer);
+      layers[name] = layer;
+    }
+    return layers;
+  }
+  function gridBackground(step, axis) {
+    const line = "rgba(59, 130, 246, 0.16)";
+    const vertical = `repeating-linear-gradient(to right, ${line} 0 1px, transparent 1px ${step}px)`;
+    const horizontal = `repeating-linear-gradient(to bottom, ${line} 0 1px, transparent 1px ${step}px)`;
+    if (axis === "vertical") return vertical;
+    if (axis === "horizontal") return horizontal;
+    return `${vertical}, ${horizontal}`;
+  }
+  function drawGrid(layer, grid) {
+    layer.replaceChildren();
+    layer.style.backgroundImage = gridBackground(grid.step, grid.axis);
+  }
+  function focusedGuides(graph, focus) {
+    if (focus === null) return graph.guides;
+    return graph.guides.filter((guide) => guide.members.includes(focus.id));
+  }
+  function drawGuides(layer, graph, focus = null) {
+    layer.replaceChildren();
+    const byId = new Map(graph.nodes.map((node) => [node.id, node]));
+    const scrollX = window.scrollX;
+    const scrollY = window.scrollY;
+    for (const guide of focusedGuides(graph, focus).slice(0, MAX_MARKERS)) {
+      const span = spanOf(guide, byId);
+      if (span === null) continue;
+      const color = GUIDE_COLOR[guide.edge];
+      const [start, end] = span;
+      if (guide.axis === "x") {
+        box(
+          layer,
+          `left:${guide.value - scrollX}px;top:${start - scrollY}px;width:1px;height:${end - start}px;background:${color}`
+        );
+      } else {
+        box(
+          layer,
+          `top:${guide.value - scrollY}px;left:${start - scrollX}px;height:1px;width:${end - start}px;background:${color}`
+        );
+      }
+    }
+  }
+  function spanOf(guide, byId) {
+    let start = Number.POSITIVE_INFINITY;
+    let end = Number.NEGATIVE_INFINITY;
+    for (const id of guide.members) {
+      const node = byId.get(id);
+      if (node === void 0) continue;
+      const from = guide.axis === "x" ? node.rect.y : node.rect.x;
+      const to = guide.axis === "x" ? bottom(node.rect) : right(node.rect);
+      start = Math.min(start, from);
+      end = Math.max(end, to);
+    }
+    if (!Number.isFinite(start) || !Number.isFinite(end)) return null;
+    return [start - GUIDE_PADDING, end + GUIDE_PADDING];
+  }
+  function drawGaps(layer, graph) {
+    layer.replaceChildren();
+    const byId = new Map(graph.nodes.map((node) => [node.id, node]));
+    const scrollX = window.scrollX;
+    const scrollY = window.scrollY;
+    const showLabels = graph.gaps.length <= LABEL_LIMIT;
+    for (const gap of graph.gaps.slice(0, MAX_MARKERS)) {
+      const a = byId.get(gap.a);
+      const b = byId.get(gap.b);
+      if (a === void 0 || b === void 0) continue;
+      if (gap.axis === "x") {
+        const start2 = right(a.rect);
+        const middle2 = (Math.max(a.rect.y, b.rect.y) + Math.min(bottom(a.rect), bottom(b.rect))) / 2;
+        box(
+          layer,
+          `left:${start2 - scrollX}px;top:${middle2 - scrollY}px;width:${gap.distance}px;height:1px;background:${GAP_COLOR}`
+        );
+        if (showLabels) {
+          label(
+            layer,
+            `${round(gap.distance, 1)}`,
+            start2 + gap.distance / 2 - scrollX,
+            middle2 - scrollY
+          );
+        }
+        continue;
+      }
+      const start = bottom(a.rect);
+      const middle = (Math.max(a.rect.x, b.rect.x) + Math.min(right(a.rect), right(b.rect))) / 2;
+      box(
+        layer,
+        `left:${middle - scrollX}px;top:${start - scrollY}px;width:1px;height:${gap.distance}px;background:${GAP_COLOR}`
+      );
+      if (showLabels) {
+        label(
+          layer,
+          `${round(gap.distance, 1)}`,
+          middle - scrollX,
+          start + gap.distance / 2 - scrollY
+        );
+      }
+    }
+  }
+  function drawIssues(layer, graph) {
+    layer.replaceChildren();
+    const byId = new Map(graph.nodes.map((node) => [node.id, node]));
+    const scrollX = window.scrollX;
+    const scrollY = window.scrollY;
+    const showLabels = graph.issues.length <= LABEL_LIMIT;
+    for (const item of graph.issues.slice(0, MAX_MARKERS)) {
+      const node = byId.get(item.selector);
+      if (node === void 0) continue;
+      const color = SEVERITY_COLOR[item.severity];
+      const left = node.rect.x - scrollX;
+      const top = node.rect.y - scrollY;
+      box(
+        layer,
+        `left:${left}px;top:${top}px;width:${node.rect.w}px;height:${node.rect.h}px;border:1px solid ${color};border-radius:2px`
+      );
+      if (!showLabels || !onScreen(left, top, node.rect.w, node.rect.h)) continue;
+      tag(layer, `${item.severity} \xB7 ${item.actual} \u2192 ${item.expected}`, left + 2, top + 2, color);
+    }
+  }
+  function onScreen(x, y, w, h) {
+    return x + w > 0 && y + h > 0 && x < window.innerWidth && y < window.innerHeight;
+  }
+  function tag(layer, text, x, y, color) {
+    const element = box(
+      layer,
+      `left:${x}px;top:${y}px;padding:1px 4px;border-radius:3px;background:${color};color:#fff;font:10px/1.3 ui-monospace,monospace;white-space:nowrap`
+    );
+    element.textContent = text;
+  }
+  var HOVER_BORDER = "rgba(59, 130, 246, 0.9)";
+  var HOVER_FILL = "rgba(59, 130, 246, 0.08)";
+  var FOCUS_DIM = "rgba(15, 23, 42, 0.55)";
+  var FOCUS_BORDER = "#3b82f6";
+  var SVG_NS = "http://www.w3.org/2000/svg";
+  var MIN_RADIUS = 4;
+  var TANGENT_COLOR = "rgba(148, 163, 184, 0.9)";
+  function parseRadius(css, rect) {
+    const text = css.trim();
+    if (text === "" || text.includes("/")) return null;
+    const parts = text.split(/\s+/);
+    if (parts.length > 4) return null;
+    const values = [];
+    for (const part of parts) {
+      const resolved = part.endsWith("%") ? Math.min(rect.w, rect.h) * (Number.parseFloat(part) / 100) : Number.parseFloat(part);
+      if (!Number.isFinite(resolved) || resolved < 0) return null;
+      values.push(resolved);
+    }
+    const [first = 0, second = first, third = first, fourth = second] = values;
+    const clamp = (radius) => Math.min(radius, rect.w / 2, rect.h / 2);
+    return {
+      tl: clamp(first),
+      tr: clamp(second),
+      br: clamp(third),
+      bl: clamp(fourth)
+    };
+  }
+  function radiusGeometry(rect, radii) {
+    const specs = [
+      { corner: "tl", r: radii.tl, x: rect.x, y: rect.y, sx: 1, sy: 1 },
+      { corner: "tr", r: radii.tr, x: rect.x + rect.w, y: rect.y, sx: -1, sy: 1 },
+      { corner: "br", r: radii.br, x: rect.x + rect.w, y: rect.y + rect.h, sx: -1, sy: -1 },
+      { corner: "bl", r: radii.bl, x: rect.x, y: rect.y + rect.h, sx: 1, sy: -1 }
+    ];
+    const marks = [];
+    for (const spec of specs) {
+      if (spec.r < MIN_RADIUS) continue;
+      const hx = spec.x + spec.sx * spec.r;
+      const hy = spec.y;
+      const vx = spec.x;
+      const vy = spec.y + spec.sy * spec.r;
+      const sweep = spec.sx * spec.sy === 1 ? 0 : 1;
+      marks.push({
+        corner: spec.corner,
+        radius: spec.r,
+        arc: `M ${hx} ${hy} A ${spec.r} ${spec.r} 0 0 ${sweep} ${vx} ${vy}`,
+        tangents: [
+          [spec.x, spec.y, hx, hy],
+          [spec.x, spec.y, vx, vy]
+        ]
+      });
+    }
+    return marks;
+  }
+  function createSubLayer(name, before) {
+    const layer = document.createElement("div");
+    layer.dataset.layer = name;
+    layer.style.cssText = `${BASE};inset:0`;
+    before.before(layer);
+    return layer;
+  }
+  var MARK_COLOR = "rgba(217, 119, 6, 0.95)";
+  function drawMarks(layer, marks, bySelector) {
+    layer.replaceChildren();
+    if (marks.length === 0) return;
+    const scrollX = window.scrollX;
+    const scrollY = window.scrollY;
+    for (const mark of marks) {
+      const node = bySelector.get(mark.selector);
+      if (node === void 0) continue;
+      const badge = box(
+        layer,
+        `left:${node.rect.x - scrollX}px;top:${node.rect.y - scrollY}px;transform:translateY(-100%);padding:2px 6px;border-radius:4px;background:${MARK_COLOR};color:#fff;font:10px/1.4 ui-monospace,monospace;white-space:nowrap`
+      );
+      badge.textContent = mark.text;
+    }
+  }
+  function drawRadius(layer, node) {
+    layer.replaceChildren();
+    if (node === null) return;
+    const radii = parseRadius(node.styles.borderRadius, node.rect);
+    if (radii === null) return;
+    const view = {
+      x: node.rect.x - window.scrollX,
+      y: node.rect.y - window.scrollY,
+      w: node.rect.w,
+      h: node.rect.h
+    };
+    const marks = radiusGeometry(view, radii);
+    if (marks.length === 0) return;
+    const svg = document.createElementNS(SVG_NS, "svg");
+    svg.style.cssText = `${BASE};inset:0;width:100%;height:100%`;
+    for (const mark of marks) {
+      const arc = document.createElementNS(SVG_NS, "path");
+      arc.setAttribute("d", mark.arc);
+      arc.setAttribute("fill", "none");
+      arc.setAttribute("stroke", GAP_COLOR);
+      arc.setAttribute("stroke-width", "2");
+      svg.append(arc);
+      for (const [x1, y1, x2, y2] of mark.tangents) {
+        const line = document.createElementNS(SVG_NS, "line");
+        line.setAttribute("x1", String(x1));
+        line.setAttribute("y1", String(y1));
+        line.setAttribute("x2", String(x2));
+        line.setAttribute("y2", String(y2));
+        line.setAttribute("stroke", TANGENT_COLOR);
+        line.setAttribute("stroke-width", "1");
+        line.setAttribute("stroke-dasharray", "3 3");
+        svg.append(line);
+      }
+    }
+    layer.append(svg);
+    const labeled = marks.every((mark) => mark.radius === marks[0]?.radius) ? marks.slice(0, 1) : marks;
+    for (const mark of labeled) {
+      const inset = mark.radius * 0.55;
+      const x = mark.corner === "tr" || mark.corner === "br" ? view.x + view.w - inset : view.x + inset;
+      const y = mark.corner === "br" || mark.corner === "bl" ? view.y + view.h - inset : view.y + inset;
+      label(layer, `${round(mark.radius, 1)}px`, x, y);
+    }
+  }
+  function dimStyle(rect, scroll) {
+    const left = rect.x - scroll.x;
+    const top = rect.y - scroll.y;
+    return `left:${left}px;top:${top}px;width:${rect.w}px;height:${rect.h}px;box-shadow:0 0 0 9999px ${FOCUS_DIM}`;
+  }
+  function outlineStyle(rect, scroll) {
+    const left = rect.x - scroll.x;
+    const top = rect.y - scroll.y;
+    return `left:${left}px;top:${top}px;width:${rect.w}px;height:${rect.h}px;border:2px solid ${FOCUS_BORDER};border-radius:2px`;
+  }
+  function drawDim(layer, node) {
+    layer.replaceChildren();
+    if (node === null) return;
+    box(layer, dimStyle(node.rect, { x: window.scrollX, y: window.scrollY }));
+  }
+  function drawFocus(layer, node) {
+    layer.replaceChildren();
+    if (node === null) return;
+    box(layer, outlineStyle(node.rect, { x: window.scrollX, y: window.scrollY }));
+  }
+  function drawHover(layer, node) {
+    layer.replaceChildren();
+    if (node === null) return;
+    const left = node.rect.x - window.scrollX;
+    const top = node.rect.y - window.scrollY;
+    box(
+      layer,
+      `left:${left}px;top:${top}px;width:${node.rect.w}px;height:${node.rect.h}px;border:1px solid ${HOVER_BORDER};background:${HOVER_FILL}`
+    );
+    const lines = [
+      `${node.tag}  ${round(node.rect.w, 0)} \xD7 ${round(node.rect.h, 0)}`,
+      `padding  ${node.styles.padding}`,
+      `margin   ${node.styles.margin}`
+    ];
+    if (node.styles.gap !== "normal" && node.styles.gap !== "0px") {
+      lines.push(`gap      ${node.styles.gap}`);
+    }
+    const above = top > 72;
+    card(
+      layer,
+      lines.join("\n"),
+      left,
+      above ? top - 6 : top + 6,
+      above ? "translateY(-100%)" : "none"
+    );
+  }
+  function card(layer, text, x, y, transform) {
+    const element = box(
+      layer,
+      `left:${x}px;top:${y}px;transform:${transform};padding:6px 8px;border-radius:6px;background:rgba(17, 17, 17, 0.92);color:#fff;font:11px/1.5 ui-monospace,monospace;white-space:pre`
+    );
+    element.textContent = text;
+  }
+  function box(layer, css) {
+    const element = document.createElement("div");
+    element.style.cssText = `${BASE};${css}`;
+    layer.append(element);
+    return element;
+  }
+  function label(layer, text, x, y) {
+    const element = box(
+      layer,
+      `left:${x}px;top:${y}px;transform:translate(-50%,-50%);padding:1px 3px;border-radius:3px;background:#111;color:#fff;font:10px/1.2 ui-monospace,monospace;white-space:nowrap`
+    );
+    element.textContent = text;
+  }
+
+  // packages/core/src/render/overlay.ts
+  function render(graph, options = {}) {
+    const host = document.createElement("div");
+    host.id = OVERLAY_HOST_ID;
+    host.style.cssText = "position:fixed;inset:0;pointer-events:none;z-index:2147483647;contain:strict";
+    const shadow = host.attachShadow({ mode: "closed" });
+    const printStyle = document.createElement("style");
+    printStyle.textContent = "@media print { :host { display: none !important } }";
+    shadow.append(printStyle);
+    const layers = createLayers(shadow);
+    const radiusLayer = createSubLayer("radius", layers.hover);
+    const marksLayer = createSubLayer("marks", layers.hover);
+    if (options.toolbar !== void 0) shadow.append(options.toolbar);
+    document.documentElement.append(host);
+    let current = graph;
+    let byId = indexNodes(graph);
+    let hovered = null;
+    let hoverTarget = null;
+    let hoverFrame = 0;
+    let focusId = null;
+    let visible = new Set(options.layers ?? LAYERS);
+    let marks = options.marks ?? [];
+    let grid = options.grid ?? { step: GRID_STEP, axis: "both" };
+    let frame = 0;
+    const draw = () => {
+      frame = 0;
+      for (const name of LAYERS) {
+        layers[name].style.display = visible.has(name) ? "block" : "none";
+      }
+      drawGrid(layers.grid, grid);
+      drawGaps(layers.gap, current);
+      drawIssues(layers.issue, current);
+      const focused = focusId === null ? null : byId.get(focusId) ?? null;
+      drawGuides(layers.guide, current, focused);
+      const outlineNode = visible.has("focus") ? focused : null;
+      const dimNode = visible.has("dim") ? focused : null;
+      drawDim(layers.dim, dimNode);
+      drawFocus(layers.focus, outlineNode);
+      drawRadius(radiusLayer, outlineNode);
+      drawMarks(marksLayer, marks, new Map(current.nodes.map((node) => [node.selector, node])));
+      drawHover(layers.hover, hovered === null ? null : byId.get(hovered) ?? null);
+    };
+    const schedule = () => {
+      if (frame !== 0) return;
+      frame = requestAnimationFrame(draw);
+    };
+    const onScroll = () => schedule();
+    const onResize = () => schedule();
+    const applyHover = () => {
+      hoverFrame = 0;
+      const target = hoverTarget;
+      if (target === null) {
+        hovered = null;
+        drawHover(layers.hover, null);
+        return;
+      }
+      const id = pathOf(target);
+      const node = byId.get(id) ?? null;
+      hovered = node === null ? null : id;
+      drawHover(layers.hover, node);
+    };
+    const scheduleHover = (target) => {
+      hoverTarget = target;
+      if (hoverFrame !== 0) return;
+      hoverFrame = requestAnimationFrame(applyHover);
+    };
+    const onMouseOver = (event) => {
+      const target = event.target;
+      const outside = target instanceof Element && target.id === OVERLAY_HOST_ID;
+      scheduleHover(target instanceof Element && !outside ? target : null);
+    };
+    const onMouseOut = (event) => {
+      if (event instanceof MouseEvent && event.relatedTarget === null) scheduleHover(null);
+    };
+    window.addEventListener("scroll", onScroll, { passive: true });
+    window.addEventListener("resize", onResize);
+    document.addEventListener("mouseover", onMouseOver, { passive: true });
+    document.addEventListener("mouseout", onMouseOut, { passive: true });
+    draw();
+    return {
+      host,
+      update(next) {
+        current = next;
+        byId = indexNodes(next);
+        if (focusId !== null && !byId.has(focusId)) focusId = null;
+        draw();
+      },
+      setLayers(names) {
+        visible = new Set(names);
+        draw();
+      },
+      setFocus(id) {
+        focusId = id;
+        draw();
+      },
+      setMarks(next) {
+        marks = next;
+        draw();
+      },
+      setGrid(next) {
+        grid = next;
+        draw();
+      },
+      destroy() {
+        if (frame !== 0) cancelAnimationFrame(frame);
+        if (hoverFrame !== 0) cancelAnimationFrame(hoverFrame);
+        window.removeEventListener("scroll", onScroll);
+        window.removeEventListener("resize", onResize);
+        document.removeEventListener("mouseover", onMouseOver);
+        document.removeEventListener("mouseout", onMouseOut);
+        host.remove();
+      }
+    };
+  }
+  function indexNodes(graph) {
+    return new Map(graph.nodes.map((node) => [node.id, node]));
+  }
+
+  // packages/core/src/index.ts
+  var VERSION = "0.2.0";
+  return __toCommonJS(index_exports);
+})();
+//# sourceMappingURL=core.iife.js.map