domflax 0.1.4 → 0.2.0

package/dist/cli.cjs

@@ -175,8 +175,8 @@ init_cjs_shims();
 
 // ../cli/src/index.ts
 init_cjs_shims();
-var import_node_fs4 = require("fs");
-var path9 = __toESM(require("path"), 1);
+var import_node_fs6 = require("fs");
+var path11 = __toESM(require("path"), 1);
 
 // ../cli/src/options.ts
 init_cjs_shims();
@@ -210,6 +210,7 @@ function parseInvocation(argv) {
       css: { type: "string", multiple: true },
       "dry-run": { type: "boolean", default: false },
       report: { type: "boolean", default: false },
+      details: { type: "boolean", default: false },
       "dangerously-overwrite-source": { type: "boolean", default: false },
       "no-git-check": { type: "boolean", default: false },
       "no-interactive": { type: "boolean", default: false },
@@ -231,6 +232,7 @@ function parseInvocation(argv) {
     css: values.css ?? [],
     dryRun: values["dry-run"] === true,
     report: values.report === true,
+    details: values.details === true,
     dangerouslyOverwriteSource: values["dangerously-overwrite-source"] === true,
     noGitCheck: values["no-git-check"] === true,
     interactive: values["no-interactive"] !== true && values.yes !== true,
@@ -247,7 +249,7 @@ function shouldPrompt(options, isTty) {
 var USAGE = [
   "Usage: domflax [paths...] [options]",
   "",
-  "Optimizes .jsx/.tsx files (flatten redundant wrappers + compress class sets).",
+  "Optimizes .jsx/.tsx/.html files (flatten redundant wrappers + compress class sets).",
   "Source is READ-ONLY by default \u2014 output goes to --out or ./domflax-out.",
   "",
   "Arguments:",
@@ -259,6 +261,7 @@ var USAGE = [
   "  --css <file...>                stylesheets feeding the custom-CSS provider",
   "  --dry-run                      print per-file diffs; write nothing",
   "  --report                       print a summary of what changed",
+  "  --details                      print per-file optimization stats (nodes/classes/bytes)",
   "  --dangerously-overwrite-source overwrite source in place (needs a clean git tree)",
   "  --no-git-check                 skip the clean-git-tree gate",
   "  --safety <0|1|2|3>             optimization aggressiveness (default: 2)",
@@ -332,6 +335,7 @@ function runPool(files, init, plan, onWrote) {
   const workerPath = resolveWorkerPath();
   const totals = emptyTotals();
   const wrote = [];
+  const changedFiles = [];
   const errors = [];
   let failures = 0;
   const budgetBytes = plan.budgetMB * 1024 * 1024;
@@ -340,7 +344,7 @@ function runPool(files, init, plan, onWrote) {
   const total = files.length;
   let respawns = 0;
   const maxRespawns = total + plan.workers + 8;
-  return new Promise((resolve6) => {
+  return new Promise((resolve7) => {
     const handles = /* @__PURE__ */ new Set();
     const finishIfDone = () => {
       if (completed < total) return;
@@ -354,7 +358,7 @@ function runPool(files, init, plan, onWrote) {
         }
       }
       handles.clear();
-      resolve6({ totals, failures, wrote, errors });
+      resolve7({ totals, failures, wrote, changedFiles, errors });
     };
     const recordFailure = (file, error) => {
       failures += 1;
@@ -394,6 +398,7 @@ function runPool(files, init, plan, onWrote) {
         addStats(totals, msg.stats, msg.changed);
         if (msg.wrote) {
           wrote.push(msg.wrote);
+          changedFiles.push({ dest: msg.wrote, stats: msg.stats });
           onWrote?.(msg.wrote);
         }
       } else {
@@ -577,6 +582,7 @@ function defaultMeta(safetyFloor = 0) {
     hasDynamicChildren: false,
     isComponent: false,
     hasDangerousHtml: false,
+    hasUnresolvedClasses: false,
     targetedByCombinator: false,
     targetedByStructuralPseudo: false,
     selectorDependents: 0,
@@ -1624,6 +1630,9 @@ 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;
@@ -1927,15 +1936,26 @@ function residualStyle(computed2, covered, norm) {
   }
   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) continue;
-    if (!el.meta.styleDirty) 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);
-    const retained = tokens.filter((t) => !resolver.selectorUsage(t).droppable);
+    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 };
@@ -1946,7 +1966,7 @@ function syncClassesFromComputed(doc, resolver, norm) {
     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);
@@ -1958,10 +1978,99 @@ 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
+init_cjs_shims();
+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 b3 = bitOf.get(t);
+      if (b3 === void 0) {
+        ok = false;
+        break;
+      }
+      mask |= 1 << b3;
+    }
+    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 b3 = 0; b3 < n; b3 += 1) if (c.mask & 1 << b3) byBit[b3].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 b3 = 0;
+    while (b3 < n && mask & 1 << b3) b3 += 1;
+    for (const ci of byBit[b3]) {
+      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 m2 = full;
+  while (m2 !== 0) {
+    const ci = fromCand[m2];
+    if (ci < 0) return null;
+    chosen.push(cands[ci].token);
+    m2 = fromMask[m2];
+  }
+  return [...new Set(chosen)].sort();
+}
+
 // ../frontend-html/src/index.ts
 init_cjs_shims();
 
@@ -2153,9 +2262,10 @@ function doParse(code, ctx) {
     native: document2
   };
   doc.sources.set(FILE_ID, sourceFile);
-  const resolveComputed = (tokens, tag, nodeId) => {
+  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 w2 of res.warnings) {
       diagnostics.push({
         code: "DF_STYLE_CONFLICT_UNRESOLVED",
@@ -2245,7 +2355,7 @@ function doParse(code, ctx) {
       order.push(a.name);
     }
     const attrs = { entries, spreads: [], order };
-    const computed2 = resolveComputed(classTokens, tag, id);
+    const computed2 = resolveComputed(classTokens, tag, id, meta);
     const children = [];
     if (!opaqueSubtree) {
       for (const c of node.childNodes ?? []) appendChild(c, id, children);
@@ -2656,6 +2766,7 @@ function doParse2(code, ctx) {
           element: { tagName: tag, namespace: component ? void 0 : "html" }
         });
         computed2 = ctx.normalizer.normalizeStyleMap(res.styles);
+        if (res.unknown.length > 0) meta.hasUnresolvedClasses = true;
         for (const w2 of res.warnings) {
           diagnostics.push({
             code: "DF_STYLE_CONFLICT_UNRESOLVED",
@@ -2698,13 +2809,13 @@ function doParse2(code, ctx) {
   };
   const roots = [];
   traverse(ast, {
-    JSXElement(path10) {
-      roots.push(path10.node);
-      path10.skip();
+    JSXElement(path12) {
+      roots.push(path12.node);
+      path12.skip();
     },
-    JSXFragment(path10) {
-      roots.push(path10.node);
-      path10.skip();
+    JSXFragment(path12) {
+      roots.push(path12.node);
+      path12.skip();
     }
   });
   const rootFrag = doc.nodes.get(doc.root);
@@ -3069,6 +3180,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",
@@ -3086,8 +3209,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;
@@ -3121,6 +3271,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);
@@ -3130,6 +3281,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) {
@@ -3287,7 +3451,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",
@@ -3313,6 +3482,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()) {
@@ -3530,7 +3700,163 @@ init_cjs_shims();
 // ../patterns/src/_registry.generated.ts
 init_cjs_shims();
 
-// ../patterns/src/library/flatten/display-contents-wrapper.pattern.ts
+// ../patterns/src/library/flex/flex-center-wrapper.pattern.ts
+init_cjs_shims();
+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
+init_cjs_shims();
+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 m2 = parent.meta;
+  if (m2.hasKey || m2.hasRef || m2.hasEventHandlers || m2.hasDynamicChildren || m2.hasDangerousHtml || m2.hasSpreadAttrs || m2.isComponent) {
+    return false;
+  }
+  if (m2.targetedByCombinator || m2.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
+init_cjs_shims();
+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
 init_cjs_shims();
 function asEl(node) {
   const n = node;
@@ -3555,7 +3881,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",
@@ -3595,7 +3921,7 @@ var displayContentsWrapper = definePattern({
   }
 });
 
-// ../patterns/src/library/flatten/empty-style-div.pattern.ts
+// ../patterns/src/library/wrapper/empty-style-div.pattern.ts
 init_cjs_shims();
 function asEl2(node) {
   const n = node;
@@ -3628,7 +3954,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",
@@ -3667,376 +3993,104 @@ var emptyStyleDiv = definePattern({
   }
 });
 
-// ../patterns/src/library/flatten/flex-center-wrapper.pattern.ts
+// ../patterns/src/library/wrapper/inherited-only-wrapper.pattern.ts
 init_cjs_shims();
-var flexCenterWrapper = definePattern({
-  name: "flex-center-wrapper",
-  category: "flatten/flex-center-wrapper",
+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 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.
+  rewrite: { flattenInto: "child" },
   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>'
+        // `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: [
-      // 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>'
+      // `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
+// ../patterns/src/library/wrapper/passthrough-wrapper.pattern.ts
 init_cjs_shims();
-var inlineFlexCenterWrapper = definePattern({
-  name: "inline-flex-center-wrapper",
-  category: "flatten/inline-flex-center-wrapper",
+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 m2 = metaOf2(node);
+  if (!m2) return false;
+  return m2.establishesBox || m2.establishesFormattingContext || m2.establishesStackingContext || m2.isContainingBlock || m2.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: "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
-init_cjs_shims();
-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 b3 = normalizer.normalizeStyleMap(inner);
-  for (const [key, blockA] of a.blocks) {
-    const blockB = b3.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
-init_cjs_shims();
-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 b3 = normalizer.normalizeStyleMap(inner);
-  for (const [key, blockA] of a.blocks) {
-    const blockB = b3.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
-init_cjs_shims();
-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 m2 = metaOf2(node);
-  if (!m2) return false;
-  return m2.establishesBox || m2.establishesFormattingContext || m2.establishesStackingContext || m2.isContainingBlock || m2.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."
+    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",
@@ -4047,1244 +4101,124 @@ var passthroughWrapper = definePattern({
       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
-init_cjs_shims();
-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 m2 = parent.meta;
-  if (m2.hasKey || m2.hasRef || m2.hasEventHandlers || m2.hasDynamicChildren || m2.hasDangerousHtml || m2.hasSpreadAttrs || m2.isComponent) {
-    return false;
-  }
-  if (m2.targetedByCombinator || m2.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
-init_cjs_shims();
-function asEl3(node) {
-  const n = node;
-  return n.kind === "element" ? n : null;
-}
-function metaOf3(node) {
-  return asEl3(node)?.meta ?? null;
-}
-var establishesContext2 = (node) => {
-  const m2 = metaOf3(node);
-  if (!m2) return false;
-  return m2.establishesBox || m2.establishesFormattingContext || m2.establishesStackingContext || m2.isContainingBlock || m2.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
-init_cjs_shims();
-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((d3) => d3.important === important)) return null;
-  const value = String(corners[0].value);
-  if (NON_COLLAPSIBLE_VALUES.has(value)) return null;
-  if (!corners.every((d3) => String(d3.value) === value)) return null;
-  const relative4 = corners.some((d3) => d3.relativeToParent);
-  return { value, important, relative: relative4 };
-}
-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
-init_cjs_shims();
-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 relative4 = sides.some((d3) => d3.relativeToParent);
-  return { value, important: top.important, relative: relative4 };
-}
-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
-init_cjs_shims();
-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 o2 of decl.shadowed ?? []) {
-        if (o2.kind === "class") shadowed.add(o2.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
-init_cjs_shims();
-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
-init_cjs_shims();
-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, b3) {
-  return a !== void 0 && b3 !== void 0 && a.value === b3.value && a.important === b3.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
-init_cjs_shims();
-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((p2) => base.decls.get(p2));
-      if (sides.some((d3) => d3 === 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
-init_cjs_shims();
-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
-init_cjs_shims();
-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 x2 = base.decls.get(OVERSCROLL_X);
-      const y3 = base.decls.get(OVERSCROLL_Y);
-      if (!x2 || !y3) return null;
-      if (x2.important !== y3.important) return null;
-      const value = String(x2.value);
-      if (NON_COLLAPSIBLE_VALUES2.has(value)) return null;
-      if (value !== String(y3.value)) return null;
-      const shorthand = {
-        property: OVERSCROLL,
-        value: x2.value,
-        important: x2.important,
-        relativeToParent: x2.relativeToParent || y3.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
-init_cjs_shims();
-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 relative4 = sides.some((d3) => d3.relativeToParent);
-  return { value, important: top.important, relative: relative4 };
-}
-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
-init_cjs_shims();
-var ALIGN_ITEMS2 = "align-items";
-var JUSTIFY_ITEMS2 = "justify-items";
-var PLACE_ITEMS2 = "place-items";
-var ALIGN_CONTENT = "align-content";
-var JUSTIFY_CONTENT2 = "justify-content";
-var PLACE_CONTENT = "place-content";
-var BASE_KEY8 = conditionKey(BASE_CONDITION);
-function samePair(a, b3) {
-  return a !== void 0 && b3 !== void 0 && a.value === b3.value && a.important === b3.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_ITEMS2);
-      const justifyItems = base.decls.get(JUSTIFY_ITEMS2);
-      const alignContent = base.decls.get(ALIGN_CONTENT);
-      const justifyContent = base.decls.get(JUSTIFY_CONTENT2);
-      const next = new Map(base.decls);
-      let collapsed = false;
-      if (samePair(alignItems, justifyItems)) {
-        next.delete(ALIGN_ITEMS2);
-        next.delete(JUSTIFY_ITEMS2);
-        next.set(PLACE_ITEMS2, placeDecl(PLACE_ITEMS2, alignItems));
-        collapsed = true;
-      }
-      if (samePair(alignContent, justifyContent)) {
-        next.delete(ALIGN_CONTENT);
-        next.delete(JUSTIFY_CONTENT2);
-        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
-init_cjs_shims();
-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((d3) => d3.important === important)) return null;
-  const value = String(sides[0].value);
-  if (NON_COLLAPSIBLE_VALUES3.has(value)) return null;
-  if (!sides.every((d3) => String(d3.value) === value)) return null;
-  const relative4 = sides.some((d3) => d3.relativeToParent);
-  return { value, important, relative: relative4 };
-}
-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
-init_cjs_shims();
-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((d3) => d3.important === important)) return null;
-  const value = String(sides[0].value);
-  if (NON_COLLAPSIBLE_VALUES4.has(value)) return null;
-  if (!sides.every((d3) => String(d3.value) === value)) return null;
-  const relative4 = sides.some((d3) => d3.relativeToParent);
-  return { value, important, relative: relative4 };
-}
-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 };
-}
-var scrollPaddingShorthand = definePattern({
-  name: "scroll-padding-shorthand",
-  category: "compress/scroll-padding-shorthand",
-  safety: 1,
-  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."
-  },
-  rewrite: {
-    rewriteClasses(computed2) {
-      const fold = analyzeScrollPadding(computed2);
-      return fold ? withFoldedScrollPadding(computed2, fold) : null;
-    }
+      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
+// ../patterns/src/library/wrapper/redundant-inline-wrapper.pattern.ts
 init_cjs_shims();
-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 };
+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 m2 = metaOf3(node);
+  if (!m2) return false;
+  return m2.establishesBox || m2.establishesFormattingContext || m2.establishesStackingContext || m2.isContainingBlock || m2.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 w2 = base?.decls.get(WIDTH);
-      const h2 = base?.decls.get(HEIGHT);
-      if (!w2 || !h2) return null;
-      if (w2.important !== h2.important) return null;
-      if (NON_COLLAPSIBLE_VALUES5.has(String(w2.value))) return null;
-      if (w2.value !== h2.value) return null;
-      return withSizeShorthand(computed2, String(w2.value), w2.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-css/src/index.ts
@@ -5393,11 +4327,11 @@ var import_node_fs2 = require("fs");
 function isPlainClassToken(token) {
   return token.length > 0 && !/[\s.#>+~:[\]()]/.test(token);
 }
-function readCssPath(path10) {
+function readCssPath(path12) {
   try {
-    return { id: path10, css: (0, import_node_fs2.readFileSync)(path10, "utf8") };
+    return { id: path12, css: (0, import_node_fs2.readFileSync)(path12, "utf8") };
   } catch (cause) {
-    throw new Error(`resolver-css: cannot read CSS file "${path10}"`, { cause });
+    throw new Error(`resolver-css: cannot read CSS file "${path12}"`, { cause });
   }
 }
 function deriveFingerprint(provider, files) {
@@ -5453,6 +4387,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);
@@ -5485,8 +4421,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));
       }
@@ -5696,7 +4647,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 = [];
@@ -5776,14 +4743,315 @@ function synthesizeResidual(remaining, ctx) {
 // ../resolver-tailwind/src/tailwind/engine.ts
 init_cjs_shims();
 var import_node_module3 = require("module");
+var path6 = __toESM(require("path"), 1);
+
+// ../resolver-tailwind/src/tailwind/engine-v4.ts
+init_cjs_shims();
+var import_node_fs4 = require("fs");
+var path5 = __toESM(require("path"), 1);
+
+// ../resolver-tailwind/src/tailwind/v4-bridge.ts
+init_cjs_shims();
+var import_node_child_process2 = require("child_process");
+var import_node_fs3 = require("fs");
+var import_node_os = require("os");
 var path4 = __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_fs3.mkdtempSync)(path4.join((0, import_node_os.tmpdir)(), "domflax-tw4-"));
+    const scriptPath = path4.join(dir, "bridge.mjs");
+    const payloadPath = path4.join(dir, "payload.json");
+    (0, import_node_fs3.writeFileSync)(scriptPath, CHILD_SOURCE, "utf8");
+    (0, import_node_fs3.writeFileSync)(payloadPath, JSON.stringify(payload), "utf8");
+    const stdout = (0, import_node_child_process2.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(
+      (e2) => Array.isArray(e2) && typeof e2[0] === "string" && typeof e2[1] === "string"
+    );
+    return entries.length > 0 ? { entries } : null;
+  } catch {
+    return null;
+  } finally {
+    if (dir) {
+      try {
+        (0, import_node_fs3.rmSync)(dir, { recursive: true, force: true });
+      } catch {
+      }
+    }
+  }
+}
+
+// ../resolver-tailwind/src/tailwind/v4-css.ts
+init_cjs_shims();
+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 m2 = /^@([A-Za-z-]+)\s*([\s\S]*)$/.exec(prelude);
+  if (!m2) return { name: prelude.slice(1).trim(), params: "" };
+  return { name: m2[1].toLowerCase(), params: m2[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 d3 = toDecl(buf);
+      if (d3) nodes.push(d3);
+      return { nodes, next: i + 1 };
+    } else if (c === ";") {
+      const d3 = toDecl(buf);
+      if (d3) nodes.push(d3);
+      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((d3) => ({
+    type: "decl",
+    prop: d3.prop,
+    value: d3.value,
+    important: d3.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_fs4.readdirSync)(dir);
+  } catch {
+    return null;
+  }
+  for (const name of names) {
+    if (!name.toLowerCase().endsWith(".css")) continue;
+    const file = path5.join(dir, name);
+    try {
+      if (!(0, import_node_fs4.statSync)(file).isFile()) continue;
+      const css = (0, import_node_fs4.readFileSync)(file, "utf8");
+      if (ENTRY_RE.test(css)) return { css, base: path5.dirname(file) };
+    } catch {
+    }
+  }
+  return null;
+}
+function findCssEntries(projectRoot) {
+  const out = [];
+  const seen = /* @__PURE__ */ new Set();
+  for (const rel of SEARCH_DIRS) {
+    const dir = path5.resolve(projectRoot, rel);
+    if (seen.has(dir) || [...SKIP_DIRS].some((s) => dir.includes(`${path5.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 moduleBase2() {
   return typeof __filename === "string" ? __filename : importMetaUrl;
 }
 function projectRequire(projectRoot) {
   const bases = [];
-  if (projectRoot) bases.push(path4.join(projectRoot, "__domflax__.js"));
-  bases.push(path4.join(process.cwd(), "__domflax__.js"));
+  if (projectRoot) bases.push(path6.join(projectRoot, "__domflax__.js"));
+  bases.push(path6.join(process.cwd(), "__domflax__.js"));
   bases.push(moduleBase2());
   for (const base of bases) {
     try {
@@ -5795,14 +5063,36 @@ function projectRequire(projectRoot) {
   }
   return null;
 }
+var FIRST_UNSUPPORTED_MAJOR = 4;
+function majorOf(version) {
+  const m2 = /^\s*(\d+)/.exec(version);
+  return m2 ? Number(m2[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");
@@ -5811,15 +5101,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 };
   }
 }
 
@@ -6005,22 +5299,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) {
@@ -6129,9 +5440,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 d3 = child;
+            if (typeof d3.value !== "string") continue;
+            for (const decl of normalizer.normalizeDeclaration(d3.prop, d3.value, d3.important === true)) {
+              const k3 = tupleKey(baseCk, String(decl.property), String(decl.value), decl.important);
+              if (!seen.has(k3)) {
+                seen.add(k3);
+                tuples.push(k3);
+              }
+            }
+          }
+          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;
@@ -6161,13 +5538,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;
@@ -6207,13 +5584,13 @@ function createTailwindResolver(config) {
 }
 
 // ../cli/src/transform.ts
-var path6 = __toESM(require("path"), 1);
+var path8 = __toESM(require("path"), 1);
 
 // ../cli/src/html-css.ts
 init_cjs_shims();
 var import_node_crypto = require("crypto");
-var import_node_fs3 = require("fs");
-var path5 = __toESM(require("path"), 1);
+var import_node_fs5 = require("fs");
+var path7 = __toESM(require("path"), 1);
 function isRemoteHref(href) {
   const h2 = href.trim();
   return h2.startsWith("//") || /^[a-z][a-z0-9+.-]*:/i.test(h2);
@@ -6250,16 +5627,16 @@ function extractInlineStyles(html) {
   return out;
 }
 function extractHtmlStylesheets(htmlCode, htmlAbsPath) {
-  const dir = path5.dirname(path5.resolve(htmlAbsPath));
+  const dir = path7.dirname(path7.resolve(htmlAbsPath));
   const files = [];
   const seen = /* @__PURE__ */ new Set();
   for (const rawHref of extractLinkHrefs(htmlCode)) {
     const href = (rawHref.split(/[?#]/, 1)[0] ?? "").trim();
     if (!href || isRemoteHref(href)) continue;
-    const abs = path5.resolve(dir, href);
+    const abs = path7.resolve(dir, href);
     if (seen.has(abs)) continue;
     seen.add(abs);
-    if ((0, import_node_fs3.existsSync)(abs)) files.push(abs);
+    if ((0, import_node_fs5.existsSync)(abs)) files.push(abs);
   }
   return { files, inline: extractInlineStyles(htmlCode) };
 }
@@ -6354,7 +5731,7 @@ function createTransform(options) {
     if (options.provider !== "custom" || htmlKindOf(id) === null) return globalResolver;
     const { files: localFiles, inline } = extractHtmlStylesheets(code, id);
     if (localFiles.length === 0 && inline.length === 0) return globalResolver;
-    const globalPaths = options.css.map((p2) => path6.resolve(p2));
+    const globalPaths = options.css.map((p2) => path8.resolve(p2));
     const sortedPaths = [.../* @__PURE__ */ new Set([...globalPaths, ...localFiles])].sort();
     const key = cssSetKey(sortedPaths, inline);
     let resolver = resolverCache.get(key);
@@ -6466,9 +5843,9 @@ function createTransform(options) {
 // ../cli/src/walk.ts
 init_cjs_shims();
 var fs = __toESM(require("fs"), 1);
-var path7 = __toESM(require("path"), 1);
+var path9 = __toESM(require("path"), 1);
 var SUPPORTED_EXTS = [".jsx", ".tsx", ".html", ".htm"];
-var SKIP_DIRS = /* @__PURE__ */ new Set(["node_modules", ".git", "domflax-out"]);
+var SKIP_DIRS2 = /* @__PURE__ */ new Set(["node_modules", ".git", "domflax-out"]);
 function isSupported(file) {
   const lower = file.toLowerCase();
   return SUPPORTED_EXTS.some((ext) => lower.endsWith(ext));
@@ -6484,9 +5861,9 @@ function walkDir(dir, out) {
     return;
   }
   for (const entry of entries) {
-    const full = path7.join(dir, entry.name);
+    const full = path9.join(dir, entry.name);
     if (entry.isDirectory()) {
-      if (SKIP_DIRS.has(entry.name)) continue;
+      if (SKIP_DIRS2.has(entry.name)) continue;
       walkDir(full, out);
     } else if (entry.isFile()) {
       if (isSupported(entry.name)) out.push(full);
@@ -6502,7 +5879,7 @@ function discoverInputs(paths) {
   const warnings = [];
   const seen = /* @__PURE__ */ new Set();
   const push = (f) => {
-    const abs = path7.resolve(f);
+    const abs = path9.resolve(f);
     if (!seen.has(abs)) {
       seen.add(abs);
       files.push(abs);
@@ -6511,7 +5888,7 @@ function discoverInputs(paths) {
   let inputRoot = process.cwd();
   if (paths.length === 1) {
     try {
-      if (fs.statSync(paths[0]).isDirectory()) inputRoot = path7.resolve(paths[0]);
+      if (fs.statSync(paths[0]).isDirectory()) inputRoot = path9.resolve(paths[0]);
     } catch {
     }
   }
@@ -6523,7 +5900,7 @@ function discoverInputs(paths) {
       stat = null;
     }
     if (stat?.isDirectory()) {
-      walkDir(path7.resolve(p2), files);
+      walkDir(path9.resolve(p2), files);
       continue;
     }
     if (stat?.isFile()) {
@@ -6548,7 +5925,7 @@ function discoverInputs(paths) {
   const deduped = [];
   const finalSeen = /* @__PURE__ */ new Set();
   for (const f of files) {
-    const abs = path7.resolve(f);
+    const abs = path9.resolve(f);
     if (!finalSeen.has(abs)) {
       finalSeen.add(abs);
       deduped.push(abs);
@@ -7141,8 +6518,8 @@ var J2 = `${import_picocolors2.default.gray(o)}  `;
 // ../cli/src/detect.ts
 init_cjs_shims();
 var fs2 = __toESM(require("fs"), 1);
-var path8 = __toESM(require("path"), 1);
-var SKIP_DIRS2 = /* @__PURE__ */ new Set([
+var path10 = __toESM(require("path"), 1);
+var SKIP_DIRS3 = /* @__PURE__ */ new Set([
   "node_modules",
   "dist",
   "build",
@@ -7156,11 +6533,11 @@ var COMMON_INPUT_DIRS = ["src", "app", "components", "pages", "lib", "ui", "publ
 var CSS_FILE_CAP = 200;
 var DEFAULT_CSS_DEPTH = 10;
 function toRelative(root, abs) {
-  const rel = path8.relative(root, abs);
-  return rel.split(path8.sep).join("/");
+  const rel = path10.relative(root, abs);
+  return rel.split(path10.sep).join("/");
 }
 function detectCssFiles(root, scanRoots = [], maxDepth = DEFAULT_CSS_DEPTH) {
-  const base = path8.resolve(root);
+  const base = path10.resolve(root);
   const found = /* @__PURE__ */ new Map();
   let capped = false;
   const walk = (dir, depth) => {
@@ -7172,13 +6549,13 @@ function detectCssFiles(root, scanRoots = [], maxDepth = DEFAULT_CSS_DEPTH) {
       return;
     }
     for (const entry of entries) {
-      const full = path8.join(dir, entry.name);
+      const full = path10.join(dir, entry.name);
       if (entry.isDirectory()) {
-        if (SKIP_DIRS2.has(entry.name)) continue;
+        if (SKIP_DIRS3.has(entry.name)) continue;
         walk(full, depth + 1);
         if (capped) return;
       } else if (entry.isFile() && entry.name.toLowerCase().endsWith(".css")) {
-        const abs = path8.resolve(full);
+        const abs = path10.resolve(full);
         if (!found.has(abs)) {
           found.set(abs, toRelative(base, abs));
           if (found.size >= CSS_FILE_CAP) {
@@ -7192,7 +6569,7 @@ function detectCssFiles(root, scanRoots = [], maxDepth = DEFAULT_CSS_DEPTH) {
   walk(base, 0);
   for (const r2 of scanRoots) {
     if (capped) break;
-    const abs = path8.resolve(r2);
+    const abs = path10.resolve(r2);
     if (abs !== base) walk(abs, 0);
   }
   const list = [...found.values()].sort((a, b3) => a.localeCompare(b3));
@@ -7202,10 +6579,10 @@ function detectCssFiles(root, scanRoots = [], maxDepth = DEFAULT_CSS_DEPTH) {
   return list;
 }
 function detectInputDirs(root) {
-  const resolved = path8.resolve(root);
+  const resolved = path10.resolve(root);
   return COMMON_INPUT_DIRS.filter((name) => {
     try {
-      return fs2.statSync(path8.join(resolved, name)).isDirectory();
+      return fs2.statSync(path10.join(resolved, name)).isDirectory();
     } catch {
       return false;
     }
@@ -7331,6 +6708,9 @@ async function runWizard(base) {
 }
 
 // ../cli/src/index.ts
+function fileDetail(stats) {
+  return `${stats.nodesRemoved} nodes, ${stats.classesSaved} classes, ${stats.bytesSaved} bytes`;
+}
 function printReport(totals) {
   console.log("");
   console.log("domflax report");
@@ -7346,7 +6726,7 @@ function runInline(files, options, inputRoot, plan, totals) {
   for (const file of files) {
     let code;
     try {
-      code = (0, import_node_fs4.readFileSync)(file, "utf8");
+      code = (0, import_node_fs6.readFileSync)(file, "utf8");
     } catch (err) {
       console.error(`domflax: cannot read ${file}: ${String(err?.message ?? err)}`);
       failures += 1;
@@ -7355,9 +6735,14 @@ function runInline(files, options, inputRoot, plan, totals) {
     const result = transform.transformFile(code, file);
     addStats(totals, result.stats, result.changed);
     if (options.dryRun) {
-      const rel = path9.relative(inputRoot, file) || path9.basename(file);
-      if (result.changed) console.log(unifiedDiff(code, result.code, rel));
-      else if (!options.report) console.log(`  (unchanged) ${rel}`);
+      const rel = path11.relative(inputRoot, file) || path11.basename(file);
+      if (result.changed) {
+        console.log(
+          options.details ? `domflax: ${rel} \u2014 ${fileDetail(result.stats)}` : unifiedDiff(code, result.code, rel)
+        );
+      } else if (!options.report && !options.details) {
+        console.log(`  (unchanged) ${rel}`);
+      }
       continue;
     }
     if (!result.changed) continue;
@@ -7368,9 +6753,10 @@ function runInline(files, options, inputRoot, plan, totals) {
       continue;
     }
     try {
-      (0, import_node_fs4.mkdirSync)(path9.dirname(target.value), { recursive: true });
-      (0, import_node_fs4.writeFileSync)(target.value, result.code, "utf8");
-      console.log(`domflax: wrote ${path9.relative(process.cwd(), target.value) || target.value}`);
+      (0, import_node_fs6.mkdirSync)(path11.dirname(target.value), { recursive: true });
+      (0, import_node_fs6.writeFileSync)(target.value, result.code, "utf8");
+      const rel = path11.relative(process.cwd(), target.value) || target.value;
+      console.log(options.details ? `domflax: wrote ${rel} \u2014 ${fileDetail(result.stats)}` : `domflax: wrote ${rel}`);
     } catch (err) {
       console.error(`domflax: cannot write ${target.value}: ${String(err?.message ?? err)}`);
       failures += 1;
@@ -7407,10 +6793,16 @@ async function execute(options) {
     Object.assign(totals, outcome.totals);
     failures = outcome.failures;
     for (const { path: p2, error } of outcome.errors) {
-      console.error(`domflax: failed ${path9.relative(process.cwd(), p2) || p2}: ${error}`);
+      console.error(`domflax: failed ${path11.relative(process.cwd(), p2) || p2}: ${error}`);
     }
-    for (const dest of [...outcome.wrote].sort()) {
-      console.log(`domflax: wrote ${path9.relative(process.cwd(), dest) || dest}`);
+    if (options.details) {
+      for (const { dest, stats } of [...outcome.changedFiles].sort((a, b3) => a.dest.localeCompare(b3.dest))) {
+        console.log(`domflax: wrote ${path11.relative(process.cwd(), dest) || dest} \u2014 ${fileDetail(stats)}`);
+      }
+    } else {
+      for (const dest of [...outcome.wrote].sort()) {
+        console.log(`domflax: wrote ${path11.relative(process.cwd(), dest) || dest}`);
+      }
     }
   } else {
     failures += runInline(files, options, inputRoot, plan, totals);