domflax 0.1.4 → 0.2.0

package/dist/{chunk-3Z5ZWLXX.js → chunk-FPT4EJ6Q.js}

@@ -1,8 +1,5 @@
 import {
   BASE_CONDITION,
-  BASE_CONDITION_KEY,
-  and,
-  computed,
   conditionKey,
   createComment,
   createDocument,
@@ -15,17 +12,174 @@ import {
   emptyClassList,
   emptyStyleMap,
   hasDynamicClasses,
-  isElement,
+  minStringCover,
   normalizer,
   not,
-  targetedByCombinator
-} from "./chunk-H5KTGI3A.js";
+  styleMapTuples,
+  tupleKey
+} from "./chunk-TTJEXWAC.js";
 import {
   __filename,
   init_esm_shims
 } from "./chunk-U5GOONKV.js";
 
-// ../patterns/src/library/flatten/display-contents-wrapper.pattern.ts
+// ../patterns/src/library/flex/flex-center-wrapper.pattern.ts
+init_esm_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_esm_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 m = parent.meta;
+  if (m.hasKey || m.hasRef || m.hasEventHandlers || m.hasDynamicChildren || m.hasDangerousHtml || m.hasSpreadAttrs || m.isComponent) {
+    return false;
+  }
+  if (m.targetedByCombinator || m.targetedByStructuralPseudo) return false;
+  const fid = parentId;
+  if (ctx.selectors.targetedByCombinator(fid) || ctx.selectors.targetedByStructuralPseudo(fid)) {
+    return false;
+  }
+  if (ctx.selectors.reparentImpact(fid).size > 0) return false;
+  return true;
+}
+var redundantFragment = definePattern({
+  name: "redundant-fragment",
+  category: "flatten/fragment/redundant-fragment",
+  safety: 1,
+  doc: {
+    title: "Flatten redundant single-child fragment",
+    summary: "A fragment whose only child is a single node is removed; the child is spliced up into the fragment's slot, preserving its IRNodeId, siblings, attributes and the CSS cascade.",
+    before: "<><Child/></>",
+    after: "<Child/>",
+    safetyRationale: "A fragment paints nothing and renders no box; with exactly one child its removal changes no sibling/structural-pseudo match-set. Keyed fragments and fragments carrying ref/handlers/dynamic-children/raw-html/spread are excluded as opacity barriers."
+  },
+  match: parentIsRedundantFragment,
+  rewrite: (ctx, rw) => {
+    const parentId = ctx.node.parent;
+    if (parentId == null) return null;
+    const fragment = ctx.doc.nodes.get(parentId);
+    if (!fragment || fragment.kind !== "fragment") return null;
+    return [rw.unwrap(fragment)];
+  },
+  test: {
+    cases: [
+      {
+        // A fragment renders no box, so unwrapping a single-child fragment is always layout-identical
+        // → a provably-safe flatten: the child is spliced up into the fragment's slot.
+        before: '<><span className="bg-red-200">Hi</span></>',
+        after: '<span className="bg-red-200">Hi</span>'
+      }
+    ],
+    noMatch: [
+      // Two children ⇒ not a single-child fragment, so the fragment is load-bearing and stays.
+      '<><span className="bg-red-200">A</span><span className="bg-green-200">B</span></>'
+    ]
+  }
+});
+
+// ../patterns/src/library/grid/grid-center-wrapper.pattern.ts
+init_esm_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_esm_shims();
 function asEl(node) {
   const n = node;
@@ -50,7 +204,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",
@@ -90,7 +244,7 @@ var displayContentsWrapper = definePattern({
   }
 });
 
-// ../patterns/src/library/flatten/empty-style-div.pattern.ts
+// ../patterns/src/library/wrapper/empty-style-div.pattern.ts
 init_esm_shims();
 function asEl2(node) {
   const n = node;
@@ -123,7 +277,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",
@@ -162,339 +316,67 @@ var emptyStyleDiv = definePattern({
   }
 });
 
-// ../patterns/src/library/flatten/flex-center-wrapper.pattern.ts
+// ../patterns/src/library/wrapper/inherited-only-wrapper.pattern.ts
 init_esm_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>'
