domflax 0.1.2 → 0.2.0

package/dist/webpack-loader.cjs

@@ -96,6 +96,7 @@ function defaultMeta(safetyFloor = 0) {
     hasDynamicChildren: false,
     isComponent: false,
     hasDangerousHtml: false,
+    hasUnresolvedClasses: false,
     targetedByCombinator: false,
     targetedByStructuralPseudo: false,
     selectorDependents: 0,
@@ -107,6 +108,7 @@ function defaultMeta(safetyFloor = 0) {
     declaresCustomProperties: false,
     whitespaceSensitive: false,
     touched: false,
+    styleDirty: false,
     synthetic: false,
     safetyFloor
   };
@@ -287,6 +289,14 @@ function markTouched(state, id) {
     state.touched.add(id);
   }
 }
+function markStyleDirty(state, id) {
+  const n = state.doc.nodes.get(id);
+  if (n) {
+    n.meta.touched = true;
+    n.meta.styleDirty = true;
+    state.touched.add(id);
+  }
+}
 function removeSubtree(state, id) {
   const node = state.doc.nodes.get(id);
   if (!node) return;
@@ -578,7 +588,7 @@ function applyOne(state, op) {
         return [precond(op, op.target, "setClassList target is not an element")];
       }
       el.computed = cloneStyleMap(op.style);
-      markTouched(state, op.target);
+      markStyleDirty(state, op.target);
       return [];
     }
     case "mergeStyle": {
@@ -601,7 +611,7 @@ function applyOne(state, op) {
         const src = doc.nodes.get(op.source);
         if (src) markTouched(state, op.source);
       }
-      markTouched(state, op.target);
+      markStyleDirty(state, op.target);
       return [];
     }
     case "foldInheritedStyles":
@@ -652,7 +662,7 @@ function applyFold(state, op) {
     }
     if (folded) {
       into.computed = { blocks: nextBlocks };
-      markTouched(state, intoId);
+      markStyleDirty(state, intoId);
     }
   }
   for (const d of issues) state.diagnostics.push(d);
@@ -912,8 +922,123 @@ function buildMatchContext(doc, elementId, resolver, selectors, safety, phase, i
 var DISPLAY = "display";
 var POSITION = "position";
 var TRANSFORM = "transform";
+var ALIGN_ITEMS = "align-items";
+var JUSTIFY_CONTENT = "justify-content";
+var JUSTIFY_ITEMS = "justify-items";
+var PLACE_ITEMS = "place-items";
+var PLACE_SELF = "place-self";
 var CONTEXT_SAFE_DISPLAYS = /* @__PURE__ */ new Set(["block", "contents", ""]);
 var STATIC_POSITIONS = /* @__PURE__ */ new Set(["static", ""]);
+var CENTERING_DISPLAYS = /* @__PURE__ */ new Set(["flex", "grid"]);
+var GRID_PARENT_DISPLAYS = /* @__PURE__ */ new Set(["grid"]);
+var STRETCHY_ITEM_ALIGN = /* @__PURE__ */ new Set(["normal", "stretch"]);
+var PARENT_ITEMS_ALIGN_PROPS = [ALIGN_ITEMS, JUSTIFY_ITEMS, PLACE_ITEMS];
+function isBaseCondition(block) {
+  const c = block.condition;
+  return c.media === "" && c.states.length === 0 && c.pseudoElement === "";
+}
+function baseValue(sm, prop) {
+  for (const block of sm.blocks.values()) {
+    if (!isBaseCondition(block)) continue;
+    const d = block.decls.get(prop);
+    return d ? String(d.value) : null;
+  }
+  return null;
+}
+function parentIsFillingGrid(before, wrapper, norm) {
+  if (wrapper.parent == null) return false;
+  const p = before.nodes.get(wrapper.parent);
+  if (!p || p.kind !== "element") return false;
+  const pc2 = norm.normalizeStyleMap(p.computed);
+  let baseIsGrid = false;
+  for (const block of pc2.blocks.values()) {
+    const disp = block.decls.get(DISPLAY);
+    if (disp) {
+      if (!GRID_PARENT_DISPLAYS.has(String(disp.value))) return false;
+      if (isBaseCondition(block)) baseIsGrid = true;
+    }
+    for (const prop of PARENT_ITEMS_ALIGN_PROPS) {
+      const d = block.decls.get(prop);
+      if (d && !STRETCHY_ITEM_ALIGN.has(String(d.value))) return false;
+    }
+  }
+  return baseIsGrid;
+}
+function wrapperHasOnlyCenteringStyle(wrapperComputed, childComputed, norm) {
+  for (const block of wrapperComputed.blocks.values()) {
+    const base = isBaseCondition(block);
+    const ck = conditionKey(block.condition);
+    for (const [prop, decl] of block.decls) {
+      const val = String(decl.value);
+      if (prop === DISPLAY) {
+        if (base && CENTERING_DISPLAYS.has(val)) continue;
+        return false;
+      }
+      if (prop === ALIGN_ITEMS) {
+        if (base && val === "center") continue;
+        return false;
+      }
+      if (prop === JUSTIFY_CONTENT) {
+        if (base && val === "center") continue;
+        return false;
+      }
+      if (prop === POSITION) {
+        if (STATIC_POSITIONS.has(val)) continue;
+        return false;
+      }
+      if (prop === TRANSFORM) {
+        if (val === "none") continue;
+        return false;
+      }
+      if (isInherited2(decl, norm)) continue;
+      if (childReproduces(childComputed, ck, prop, val)) continue;
+      return false;
+    }
+  }
+  return true;
+}
+function wrapperCentersSingleElement(before, wrapper) {
+  let elements = 0;
+  for (const cid of wrapper.children) {
+    const n = before.nodes.get(cid);
+    if (!n) continue;
+    if (n.kind === "element") {
+      elements += 1;
+      continue;
+    }
+    if (n.kind === "comment") continue;
+    if (n.kind === "text" && n.value.trim() === "") continue;
+    return false;
+  }
+  return elements === 1;
+}
+function childHasSelfAlign(childBefore, norm) {
+  if (!childBefore) return false;
+  const sm = norm.normalizeStyleMap(childBefore);
+  for (const block of sm.blocks.values()) {
+    for (const prop of SELF_ALIGN_PROPS) {
+      const d = block.decls.get(prop);
+      if (d && !NEUTRAL_ALIGN.has(String(d.value))) return true;
+    }
+  }
+  return false;
+}
+function childGainsPlaceSelfCenter(childAfter) {
+  if (baseValue(childAfter, PLACE_SELF) === "center") return true;
+  return baseValue(childAfter, "align-self") === "center" && baseValue(childAfter, "justify-self") === "center";
+}
+function isContextCompensatedCentering(before, wrapper, wrapperComputed, childBefore, childAfter, norm) {
+  if (!childAfter) return false;
+  if (!CENTERING_DISPLAYS.has(baseValue(wrapperComputed, DISPLAY) ?? "")) return false;
+  if (baseValue(wrapperComputed, ALIGN_ITEMS) !== "center") return false;
+  if (baseValue(wrapperComputed, JUSTIFY_CONTENT) !== "center") return false;
+  const childAfterNorm = norm.normalizeStyleMap(childAfter);
+  if (!childGainsPlaceSelfCenter(childAfterNorm)) return false;
+  if (!wrapperHasOnlyCenteringStyle(wrapperComputed, childAfterNorm, norm)) return false;
+  if (!wrapperCentersSingleElement(before, wrapper)) return false;
+  if (childHasSelfAlign(childBefore, norm)) return false;
+  return parentIsFillingGrid(before, wrapper, norm);
+}
 var SELF_ALIGN_PROPS = [
   "place-self",
   "align-self",
@@ -1009,10 +1134,16 @@ function classifyFlattenOps(before, after, ops, norm) {
   if (!wrapper || wrapper.kind !== "element") {
     return { kind: "provably-safe", wrapperId: null, childId: null };
   }
+  if (wrapper.meta.hasUnresolvedClasses) {
+    return { kind: "needs-verification", wrapperId, childId: survivingChildOf(ops, wrapper, before) };
+  }
   const childId = survivingChildOf(ops, wrapper, before);
   const wrapperComputed = norm.normalizeStyleMap(wrapper.computed);
   const childAfter = childId != null ? getElement(after, childId)?.computed ?? null : null;
   const childBefore = childId != null ? getElement(before, childId)?.computed ?? null : null;
+  if (isContextCompensatedCentering(before, wrapper, wrapperComputed, childBefore, childAfter, norm)) {
+    return { kind: "provably-safe", wrapperId, childId };
+  }
   if (establishesChildContext(wrapperComputed)) {
     return { kind: "needs-verification", wrapperId, childId };
   }
@@ -1441,22 +1572,52 @@ function sameTokens(a, b) {
   for (let i = 0; i < a.length; i += 1) if (a[i] !== b[i]) return false;
   return true;
 }
+function residualStyle(computed2, covered, norm) {
+  const cov = norm.normalizeStyleMap(covered);
+  const blocks = /* @__PURE__ */ new Map();
+  for (const [key, block] of norm.normalizeStyleMap(computed2).blocks) {
+    const covBlock = cov.blocks.get(key);
+    const decls = /* @__PURE__ */ new Map();
+    for (const [prop, decl] of block.decls) {
+      const covDecl = covBlock?.decls.get(prop);
+      if (covDecl && covDecl.value === decl.value && covDecl.important === decl.important) continue;
+      decls.set(prop, decl);
+    }
+    if (decls.size > 0) blocks.set(key, { condition: block.condition, decls });
+  }
+  return { blocks };
+}
+function joinedLength(tokens) {
+  if (tokens.length === 0) return 0;
+  let len = tokens.length - 1;
+  for (const t of tokens) len += t.length;
+  return len;
+}
+var COMPRESS_FLOOR = 1;
 function syncClassesFromComputed(doc, resolver, norm) {
   const sink = createSyntheticSink();
+  const isDroppable = (t) => resolver.owns(t) && resolver.selectorUsage(t).droppable;
   for (const id of elementIds(doc)) {
     const el = getElement(doc, id);
-    if (!el || !el.meta.touched) continue;
+    if (!el) continue;
     if (el.classes.opaque || el.classes.hasDynamic) continue;
+    const compressOnly = !el.meta.styleDirty;
+    if (compressOnly && el.meta.safetyFloor < COMPRESS_FLOOR) continue;
     const tokens = staticTokensOf(el.classes);
+    if (tokens.length === 0) continue;
+    const retained = tokens.filter((t) => !isDroppable(t));
+    if (compressOnly && retained.length === tokens.length) continue;
+    const covered = retained.length > 0 ? resolver.resolve({ classes: retained }).styles : null;
+    const target = covered ? residualStyle(el.computed, covered, norm) : el.computed;
     const ctx = { normalizer: norm, sink };
-    const emitted = resolver.emit(el.computed, ctx).classes;
+    const emitted = resolver.emit(target, ctx).classes;
     if (emitted.length === 0) continue;
     const emittedSet = new Set(emitted);
     const next = [];
     const seen = /* @__PURE__ */ new Set();
     for (const t of tokens) {
       if (seen.has(t)) continue;
-      const keep = emittedSet.has(t) || !resolver.selectorUsage(t).droppable;
+      const keep = emittedSet.has(t) || !isDroppable(t);
       if (keep) {
         next.push(t);
         seen.add(t);
@@ -1468,10 +1629,98 @@ function syncClassesFromComputed(doc, resolver, norm) {
       seen.add(c);
     }
     if (sameTokens(next, tokens)) continue;
+    if (compressOnly) {
+      if (!norm.equals(resolver.resolve({ classes: next }).styles, el.computed)) continue;
+      if (joinedLength(next) > joinedLength(tokens)) continue;
+    }
     el.classes = staticClassList(el.classes, next);
   }
 }
 
+// ../core/src/compress-engine.ts
+var SEP = "
";
+function tupleKey(condition, property, value, important) {
+  return `${condition}${SEP}${property}${SEP}${value}${SEP}${important ? "1" : "0"}`;
+}
+function styleMapTuples(map, norm) {
+  const out = [];
+  const normalized = norm.normalizeStyleMap(map);
+  for (const [ck, block] of normalized.blocks) {
+    for (const [prop, decl] of block.decls) {
+      out.push(tupleKey(String(ck), String(prop), String(decl.value), decl.important));
+    }
+  }
+  return out;
+}
+var DEFAULT_MAX_UNIVERSE = 20;
+function minStringCover(universe, vocabulary, options = {}) {
+  const uniq = [...new Set(universe)];
+  if (uniq.length === 0) return [];
+  const n = uniq.length;
+  const max = options.maxUniverse ?? DEFAULT_MAX_UNIVERSE;
+  if (n > max) return null;
+  const bitOf = /* @__PURE__ */ new Map();
+  uniq.forEach((t, i) => bitOf.set(t, i));
+  const byMask = /* @__PURE__ */ new Map();
+  for (const entry of vocabulary) {
+    if (entry.tuples.length === 0) continue;
+    let mask = 0;
+    let ok = true;
+    for (const t of entry.tuples) {
+      const b = bitOf.get(t);
+      if (b === void 0) {
+        ok = false;
+        break;
+      }
+      mask |= 1 << b;
+    }
+    if (!ok || mask === 0) continue;
+    const cost = entry.token.length + 1;
+    const prev = byMask.get(mask);
+    if (!prev || cost < prev.cost || cost === prev.cost && entry.token < prev.token) {
+      byMask.set(mask, { token: entry.token, mask, cost });
+    }
+  }
+  const cands = [...byMask.values()];
+  if (cands.length === 0) return null;
+  const full = (1 << n) - 1;
+  const byBit = Array.from({ length: n }, () => []);
+  cands.forEach((c, ci) => {
+    for (let b = 0; b < n; b += 1) if (c.mask & 1 << b) byBit[b].push(ci);
+  });
+  const size = full + 1;
+  const dp = new Float64Array(size).fill(Infinity);
+  const fromCand = new Int32Array(size).fill(-1);
+  const fromMask = new Int32Array(size).fill(-1);
+  dp[0] = 0;
+  for (let mask = 0; mask < full; mask += 1) {
+    const cur = dp[mask];
+    if (!Number.isFinite(cur)) continue;
+    let b = 0;
+    while (b < n && mask & 1 << b) b += 1;
+    for (const ci of byBit[b]) {
+      const c = cands[ci];
+      const nm = mask | c.mask;
+      const cost = cur + c.cost;
+      if (cost < dp[nm]) {
+        dp[nm] = cost;
+        fromCand[nm] = ci;
+        fromMask[nm] = mask;
+      }
+    }
+  }
+  if (!Number.isFinite(dp[full])) return null;
+  const chosen = [];
+  let m = full;
+  while (m !== 0) {
+    const ci = fromCand[m];
+    if (ci < 0) return null;
+    chosen.push(cands[ci].token);
+    m = fromMask[m];
+  }
+  return [...new Set(chosen)].sort();
+}
+
 // ../pattern-kit/src/normalize.ts
 var INHERITED_PROPERTIES = [
   "azimuth",
@@ -1556,6 +1805,18 @@ var BOX_SIDES = {
   padding: ["padding-top", "padding-right", "padding-bottom", "padding-left"],
   margin: ["margin-top", "margin-right", "margin-bottom", "margin-left"],
   inset: ["top", "right", "bottom", "left"],
+  "scroll-margin": [
+    "scroll-margin-top",
+    "scroll-margin-right",
+    "scroll-margin-bottom",
+    "scroll-margin-left"
+  ],
+  "scroll-padding": [
+    "scroll-padding-top",
+    "scroll-padding-right",
+    "scroll-padding-bottom",
+    "scroll-padding-left"
+  ],
   "border-width": [
     "border-top-width",
     "border-right-width",
@@ -1573,8 +1834,35 @@ var BOX_SIDES = {
     "border-right-color",
     "border-bottom-color",
     "border-left-color"
+  ],
+  // `border-radius` 1–4 value form maps to the four CORNERS (TL, TR, BR, BL) — the same positional
+  // pattern boxFourSides implements. Only the slash-free form is expanded (see expandShorthand).
+  "border-radius": [
+    "border-top-left-radius",
+    "border-top-right-radius",
+    "border-bottom-right-radius",
+    "border-bottom-left-radius"
   ]
 };
+var AXIS_PAIRS = {
+  overflow: ["overflow-x", "overflow-y"],
+  "overscroll-behavior": ["overscroll-behavior-x", "overscroll-behavior-y"],
+  "place-items": ["align-items", "justify-items"],
+  "place-content": ["align-content", "justify-content"],
+  "place-self": ["align-self", "justify-self"]
+};
+var LOGICAL_PAIRS = {
+  "padding-inline": ["padding-left", "padding-right"],
+  "padding-block": ["padding-top", "padding-bottom"],
+  "margin-inline": ["margin-left", "margin-right"],
+  "margin-block": ["margin-top", "margin-bottom"],
+  "inset-inline": ["left", "right"],
+  "inset-block": ["top", "bottom"],
+  "scroll-padding-inline": ["scroll-padding-left", "scroll-padding-right"],
+  "scroll-padding-block": ["scroll-padding-top", "scroll-padding-bottom"],
+  "scroll-margin-inline": ["scroll-margin-left", "scroll-margin-right"],
+  "scroll-margin-block": ["scroll-margin-top", "scroll-margin-bottom"]
+};
 function splitTopLevel(value) {
   const out = [];
   let depth = 0;
@@ -1608,6 +1896,7 @@ function boxFourSides(values) {
   }
 }
 function expandShorthand(prop, value) {
+  if (prop === "border-radius" && value.includes("/")) return [[prop, value]];
   const box = BOX_SIDES[prop];
   if (box) {
     const parts = splitTopLevel(value);
@@ -1617,6 +1906,19 @@ function expandShorthand(prop, value) {
     }
     return [[prop, value]];
   }
+  const axis = AXIS_PAIRS[prop];
+  if (axis) {
+    const parts = splitTopLevel(value);
+    if (parts.length === 1) return [[axis[0], parts[0]], [axis[1], parts[0]]];
+    if (parts.length === 2) return [[axis[0], parts[0]], [axis[1], parts[1]]];
+    return [[prop, value]];
+  }
+  const logical = LOGICAL_PAIRS[prop];
+  if (logical) {
+    const parts = splitTopLevel(value);
+    if (parts.length === 1) return [[logical[0], parts[0]], [logical[1], parts[0]]];
+    return [[prop, value]];
+  }
   if (prop === "gap" || prop === "grid-gap") {
     const parts = splitTopLevel(value);
     if (parts.length === 1) {
@@ -1774,7 +2076,12 @@ var VISUAL_PROPERTIES = /* @__PURE__ */ new Set([
   "border-right-color",
   "border-bottom-color",
   "border-left-color",
-  "border-radius",
+  // `border-radius` is expanded to its four corner longhands by the shared normalizer, so the
+  // paint-establishing check must match those (a rounded wrapper still clips its background).
+  "border-top-left-radius",
+  "border-top-right-radius",
+  "border-bottom-right-radius",
+  "border-bottom-left-radius",
   "box-shadow",
   "outline",
   "outline-width",
@@ -1800,6 +2107,7 @@ var hasOwnVisualStyle = (node, ctx) => {
   const el = asElement(node);
   if (!el) return false;
   if (el.meta.hasOwnVisualStyle) return true;
+  if (el.meta.hasUnresolvedClasses) return true;
   const computedMap = ctx.computedOf(el) ?? el.computed;
   const norm = normalizer.normalizeStyleMap(computedMap);
   for (const block of norm.blocks.values()) {
@@ -2004,7 +2312,160 @@ function definePattern(config) {
   return validatePattern(spec);
 }
 
-// ../patterns/src/library/flatten/display-contents-wrapper.pattern.ts
+// ../patterns/src/library/flex/flex-center-wrapper.pattern.ts
+var flexCenterWrapper = definePattern({
+  name: "flex-center-wrapper",
+  category: "flatten/flex/flex-center-wrapper",
+  safety: 2,
+  doc: {
+    title: "Flatten flex-centering wrapper",
+    summary: "A div that only centers a single child (display:flex; align-items:center; justify-content:center) is removed; the child gains place-self:center.",
+    before: '<div style="display:flex;align-items:center;justify-content:center"><Child/></div>',
+    after: '<Child style="place-self:center"/>',
+    safetyRationale: "Wrapper paints nothing, carries no ref/handlers/dynamic children, and is not a combinator subject; inheritable styles are folded onto the child before removal."
+  },
+  match: {
+    tag: "div",
+    style: { display: "flex", alignItems: "center", justifyContent: "center" },
+    onlyChild: "element",
+    paintsNothing: true
+  },
+  rewrite: {
+    flattenInto: "child",
+    childGains: { placeSelf: "center" }
+  },
+  // Collapsing a flex-centering wrapper to `place-self:center` on the child is render-identical ONLY
+  // when the child's NEW parent is a statically-known GRID that lets the wrapper fill its area (there
+  // `place-self`'s align-self AND justify-self both take effect). Under that ONE context the flatten is
+  // classified `provably-safe` and commits; under a flex/block/unknown parent — or when the wrapper
+  // drops any own style — it stays `needs-verification` and the conservative production gate PRESERVES
+  // it. Op-level correctness (purity, id-preserving unwrap, opacity-barrier safety) is additionally
+  // asserted by the invariant suite over every pattern.
+  test: {
+    cases: [
+      {
+        name: "grid parent \u2192 flattened (child gains place-self-center)",
+        before: '<div className="grid"><div className="flex items-center justify-center"><span className="bg-red-200">x</span></div></div>',
+        after: '<div className="grid"><span className="bg-red-200 place-self-center">x</span></div>'
+      }
+    ],
+    noMatch: [
+      // Non-grid (flex) parent (document root): `justify-self` is ignored in flex → not provably safe.
+      '<div className="flex justify-center items-center"><div className="bg-red-200">Hello</div></div>',
+      // Grid parent, but the wrapper drops padding when removed → not layout-neutral (rule 3).
+      '<div className="grid"><div className="p-4 flex items-center justify-center"><span className="bg-red-200">x</span></div></div>',
+      // Grid parent forcing place-items-center: the wrapper would not fill its area → fill guard skips.
+      '<div className="grid place-items-center"><div className="flex items-center justify-center"><span className="bg-red-200">x</span></div></div>',
+      // onClick is a hard opacity barrier → the wrapper is load-bearing regardless of the gate.
+      '<div className="flex justify-center items-center" onClick={handleClick}><div className="bg-red-200">Hello</div></div>'
+    ]
+  }
+});
+
+// ../patterns/src/library/fragment/redundant-fragment.pattern.ts
+function parentIsRedundantFragment(node, ctx) {
+  const el = node;
+  if (el.kind !== "element") return false;
+  const parentId = el.parent;
+  if (parentId == null) return false;
+  const parent = ctx.doc.nodes.get(parentId);
+  if (!parent || parent.kind !== "fragment") return false;
+  if (parent.parent == null) return false;
+  if (parent.children.length !== 1) return false;
+  const m = parent.meta;
+  if (m.hasKey || m.hasRef || m.hasEventHandlers || m.hasDynamicChildren || m.hasDangerousHtml || m.hasSpreadAttrs || m.isComponent) {
+    return false;
+  }
+  if (m.targetedByCombinator || m.targetedByStructuralPseudo) return false;
+  const fid = parentId;
+  if (ctx.selectors.targetedByCombinator(fid) || ctx.selectors.targetedByStructuralPseudo(fid)) {
+    return false;
+  }
+  if (ctx.selectors.reparentImpact(fid).size > 0) return false;
+  return true;
+}
+var redundantFragment = definePattern({
+  name: "redundant-fragment",
+  category: "flatten/fragment/redundant-fragment",
+  safety: 1,
+  doc: {
+    title: "Flatten redundant single-child fragment",
+    summary: "A fragment whose only child is a single node is removed; the child is spliced up into the fragment's slot, preserving its IRNodeId, siblings, attributes and the CSS cascade.",
+    before: "<><Child/></>",
+    after: "<Child/>",
+    safetyRationale: "A fragment paints nothing and renders no box; with exactly one child its removal changes no sibling/structural-pseudo match-set. Keyed fragments and fragments carrying ref/handlers/dynamic-children/raw-html/spread are excluded as opacity barriers."
+  },
+  match: parentIsRedundantFragment,
+  rewrite: (ctx, rw) => {
+    const parentId = ctx.node.parent;
+    if (parentId == null) return null;
+    const fragment = ctx.doc.nodes.get(parentId);
+    if (!fragment || fragment.kind !== "fragment") return null;
+    return [rw.unwrap(fragment)];
+  },
+  test: {
+    cases: [
+      {
+        // A fragment renders no box, so unwrapping a single-child fragment is always layout-identical
+        // → a provably-safe flatten: the child is spliced up into the fragment's slot.
+        before: '<><span className="bg-red-200">Hi</span></>',
+        after: '<span className="bg-red-200">Hi</span>'
+      }
+    ],
+    noMatch: [
+      // Two children ⇒ not a single-child fragment, so the fragment is load-bearing and stays.
+      '<><span className="bg-red-200">A</span><span className="bg-green-200">B</span></>'
+    ]
+  }
+});
+
+// ../patterns/src/library/grid/grid-center-wrapper.pattern.ts
+var gridCenterWrapper = definePattern({
+  name: "grid-center-wrapper",
+  category: "flatten/grid/grid-center-wrapper",
+  safety: 2,
+  doc: {
+    title: "Flatten grid-centering wrapper",
+    summary: "A div that only centers a single child (display:grid; align-items:center; justify-content:center) is removed; the child gains place-self:center.",
+    before: '<div style="display:grid;align-items:center;justify-content:center"><Child/></div>',
+    after: '<Child style="place-self:center"/>',
+    safetyRationale: "Wrapper paints nothing, carries no ref/handlers/dynamic children, and is not a combinator subject; inheritable styles are folded onto the child before removal. The place-self:center collapse is committed by the gate only under a statically-known filling grid parent."
+  },
+  match: {
+    tag: "div",
+    style: { display: "grid", alignItems: "center", justifyContent: "center" },
+    onlyChild: "element",
+    paintsNothing: true
+  },
+  rewrite: {
+    flattenInto: "child",
+    childGains: { placeSelf: "center" }
+  },
+  // Like `flex-center-wrapper`, collapsing to `place-self:center` is render-identical ONLY when the
+  // child's NEW parent is a statically-known GRID that lets the wrapper fill its area (there both halves
+  // of place-self take effect). Under that ONE context the flatten is `provably-safe` and commits; under
+  // a flex/block/unknown parent — or when the wrapper drops any own style — it stays `needs-verification`
+  // and the conservative production gate PRESERVES it. Op-level correctness is asserted by the invariant suite.
+  test: {
+    cases: [
+      {
+        name: "grid parent \u2192 flattened (child gains place-self-center)",
+        before: '<div className="grid"><div className="grid items-center justify-center"><span className="bg-red-200">x</span></div></div>',
+        after: '<div className="grid"><span className="bg-red-200 place-self-center">x</span></div>'
+      }
+    ],
+    noMatch: [
+      // Non-grid (document-root) parent: justify-self is ignored outside a grid → not provably safe.
+      '<div className="grid justify-center items-center"><div className="bg-red-200">Hello</div></div>',
+      // Grid parent, but the wrapper drops padding when removed → not layout-neutral, preserved.
+      '<div className="grid"><div className="p-4 grid items-center justify-center"><span className="bg-red-200">x</span></div></div>',
+      // onClick is a hard opacity barrier → the wrapper is load-bearing regardless of the gate.
+      '<div className="grid justify-center items-center" onClick={handleClick}><div className="bg-red-200">Hello</div></div>'
+    ]
+  }
+});
+
+// ../patterns/src/library/wrapper/display-contents-wrapper.pattern.ts
 function asEl(node) {
   const n = node;
   return n.kind === "element" ? n : null;
@@ -2028,7 +2489,7 @@ var targetedByStructuralPseudo = (node, ctx) => {
 };
 var displayContentsWrapper = definePattern({
   name: "display-contents-wrapper",
-  category: "flatten/display-contents-wrapper",
+  category: "flatten/wrapper/display-contents-wrapper",
   safety: 2,
   doc: {
     title: "Flatten display:contents wrapper",
@@ -2068,7 +2529,7 @@ var displayContentsWrapper = definePattern({
   }
 });
 
-// ../patterns/src/library/flatten/empty-style-div.pattern.ts
+// ../patterns/src/library/wrapper/empty-style-div.pattern.ts
 function asEl2(node) {
   const n = node;
   return n.kind === "element" ? n : null;
@@ -2100,7 +2561,7 @@ var hasNonBlockDisplay = (node, ctx) => {
 };
 var emptyStyleDiv = definePattern({
   name: "empty-style-div",
-  category: "flatten/empty-style-div",
+  category: "flatten/wrapper/empty-style-div",
   safety: 1,
   doc: {
     title: "Flatten empty-style div wrapper",
@@ -2139,1595 +2600,229 @@ var emptyStyleDiv = definePattern({
   }
 });
 
-// ../patterns/src/library/flatten/flex-center-wrapper.pattern.ts
-var flexCenterWrapper = definePattern({
-  name: "flex-center-wrapper",
-  category: "flatten/flex-center-wrapper",
+// ../patterns/src/library/wrapper/inherited-only-wrapper.pattern.ts
+var INERT_HOST_TAGS = /* @__PURE__ */ new Set(["div", "span"]);
+var isInertHostTag = (node) => {
+  const n = node;
+  if (n.kind !== "element") return false;
+  return INERT_HOST_TAGS.has(String(n.tag).toLowerCase());
+};
+var isComponentNode2 = (node) => {
+  const n = node;
+  return n.kind === "element" ? n.meta.isComponent : false;
+};
+var hasOnlyInheritedStyle = (node, ctx) => {
+  const sm = normalizer.normalizeStyleMap(ctx.computed());
+  let sawAny = false;
+  for (const block of sm.blocks.values()) {
+    for (const decl of block.decls.values()) {
+      sawAny = true;
+      const inherited = decl.inherited || normalizer.inherited.isInherited(decl.property);
+      if (!inherited) return false;
+    }
+  }
+  return sawAny;
+};
+var inheritedOnlyWrapper = definePattern({
+  name: "inherited-only-wrapper",
+  category: "flatten/wrapper/inherited-only-wrapper",
   safety: 2,
   doc: {
-    title: "Flatten flex-centering wrapper",
-    summary: "A div that only centers a single child (display:flex; align-items:center; justify-content:center) is removed; the child gains place-self:center.",
-    before: '<div style="display:flex;align-items:center;justify-content:center"><Child/></div>',
-    after: '<Child style="place-self:center"/>',
-    safetyRationale: "Wrapper paints nothing, carries no ref/handlers/dynamic children, and is not a combinator subject; inheritable styles are folded onto the child before removal."
+    title: "Flatten inherited-only styling wrapper",
+    summary: "A paint-free wrapper whose only own declarations are inherited properties (text-align, color, font-*, \u2026) is removed; its inherited style is folded onto the sole child, which keeps the same inherited values for the whole subtree.",
+    before: '<div style="text-align:center"><Child/></div>',
+    after: '<Child style="text-align:center"/>',
+    safetyRationale: "Inherited properties reach descendants purely through inheritance, so folding them onto the child and removing the box is render-identical. The wrapper carries nothing non-inherited, establishes no box/formatting/stacking context, and is guarded by the auto-applied opacity-barrier + selector-safety set."
   },
   match: {
-    tag: "div",
-    style: { display: "flex", alignItems: "center", justifyContent: "center" },
     onlyChild: "element",
-    paintsNothing: true
-  },
-  rewrite: {
-    flattenInto: "child",
-    childGains: { placeSelf: "center" }
+    paintsNothing: true,
+    where: [isInertHostTag, not(isComponentNode2), hasOnlyInheritedStyle]
   },
-  // Collapsing a flex-centering wrapper to `place-self:center` on the child only stays centered when
-  // the child's NEW parent is flex/grid; moreover the wrapper's own `display:flex` establishes a
-  // formatting context. Both make this a `needs-verification` flatten, which the conservative
-  // production gate (`'provably-safe'`, used by the harness) intentionally REVERTS — so every case
-  // here is a no-match: the wrapper is preserved. Op-level rewrite correctness (purity, id-preserving
-  // unwrap, opacity-barrier safety) is still asserted by the invariant suite over every pattern.
+  rewrite: { flattenInto: "child" },
   test: {
+    cases: [
+      {
+        // `text-align:center` is inherited → folded onto the child; the paint-free wrapper is removed.
+        before: '<div className="text-center"><p className="bg-red-200">x</p></div>',
+        after: '<p className="bg-red-200 text-center">x</p>'
+      }
+    ],
     noMatch: [
-      // Even under a static flex/grid parent the centering flatten is not provably layout-neutral
-      // (the wrapper itself establishes a flex formatting context) → left unchanged.
-      '<div className="grid"><div className="flex items-center justify-center"><span className="bg-red-200">x</span></div></div>',
-      // Non-flex/grid parent (document root): place-self centering would not hold → left unchanged.
-      '<div className="flex justify-center items-center"><div className="bg-red-200">Hello</div></div>',
-      // onClick is a hard opacity barrier → the wrapper is load-bearing regardless of the gate.
-      '<div className="flex justify-center items-center" onClick={handleClick}><div className="bg-red-200">Hello</div></div>'
+      // `p-4` is a NON-inherited padding: removing the box would drop it, so the flatten-safety gate
+      // reverts the unwrap and the wrapper is left unchanged.
+      '<div className="p-4"><p className="bg-red-200">x</p></div>',
+      // A `<p>` wrapper is NOT an inert host box: its UA default display/margins are not captured in the
+      // class-derived computed style, so removing it is not provably layout-neutral → left unchanged.
+      '<p className="text-center"><span className="bg-red-200">x</span></p>'
     ]
   }
 });
 
-// ../patterns/src/library/flatten/inline-flex-center-wrapper.pattern.ts
-var inlineFlexCenterWrapper = definePattern({
-  name: "inline-flex-center-wrapper",
-  category: "flatten/inline-flex-center-wrapper",
-  safety: 2,
-  doc: {
-    title: "Flatten inline-flex-centering wrapper",
-    summary: "A div that only centers a single child (display:inline-flex; align-items:center; justify-content:center) is removed; the child gains place-self:center.",
-    before: '<div style="display:inline-flex;align-items:center;justify-content:center"><Child/></div>',
-    after: '<Child style="place-self:center"/>',
-    safetyRationale: "Wrapper paints nothing, carries no ref/handlers/dynamic children, and is not a combinator subject; inheritable styles are folded onto the child before removal."
-  },
-  match: {
-    tag: "div",
-    style: { display: "inline-flex", alignItems: "center", justifyContent: "center" },
-    onlyChild: "element",
-    paintsNothing: true
-  },
-  rewrite: {
-    flattenInto: "child",
-    childGains: { placeSelf: "center" }
-  },
-  // Like its block-level sibling, this centering flatten is `needs-verification` (the wrapper's own
-  // `display:inline-flex` establishes a formatting context, and place-self centering only holds under
-  // a flex/grid parent), so the conservative production gate (`'provably-safe'`) REVERTS it — every
-  // case here is a no-match. Op-level correctness is covered by the invariant suite.
-  test: {
-    noMatch: [
-      // Even under a static flex/grid parent the centering flatten is not provably layout-neutral.
-      '<div className="grid"><div className="inline-flex items-center justify-center"><span className="bg-red-200">x</span></div></div>',
-      // Non-flex/grid parent (document root) → left unchanged.
-      '<div className="inline-flex justify-center items-center"><div className="bg-red-200">Hello</div></div>',
-      // onClick is a hard opacity barrier → the wrapper is load-bearing regardless of the gate.
-      '<div className="inline-flex justify-center items-center" onClick={handleClick}><div className="bg-red-200">Hello</div></div>'
-    ]
-  }
-});
-
-// ../patterns/src/library/flatten/nested-flex-merge.pattern.ts
-function baseConditionStyleMap(decls) {
-  const map = /* @__PURE__ */ new Map();
-  for (const [prop, value] of decls) {
-    for (const decl of normalizer.normalizeDeclaration(prop, value, false)) {
-      map.set(decl.property, decl);
-    }
-  }
-  const block = { condition: BASE_CONDITION, decls: map };
-  const blocks = /* @__PURE__ */ new Map([[conditionKey(BASE_CONDITION), block]]);
-  return { blocks };
-}
-var DISPLAY_FLEX = baseConditionStyleMap([["display", "flex"]]);
-var FLEX_CONTAINER_PROPERTIES = /* @__PURE__ */ new Set([
-  "display",
-  "flex-direction",
-  "flex-wrap",
-  "justify-content",
-  "align-items",
-  "align-content",
-  "place-content",
-  "place-items",
-  "row-gap",
-  "column-gap"
-]);
-function outerMergeSafe(sm) {
-  const norm = normalizer.normalizeStyleMap(sm);
-  for (const block of norm.blocks.values()) {
-    for (const decl of block.decls.values()) {
-      if (FLEX_CONTAINER_PROPERTIES.has(String(decl.property))) continue;
-      if (decl.inherited) continue;
-      return false;
-    }
-  }
-  return true;
-}
-function flexConflict(outer, inner) {
-  const a = normalizer.normalizeStyleMap(outer);
-  const b = normalizer.normalizeStyleMap(inner);
-  for (const [key, blockA] of a.blocks) {
-    const blockB = b.blocks.get(key);
-    if (!blockB) continue;
-    for (const [prop, declA] of blockA.decls) {
-      if (!FLEX_CONTAINER_PROPERTIES.has(String(prop))) continue;
-      const declB = blockB.decls.get(prop);
-      if (declB && declB.value !== declA.value) return true;
-    }
-  }
-  return false;
-}
-function extractFlexStyle(sm) {
-  const blocks = /* @__PURE__ */ new Map();
-  for (const [key, block] of sm.blocks) {
-    const decls = /* @__PURE__ */ new Map();
-    for (const [prop, decl] of block.decls) {
-      if (FLEX_CONTAINER_PROPERTIES.has(String(prop))) decls.set(prop, decl);
-    }
-    if (decls.size > 0) blocks.set(key, { condition: block.condition, decls });
-  }
-  return { blocks };
-}
-var isInnerFlex = and(
-  isElement("div"),
-  computed(DISPLAY_FLEX),
-  not(targetedByCombinator)
-);
-var nestedFlexMerge = definePattern({
-  name: "nested-flex-merge",
-  category: "flatten/nested-flex-merge",
-  safety: 2,
-  doc: {
-    title: "Merge nested flex containers",
-    summary: "A flex container whose only child is itself a flex container with non-conflicting flex properties is collapsed into one; the wrapper is removed and its flex declarations merge onto the surviving child.",
-    before: '<div style="display:flex;align-items:center;gap:8px"><div style="display:flex;flex-direction:column"/></div>',
-    after: '<div style="display:flex;flex-direction:column;align-items:center;gap:8px"/>',
-    safetyRationale: "The wrapper paints nothing, declares only flex-container/inheritable properties, carries no ref/handlers/dynamic children, and is not a combinator subject; the two containers do not conflict on any flex property, so the union is unambiguous and lossless."
-  },
-  match: {
-    tag: "div",
-    style: { display: "flex" },
-    onlyChild: "element",
-    paintsNothing: true
-  },
-  rewrite: (ctx, rw) => {
-    const outer = ctx.node;
-    const inner = ctx.onlyElementChild();
-    if (!inner) return null;
-    if (!isInnerFlex(inner, ctx)) return null;
-    const outerStyle = ctx.computed();
-    const innerStyle = ctx.computedOf(inner);
-    if (!outerMergeSafe(outerStyle)) return null;
-    if (flexConflict(outerStyle, innerStyle)) return null;
-    return [
-      // 1. Preserve inheritable values (color/font/…) by folding them onto the child first.
-      rw.foldInheritedStyles(outer, inner, { conditions: "all" }),
-      // 2. Transfer the wrapper's flex-container declarations onto the child (target-wins keeps the
-      //    child's value for any shared property — identical anyway, we proved non-conflict).
-      rw.mergeStyle(inner, null, extractFlexStyle(outerStyle), "target-wins"),
-      // 3. Remove the wrapper (structural-safe; hoists the child and preserves its IRNodeId).
-      rw.unwrap(outer)
-    ];
-  },
-  // Merging the outer flex container into the inner removes the outer's box, but a `display:flex`
-  // wrapper establishes a formatting context, so this is a `needs-verification` flatten that the
-  // conservative production gate (`'provably-safe'`) REVERTS — every case here is a no-match. The
-  // merge's op-level correctness (purity, id-preserving unwrap, opacity-barrier safety) is asserted
-  // by the invariant suite over every pattern.
-  test: {
-    noMatch: [
-      // The merge is real but not provably layout-neutral (the wrapper establishes a flex context),
-      // so under the conservative gate the nested containers are left in place.
-      '<div className="flex items-center gap-2" data-x="1"><div className="flex flex-col">X</div></div>',
-      // A non-flex wrapper does not match the flex-container signature → left unchanged anyway.
-      '<div className="block bg-blue-500"><div className="flex flex-col">X</div></div>'
-    ]
-  }
-});
-
-// ../patterns/src/library/flatten/nested-grid-merge.pattern.ts
-function baseConditionStyleMap2(decls) {
-  const map = /* @__PURE__ */ new Map();
-  for (const [prop, value] of decls) {
-    for (const decl of normalizer.normalizeDeclaration(prop, value, false)) {
-      map.set(decl.property, decl);
-    }
-  }
-  const block = { condition: BASE_CONDITION, decls: map };
-  const blocks = /* @__PURE__ */ new Map([[conditionKey(BASE_CONDITION), block]]);
-  return { blocks };
-}
-var DISPLAY_GRID = baseConditionStyleMap2([["display", "grid"]]);
-var GRID_CONTAINER_PROPERTIES = /* @__PURE__ */ new Set([
-  "display",
-  "grid-template-columns",
-  "grid-template-rows",
-  "grid-template-areas",
-  "grid-auto-columns",
-  "grid-auto-rows",
-  "grid-auto-flow",
-  "justify-content",
-  "align-content",
-  "place-content",
-  "justify-items",
-  "align-items",
-  "place-items",
-  "row-gap",
-  "column-gap"
-]);
-function outerMergeSafe2(sm) {
-  const norm = normalizer.normalizeStyleMap(sm);
-  for (const block of norm.blocks.values()) {
-    for (const decl of block.decls.values()) {
-      if (GRID_CONTAINER_PROPERTIES.has(String(decl.property))) continue;
-      if (decl.inherited) continue;
-      return false;
-    }
-  }
-  return true;
-}
-function gridConflict(outer, inner) {
-  const a = normalizer.normalizeStyleMap(outer);
-  const b = normalizer.normalizeStyleMap(inner);
-  for (const [key, blockA] of a.blocks) {
-    const blockB = b.blocks.get(key);
-    if (!blockB) continue;
-    for (const [prop, declA] of blockA.decls) {
-      if (!GRID_CONTAINER_PROPERTIES.has(String(prop))) continue;
-      const declB = blockB.decls.get(prop);
-      if (declB && declB.value !== declA.value) return true;
-    }
-  }
-  return false;
-}
-function extractGridStyle(sm) {
-  const blocks = /* @__PURE__ */ new Map();
-  for (const [key, block] of sm.blocks) {
-    const decls = /* @__PURE__ */ new Map();
-    for (const [prop, decl] of block.decls) {
-      if (GRID_CONTAINER_PROPERTIES.has(String(prop))) decls.set(prop, decl);
-    }
-    if (decls.size > 0) blocks.set(key, { condition: block.condition, decls });
-  }
-  return { blocks };
-}
-var isInnerGrid = and(
-  isElement("div"),
-  computed(DISPLAY_GRID),
-  not(targetedByCombinator)
-);
-var nestedGridMerge = definePattern({
-  name: "nested-grid-merge",
-  category: "flatten/nested-grid-merge",
-  safety: 2,
-  doc: {
-    title: "Merge nested grid containers",
-    summary: "A grid container whose only child is itself a grid container with non-conflicting grid properties is collapsed into one; the wrapper is removed and its grid declarations merge onto the surviving child.",
-    before: '<div style="display:grid;gap:8px"><div style="display:grid;grid-template-columns:1fr 1fr"/></div>',
-    after: '<div style="display:grid;grid-template-columns:1fr 1fr;gap:8px"/>',
-    safetyRationale: "The wrapper paints nothing, declares only grid-container/inheritable properties, carries no ref/handlers/dynamic children, and is not a combinator subject; the two containers do not conflict on any grid property, so the union is unambiguous and lossless."
-  },
-  match: {
-    tag: "div",
-    style: { display: "grid" },
-    onlyChild: "element",
-    paintsNothing: true
-  },
-  rewrite: (ctx, rw) => {
-    const outer = ctx.node;
-    const inner = ctx.onlyElementChild();
-    if (!inner) return null;
-    if (!isInnerGrid(inner, ctx)) return null;
-    const outerStyle = ctx.computed();
-    const innerStyle = ctx.computedOf(inner);
-    if (!outerMergeSafe2(outerStyle)) return null;
-    if (gridConflict(outerStyle, innerStyle)) return null;
-    return [
-      // 1. Preserve inheritable values (color/font/…) by folding them onto the child first.
-      rw.foldInheritedStyles(outer, inner, { conditions: "all" }),
-      // 2. Transfer the wrapper's grid-container declarations onto the child (target-wins keeps the
-      //    child's value for any shared property — identical anyway, we proved non-conflict).
-      rw.mergeStyle(inner, null, extractGridStyle(outerStyle), "target-wins"),
-      // 3. Remove the wrapper (structural-safe; hoists the child and preserves its IRNodeId).
-      rw.unwrap(outer)
-    ];
-  },
-  // Like its flex sibling, this merge removes the outer container's box, but a `display:grid` wrapper
-  // establishes a formatting context, so it is a `needs-verification` flatten that the conservative
-  // production gate (`'provably-safe'`) REVERTS — every case here is a no-match. Op-level correctness
-  // is asserted by the invariant suite over every pattern.
-  test: {
-    noMatch: [
-      // The merge is real but not provably layout-neutral (the wrapper establishes a grid context),
-      // so under the conservative gate the nested containers are left in place.
-      '<div className="grid gap-2" data-x="1"><div className="grid grid-cols-2">X</div></div>',
-      // A non-grid wrapper does not match the grid-container signature → left unchanged anyway.
-      '<div className="block bg-blue-500"><div className="grid grid-cols-2">X</div></div>'
-    ]
-  }
-});
-
-// ../patterns/src/library/flatten/passthrough-wrapper.pattern.ts
+// ../patterns/src/library/wrapper/passthrough-wrapper.pattern.ts
 function metaOf2(node) {
   const n = node;
   return n.kind === "element" ? n.meta : null;
 }
-function elementOf(node) {
-  const n = node;
-  return n.kind === "element" ? n : null;
-}
-var establishesContext = (node) => {
-  const m = metaOf2(node);
-  if (!m) return false;
-  return m.establishesBox || m.establishesFormattingContext || m.establishesStackingContext || m.isContainingBlock || m.declaresCustomProperties;
-};
-var hasSpreadAttrs2 = (node) => metaOf2(node)?.hasSpreadAttrs ?? false;
-var isComponentNode2 = (node) => metaOf2(node)?.isComponent ?? false;
-var hasOwnAttrs2 = (node) => {
-  const el = elementOf(node);
-  if (!el) return false;
-  return el.attrs.entries.size > 0 || el.attrs.spreads.length > 0;
-};
-var targetedByStructuralPseudo3 = (node, ctx) => {
-  const el = elementOf(node);
-  if (!el) return false;
-  if (el.meta.targetedByStructuralPseudo) return true;
-  return ctx.selectors.targetedByStructuralPseudo(el.id);
-};
-var passthroughWrapper = definePattern({
-  name: "passthrough-wrapper",
-  category: "flatten/passthrough-wrapper",
-  safety: 2,
-  doc: {
-    title: "Flatten passthrough wrapper",
-    summary: "A div with no own visual/box style, no attributes beyond an inert class, exactly one element child, and no opacity barriers is removed; its sole child is hoisted in its place.",
-    before: "<div><Child/></div>",
-    after: "<Child/>",
-    safetyRationale: "Wrapper paints nothing and establishes no layout/paint/var context, carries no ref/handlers/dynamic-children/html/spread/component identity, owns no targetable attrs, and is not a combinator/structural-pseudo subject (reparenting changes no match-set); inheritable styles are folded onto the child before removal."
-  },
-  match: {
-    tag: "div",
-    onlyChild: "element",
-    paintsNothing: true,
-    where: [
-      not(establishesContext),
-      not(hasOwnAttrs2),
-      not(hasDynamicClasses),
-      not(hasSpreadAttrs2),
-      not(isComponentNode2),
-      not(targetedByStructuralPseudo3)
-    ]
-  },
-  rewrite: { flattenInto: "child" },
-  test: {
-    cases: [
-      {
-        // A plain, style-free wrapper paints nothing and establishes no context → a provably-safe
-        // flatten under the conservative gate: the wrapper is removed and its sole child hoisted.
-        before: '<div><a className="bg-red-200">Link</a></div>',
-        after: '<a className="bg-red-200">Link</a>'
-      }
-    ],
-    noMatch: [
-      // A ref pins the wrapper's element identity (a hard opacity barrier) → not a passthrough.
-      '<div ref={rootRef}><a className="bg-red-200">Link</a></div>',
-      // A `display:flex` wrapper establishes a formatting context, so removing its box is NOT
-      // provably layout-neutral → the conservative gate leaves it in place.
-      '<div className="flex"><a className="bg-red-200">Link</a></div>'
-    ]
-  }
-});
-
-// ../patterns/src/library/flatten/redundant-fragment.pattern.ts
-function parentIsRedundantFragment(node, ctx) {
-  const el = node;
-  if (el.kind !== "element") return false;
-  const parentId = el.parent;
-  if (parentId == null) return false;
-  const parent = ctx.doc.nodes.get(parentId);
-  if (!parent || parent.kind !== "fragment") return false;
-  if (parent.parent == null) return false;
-  if (parent.children.length !== 1) return false;
-  const m = parent.meta;
-  if (m.hasKey || m.hasRef || m.hasEventHandlers || m.hasDynamicChildren || m.hasDangerousHtml || m.hasSpreadAttrs || m.isComponent) {
-    return false;
-  }
-  if (m.targetedByCombinator || m.targetedByStructuralPseudo) return false;
-  const fid = parentId;
-  if (ctx.selectors.targetedByCombinator(fid) || ctx.selectors.targetedByStructuralPseudo(fid)) {
-    return false;
-  }
-  if (ctx.selectors.reparentImpact(fid).size > 0) return false;
-  return true;
-}
-var redundantFragment = definePattern({
-  name: "redundant-fragment",
-  category: "flatten/redundant-fragment",
-  safety: 1,
-  doc: {
-    title: "Flatten redundant single-child fragment",
-    summary: "A fragment whose only child is a single node is removed; the child is spliced up into the fragment's slot, preserving its IRNodeId, siblings, attributes and the CSS cascade.",
-    before: "<><Child/></>",
-    after: "<Child/>",
-    safetyRationale: "A fragment paints nothing and renders no box; with exactly one child its removal changes no sibling/structural-pseudo match-set. Keyed fragments and fragments carrying ref/handlers/dynamic-children/raw-html/spread are excluded as opacity barriers."
-  },
-  match: parentIsRedundantFragment,
-  rewrite: (ctx, rw) => {
-    const parentId = ctx.node.parent;
-    if (parentId == null) return null;
-    const fragment = ctx.doc.nodes.get(parentId);
-    if (!fragment || fragment.kind !== "fragment") return null;
-    return [rw.unwrap(fragment)];
-  },
-  test: {
-    cases: [
-      {
-        // A fragment renders no box, so unwrapping a single-child fragment is always layout-identical
-        // → a provably-safe flatten: the child is spliced up into the fragment's slot.
-        before: '<><span className="bg-red-200">Hi</span></>',
-        after: '<span className="bg-red-200">Hi</span>'
-      }
-    ],
-    noMatch: [
-      // Two children ⇒ not a single-child fragment, so the fragment is load-bearing and stays.
-      '<><span className="bg-red-200">A</span><span className="bg-green-200">B</span></>'
-    ]
-  }
-});
-
-// ../patterns/src/library/flatten/redundant-inline-wrapper.pattern.ts
-function asEl3(node) {
-  const n = node;
-  return n.kind === "element" ? n : null;
-}
-function metaOf3(node) {
-  return asEl3(node)?.meta ?? null;
-}
-var establishesContext2 = (node) => {
-  const m = metaOf3(node);
-  if (!m) return false;
-  return m.establishesBox || m.establishesFormattingContext || m.establishesStackingContext || m.isContainingBlock || m.declaresCustomProperties;
-};
-var hasSpreadAttrs3 = (node) => metaOf3(node)?.hasSpreadAttrs ?? false;
-var isComponentNode3 = (node) => metaOf3(node)?.isComponent ?? false;
-var hasOwnAttrs3 = (node) => {
-  const el = asEl3(node);
-  if (!el) return false;
-  return el.attrs.entries.size > 0 || el.attrs.spreads.length > 0;
-};
-var targetedByStructuralPseudo4 = (node, ctx) => {
-  const el = asEl3(node);
-  if (!el) return false;
-  if (el.meta.targetedByStructuralPseudo) return true;
-  return ctx.selectors.targetedByStructuralPseudo(el.id);
-};
-var DISPLAY3 = "display";
-var hasNonInlineDisplay = (node, ctx) => {
-  const el = asEl3(node);
-  if (!el) return false;
-  const sm = ctx.computedOf(el) ?? el.computed;
-  for (const block of sm.blocks.values()) {
-    const decl = block.decls.get(DISPLAY3);
-    if (decl && String(decl.value) !== "inline") return true;
-  }
-  return false;
-};
-var redundantInlineWrapper = definePattern({
-  name: "redundant-inline-wrapper",
-  category: "flatten/redundant-inline-wrapper",
-  safety: 2,
-  doc: {
-    title: "Flatten redundant inline wrapper",
-    summary: "An inline span with no own visual/box style, no attributes beyond an inert class, exactly one element child, and no opacity barriers is removed; its sole child is hoisted in its place.",
-    before: "<span><Child/></span>",
-    after: "<Child/>",
-    safetyRationale: "An empty inline box paints nothing and establishes no layout/paint/var context; with the inline default display and a single element child its removal changes no paint and no flow. The span carries no ref/handlers/dynamic-children/html/spread/component identity, owns no targetable attrs, and is not a combinator/structural-pseudo subject; inheritable styles are folded onto the child before removal."
-  },
-  match: {
-    tag: "span",
-    onlyChild: "element",
-    paintsNothing: true,
-    where: [
-      not(hasNonInlineDisplay),
-      not(establishesContext2),
-      not(hasOwnAttrs3),
-      not(hasDynamicClasses),
-      not(hasSpreadAttrs3),
-      not(isComponentNode3),
-      not(targetedByStructuralPseudo4)
-    ]
-  },
-  rewrite: { flattenInto: "child" },
-  test: {
-    cases: [
-      {
-        // An empty inline span paints nothing and establishes no context → a provably-safe flatten:
-        // the span is removed and its sole child hoisted in place.
-        before: '<span><a className="text-blue-500">Link</a></span>',
-        after: '<a className="text-blue-500">Link</a>'
-      }
-    ],
-    noMatch: [
-      // A ref pins the span's element identity (a hard opacity barrier) → not a passthrough.
-      '<span ref={spanRef}><a className="text-blue-500">Link</a></span>',
-      // The span paints its own background (own visual style) → kept.
-      '<span className="bg-green-200"><a className="text-blue-500">Link</a></span>',
-      // Non-inline display (inline-block) participates in layout differently → kept.
-      '<span className="inline-block"><a className="text-blue-500">Link</a></span>'
-    ]
-  }
-});
-
-// ../patterns/src/library/compress/border-radius-shorthand.pattern.ts
-var CORNERS = [
-  "border-top-left-radius",
-  "border-top-right-radius",
-  "border-bottom-right-radius",
-  "border-bottom-left-radius"
-];
-var CORNER_SET = new Set(CORNERS);
-var BASE_KEY = conditionKey(BASE_CONDITION);
-var RADIUS = "border-radius";
-var NON_COLLAPSIBLE_VALUES = /* @__PURE__ */ new Set([
-  "initial",
-  "inherit",
-  "unset",
-  "revert",
-  "revert-layer"
-]);
-function analyzeRadius(sm) {
-  const block = sm.blocks.get(BASE_KEY);
-  if (!block) return null;
-  const corners = [];
-  for (const corner of CORNERS) {
-    const decl = block.decls.get(corner);
-    if (!decl) return null;
-    corners.push(decl);
-  }
-  const important = corners[0].important;
-  if (!corners.every((d) => d.important === important)) return null;
-  const value = String(corners[0].value);
-  if (NON_COLLAPSIBLE_VALUES.has(value)) return null;
-  if (!corners.every((d) => String(d.value) === value)) return null;
-  const relative = corners.some((d) => d.relativeToParent);
-  return { value, important, relative };
-}
-function withFoldedRadius(sm, fold) {
-  const blocks = /* @__PURE__ */ new Map();
-  for (const [key, block] of sm.blocks) {
-    if (key !== BASE_KEY) {
-      blocks.set(key, block);
-      continue;
-    }
-    const decls = /* @__PURE__ */ new Map();
-    for (const [prop, decl] of block.decls) {
-      if (CORNER_SET.has(String(prop))) continue;
-      decls.set(prop, decl);
-    }
-    const shorthand = {
-      property: RADIUS,
-      value: fold.value,
-      important: fold.important,
-      relativeToParent: fold.relative,
-      inherited: false
-      // border-radius is never inherited
-    };
-    decls.set(shorthand.property, shorthand);
-    blocks.set(key, { condition: block.condition, decls });
-  }
-  return { blocks };
-}
-var borderRadiusShorthand = definePattern({
-  name: "border-radius-shorthand",
-  category: "compress/border-radius-shorthand",
-  safety: 1,
-  doc: {
-    title: "Collapse equal corner radii into border-radius",
-    summary: "An element whose four corner radii (border-*-radius longhands) are all equal is rewritten to the single Tailwind rounded-* utility (border-radius === the four equal corners).",
-    before: '<div class="rounded-tl-lg rounded-tr-lg rounded-br-lg rounded-bl-lg"/>',
-    after: '<div class="rounded-lg"/>',
-    safetyRationale: "`border-radius` is value-identical to four equal corner radii \u2014 a class-only change. It is safe even on an element with a ref, event handler, dynamic child, or dangerouslySetInnerHTML \u2014 a className rewrite touches none of them; only a dynamic/opaque class list or a combinator-subject class is excluded, so no behaviour or project selector is disturbed."
-  },
-  rewrite: {
-    rewriteClasses(computed2) {
-      const fold = analyzeRadius(computed2);
-      return fold ? withFoldedRadius(computed2, fold) : null;
-    }
-  },
-  test: {
-    cases: [
-      {
-        // The four equal corner longhands collapse to a `border-radius` decl at the IR level; the
-        // minimizing reverse-emit then picks the single shortest utility (`rounded-lg`) that reproduces
-        // it, replacing the four `rounded-{tl,tr,br,bl}-lg` tokens. `bg-red-200` is preserved.
-        before: '<div className="rounded-tl-lg rounded-tr-lg rounded-br-lg rounded-bl-lg bg-red-200">box</div>',
-        after: '<div className="bg-red-200 rounded-lg">box</div>'
-      }
-    ],
-    // Corners differ (top corners vs bottom corners) → no all-equal collapse.
-    noMatch: ['<div className="rounded-t-lg rounded-b-sm bg-red-200">box</div>']
-  }
-});
-
-// ../patterns/src/library/compress/border-shorthand.pattern.ts
-var WIDTH_SIDES = [
-  "border-top-width",
-  "border-right-width",
-  "border-bottom-width",
-  "border-left-width"
-];
-var WIDTH_SIDE_SET = new Set(WIDTH_SIDES);
-var BASE_KEY2 = conditionKey(BASE_CONDITION);
-var BORDER_WIDTH = "border-width";
-function analyzeWidth(sm) {
-  const block = sm.blocks.get(BASE_KEY2);
-  if (!block) return null;
-  const sides = [];
-  for (const side of WIDTH_SIDES) {
-    const decl = block.decls.get(side);
-    if (!decl) return null;
-    sides.push(decl);
-  }
-  const [top, right, bottom, left] = sides;
-  if (!(top.important === right.important && right.important === bottom.important && bottom.important === left.important)) {
-    return null;
-  }
-  const tv = String(top.value);
-  const rv = String(right.value);
-  const bv = String(bottom.value);
-  const lv = String(left.value);
-  if (tv !== bv || lv !== rv) return null;
-  const value = tv === lv ? tv : `${tv} ${lv}`;
-  const relative = sides.some((d) => d.relativeToParent);
-  return { value, important: top.important, relative };
-}
-function withFoldedWidth(sm, fold) {
-  const blocks = /* @__PURE__ */ new Map();
-  for (const [key, block] of sm.blocks) {
-    if (key !== BASE_KEY2) {
-      blocks.set(key, block);
-      continue;
-    }
-    const decls = /* @__PURE__ */ new Map();
-    for (const [prop, decl] of block.decls) {
-      if (WIDTH_SIDE_SET.has(String(prop))) continue;
-      decls.set(prop, decl);
-    }
-    const shorthand = {
-      property: BORDER_WIDTH,
-      value: fold.value,
-      important: fold.important,
-      relativeToParent: fold.relative,
-      inherited: false
-      // border-width is never inherited
-    };
-    decls.set(shorthand.property, shorthand);
-    blocks.set(key, { condition: block.condition, decls });
-  }
-  return { blocks };
-}
-var borderShorthand = definePattern({
-  name: "border-shorthand",
-  category: "compress/border-shorthand",
-  safety: 1,
-  doc: {
-    title: "Collapse border-width longhands to shorthand",
-    summary: "Equal border width on all four sides (or matching x/y pairs) expressed as separate longhand declarations is collapsed to the shortest equivalent border-width shorthand (border-* / border-x-* border-y-*).",
-    before: '<div class="border-t-2 border-r-2 border-b-2 border-l-2"/>',
-    after: '<div class="border-2"/>',
-    safetyRationale: "A value-preserving re-serialization of the same computed border widths (style/color longhands untouched) \u2014 a class-only change. It is safe even on an element with a ref, event handler, dynamic child, or dangerouslySetInnerHTML \u2014 a className rewrite touches none of them; only a dynamic/opaque class list or a combinator-subject class is excluded, so no behaviour or project selector is disturbed."
-  },
-  rewrite: {
-    rewriteClasses(computed2) {
-      const fold = analyzeWidth(computed2);
-      return fold ? withFoldedWidth(computed2, fold) : null;
-    }
-  },
-  test: {
-    cases: [
-      {
-        // The four equal width longhands collapse to a `border-width` shorthand at the IR level, and the
-        // minimizing reverse-emit picks the single shortest utility (`border-2`) that reproduces it,
-        // replacing the four `border-{t,r,b,l}-2` tokens. `bg-red-200` is preserved.
-        before: '<div className="border-t-2 border-r-2 border-b-2 border-l-2 bg-red-200">box</div>',
-        after: '<div className="bg-red-200 border-2">box</div>'
-      }
-    ],
-    // Asymmetric widths (top != bottom) cannot fold into a shorthand.
-    noMatch: ['<div className="border-t-2 border-r-4 border-b-8 border-l-4 bg-red-200">box</div>']
-  }
-});
-
-// ../patterns/src/library/compress/dedupe-classes.pattern.ts
-function findRedundantClasses(computed2) {
-  const winners = /* @__PURE__ */ new Set();
-  const shadowed = /* @__PURE__ */ new Set();
-  for (const block of computed2.blocks.values()) {
-    for (const decl of block.decls.values()) {
-      if (decl.origin && decl.origin.kind === "class") winners.add(decl.origin.className);
-      for (const o of decl.shadowed ?? []) {
-        if (o.kind === "class") shadowed.add(o.className);
-      }
-    }
-  }
-  return { winners, shadowed };
-}
-var dedupeClasses = definePattern({
-  name: "dedupe-classes",
-  category: "compress/dedupe-classes",
-  safety: 1,
-  doc: {
-    title: "Dedupe fully-overridden class tokens",
-    summary: "Drops class tokens whose every declaration is overridden by a later token resolving to the same property; the surviving token set produces a byte-for-byte identical computed style.",
-    before: '<p class="text-sm text-lg" />',
-    after: '<p class="text-lg" />',
-    safetyRationale: "A fully-overridden token contributes nothing to the computed style in any condition, so removing it changes no pixels \u2014 a class-only change. It is safe even on an element with a ref, event handler, dynamic child, or dangerouslySetInnerHTML \u2014 a className rewrite touches none of them; only a dynamic/opaque class list or a combinator-subject class is excluded, so no behaviour or project selector is disturbed."
-  },
-  rewrite: {
-    dropClasses(computed2, ctx) {
-      const { winners, shadowed } = findRedundantClasses(computed2);
-      const drop = /* @__PURE__ */ new Set();
-      for (const cls of shadowed) {
-        if (winners.has(cls)) continue;
-        if (!ctx.resolver.selectorUsage(cls).droppable) continue;
-        drop.add(cls);
-      }
-      return drop;
-    }
-  },
-  test: {
-    cases: [
-      {
-        // `text-sm` is fully overridden by `text-lg` (both set font-size + line-height). The resolver
-        // records that shadowing in provenance and reports the Tailwind utility as droppable, so the
-        // pattern drops `text-sm`; the reverse-emit then re-derives the minimal set (`text-lg`).
-        before: '<p className="text-sm text-lg">Hi</p>',
-        after: '<p className="text-lg">Hi</p>'
-      }
-    ],
-    // Both tokens win a distinct property (no full override) → nothing to dedupe.
-    noMatch: ['<p className="text-lg font-bold">Hi</p>']
-  }
-});
-
-// ../patterns/src/library/compress/gap-shorthand.pattern.ts
-var ROW_GAP = "row-gap";
-var COLUMN_GAP = "column-gap";
-var GAP = "gap";
-var BASE_KEY3 = conditionKey(BASE_CONDITION);
-function withGapShorthand(sm, gapDecl) {
-  const blocks = /* @__PURE__ */ new Map();
-  for (const [key, block] of sm.blocks) {
-    if (key !== BASE_KEY3) {
-      blocks.set(key, block);
-      continue;
-    }
-    const decls = /* @__PURE__ */ new Map();
-    for (const [prop, decl] of block.decls) {
-      if (prop === ROW_GAP || prop === COLUMN_GAP) continue;
-      decls.set(prop, decl);
-    }
-    decls.set(gapDecl.property, gapDecl);
-    blocks.set(key, { condition: block.condition, decls });
-  }
-  return { blocks };
-}
-var gapShorthand = definePattern({
-  name: "gap-shorthand",
-  category: "compress/gap-shorthand",
-  safety: 1,
-  doc: {
-    title: "Collapse equal row/column gap into the `gap` shorthand",
-    summary: "An element whose computed row-gap and column-gap are equal has the two axis longhands collapsed into a single-value `gap` shorthand (Tailwind gap-x-* gap-y-* \u2192 gap-*).",
-    before: '<div style="row-gap:16px;column-gap:16px"/>',
-    after: '<div style="gap:16px"/>',
-    safetyRationale: "A single-value `gap` is value-identical to an equal row-gap+column-gap pair \u2014 a class-only change. It is safe even on an element with a ref, event handler, dynamic child, or dangerouslySetInnerHTML \u2014 a className rewrite touches none of them; only a dynamic/opaque class list or a combinator-subject class is excluded, so no behaviour or project selector is disturbed."
-  },
-  rewrite: {
-    rewriteClasses(computed2) {
-      const base = computed2.blocks.get(BASE_KEY3);
-      if (!base) return null;
-      const rowGap = base.decls.get(ROW_GAP);
-      const colGap = base.decls.get(COLUMN_GAP);
-      if (!rowGap || !colGap) return null;
-      if (rowGap.important !== colGap.important) return null;
-      if (rowGap.value !== colGap.value) return null;
-      const gapDecl = {
-        property: GAP,
-        value: rowGap.value,
-        important: rowGap.important,
-        relativeToParent: rowGap.relativeToParent || colGap.relativeToParent,
-        inherited: false
-        // gap is not an inherited property
-      };
-      return withGapShorthand(computed2, gapDecl);
-    }
-  },
-  test: {
-    cases: [
-      {
-        // Equal row/column gap collapse to a `gap` decl at the IR level; the minimizing reverse-emit
-        // re-expands `gap` to row-gap+column-gap and picks the single utility covering both (`gap-4`),
-        // replacing the `gap-x-4`+`gap-y-4` pair. `bg-red-200` is preserved.
-        before: '<div className="gap-x-4 gap-y-4 bg-red-200">box</div>',
-        after: '<div className="bg-red-200 gap-4">box</div>'
-      }
-    ],
-    // Unequal axes (row-gap != column-gap) have no single-value `gap` equivalent → not collapsed.
-    noMatch: ['<div className="gap-x-2 gap-y-4 bg-red-200">box</div>']
-  }
-});
-
-// ../patterns/src/library/compress/inset-shorthand.pattern.ts
-var TOP = "top";
-var RIGHT = "right";
-var BOTTOM = "bottom";
-var LEFT = "left";
-var INSET = "inset";
-var INSET_BLOCK = "inset-block";
-var INSET_INLINE = "inset-inline";
-function sameSide(a, b) {
-  return a !== void 0 && b !== void 0 && a.value === b.value && a.important === b.important;
-}
-function asProperty(src, property) {
-  return { ...src, property, inherited: normalizer.inherited.isInherited(property) };
-}
-function withBaseDecls(src, baseDecls) {
-  const blocks = /* @__PURE__ */ new Map();
-  for (const [key, block] of src.blocks) {
-    const decls = key === BASE_CONDITION_KEY ? baseDecls : new Map(block.decls);
-    blocks.set(key, { condition: block.condition, decls });
-  }
-  return { blocks };
-}
-var insetShorthand = definePattern({
-  name: "inset-shorthand",
-  category: "compress/inset-shorthand",
-  safety: 2,
-  doc: {
-    title: "Compress inset longhands into a shorthand",
-    summary: "top/right/bottom/left set to one value collapse to `inset`; a matching top/bottom or left/right pair collapses to `inset-block` / `inset-inline` (Tailwind inset-y / inset-x).",
-    before: '<div style="top:10px;right:10px;bottom:10px;left:10px"/>',
-    after: '<div style="inset:10px"/>',
-    safetyRationale: "Meaning-preserving inset shorthand compaction \u2014 a class-only change. It is safe even on an element with a ref, event handler, dynamic child, or dangerouslySetInnerHTML \u2014 a className rewrite touches none of them; only a dynamic/opaque class list or a combinator-subject class is excluded, so no behaviour or project selector is disturbed."
-  },
-  rewrite: {
-    rewriteClasses(computed2) {
-      const base = computed2.blocks.get(BASE_CONDITION_KEY);
-      if (!base) return null;
-      const top = base.decls.get(TOP);
-      const right = base.decls.get(RIGHT);
-      const bottom = base.decls.get(BOTTOM);
-      const left = base.decls.get(LEFT);
-      const next = new Map(base.decls);
-      if (top && sameSide(top, right) && sameSide(top, bottom) && sameSide(top, left)) {
-        next.delete(TOP);
-        next.delete(RIGHT);
-        next.delete(BOTTOM);
-        next.delete(LEFT);
-        next.set(INSET, asProperty(top, INSET));
-      } else {
-        let collapsed = false;
-        if (sameSide(top, bottom)) {
-          next.delete(TOP);
-          next.delete(BOTTOM);
-          next.set(INSET_BLOCK, asProperty(top, INSET_BLOCK));
-          collapsed = true;
-        }
-        if (sameSide(left, right)) {
-          next.delete(LEFT);
-          next.delete(RIGHT);
-          next.set(INSET_INLINE, asProperty(left, INSET_INLINE));
-          collapsed = true;
-        }
-        if (!collapsed) return null;
-      }
-      return withBaseDecls(computed2, next);
-    }
-  },
-  test: {
-    cases: [
-      {
-        // The four equal inset longhands collapse to an `inset` shorthand at the IR level; the
-        // minimizing reverse-emit expands it back to top/right/bottom/left and picks the single utility
-        // covering all four (`inset-0`), replacing the four physical-side tokens. `bg-red-200` survives.
-        before: '<div className="top-0 right-0 bottom-0 left-0 bg-red-200">box</div>',
-        after: '<div className="bg-red-200 inset-0">box</div>'
-      }
-    ],
-    // No matching inset pair (all four distinct) → nothing collapses.
-    noMatch: ['<div className="top-0 right-1 bottom-2 left-3 bg-red-200">box</div>']
-  }
-});
-
-// ../patterns/src/library/compress/margin-shorthand.pattern.ts
-var MARGIN_SIDES = [
-  "margin-top",
-  "margin-right",
-  "margin-bottom",
-  "margin-left"
-];
-var MARGIN_SIDE_SET = new Set(MARGIN_SIDES);
-var BASE_KEY4 = conditionKey(BASE_CONDITION);
-function collapseMarginValue(top, right, bottom, left) {
-  if (right === left) {
-    if (top === bottom) {
-      return top === right ? top : `${top} ${right}`;
-    }
-    return `${top} ${right} ${bottom}`;
-  }
-  return `${top} ${right} ${bottom} ${left}`;
-}
-function withFoldedMargin(sm, marginDecl) {
-  const blocks = /* @__PURE__ */ new Map();
-  for (const [key, block] of sm.blocks) {
-    if (key !== BASE_KEY4) {
-      blocks.set(key, block);
-      continue;
-    }
-    const decls = /* @__PURE__ */ new Map();
-    for (const [prop, decl] of block.decls) {
-      if (!MARGIN_SIDE_SET.has(String(prop))) decls.set(prop, decl);
-    }
-    decls.set(marginDecl.property, marginDecl);
-    blocks.set(key, { condition: block.condition, decls });
-  }
-  return { blocks };
-}
-var marginShorthand = definePattern({
-  name: "margin-shorthand",
-  category: "compress/margin-shorthand",
-  safety: 2,
-  doc: {
-    title: "Compress margin longhands into the `margin` shorthand",
-    summary: "An element with margin-top/right/bottom/left all set has them collapsed into the shortest legal `margin` shorthand (the m / mx / my forms); meaning is preserved, declaration count drops.",
-    before: '<div style="margin-top:8px;margin-right:8px;margin-bottom:8px;margin-left:8px"/>',
-    after: '<div style="margin:8px"/>',
-    safetyRationale: "A pure representation change of the same computed margins (no pixels move) \u2014 a class-only change. It is safe even on an element with a ref, event handler, dynamic child, or dangerouslySetInnerHTML \u2014 a className rewrite touches none of them; only a dynamic/opaque class list or a combinator-subject class is excluded, so no behaviour or project selector is disturbed."
-  },
-  rewrite: {
-    rewriteClasses(computed2) {
-      const base = computed2.blocks.get(BASE_KEY4);
-      if (!base) return null;
-      const sides = MARGIN_SIDES.map((p) => base.decls.get(p));
-      if (sides.some((d) => d === void 0)) return null;
-      const [mt, mr, mb, ml] = sides;
-      if (mt.important || mr.important || mb.important || ml.important) return null;
-      const value = collapseMarginValue(
-        String(mt.value),
-        String(mr.value),
-        String(mb.value),
-        String(ml.value)
-      );
-      const marginDecl = {
-        property: "margin",
-        value,
-        important: false,
-        relativeToParent: mt.relativeToParent || mr.relativeToParent || mb.relativeToParent || ml.relativeToParent,
-        inherited: false
-        // margin is not an inherited property
-      };
-      return withFoldedMargin(computed2, marginDecl);
-    }
-  },
-  test: {
-    cases: [
-      {
-        // The four equal margin longhands collapse to a `margin` shorthand at the IR level, and the
-        // minimizing reverse-emit picks the single shortest utility (`m-2`) reproducing it, replacing
-        // the four `m{t,r,b,l}-2` tokens. `bg-red-200` is preserved.
-        before: '<div className="mt-2 mr-2 mb-2 ml-2 bg-red-200">box</div>',
-        after: '<div className="bg-red-200 m-2">box</div>'
-      }
-    ],
-    // Only two margin sides set → the four-longhand `margin` collapse does not apply.
-    noMatch: ['<div className="mt-2 mb-2 bg-red-200">box</div>']
-  }
-});
-
-// ../patterns/src/library/compress/overflow-shorthand.pattern.ts
-var OVERFLOW_X = "overflow-x";
-var OVERFLOW_Y = "overflow-y";
-var OVERFLOW = "overflow";
-var BASE_KEY5 = conditionKey(BASE_CONDITION);
-function withOverflowShorthand(sm, overflowDecl) {
-  const blocks = /* @__PURE__ */ new Map();
-  for (const [key, block] of sm.blocks) {
-    if (key !== BASE_KEY5) {
-      blocks.set(key, block);
-      continue;
-    }
-    const decls = /* @__PURE__ */ new Map();
-    for (const [prop, decl] of block.decls) {
-      if (prop === OVERFLOW_X || prop === OVERFLOW_Y) continue;
-      decls.set(prop, decl);
-    }
-    decls.set(overflowDecl.property, overflowDecl);
-    blocks.set(key, { condition: block.condition, decls });
-  }
-  return { blocks };
-}
-var overflowShorthand = definePattern({
-  name: "overflow-shorthand",
-  category: "compress/overflow-shorthand",
-  safety: 1,
-  doc: {
-    title: "Collapse equal overflow axes into the `overflow` shorthand",
-    summary: "An element whose computed overflow-x and overflow-y are equal has the two axis longhands collapsed into a single `overflow` shorthand (Tailwind overflow-x-* overflow-y-* \u2192 overflow-*).",
-    before: '<div style="overflow-x:auto;overflow-y:auto"/>',
-    after: '<div style="overflow:auto"/>',
-    safetyRationale: "A single-keyword `overflow` is value-identical to equal overflow-x+overflow-y \u2014 a class-only change. It is safe even on an element with a ref, event handler, dynamic child, or dangerouslySetInnerHTML \u2014 a className rewrite touches none of them; only a dynamic/opaque class list or a combinator-subject class is excluded, so no behaviour or project selector is disturbed."
-  },
-  rewrite: {
-    rewriteClasses(computed2) {
-      const base = computed2.blocks.get(BASE_KEY5);
-      if (!base) return null;
-      const overflowX = base.decls.get(OVERFLOW_X);
-      const overflowY = base.decls.get(OVERFLOW_Y);
-      if (!overflowX || !overflowY) return null;
-      if (overflowX.important !== overflowY.important) return null;
-      if (overflowX.value !== overflowY.value) return null;
-      const overflowDecl = {
-        property: OVERFLOW,
-        value: overflowX.value,
-        important: overflowX.important,
-        relativeToParent: overflowX.relativeToParent || overflowY.relativeToParent,
-        inherited: false
-        // overflow is not an inherited property
-      };
-      return withOverflowShorthand(computed2, overflowDecl);
-    }
-  },
-  test: {
-    cases: [
-      {
-        // Equal overflow axes collapse to an `overflow` decl at the IR level; the minimizing
-        // reverse-emit picks the single utility covering both (`overflow-auto`), replacing the
-        // `overflow-x-auto`+`overflow-y-auto` pair. `bg-red-200` is preserved.
-        before: '<div className="overflow-x-auto overflow-y-auto bg-red-200">box</div>',
-        after: '<div className="bg-red-200 overflow-auto">box</div>'
-      }
-    ],
-    // Mismatched axes (overflow-x != overflow-y) have no single-keyword equivalent → not collapsed.
-    noMatch: ['<div className="overflow-x-auto overflow-y-hidden bg-red-200">box</div>']
-  }
-});
-
-// ../patterns/src/library/compress/overscroll-behavior-shorthand.pattern.ts
-var OVERSCROLL_X = "overscroll-behavior-x";
-var OVERSCROLL_Y = "overscroll-behavior-y";
-var OVERSCROLL = "overscroll-behavior";
-var BASE_KEY6 = conditionKey(BASE_CONDITION);
-var NON_COLLAPSIBLE_VALUES2 = /* @__PURE__ */ new Set([
-  "initial",
-  "inherit",
-  "unset",
-  "revert",
-  "revert-layer"
-]);
-function withOverscrollShorthand(sm, shorthand) {
-  const blocks = /* @__PURE__ */ new Map();
-  for (const [key, block] of sm.blocks) {
-    if (key !== BASE_KEY6) {
-      blocks.set(key, block);
-      continue;
-    }
-    const decls = /* @__PURE__ */ new Map();
-    for (const [prop, decl] of block.decls) {
-      if (prop === OVERSCROLL_X || prop === OVERSCROLL_Y) continue;
-      decls.set(prop, decl);
-    }
-    decls.set(shorthand.property, shorthand);
-    blocks.set(key, { condition: block.condition, decls });
-  }
-  return { blocks };
-}
-var overscrollBehaviorShorthand = definePattern({
-  name: "overscroll-behavior-shorthand",
-  category: "compress/overscroll-behavior-shorthand",
-  safety: 1,
-  doc: {
-    title: "Collapse equal overscroll-behavior axes into overscroll-behavior",
-    summary: "An element whose computed overscroll-behavior-x and overscroll-behavior-y are equal has the two axis longhands collapsed into a single `overscroll-behavior` shorthand (Tailwind overscroll-x-* overscroll-y-* \u2192 overscroll-*).",
-    before: '<div style="overscroll-behavior-x:contain;overscroll-behavior-y:contain"/>',
-    after: '<div class="overscroll-contain"/>',
-    safetyRationale: "`overscroll-behavior` is value-identical to an equal x+y axis pair \u2014 a class-only change. It is safe even on an element with a ref, event handler, dynamic child, or dangerouslySetInnerHTML \u2014 a className rewrite touches none of them; only a dynamic/opaque class list or a combinator-subject class is excluded, so no behaviour or project selector is disturbed."
-  },
-  rewrite: {
-    rewriteClasses(computed2) {
-      const base = computed2.blocks.get(BASE_KEY6);
-      if (!base) return null;
-      const x = base.decls.get(OVERSCROLL_X);
-      const y = base.decls.get(OVERSCROLL_Y);
-      if (!x || !y) return null;
-      if (x.important !== y.important) return null;
-      const value = String(x.value);
-      if (NON_COLLAPSIBLE_VALUES2.has(value)) return null;
-      if (value !== String(y.value)) return null;
-      const shorthand = {
-        property: OVERSCROLL,
-        value: x.value,
-        important: x.important,
-        relativeToParent: x.relativeToParent || y.relativeToParent,
-        inherited: false
-        // overscroll-behavior is not an inherited property
-      };
-      return withOverscrollShorthand(computed2, shorthand);
-    }
-  },
-  test: {
-    cases: [
-      {
-        // Equal x/y axes collapse to an `overscroll-behavior` decl at the IR level; the minimizing
-        // reverse-emit picks the single utility covering both (`overscroll-contain`), replacing the
-        // `overscroll-x-contain`+`overscroll-y-contain` pair. `bg-red-200` is preserved.
-        before: '<div className="overscroll-x-contain overscroll-y-contain bg-red-200">box</div>',
-        after: '<div className="bg-red-200 overscroll-contain">box</div>'
-      }
-    ],
-    // Axes differ (x != y) → no equal-axis collapse.
-    noMatch: ['<div className="overscroll-x-contain overscroll-y-auto bg-red-200">box</div>']
-  }
-});
-
-// ../patterns/src/library/compress/padding-shorthand.pattern.ts
-var PADDING_SIDES = [
-  "padding-top",
-  "padding-right",
-  "padding-bottom",
-  "padding-left"
-];
-var PADDING_SIDE_SET = new Set(PADDING_SIDES);
-var BASE_KEY7 = conditionKey(BASE_CONDITION);
-function analyzePadding(sm) {
-  const block = sm.blocks.get(BASE_KEY7);
-  if (!block) return null;
-  const sides = [];
-  for (const side of PADDING_SIDES) {
-    const decl = block.decls.get(side);
-    if (!decl) return null;
-    sides.push(decl);
-  }
-  const [top, right, bottom, left] = sides;
-  if (!(top.important === right.important && right.important === bottom.important && bottom.important === left.important)) {
-    return null;
-  }
-  const tv = String(top.value);
-  const rv = String(right.value);
-  const bv = String(bottom.value);
-  const lv = String(left.value);
-  if (tv !== bv || lv !== rv) return null;
-  const value = tv === lv ? tv : `${tv} ${lv}`;
-  const relative = sides.some((d) => d.relativeToParent);
-  return { value, important: top.important, relative };
-}
-function withFoldedPadding(sm, fold) {
-  const blocks = /* @__PURE__ */ new Map();
-  for (const [key, block] of sm.blocks) {
-    if (key !== BASE_KEY7) {
-      blocks.set(key, block);
-      continue;
-    }
-    const decls = /* @__PURE__ */ new Map();
-    for (const [prop, decl] of block.decls) {
-      if (PADDING_SIDE_SET.has(String(prop))) continue;
-      decls.set(prop, decl);
-    }
-    const shorthand = {
-      property: "padding",
-      value: fold.value,
-      important: fold.important,
-      relativeToParent: fold.relative,
-      inherited: false
-      // padding is never inherited
-    };
-    decls.set(shorthand.property, shorthand);
-    blocks.set(key, { condition: block.condition, decls });
-  }
-  return { blocks };
-}
-var paddingShorthand = definePattern({
-  name: "padding-shorthand",
-  category: "compress/padding-shorthand",
-  safety: 1,
-  doc: {
-    title: "Collapse padding longhands to shorthand",
-    summary: "Equal padding on all four sides (or matching x/y pairs) expressed as separate longhand declarations is collapsed to the shortest equivalent padding shorthand (p-* / px-* py-*).",
-    before: '<div class="pt-4 pr-4 pb-4 pl-4"/>',
-    after: '<div class="p-4"/>',
-    safetyRationale: "A value-preserving re-serialization of the same computed padding on the same node \u2014 a class-only change. It is safe even on an element with a ref, event handler, dynamic child, or dangerouslySetInnerHTML \u2014 a className rewrite touches none of them; only a dynamic/opaque class list or a combinator-subject class is excluded, so no behaviour or project selector is disturbed."
-  },
-  rewrite: {
-    rewriteClasses(computed2) {
-      const fold = analyzePadding(computed2);
-      return fold ? withFoldedPadding(computed2, fold) : null;
-    }
-  },
-  test: {
-    cases: [
-      {
-        // The four equal padding longhands collapse to a `padding` shorthand at the IR level, and the
-        // minimizing reverse-emit picks the single shortest utility (`p-4`) that reproduces it,
-        // replacing the four `p{t,r,b,l}-4` tokens. `bg-red-200` is preserved (its order is stable).
-        before: '<div className="pt-4 pr-4 pb-4 pl-4 bg-red-200">box</div>',
-        after: '<div className="bg-red-200 p-4">box</div>'
-      },
-      {
-        // A dynamic `{x}` child no longer blocks compress: only the element's OWN class tokens are
-        // rewritten (px-4 py-4 → p-4); the dynamic child is untouched by a class-only change. This is
-        // the real-app common case (most elements have dynamic content).
-        before: '<div className="px-4 py-4">{x}</div>',
-        after: '<div className="p-4">{x}</div>'
-      }
-    ],
-    // Asymmetric padding (top != bottom) cannot fold into a shorthand → left unchanged.
-    noMatch: ['<div className="pt-2 pr-4 pb-8 pl-4 bg-red-200">box</div>']
-  }
-});
-
-// ../patterns/src/library/compress/place-shorthand.pattern.ts
-var ALIGN_ITEMS = "align-items";
-var JUSTIFY_ITEMS = "justify-items";
-var PLACE_ITEMS = "place-items";
-var ALIGN_CONTENT = "align-content";
-var JUSTIFY_CONTENT = "justify-content";
-var PLACE_CONTENT = "place-content";
-var BASE_KEY8 = conditionKey(BASE_CONDITION);
-function samePair(a, b) {
-  return a !== void 0 && b !== void 0 && a.value === b.value && a.important === b.important;
-}
-function placeDecl(property, align) {
-  return {
-    property,
-    value: align.value,
-    important: align.important,
-    relativeToParent: false,
-    // alignment keywords (center/start/stretch/…) are not length-relative
-    inherited: false
-    // none of the place-* alignment properties are inherited
-  };
-}
-function withBaseDecls2(sm, baseDecls) {
-  const blocks = /* @__PURE__ */ new Map();
-  for (const [key, block] of sm.blocks) {
-    const decls = key === BASE_KEY8 ? new Map(baseDecls) : block.decls;
-    blocks.set(key, { condition: block.condition, decls });
-  }
-  return { blocks };
-}
-var placeShorthand = definePattern({
-  name: "place-shorthand",
-  category: "compress/place-shorthand",
-  safety: 1,
-  doc: {
-    title: "Collapse matching alignment pairs into `place-*` shorthands",
-    summary: "When align-items equals justify-items they collapse to `place-items`; when align-content equals justify-content they collapse to `place-content`. The two collapses are independent.",
-    before: '<div style="align-items:center;justify-items:center"/>',
-    after: '<div style="place-items:center"/>',
-    safetyRationale: "A `place-*` shorthand is value-identical to its equal align/justify pair \u2014 a class-only change. It is safe even on an element with a ref, event handler, dynamic child, or dangerouslySetInnerHTML \u2014 a className rewrite touches none of them; only a dynamic/opaque class list or a combinator-subject class is excluded, so no behaviour or project selector is disturbed."
-  },
-  rewrite: {
-    rewriteClasses(computed2) {
-      const base = computed2.blocks.get(BASE_KEY8);
-      if (!base) return null;
-      const alignItems = base.decls.get(ALIGN_ITEMS);
-      const justifyItems = base.decls.get(JUSTIFY_ITEMS);
-      const alignContent = base.decls.get(ALIGN_CONTENT);
-      const justifyContent = base.decls.get(JUSTIFY_CONTENT);
-      const next = new Map(base.decls);
-      let collapsed = false;
-      if (samePair(alignItems, justifyItems)) {
-        next.delete(ALIGN_ITEMS);
-        next.delete(JUSTIFY_ITEMS);
-        next.set(PLACE_ITEMS, placeDecl(PLACE_ITEMS, alignItems));
-        collapsed = true;
-      }
-      if (samePair(alignContent, justifyContent)) {
-        next.delete(ALIGN_CONTENT);
-        next.delete(JUSTIFY_CONTENT);
-        next.set(PLACE_CONTENT, placeDecl(PLACE_CONTENT, alignContent));
-        collapsed = true;
-      }
-      if (!collapsed) return null;
-      return withBaseDecls2(computed2, next);
-    }
-  },
-  test: {
-    cases: [
-      {
-        // The matching items pair collapses to a `place-items` decl at the IR level; the minimizing
-        // reverse-emit picks the single utility covering both (`place-items-center`), replacing the
-        // `items-center`+`justify-items-center` pair. `bg-red-200` is preserved.
-        before: '<div className="items-center justify-items-center bg-red-200">box</div>',
-        after: '<div className="bg-red-200 place-items-center">box</div>'
-      }
-    ],
-    // Mismatched alignment (align-items != justify-items, no content pair) → nothing collapses.
-    noMatch: ['<div className="items-center justify-items-start bg-red-200">box</div>']
-  }
-});
-
-// ../patterns/src/library/compress/scroll-margin-shorthand.pattern.ts
-var SCROLL_MARGIN_SIDES = [
-  "scroll-margin-top",
-  "scroll-margin-right",
-  "scroll-margin-bottom",
-  "scroll-margin-left"
-];
-var SIDE_SET = new Set(SCROLL_MARGIN_SIDES);
-var BASE_KEY9 = conditionKey(BASE_CONDITION);
-var SCROLL_MARGIN = "scroll-margin";
-var NON_COLLAPSIBLE_VALUES3 = /* @__PURE__ */ new Set([
-  "initial",
-  "inherit",
-  "unset",
-  "revert",
-  "revert-layer"
-]);
-function analyzeScrollMargin(sm) {
-  const block = sm.blocks.get(BASE_KEY9);
-  if (!block) return null;
-  const sides = [];
-  for (const side of SCROLL_MARGIN_SIDES) {
-    const decl = block.decls.get(side);
-    if (!decl) return null;
-    sides.push(decl);
-  }
-  const important = sides[0].important;
-  if (!sides.every((d) => d.important === important)) return null;
-  const value = String(sides[0].value);
-  if (NON_COLLAPSIBLE_VALUES3.has(value)) return null;
-  if (!sides.every((d) => String(d.value) === value)) return null;
-  const relative = sides.some((d) => d.relativeToParent);
-  return { value, important, relative };
-}
-function withFoldedScrollMargin(sm, fold) {
-  const blocks = /* @__PURE__ */ new Map();
-  for (const [key, block] of sm.blocks) {
-    if (key !== BASE_KEY9) {
-      blocks.set(key, block);
-      continue;
-    }
-    const decls = /* @__PURE__ */ new Map();
-    for (const [prop, decl] of block.decls) {
-      if (SIDE_SET.has(String(prop))) continue;
-      decls.set(prop, decl);
-    }
-    const shorthand = {
-      property: SCROLL_MARGIN,
-      value: fold.value,
-      important: fold.important,
-      relativeToParent: fold.relative,
-      inherited: false
-      // scroll-margin is never inherited
-    };
-    decls.set(shorthand.property, shorthand);
-    blocks.set(key, { condition: block.condition, decls });
-  }
-  return { blocks };
-}
-var scrollMarginShorthand = definePattern({
-  name: "scroll-margin-shorthand",
-  category: "compress/scroll-margin-shorthand",
-  safety: 1,
-  doc: {
-    title: "Collapse equal scroll-margin sides into scroll-margin",
-    summary: "An element whose four scroll-margin sides are all equal is rewritten to the single Tailwind scroll-m-* utility (scroll-margin === the four equal sides).",
-    before: '<div class="scroll-mt-4 scroll-mr-4 scroll-mb-4 scroll-ml-4"/>',
-    after: '<div class="scroll-m-4"/>',
-    safetyRationale: "`scroll-margin` is value-identical to four equal scroll-margin sides \u2014 a class-only change. It is safe even on an element with a ref, event handler, dynamic child, or dangerouslySetInnerHTML \u2014 a className rewrite touches none of them; only a dynamic/opaque class list or a combinator-subject class is excluded, so no behaviour or project selector is disturbed."
-  },
-  rewrite: {
-    rewriteClasses(computed2) {
-      const fold = analyzeScrollMargin(computed2);
-      return fold ? withFoldedScrollMargin(computed2, fold) : null;
-    }
-  },
-  test: {
-    cases: [
-      {
-        // The four equal scroll-margin longhands collapse to a `scroll-margin` decl at the IR level; the
-        // minimizing reverse-emit then picks the single shortest utility (`scroll-m-4`) that reproduces
-        // it, replacing the four `scroll-m{t,r,b,l}-4` tokens. `bg-red-200` is preserved.
-        before: '<div className="scroll-mt-4 scroll-mr-4 scroll-mb-4 scroll-ml-4 bg-red-200">box</div>',
-        after: '<div className="bg-red-200 scroll-m-4">box</div>'
-      }
-    ],
-    // Sides differ (top != bottom) → no all-equal collapse.
-    noMatch: ['<div className="scroll-mt-2 scroll-mr-4 scroll-mb-8 scroll-ml-4 bg-red-200">box</div>']
-  }
-});
-
-// ../patterns/src/library/compress/scroll-padding-shorthand.pattern.ts
-var SCROLL_PADDING_SIDES = [
-  "scroll-padding-top",
-  "scroll-padding-right",
-  "scroll-padding-bottom",
-  "scroll-padding-left"
-];
-var SIDE_SET2 = new Set(SCROLL_PADDING_SIDES);
-var BASE_KEY10 = conditionKey(BASE_CONDITION);
-var SCROLL_PADDING = "scroll-padding";
-var NON_COLLAPSIBLE_VALUES4 = /* @__PURE__ */ new Set([
-  "initial",
-  "inherit",
-  "unset",
-  "revert",
-  "revert-layer"
-]);
-function analyzeScrollPadding(sm) {
-  const block = sm.blocks.get(BASE_KEY10);
-  if (!block) return null;
-  const sides = [];
-  for (const side of SCROLL_PADDING_SIDES) {
-    const decl = block.decls.get(side);
-    if (!decl) return null;
-    sides.push(decl);
-  }
-  const important = sides[0].important;
-  if (!sides.every((d) => d.important === important)) return null;
-  const value = String(sides[0].value);
-  if (NON_COLLAPSIBLE_VALUES4.has(value)) return null;
-  if (!sides.every((d) => String(d.value) === value)) return null;
-  const relative = sides.some((d) => d.relativeToParent);
-  return { value, important, relative };
-}
-function withFoldedScrollPadding(sm, fold) {
-  const blocks = /* @__PURE__ */ new Map();
-  for (const [key, block] of sm.blocks) {
-    if (key !== BASE_KEY10) {
-      blocks.set(key, block);
-      continue;
-    }
-    const decls = /* @__PURE__ */ new Map();
-    for (const [prop, decl] of block.decls) {
-      if (SIDE_SET2.has(String(prop))) continue;
-      decls.set(prop, decl);
-    }
-    const shorthand = {
-      property: SCROLL_PADDING,
-      value: fold.value,
-      important: fold.important,
-      relativeToParent: fold.relative,
-      inherited: false
-      // scroll-padding is never inherited
-    };
-    decls.set(shorthand.property, shorthand);
-    blocks.set(key, { condition: block.condition, decls });
-  }
-  return { blocks };
+function elementOf(node) {
+  const n = node;
+  return n.kind === "element" ? n : null;
 }
-var scrollPaddingShorthand = definePattern({
-  name: "scroll-padding-shorthand",
-  category: "compress/scroll-padding-shorthand",
-  safety: 1,
+var establishesContext = (node) => {
+  const m = metaOf2(node);
+  if (!m) return false;
+  return m.establishesBox || m.establishesFormattingContext || m.establishesStackingContext || m.isContainingBlock || m.declaresCustomProperties;
+};
+var hasSpreadAttrs2 = (node) => metaOf2(node)?.hasSpreadAttrs ?? false;
+var isComponentNode3 = (node) => metaOf2(node)?.isComponent ?? false;
+var hasOwnAttrs2 = (node) => {
+  const el = elementOf(node);
+  if (!el) return false;
+  return el.attrs.entries.size > 0 || el.attrs.spreads.length > 0;
+};
+var targetedByStructuralPseudo3 = (node, ctx) => {
+  const el = elementOf(node);
+  if (!el) return false;
+  if (el.meta.targetedByStructuralPseudo) return true;
+  return ctx.selectors.targetedByStructuralPseudo(el.id);
+};
+var passthroughWrapper = definePattern({
+  name: "passthrough-wrapper",
+  category: "flatten/wrapper/passthrough-wrapper",
+  safety: 2,
   doc: {
-    title: "Collapse equal scroll-padding sides into scroll-padding",
-    summary: "An element whose four scroll-padding sides are all equal is rewritten to the single Tailwind scroll-p-* utility (scroll-padding === the four equal sides).",
-    before: '<div class="scroll-pt-4 scroll-pr-4 scroll-pb-4 scroll-pl-4"/>',
-    after: '<div class="scroll-p-4"/>',
-    safetyRationale: "`scroll-padding` is value-identical to four equal scroll-padding sides \u2014 a class-only change. It is safe even on an element with a ref, event handler, dynamic child, or dangerouslySetInnerHTML \u2014 a className rewrite touches none of them; only a dynamic/opaque class list or a combinator-subject class is excluded, so no behaviour or project selector is disturbed."
+    title: "Flatten passthrough wrapper",
+    summary: "A div with no own visual/box style, no attributes beyond an inert class, exactly one element child, and no opacity barriers is removed; its sole child is hoisted in its place.",
+    before: "<div><Child/></div>",
+    after: "<Child/>",
+    safetyRationale: "Wrapper paints nothing and establishes no layout/paint/var context, carries no ref/handlers/dynamic-children/html/spread/component identity, owns no targetable attrs, and is not a combinator/structural-pseudo subject (reparenting changes no match-set); inheritable styles are folded onto the child before removal."
   },
-  rewrite: {
-    rewriteClasses(computed2) {
-      const fold = analyzeScrollPadding(computed2);
-      return fold ? withFoldedScrollPadding(computed2, fold) : null;
-    }
+  match: {
+    tag: "div",
+    onlyChild: "element",
+    paintsNothing: true,
+    where: [
+      not(establishesContext),
+      not(hasOwnAttrs2),
+      not(hasDynamicClasses),
+      not(hasSpreadAttrs2),
+      not(isComponentNode3),
+      not(targetedByStructuralPseudo3)
+    ]
   },
+  rewrite: { flattenInto: "child" },
   test: {
     cases: [
       {
-        // The four equal scroll-padding longhands collapse to a `scroll-padding` decl at the IR level;
-        // the minimizing reverse-emit then picks the single shortest utility (`scroll-p-4`) that
-        // reproduces it, replacing the four `scroll-p{t,r,b,l}-4` tokens. `bg-red-200` is preserved.
-        before: '<div className="scroll-pt-4 scroll-pr-4 scroll-pb-4 scroll-pl-4 bg-red-200">box</div>',
-        after: '<div className="bg-red-200 scroll-p-4">box</div>'
+        // A plain, style-free wrapper paints nothing and establishes no context → a provably-safe
+        // flatten under the conservative gate: the wrapper is removed and its sole child hoisted.
+        before: '<div><a className="bg-red-200">Link</a></div>',
+        after: '<a className="bg-red-200">Link</a>'
       }
     ],
-    // Sides differ (top != bottom) → no all-equal collapse.
-    noMatch: ['<div className="scroll-pt-2 scroll-pr-4 scroll-pb-8 scroll-pl-4 bg-red-200">box</div>']
+    noMatch: [
+      // A ref pins the wrapper's element identity (a hard opacity barrier) → not a passthrough.
+      '<div ref={rootRef}><a className="bg-red-200">Link</a></div>',
+      // A `display:flex` wrapper establishes a formatting context, so removing its box is NOT
+      // provably layout-neutral → the conservative gate leaves it in place.
+      '<div className="flex"><a className="bg-red-200">Link</a></div>'
+    ]
   }
 });
 
-// ../patterns/src/library/compress/size-shorthand.pattern.ts
-var WIDTH = "width";
-var HEIGHT = "height";
-var SIZE = "size";
-var NON_COLLAPSIBLE_VALUES5 = /* @__PURE__ */ new Set(["auto", "initial", "unset"]);
-function baseBlock(sm) {
-  return sm.blocks.get(conditionKey(BASE_CONDITION));
-}
-function withSizeShorthand(sm, value, important) {
-  const baseKey = conditionKey(BASE_CONDITION);
-  const blocks = /* @__PURE__ */ new Map();
-  for (const [key, block] of sm.blocks) {
-    if (key !== baseKey) {
-      blocks.set(key, block);
-      continue;
-    }
-    const decls = new Map(block.decls);
-    decls.delete(WIDTH);
-    decls.delete(HEIGHT);
-    for (const decl of normalizer.normalizeDeclaration(String(SIZE), value, important)) {
-      decls.set(decl.property, decl);
-    }
-    blocks.set(key, { condition: block.condition, decls });
-  }
-  return { blocks };
+// ../patterns/src/library/wrapper/redundant-inline-wrapper.pattern.ts
+function asEl3(node) {
+  const n = node;
+  return n.kind === "element" ? n : null;
+}
+function metaOf3(node) {
+  return asEl3(node)?.meta ?? null;
 }
-var sizeShorthand = definePattern({
-  name: "size-shorthand",
-  category: "compress/size-shorthand",
+var establishesContext2 = (node) => {
+  const m = metaOf3(node);
+  if (!m) return false;
+  return m.establishesBox || m.establishesFormattingContext || m.establishesStackingContext || m.isContainingBlock || m.declaresCustomProperties;
+};
+var hasSpreadAttrs3 = (node) => metaOf3(node)?.hasSpreadAttrs ?? false;
+var isComponentNode4 = (node) => metaOf3(node)?.isComponent ?? false;
+var hasOwnAttrs3 = (node) => {
+  const el = asEl3(node);
+  if (!el) return false;
+  return el.attrs.entries.size > 0 || el.attrs.spreads.length > 0;
+};
+var targetedByStructuralPseudo4 = (node, ctx) => {
+  const el = asEl3(node);
+  if (!el) return false;
+  if (el.meta.targetedByStructuralPseudo) return true;
+  return ctx.selectors.targetedByStructuralPseudo(el.id);
+};
+var DISPLAY3 = "display";
+var hasNonInlineDisplay = (node, ctx) => {
+  const el = asEl3(node);
+  if (!el) return false;
+  const sm = ctx.computedOf(el) ?? el.computed;
+  for (const block of sm.blocks.values()) {
+    const decl = block.decls.get(DISPLAY3);
+    if (decl && String(decl.value) !== "inline") return true;
+  }
+  return false;
+};
+var redundantInlineWrapper = definePattern({
+  name: "redundant-inline-wrapper",
+  category: "flatten/wrapper/redundant-inline-wrapper",
   safety: 2,
   doc: {
-    title: "Collapse equal width/height into size-*",
-    summary: "An element whose computed width and height are equal is rewritten to the single Tailwind size-* utility (size-* === width + height at the same value).",
-    before: '<div style="width:1rem;height:1rem"/>',
-    after: '<div class="size-4"/>',
-    safetyRationale: "`size-*` is value-identical to equal width+height \u2014 a class-only change. It is safe even on an element with a ref, event handler, dynamic child, or dangerouslySetInnerHTML \u2014 a className rewrite touches none of them; only a dynamic/opaque class list or a combinator-subject class is excluded, so no behaviour or project selector is disturbed."
+    title: "Flatten redundant inline wrapper",
+    summary: "An inline span with no own visual/box style, no attributes beyond an inert class, exactly one element child, and no opacity barriers is removed; its sole child is hoisted in its place.",
+    before: "<span><Child/></span>",
+    after: "<Child/>",
+    safetyRationale: "An empty inline box paints nothing and establishes no layout/paint/var context; with the inline default display and a single element child its removal changes no paint and no flow. The span carries no ref/handlers/dynamic-children/html/spread/component identity, owns no targetable attrs, and is not a combinator/structural-pseudo subject; inheritable styles are folded onto the child before removal."
   },
-  rewrite: {
-    rewriteClasses(computed2) {
-      const base = baseBlock(computed2);
-      const w = base?.decls.get(WIDTH);
-      const h = base?.decls.get(HEIGHT);
-      if (!w || !h) return null;
-      if (w.important !== h.important) return null;
-      if (NON_COLLAPSIBLE_VALUES5.has(String(w.value))) return null;
-      if (w.value !== h.value) return null;
-      return withSizeShorthand(computed2, String(w.value), w.important);
-    }
+  match: {
+    tag: "span",
+    onlyChild: "element",
+    paintsNothing: true,
+    where: [
+      not(hasNonInlineDisplay),
+      not(establishesContext2),
+      not(hasOwnAttrs3),
+      not(hasDynamicClasses),
+      not(hasSpreadAttrs3),
+      not(isComponentNode4),
+      not(targetedByStructuralPseudo4)
+    ]
   },
+  rewrite: { flattenInto: "child" },
   test: {
     cases: [
       {
-        // Equal width/height collapse to a `size` decl at the IR level; the minimizing reverse-emit
-        // expands `size` back to width+height, finds the single utility covering both (`size-10`), and
-        // replaces the `h-10`+`w-10` pair with it. `bg-red-200` is preserved.
-        before: '<div className="h-10 w-10 bg-red-200">box</div>',
-        after: '<div className="bg-red-200 size-10">box</div>'
+        // An empty inline span paints nothing and establishes no context → a provably-safe flatten:
+        // the span is removed and its sole child hoisted in place.
+        before: '<span><a className="text-blue-500">Link</a></span>',
+        after: '<a className="text-blue-500">Link</a>'
       }
     ],
-    // Width and height differ → no equal-axis collapse.
-    noMatch: ['<div className="h-10 w-20 bg-red-200">box</div>']
+    noMatch: [
+      // A ref pins the span's element identity (a hard opacity barrier) → not a passthrough.
+      '<span ref={spanRef}><a className="text-blue-500">Link</a></span>',
+      // The span paints its own background (own visual style) → kept.
+      '<span className="bg-green-200"><a className="text-blue-500">Link</a></span>',
+      // Non-inline display (inline-block) participates in layout differently → kept.
+      '<span className="inline-block"><a className="text-blue-500">Link</a></span>'
+    ]
   }
 });
 
 // ../patterns/src/_registry.generated.ts
 var builtinPatterns = [
+  flexCenterWrapper,
+  redundantFragment,
+  gridCenterWrapper,
   displayContentsWrapper,
   emptyStyleDiv,
-  flexCenterWrapper,
-  inlineFlexCenterWrapper,
-  nestedFlexMerge,
-  nestedGridMerge,
+  inheritedOnlyWrapper,
   passthroughWrapper,
-  redundantFragment,
-  redundantInlineWrapper,
-  borderRadiusShorthand,
-  borderShorthand,
-  dedupeClasses,
-  gapShorthand,
-  insetShorthand,
-  marginShorthand,
-  overflowShorthand,
-  overscrollBehaviorShorthand,
-  paddingShorthand,
-  placeShorthand,
-  scrollMarginShorthand,
-  scrollPaddingShorthand,
-  sizeShorthand
+  redundantInlineWrapper
 ];
 
 // ../resolver-tailwind/src/tailwind/fingerprint.ts
@@ -3778,14 +2873,312 @@ function synthesizeResidual(remaining, ctx) {
 
 // ../resolver-tailwind/src/tailwind/engine.ts
 var import_node_module = require("module");
+var path3 = __toESM(require("path"), 1);
+
+// ../resolver-tailwind/src/tailwind/engine-v4.ts
+var import_node_fs2 = require("fs");
+var path2 = __toESM(require("path"), 1);
+
+// ../resolver-tailwind/src/tailwind/v4-bridge.ts
+var import_node_child_process = require("child_process");
+var import_node_fs = require("fs");
+var import_node_os = require("os");
 var path = __toESM(require("path"), 1);
+var CHILD_SOURCE = String.raw`
+import { createRequire } from 'node:module';
+import { pathToFileURL } from 'node:url';
+import * as fs from 'node:fs';
+import * as path from 'node:path';
+
+function out(obj) { process.stdout.write(JSON.stringify(obj)); process.exit(0); }
+
+let payload;
+try { payload = JSON.parse(fs.readFileSync(process.argv[2], 'utf8')); }
+catch { out({ ok: false }); }
+
+const projectRoot = payload.projectRoot;
+const entries = payload.entries || [];
+const req = createRequire(path.join(projectRoot, '__domflax_tw4__.js'));
+
+async function importFrom(id) {
+  const resolved = req.resolve(id);
+  return import(pathToFileURL(resolved).href);
+}
+
+// Primary loader: @tailwindcss/node (the companion every v4 build tool installs). It resolves
+// '@import "tailwindcss"' and @theme against the project on disk.
+async function loadViaNode() {
+  let mod;
+  try { mod = await importFrom('@tailwindcss/node'); } catch { return null; }
+  if (!mod || typeof mod.__unstable__loadDesignSystem !== 'function') return null;
+  for (const e of entries) {
+    try { return await mod.__unstable__loadDesignSystem(e.css, { base: e.base }); } catch {}
+  }
+  return null;
+}
+
+// Secondary loader: bare 'tailwindcss' with a filesystem stylesheet resolver (best-effort).
+async function loadViaCore() {
+  let tw;
+  try { tw = await importFrom('tailwindcss'); } catch { return null; }
+  if (!tw || typeof tw.__unstable__loadDesignSystem !== 'function') return null;
+  const loadStylesheet = async (id, base) => {
+    const r = createRequire(path.join(base, '__domflax_tw4__.js'));
+    let p;
+    const tries = id === 'tailwindcss' ? ['tailwindcss/index.css', 'tailwindcss'] : [id, id + '/index.css'];
+    for (const t of tries) { try { p = r.resolve(t); break; } catch {} }
+    if (!p) p = path.resolve(base, id);
+    return { path: p, base: path.dirname(p), content: fs.readFileSync(p, 'utf8') };
+  };
+  const loadModule = async (id, base) => {
+    const r = createRequire(path.join(base, '__domflax_tw4__.js'));
+    const p = r.resolve(id);
+    return { path: p, base: path.dirname(p), module: (await import(pathToFileURL(p).href)).default };
+  };
+  for (const e of entries) {
+    try { return await tw.__unstable__loadDesignSystem(e.css, { base: e.base, loadStylesheet, loadModule }); } catch {}
+  }
+  return null;
+}
+
+const ds = (await loadViaNode()) || (await loadViaCore());
+if (!ds) out({ ok: false });
+
+let names = [];
+try {
+  names = ds.getClassList().map((e) => (Array.isArray(e) ? e[0] : e)).filter((n) => typeof n === 'string');
+} catch { out({ ok: false }); }
+
+let css = [];
+try { css = ds.candidatesToCss(names); } catch { out({ ok: false }); }
+
+const result = [];
+for (let i = 0; i < names.length; i += 1) {
+  const c = css[i];
+  if (typeof c === 'string' && c.length > 0) result.push([names[i], c]);
+}
+out({ ok: true, entries: result });
+`;
+function runV4Bridge(payload) {
+  let dir = null;
+  try {
+    dir = (0, import_node_fs.mkdtempSync)(path.join((0, import_node_os.tmpdir)(), "domflax-tw4-"));
+    const scriptPath = path.join(dir, "bridge.mjs");
+    const payloadPath = path.join(dir, "payload.json");
+    (0, import_node_fs.writeFileSync)(scriptPath, CHILD_SOURCE, "utf8");
+    (0, import_node_fs.writeFileSync)(payloadPath, JSON.stringify(payload), "utf8");
+    const stdout = (0, import_node_child_process.execFileSync)(process.execPath, [scriptPath, payloadPath], {
+      cwd: payload.projectRoot,
+      encoding: "utf8",
+      timeout: 9e4,
+      maxBuffer: 256 * 1024 * 1024,
+      stdio: ["ignore", "pipe", "ignore"]
+    });
+    const parsed = JSON.parse(stdout);
+    if (!parsed.ok || !Array.isArray(parsed.entries) || parsed.entries.length === 0) return null;
+    const entries = parsed.entries.filter(
+      (e) => Array.isArray(e) && typeof e[0] === "string" && typeof e[1] === "string"
+    );
+    return entries.length > 0 ? { entries } : null;
+  } catch {
+    return null;
+  } finally {
+    if (dir) {
+      try {
+        (0, import_node_fs.rmSync)(dir, { recursive: true, force: true });
+      } catch {
+      }
+    }
+  }
+}
+
+// ../resolver-tailwind/src/tailwind/v4-css.ts
+function stripComments(src) {
+  return src.replace(/\/\*[\s\S]*?\*\//g, "");
+}
+function toDecl(buffer) {
+  const buf = buffer.trim();
+  if (buf.length === 0 || buf[0] === "@") return null;
+  const colon = buf.indexOf(":");
+  if (colon <= 0) return null;
+  const prop = buf.slice(0, colon).trim();
+  let value = buf.slice(colon + 1).trim();
+  if (prop.length === 0 || value.length === 0) return null;
+  let important = false;
+  const bang = /!\s*important\s*$/i.exec(value);
+  if (bang) {
+    important = true;
+    value = value.slice(0, bang.index).trim();
+  }
+  return { type: "decl", prop, value, important };
+}
+function splitAtRule(prelude) {
+  const m = /^@([A-Za-z-]+)\s*([\s\S]*)$/.exec(prelude);
+  if (!m) return { name: prelude.slice(1).trim(), params: "" };
+  return { name: m[1].toLowerCase(), params: m[2].trim() };
+}
+function parseBlock(src, start) {
+  const nodes = [];
+  let buf = "";
+  let i = start;
+  while (i < src.length) {
+    const c = src[i];
+    if (c === "{") {
+      const prelude = buf.trim();
+      buf = "";
+      const inner = parseBlock(src, i + 1);
+      i = inner.next;
+      if (prelude.startsWith("@")) {
+        const { name, params } = splitAtRule(prelude);
+        nodes.push({ type: "atrule", name, params, nodes: inner.nodes });
+      } else if (prelude.length > 0) {
+        nodes.push({ type: "rule", selector: prelude, nodes: inner.nodes });
+      }
+    } else if (c === "}") {
+      const d = toDecl(buf);
+      if (d) nodes.push(d);
+      return { nodes, next: i + 1 };
+    } else if (c === ";") {
+      const d = toDecl(buf);
+      if (d) nodes.push(d);
+      buf = "";
+      i += 1;
+    } else {
+      buf += c;
+      i += 1;
+    }
+  }
+  const tail = toDecl(buf);
+  if (tail) nodes.push(tail);
+  return { nodes, next: i };
+}
+function resolveNesting(child, parent) {
+  const c = child.trim();
+  if (parent.length === 0) return c;
+  if (c.includes("&")) return c.split("&").join(parent);
+  return `${parent} ${c}`;
+}
+var DROP_ATRULES = /* @__PURE__ */ new Set(["property", "keyframes", "font-face", "charset", "import"]);
+function flattenNodes(nodes, selector, at, out) {
+  const own = [];
+  for (const n of nodes) if (n.type === "decl") own.push(n);
+  if (own.length > 0 && selector.length > 0) out.push({ selector, at: [...at], decls: own });
+  for (const n of nodes) {
+    if (n.type === "rule") {
+      flattenNodes(n.nodes, resolveNesting(n.selector, selector), at, out);
+    } else if (n.type === "atrule") {
+      if (n.name === "media") {
+        flattenNodes(n.nodes, selector, [...at, { name: "media", params: n.params }], out);
+      } else if (n.name === "layer") {
+        flattenNodes(n.nodes, selector, at, out);
+      } else if (!DROP_ATRULES.has(n.name)) {
+        flattenNodes(n.nodes, selector, [...at, { name: n.name, params: n.params }], out);
+      }
+    }
+  }
+}
+function leafToNode(leaf) {
+  const declNodes = leaf.decls.map((d) => ({
+    type: "decl",
+    prop: d.prop,
+    value: d.value,
+    important: d.important
+  }));
+  let node = { type: "rule", selector: leaf.selector, nodes: declNodes };
+  for (let i = leaf.at.length - 1; i >= 0; i -= 1) {
+    node = { type: "atrule", name: leaf.at[i].name, params: leaf.at[i].params, nodes: [node] };
+  }
+  return node;
+}
+function parseUtilityCss(css) {
+  try {
+    const { nodes } = parseBlock(stripComments(css), 0);
+    const leaves = [];
+    flattenNodes(nodes, "", [], leaves);
+    return leaves.map(leafToNode);
+  } catch {
+    return [];
+  }
+}
+
+// ../resolver-tailwind/src/tailwind/engine-v4.ts
+var SEARCH_DIRS = ["", "src", "app", "styles", "src/styles", "src/app", "app/styles", "assets/css", "css"];
+var SKIP_DIRS = /* @__PURE__ */ new Set(["node_modules", ".git", "dist", "build", "out", ".next", "coverage"]);
+var ENTRY_RE = /@import\s+["']tailwindcss["']|@tailwind\b|@theme\b/;
+function scanDir(dir) {
+  let names;
+  try {
+    names = (0, import_node_fs2.readdirSync)(dir);
+  } catch {
+    return null;
+  }
+  for (const name of names) {
+    if (!name.toLowerCase().endsWith(".css")) continue;
+    const file = path2.join(dir, name);
+    try {
+      if (!(0, import_node_fs2.statSync)(file).isFile()) continue;
+      const css = (0, import_node_fs2.readFileSync)(file, "utf8");
+      if (ENTRY_RE.test(css)) return { css, base: path2.dirname(file) };
+    } catch {
+    }
+  }
+  return null;
+}
+function findCssEntries(projectRoot) {
+  const out = [];
+  const seen = /* @__PURE__ */ new Set();
+  for (const rel of SEARCH_DIRS) {
+    const dir = path2.resolve(projectRoot, rel);
+    if (seen.has(dir) || [...SKIP_DIRS].some((s) => dir.includes(`${path2.sep}${s}`))) continue;
+    seen.add(dir);
+    const hit = scanDir(dir);
+    if (hit) {
+      out.push(hit);
+      break;
+    }
+  }
+  out.push({ css: '@import "tailwindcss";', base: projectRoot });
+  return out;
+}
+function makeV4Engine(entries, version) {
+  const cssByClass = new Map(entries.map(([name, css]) => [name, css]));
+  const nodeCache = /* @__PURE__ */ new Map();
+  const nodesFor = (token) => {
+    let cached = nodeCache.get(token);
+    if (!cached) {
+      const css = cssByClass.get(token);
+      cached = css ? parseUtilityCss(css) : [];
+      nodeCache.set(token, cached);
+    }
+    return cached;
+  };
+  return {
+    version,
+    context: {
+      // The resolver keeps only string entries; we hand it the concrete class names directly.
+      getClassList: () => [...cssByClass.keys()]
+    },
+    generate(candidates) {
+      const out = [];
+      for (const c of candidates) for (const n of nodesFor(c)) out.push(n);
+      return out;
+    }
+  };
+}
+function loadV4Engine(projectRoot, version) {
+  const snapshot = runV4Bridge({ projectRoot, entries: findCssEntries(projectRoot) });
+  if (!snapshot) return null;
+  return makeV4Engine(snapshot.entries, version);
+}
+
+// ../resolver-tailwind/src/tailwind/engine.ts
 function moduleBase() {
   return typeof __filename === "string" ? __filename : importMetaUrl;
 }
 function projectRequire(projectRoot) {
   const bases = [];
-  if (projectRoot) bases.push(path.join(projectRoot, "__domflax__.js"));
-  bases.push(path.join(process.cwd(), "__domflax__.js"));
+  if (projectRoot) bases.push(path3.join(projectRoot, "__domflax__.js"));
+  bases.push(path3.join(process.cwd(), "__domflax__.js"));
   bases.push(moduleBase());
   for (const base of bases) {
     try {
@@ -3797,14 +3190,36 @@ function projectRequire(projectRoot) {
   }
   return null;
 }
+var FIRST_UNSUPPORTED_MAJOR = 4;
+function majorOf(version) {
+  const m = /^\s*(\d+)/.exec(version);
+  return m ? Number(m[1]) : null;
+}
 function loadEngine(options) {
   const req = projectRequire(options.projectRoot);
-  if (!req) return null;
+  if (!req) return { engine: null, version: null, unsupportedMajor: null };
+  let version = null;
+  try {
+    version = req("tailwindcss/package.json").version;
+  } catch {
+    return { engine: null, version: null, unsupportedMajor: null };
+  }
+  const major = majorOf(version);
+  if (major !== null && major >= FIRST_UNSUPPORTED_MAJOR) {
+    const projectRoot = options.projectRoot ?? process.cwd();
+    let v4 = null;
+    try {
+      v4 = loadV4Engine(projectRoot, version);
+    } catch {
+      v4 = null;
+    }
+    if (v4) return { engine: v4, version, unsupportedMajor: null };
+    return { engine: null, version, unsupportedMajor: major };
+  }
   try {
     const resolveConfig = req("tailwindcss/resolveConfig.js");
     const { createContext } = req("tailwindcss/lib/lib/setupContextUtils.js");
     const { generateRules } = req("tailwindcss/lib/lib/generateRules.js");
-    const pkg = req("tailwindcss/package.json");
     let userConfig = options.config ?? { content: [{ raw: "" }] };
     if (options.configPath !== void 0) {
       const loadConfig = req("tailwindcss/loadConfig.js");
@@ -3813,15 +3228,19 @@ function loadEngine(options) {
     const resolved = resolveConfig(userConfig);
     const context = createContext(resolved);
     return {
-      version: pkg.version,
-      context,
-      generate(candidates) {
-        const rules = generateRules(new Set(candidates), context);
-        return rules.map(([, node]) => node);
-      }
+      engine: {
+        version,
+        context,
+        generate(candidates) {
+          const rules = generateRules(new Set(candidates), context);
+          return rules.map(([, node]) => node);
+        }
+      },
+      version,
+      unsupportedMajor: null
     };
   } catch {
-    return null;
+    return { engine: null, version, unsupportedMajor: null };
   }
 }
 
@@ -4000,22 +3419,39 @@ var DROPPABLE_USAGE = {
 };
 
 // ../resolver-tailwind/src/tailwind/resolver.ts
+var warnedUnsupported = /* @__PURE__ */ new Set();
 var TailwindResolver = class {
   id = "tailwind";
   provider;
   fingerprint;
+  /**
+   * SAFETY (Layer 1): the detected Tailwind MAJOR when the project's version is one this resolver
+   * cannot drive (v4+), else `null`. When set, {@link resolve} reports every token as unknown, so
+   * downstream files are left unchanged (never mis-optimized). Exposed for diagnostics/tests.
+   */
+  unsupportedMajor;
   #engine;
   /** Per-token extraction cache (engine output is pure for a fixed config). */
   #tokenCache = /* @__PURE__ */ new Map();
   /** Per-class-set forward-resolution cache. */
   #resolveCache = /* @__PURE__ */ new Map();
-  /** Lazily built reverse index for {@link emit}. */
+  /** Lazily built reverse index for the greedy {@link emit} fallback. */
   #reverseIndex = null;
+  /** Lazily built cover vocabulary (base-condition tuple sets) for the exact-cover engine. */
+  #coverVocab = null;
   constructor(config = {}) {
-    this.#engine = loadEngine(config);
-    this.provider = config.provider ?? (this.#engine ? `tailwindcss@${this.#engine.version}` : "tailwindcss");
+    const loaded = loadEngine(config);
+    this.#engine = loaded.engine;
+    this.unsupportedMajor = loaded.unsupportedMajor;
+    this.provider = config.provider ?? (loaded.version ? `tailwindcss@${loaded.version}` : "tailwindcss");
     const seed = JSON.stringify(config.config ?? {}) + (config.configPath ?? "");
     this.fingerprint = config.fingerprint ?? `${this.provider}/${fnv1a(seed)}`;
+    if (this.unsupportedMajor !== null && !warnedUnsupported.has(this.provider)) {
+      warnedUnsupported.add(this.provider);
+      console.warn(
+        `domflax: detected Tailwind v${this.unsupportedMajor} (${this.provider}) but could not load its design system (is @tailwindcss/node installed?); classes cannot be resolved, so files are left unchanged to avoid unsafe edits.`
+      );
+    }
   }
   /** Engine-backed, cached single-token extraction. */
   #extract(token) {
@@ -4124,9 +3560,75 @@ var TailwindResolver = class {
     this.#reverseIndex = index;
     return index;
   }
+  /**
+   * The cover vocabulary: every base-condition, plain-subject utility mapped to the {@link tupleKey}s
+   * of its full normalized-longhand declaration set. Built once from a SINGLE engine `generate` over
+   * the enumerable class list (grouped by selector), so it is the same cost as {@link #buildReverseIndex}.
+   * This is what the provider-uniform exact-cover engine searches; the element's own droppable tokens
+   * are members of it, guaranteeing feasibility. Variant / combinator / pseudo utilities are excluded
+   * (their effect is not the element's own base box), so a target carrying such conditions simply finds
+   * no cover and falls back to the greedy emit.
+   */
+  #buildCoverVocab() {
+    if (this.#coverVocab) return this.#coverVocab;
+    const baseCk = String(conditionKey(BASE_CONDITION));
+    const out = [];
+    if (this.#engine) {
+      try {
+        const classes = this.#engine.context.getClassList().filter((c) => typeof c === "string");
+        const nodes = this.#engine.generate(classes);
+        for (const node of nodes) {
+          if (node.type !== "rule") continue;
+          const rule = node;
+          const parsed = parseSelector(rule.selector);
+          if (parsed.kind !== "simple" || parsed.states.length > 0 || parsed.pseudoElement !== "") {
+            continue;
+          }
+          const className = unescapeClass(rule.selector);
+          if (className === null) continue;
+          const tuples = [];
+          const seen = /* @__PURE__ */ new Set();
+          for (const child of rule.nodes ?? []) {
+            if (child.type !== "decl") continue;
+            const d = child;
+            if (typeof d.value !== "string") continue;
+            for (const decl of normalizer.normalizeDeclaration(d.prop, d.value, d.important === true)) {
+              const k = tupleKey(baseCk, String(decl.property), String(decl.value), decl.important);
+              if (!seen.has(k)) {
+                seen.add(k);
+                tuples.push(k);
+              }
+            }
+          }
+          if (tuples.length > 0) out.push({ token: className, tuples });
+        }
+      } catch {
+      }
+    }
+    this.#coverVocab = out;
+    return out;
+  }
+  /**
+   * Try the minimal-string exact-cover engine over the WHOLE utility vocabulary. On success the chosen
+   * set is verified by the mandatory CORRECTNESS BACKSTOP — re-resolve it and assert it reproduces the
+   * target's tuples EXACTLY — before it is returned; any mismatch (or no cover / oversize universe)
+   * yields `null` so {@link emit} uses its greedy fallback. Never returns a set that misrepresents `U`.
+   */
+  #tryCover(normalized, norm) {
+    const universe = styleMapTuples(normalized, norm);
+    if (universe.length === 0) return { classes: [], exact: true, warnings: [] };
+    const chosen = minStringCover(universe, this.#buildCoverVocab());
+    if (!chosen || chosen.length === 0) return null;
+    const reTuples = new Set(styleMapTuples(this.resolve({ classes: chosen }).styles, norm));
+    if (reTuples.size !== universe.length) return null;
+    for (const t of universe) if (!reTuples.has(t)) return null;
+    return { classes: chosen, exact: true, warnings: [] };
+  }
   emit(styles, ctx) {
     const norm = ctx.normalizer ?? normalizer;
     const normalized = norm.normalizeStyleMap(styles);
+    const cover = this.#tryCover(normalized, norm);
+    if (cover) return cover;
     const base = normalized.blocks.get(conditionKey(BASE_CONDITION));
     if (!base || base.decls.size === 0) return { classes: [], exact: true, warnings: [] };
     const hasNonBase = normalized.blocks.size > 1;
@@ -4156,13 +3658,13 @@ var TailwindResolver = class {
       let bestCover = 0;
       for (const entry of candidates) {
         const [token, declMap] = entry;
-        let cover = 0;
-        for (const prop of declMap.keys()) if (remaining.has(prop)) cover += 1;
-        if (cover === 0) continue;
-        const better = best === null || cover > bestCover || cover === bestCover && declMap.size < best[1].size || cover === bestCover && declMap.size === best[1].size && token < best[0];
+        let cover2 = 0;
+        for (const prop of declMap.keys()) if (remaining.has(prop)) cover2 += 1;
+        if (cover2 === 0) continue;
+        const better = best === null || cover2 > bestCover || cover2 === bestCover && declMap.size < best[1].size || cover2 === bestCover && declMap.size === best[1].size && token < best[0];
         if (better) {
           best = entry;
-          bestCover = cover;
+          bestCover = cover2;
         }
       }
       if (!best) break;
@@ -4233,14 +3735,14 @@ var LEGACY_PSEUDO_ELEMENTS2 = /* @__PURE__ */ new Set([
 
 // ../resolver-css/src/engine.ts
 var import_node_module2 = require("module");
-var path2 = __toESM(require("path"), 1);
+var path4 = __toESM(require("path"), 1);
 function moduleBase2() {
   return typeof __filename === "string" ? __filename : importMetaUrl;
 }
 function loadPostcssEngine(projectRoot) {
   const bases = [];
-  if (projectRoot) bases.push(path2.join(projectRoot, "__domflax__.js"));
-  bases.push(path2.join(process.cwd(), "__domflax__.js"));
+  if (projectRoot) bases.push(path4.join(projectRoot, "__domflax__.js"));
+  bases.push(path4.join(process.cwd(), "__domflax__.js"));
   bases.push(moduleBase2());
   for (const base of bases) {
     try {
@@ -4293,15 +3795,15 @@ function collectDecls(rule) {
 }
 
 // ../resolver-css/src/misc-helpers.ts
-var import_node_fs = require("fs");
+var import_node_fs3 = require("fs");
 function isPlainClassToken(token) {
   return token.length > 0 && !/[\s.#>+~:[\]()]/.test(token);
 }
-function readCssPath(path3) {
+function readCssPath(path5) {
   try {
-    return { id: path3, css: (0, import_node_fs.readFileSync)(path3, "utf8") };
+    return { id: path5, css: (0, import_node_fs3.readFileSync)(path5, "utf8") };
   } catch (cause) {
-    throw new Error(`resolver-css: cannot read CSS file "${path3}"`, { cause });
+    throw new Error(`resolver-css: cannot read CSS file "${path5}"`, { cause });
   }
 }
 function deriveFingerprint(provider, files) {
@@ -4356,6 +3858,8 @@ var CustomCSSResolver = class {
   /** Distinct COMPLEX selectors (combinator or structural pseudo), sorted. */
   #complex;
   #reverse = null;
+  /** Lazily built cover vocabulary (full condition-keyed tuple sets) for the exact-cover engine. */
+  #coverVocab = null;
   constructor(cssFiles = [], options = {}) {
     ensurePostcss(options.projectRoot);
     const fromDisk = (options.files ?? []).map(readCssPath);
@@ -4388,8 +3892,23 @@ var CustomCSSResolver = class {
   }
   emit(styles, ctx) {
     const norm = ctx.normalizer ?? normalizer;
+    const normalized = norm.normalizeStyleMap(styles);
+    const universe = styleMapTuples(normalized, norm);
+    if (universe.length === 0) return { classes: [], exact: true, warnings: [] };
+    const chosen = minStringCover(universe, this.#buildCoverVocab());
+    if (chosen && chosen.length > 0) {
+      const reTuples = new Set(styleMapTuples(this.resolve({ classes: chosen }).styles, norm));
+      let ok = reTuples.size === universe.length;
+      if (ok) {
+        for (const t of universe) if (!reTuples.has(t)) {
+          ok = false;
+          break;
+        }
+      }
+      if (ok) return { classes: chosen, exact: true, warnings: [] };
+    }
     const remaining = /* @__PURE__ */ new Map();
-    for (const [ck, block] of norm.normalizeStyleMap(styles).blocks) {
+    for (const [ck, block] of normalized.blocks) {
       for (const [prop, decl] of block.decls) {
         remaining.set(`${ck} ${prop}`, String(decl.value));
       }
@@ -4599,7 +4118,23 @@ var CustomCSSResolver = class {
     if (rawBlocks.size === 0) return emptyStyleMap();
     return normalizer.normalizeStyleMap({ blocks: rawBlocks });
   }
-  /** Build (once) the reverse index used by {@link emit}. */
+  /**
+   * Build (once) the cover vocabulary for the exact-cover engine: every forward-resolvable class
+   * mapped to the {@link styleMapTuples} of its full (condition-keyed, `!important`-aware) declaration
+   * set. Unlike {@link #reverseIndex} this carries ALL style conditions and the important flag, so the
+   * engine can pick a custom class covering hover/media declarations too.
+   */
+  #buildCoverVocab() {
+    if (this.#coverVocab) return this.#coverVocab;
+    const out = [];
+    for (const token of this.#classIndex.keys()) {
+      const tuples = styleMapTuples(this.#resolveTokens([token], [token]), normalizer);
+      if (tuples.length > 0) out.push({ token, tuples });
+    }
+    this.#coverVocab = out;
+    return out;
+  }
+  /** Build (once) the reverse index used by the greedy {@link emit} fallback. */
   #reverseIndex() {
     if (this.#reverse) return this.#reverse;
     const out = [];
@@ -4624,11 +4159,350 @@ function createCssResolver(cssFiles = [], options) {
 var import_node_path = require("path");
 var import_node_url = require("url");
 
+// ../frontend-html/src/backend.ts
+var import_magic_string = __toESM(require("magic-string"), 1);
+function staticTokensOf2(classes) {
+  const out = [];
+  for (const seg of classes.segments) {
+    if (seg.kind === "static") for (const t of seg.tokens) out.push(t.value);
+  }
+  return out;
+}
+function sameTokens2(a, b) {
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i += 1) if (a[i] !== b[i]) return false;
+  return true;
+}
+function primarySource(doc) {
+  for (const sf of doc.sources.values()) {
+    if (typeof sf.text === "string" && sf.text.length > 0) return sf;
+  }
+  return null;
+}
+function collectKept(doc) {
+  const out = [];
+  const seen = /* @__PURE__ */ new Set();
+  const visit = (id) => {
+    if (seen.has(id)) return;
+    seen.add(id);
+    const n = doc.nodes.get(id);
+    if (!n) return;
+    out.push(n);
+    if (n.kind === "element" || n.kind === "fragment") for (const c of n.children) visit(c);
+  };
+  visit(doc.root);
+  return out;
+}
+function strictlyContains(a, b) {
+  if (a.file !== b.file) return false;
+  if (a.start <= b.start && b.end <= a.end) return !(a.start === b.start && a.end === b.end);
+  return false;
+}
+function backrefIds(doc) {
+  const out = [];
+  const max = doc.alloc.peek;
+  for (let i = 1; i < max; i += 1) {
+    const id = i;
+    if (doc.backref.get(id)) out.push(id);
+  }
+  return out;
+}
+function currentTokens(sf, valueSpan) {
+  const raw = sf.text.slice(valueSpan.start, valueSpan.end).trim();
+  const unquoted = raw.replace(/^['"]/, "").replace(/['"]$/, "");
+  return unquoted.split(/\s+/).filter((t) => t.length > 0);
+}
+function editClasses(ms, doc, sf, el) {
+  const classes = el.classes;
+  if (classes.hasDynamic || classes.opaque) return false;
+  const tokens = staticTokensOf2(classes);
+  const valueSpan = classes.valueSpan;
+  if (valueSpan && valueSpan.file === sf.id) {
+    if (sameTokens2(currentTokens(sf, valueSpan), tokens)) return false;
+    const current = sf.text.slice(valueSpan.start, valueSpan.end).trim();
+    const quote = current.startsWith("'") ? "'" : '"';
+    ms.overwrite(valueSpan.start, valueSpan.end, `${quote}${tokens.join(" ")}${quote}`);
+    return true;
+  }
+  if (tokens.length === 0) return false;
+  const openTag = doc.backref.get(el.id)?.openTagSpan;
+  if (!openTag || openTag.file !== sf.id) return false;
+  ms.appendLeft(openTag.start + 1 + el.tag.length, ` class="${tokens.join(" ")}"`);
+  return true;
+}
+function surgicalPrint(doc) {
+  const sf = primarySource(doc);
+  if (!sf) return null;
+  const ms = new import_magic_string.default(sf.text);
+  const kept = collectKept(doc);
+  const keptSpans = [];
+  for (const n of kept) if (n.span && n.span.file === sf.id) keptSpans.push(n.span);
+  const removed = [];
+  for (const id of backrefIds(doc)) {
+    if (doc.nodes.has(id)) continue;
+    const back = doc.backref.get(id);
+    if (!back || back.span.file !== sf.id) continue;
+    const unwrapped = keptSpans.some((k) => strictlyContains(back.span, k));
+    removed.push({ backref: back, unwrapped });
+  }
+  const fullRemovals = removed.filter((r) => !r.unwrapped).map((r) => r.backref.span);
+  for (const r of removed) {
+    const s = r.backref.span;
+    if (fullRemovals.some((f) => f !== s && strictlyContains(f, s))) continue;
+    if (r.unwrapped) {
+      const open = r.backref.openTagSpan;
+      const close = r.backref.closeTagSpan;
+      if (open && open.file === sf.id && open.end > open.start) ms.remove(open.start, open.end);
+      if (close && close.file === sf.id && close.end > close.start) ms.remove(close.start, close.end);
+    } else {
+      ms.remove(s.start, s.end);
+    }
+  }
+  for (const n of kept) if (n.kind === "element") editClasses(ms, doc, sf, n);
+  return ms.toString();
+}
+function doPrint(doc) {
+  return surgicalPrint(doc) ?? "";
+}
+
+// ../frontend-html/src/parse.ts
+var import_node_module3 = require("module");
+
+// ../frontend-html/src/walk.ts
+var HTML_LANGS = ["html"];
+var FILE_ID = 1;
+function looksLikeHtml(id, code) {
+  if (/\.html?$/i.test(id)) return true;
+  const head = code.slice(0, 256).trimStart().toLowerCase();
+  return head.startsWith("<!doctype html") || head.startsWith("<html") || head.startsWith("<");
+}
+var OPAQUE_SUBTREE_TAGS = /* @__PURE__ */ new Set([
+  "script",
+  "style",
+  "template",
+  "svg",
+  "pre",
+  "textarea"
+]);
+function isOpaqueSubtreeTag(tag) {
+  return OPAQUE_SUBTREE_TAGS.has(tag);
+}
+function elementIsOpaque(attrs) {
+  for (const a of attrs) {
+    const n = a.name.toLowerCase();
+    if (n === "id" || n === "contenteditable") return true;
+    if (n.startsWith("on")) return true;
+  }
+  return false;
+}
+function hasEventHandler(attrs) {
+  for (const a of attrs) if (/^on/i.test(a.name)) return true;
+  return false;
+}
+function span(start, end) {
+  return { file: FILE_ID, start, end };
+}
+function attrsLocOf(loc) {
+  if (!loc) return void 0;
+  return loc.startTag?.attrs ?? loc.attrs;
+}
+function classValueSpan(loc, source) {
+  const attrsLoc = attrsLocOf(loc);
+  const cl = attrsLoc?.["class"];
+  if (!cl) return null;
+  const text = source.slice(cl.startOffset, cl.endOffset);
+  const eq = text.indexOf("=");
+  if (eq === -1) return null;
+  let i = eq + 1;
+  while (i < text.length && /\s/.test(text[i])) i += 1;
+  if (i >= text.length) return null;
+  return span(cl.startOffset + i, cl.endOffset);
+}
+
+// ../frontend-html/src/parse.ts
+var cachedParse5 = null;
+function loadParse5() {
+  if (cachedParse5) return cachedParse5;
+  const req = (0, import_node_module3.createRequire)(importMetaUrl);
+  cachedParse5 = req("parse5");
+  return cachedParse5;
+}
+function doParse(code, ctx) {
+  const diagnostics = [];
+  const doc = createDocument("html");
+  const backref = doc.backref;
+  const parse5 = loadParse5();
+  const document2 = parse5.parse(code, { sourceCodeLocationInfo: true });
+  const eol = code.includes("\r\n") ? "\r\n" : "\n";
+  const sourceFile = {
+    id: FILE_ID,
+    path: ctx.id,
+    text: code,
+    frontend: "html",
+    eol,
+    indentUnit: "  ",
+    native: document2
+  };
+  doc.sources.set(FILE_ID, sourceFile);
+  const resolveComputed = (tokens, tag, nodeId, meta) => {
+    if (tokens.length === 0) return emptyStyleMap();
+    const res = ctx.resolver.resolve({ classes: tokens, element: { tagName: tag, namespace: "html" } });
+    if (res.unknown.length > 0) meta.hasUnresolvedClasses = true;
+    for (const w of res.warnings) {
+      diagnostics.push({
+        code: "DF_STYLE_CONFLICT_UNRESOLVED",
+        severity: w.severity,
+        message: w.message,
+        nodeId
+      });
+    }
+    return ctx.normalizer.normalizeStyleMap(res.styles);
+  };
+  const splitTokens = (raw) => raw.split(/\s+/).filter((t) => t.length > 0);
+  const appendChild = (node, parentId, out) => {
+    const name = node.nodeName;
+    if (name === "#text") {
+      const value = node.value ?? "";
+      const id = doc.alloc.next();
+      const loc = node.sourceCodeLocation ?? null;
+      doc.nodes.set(
+        id,
+        createText(id, value, {
+          parent: parentId,
+          span: loc ? span(loc.startOffset, loc.endOffset) : null,
+          collapsible: /^\s*$/.test(value)
+        })
+      );
+      out.push(id);
+      return;
+    }
+    if (name === "#comment") {
+      const id = doc.alloc.next();
+      const loc = node.sourceCodeLocation ?? null;
+      doc.nodes.set(
+        id,
+        createComment(id, node.data ?? "", {
+          parent: parentId,
+          span: loc ? span(loc.startOffset, loc.endOffset) : null
+        })
+      );
+      out.push(id);
+      return;
+    }
+    if (name === "#documentType") return;
+    if (name.startsWith("#")) {
+      for (const c of node.childNodes ?? []) appendChild(c, parentId, out);
+      return;
+    }
+    out.push(buildElement(node, parentId));
+  };
+  const buildElement = (node, parentId) => {
+    const id = doc.alloc.next();
+    const tag = (node.tagName ?? node.nodeName).toLowerCase();
+    const loc = node.sourceCodeLocation ?? null;
+    const attrsArr = node.attrs ?? [];
+    const opaqueSubtree = isOpaqueSubtreeTag(tag);
+    const synthetic = loc == null;
+    const opaque2 = opaqueSubtree || synthetic || elementIsOpaque(attrsArr);
+    const meta = defaultMeta();
+    meta.hasEventHandlers = hasEventHandler(attrsArr);
+    meta.safetyFloor = opaque2 ? 0 : 3;
+    let classes = emptyClassList();
+    let classTokens = [];
+    const entries = /* @__PURE__ */ new Map();
+    const order = [];
+    for (const a of attrsArr) {
+      if (a.name.toLowerCase() === "class") {
+        classTokens = splitTokens(a.value);
+        const valueSpan = classValueSpan(loc, code);
+        const clAttr = attrsLocOf(loc)?.["class"];
+        const seg = {
+          kind: "static",
+          span: valueSpan ?? void 0,
+          tokens: classTokens.map((value) => ({ value }))
+        };
+        classes = {
+          form: "string-literal",
+          segments: [seg],
+          valueSpan,
+          attrSpan: clAttr ? span(clAttr.startOffset, clAttr.endOffset) : void 0,
+          hasDynamic: false,
+          opaque: false,
+          rewritable: valueSpan != null
+        };
+        continue;
+      }
+      const v = a.value;
+      entries.set(a.name, { kind: "static", value: v === "" ? true : v });
+      order.push(a.name);
+    }
+    const attrs = { entries, spreads: [], order };
+    const computed2 = resolveComputed(classTokens, tag, id, meta);
+    const children = [];
+    if (!opaqueSubtree) {
+      for (const c of node.childNodes ?? []) appendChild(c, id, children);
+    }
+    const el = createElement(id, {
+      tag,
+      namespace: "html",
+      isComponent: false,
+      selfClosing: loc ? loc.endTag == null : false,
+      classes,
+      computed: computed2,
+      attrs,
+      children,
+      parent: parentId,
+      span: loc ? span(loc.startOffset, loc.endOffset) : null,
+      meta
+    });
+    doc.nodes.set(id, el);
+    if (loc) {
+      backref.set(id, {
+        nodeId: id,
+        span: span(loc.startOffset, loc.endOffset),
+        openTagSpan: loc.startTag ? span(loc.startTag.startOffset, loc.startTag.endOffset) : null,
+        closeTagSpan: loc.endTag ? span(loc.endTag.startOffset, loc.endTag.endOffset) : null,
+        innerSpan: null,
+        selfClosing: loc.endTag == null
+      });
+    }
+    return id;
+  };
+  const rootFrag = doc.nodes.get(doc.root);
+  appendChild(document2, doc.root, rootFrag.children);
+  return { doc, diagnostics };
+}
+
+// ../frontend-html/src/index.ts
+var htmlFrontend = {
+  name: "html",
+  langs: HTML_LANGS,
+  canParse(id, code) {
+    return looksLikeHtml(id, code);
+  },
+  parse(code, ctx) {
+    return doParse(code, ctx);
+  }
+};
+function createHtmlFrontend() {
+  return htmlFrontend;
+}
+var htmlBackend = {
+  name: "html",
+  langs: HTML_LANGS,
+  print(doc, _plan, _ctx) {
+    return { code: doPrint(doc), map: null, edits: [], diagnostics: [] };
+  }
+};
+function createHtmlBackend() {
+  return htmlBackend;
+}
+
 // ../frontend-jsx/src/frontend-ast.ts
 var import_traverse = __toESM(require("@babel/traverse"), 1);
 var traverse = typeof import_traverse.default === "function" ? import_traverse.default : import_traverse.default.default;
 var JSX_LANGS = ["jsx", "tsx"];
-var FILE_ID = 1;
+var FILE_ID2 = 1;
 function jsxName(node) {
   switch (node.type) {
     case "JSXIdentifier":
@@ -4752,7 +4626,7 @@ function looksLikeJsx(id, code) {
 
 // ../frontend-jsx/src/frontend-parse.ts
 var import_parser = require("@babel/parser");
-function doParse(code, ctx) {
+function doParse2(code, ctx) {
   const diagnostics = [];
   const doc = createDocument("jsx");
   const backref = doc.backref;
@@ -4762,7 +4636,7 @@ function doParse(code, ctx) {
   });
   const eol = code.includes("\r\n") ? "\r\n" : "\n";
   const sourceFile = {
-    id: FILE_ID,
+    id: FILE_ID2,
     path: ctx.id,
     text: code,
     frontend: "jsx",
@@ -4770,23 +4644,23 @@ function doParse(code, ctx) {
     indentUnit: "  ",
     native: ast
   };
-  doc.sources.set(FILE_ID, sourceFile);
+  doc.sources.set(FILE_ID2, sourceFile);
   const spanOf = (node) => {
     if (node.start == null || node.end == null) return null;
-    const span = {
-      file: FILE_ID,
+    const span2 = {
+      file: FILE_ID2,
       start: node.start,
       end: node.end,
       startLoc: node.loc ? { line: node.loc.start.line, column: node.loc.start.column } : void 0,
       endLoc: node.loc ? { line: node.loc.end.line, column: node.loc.end.column } : void 0
     };
-    return span;
+    return span2;
   };
   const sliceOf = (node) => node.start == null || node.end == null ? "" : code.slice(node.start, node.end);
   const internExpr = (node, spread) => {
     const payload = { text: sliceOf(node), spread };
     return doc.exprs.intern({
-      span: spanOf(node) ?? { file: FILE_ID, start: 0, end: 0 },
+      span: spanOf(node) ?? { file: FILE_ID2, start: 0, end: 0 },
       kind: exprKind(node),
       payload
     });
@@ -4832,7 +4706,7 @@ function doParse(code, ctx) {
     }
     return emptyClassList();
   };
-  const staticTokensOf3 = (classes) => {
+  const staticTokensOf4 = (classes) => {
     const out = [];
     for (const seg of classes.segments) {
       if (seg.kind === "static") for (const t of seg.tokens) out.push(t.value);
@@ -4910,7 +4784,7 @@ function doParse(code, ctx) {
     doc.nodes.set(id, createFragment(id, { children, parent: parentId, span: spanOf(node) }));
     backref.set(id, {
       nodeId: id,
-      span: spanOf(node) ?? { file: FILE_ID, start: 0, end: 0 },
+      span: spanOf(node) ?? { file: FILE_ID2, start: 0, end: 0 },
       openTagSpan: spanOf(node.openingFragment),
       closeTagSpan: spanOf(node.closingFragment),
       innerSpan: null,
@@ -4959,13 +4833,14 @@ function doParse(code, ctx) {
     }
     let computed2 = emptyStyleMap();
     if (!classes.hasDynamic) {
-      const tokens = staticTokensOf3(classes);
+      const tokens = staticTokensOf4(classes);
       if (tokens.length > 0) {
         const res = ctx.resolver.resolve({
           classes: tokens,
           element: { tagName: tag, namespace: component ? void 0 : "html" }
         });
         computed2 = ctx.normalizer.normalizeStyleMap(res.styles);
+        if (res.unknown.length > 0) meta.hasUnresolvedClasses = true;
         for (const w of res.warnings) {
           diagnostics.push({
             code: "DF_STYLE_CONFLICT_UNRESOLVED",
@@ -4992,13 +4867,13 @@ function doParse(code, ctx) {
     });
     doc.nodes.set(id, el);
     const inner = children.length > 0 ? spanOf(node.children[0]) && spanOf(node.children.at(-1)) ? {
-      file: FILE_ID,
+      file: FILE_ID2,
       start: spanOf(node.children[0]).start,
       end: spanOf(node.children.at(-1)).end
     } : null : null;
     backref.set(id, {
       nodeId: id,
-      span: spanOf(node) ?? { file: FILE_ID, start: 0, end: 0 },
+      span: spanOf(node) ?? { file: FILE_ID2, start: 0, end: 0 },
       openTagSpan: spanOf(opening),
       closeTagSpan: node.closingElement ? spanOf(node.closingElement) : null,
       innerSpan: inner,
@@ -5008,13 +4883,13 @@ function doParse(code, ctx) {
   };
   const roots = [];
   traverse(ast, {
-    JSXElement(path3) {
-      roots.push(path3.node);
-      path3.skip();
+    JSXElement(path5) {
+      roots.push(path5.node);
+      path5.skip();
     },
-    JSXFragment(path3) {
-      roots.push(path3.node);
-      path3.skip();
+    JSXFragment(path5) {
+      roots.push(path5.node);
+      path5.skip();
     }
   });
   const rootFrag = doc.nodes.get(doc.root);
@@ -5033,7 +4908,7 @@ var jsxFrontend = {
     return looksLikeJsx(id, code);
   },
   parse(code, ctx) {
-    return doParse(code, ctx);
+    return doParse2(code, ctx);
   }
 };
 function createJsxFrontend() {
@@ -5041,7 +4916,7 @@ function createJsxFrontend() {
 }
 
 // ../frontend-jsx/src/backend.ts
-var import_magic_string = __toESM(require("magic-string"), 1);
+var import_magic_string2 = __toESM(require("magic-string"), 1);
 var JSX_LANGS2 = ["jsx", "tsx"];
 function exprText(doc, ref) {
   const rec = doc.exprs.get(ref);
@@ -5055,20 +4930,20 @@ function exprText(doc, ref) {
   }
   return { text: "", spread: false };
 }
-function staticTokensOf2(classes) {
+function staticTokensOf3(classes) {
   const out = [];
   for (const seg of classes.segments) {
     if (seg.kind === "static") for (const t of seg.tokens) out.push(t.value);
   }
   return out;
 }
-function primarySource(doc) {
+function primarySource2(doc) {
   for (const sf of doc.sources.values()) {
     if (typeof sf.text === "string" && sf.text.length > 0) return sf;
   }
   return null;
 }
-function collectKept(doc) {
+function collectKept2(doc) {
   const out = [];
   const seen = /* @__PURE__ */ new Set();
   const visit = (id) => {
@@ -5082,15 +4957,15 @@ function collectKept(doc) {
   visit(doc.root);
   return out;
 }
-function strictlyContains(a, b) {
+function strictlyContains2(a, b) {
   if (a.file !== b.file) return false;
   if (a.start <= b.start && b.end <= a.end) return !(a.start === b.start && a.end === b.end);
   return false;
 }
-function editClasses(ms, doc, sf, el) {
+function editClasses2(ms, doc, sf, el) {
   const classes = el.classes;
   if (classes.hasDynamic || classes.opaque) return false;
-  const tokens = staticTokensOf2(classes);
+  const tokens = staticTokensOf3(classes);
   const valueSpan = classes.valueSpan;
   if (valueSpan && valueSpan.file === sf.id) {
     const current = sf.text.slice(valueSpan.start, valueSpan.end);
@@ -5154,10 +5029,10 @@ function transferKeyOnUnwrap(ms, doc, sf, region, kept) {
   const inside = [];
   for (const n of kept) {
     if (n.kind !== "element" || !n.span || n.span.file !== sf.id) continue;
-    if (strictlyContains(region.span, n.span)) inside.push(n);
+    if (strictlyContains2(region.span, n.span)) inside.push(n);
   }
   const maximal = inside.filter(
-    (n) => !inside.some((o) => o !== n && o.span && n.span && strictlyContains(o.span, n.span))
+    (n) => !inside.some((o) => o !== n && o.span && n.span && strictlyContains2(o.span, n.span))
   );
   if (maximal.length !== 1) return;
   const child = maximal[0];
@@ -5166,25 +5041,25 @@ function transferKeyOnUnwrap(ms, doc, sf, region, kept) {
   if (extractKeyAttr(sf.text.slice(childOpen.start, childOpen.end))) return;
   ms.appendLeft(childOpen.start + 1 + child.tag.length, ` ${keyAttr}`);
 }
-function surgicalPrint(doc) {
-  const sf = primarySource(doc);
+function surgicalPrint2(doc) {
+  const sf = primarySource2(doc);
   if (!sf) return null;
-  const ms = new import_magic_string.default(sf.text);
-  const kept = collectKept(doc);
+  const ms = new import_magic_string2.default(sf.text);
+  const kept = collectKept2(doc);
   const keptSpans = [];
   for (const n of kept) if (n.span && n.span.file === sf.id) keptSpans.push(n.span);
   const removed = [];
-  for (const id of backrefIds(doc)) {
+  for (const id of backrefIds2(doc)) {
     if (doc.nodes.has(id)) continue;
     const back = doc.backref.get(id);
     if (!back || back.span.file !== sf.id) continue;
-    const unwrapped = keptSpans.some((k) => strictlyContains(back.span, k));
+    const unwrapped = keptSpans.some((k) => strictlyContains2(back.span, k));
     removed.push({ backref: back, unwrapped });
   }
   const fullRemovals = removed.filter((r) => !r.unwrapped).map((r) => r.backref.span);
   for (const r of removed) {
-    const span = r.backref.span;
-    const coveredByFull = fullRemovals.some((f) => f !== span && strictlyContains(f, span));
+    const span2 = r.backref.span;
+    const coveredByFull = fullRemovals.some((f) => f !== span2 && strictlyContains2(f, span2));
     if (coveredByFull) continue;
     if (r.unwrapped) {
       transferKeyOnUnwrap(ms, doc, sf, r.backref, kept);
@@ -5195,15 +5070,15 @@ function surgicalPrint(doc) {
         ms.remove(close.start, close.end);
       }
     } else {
-      ms.remove(span.start, span.end);
+      ms.remove(span2.start, span2.end);
     }
   }
   for (const n of kept) {
-    if (n.kind === "element") editClasses(ms, doc, sf, n);
+    if (n.kind === "element") editClasses2(ms, doc, sf, n);
   }
   return ms.toString();
 }
-function backrefIds(doc) {
+function backrefIds2(doc) {
   const out = [];
   const max = doc.alloc.peek;
   for (let i = 1; i < max; i += 1) {
@@ -5218,7 +5093,7 @@ function classText(doc, classes) {
   if (dynamic && dynamic.kind === "dynamic") {
     return `className={${exprText(doc, dynamic.expr).text}}`;
   }
-  const tokens = staticTokensOf2(classes);
+  const tokens = staticTokensOf3(classes);
   return `className="${tokens.join(" ")}"`;
 }
 function attrText(doc, name, value) {
@@ -5271,15 +5146,15 @@ function rePrint(doc) {
   if (!root || root.kind !== "fragment") return printNode(doc, doc.root);
   return root.children.map((c) => printNode(doc, c)).join("");
 }
-function doPrint(doc) {
-  const surgical = surgicalPrint(doc);
+function doPrint2(doc) {
+  const surgical = surgicalPrint2(doc);
   return surgical ?? rePrint(doc);
 }
 var jsxBackend = {
   name: "babel-jsx",
   langs: JSX_LANGS2,
   print(doc, _plan, _ctx) {
-    const code = doPrint(doc);
+    const code = doPrint2(doc);
     return { code, map: null, edits: [], diagnostics: [] };
   }
 };
@@ -5288,12 +5163,38 @@ function createJsxBackend() {
 }
 
 // src/pipeline-run.ts
+function bytes(s) {
+  return Buffer.byteLength(s, "utf8");
+}
+function countClassTokens(code) {
+  let total = 0;
+  const re = /\b(?:className|class)\s*=\s*"([^"]*)"/g;
+  let m;
+  while ((m = re.exec(code)) !== null) {
+    total += m[1].split(/\s+/).filter((t) => t.length > 0).length;
+  }
+  return total;
+}
+function computeStats(code, out, nodesIn, nodesOut) {
+  const classesBefore = countClassTokens(code);
+  const classesAfter = countClassTokens(out);
+  return {
+    nodesRemoved: Math.max(0, nodesIn - nodesOut),
+    classesSaved: Math.max(0, classesBefore - classesAfter),
+    bytesSaved: bytes(code) - bytes(out)
+  };
+}
 function jsxKindOf(id) {
   const clean = id.split("?", 1)[0] ?? id;
   if (clean.endsWith(".tsx")) return "tsx";
   if (clean.endsWith(".jsx")) return "jsx";
   return null;
 }
+function htmlKindOf(id) {
+  const clean = (id.split("?", 1)[0] ?? id).toLowerCase();
+  if (clean.endsWith(".html") || clean.endsWith(".htm")) return "html";
+  return null;
+}
 function eolOf2(doc) {
   for (const src of doc.sources.values()) return src.eol;
   return "\n";
@@ -5358,12 +5259,85 @@ function finishPipeline(optimized, id, resolver) {
 }
 function runJsxPipeline(code, id, kind, resolver, patterns, safety) {
   const { doc, ctx, passes } = preparePipeline(code, id, kind, resolver, patterns, safety, "provably-safe");
+  const nodesIn = doc.nodes.size;
+  const { doc: optimized } = runPasses(doc, passes, ctx);
+  const out = finishPipeline(optimized, id, resolver);
+  return { code: out, stats: computeStats(code, out, nodesIn, optimized.nodes.size) };
+}
+function prepareHtml(code, id, resolver, patterns, safety, gate) {
+  const parsed = createHtmlFrontend().parse(code, {
+    id,
+    kind: "html",
+    resolver,
+    normalizer,
+    config: {},
+    onDiagnostic: () => {
+    }
+  });
+  const doc = parsed.doc;
+  const ctx = {
+    doc,
+    safetyCeiling: safety,
+    normalizer,
+    selectors: buildSelectorIndex(doc, resolver),
+    resolver,
+    gate
+  };
+  return { doc, ctx, passes: buildPasses(patterns) };
+}
+function finishHtmlPipeline(optimized, id, resolver) {
+  syncClassesFromComputed(optimized, resolver, normalizer);
+  const printed = createHtmlBackend().print(
+    optimized,
+    { moduleId: id, ops: [], provenance: /* @__PURE__ */ new Map() },
+    {
+      normalizer,
+      resolver,
+      sink: createSyntheticSink(),
+      eol: eolOf2(optimized),
+      onDiagnostic: () => {
+      }
+    }
+  );
+  return printed.code;
+}
+function runHtmlPipeline(code, id, resolver, patterns, safety) {
+  const { doc, ctx, passes } = prepareHtml(code, id, resolver, patterns, safety, "provably-safe");
+  const nodesIn = doc.nodes.size;
   const { doc: optimized } = runPasses(doc, passes, ctx);
-  return finishPipeline(optimized, id, resolver);
+  const out = finishHtmlPipeline(optimized, id, resolver);
+  return { code: out, stats: computeStats(code, out, nodesIn, optimized.nodes.size) };
+}
+
+// src/summary.ts
+function zeroStats() {
+  return { nodesRemoved: 0, classesSaved: 0, bytesSaved: 0 };
+}
+function emptyTotals() {
+  return { files: 0, nodesRemoved: 0, classesCompressed: 0, bytesSaved: 0 };
+}
+function addStats(t, s, changed) {
+  if (!changed) return;
+  t.files += 1;
+  t.nodesRemoved += s.nodesRemoved;
+  t.classesCompressed += s.classesSaved;
+  t.bytesSaved += s.bytesSaved;
+}
+var RULE = `  ${"\u2500".repeat(32)}`;
+var TOTALS_KEY = /* @__PURE__ */ Symbol.for("domflax.buildTotals");
+function accumulateOnCompilation(compilation, stats, changed) {
+  if (compilation === null || typeof compilation !== "object") return;
+  const bag = compilation;
+  let totals = bag[TOTALS_KEY];
+  if (!totals) {
+    totals = emptyTotals();
+    bag[TOTALS_KEY] = totals;
+  }
+  addStats(totals, stats, changed);
 }
 
 // src/index.ts
-var DEFAULT_INCLUDE = [".jsx", ".tsx", ".html"];
+var DEFAULT_INCLUDE = [".jsx", ".tsx", ".html", ".htm"];
 function resolveOptions(options) {
   return {
     provider: options.provider ?? "auto",
@@ -5397,11 +5371,17 @@ function createDomflax(options = {}) {
     },
     patterns,
     transform(code, id) {
-      if (!isSupported(id, resolved.include)) return { code, map: null };
+      if (!isSupported(id, resolved.include)) return { code, map: null, stats: zeroStats() };
       const kind = jsxKindOf(id);
-      if (kind === null) return { code, map: null };
-      const out = runJsxPipeline(code, id, kind, getResolver(), patterns, resolved.safety);
-      return { code: out, map: null };
+      if (kind !== null) {
+        const out = runJsxPipeline(code, id, kind, getResolver(), patterns, resolved.safety);
+        return { code: out.code, map: null, stats: out.stats };
+      }
+      if (htmlKindOf(id) !== null) {
+        const out = runHtmlPipeline(code, id, getResolver(), patterns, resolved.safety);
+        return { code: out.code, map: null, stats: out.stats };
+      }
+      return { code, map: null, stats: zeroStats() };
     }
   };
 }
@@ -5420,6 +5400,8 @@ function engineFor(options) {
 function domflaxLoader(source) {
   const options = this.getOptions?.() ?? {};
   const engine = engineFor(options);
-  return engine.transform(source, this.resourcePath).code;
+  const out = engine.transform(source, this.resourcePath);
+  accumulateOnCompilation(this._compilation, out.stats, out.code !== source);
+  return out.code;
 }
 //# sourceMappingURL=webpack-loader.cjs.map