-    ]
-  }
-});
-
-// ../patterns/src/library/flatten/inline-flex-center-wrapper.pattern.ts
-init_esm_shims();
-var inlineFlexCenterWrapper = definePattern({
-  name: "inline-flex-center-wrapper",
-  category: "flatten/inline-flex-center-wrapper",
-  safety: 2,
-  doc: {
-    title: "Flatten inline-flex-centering wrapper",
-    summary: "A div that only centers a single child (display:inline-flex; align-items:center; justify-content:center) is removed; the child gains place-self:center.",
-    before: '<div style="display:inline-flex;align-items:center;justify-content:center"><Child/></div>',
-    after: '<Child style="place-self:center"/>',
-    safetyRationale: "Wrapper paints nothing, carries no ref/handlers/dynamic children, and is not a combinator subject; inheritable styles are folded onto the child before removal."
-  },
-  match: {
-    tag: "div",
-    style: { display: "inline-flex", alignItems: "center", justifyContent: "center" },
-    onlyChild: "element",
-    paintsNothing: true
-  },
-  rewrite: {
-    flattenInto: "child",
-    childGains: { placeSelf: "center" }
-  },
-  // Like its block-level sibling, this centering flatten is `needs-verification` (the wrapper's own
-  // `display:inline-flex` establishes a formatting context, and place-self centering only holds under
-  // a flex/grid parent), so the conservative production gate (`'provably-safe'`) REVERTS it — every
-  // case here is a no-match. Op-level correctness is covered by the invariant suite.
-  test: {
-    noMatch: [
-      // Even under a static flex/grid parent the centering flatten is not provably layout-neutral.
-      '<div className="grid"><div className="inline-flex items-center justify-center"><span className="bg-red-200">x</span></div></div>',
-      // Non-flex/grid parent (document root) → left unchanged.
-      '<div className="inline-flex justify-center items-center"><div className="bg-red-200">Hello</div></div>',
-      // onClick is a hard opacity barrier → the wrapper is load-bearing regardless of the gate.
-      '<div className="inline-flex justify-center items-center" onClick={handleClick}><div className="bg-red-200">Hello</div></div>'
-    ]
-  }
-});
-
-// ../patterns/src/library/flatten/nested-flex-merge.pattern.ts
-init_esm_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 b = normalizer.normalizeStyleMap(inner);
-  for (const [key, blockA] of a.blocks) {
-    const blockB = b.blocks.get(key);
-    if (!blockB) continue;
-    for (const [prop, declA] of blockA.decls) {
-      if (!FLEX_CONTAINER_PROPERTIES.has(String(prop))) continue;
-      const declB = blockB.decls.get(prop);
-      if (declB && declB.value !== declA.value) return true;
-    }
-  }
-  return false;
-}
-function extractFlexStyle(sm) {
-  const blocks = /* @__PURE__ */ new Map();
-  for (const [key, block] of sm.blocks) {
-    const decls = /* @__PURE__ */ new Map();
-    for (const [prop, decl] of block.decls) {
-      if (FLEX_CONTAINER_PROPERTIES.has(String(prop))) decls.set(prop, decl);
-    }
-    if (decls.size > 0) blocks.set(key, { condition: block.condition, decls });
-  }
-  return { blocks };
-}
-var isInnerFlex = and(
-  isElement("div"),
-  computed(DISPLAY_FLEX),
-  not(targetedByCombinator)
-);
-var nestedFlexMerge = definePattern({
-  name: "nested-flex-merge",
-  category: "flatten/nested-flex-merge",
-  safety: 2,
-  doc: {
-    title: "Merge nested flex containers",
-    summary: "A flex container whose only child is itself a flex container with non-conflicting flex properties is collapsed into one; the wrapper is removed and its flex declarations merge onto the surviving child.",
-    before: '<div style="display:flex;align-items:center;gap:8px"><div style="display:flex;flex-direction:column"/></div>',
-    after: '<div style="display:flex;flex-direction:column;align-items:center;gap:8px"/>',
-    safetyRationale: "The wrapper paints nothing, declares only flex-container/inheritable properties, carries no ref/handlers/dynamic children, and is not a combinator subject; the two containers do not conflict on any flex property, so the union is unambiguous and lossless."
-  },
-  match: {
-    tag: "div",
-    style: { display: "flex" },
-    onlyChild: "element",
-    paintsNothing: true
-  },
-  rewrite: (ctx, rw) => {
-    const outer = ctx.node;
-    const inner = ctx.onlyElementChild();
-    if (!inner) return null;
-    if (!isInnerFlex(inner, ctx)) return null;
-    const outerStyle = ctx.computed();
-    const innerStyle = ctx.computedOf(inner);
-    if (!outerMergeSafe(outerStyle)) return null;
-    if (flexConflict(outerStyle, innerStyle)) return null;
-    return [
-      // 1. Preserve inheritable values (color/font/…) by folding them onto the child first.
-      rw.foldInheritedStyles(outer, inner, { conditions: "all" }),
-      // 2. Transfer the wrapper's flex-container declarations onto the child (target-wins keeps the
-      //    child's value for any shared property — identical anyway, we proved non-conflict).
-      rw.mergeStyle(inner, null, extractFlexStyle(outerStyle), "target-wins"),
-      // 3. Remove the wrapper (structural-safe; hoists the child and preserves its IRNodeId).
-      rw.unwrap(outer)
-    ];
-  },
-  // Merging the outer flex container into the inner removes the outer's box, but a `display:flex`
-  // wrapper establishes a formatting context, so this is a `needs-verification` flatten that the
-  // conservative production gate (`'provably-safe'`) REVERTS — every case here is a no-match. The
-  // merge's op-level correctness (purity, id-preserving unwrap, opacity-barrier safety) is asserted
-  // by the invariant suite over every pattern.
-  test: {
-    noMatch: [
-      // The merge is real but not provably layout-neutral (the wrapper establishes a flex context),
-      // so under the conservative gate the nested containers are left in place.
-      '<div className="flex items-center gap-2" data-x="1"><div className="flex flex-col">X</div></div>',
-      // A non-flex wrapper does not match the flex-container signature → left unchanged anyway.
-      '<div className="block bg-blue-500"><div className="flex flex-col">X</div></div>'
-    ]
-  }
-});
-
-// ../patterns/src/library/flatten/nested-grid-merge.pattern.ts
-init_esm_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 b = normalizer.normalizeStyleMap(inner);
-  for (const [key, blockA] of a.blocks) {
-    const blockB = b.blocks.get(key);
-    if (!blockB) continue;
-    for (const [prop, declA] of blockA.decls) {
-      if (!GRID_CONTAINER_PROPERTIES.has(String(prop))) continue;
-      const declB = blockB.decls.get(prop);
-      if (declB && declB.value !== declA.value) return true;
-    }
-  }
-  return false;
-}
-function extractGridStyle(sm) {
-  const blocks = /* @__PURE__ */ new Map();
-  for (const [key, block] of sm.blocks) {
-    const decls = /* @__PURE__ */ new Map();
-    for (const [prop, decl] of block.decls) {
-      if (GRID_CONTAINER_PROPERTIES.has(String(prop))) decls.set(prop, decl);
-    }
-    if (decls.size > 0) blocks.set(key, { condition: block.condition, decls });
-  }
-  return { blocks };
-}
-var isInnerGrid = and(
-  isElement("div"),
-  computed(DISPLAY_GRID),
-  not(targetedByCombinator)
-);
-var nestedGridMerge = definePattern({
-  name: "nested-grid-merge",
-  category: "flatten/nested-grid-merge",
-  safety: 2,
-  doc: {
-    title: "Merge nested grid containers",
-    summary: "A grid container whose only child is itself a grid container with non-conflicting grid properties is collapsed into one; the wrapper is removed and its grid declarations merge onto the surviving child.",
-    before: '<div style="display:grid;gap:8px"><div style="display:grid;grid-template-columns:1fr 1fr"/></div>',
-    after: '<div style="display:grid;grid-template-columns:1fr 1fr;gap:8px"/>',
-    safetyRationale: "The wrapper paints nothing, declares only grid-container/inheritable properties, carries no ref/handlers/dynamic children, and is not a combinator subject; the two containers do not conflict on any grid property, so the union is unambiguous and lossless."
-  },
-  match: {
-    tag: "div",
-    style: { display: "grid" },
-    onlyChild: "element",
-    paintsNothing: true
-  },
-  rewrite: (ctx, rw) => {
-    const outer = ctx.node;
-    const inner = ctx.onlyElementChild();
-    if (!inner) return null;
-    if (!isInnerGrid(inner, ctx)) return null;
-    const outerStyle = ctx.computed();
-    const innerStyle = ctx.computedOf(inner);
-    if (!outerMergeSafe2(outerStyle)) return null;
-    if (gridConflict(outerStyle, innerStyle)) return null;
-    return [
-      // 1. Preserve inheritable values (color/font/…) by folding them onto the child first.
-      rw.foldInheritedStyles(outer, inner, { conditions: "all" }),
-      // 2. Transfer the wrapper's grid-container declarations onto the child (target-wins keeps the
-      //    child's value for any shared property — identical anyway, we proved non-conflict).
-      rw.mergeStyle(inner, null, extractGridStyle(outerStyle), "target-wins"),
-      // 3. Remove the wrapper (structural-safe; hoists the child and preserves its IRNodeId).
-      rw.unwrap(outer)
-    ];
-  },
-  // Like its flex sibling, this merge removes the outer container's box, but a `display:grid` wrapper
-  // establishes a formatting context, so it is a `needs-verification` flatten that the conservative
-  // production gate (`'provably-safe'`) REVERTS — every case here is a no-match. Op-level correctness
-  // is asserted by the invariant suite over every pattern.
-  test: {
-    noMatch: [
-      // The merge is real but not provably layout-neutral (the wrapper establishes a grid context),
-      // so under the conservative gate the nested containers are left in place.
-      '<div className="grid gap-2" data-x="1"><div className="grid grid-cols-2">X</div></div>',
-      // A non-grid wrapper does not match the grid-container signature → left unchanged anyway.
-      '<div className="block bg-blue-500"><div className="grid grid-cols-2">X</div></div>'
+      // `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/passthrough-wrapper.pattern.ts
+// ../patterns/src/library/wrapper/passthrough-wrapper.pattern.ts
 init_esm_shims();
 function metaOf2(node) {
   const n = node;
@@ -510,7 +392,7 @@ var establishesContext = (node) => {
   return m.establishesBox || m.establishesFormattingContext || m.establishesStackingContext || m.isContainingBlock || m.declaresCustomProperties;
 };
 var hasSpreadAttrs2 = (node) => metaOf2(node)?.hasSpreadAttrs ?? false;
-var isComponentNode2 = (node) => metaOf2(node)?.isComponent ?? false;
+var isComponentNode3 = (node) => metaOf2(node)?.isComponent ?? false;
 var hasOwnAttrs2 = (node) => {
   const el = elementOf(node);
   if (!el) return false;
@@ -524,1263 +406,143 @@ var targetedByStructuralPseudo3 = (node, ctx) => {
 };
 var passthroughWrapper = definePattern({
   name: "passthrough-wrapper",
-  category: "flatten/passthrough-wrapper",
-  safety: 2,
-  doc: {
-    title: "Flatten passthrough wrapper",
-    summary: "A div with no own visual/box style, no attributes beyond an inert class, exactly one element child, and no opacity barriers is removed; its sole child is hoisted in its place.",
-    before: "<div><Child/></div>",
-    after: "<Child/>",
-    safetyRationale: "Wrapper paints nothing and establishes no layout/paint/var context, carries no ref/handlers/dynamic-children/html/spread/component identity, owns no targetable attrs, and is not a combinator/structural-pseudo subject (reparenting changes no match-set); inheritable styles are folded onto the child before removal."
-  },
-  match: {
-    tag: "div",
-    onlyChild: "element",
-    paintsNothing: true,
-    where: [
-      not(establishesContext),
-      not(hasOwnAttrs2),
-      not(hasDynamicClasses),
-      not(hasSpreadAttrs2),
-      not(isComponentNode2),
-      not(targetedByStructuralPseudo3)
-    ]
-  },
-  rewrite: { flattenInto: "child" },
-  test: {
-    cases: [
-      {
-        // A plain, style-free wrapper paints nothing and establishes no context → a provably-safe
-        // flatten under the conservative gate: the wrapper is removed and its sole child hoisted.
-        before: '<div><a className="bg-red-200">Link</a></div>',
-        after: '<a className="bg-red-200">Link</a>'
-      }
-    ],
-    noMatch: [
-      // A ref pins the wrapper's element identity (a hard opacity barrier) → not a passthrough.
-      '<div ref={rootRef}><a className="bg-red-200">Link</a></div>',
-      // A `display:flex` wrapper establishes a formatting context, so removing its box is NOT
-      // provably layout-neutral → the conservative gate leaves it in place.
-      '<div className="flex"><a className="bg-red-200">Link</a></div>'
-    ]
-  }
-});
-
-// ../patterns/src/library/flatten/redundant-fragment.pattern.ts
-init_esm_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 m = parent.meta;
-  if (m.hasKey || m.hasRef || m.hasEventHandlers || m.hasDynamicChildren || m.hasDangerousHtml || m.hasSpreadAttrs || m.isComponent) {
-    return false;
-  }
-  if (m.targetedByCombinator || m.targetedByStructuralPseudo) return false;
-  const fid = parentId;
-  if (ctx.selectors.targetedByCombinator(fid) || ctx.selectors.targetedByStructuralPseudo(fid)) {
-    return false;
-  }
-  if (ctx.selectors.reparentImpact(fid).size > 0) return false;
-  return true;
-}
-var redundantFragment = definePattern({
-  name: "redundant-fragment",
-  category: "flatten/redundant-fragment",
-  safety: 1,
-  doc: {
-    title: "Flatten redundant single-child fragment",
-    summary: "A fragment whose only child is a single node is removed; the child is spliced up into the fragment's slot, preserving its IRNodeId, siblings, attributes and the CSS cascade.",
-    before: "<><Child/></>",
-    after: "<Child/>",
-    safetyRationale: "A fragment paints nothing and renders no box; with exactly one child its removal changes no sibling/structural-pseudo match-set. Keyed fragments and fragments carrying ref/handlers/dynamic-children/raw-html/spread are excluded as opacity barriers."
-  },
-  match: parentIsRedundantFragment,
-  rewrite: (ctx, rw) => {
-    const parentId = ctx.node.parent;
-    if (parentId == null) return null;
-    const fragment = ctx.doc.nodes.get(parentId);
-    if (!fragment || fragment.kind !== "fragment") return null;
-    return [rw.unwrap(fragment)];
-  },
-  test: {
-    cases: [
-      {
-        // A fragment renders no box, so unwrapping a single-child fragment is always layout-identical
-        // → a provably-safe flatten: the child is spliced up into the fragment's slot.
-        before: '<><span className="bg-red-200">Hi</span></>',
-        after: '<span className="bg-red-200">Hi</span>'
-      }
-    ],
-    noMatch: [
-      // Two children ⇒ not a single-child fragment, so the fragment is load-bearing and stays.
-      '<><span className="bg-red-200">A</span><span className="bg-green-200">B</span></>'
-    ]
-  }
-});
-
-// ../patterns/src/library/flatten/redundant-inline-wrapper.pattern.ts
-init_esm_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 m = metaOf3(node);
-  if (!m) return false;
-  return m.establishesBox || m.establishesFormattingContext || m.establishesStackingContext || m.isContainingBlock || m.declaresCustomProperties;
-};
-var hasSpreadAttrs3 = (node) => metaOf3(node)?.hasSpreadAttrs ?? false;
-var isComponentNode3 = (node) => metaOf3(node)?.isComponent ?? false;
-var hasOwnAttrs3 = (node) => {
-  const el = asEl3(node);
-  if (!el) return false;
-  return el.attrs.entries.size > 0 || el.attrs.spreads.length > 0;
-};
-var targetedByStructuralPseudo4 = (node, ctx) => {
-  const el = asEl3(node);
-  if (!el) return false;
-  if (el.meta.targetedByStructuralPseudo) return true;
-  return ctx.selectors.targetedByStructuralPseudo(el.id);
-};
-var DISPLAY2 = "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(DISPLAY2);
-    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_esm_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((d) => d.important === important)) return null;
-  const value = String(corners[0].value);
-  if (NON_COLLAPSIBLE_VALUES.has(value)) return null;
-  if (!corners.every((d) => String(d.value) === value)) return null;
-  const relative = corners.some((d) => d.relativeToParent);
-  return { value, important, relative };
-}
-function withFoldedRadius(sm, fold) {
-  const blocks = /* @__PURE__ */ new Map();
-  for (const [key, block] of sm.blocks) {
-    if (key !== BASE_KEY) {
-      blocks.set(key, block);
-      continue;
-    }
-    const decls = /* @__PURE__ */ new Map();
-    for (const [prop, decl] of block.decls) {
-      if (CORNER_SET.has(String(prop))) continue;
-      decls.set(prop, decl);
-    }
-    const shorthand = {
-      property: RADIUS,
-      value: fold.value,
-      important: fold.important,
-      relativeToParent: fold.relative,
-      inherited: false
-      // border-radius is never inherited
-    };
-    decls.set(shorthand.property, shorthand);
-    blocks.set(key, { condition: block.condition, decls });
-  }
-  return { blocks };
-}
-var borderRadiusShorthand = definePattern({
-  name: "border-radius-shorthand",
-  category: "compress/border-radius-shorthand",
-  safety: 1,
-  doc: {
-    title: "Collapse equal corner radii into border-radius",
-    summary: "An element whose four corner radii (border-*-radius longhands) are all equal is rewritten to the single Tailwind rounded-* utility (border-radius === the four equal corners).",
-    before: '<div class="rounded-tl-lg rounded-tr-lg rounded-br-lg rounded-bl-lg"/>',
-    after: '<div class="rounded-lg"/>',
-    safetyRationale: "`border-radius` is value-identical to four equal corner radii \u2014 a class-only change. It is safe even on an element with a ref, event handler, dynamic child, or dangerouslySetInnerHTML \u2014 a className rewrite touches none of them; only a dynamic/opaque class list or a combinator-subject class is excluded, so no behaviour or project selector is disturbed."
-  },
-  rewrite: {
-    rewriteClasses(computed2) {
-      const fold = analyzeRadius(computed2);
-      return fold ? withFoldedRadius(computed2, fold) : null;
-    }
-  },
-  test: {
-    cases: [
-      {
-        // The four equal corner longhands collapse to a `border-radius` decl at the IR level; the
-        // minimizing reverse-emit then picks the single shortest utility (`rounded-lg`) that reproduces
-        // it, replacing the four `rounded-{tl,tr,br,bl}-lg` tokens. `bg-red-200` is preserved.
-        before: '<div className="rounded-tl-lg rounded-tr-lg rounded-br-lg rounded-bl-lg bg-red-200">box</div>',
-        after: '<div className="bg-red-200 rounded-lg">box</div>'
-      }
-    ],
-    // Corners differ (top corners vs bottom corners) → no all-equal collapse.
-    noMatch: ['<div className="rounded-t-lg rounded-b-sm bg-red-200">box</div>']
-  }
-});
-
-// ../patterns/src/library/compress/border-shorthand.pattern.ts
-init_esm_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 relative = sides.some((d) => d.relativeToParent);
-  return { value, important: top.important, relative };
-}
-function withFoldedWidth(sm, fold) {
-  const blocks = /* @__PURE__ */ new Map();
-  for (const [key, block] of sm.blocks) {
-    if (key !== BASE_KEY2) {
-      blocks.set(key, block);
-      continue;
-    }
-    const decls = /* @__PURE__ */ new Map();
-    for (const [prop, decl] of block.decls) {
-      if (WIDTH_SIDE_SET.has(String(prop))) continue;
-      decls.set(prop, decl);
-    }
-    const shorthand = {
-      property: BORDER_WIDTH,
-      value: fold.value,
-      important: fold.important,
-      relativeToParent: fold.relative,
-      inherited: false
-      // border-width is never inherited
-    };
-    decls.set(shorthand.property, shorthand);
-    blocks.set(key, { condition: block.condition, decls });
-  }
-  return { blocks };
-}
-var borderShorthand = definePattern({
-  name: "border-shorthand",
-  category: "compress/border-shorthand",
-  safety: 1,
-  doc: {
-    title: "Collapse border-width longhands to shorthand",
-    summary: "Equal border width on all four sides (or matching x/y pairs) expressed as separate longhand declarations is collapsed to the shortest equivalent border-width shorthand (border-* / border-x-* border-y-*).",
-    before: '<div class="border-t-2 border-r-2 border-b-2 border-l-2"/>',
-    after: '<div class="border-2"/>',
-    safetyRationale: "A value-preserving re-serialization of the same computed border widths (style/color longhands untouched) \u2014 a class-only change. It is safe even on an element with a ref, event handler, dynamic child, or dangerouslySetInnerHTML \u2014 a className rewrite touches none of them; only a dynamic/opaque class list or a combinator-subject class is excluded, so no behaviour or project selector is disturbed."
-  },
-  rewrite: {
-    rewriteClasses(computed2) {
-      const fold = analyzeWidth(computed2);
-      return fold ? withFoldedWidth(computed2, fold) : null;
-    }
-  },
-  test: {
-    cases: [
-      {
-        // The four equal width longhands collapse to a `border-width` shorthand at the IR level, and the
-        // minimizing reverse-emit picks the single shortest utility (`border-2`) that reproduces it,
-        // replacing the four `border-{t,r,b,l}-2` tokens. `bg-red-200` is preserved.
-        before: '<div className="border-t-2 border-r-2 border-b-2 border-l-2 bg-red-200">box</div>',
-        after: '<div className="bg-red-200 border-2">box</div>'
-      }
-    ],
-    // Asymmetric widths (top != bottom) cannot fold into a shorthand.
-    noMatch: ['<div className="border-t-2 border-r-4 border-b-8 border-l-4 bg-red-200">box</div>']
-  }
-});
-
-// ../patterns/src/library/compress/dedupe-classes.pattern.ts
-init_esm_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 o of decl.shadowed ?? []) {
-        if (o.kind === "class") shadowed.add(o.className);
-      }
-    }
-  }
-  return { winners, shadowed };
-}
-var dedupeClasses = definePattern({
-  name: "dedupe-classes",
-  category: "compress/dedupe-classes",
-  safety: 1,
-  doc: {
-    title: "Dedupe fully-overridden class tokens",
-    summary: "Drops class tokens whose every declaration is overridden by a later token resolving to the same property; the surviving token set produces a byte-for-byte identical computed style.",
-    before: '<p class="text-sm text-lg" />',
-    after: '<p class="text-lg" />',
-    safetyRationale: "A fully-overridden token contributes nothing to the computed style in any condition, so removing it changes no pixels \u2014 a class-only change. It is safe even on an element with a ref, event handler, dynamic child, or dangerouslySetInnerHTML \u2014 a className rewrite touches none of them; only a dynamic/opaque class list or a combinator-subject class is excluded, so no behaviour or project selector is disturbed."
-  },
-  rewrite: {
-    dropClasses(computed2, ctx) {
-      const { winners, shadowed } = findRedundantClasses(computed2);
-      const drop = /* @__PURE__ */ new Set();
-      for (const cls of shadowed) {
-        if (winners.has(cls)) continue;
-        if (!ctx.resolver.selectorUsage(cls).droppable) continue;
-        drop.add(cls);
-      }
-      return drop;
-    }
-  },
-  test: {
-    cases: [
-      {
-        // `text-sm` is fully overridden by `text-lg` (both set font-size + line-height). The resolver
-        // records that shadowing in provenance and reports the Tailwind utility as droppable, so the
-        // pattern drops `text-sm`; the reverse-emit then re-derives the minimal set (`text-lg`).
-        before: '<p className="text-sm text-lg">Hi</p>',
-        after: '<p className="text-lg">Hi</p>'
-      }
-    ],
-    // Both tokens win a distinct property (no full override) → nothing to dedupe.
-    noMatch: ['<p className="text-lg font-bold">Hi</p>']
-  }
-});
-
-// ../patterns/src/library/compress/gap-shorthand.pattern.ts
-init_esm_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_esm_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, b) {
-  return a !== void 0 && b !== void 0 && a.value === b.value && a.important === b.important;
-}
-function asProperty(src, property) {
-  return { ...src, property, inherited: normalizer.inherited.isInherited(property) };
-}
-function withBaseDecls(src, baseDecls) {
-  const blocks = /* @__PURE__ */ new Map();
-  for (const [key, block] of src.blocks) {
-    const decls = key === BASE_CONDITION_KEY ? baseDecls : new Map(block.decls);
-    blocks.set(key, { condition: block.condition, decls });
-  }
-  return { blocks };
-}
-var insetShorthand = definePattern({
-  name: "inset-shorthand",
-  category: "compress/inset-shorthand",
-  safety: 2,
-  doc: {
-    title: "Compress inset longhands into a shorthand",
-    summary: "top/right/bottom/left set to one value collapse to `inset`; a matching top/bottom or left/right pair collapses to `inset-block` / `inset-inline` (Tailwind inset-y / inset-x).",
-    before: '<div style="top:10px;right:10px;bottom:10px;left:10px"/>',
-    after: '<div style="inset:10px"/>',
-    safetyRationale: "Meaning-preserving inset shorthand compaction \u2014 a class-only change. It is safe even on an element with a ref, event handler, dynamic child, or dangerouslySetInnerHTML \u2014 a className rewrite touches none of them; only a dynamic/opaque class list or a combinator-subject class is excluded, so no behaviour or project selector is disturbed."
-  },
-  rewrite: {
-    rewriteClasses(computed2) {
-      const base = computed2.blocks.get(BASE_CONDITION_KEY);
-      if (!base) return null;
-      const top = base.decls.get(TOP);
-      const right = base.decls.get(RIGHT);
-      const bottom = base.decls.get(BOTTOM);
-      const left = base.decls.get(LEFT);
-      const next = new Map(base.decls);
-      if (top && sameSide(top, right) && sameSide(top, bottom) && sameSide(top, left)) {
-        next.delete(TOP);
-        next.delete(RIGHT);
-        next.delete(BOTTOM);
-        next.delete(LEFT);
-        next.set(INSET, asProperty(top, INSET));
-      } else {
-        let collapsed = false;
-        if (sameSide(top, bottom)) {
-          next.delete(TOP);
-          next.delete(BOTTOM);
-          next.set(INSET_BLOCK, asProperty(top, INSET_BLOCK));
-          collapsed = true;
-        }
-        if (sameSide(left, right)) {
-          next.delete(LEFT);
-          next.delete(RIGHT);
-          next.set(INSET_INLINE, asProperty(left, INSET_INLINE));
-          collapsed = true;
-        }
-        if (!collapsed) return null;
-      }
-      return withBaseDecls(computed2, next);
-    }
-  },
-  test: {
-    cases: [
-      {
-        // The four equal inset longhands collapse to an `inset` shorthand at the IR level; the
-        // minimizing reverse-emit expands it back to top/right/bottom/left and picks the single utility
-        // covering all four (`inset-0`), replacing the four physical-side tokens. `bg-red-200` survives.
-        before: '<div className="top-0 right-0 bottom-0 left-0 bg-red-200">box</div>',
-        after: '<div className="bg-red-200 inset-0">box</div>'
-      }
-    ],
-    // No matching inset pair (all four distinct) → nothing collapses.
-    noMatch: ['<div className="top-0 right-1 bottom-2 left-3 bg-red-200">box</div>']
-  }
-});
-
-// ../patterns/src/library/compress/margin-shorthand.pattern.ts
-init_esm_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((p) => base.decls.get(p));
-      if (sides.some((d) => d === void 0)) return null;
-      const [mt, mr, mb, ml] = sides;
-      if (mt.important || mr.important || mb.important || ml.important) return null;
-      const value = collapseMarginValue(
-        String(mt.value),
-        String(mr.value),
-        String(mb.value),
-        String(ml.value)
-      );
-      const marginDecl = {
-        property: "margin",
-        value,
-        important: false,
-        relativeToParent: mt.relativeToParent || mr.relativeToParent || mb.relativeToParent || ml.relativeToParent,
-        inherited: false
-        // margin is not an inherited property
-      };
-      return withFoldedMargin(computed2, marginDecl);
-    }
-  },
-  test: {
-    cases: [
-      {
-        // The four equal margin longhands collapse to a `margin` shorthand at the IR level, and the
-        // minimizing reverse-emit picks the single shortest utility (`m-2`) reproducing it, replacing
-        // the four `m{t,r,b,l}-2` tokens. `bg-red-200` is preserved.
-        before: '<div className="mt-2 mr-2 mb-2 ml-2 bg-red-200">box</div>',
-        after: '<div className="bg-red-200 m-2">box</div>'
-      }
-    ],
-    // Only two margin sides set → the four-longhand `margin` collapse does not apply.
-    noMatch: ['<div className="mt-2 mb-2 bg-red-200">box</div>']
-  }
-});
-
-// ../patterns/src/library/compress/overflow-shorthand.pattern.ts
-init_esm_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_esm_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 x = base.decls.get(OVERSCROLL_X);
-      const y = base.decls.get(OVERSCROLL_Y);
-      if (!x || !y) return null;
-      if (x.important !== y.important) return null;
-      const value = String(x.value);
-      if (NON_COLLAPSIBLE_VALUES2.has(value)) return null;
-      if (value !== String(y.value)) return null;
-      const shorthand = {
-        property: OVERSCROLL,
-        value: x.value,
-        important: x.important,
-        relativeToParent: x.relativeToParent || y.relativeToParent,
-        inherited: false
-        // overscroll-behavior is not an inherited property
-      };
-      return withOverscrollShorthand(computed2, shorthand);
-    }
-  },
-  test: {
-    cases: [
-      {
-        // Equal x/y axes collapse to an `overscroll-behavior` decl at the IR level; the minimizing
-        // reverse-emit picks the single utility covering both (`overscroll-contain`), replacing the
-        // `overscroll-x-contain`+`overscroll-y-contain` pair. `bg-red-200` is preserved.
-        before: '<div className="overscroll-x-contain overscroll-y-contain bg-red-200">box</div>',
-        after: '<div className="bg-red-200 overscroll-contain">box</div>'
-      }
-    ],
-    // Axes differ (x != y) → no equal-axis collapse.
-    noMatch: ['<div className="overscroll-x-contain overscroll-y-auto bg-red-200">box</div>']
-  }
-});
-
-// ../patterns/src/library/compress/padding-shorthand.pattern.ts
-init_esm_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 relative = sides.some((d) => d.relativeToParent);
-  return { value, important: top.important, relative };
-}
-function withFoldedPadding(sm, fold) {
-  const blocks = /* @__PURE__ */ new Map();
-  for (const [key, block] of sm.blocks) {
-    if (key !== BASE_KEY7) {
-      blocks.set(key, block);
-      continue;
-    }
-    const decls = /* @__PURE__ */ new Map();
-    for (const [prop, decl] of block.decls) {
-      if (PADDING_SIDE_SET.has(String(prop))) continue;
-      decls.set(prop, decl);
-    }
-    const shorthand = {
-      property: "padding",
-      value: fold.value,
-      important: fold.important,
-      relativeToParent: fold.relative,
-      inherited: false
-      // padding is never inherited
-    };
-    decls.set(shorthand.property, shorthand);
-    blocks.set(key, { condition: block.condition, decls });
-  }
-  return { blocks };
-}
-var paddingShorthand = definePattern({
-  name: "padding-shorthand",
-  category: "compress/padding-shorthand",
-  safety: 1,
-  doc: {
-    title: "Collapse padding longhands to shorthand",
-    summary: "Equal padding on all four sides (or matching x/y pairs) expressed as separate longhand declarations is collapsed to the shortest equivalent padding shorthand (p-* / px-* py-*).",
-    before: '<div class="pt-4 pr-4 pb-4 pl-4"/>',
-    after: '<div class="p-4"/>',
-    safetyRationale: "A value-preserving re-serialization of the same computed padding on the same node \u2014 a class-only change. It is safe even on an element with a ref, event handler, dynamic child, or dangerouslySetInnerHTML \u2014 a className rewrite touches none of them; only a dynamic/opaque class list or a combinator-subject class is excluded, so no behaviour or project selector is disturbed."
-  },
-  rewrite: {
-    rewriteClasses(computed2) {
-      const fold = analyzePadding(computed2);
-      return fold ? withFoldedPadding(computed2, fold) : null;
-    }
-  },
-  test: {
-    cases: [
-      {
-        // The four equal padding longhands collapse to a `padding` shorthand at the IR level, and the
-        // minimizing reverse-emit picks the single shortest utility (`p-4`) that reproduces it,
-        // replacing the four `p{t,r,b,l}-4` tokens. `bg-red-200` is preserved (its order is stable).
-        before: '<div className="pt-4 pr-4 pb-4 pl-4 bg-red-200">box</div>',
-        after: '<div className="bg-red-200 p-4">box</div>'
-      },
-      {
-        // A dynamic `{x}` child no longer blocks compress: only the element's OWN class tokens are
-        // rewritten (px-4 py-4 → p-4); the dynamic child is untouched by a class-only change. This is
-        // the real-app common case (most elements have dynamic content).
-        before: '<div className="px-4 py-4">{x}</div>',
-        after: '<div className="p-4">{x}</div>'
-      }
-    ],
-    // Asymmetric padding (top != bottom) cannot fold into a shorthand → left unchanged.
-    noMatch: ['<div className="pt-2 pr-4 pb-8 pl-4 bg-red-200">box</div>']
-  }
-});
-
-// ../patterns/src/library/compress/place-shorthand.pattern.ts
-init_esm_shims();
-var ALIGN_ITEMS = "align-items";
-var JUSTIFY_ITEMS = "justify-items";
-var PLACE_ITEMS = "place-items";
-var ALIGN_CONTENT = "align-content";
-var JUSTIFY_CONTENT = "justify-content";
-var PLACE_CONTENT = "place-content";
-var BASE_KEY8 = conditionKey(BASE_CONDITION);
-function samePair(a, b) {
-  return a !== void 0 && b !== void 0 && a.value === b.value && a.important === b.important;
-}
-function placeDecl(property, align) {
-  return {
-    property,
-    value: align.value,
-    important: align.important,
-    relativeToParent: false,
-    // alignment keywords (center/start/stretch/…) are not length-relative
-    inherited: false
-    // none of the place-* alignment properties are inherited
-  };
-}
-function withBaseDecls2(sm, baseDecls) {
-  const blocks = /* @__PURE__ */ new Map();
-  for (const [key, block] of sm.blocks) {
-    const decls = key === BASE_KEY8 ? new Map(baseDecls) : block.decls;
-    blocks.set(key, { condition: block.condition, decls });
-  }
-  return { blocks };
-}
-var placeShorthand = definePattern({
-  name: "place-shorthand",
-  category: "compress/place-shorthand",
-  safety: 1,
-  doc: {
-    title: "Collapse matching alignment pairs into `place-*` shorthands",
-    summary: "When align-items equals justify-items they collapse to `place-items`; when align-content equals justify-content they collapse to `place-content`. The two collapses are independent.",
-    before: '<div style="align-items:center;justify-items:center"/>',
-    after: '<div style="place-items:center"/>',
-    safetyRationale: "A `place-*` shorthand is value-identical to its equal align/justify pair \u2014 a class-only change. It is safe even on an element with a ref, event handler, dynamic child, or dangerouslySetInnerHTML \u2014 a className rewrite touches none of them; only a dynamic/opaque class list or a combinator-subject class is excluded, so no behaviour or project selector is disturbed."
-  },
-  rewrite: {
-    rewriteClasses(computed2) {
-      const base = computed2.blocks.get(BASE_KEY8);
-      if (!base) return null;
-      const alignItems = base.decls.get(ALIGN_ITEMS);
-      const justifyItems = base.decls.get(JUSTIFY_ITEMS);
-      const alignContent = base.decls.get(ALIGN_CONTENT);
-      const justifyContent = base.decls.get(JUSTIFY_CONTENT);
-      const next = new Map(base.decls);
-      let collapsed = false;
-      if (samePair(alignItems, justifyItems)) {
-        next.delete(ALIGN_ITEMS);
-        next.delete(JUSTIFY_ITEMS);
-        next.set(PLACE_ITEMS, placeDecl(PLACE_ITEMS, alignItems));
-        collapsed = true;
-      }
-      if (samePair(alignContent, justifyContent)) {
-        next.delete(ALIGN_CONTENT);
-        next.delete(JUSTIFY_CONTENT);
-        next.set(PLACE_CONTENT, placeDecl(PLACE_CONTENT, alignContent));
-        collapsed = true;
-      }
-      if (!collapsed) return null;
-      return withBaseDecls2(computed2, next);
-    }
-  },
-  test: {
-    cases: [
-      {
-        // The matching items pair collapses to a `place-items` decl at the IR level; the minimizing
-        // reverse-emit picks the single utility covering both (`place-items-center`), replacing the
-        // `items-center`+`justify-items-center` pair. `bg-red-200` is preserved.
-        before: '<div className="items-center justify-items-center bg-red-200">box</div>',
-        after: '<div className="bg-red-200 place-items-center">box</div>'
-      }
-    ],
-    // Mismatched alignment (align-items != justify-items, no content pair) → nothing collapses.
-    noMatch: ['<div className="items-center justify-items-start bg-red-200">box</div>']
-  }
-});
-
-// ../patterns/src/library/compress/scroll-margin-shorthand.pattern.ts
-init_esm_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((d) => d.important === important)) return null;
-  const value = String(sides[0].value);
-  if (NON_COLLAPSIBLE_VALUES3.has(value)) return null;
-  if (!sides.every((d) => String(d.value) === value)) return null;
-  const relative = sides.some((d) => d.relativeToParent);
-  return { value, important, relative };
-}
-function withFoldedScrollMargin(sm, fold) {
-  const blocks = /* @__PURE__ */ new Map();
-  for (const [key, block] of sm.blocks) {
-    if (key !== BASE_KEY9) {
-      blocks.set(key, block);
-      continue;
-    }
-    const decls = /* @__PURE__ */ new Map();
-    for (const [prop, decl] of block.decls) {
-      if (SIDE_SET.has(String(prop))) continue;
-      decls.set(prop, decl);
-    }
-    const shorthand = {
-      property: SCROLL_MARGIN,
-      value: fold.value,
-      important: fold.important,
-      relativeToParent: fold.relative,
-      inherited: false
-      // scroll-margin is never inherited
-    };
-    decls.set(shorthand.property, shorthand);
-    blocks.set(key, { condition: block.condition, decls });
-  }
-  return { blocks };
-}
-var scrollMarginShorthand = definePattern({
-  name: "scroll-margin-shorthand",
-  category: "compress/scroll-margin-shorthand",
-  safety: 1,
-  doc: {
-    title: "Collapse equal scroll-margin sides into scroll-margin",
-    summary: "An element whose four scroll-margin sides are all equal is rewritten to the single Tailwind scroll-m-* utility (scroll-margin === the four equal sides).",
-    before: '<div class="scroll-mt-4 scroll-mr-4 scroll-mb-4 scroll-ml-4"/>',
-    after: '<div class="scroll-m-4"/>',
-    safetyRationale: "`scroll-margin` is value-identical to four equal scroll-margin sides \u2014 a class-only change. It is safe even on an element with a ref, event handler, dynamic child, or dangerouslySetInnerHTML \u2014 a className rewrite touches none of them; only a dynamic/opaque class list or a combinator-subject class is excluded, so no behaviour or project selector is disturbed."
-  },
-  rewrite: {
-    rewriteClasses(computed2) {
-      const fold = analyzeScrollMargin(computed2);
-      return fold ? withFoldedScrollMargin(computed2, fold) : null;
-    }
-  },
-  test: {
-    cases: [
-      {
-        // The four equal scroll-margin longhands collapse to a `scroll-margin` decl at the IR level; the
-        // minimizing reverse-emit then picks the single shortest utility (`scroll-m-4`) that reproduces
-        // it, replacing the four `scroll-m{t,r,b,l}-4` tokens. `bg-red-200` is preserved.
-        before: '<div className="scroll-mt-4 scroll-mr-4 scroll-mb-4 scroll-ml-4 bg-red-200">box</div>',
-        after: '<div className="bg-red-200 scroll-m-4">box</div>'
-      }
-    ],
-    // Sides differ (top != bottom) → no all-equal collapse.
-    noMatch: ['<div className="scroll-mt-2 scroll-mr-4 scroll-mb-8 scroll-ml-4 bg-red-200">box</div>']
-  }
-});
-
-// ../patterns/src/library/compress/scroll-padding-shorthand.pattern.ts
-init_esm_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((d) => d.important === important)) return null;
-  const value = String(sides[0].value);
-  if (NON_COLLAPSIBLE_VALUES4.has(value)) return null;
-  if (!sides.every((d) => String(d.value) === value)) return null;
-  const relative = sides.some((d) => d.relativeToParent);
-  return { value, important, relative };
-}
-function withFoldedScrollPadding(sm, fold) {
-  const blocks = /* @__PURE__ */ new Map();
-  for (const [key, block] of sm.blocks) {
-    if (key !== BASE_KEY10) {
-      blocks.set(key, block);
-      continue;
-    }
-    const decls = /* @__PURE__ */ new Map();
-    for (const [prop, decl] of block.decls) {
-      if (SIDE_SET2.has(String(prop))) continue;
-      decls.set(prop, decl);
-    }
-    const shorthand = {
-      property: SCROLL_PADDING,
-      value: fold.value,
-      important: fold.important,
-      relativeToParent: fold.relative,
-      inherited: false
-      // scroll-padding is never inherited
-    };
-    decls.set(shorthand.property, shorthand);
-    blocks.set(key, { condition: block.condition, decls });
-  }
-  return { blocks };
-}
-var scrollPaddingShorthand = definePattern({
-  name: "scroll-padding-shorthand",
-  category: "compress/scroll-padding-shorthand",
-  safety: 1,
+  category: "flatten/wrapper/passthrough-wrapper",
+  safety: 2,
   doc: {
-    title: "Collapse equal scroll-padding sides into scroll-padding",
-    summary: "An element whose four scroll-padding sides are all equal is rewritten to the single Tailwind scroll-p-* utility (scroll-padding === the four equal sides).",
-    before: '<div class="scroll-pt-4 scroll-pr-4 scroll-pb-4 scroll-pl-4"/>',
-    after: '<div class="scroll-p-4"/>',
-    safetyRationale: "`scroll-padding` is value-identical to four equal scroll-padding sides \u2014 a class-only change. It is safe even on an element with a ref, event handler, dynamic child, or dangerouslySetInnerHTML \u2014 a className rewrite touches none of them; only a dynamic/opaque class list or a combinator-subject class is excluded, so no behaviour or project selector is disturbed."
+    title: "Flatten passthrough wrapper",
+    summary: "A div with no own visual/box style, no attributes beyond an inert class, exactly one element child, and no opacity barriers is removed; its sole child is hoisted in its place.",
+    before: "<div><Child/></div>",
+    after: "<Child/>",
+    safetyRationale: "Wrapper paints nothing and establishes no layout/paint/var context, carries no ref/handlers/dynamic-children/html/spread/component identity, owns no targetable attrs, and is not a combinator/structural-pseudo subject (reparenting changes no match-set); inheritable styles are folded onto the child before removal."
   },
-  rewrite: {
-    rewriteClasses(computed2) {
-      const fold = analyzeScrollPadding(computed2);
-      return fold ? withFoldedScrollPadding(computed2, fold) : null;
-    }
+  match: {
+    tag: "div",
+    onlyChild: "element",
+    paintsNothing: true,
+    where: [
+      not(establishesContext),
+      not(hasOwnAttrs2),
+      not(hasDynamicClasses),
+      not(hasSpreadAttrs2),
+      not(isComponentNode3),
+      not(targetedByStructuralPseudo3)
+    ]
   },
+  rewrite: { flattenInto: "child" },
   test: {
     cases: [
       {
-        // The four equal scroll-padding longhands collapse to a `scroll-padding` decl at the IR level;
-        // the minimizing reverse-emit then picks the single shortest utility (`scroll-p-4`) that
-        // reproduces it, replacing the four `scroll-p{t,r,b,l}-4` tokens. `bg-red-200` is preserved.
-        before: '<div className="scroll-pt-4 scroll-pr-4 scroll-pb-4 scroll-pl-4 bg-red-200">box</div>',
-        after: '<div className="bg-red-200 scroll-p-4">box</div>'
+        // A plain, style-free wrapper paints nothing and establishes no context → a provably-safe
+        // flatten under the conservative gate: the wrapper is removed and its sole child hoisted.
+        before: '<div><a className="bg-red-200">Link</a></div>',
+        after: '<a className="bg-red-200">Link</a>'
       }
     ],
-    // Sides differ (top != bottom) → no all-equal collapse.
-    noMatch: ['<div className="scroll-pt-2 scroll-pr-4 scroll-pb-8 scroll-pl-4 bg-red-200">box</div>']
+    noMatch: [
+      // A ref pins the wrapper's element identity (a hard opacity barrier) → not a passthrough.
+      '<div ref={rootRef}><a className="bg-red-200">Link</a></div>',
+      // A `display:flex` wrapper establishes a formatting context, so removing its box is NOT
+      // provably layout-neutral → the conservative gate leaves it in place.
+      '<div className="flex"><a className="bg-red-200">Link</a></div>'
+    ]
   }
 });
 
-// ../patterns/src/library/compress/size-shorthand.pattern.ts
+// ../patterns/src/library/wrapper/redundant-inline-wrapper.pattern.ts
 init_esm_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 m = metaOf3(node);
+  if (!m) return false;
+  return m.establishesBox || m.establishesFormattingContext || m.establishesStackingContext || m.isContainingBlock || m.declaresCustomProperties;
+};
+var hasSpreadAttrs3 = (node) => metaOf3(node)?.hasSpreadAttrs ?? false;
+var isComponentNode4 = (node) => metaOf3(node)?.isComponent ?? false;
+var hasOwnAttrs3 = (node) => {
+  const el = asEl3(node);
+  if (!el) return false;
+  return el.attrs.entries.size > 0 || el.attrs.spreads.length > 0;
+};
+var targetedByStructuralPseudo4 = (node, ctx) => {
+  const el = asEl3(node);
+  if (!el) return false;
+  if (el.meta.targetedByStructuralPseudo) return true;
+  return ctx.selectors.targetedByStructuralPseudo(el.id);
+};
+var DISPLAY2 = "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(DISPLAY2);
+    if (decl && String(decl.value) !== "inline") return true;
+  }
+  return false;
+};
+var redundantInlineWrapper = definePattern({
+  name: "redundant-inline-wrapper",
+  category: "flatten/wrapper/redundant-inline-wrapper",
   safety: 2,
   doc: {
-    title: "Collapse equal width/height into size-*",
-    summary: "An element whose computed width and height are equal is rewritten to the single Tailwind size-* utility (size-* === width + height at the same value).",
-    before: '<div style="width:1rem;height:1rem"/>',
-    after: '<div class="size-4"/>',
-    safetyRationale: "`size-*` is value-identical to equal width+height \u2014 a class-only change. It is safe even on an element with a ref, event handler, dynamic child, or dangerouslySetInnerHTML \u2014 a className rewrite touches none of them; only a dynamic/opaque class list or a combinator-subject class is excluded, so no behaviour or project selector is disturbed."
+    title: "Flatten redundant inline wrapper",
+    summary: "An inline span with no own visual/box style, no attributes beyond an inert class, exactly one element child, and no opacity barriers is removed; its sole child is hoisted in its place.",
+    before: "<span><Child/></span>",
+    after: "<Child/>",
+    safetyRationale: "An empty inline box paints nothing and establishes no layout/paint/var context; with the inline default display and a single element child its removal changes no paint and no flow. The span carries no ref/handlers/dynamic-children/html/spread/component identity, owns no targetable attrs, and is not a combinator/structural-pseudo subject; inheritable styles are folded onto the child before removal."
   },
-  rewrite: {
-    rewriteClasses(computed2) {
-      const base = baseBlock(computed2);
-      const w = base?.decls.get(WIDTH);
-      const h = base?.decls.get(HEIGHT);
-      if (!w || !h) return null;
-      if (w.important !== h.important) return null;
-      if (NON_COLLAPSIBLE_VALUES5.has(String(w.value))) return null;
-      if (w.value !== h.value) return null;
-      return withSizeShorthand(computed2, String(w.value), w.important);
-    }
+  match: {
+    tag: "span",
+    onlyChild: "element",
+    paintsNothing: true,
+    where: [
+      not(hasNonInlineDisplay),
+      not(establishesContext2),
+      not(hasOwnAttrs3),
+      not(hasDynamicClasses),
+      not(hasSpreadAttrs3),
+      not(isComponentNode4),
+      not(targetedByStructuralPseudo4)
+    ]
   },
+  rewrite: { flattenInto: "child" },
   test: {
     cases: [
       {
-        // Equal width/height collapse to a `size` decl at the IR level; the minimizing reverse-emit
-        // expands `size` back to width+height, finds the single utility covering both (`size-10`), and
-        // replaces the `h-10`+`w-10` pair with it. `bg-red-200` is preserved.
-        before: '<div className="h-10 w-10 bg-red-200">box</div>',
-        after: '<div className="bg-red-200 size-10">box</div>'
+        // An empty inline span paints nothing and establishes no context → a provably-safe flatten:
+        // the span is removed and its sole child hoisted in place.
+        before: '<span><a className="text-blue-500">Link</a></span>',
+        after: '<a className="text-blue-500">Link</a>'
       }
     ],
-    // Width and height differ → no equal-axis collapse.
-    noMatch: ['<div className="h-10 w-20 bg-red-200">box</div>']
+    noMatch: [
+      // A ref pins the span's element identity (a hard opacity barrier) → not a passthrough.
+      '<span ref={spanRef}><a className="text-blue-500">Link</a></span>',
+      // The span paints its own background (own visual style) → kept.
+      '<span className="bg-green-200"><a className="text-blue-500">Link</a></span>',
+      // Non-inline display (inline-block) participates in layout differently → kept.
+      '<span className="inline-block"><a className="text-blue-500">Link</a></span>'
+    ]
   }
 });
 
 // ../patterns/src/_registry.generated.ts
 init_esm_shims();
 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
 ];
 
 // ../patterns/src/index.ts
@@ -1842,14 +604,315 @@ function synthesizeResidual(remaining, ctx) {
 // ../resolver-tailwind/src/tailwind/engine.ts
 init_esm_shims();
 import { createRequire } from "module";
+import * as path3 from "path";
+
+// ../resolver-tailwind/src/tailwind/engine-v4.ts
+init_esm_shims();
+import { readdirSync, readFileSync, statSync } from "fs";
+import * as path2 from "path";
+
+// ../resolver-tailwind/src/tailwind/v4-bridge.ts
+init_esm_shims();
+import { execFileSync } from "child_process";
+import { mkdtempSync, rmSync, writeFileSync } from "fs";
+import { tmpdir } from "os";
 import * as path from "path";
+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 = mkdtempSync(path.join(tmpdir(), "domflax-tw4-"));
+    const scriptPath = path.join(dir, "bridge.mjs");
+    const payloadPath = path.join(dir, "payload.json");
+    writeFileSync(scriptPath, CHILD_SOURCE, "utf8");
+    writeFileSync(payloadPath, JSON.stringify(payload), "utf8");
+    const stdout = execFileSync(process.execPath, [scriptPath, payloadPath], {
+      cwd: payload.projectRoot,
+      encoding: "utf8",
+      timeout: 9e4,
+      maxBuffer: 256 * 1024 * 1024,
+      stdio: ["ignore", "pipe", "ignore"]
+    });
+    const parsed = JSON.parse(stdout);
+    if (!parsed.ok || !Array.isArray(parsed.entries) || parsed.entries.length === 0) return null;
+    const entries = parsed.entries.filter(
+      (e) => Array.isArray(e) && typeof e[0] === "string" && typeof e[1] === "string"
+    );
+    return entries.length > 0 ? { entries } : null;
+  } catch {
+    return null;
+  } finally {
+    if (dir) {
+      try {
+        rmSync(dir, { recursive: true, force: true });
+      } catch {
+      }
+    }
+  }
+}
+
+// ../resolver-tailwind/src/tailwind/v4-css.ts
+init_esm_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 m = /^@([A-Za-z-]+)\s*([\s\S]*)$/.exec(prelude);
+  if (!m) return { name: prelude.slice(1).trim(), params: "" };
+  return { name: m[1].toLowerCase(), params: m[2].trim() };
+}
+function parseBlock(src, start) {
+  const nodes = [];
+  let buf = "";
+  let i = start;
+  while (i < src.length) {
+    const c = src[i];
+    if (c === "{") {
+      const prelude = buf.trim();
+      buf = "";
+      const inner = parseBlock(src, i + 1);
+      i = inner.next;
+      if (prelude.startsWith("@")) {
+        const { name, params } = splitAtRule(prelude);
+        nodes.push({ type: "atrule", name, params, nodes: inner.nodes });
+      } else if (prelude.length > 0) {
+        nodes.push({ type: "rule", selector: prelude, nodes: inner.nodes });
+      }
+    } else if (c === "}") {
+      const d = toDecl(buf);
+      if (d) nodes.push(d);
+      return { nodes, next: i + 1 };
+    } else if (c === ";") {
+      const d = toDecl(buf);
+      if (d) nodes.push(d);
+      buf = "";
+      i += 1;
+    } else {
+      buf += c;
+      i += 1;
+    }
+  }
+  const tail = toDecl(buf);
+  if (tail) nodes.push(tail);
+  return { nodes, next: i };
+}
+function resolveNesting(child, parent) {
+  const c = child.trim();
+  if (parent.length === 0) return c;
+  if (c.includes("&")) return c.split("&").join(parent);
+  return `${parent} ${c}`;
+}
+var DROP_ATRULES = /* @__PURE__ */ new Set(["property", "keyframes", "font-face", "charset", "import"]);
+function flattenNodes(nodes, selector, at, out) {
+  const own = [];
+  for (const n of nodes) if (n.type === "decl") own.push(n);
+  if (own.length > 0 && selector.length > 0) out.push({ selector, at: [...at], decls: own });
+  for (const n of nodes) {
+    if (n.type === "rule") {
+      flattenNodes(n.nodes, resolveNesting(n.selector, selector), at, out);
+    } else if (n.type === "atrule") {
+      if (n.name === "media") {
+        flattenNodes(n.nodes, selector, [...at, { name: "media", params: n.params }], out);
+      } else if (n.name === "layer") {
+        flattenNodes(n.nodes, selector, at, out);
+      } else if (!DROP_ATRULES.has(n.name)) {
+        flattenNodes(n.nodes, selector, [...at, { name: n.name, params: n.params }], out);
+      }
+    }
+  }
+}
+function leafToNode(leaf) {
+  const declNodes = leaf.decls.map((d) => ({
+    type: "decl",
+    prop: d.prop,
+    value: d.value,
+    important: d.important
+  }));
+  let node = { type: "rule", selector: leaf.selector, nodes: declNodes };
+  for (let i = leaf.at.length - 1; i >= 0; i -= 1) {
+    node = { type: "atrule", name: leaf.at[i].name, params: leaf.at[i].params, nodes: [node] };
+  }
+  return node;
+}
+function parseUtilityCss(css) {
+  try {
+    const { nodes } = parseBlock(stripComments(css), 0);
+    const leaves = [];
+    flattenNodes(nodes, "", [], leaves);
+    return leaves.map(leafToNode);
+  } catch {
+    return [];
+  }
+}
+
+// ../resolver-tailwind/src/tailwind/engine-v4.ts
+var SEARCH_DIRS = ["", "src", "app", "styles", "src/styles", "src/app", "app/styles", "assets/css", "css"];
+var SKIP_DIRS = /* @__PURE__ */ new Set(["node_modules", ".git", "dist", "build", "out", ".next", "coverage"]);
+var ENTRY_RE = /@import\s+["']tailwindcss["']|@tailwind\b|@theme\b/;
+function scanDir(dir) {
+  let names;
+  try {
+    names = readdirSync(dir);
+  } catch {
+    return null;
+  }
+  for (const name of names) {
+    if (!name.toLowerCase().endsWith(".css")) continue;
+    const file = path2.join(dir, name);
+    try {
+      if (!statSync(file).isFile()) continue;
+      const css = readFileSync(file, "utf8");
+      if (ENTRY_RE.test(css)) return { css, base: path2.dirname(file) };
+    } catch {
+    }
+  }
+  return null;
+}
+function findCssEntries(projectRoot) {
+  const out = [];
+  const seen = /* @__PURE__ */ new Set();
+  for (const rel of SEARCH_DIRS) {
+    const dir = path2.resolve(projectRoot, rel);
+    if (seen.has(dir) || [...SKIP_DIRS].some((s) => dir.includes(`${path2.sep}${s}`))) continue;
+    seen.add(dir);
+    const hit = scanDir(dir);
+    if (hit) {
+      out.push(hit);
+      break;
+    }
+  }
+  out.push({ css: '@import "tailwindcss";', base: projectRoot });
+  return out;
+}
+function makeV4Engine(entries, version) {
+  const cssByClass = new Map(entries.map(([name, css]) => [name, css]));
+  const nodeCache = /* @__PURE__ */ new Map();
+  const nodesFor = (token) => {
+    let cached = nodeCache.get(token);
+    if (!cached) {
+      const css = cssByClass.get(token);
+      cached = css ? parseUtilityCss(css) : [];
+      nodeCache.set(token, cached);
+    }
+    return cached;
+  };
+  return {
+    version,
+    context: {
+      // The resolver keeps only string entries; we hand it the concrete class names directly.
+      getClassList: () => [...cssByClass.keys()]
+    },
+    generate(candidates) {
+      const out = [];
+      for (const c of candidates) for (const n of nodesFor(c)) out.push(n);
+      return out;
+    }
+  };
+}
+function loadV4Engine(projectRoot, version) {
+  const snapshot = runV4Bridge({ projectRoot, entries: findCssEntries(projectRoot) });
+  if (!snapshot) return null;
+  return makeV4Engine(snapshot.entries, version);
+}
+
+// ../resolver-tailwind/src/tailwind/engine.ts
 function moduleBase() {
   return typeof __filename === "string" ? __filename : import.meta.url;
 }
 function projectRequire(projectRoot) {
   const bases = [];
-  if (projectRoot) bases.push(path.join(projectRoot, "__domflax__.js"));
-  bases.push(path.join(process.cwd(), "__domflax__.js"));
+  if (projectRoot) bases.push(path3.join(projectRoot, "__domflax__.js"));
+  bases.push(path3.join(process.cwd(), "__domflax__.js"));
   bases.push(moduleBase());
   for (const base of bases) {
     try {
@@ -1861,14 +924,36 @@ function projectRequire(projectRoot) {
   }
   return null;
 }
+var FIRST_UNSUPPORTED_MAJOR = 4;
+function majorOf(version) {
+  const m = /^\s*(\d+)/.exec(version);
+  return m ? Number(m[1]) : null;
+}
 function loadEngine(options) {
   const req = projectRequire(options.projectRoot);
-  if (!req) return null;
+  if (!req) return { engine: null, version: null, unsupportedMajor: null };
+  let version = null;
+  try {
+    version = req("tailwindcss/package.json").version;
+  } catch {
+    return { engine: null, version: null, unsupportedMajor: null };
+  }
+  const major = majorOf(version);
+  if (major !== null && major >= FIRST_UNSUPPORTED_MAJOR) {
+    const projectRoot = options.projectRoot ?? process.cwd();
+    let v4 = null;
+    try {
+      v4 = loadV4Engine(projectRoot, version);
+    } catch {
+      v4 = null;
+    }
+    if (v4) return { engine: v4, version, unsupportedMajor: null };
+    return { engine: null, version, unsupportedMajor: major };
+  }
   try {
     const resolveConfig = req("tailwindcss/resolveConfig.js");
     const { createContext } = req("tailwindcss/lib/lib/setupContextUtils.js");
     const { generateRules } = req("tailwindcss/lib/lib/generateRules.js");
-    const pkg = req("tailwindcss/package.json");
     let userConfig = options.config ?? { content: [{ raw: "" }] };
     if (options.configPath !== void 0) {
       const loadConfig = req("tailwindcss/loadConfig.js");
@@ -1877,15 +962,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 };
   }
 }
 
@@ -2071,22 +1160,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) {
@@ -2195,9 +1301,75 @@ var TailwindResolver = class {
     this.#reverseIndex = index;
     return index;
   }
+  /**
+   * The cover vocabulary: every base-condition, plain-subject utility mapped to the {@link tupleKey}s
+   * of its full normalized-longhand declaration set. Built once from a SINGLE engine `generate` over
+   * the enumerable class list (grouped by selector), so it is the same cost as {@link #buildReverseIndex}.
+   * This is what the provider-uniform exact-cover engine searches; the element's own droppable tokens
+   * are members of it, guaranteeing feasibility. Variant / combinator / pseudo utilities are excluded
+   * (their effect is not the element's own base box), so a target carrying such conditions simply finds
+   * no cover and falls back to the greedy emit.
+   */
+  #buildCoverVocab() {
+    if (this.#coverVocab) return this.#coverVocab;
+    const baseCk = String(conditionKey(BASE_CONDITION));
+    const out = [];
+    if (this.#engine) {
+      try {
+        const classes = this.#engine.context.getClassList().filter((c) => typeof c === "string");
+        const nodes = this.#engine.generate(classes);
+        for (const node of nodes) {
+          if (node.type !== "rule") continue;
+          const rule = node;
+          const parsed = parseSelector(rule.selector);
+          if (parsed.kind !== "simple" || parsed.states.length > 0 || parsed.pseudoElement !== "") {
+            continue;
+          }
+          const className = unescapeClass(rule.selector);
+          if (className === null) continue;
+          const tuples = [];
+          const seen = /* @__PURE__ */ new Set();
+          for (const child of rule.nodes ?? []) {
+            if (child.type !== "decl") continue;
+            const d = child;
+            if (typeof d.value !== "string") continue;
+            for (const decl of normalizer.normalizeDeclaration(d.prop, d.value, d.important === true)) {
+              const k = tupleKey(baseCk, String(decl.property), String(decl.value), decl.important);
+              if (!seen.has(k)) {
+                seen.add(k);
+                tuples.push(k);
+              }
+            }
+          }
+          if (tuples.length > 0) out.push({ token: className, tuples });
+        }
+      } catch {
+      }
+    }
+    this.#coverVocab = out;
+    return out;
+  }
+  /**
+   * Try the minimal-string exact-cover engine over the WHOLE utility vocabulary. On success the chosen
+   * set is verified by the mandatory CORRECTNESS BACKSTOP — re-resolve it and assert it reproduces the
+   * target's tuples EXACTLY — before it is returned; any mismatch (or no cover / oversize universe)
+   * yields `null` so {@link emit} uses its greedy fallback. Never returns a set that misrepresents `U`.
+   */
+  #tryCover(normalized, norm) {
+    const universe = styleMapTuples(normalized, norm);
+    if (universe.length === 0) return { classes: [], exact: true, warnings: [] };
+    const chosen = minStringCover(universe, this.#buildCoverVocab());
+    if (!chosen || chosen.length === 0) return null;
+    const reTuples = new Set(styleMapTuples(this.resolve({ classes: chosen }).styles, norm));
+    if (reTuples.size !== universe.length) return null;
+    for (const t of universe) if (!reTuples.has(t)) return null;
+    return { classes: chosen, exact: true, warnings: [] };
+  }
   emit(styles, ctx) {
     const norm = ctx.normalizer ?? normalizer;
     const normalized = norm.normalizeStyleMap(styles);
+    const cover = this.#tryCover(normalized, norm);
+    if (cover) return cover;
     const base = normalized.blocks.get(conditionKey(BASE_CONDITION));
     if (!base || base.decls.size === 0) return { classes: [], exact: true, warnings: [] };
     const hasNonBase = normalized.blocks.size > 1;
@@ -2227,13 +1399,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;
@@ -2312,14 +1484,14 @@ var LEGACY_PSEUDO_ELEMENTS2 = /* @__PURE__ */ new Set([
 // ../resolver-css/src/engine.ts
 init_esm_shims();
 import { createRequire as createRequire2 } from "module";
-import * as path2 from "path";
+import * as path4 from "path";
 function moduleBase2() {
   return typeof __filename === "string" ? __filename : import.meta.url;
 }
 function loadPostcssEngine(projectRoot) {
   const bases = [];
-  if (projectRoot) bases.push(path2.join(projectRoot, "__domflax__.js"));
-  bases.push(path2.join(process.cwd(), "__domflax__.js"));
+  if (projectRoot) bases.push(path4.join(projectRoot, "__domflax__.js"));
+  bases.push(path4.join(process.cwd(), "__domflax__.js"));
   bases.push(moduleBase2());
   for (const base of bases) {
     try {
@@ -2374,15 +1546,15 @@ function collectDecls(rule) {
 
 // ../resolver-css/src/misc-helpers.ts
 init_esm_shims();
-import { readFileSync } from "fs";
+import { readFileSync as readFileSync2 } from "fs";
 function isPlainClassToken(token) {
   return token.length > 0 && !/[\s.#>+~:[\]()]/.test(token);
 }
-function readCssPath(path3) {
+function readCssPath(path5) {
   try {
-    return { id: path3, css: readFileSync(path3, "utf8") };
+    return { id: path5, css: readFileSync2(path5, "utf8") };
   } catch (cause) {
-    throw new Error(`resolver-css: cannot read CSS file "${path3}"`, { cause });
+    throw new Error(`resolver-css: cannot read CSS file "${path5}"`, { cause });
   }
 }
 function deriveFingerprint(provider, files) {
@@ -2438,6 +1610,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);
@@ -2470,8 +1644,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));
       }
@@ -2681,7 +1870,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 = [];
@@ -2896,9 +2101,10 @@ function doParse(code, ctx) {
     native: document
   };
   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 w of res.warnings) {
       diagnostics.push({
         code: "DF_STYLE_CONFLICT_UNRESOLVED",
@@ -2988,7 +2194,7 @@ function doParse(code, ctx) {
       order.push(a.name);
     }
     const attrs = { entries, spreads: [], order };
-    const computed2 = resolveComputed(classTokens, tag, id);
+    const computed = resolveComputed(classTokens, tag, id, meta);
     const children = [];
     if (!opaqueSubtree) {
       for (const c of node.childNodes ?? []) appendChild(c, id, children);
@@ -2999,7 +2205,7 @@ function doParse(code, ctx) {
       isComponent: false,
       selfClosing: loc ? loc.endTag == null : false,
       classes,
-      computed: computed2,
+      computed,
       attrs,
       children,
       parent: parentId,
@@ -3387,7 +2593,7 @@ function doParse2(code, ctx) {
         break;
       }
     }
-    let computed2 = emptyStyleMap();
+    let computed = emptyStyleMap();
     if (!classes.hasDynamic) {
       const tokens = staticTokensOf3(classes);
       if (tokens.length > 0) {
@@ -3395,7 +2601,8 @@ function doParse2(code, ctx) {
           classes: tokens,
           element: { tagName: tag, namespace: component ? void 0 : "html" }
         });
-        computed2 = ctx.normalizer.normalizeStyleMap(res.styles);
+        computed = ctx.normalizer.normalizeStyleMap(res.styles);
+        if (res.unknown.length > 0) meta.hasUnresolvedClasses = true;
         for (const w of res.warnings) {
           diagnostics.push({
             code: "DF_STYLE_CONFLICT_UNRESOLVED",
@@ -3413,7 +2620,7 @@ function doParse2(code, ctx) {
       isComponent: component,
       selfClosing: opening.selfClosing,
       classes,
-      computed: computed2,
+      computed,
       attrs,
       children,
       parent: parentId,
@@ -3438,13 +2645,13 @@ function doParse2(code, ctx) {
   };
   const roots = [];
   traverse(ast, {
-    JSXElement(path3) {
-      roots.push(path3.node);
-      path3.skip();
+    JSXElement(path5) {
+      roots.push(path5.node);
+      path5.skip();
     },
-    JSXFragment(path3) {
-      roots.push(path3.node);
-      path3.skip();
+    JSXFragment(path5) {
+      roots.push(path5.node);
+      path5.skip();
     }
   });
   const rootFrag = doc.nodes.get(doc.root);
@@ -3722,28 +2929,14 @@ function createJsxBackend() {
 init_esm_shims();
 
 export {
+  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,
   builtinPatterns,
   createTailwindResolver,
   createCssResolver,
@@ -3752,4 +2945,4 @@ export {
   createJsxFrontend,
   createJsxBackend
 };
-//# sourceMappingURL=chunk-3Z5ZWLXX.js.map
+//# sourceMappingURL=chunk-FPT4EJ6Q.js.map