domflax 0.1.0 → 0.1.1

package/dist/{chunk-4HHISSMR.js → chunk-DNHOGPYV.js}

@@ -10,46 +10,108 @@ import {
   createFragment,
   createText,
   defaultMeta,
+  definePattern,
   emptyClassList,
   emptyStyleMap,
-  hasDynamicChildren,
   hasDynamicClasses,
-  hasEventHandlers,
-  hasRef,
   isElement,
   normalizer,
   not,
-  pattern,
   targetedByCombinator
-} from "./chunk-77SLHRN6.js";
+} from "./chunk-DWLB7FRR.js";
 import {
   __filename,
   init_esm_shims
 } from "./chunk-6WVVF6AD.js";
 
-// ../patterns/src/flatten/empty-style-div.pattern.ts
+// ../patterns/src/library/flatten/display-contents-wrapper.pattern.ts
 init_esm_shims();
 function asEl(node) {
   const n = node;
   return n.kind === "element" ? n : null;
 }
+function metaOf(node) {
+  return asEl(node)?.meta ?? null;
+}
+var declaresCustomProperties = (node) => metaOf(node)?.declaresCustomProperties ?? false;
+var hasSpreadAttrs = (node) => metaOf(node)?.hasSpreadAttrs ?? false;
+var isComponentNode = (node) => metaOf(node)?.isComponent ?? false;
+var hasOwnAttrs = (node) => {
+  const el = asEl(node);
+  if (!el) return false;
+  return el.attrs.entries.size > 0 || el.attrs.spreads.length > 0;
+};
+var targetedByStructuralPseudo = (node, ctx) => {
+  const el = asEl(node);
+  if (!el) return false;
+  if (el.meta.targetedByStructuralPseudo) return true;
+  return ctx.selectors.targetedByStructuralPseudo(el.id);
+};
+var displayContentsWrapper = definePattern({
+  name: "display-contents-wrapper",
+  category: "flatten/display-contents-wrapper",
+  safety: 2,
+  doc: {
+    title: "Flatten display:contents wrapper",
+    summary: "A div with display:contents (which generates no box) wrapping a single element child, with no own visual style, no attributes beyond an inert class, and no opacity barriers, is removed; its sole child is hoisted in its place.",
+    before: '<div style="display:contents"><Child/></div>',
+    after: "<Child/>",
+    safetyRationale: "A display:contents element generates no box at all, so its children already render as direct children of its parent; removing it is layout-identical. It paints nothing, establishes no formatting/stacking/box context, is no containing block, carries no ref/handlers/dynamic-children/html/spread/component identity, owns no targetable attrs / custom-property coupling, and is not a combinator/structural-pseudo subject; inheritable styles are folded onto the child before removal."
+  },
+  match: {
+    tag: "div",
+    style: { display: "contents" },
+    onlyChild: "element",
+    paintsNothing: true,
+    where: [
+      not(declaresCustomProperties),
+      not(hasOwnAttrs),
+      not(hasDynamicClasses),
+      not(hasSpreadAttrs),
+      not(isComponentNode),
+      not(targetedByStructuralPseudo)
+    ]
+  },
+  rewrite: { flattenInto: "child" },
+  test: {
+    cases: [
+      {
+        // `display:contents` generates no box, so removing it is provably layout-identical → the
+        // wrapper is flattened even under the conservative gate; the child is hoisted.
+        before: '<div className="contents"><a className="text-blue-500">Link</a></div>',
+        after: '<a className="text-blue-500">Link</a>'
+      }
+    ],
+    noMatch: [
+      // A ref pins the wrapper's element identity (a hard opacity barrier) → not a passthrough.
+      '<div className="contents" ref={rootRef}><a className="text-blue-500">Link</a></div>'
+    ]
+  }
+});
+
+// ../patterns/src/library/flatten/empty-style-div.pattern.ts
+init_esm_shims();
+function asEl2(node) {
+  const n = node;
+  return n.kind === "element" ? n : null;
+}
 function metaFlag(flag) {
-  return (node) => Boolean(asEl(node)?.meta[flag]);
+  return (node) => Boolean(asEl2(node)?.meta[flag]);
 }
 var establishesBox = metaFlag("establishesBox");
 var establishesFormattingContext = metaFlag("establishesFormattingContext");
 var establishesStackingContext = metaFlag("establishesStackingContext");
 var isContainingBlock = metaFlag("isContainingBlock");
-var declaresCustomProperties = metaFlag("declaresCustomProperties");
-var targetedByStructuralPseudo = (node, ctx) => {
-  const el = asEl(node);
+var declaresCustomProperties2 = metaFlag("declaresCustomProperties");
+var targetedByStructuralPseudo2 = (node, ctx) => {
+  const el = asEl2(node);
   if (!el) return false;
   if (el.meta.targetedByStructuralPseudo) return true;
   return ctx.selectors.targetedByStructuralPseudo(el.id);
 };
 var DISPLAY = "display";
 var hasNonBlockDisplay = (node, ctx) => {
-  const el = asEl(node);
+  const el = asEl2(node);
   if (!el) return false;
   const sm = ctx.computedOf(el) ?? el.computed;
   for (const block of sm.blocks.values()) {
@@ -58,7 +120,7 @@ var hasNonBlockDisplay = (node, ctx) => {
   }
   return false;
 };
-var emptyStyleDiv = pattern({
+var emptyStyleDiv = definePattern({
   name: "empty-style-div",
   category: "flatten/empty-style-div",
   safety: 1,
@@ -79,26 +141,29 @@ var emptyStyleDiv = pattern({
       not(establishesFormattingContext),
       not(establishesStackingContext),
       not(isContainingBlock),
-      not(declaresCustomProperties),
-      not(targetedByStructuralPseudo)
+      not(declaresCustomProperties2),
+      not(targetedByStructuralPseudo2)
     ]
   },
   rewrite: { flattenInto: "child" },
-  examples: [
-    {
-      before: '<div><span className="bg-red-200">Hi</span></div>',
-      after: '<span className="bg-red-200">Hi</span>'
-    },
-    {
+  test: {
+    cases: [
+      {
+        // A layout-neutral, style-free block div is a provably-safe flatten → removed, child hoisted.
+        before: '<div><span className="bg-red-200">Hi</span></div>',
+        after: '<span className="bg-red-200">Hi</span>'
+      }
+    ],
+    noMatch: [
       // The wrapper paints its own background (own visual style) → not layout-neutral, kept.
-      noMatch: '<div className="bg-blue-500"><span className="bg-red-200">Hi</span></div>'
-    }
-  ]
+      '<div className="bg-blue-500"><span className="bg-red-200">Hi</span></div>'
+    ]
+  }
 });
 
-// ../patterns/src/flatten/flex-center-wrapper.pattern.ts
+// ../patterns/src/library/flatten/flex-center-wrapper.pattern.ts
 init_esm_shims();
-var flexCenterWrapper = pattern({
+var flexCenterWrapper = definePattern({
   name: "flex-center-wrapper",
   category: "flatten/flex-center-wrapper",
   safety: 2,
@@ -119,21 +184,65 @@ var flexCenterWrapper = pattern({
     flattenInto: "child",
     childGains: { placeSelf: "center" }
   },
-  examples: [
-    {
-      // The wrapper is removed; the surviving child gains `place-self-center` (reverse-emitted
-      // from the folded computed style by the resolver).
-      before: '<div className="flex justify-center items-center"><div className="bg-red-200">Hello</div></div>',
-      after: '<div className="bg-red-200 place-self-center">Hello</div>'
-    },
-    {
-      // onClick is a hard opacity barrier → the wrapper is load-bearing, no flatten.
-      noMatch: '<div className="flex justify-center items-center" onClick={handleClick}><div className="bg-red-200">Hello</div></div>'
-    }
-  ]
+  // Collapsing a flex-centering wrapper to `place-self:center` on the child only stays centered when
+  // the child's NEW parent is flex/grid; moreover the wrapper's own `display:flex` establishes a
+  // formatting context. Both make this a `needs-verification` flatten, which the conservative
+  // production gate (`'provably-safe'`, used by the harness) intentionally REVERTS — so every case
+  // here is a no-match: the wrapper is preserved. Op-level rewrite correctness (purity, id-preserving
+  // unwrap, opacity-barrier safety) is still asserted by the invariant suite over every pattern.
+  test: {
+    noMatch: [
+      // Even under a static flex/grid parent the centering flatten is not provably layout-neutral
+      // (the wrapper itself establishes a flex formatting context) → left unchanged.
+      '<div className="grid"><div className="flex items-center justify-center"><span className="bg-red-200">x</span></div></div>',
+      // Non-flex/grid parent (document root): place-self centering would not hold → left unchanged.
+      '<div className="flex justify-center items-center"><div className="bg-red-200">Hello</div></div>',
+      // onClick is a hard opacity barrier → the wrapper is load-bearing regardless of the gate.
+      '<div className="flex justify-center items-center" onClick={handleClick}><div className="bg-red-200">Hello</div></div>'
+    ]
+  }
+});
+
+// ../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/flatten/nested-flex-merge.pattern.ts
+// ../patterns/src/library/flatten/nested-flex-merge.pattern.ts
 init_esm_shims();
 function baseConditionStyleMap(decls) {
   const map = /* @__PURE__ */ new Map();
@@ -200,7 +309,7 @@ var isInnerFlex = and(
   computed(DISPLAY_FLEX),
   not(targetedByCombinator)
 );
-var nestedFlexMerge = pattern({
+var nestedFlexMerge = definePattern({
   name: "nested-flex-merge",
   category: "flatten/nested-flex-merge",
   safety: 2,
@@ -236,24 +345,148 @@ var nestedFlexMerge = pattern({
       rw.unwrap(outer)
     ];
   },
-  examples: [
-    {
-      // The wrapper's flex declarations (align-items / gap) merge onto the inner flex container,
-      // then the wrapper is removed (its own `data-x` here just blocks the more aggressive
-      // passthrough-wrapper so this merge is the one that fires).
-      before: '<div className="flex items-center gap-2" data-x="1"><div className="flex flex-col">X</div></div>',
-      after: '<div className="flex flex-col gap-2 items-center">X</div>'
-    },
-    {
-      // A non-flex wrapper does not match the flex-container signature → left unchanged.
-      noMatch: '<div className="block bg-blue-500"><div className="flex flex-col">X</div></div>'
+  // 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>'
+    ]
+  }
 });
 
-// ../patterns/src/flatten/passthrough-wrapper.pattern.ts
+// ../patterns/src/library/flatten/passthrough-wrapper.pattern.ts
 init_esm_shims();
-function metaOf(node) {
+function metaOf2(node) {
   const n = node;
   return n.kind === "element" ? n.meta : null;
 }
@@ -262,24 +495,24 @@ function elementOf(node) {
   return n.kind === "element" ? n : null;
 }
 var establishesContext = (node) => {
-  const m = metaOf(node);
+  const m = metaOf2(node);
   if (!m) return false;
   return m.establishesBox || m.establishesFormattingContext || m.establishesStackingContext || m.isContainingBlock || m.declaresCustomProperties;
 };
-var hasSpreadAttrs = (node) => metaOf(node)?.hasSpreadAttrs ?? false;
-var isComponentNode = (node) => metaOf(node)?.isComponent ?? false;
-var hasOwnAttrs = (node) => {
+var hasSpreadAttrs2 = (node) => metaOf2(node)?.hasSpreadAttrs ?? false;
+var isComponentNode2 = (node) => metaOf2(node)?.isComponent ?? false;
+var hasOwnAttrs2 = (node) => {
   const el = elementOf(node);
   if (!el) return false;
   return el.attrs.entries.size > 0 || el.attrs.spreads.length > 0;
 };
-var targetedByStructuralPseudo2 = (node, ctx) => {
+var targetedByStructuralPseudo3 = (node, ctx) => {
   const el = elementOf(node);
   if (!el) return false;
   if (el.meta.targetedByStructuralPseudo) return true;
   return ctx.selectors.targetedByStructuralPseudo(el.id);
 };
-var passthroughWrapper = pattern({
+var passthroughWrapper = definePattern({
   name: "passthrough-wrapper",
   category: "flatten/passthrough-wrapper",
   safety: 2,
@@ -296,27 +529,34 @@ var passthroughWrapper = pattern({
     paintsNothing: true,
     where: [
       not(establishesContext),
-      not(hasOwnAttrs),
+      not(hasOwnAttrs2),
       not(hasDynamicClasses),
-      not(hasSpreadAttrs),
-      not(isComponentNode),
-      not(targetedByStructuralPseudo2)
+      not(hasSpreadAttrs2),
+      not(isComponentNode2),
+      not(targetedByStructuralPseudo3)
     ]
   },
   rewrite: { flattenInto: "child" },
-  examples: [
-    {
-      before: '<div className="flex"><a className="bg-red-200">Link</a></div>',
-      after: '<a className="bg-red-200">Link</a>'
-    },
-    {
+  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.
-      noMatch: '<div ref={rootRef}><a className="bg-red-200">Link</a></div>'
-    }
-  ]
+      '<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/flatten/redundant-fragment.pattern.ts
+// ../patterns/src/library/flatten/redundant-fragment.pattern.ts
 init_esm_shims();
 function parentIsRedundantFragment(node, ctx) {
   const el = node;
@@ -339,7 +579,7 @@ function parentIsRedundantFragment(node, ctx) {
   if (ctx.selectors.reparentImpact(fid).size > 0) return false;
   return true;
 }
-var redundantFragment = pattern({
+var redundantFragment = definePattern({
   name: "redundant-fragment",
   category: "flatten/redundant-fragment",
   safety: 1,
@@ -358,116 +598,434 @@ var redundantFragment = pattern({
     if (!fragment || fragment.kind !== "fragment") return null;
     return [rw.unwrap(fragment)];
   },
-  examples: [
-    {
-      before: '<><span className="bg-red-200">Hi</span></>',
-      after: '<span className="bg-red-200">Hi</span>'
-    },
-    {
+  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.
-      noMatch: '<><span className="bg-red-200">A</span><span className="bg-green-200">B</span></>'
-    }
-  ]
+      '<><span className="bg-red-200">A</span><span className="bg-green-200">B</span></>'
+    ]
+  }
 });
 
-// ../patterns/src/compress/dedupe-classes.pattern.ts
+// ../patterns/src/library/flatten/redundant-inline-wrapper.pattern.ts
 init_esm_shims();
-function elementOf2(node) {
+function asEl3(node) {
   const n = node;
   return n.kind === "element" ? n : null;
 }
-var hasDangerousHtml = (node) => elementOf2(node)?.meta.hasDangerousHtml ?? false;
-var isOpaque = (node, ctx) => ctx.isOpaque(node);
-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 };
+function metaOf3(node) {
+  return asEl3(node)?.meta ?? null;
 }
-var dedupeClasses = pattern({
-  name: "dedupe-classes",
-  category: "compress/dedupe-classes",
-  safety: 1,
+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: "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. Dynamic/opaque class lists, ref/handler/dynamic-children/raw-html barriers, combinator subjects, and selector-bound (non-droppable) tokens are excluded."
+    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(hasRef),
-      not(hasEventHandlers),
-      not(hasDynamicChildren),
-      not(hasDangerousHtml),
+      not(hasNonInlineDisplay),
+      not(establishesContext2),
+      not(hasOwnAttrs3),
       not(hasDynamicClasses),
-      not(isOpaque),
-      not(targetedByCombinator)
+      not(hasSpreadAttrs3),
+      not(isComponentNode3),
+      not(targetedByStructuralPseudo4)
     ]
   },
-  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);
+  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>'
       }
-      return drop;
-    }
-  },
-  examples: [
-    {
-      // `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>'
-    }
-  ]
+    ],
+    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/compress/inset-shorthand.pattern.ts
+// ../patterns/src/library/compress/border-radius-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";
-var hasRawHtml = (node) => {
-  const n = node;
-  return n.kind === "element" ? n.meta.hasDangerousHtml : false;
-};
-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) };
+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 withBaseDecls(src, baseDecls) {
+function withFoldedRadius(sm, fold) {
   const blocks = /* @__PURE__ */ new Map();
-  for (const [key, block] of src.blocks) {
-    const decls = key === BASE_CONDITION_KEY ? baseDecls : new Map(block.decls);
+  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 = pattern({
+var insetShorthand = definePattern({
   name: "inset-shorthand",
   category: "compress/inset-shorthand",
   safety: 2,
@@ -476,17 +1034,7 @@ var insetShorthand = pattern({
     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 shorthand compaction; the element is not a combinator subject and carries no ref/handlers/dynamic children/raw HTML, so neither selector matching nor behaviour changes."
-  },
-  match: {
-    where: [
-      not(hasRef),
-      not(hasEventHandlers),
-      not(hasDynamicChildren),
-      not(hasRawHtml),
-      not(hasDynamicClasses),
-      not(targetedByCombinator)
-    ]
+    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) {
@@ -522,22 +1070,22 @@ var insetShorthand = pattern({
       return withBaseDecls(computed2, next);
     }
   },
-  examples: [
-    {
-      // 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>'
-    }
-  ]
+  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/compress/margin-shorthand.pattern.ts
+// ../patterns/src/library/compress/margin-shorthand.pattern.ts
 init_esm_shims();
 var MARGIN_SIDES = [
   "margin-top",
@@ -546,12 +1094,7 @@ var MARGIN_SIDES = [
   "margin-left"
 ];
 var MARGIN_SIDE_SET = new Set(MARGIN_SIDES);
-var BASE_KEY = conditionKey(BASE_CONDITION);
-function asElement(node) {
-  const n = node;
-  return n.kind === "element" ? n : null;
-}
-var hasDangerousHtml2 = (node) => asElement(node)?.meta.hasDangerousHtml ?? false;
+var BASE_KEY4 = conditionKey(BASE_CONDITION);
 function collapseMarginValue(top, right, bottom, left) {
   if (right === left) {
     if (top === bottom) {
@@ -564,7 +1107,7 @@ function collapseMarginValue(top, right, bottom, left) {
 function withFoldedMargin(sm, marginDecl) {
   const blocks = /* @__PURE__ */ new Map();
   for (const [key, block] of sm.blocks) {
-    if (key !== BASE_KEY) {
+    if (key !== BASE_KEY4) {
       blocks.set(key, block);
       continue;
     }
@@ -577,7 +1120,7 @@ function withFoldedMargin(sm, marginDecl) {
   }
   return { blocks };
 }
-var marginShorthand = pattern({
+var marginShorthand = definePattern({
   name: "margin-shorthand",
   category: "compress/margin-shorthand",
   safety: 2,
@@ -586,21 +1129,11 @@ var marginShorthand = pattern({
     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: "Pure representation change (no pixels move); skips nodes with ref/handlers/dynamic children/raw html, dynamic class segments, or combinator-subject selectors."
-  },
-  match: {
-    where: [
-      not(hasRef),
-      not(hasEventHandlers),
-      not(hasDynamicChildren),
-      not(hasDynamicClasses),
-      not(hasDangerousHtml2),
-      not(targetedByCombinator)
-    ]
+    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_KEY);
+      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;
@@ -623,22 +1156,169 @@ var marginShorthand = pattern({
       return withFoldedMargin(computed2, marginDecl);
     }
   },
-  examples: [
-    {
-      // 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>'
+  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/compress/padding-shorthand.pattern.ts
+// ../patterns/src/library/compress/padding-shorthand.pattern.ts
 init_esm_shims();
 var PADDING_SIDES = [
   "padding-top",
@@ -647,9 +1327,9 @@ var PADDING_SIDES = [
   "padding-left"
 ];
 var PADDING_SIDE_SET = new Set(PADDING_SIDES);
-var BASE_KEY2 = conditionKey(BASE_CONDITION);
+var BASE_KEY7 = conditionKey(BASE_CONDITION);
 function analyzePadding(sm) {
-  const block = sm.blocks.get(BASE_KEY2);
+  const block = sm.blocks.get(BASE_KEY7);
   if (!block) return null;
   const sides = [];
   for (const side of PADDING_SIDES) {
@@ -670,16 +1350,10 @@ function analyzePadding(sm) {
   const relative = sides.some((d) => d.relativeToParent);
   return { value, important: top.important, relative };
 }
-var isInert = (node) => {
-  const n = node;
-  if (n.kind !== "element") return false;
-  const el = n;
-  return !el.meta.hasDangerousHtml && !el.meta.hasSpreadAttrs && !el.isComponent;
-};
 function withFoldedPadding(sm, fold) {
   const blocks = /* @__PURE__ */ new Map();
   for (const [key, block] of sm.blocks) {
-    if (key !== BASE_KEY2) {
+    if (key !== BASE_KEY7) {
       blocks.set(key, block);
       continue;
     }
@@ -701,7 +1375,7 @@ function withFoldedPadding(sm, fold) {
   }
   return { blocks };
 }
-var paddingShorthand = pattern({
+var paddingShorthand = definePattern({
   name: "padding-shorthand",
   category: "compress/padding-shorthand",
   safety: 1,
@@ -710,17 +1384,7 @@ var paddingShorthand = pattern({
     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 styles on the same node; it skips nodes with ref/handlers/dynamic children/dynamic classes/dangerous html and combinator subjects, so no JS identity, behaviour, or project selector is disturbed."
-  },
-  match: {
-    where: [
-      not(hasRef),
-      not(hasEventHandlers),
-      not(hasDynamicChildren),
-      not(hasDynamicClasses),
-      not(targetedByCombinator),
-      isInert
-    ]
+    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) {
@@ -728,35 +1392,304 @@ var paddingShorthand = pattern({
       return fold ? withFoldedPadding(computed2, fold) : null;
     }
   },
-  examples: [
-    {
-      // 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>'
-    },
-    {
-      // Asymmetric padding (top != bottom) cannot fold into a shorthand.
-      noMatch: '<div className="pt-2 pr-4 pb-8 pl-4 bg-red-200">box</div>'
+  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,
+  doc: {
+    title: "Collapse equal scroll-padding sides into scroll-padding",
+    summary: "An element whose four scroll-padding sides are all equal is rewritten to the single Tailwind scroll-p-* utility (scroll-padding === the four equal sides).",
+    before: '<div class="scroll-pt-4 scroll-pr-4 scroll-pb-4 scroll-pl-4"/>',
+    after: '<div class="scroll-p-4"/>',
+    safetyRationale: "`scroll-padding` is value-identical to four equal scroll-padding sides \u2014 a class-only change. It is safe even on an element with a ref, event handler, dynamic child, or dangerouslySetInnerHTML \u2014 a className rewrite touches none of them; only a dynamic/opaque class list or a combinator-subject class is excluded, so no behaviour or project selector is disturbed."
+  },
+  rewrite: {
+    rewriteClasses(computed2) {
+      const fold = analyzeScrollPadding(computed2);
+      return fold ? withFoldedScrollPadding(computed2, fold) : null;
     }
-  ]
+  },
+  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>'
+      }
+    ],
+    // 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>']
+  }
 });
 
-// ../patterns/src/compress/size-shorthand.pattern.ts
+// ../patterns/src/library/compress/size-shorthand.pattern.ts
 init_esm_shims();
 var WIDTH = "width";
 var HEIGHT = "height";
 var SIZE = "size";
-var NON_COLLAPSIBLE_VALUES = /* @__PURE__ */ new Set(["auto", "initial", "unset"]);
-function asElement2(node) {
-  const n = node;
-  return n.kind === "element" ? n : null;
-}
+var NON_COLLAPSIBLE_VALUES5 = /* @__PURE__ */ new Set(["auto", "initial", "unset"]);
 function baseBlock(sm) {
   return sm.blocks.get(conditionKey(BASE_CONDITION));
 }
-var hasDangerousHtml3 = (node) => asElement2(node)?.meta.hasDangerousHtml ?? false;
 function withSizeShorthand(sm, value, important) {
   const baseKey = conditionKey(BASE_CONDITION);
   const blocks = /* @__PURE__ */ new Map();
@@ -775,7 +1708,7 @@ function withSizeShorthand(sm, value, important) {
   }
   return { blocks };
 }
-var sizeShorthand = pattern({
+var sizeShorthand = definePattern({
   name: "size-shorthand",
   category: "compress/size-shorthand",
   safety: 2,
@@ -784,17 +1717,7 @@ var sizeShorthand = pattern({
     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; the element carries no ref/handlers/dynamic children/dangerous HTML, no dynamic class segment, and is not a combinator subject."
-  },
-  match: {
-    where: [
-      not(hasRef),
-      not(hasEventHandlers),
-      not(hasDynamicChildren),
-      not(hasDangerousHtml3),
-      not(hasDynamicClasses),
-      not(targetedByCombinator)
-    ]
+    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."
   },
   rewrite: {
     rewriteClasses(computed2) {
@@ -803,1425 +1726,1674 @@ var sizeShorthand = pattern({
       const h = base?.decls.get(HEIGHT);
       if (!w || !h) return null;
       if (w.important !== h.important) return null;
-      if (NON_COLLAPSIBLE_VALUES.has(String(w.value))) 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);
     }
   },
-  examples: [
-    {
-      // 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>'
-    },
-    {
-      // Width and height differ → no equal-axis collapse.
-      noMatch: '<div className="h-10 w-20 bg-red-200">box</div>'
-    }
-  ]
+  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>'
+      }
+    ],
+    // Width and height differ → no equal-axis collapse.
+    noMatch: ['<div className="h-10 w-20 bg-red-200">box</div>']
+  }
 });
 
 // ../patterns/src/_registry.generated.ts
 init_esm_shims();
 var builtinPatterns = [
+  displayContentsWrapper,
   emptyStyleDiv,
   flexCenterWrapper,
+  inlineFlexCenterWrapper,
   nestedFlexMerge,
+  nestedGridMerge,
   passthroughWrapper,
   redundantFragment,
+  redundantInlineWrapper,
+  borderRadiusShorthand,
+  borderShorthand,
   dedupeClasses,
+  gapShorthand,
   insetShorthand,
   marginShorthand,
+  overflowShorthand,
+  overscrollBehaviorShorthand,
   paddingShorthand,
+  placeShorthand,
+  scrollMarginShorthand,
+  scrollPaddingShorthand,
   sizeShorthand
 ];
 
 // ../patterns/src/index.ts
 init_esm_shims();
 
-// ../frontend-jsx/src/frontend.ts
+// ../resolver-tailwind/src/tailwind/resolver.ts
 init_esm_shims();
-import { parse as babelParse } from "@babel/parser";
-import babelTraverse from "@babel/traverse";
-var traverse = typeof babelTraverse === "function" ? babelTraverse : babelTraverse.default;
-var JSX_LANGS = ["jsx", "tsx"];
-var FILE_ID = 1;
-function jsxName(node) {
-  switch (node.type) {
-    case "JSXIdentifier":
-      return node.name;
-    case "JSXMemberExpression":
-      return `${jsxName(node.object)}.${node.property.name}`;
-    case "JSXNamespacedName":
-      return `${node.namespace.name}:${node.name.name}`;
+
+// ../resolver-tailwind/src/tailwind/emit.ts
+init_esm_shims();
+
+// ../resolver-tailwind/src/tailwind/fingerprint.ts
+init_esm_shims();
+function fnv1a(input) {
+  let h = 2166136261;
+  for (let i = 0; i < input.length; i += 1) {
+    h ^= input.charCodeAt(i);
+    h = Math.imul(h, 16777619);
   }
+  return (h >>> 0).toString(16).padStart(8, "0");
 }
-function isComponentName(node) {
-  if (node.type === "JSXMemberExpression") return true;
-  if (node.type === "JSXNamespacedName") return false;
-  return /^[A-Z]/.test(node.name);
-}
-function attrName(name) {
-  return name.type === "JSXNamespacedName" ? `${name.namespace.name}:${name.name.name}` : name.name;
-}
-function exprKind(node) {
-  switch (node.type) {
-    case "CallExpression":
-    case "OptionalCallExpression":
-      return "call";
-    case "MemberExpression":
-    case "OptionalMemberExpression":
-      return "member";
-    case "ConditionalExpression":
-    case "LogicalExpression":
-      return "conditional";
-    case "TemplateLiteral":
-    case "TaggedTemplateExpression":
-      return "template";
-    case "Identifier":
-      return "identifier";
-    case "SpreadElement":
-      return "spread";
-    default:
-      return "other";
+
+// ../resolver-tailwind/src/tailwind/emit.ts
+function expandForEmit(norm, prop, value, important) {
+  const pairsFor = (p, v) => norm.normalizeDeclaration(p, v, important).map((d) => [d.property, String(d.value)]);
+  if (prop === "size") {
+    return [...pairsFor("width", value), ...pairsFor("height", value)];
+  }
+  if (prop === "inset-block" || prop === "inset-inline") {
+    const parts = value.split(/\s+/).filter((s) => s.length > 0);
+    const a = parts[0] ?? value;
+    const b = parts[1] ?? a;
+    const sides = prop === "inset-block" ? ["top", "bottom"] : ["left", "right"];
+    return [...pairsFor(sides[0], a), ...pairsFor(sides[1], b)];
   }
+  return pairsFor(prop, value);
 }
-function classFormOf(node) {
-  switch (node.type) {
-    case "TemplateLiteral":
-    case "TaggedTemplateExpression":
-      return "template-literal";
-    case "CallExpression":
-    case "OptionalCallExpression":
-      return "call";
-    case "ConditionalExpression":
-    case "LogicalExpression":
-      return "conditional";
-    case "MemberExpression":
-    case "OptionalMemberExpression":
-    case "Identifier":
-      return "member";
-    default:
-      return "call";
+function synthesizeResidual(remaining, ctx) {
+  if (remaining.size === 0) return void 0;
+  const norm = ctx.normalizer ?? normalizer;
+  const decls = /* @__PURE__ */ new Map();
+  for (const [prop, value] of remaining) {
+    for (const decl of norm.normalizeDeclaration(String(prop), value, false)) {
+      decls.set(decl.property, decl);
+    }
+  }
+  const block = { condition: BASE_CONDITION, decls };
+  const styleMap = { blocks: /* @__PURE__ */ new Map([[conditionKey(BASE_CONDITION), block]]) };
+  const css = [...remaining].map(([p, v]) => `${p}:${v}`).join(";");
+  const className = `df-${fnv1a(css)}`;
+  const synthetic = { className, decls: styleMap, css: `.${className}{${css}}` };
+  try {
+    ctx.sink.register(synthetic);
+  } catch {
   }
+  return synthetic;
 }
-function looksLikeJsx(id, code) {
-  if (/\.[jt]sx$/i.test(id)) return true;
-  return /<\/?[A-Za-z][\w.-]*|<>/.test(code);
+
+// ../resolver-tailwind/src/tailwind/engine.ts
+init_esm_shims();
+import { createRequire } from "module";
+import * as path from "path";
+function moduleBase() {
+  return typeof __filename === "string" ? __filename : import.meta.url;
 }
-function doParse(code, ctx) {
-  const diagnostics = [];
-  const doc = createDocument("jsx");
-  const backref = doc.backref;
-  const ast = babelParse(code, {
-    sourceType: "module",
-    plugins: ["jsx", "typescript"]
-  });
-  const eol = code.includes("\r\n") ? "\r\n" : "\n";
-  const sourceFile = {
-    id: FILE_ID,
-    path: ctx.id,
-    text: code,
-    frontend: "jsx",
-    eol,
-    indentUnit: "  ",
-    native: ast
-  };
-  doc.sources.set(FILE_ID, sourceFile);
-  const spanOf = (node) => {
-    if (node.start == null || node.end == null) return null;
-    const span = {
-      file: FILE_ID,
-      start: node.start,
-      end: node.end,
-      startLoc: node.loc ? { line: node.loc.start.line, column: node.loc.start.column } : void 0,
-      endLoc: node.loc ? { line: node.loc.end.line, column: node.loc.end.column } : void 0
-    };
-    return span;
-  };
-  const sliceOf = (node) => node.start == null || node.end == null ? "" : code.slice(node.start, node.end);
-  const internExpr = (node, spread) => {
-    const payload = { text: sliceOf(node), spread };
-    return doc.exprs.intern({
-      span: spanOf(node) ?? { file: FILE_ID, start: 0, end: 0 },
-      kind: exprKind(node),
-      payload
-    });
-  };
-  const splitTokens = (raw) => raw.split(/\s+/).filter((t) => t.length > 0).map((value) => ({ value }));
-  const buildClassList = (attr) => {
-    const attrSpan = spanOf(attr) ?? void 0;
-    const v = attr.value;
-    const staticList = (tokens, valueSpan) => {
-      const seg = { kind: "static", span: valueSpan ?? void 0, tokens };
-      return {
-        form: "string-literal",
-        segments: [seg],
-        valueSpan,
-        attrSpan,
-        hasDynamic: false,
-        opaque: false,
-        rewritable: true
-      };
-    };
-    if (v == null) return staticList([], null);
-    if (v.type === "StringLiteral") {
-      return staticList(splitTokens(v.value), spanOf(v));
-    }
-    if (v.type === "JSXExpressionContainer") {
-      const expr = v.expression;
-      if (expr.type === "StringLiteral") {
-        return staticList(splitTokens(expr.value), spanOf(expr));
-      }
-      if (expr.type === "JSXEmptyExpression") return staticList([], null);
-      const ref = internExpr(expr, false);
-      const valueSpan = spanOf(expr);
-      const seg = { kind: "dynamic", span: valueSpan ?? void 0, expr: ref };
-      return {
-        form: classFormOf(expr),
-        segments: [seg],
-        valueSpan,
-        attrSpan,
-        hasDynamic: true,
-        opaque: true,
-        rewritable: false
-      };
-    }
-    return emptyClassList();
-  };
-  const staticTokensOf2 = (classes) => {
-    const out = [];
-    for (const seg of classes.segments) {
-      if (seg.kind === "static") for (const t of seg.tokens) out.push(t.value);
+function projectRequire(projectRoot) {
+  const bases = [];
+  if (projectRoot) bases.push(path.join(projectRoot, "__domflax__.js"));
+  bases.push(path.join(process.cwd(), "__domflax__.js"));
+  bases.push(moduleBase());
+  for (const base of bases) {
+    try {
+      const candidate = createRequire(base);
+      candidate.resolve("tailwindcss/package.json");
+      return candidate;
+    } catch {
     }
-    return out;
-  };
-  const buildAttrValue = (attr) => {
-    const v = attr.value;
-    if (v == null) return { kind: "static", value: true, span: spanOf(attr) ?? void 0 };
-    if (v.type === "StringLiteral") {
-      return { kind: "static", value: v.value, span: spanOf(v) ?? void 0 };
+  }
+  return null;
+}
+function loadEngine(options) {
+  const req = projectRequire(options.projectRoot);
+  if (!req) return null;
+  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");
+      userConfig = loadConfig(options.configPath);
     }
-    if (v.type === "JSXExpressionContainer") {
-      if (v.expression.type === "JSXEmptyExpression") {
-        return { kind: "static", value: true, span: spanOf(v) ?? void 0 };
+    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);
       }
-      return { kind: "dynamic", expr: internExpr(v.expression, false), span: spanOf(v) ?? void 0 };
+    };
+  } catch {
+    return null;
+  }
+}
+
+// ../resolver-tailwind/src/tailwind/extract.ts
+init_esm_shims();
+
+// ../resolver-tailwind/src/tailwind/selector.ts
+init_esm_shims();
+var LEGACY_PSEUDO_ELEMENTS = /* @__PURE__ */ new Set([
+  ":before",
+  ":after",
+  ":first-line",
+  ":first-letter"
+]);
+function parseSelector(selector) {
+  const sel = selector.trim();
+  if (sel.length === 0 || sel[0] !== ".") return { kind: "complex" };
+  let i = 1;
+  for (; i < sel.length; i += 1) {
+    const c = sel[i];
+    if (c === "\\") {
+      i += 1;
+      continue;
     }
-    return { kind: "dynamic", expr: internExpr(v, false), span: spanOf(v) ?? void 0 };
-  };
-  const buildChild = (node, parentId) => {
-    switch (node.type) {
-      case "JSXText": {
-        const id = doc.alloc.next();
-        doc.nodes.set(
-          id,
-          createText(id, node.value, {
-            parent: parentId,
-            span: spanOf(node),
-            collapsible: /^\s*$/.test(node.value)
-          })
-        );
-        return id;
-      }
-      case "JSXExpressionContainer": {
-        if (node.expression.type === "JSXEmptyExpression") return null;
-        const id = doc.alloc.next();
-        const ref = internExpr(node.expression, false);
-        doc.nodes.set(id, createExpr(id, ref, { parent: parentId, span: spanOf(node) }));
-        return id;
-      }
-      case "JSXSpreadChild": {
-        const id = doc.alloc.next();
-        const ref = internExpr(node.expression, true);
-        doc.nodes.set(id, createExpr(id, ref, { parent: parentId, span: spanOf(node) }));
-        return id;
-      }
-      case "JSXElement":
-        return buildElement(node, parentId);
-      case "JSXFragment":
-        return buildFragment(node, parentId);
-      default:
-        return null;
+    if (c === ":" || c === "." || c === "[" || c === " " || c === ">" || c === "+" || c === "~" || c === ",") {
+      break;
     }
-  };
-  const buildFragment = (node, parentId) => {
-    const id = doc.alloc.next();
-    const children = [];
-    for (const c of node.children) {
-      const cid = buildChild(c, id);
-      if (cid != null) children.push(cid);
+  }
+  const remainder = sel.slice(i);
+  if (remainder.length === 0) {
+    return { kind: "simple", states: [], pseudoElement: "" };
+  }
+  if (!/^(?:::?[-a-z]+(?:\([^()]*\))?)+$/i.test(remainder)) {
+    return { kind: "complex" };
+  }
+  const parts = remainder.match(/::?[-a-z]+(?:\([^()]*\))?/gi) ?? [];
+  const states = [];
+  let pseudoElement = "";
+  for (const part of parts) {
+    if (part.startsWith("::") || LEGACY_PSEUDO_ELEMENTS.has(part)) {
+      pseudoElement = part.startsWith("::") ? part : `:${part}`;
+    } else {
+      states.push(part);
     }
-    doc.nodes.set(id, createFragment(id, { children, parent: parentId, span: spanOf(node) }));
-    backref.set(id, {
-      nodeId: id,
-      span: spanOf(node) ?? { file: FILE_ID, start: 0, end: 0 },
-      openTagSpan: spanOf(node.openingFragment),
-      closeTagSpan: spanOf(node.closingFragment),
-      innerSpan: null,
-      selfClosing: false
-    });
-    return id;
+  }
+  return { kind: "simple", states, pseudoElement };
+}
+function makeCondition(media, states, pseudoElement) {
+  return {
+    media,
+    states: [...new Set(states)].sort(),
+    pseudoElement
   };
-  const buildElement = (node, parentId) => {
-    const id = doc.alloc.next();
-    const opening = node.openingElement;
-    const tag = jsxName(opening.name);
-    const component = isComponentName(opening.name);
-    const meta = defaultMeta();
-    meta.isComponent = component;
-    let classes = emptyClassList();
-    const entries = /* @__PURE__ */ new Map();
-    const order = [];
-    const spreads = [];
-    for (const attr of opening.attributes) {
-      if (attr.type === "JSXSpreadAttribute") {
-        spreads.push(internExpr(attr.argument, true));
-        meta.hasSpreadAttrs = true;
-        continue;
-      }
-      const name = attrName(attr.name);
-      if (name === "className" || name === "class") {
-        classes = buildClassList(attr);
-        continue;
-      }
-      if (name === "ref") meta.hasRef = true;
-      else if (name === "key") meta.hasKey = true;
-      else if (name === "dangerouslySetInnerHTML") meta.hasDangerousHtml = true;
-      else if (/^on[A-Z]/.test(name)) meta.hasEventHandlers = true;
-      entries.set(name, buildAttrValue(attr));
-      order.push(name);
-    }
-    const attrs = { entries, spreads, order };
-    const children = [];
-    for (const c of node.children) {
-      const cid = buildChild(c, id);
-      if (cid != null) children.push(cid);
-    }
-    for (const cid of children) {
-      const cn = doc.nodes.get(cid);
-      if (cn && cn.kind === "expr") {
-        meta.hasDynamicChildren = true;
-        break;
-      }
+}
+function unescapeClass(selector) {
+  const sel = selector.trim();
+  if (sel[0] !== ".") return null;
+  let out = "";
+  for (let i = 1; i < sel.length; i += 1) {
+    const c = sel[i];
+    if (c === "\\") {
+      i += 1;
+      if (i < sel.length) out += sel[i];
+      continue;
     }
-    let computed2 = emptyStyleMap();
-    if (!classes.hasDynamic) {
-      const tokens = staticTokensOf2(classes);
-      if (tokens.length > 0) {
-        const res = ctx.resolver.resolve({
-          classes: tokens,
-          element: { tagName: tag, namespace: component ? void 0 : "html" }
-        });
-        computed2 = ctx.normalizer.normalizeStyleMap(res.styles);
-        for (const w of res.warnings) {
-          diagnostics.push({
-            code: "DF_STYLE_CONFLICT_UNRESOLVED",
-            severity: w.severity,
-            message: w.message,
-            nodeId: id
-          });
-        }
-      }
+    if (c === ":" || c === "." || c === "[" || c === " " || c === ">" || c === "+" || c === "~" || c === ",") {
+      return null;
     }
-    const namespace = component ? "component" : "html";
-    const el = createElement(id, {
-      tag,
-      namespace,
-      isComponent: component,
-      selfClosing: opening.selfClosing,
-      classes,
-      computed: computed2,
-      attrs,
-      children,
-      parent: parentId,
-      span: spanOf(node),
-      meta
-    });
-    doc.nodes.set(id, el);
-    const inner = children.length > 0 ? spanOf(node.children[0]) && spanOf(node.children.at(-1)) ? {
-      file: FILE_ID,
-      start: spanOf(node.children[0]).start,
-      end: spanOf(node.children.at(-1)).end
-    } : null : null;
-    backref.set(id, {
-      nodeId: id,
-      span: spanOf(node) ?? { file: FILE_ID, start: 0, end: 0 },
-      openTagSpan: spanOf(opening),
-      closeTagSpan: node.closingElement ? spanOf(node.closingElement) : null,
-      innerSpan: inner,
-      selfClosing: opening.selfClosing
-    });
-    return id;
-  };
-  const roots = [];
-  traverse(ast, {
-    JSXElement(path3) {
-      roots.push(path3.node);
-      path3.skip();
-    },
-    JSXFragment(path3) {
-      roots.push(path3.node);
-      path3.skip();
+    out += c;
+  }
+  return out.length > 0 ? out : null;
+}
+
+// ../resolver-tailwind/src/tailwind/extract.ts
+function collectRules(node, mediaStack, inUnsupportedAtRule, out) {
+  if (node.type === "rule") {
+    out.push({ rule: node, media: mediaStack, unsupported: inUnsupportedAtRule });
+    return;
+  }
+  if (node.type === "atrule") {
+    const at = node;
+    const children = at.nodes ?? [];
+    if (at.name === "media") {
+      const nextStack = at.params ? [...mediaStack, at.params] : mediaStack;
+      for (const child of children) collectRules(child, nextStack, inUnsupportedAtRule, out);
+    } else {
+      for (const child of children) collectRules(child, mediaStack, true, out);
     }
-  });
-  const rootFrag = doc.nodes.get(doc.root);
-  for (const r of roots) {
-    const id = r.type === "JSXFragment" ? buildFragment(r, doc.root) : buildElement(r, doc.root);
-    rootFrag.children.push(id);
   }
-  return { doc, diagnostics };
 }
-var jsxFrontend = {
-  name: "babel-jsx",
-  langs: JSX_LANGS,
-  canParse(id, code) {
-    return looksLikeJsx(id, code);
-  },
-  parse(code, ctx) {
-    return doParse(code, ctx);
+function extractToken(token, nodes) {
+  if (nodes.length === 0) return { blocks: [], produced: false };
+  const leaves = [];
+  for (const node of nodes) collectRules(node, [], false, leaves);
+  const blocks = [];
+  let sawComplex = false;
+  for (const { rule, media, unsupported } of leaves) {
+    const parsed = parseSelector(rule.selector);
+    if (parsed.kind === "complex" || unsupported) {
+      sawComplex = true;
+      continue;
+    }
+    const decls = [];
+    for (const child of rule.nodes ?? []) {
+      if (child.type !== "decl") continue;
+      const d = child;
+      if (typeof d.value !== "string") continue;
+      decls.push([d.prop, d.value, d.important === true]);
+    }
+    if (decls.length === 0) continue;
+    const mediaQuery = media.join(" and ");
+    blocks.push({ condition: makeCondition(mediaQuery, parsed.states, parsed.pseudoElement), decls });
   }
-};
-function createJsxFrontend() {
-  return jsxFrontend;
+  const opaque = sawComplex && blocks.length === 0 ? { token, reason: "combinator-variant", detail: "utility targets descendants/siblings, not its own box" } : void 0;
+  return { blocks, produced: true, opaque };
 }
 
-// ../frontend-jsx/src/backend.ts
+// ../resolver-tailwind/src/tailwind/serialize.ts
 init_esm_shims();
-import MagicString from "magic-string";
-var JSX_LANGS2 = ["jsx", "tsx"];
-function exprText(doc, ref) {
-  const rec = doc.exprs.get(ref);
-  const payload = rec?.payload;
-  if (payload && typeof payload.text === "string") {
-    return { text: payload.text, spread: payload.spread === true };
+function serializeCssNode(node) {
+  if (node.type === "decl") {
+    const d = node;
+    if (typeof d.value !== "string") return "";
+    return `${d.prop}:${d.value}${d.important === true ? " !important" : ""}`;
   }
-  if (rec) {
-    const sf = doc.sources.get(rec.span.file);
-    if (sf) return { text: sf.text.slice(rec.span.start, rec.span.end), spread: false };
+  if (node.type === "rule") {
+    const r = node;
+    const body = (r.nodes ?? []).map((c) => serializeCssNode(c)).filter((s) => s.length > 0).join(";");
+    return `${r.selector}{${body}}`;
   }
-  return { text: "", spread: false };
-}
-function staticTokensOf(classes) {
-  const out = [];
-  for (const seg of classes.segments) {
-    if (seg.kind === "static") for (const t of seg.tokens) out.push(t.value);
+  if (node.type === "atrule") {
+    const a = node;
+    const body = (a.nodes ?? []).map((c) => serializeCssNode(c)).filter((s) => s.length > 0).join("");
+    return `@${a.name} ${a.params}{${body}}`;
   }
-  return out;
+  return "";
 }
-function primarySource(doc) {
-  for (const sf of doc.sources.values()) {
-    if (typeof sf.text === "string" && sf.text.length > 0) return sf;
+
+// ../resolver-tailwind/src/tailwind/stylemap.ts
+init_esm_shims();
+function buildStyleMap(blockMaps) {
+  if (blockMaps.size === 0) return emptyStyleMap();
+  const blocks = /* @__PURE__ */ new Map();
+  for (const { condition, decls } of blockMaps.values()) {
+    if (decls.size === 0) continue;
+    blocks.set(conditionKey(condition), { condition, decls });
   }
-  return null;
+  if (blocks.size === 0) return emptyStyleMap();
+  return normalizer.normalizeStyleMap({ blocks });
 }
-function collectKept(doc) {
+function shadowedBy(prev) {
   const out = [];
   const seen = /* @__PURE__ */ new Set();
-  const visit = (id) => {
-    if (seen.has(id)) return;
-    seen.add(id);
-    const n = doc.nodes.get(id);
-    if (!n) return;
-    out.push(n);
-    if (n.kind === "element" || n.kind === "fragment") for (const c of n.children) visit(c);
+  const add = (o) => {
+    if (!o || o.kind !== "class" || seen.has(o.className)) return;
+    seen.add(o.className);
+    out.push(o);
   };
-  visit(doc.root);
-  return out;
-}
-function strictlyContains(a, b) {
-  if (a.file !== b.file) return false;
-  if (a.start <= b.start && b.end <= a.end) return !(a.start === b.start && a.end === b.end);
-  return false;
+  for (const o of prev.shadowed ?? []) add(o);
+  add(prev.origin);
+  return out.length > 0 ? out : void 0;
 }
-function editClasses(ms, doc, sf, el) {
-  const classes = el.classes;
-  if (classes.hasDynamic || classes.opaque) return false;
-  const tokens = staticTokensOf(classes);
-  const valueSpan = classes.valueSpan;
-  if (valueSpan && valueSpan.file === sf.id) {
-    const current = sf.text.slice(valueSpan.start, valueSpan.end);
-    const quote = current.startsWith("'") ? "'" : '"';
-    const next = `${quote}${tokens.join(" ")}${quote}`;
-    if (current !== next) {
-      ms.overwrite(valueSpan.start, valueSpan.end, next);
-      return true;
+
+// ../resolver-tailwind/src/tailwind/usage.ts
+init_esm_shims();
+var OPAQUE_USAGE = {
+  asSubject: true,
+  asAncestor: true,
+  asCompound: true,
+  asSibling: true,
+  asHasArgument: true,
+  asStructural: true,
+  droppable: false
+};
+var DROPPABLE_USAGE = {
+  asSubject: true,
+  asAncestor: false,
+  asCompound: false,
+  asSibling: false,
+  asHasArgument: false,
+  asStructural: false,
+  droppable: true
+};
+
+// ../resolver-tailwind/src/tailwind/resolver.ts
+var TailwindResolver = class {
+  id = "tailwind";
+  provider;
+  fingerprint;
+  #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}. */
+  #reverseIndex = null;
+  constructor(config = {}) {
+    this.#engine = loadEngine(config);
+    this.provider = config.provider ?? (this.#engine ? `tailwindcss@${this.#engine.version}` : "tailwindcss");
+    const seed = JSON.stringify(config.config ?? {}) + (config.configPath ?? "");
+    this.fingerprint = config.fingerprint ?? `${this.provider}/${fnv1a(seed)}`;
+  }
+  /** Engine-backed, cached single-token extraction. */
+  #extract(token) {
+    const cached = this.#tokenCache.get(token);
+    if (cached) return cached;
+    let result;
+    if (!this.#engine) {
+      result = { blocks: [], produced: false };
+    } else {
+      try {
+        result = extractToken(token, this.#engine.generate([token]));
+      } catch {
+        result = { blocks: [], produced: false };
+      }
+    }
+    this.#tokenCache.set(token, result);
+    return result;
+  }
+  owns(token) {
+    if (token.length === 0) return false;
+    return this.#extract(token).produced;
+  }
+  resolve(input) {
+    const key = JSON.stringify(input.classes);
+    const cached = this.#resolveCache.get(key);
+    if (cached) return cached;
+    const blockMaps = /* @__PURE__ */ new Map();
+    const resolved = [];
+    const unknown = [];
+    const opaque = [];
+    input.classes.forEach((token, tokenIndex) => {
+      const extracted = this.#extract(token);
+      if (!extracted.produced) {
+        unknown.push(token);
+        return;
+      }
+      if (extracted.opaque) opaque.push(extracted.opaque);
+      if (extracted.blocks.length === 0) return;
+      const origin = { kind: "class", tokenIndex, className: token };
+      let contributed = false;
+      for (const block of extracted.blocks) {
+        const ck = conditionKey(block.condition);
+        let bucket = blockMaps.get(ck);
+        if (!bucket) {
+          bucket = { condition: block.condition, decls: /* @__PURE__ */ new Map() };
+          blockMaps.set(ck, bucket);
+        }
+        for (const [prop, value, important] of block.decls) {
+          for (const decl of normalizer.normalizeDeclaration(prop, value, important)) {
+            const prev = bucket.decls.get(decl.property);
+            const shadowed = prev ? shadowedBy(prev) : void 0;
+            bucket.decls.set(decl.property, shadowed ? { ...decl, origin, shadowed } : { ...decl, origin });
+            contributed = true;
+          }
+        }
+      }
+      if (contributed) resolved.push(token);
+    });
+    const result = {
+      styles: buildStyleMap(blockMaps),
+      resolved,
+      unknown,
+      opaque,
+      warnings: []
+    };
+    this.#resolveCache.set(key, result);
+    return result;
+  }
+  /**
+   * Lazily build the reverse index from the engine's own enumerable class list. Each indexable
+   * utility maps to its NORMALIZED BASE longhand declarations (property → canonical value). Utilities
+   * with variant conditions, combinator selectors, or no BASE declarations are skipped. Sorted by
+   * declaration count (desc) so greedier (shorthand-like) utilities are tried first.
+   */
+  #buildReverseIndex() {
+    if (this.#reverseIndex) return this.#reverseIndex;
+    const index = [];
+    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 decls = /* @__PURE__ */ new Map();
+          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)) {
+              decls.set(decl.property, String(decl.value));
+            }
+          }
+          if (decls.size > 0) index.push([className, decls]);
+        }
+      } catch {
+      }
     }
-    return false;
-  }
-  if (tokens.length === 0) return false;
-  if (el.isComponent) return false;
-  const back = doc.backref.get(el.id);
-  const openTag = back?.openTagSpan;
-  if (!openTag || openTag.file !== sf.id) return false;
-  const insertAt = openTag.start + 1 + el.tag.length;
-  ms.appendLeft(insertAt, ` className="${tokens.join(" ")}"`);
-  return true;
-}
-function surgicalPrint(doc) {
-  const sf = primarySource(doc);
-  if (!sf) return null;
-  const ms = new MagicString(sf.text);
-  const kept = collectKept(doc);
-  const keptSpans = [];
-  for (const n of kept) if (n.span && n.span.file === sf.id) keptSpans.push(n.span);
-  const removed = [];
-  for (const id of backrefIds(doc)) {
-    if (doc.nodes.has(id)) continue;
-    const back = doc.backref.get(id);
-    if (!back || back.span.file !== sf.id) continue;
-    const unwrapped = keptSpans.some((k) => strictlyContains(back.span, k));
-    removed.push({ backref: back, unwrapped });
+    index.sort((a, b) => b[1].size - a[1].size || (a[0] < b[0] ? -1 : a[0] > b[0] ? 1 : 0));
+    this.#reverseIndex = index;
+    return index;
   }
-  const fullRemovals = removed.filter((r) => !r.unwrapped).map((r) => r.backref.span);
-  for (const r of removed) {
-    const span = r.backref.span;
-    const coveredByFull = fullRemovals.some((f) => f !== span && strictlyContains(f, span));
-    if (coveredByFull) continue;
-    if (r.unwrapped) {
-      const open = r.backref.openTagSpan;
-      const close = r.backref.closeTagSpan;
-      if (open && open.file === sf.id && open.end > open.start) ms.remove(open.start, open.end);
-      if (close && close.file === sf.id && close.end > close.start) {
-        ms.remove(close.start, close.end);
+  emit(styles, ctx) {
+    const norm = ctx.normalizer ?? normalizer;
+    const normalized = norm.normalizeStyleMap(styles);
+    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;
+    const target = /* @__PURE__ */ new Map();
+    for (const [prop, decl] of base.decls) {
+      for (const [lp, lv] of expandForEmit(norm, String(prop), String(decl.value), decl.important)) {
+        target.set(lp, lv);
       }
-    } else {
-      ms.remove(span.start, span.end);
     }
+    const candidates = [];
+    for (const entry of this.#buildReverseIndex()) {
+      const [, declMap] = entry;
+      if (declMap.size === 0 || declMap.size > target.size) continue;
+      let fits = true;
+      for (const [prop, value] of declMap) {
+        if (target.get(prop) !== value) {
+          fits = false;
+          break;
+        }
+      }
+      if (fits) candidates.push(entry);
+    }
+    const remaining = new Map(target);
+    const classes = [];
+    while (remaining.size > 0) {
+      let best = null;
+      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];
+        if (better) {
+          best = entry;
+          bestCover = cover;
+        }
+      }
+      if (!best) break;
+      classes.push(best[0]);
+      for (const prop of best[1].keys()) remaining.delete(prop);
+    }
+    const exact = remaining.size === 0 && !hasNonBase;
+    if (remaining.size === 0) return { classes, exact, warnings: [] };
+    const residual = synthesizeResidual(remaining, ctx);
+    return residual ? { classes, residual, exact, warnings: [] } : { classes, exact, warnings: [] };
   }
-  for (const n of kept) {
-    if (n.kind === "element") editClasses(ms, doc, sf, n);
-  }
-  return ms.toString();
-}
-function backrefIds(doc) {
-  const out = [];
-  const max = doc.alloc.peek;
-  for (let i = 1; i < max; i += 1) {
-    const id = i;
-    if (doc.backref.get(id)) out.push(id);
-  }
-  return out;
-}
-function classText(doc, classes) {
-  if (classes.form === "absent" || classes.segments.length === 0) return null;
-  const dynamic = classes.segments.find((s) => s.kind === "dynamic");
-  if (dynamic && dynamic.kind === "dynamic") {
-    return `className={${exprText(doc, dynamic.expr).text}}`;
-  }
-  const tokens = staticTokensOf(classes);
-  return `className="${tokens.join(" ")}"`;
-}
-function attrText(doc, name, value) {
-  if (value.kind === "static") {
-    if (value.value === true) return name;
-    if (value.value === false) return "";
-    return `${name}="${String(value.value)}"`;
-  }
-  return `${name}={${exprText(doc, value.expr).text}}`;
-}
-function printElement(doc, el) {
-  const parts = [];
-  const cls = classText(doc, el.classes);
-  if (cls !== null) parts.push(cls);
-  for (const name of el.attrs.order) {
-    const v = el.attrs.entries.get(name);
-    if (!v) continue;
-    const text = attrText(doc, name, v);
-    if (text.length > 0) parts.push(text);
-  }
-  for (const ref of el.attrs.spreads) parts.push(`{...${exprText(doc, ref).text}}`);
-  const attrStr = parts.length > 0 ? ` ${parts.join(" ")}` : "";
-  const tag = el.tag;
-  if (el.children.length === 0) {
-    return el.selfClosing ? `<${tag}${attrStr} />` : `<${tag}${attrStr}></${tag}>`;
-  }
-  const inner = el.children.map((c) => printNode(doc, c)).join("");
-  return `<${tag}${attrStr}>${inner}</${tag}>`;
-}
-function printNode(doc, id) {
-  const node = doc.nodes.get(id);
-  if (!node) return "";
-  switch (node.kind) {
-    case "text":
-      return node.value;
-    case "comment":
-      return `{/*${node.value}*/}`;
-    case "expr": {
-      const { text, spread } = exprText(doc, node.expr);
-      return spread ? `{...${text}}` : `{${text}}`;
+  /**
+   * Generate a CSS stylesheet that defines `classes`, so a verifier can render a subtree with the
+   * real Tailwind styling applied. Backed by the same engine `resolve` uses (`generate(candidates)`),
+   * serialized to plain CSS. Returns `''` when the engine is unavailable or generates nothing.
+   */
+  cssFor(classes) {
+    if (!this.#engine) return "";
+    const tokens = [...new Set(classes)].filter((c) => c.length > 0);
+    if (tokens.length === 0) return "";
+    try {
+      return this.#engine.generate(tokens).map((n) => serializeCssNode(n)).filter((s) => s.length > 0).join("\n");
+    } catch {
+      return "";
     }
-    case "fragment":
-      return `<>${node.children.map((c) => printNode(doc, c)).join("")}</>`;
-    case "element":
-      return printElement(doc, node);
   }
-}
-function rePrint(doc) {
-  const root = doc.nodes.get(doc.root);
-  if (!root || root.kind !== "fragment") return printNode(doc, doc.root);
-  return root.children.map((c) => printNode(doc, c)).join("");
-}
-function doPrint(doc) {
-  const surgical = surgicalPrint(doc);
-  return surgical ?? rePrint(doc);
-}
-var jsxBackend = {
-  name: "babel-jsx",
-  langs: JSX_LANGS2,
-  print(doc, _plan, _ctx) {
-    const code = doPrint(doc);
-    return { code, map: null, edits: [], diagnostics: [] };
+  selectorUsage(token) {
+    const ex = this.#extract(token);
+    if (!ex.produced || ex.opaque) return OPAQUE_USAGE;
+    const baseOnly = ex.blocks.length > 0 && ex.blocks.every((b) => conditionKey(b.condition) === conditionKey(BASE_CONDITION));
+    if (!baseOnly) return OPAQUE_USAGE;
+    return DROPPABLE_USAGE;
   }
 };
-function createJsxBackend() {
-  return jsxBackend;
+function createTailwindResolver(config) {
+  return new TailwindResolver(config);
 }
 
-// ../frontend-jsx/src/index.ts
+// ../resolver-tailwind/src/index.ts
 init_esm_shims();
 
-// ../resolver-tailwind/src/index.ts
+// ../resolver-css/src/resolver.ts
 init_esm_shims();
-import { createRequire } from "module";
-import * as path from "path";
-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"));
-  bases.push(moduleBase());
-  for (const base of bases) {
-    try {
-      const candidate = createRequire(base);
-      candidate.resolve("tailwindcss/package.json");
-      return candidate;
-    } catch {
-    }
-  }
-  return null;
-}
-function loadEngine(options) {
-  const req = projectRequire(options.projectRoot);
-  if (!req) return null;
-  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");
-      userConfig = loadConfig(options.configPath);
-    }
-    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);
-      }
-    };
-  } catch {
-    return null;
-  }
-}
-var LEGACY_PSEUDO_ELEMENTS = /* @__PURE__ */ new Set([
+
+// ../resolver-css/src/constants.ts
+init_esm_shims();
+var CSS_RESOLVER_ID = "css";
+var CSS_RESOLVER_PROVIDER = "custom-css";
+var ENGINE_VERSION = "css-index@1";
+var STRUCTURAL_PSEUDOS = /* @__PURE__ */ new Set([
+  ":nth-child",
+  ":nth-last-child",
+  ":first-child",
+  ":last-child",
+  ":only-child",
+  ":nth-of-type",
+  ":nth-last-of-type",
+  ":first-of-type",
+  ":last-of-type",
+  ":only-of-type"
+]);
+var FUNCTIONAL_PSEUDOS = /* @__PURE__ */ new Set([
+  ":not",
+  ":is",
+  ":where",
+  ":has",
+  ":matches"
+]);
+var LEGACY_PSEUDO_ELEMENTS2 = /* @__PURE__ */ new Set([
   ":before",
   ":after",
   ":first-line",
   ":first-letter"
 ]);
-function parseSelector(selector) {
-  const sel = selector.trim();
-  if (sel.length === 0 || sel[0] !== ".") return { kind: "complex" };
-  let i = 1;
-  for (; i < sel.length; i += 1) {
-    const c = sel[i];
-    if (c === "\\") {
-      i += 1;
-      continue;
-    }
-    if (c === ":" || c === "." || c === "[" || c === " " || c === ">" || c === "+" || c === "~" || c === ",") {
-      break;
+
+// ../resolver-css/src/engine.ts
+init_esm_shims();
+import { createRequire as createRequire2 } from "module";
+import * as path2 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"));
+  bases.push(moduleBase2());
+  for (const base of bases) {
+    try {
+      const req = createRequire2(base);
+      req.resolve("postcss");
+      req.resolve("postcss-selector-parser");
+      const postcss = req("postcss");
+      const raw = req("postcss-selector-parser");
+      const selector = raw.default ?? raw;
+      return { parse: postcss.parse, selectorParser: selector };
+    } catch {
     }
   }
-  const remainder = sel.slice(i);
-  if (remainder.length === 0) {
-    return { kind: "simple", states: [], pseudoElement: "" };
+  return null;
+}
+var pc = null;
+var sp = null;
+function ensurePostcss(projectRoot) {
+  if (pc && sp) return;
+  const engine = loadPostcssEngine(projectRoot);
+  if (!engine) {
+    throw new Error(
+      '@domflax/resolver-css requires "postcss" and "postcss-selector-parser" to be installed in your project (they are optional peer dependencies of domflax, loaded only when the custom-CSS provider is used). Install them with: npm install postcss postcss-selector-parser'
+    );
   }
-  if (!/^(?:::?[-a-z]+(?:\([^()]*\))?)+$/i.test(remainder)) {
-    return { kind: "complex" };
+  pc = engine.parse;
+  sp = engine.selectorParser;
+}
+
+// ../resolver-css/src/postcss-helpers.ts
+init_esm_shims();
+function mediaContext(rule) {
+  const parts = [];
+  let skip = false;
+  let parent = rule.parent;
+  while (parent && parent.type === "atrule") {
+    const at = parent;
+    const name = at.name.toLowerCase();
+    if (name === "media") parts.unshift(at.params.trim().replace(/\s+/g, " "));
+    else if (name === "keyframes" || name.endsWith("keyframes") || name === "font-face") skip = true;
+    parent = parent.parent;
   }
-  const parts = remainder.match(/::?[-a-z]+(?:\([^()]*\))?/gi) ?? [];
-  const states = [];
-  let pseudoElement = "";
-  for (const part of parts) {
-    if (part.startsWith("::") || LEGACY_PSEUDO_ELEMENTS.has(part)) {
-      pseudoElement = part.startsWith("::") ? part : `:${part}`;
-    } else {
-      states.push(part);
-    }
+  return { media: parts.join(" and "), skip };
+}
+function collectDecls(rule) {
+  const out = [];
+  for (const node of rule.nodes) {
+    if (node.type === "decl") out.push([node.prop, node.value, node.important === true]);
   }
-  return { kind: "simple", states, pseudoElement };
+  return out;
 }
-function makeCondition(media, states, pseudoElement) {
-  return {
-    media,
-    states: [...new Set(states)].sort(),
-    pseudoElement
-  };
+
+// ../resolver-css/src/misc-helpers.ts
+init_esm_shims();
+import { readFileSync } from "fs";
+function isPlainClassToken(token) {
+  return token.length > 0 && !/[\s.#>+~:[\]()]/.test(token);
 }
-function collectRules(node, mediaStack, inUnsupportedAtRule, out) {
-  if (node.type === "rule") {
-    out.push({ rule: node, media: mediaStack, unsupported: inUnsupportedAtRule });
-    return;
+function readCssPath(path3) {
+  try {
+    return { id: path3, css: readFileSync(path3, "utf8") };
+  } catch (cause) {
+    throw new Error(`resolver-css: cannot read CSS file "${path3}"`, { cause });
   }
-  if (node.type === "atrule") {
-    const at = node;
-    const children = at.nodes ?? [];
-    if (at.name === "media") {
-      const nextStack = at.params ? [...mediaStack, at.params] : mediaStack;
-      for (const child of children) collectRules(child, nextStack, inUnsupportedAtRule, out);
+}
+function deriveFingerprint(provider, files) {
+  const parts = files.map((f) => `${f.id}:${f.css.length}`).sort();
+  return `${provider}/${ENGINE_VERSION}::${parts.join("|")}`;
+}
+
+// ../resolver-css/src/selector-helpers.ts
+init_esm_shims();
+function splitCompounds(selector) {
+  const compounds = [];
+  let current = [];
+  let leftCombinator = null;
+  for (const node of selector.nodes) {
+    if (sp.isCombinator(node)) {
+      compounds.push({ leftCombinator, nodes: current });
+      current = [];
+      leftCombinator = combinatorValue(node);
     } else {
-      for (const child of children) collectRules(child, mediaStack, true, out);
+      current.push(node);
     }
   }
+  compounds.push({ leftCombinator, nodes: current });
+  return compounds;
 }
-function extractToken(token, nodes) {
-  if (nodes.length === 0) return { blocks: [], produced: false };
-  const leaves = [];
-  for (const node of nodes) collectRules(node, [], false, leaves);
-  const blocks = [];
-  let sawComplex = false;
-  for (const { rule, media, unsupported } of leaves) {
-    const parsed = parseSelector(rule.selector);
-    if (parsed.kind === "complex" || unsupported) {
-      sawComplex = true;
-      continue;
-    }
-    const decls = [];
-    for (const child of rule.nodes ?? []) {
-      if (child.type !== "decl") continue;
-      const d = child;
-      if (typeof d.value !== "string") continue;
-      decls.push([d.prop, d.value, d.important === true]);
-    }
-    if (decls.length === 0) continue;
-    const mediaQuery = media.join(" and ");
-    blocks.push({ condition: makeCondition(mediaQuery, parsed.states, parsed.pseudoElement), decls });
-  }
-  const opaque = sawComplex && blocks.length === 0 ? { token, reason: "combinator-variant", detail: "utility targets descendants/siblings, not its own box" } : void 0;
-  return { blocks, produced: true, opaque };
+function combinatorValue(node) {
+  const v = node.value;
+  return v.trim() === "" ? " " : v.trim();
 }
-function buildStyleMap(blockMaps) {
-  if (blockMaps.size === 0) return emptyStyleMap();
-  const blocks = /* @__PURE__ */ new Map();
-  for (const { condition, decls } of blockMaps.values()) {
-    if (decls.size === 0) continue;
-    blocks.set(conditionKey(condition), { condition, decls });
-  }
-  if (blocks.size === 0) return emptyStyleMap();
-  return normalizer.normalizeStyleMap({ blocks });
+function pseudoName(node) {
+  return node.value.toLowerCase();
 }
-function shadowedBy(prev) {
-  const out = [];
-  const seen = /* @__PURE__ */ new Set();
-  const add = (o) => {
-    if (!o || o.kind !== "class" || seen.has(o.className)) return;
-    seen.add(o.className);
-    out.push(o);
-  };
-  for (const o of prev.shadowed ?? []) add(o);
-  add(prev.origin);
-  return out.length > 0 ? out : void 0;
+function isPseudoElement(node) {
+  return sp.isPseudoElement(node) || LEGACY_PSEUDO_ELEMENTS2.has(pseudoName(node));
 }
-var OPAQUE_USAGE = {
-  asSubject: true,
-  asAncestor: true,
-  asCompound: true,
-  asSibling: true,
-  asHasArgument: true,
-  asStructural: true,
-  droppable: false
-};
-var DROPPABLE_USAGE = {
-  asSubject: true,
-  asAncestor: false,
-  asCompound: false,
-  asSibling: false,
-  asHasArgument: false,
-  asStructural: false,
-  droppable: true
-};
-function fnv1a(input) {
-  let h = 2166136261;
-  for (let i = 0; i < input.length; i += 1) {
-    h ^= input.charCodeAt(i);
-    h = Math.imul(h, 16777619);
-  }
-  return (h >>> 0).toString(16).padStart(8, "0");
+function normalizePseudoElement(node) {
+  const name = pseudoName(node);
+  return name.startsWith("::") ? name : `::${name.replace(/^:/, "")}`;
 }
-var TailwindResolver = class {
-  id = "tailwind";
-  provider;
+
+// ../resolver-css/src/resolver.ts
+var CustomCSSResolver = class {
+  id = CSS_RESOLVER_ID;
+  provider = CSS_RESOLVER_PROVIDER;
   fingerprint;
-  #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}. */
-  #reverseIndex = null;
-  constructor(config = {}) {
-    this.#engine = loadEngine(config);
-    this.provider = config.provider ?? (this.#engine ? `tailwindcss@${this.#engine.version}` : "tailwindcss");
-    const seed = JSON.stringify(config.config ?? {}) + (config.configPath ?? "");
-    this.fingerprint = config.fingerprint ?? `${this.provider}/${fnv1a(seed)}`;
-  }
-  /** Engine-backed, cached single-token extraction. */
-  #extract(token) {
-    const cached = this.#tokenCache.get(token);
-    if (cached) return cached;
-    let result;
-    if (!this.#engine) {
-      result = { blocks: [], produced: false };
-    } else {
-      try {
-        result = extractToken(token, this.#engine.generate([token]));
-      } catch {
-        result = { blocks: [], produced: false };
-      }
+  #files;
+  /** Forward map: class token → simple-`.class` rule contributions (source order). */
+  #classIndex = /* @__PURE__ */ new Map();
+  /** Selector-participation facts per class token. */
+  #usage = /* @__PURE__ */ new Map();
+  /** Every class referenced anywhere in the stylesheets (forward-resolvable or not). */
+  #known = /* @__PURE__ */ new Set();
+  /** Distinct COMPLEX selectors (combinator or structural pseudo), sorted. */
+  #complex;
+  #reverse = null;
+  constructor(cssFiles = [], options = {}) {
+    ensurePostcss(options.projectRoot);
+    const fromDisk = (options.files ?? []).map(readCssPath);
+    this.#files = [...cssFiles, ...fromDisk];
+    this.fingerprint = options.fingerprint ?? deriveFingerprint(this.provider, this.#files);
+    const complex = /* @__PURE__ */ new Set();
+    let order = 0;
+    for (const file of this.#files) {
+      order = this.#indexFile(file, order, complex);
     }
-    this.#tokenCache.set(token, result);
-    return result;
+    this.#complex = [...complex].sort();
+  }
+  /** The stylesheets this resolver was constructed with (raw sources + any read from disk). */
+  get files() {
+    return this.#files;
   }
+  /** Owns any plain class token referenced by one of {@link files}. */
   owns(token) {
-    if (token.length === 0) return false;
-    return this.#extract(token).produced;
+    return isPlainClassToken(token) && this.#known.has(token);
   }
   resolve(input) {
-    const key = JSON.stringify(input.classes);
-    const cached = this.#resolveCache.get(key);
-    if (cached) return cached;
-    const blockMaps = /* @__PURE__ */ new Map();
+    const styles = this.#resolveTokens(input.classes, input.classes);
     const resolved = [];
     const unknown = [];
-    const opaque = [];
-    input.classes.forEach((token, tokenIndex) => {
-      const extracted = this.#extract(token);
-      if (!extracted.produced) {
-        unknown.push(token);
-        return;
+    for (const token of input.classes) {
+      if (this.#classIndex.has(token)) resolved.push(token);
+      else unknown.push(token);
+    }
+    return { styles, resolved, unknown, opaque: [], warnings: [] };
+  }
+  emit(styles, ctx) {
+    const norm = ctx.normalizer ?? normalizer;
+    const remaining = /* @__PURE__ */ new Map();
+    for (const [ck, block] of norm.normalizeStyleMap(styles).blocks) {
+      for (const [prop, decl] of block.decls) {
+        remaining.set(`${ck} ${prop}`, String(decl.value));
       }
-      if (extracted.opaque) opaque.push(extracted.opaque);
-      if (extracted.blocks.length === 0) return;
-      const origin = { kind: "class", tokenIndex, className: token };
-      let contributed = false;
-      for (const block of extracted.blocks) {
-        const ck = conditionKey(block.condition);
-        let bucket = blockMaps.get(ck);
-        if (!bucket) {
-          bucket = { condition: block.condition, decls: /* @__PURE__ */ new Map() };
-          blockMaps.set(ck, bucket);
-        }
-        for (const [prop, value, important] of block.decls) {
-          for (const decl of normalizer.normalizeDeclaration(prop, value, important)) {
-            const prev = bucket.decls.get(decl.property);
-            const shadowed = prev ? shadowedBy(prev) : void 0;
-            bucket.decls.set(decl.property, shadowed ? { ...decl, origin, shadowed } : { ...decl, origin });
-            contributed = true;
-          }
+    }
+    if (remaining.size === 0) return { classes: [], exact: true, warnings: [] };
+    const classes = [];
+    for (const { token, keyed } of this.#reverseIndex()) {
+      let matches = true;
+      for (const [key, value] of keyed) {
+        if (remaining.get(key) !== value) {
+          matches = false;
+          break;
         }
       }
-      if (contributed) resolved.push(token);
-    });
-    const result = {
-      styles: buildStyleMap(blockMaps),
-      resolved,
-      unknown,
-      opaque,
-      warnings: []
+      if (!matches) continue;
+      classes.push(token);
+      for (const key of keyed.keys()) remaining.delete(key);
+      if (remaining.size === 0) break;
+    }
+    return { classes, exact: remaining.size === 0, warnings: [] };
+  }
+  /**
+   * Return a CSS stylesheet defining the given class tokens, so a verifier can render a subtree with
+   * the project's real styling applied. The source stylesheets ARE the definition, so we hand back
+   * their concatenation verbatim (every relevant rule — including combinator/structural selectors —
+   * is preserved). `classes` is accepted for interface parity but the full source is always returned.
+   */
+  cssFor(_classes) {
+    return this.#files.map((f) => f.css).join("\n");
+  }
+  selectorUsage(token) {
+    const u = this.#usage.get(token);
+    if (!u) {
+      return {
+        asSubject: false,
+        asAncestor: false,
+        asCompound: false,
+        asSibling: false,
+        asHasArgument: false,
+        asStructural: false,
+        droppable: true
+      };
+    }
+    return {
+      asSubject: u.asSubject,
+      asAncestor: u.asAncestor,
+      asCompound: u.asCompound,
+      asSibling: u.asSibling,
+      asHasArgument: u.asHasArgument,
+      asStructural: u.asStructural,
+      // Safe to drop/rename only when every reference is the lone subject of a bare `.x {}`.
+      droppable: u.referenced && !u.loadBearing
     };
-    this.#resolveCache.set(key, result);
-    return result;
   }
   /**
-   * Lazily build the reverse index from the engine's own enumerable class list. Each indexable
-   * utility maps to its NORMALIZED BASE longhand declarations (property → canonical value). Utilities
-   * with variant conditions, combinator selectors, or no BASE declarations are skipped. Sorted by
-   * declaration count (desc) so greedier (shorthand-like) utilities are tried first.
+   * The distinct COMPLEX selectors found across all stylesheets — anything containing a combinator
+   * (descendant / `>` / `+` / `~`) or a structural pseudo (`:nth-child`, `:first-child`, …). Feeds
+   * domflax's CSS-selector-safety guard.
    */
-  #buildReverseIndex() {
-    if (this.#reverseIndex) return this.#reverseIndex;
-    const index = [];
-    if (this.#engine) {
+  complexSelectors() {
+    return this.#complex;
+  }
+  /* ─────────────────────────── internals ─────────────────────────── */
+  /** Parse one stylesheet and fold its rules into the indexes. Returns the advanced order counter. */
+  #indexFile(file, startOrder, complex) {
+    let order = startOrder;
+    let root;
+    try {
+      root = pc(file.css, { from: file.id });
+    } catch {
+      return order;
+    }
+    root.walkRules((rule) => {
+      const media = mediaContext(rule);
+      if (media.skip) return;
+      const decls = collectDecls(rule);
+      let ast;
       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 decls = /* @__PURE__ */ new Map();
-          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)) {
-              decls.set(decl.property, String(decl.value));
-            }
-          }
-          if (decls.size > 0) index.push([className, decls]);
-        }
+        ast = sp().astSync(rule.selector);
       } catch {
+        return;
       }
-    }
-    index.sort((a, b) => b[1].size - a[1].size || (a[0] < b[0] ? -1 : a[0] > b[0] ? 1 : 0));
-    this.#reverseIndex = index;
-    return index;
-  }
-  emit(styles, ctx) {
-    const norm = ctx.normalizer ?? normalizer;
-    const normalized = norm.normalizeStyleMap(styles);
-    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;
-    const target = /* @__PURE__ */ new Map();
-    for (const [prop, decl] of base.decls) {
-      for (const [lp, lv] of expandForEmit(norm, String(prop), String(decl.value), decl.important)) {
-        target.set(lp, lv);
+      for (const sel of ast.nodes) {
+        const thisOrder = order;
+        this.#analyzeSelector(sel, media.media, decls, thisOrder, complex);
       }
-    }
-    const candidates = [];
-    for (const entry of this.#buildReverseIndex()) {
-      const [, declMap] = entry;
-      if (declMap.size === 0 || declMap.size > target.size) continue;
-      let fits = true;
-      for (const [prop, value] of declMap) {
-        if (target.get(prop) !== value) {
-          fits = false;
-          break;
+      order += 1;
+    });
+    return order;
+  }
+  /** Analyze one comma-segment selector: forward indexing, usage facts, complex detection. */
+  #analyzeSelector(selector, media, decls, order, complex) {
+    const compounds = splitCompounds(selector);
+    let hasCombinator = false;
+    let hasStructural = false;
+    compounds.forEach((compound, index) => {
+      const isSubject = index === compounds.length - 1;
+      const rightCombinator = index < compounds.length - 1 ? compounds[index + 1].leftCombinator : null;
+      if (rightCombinator) hasCombinator = true;
+      const classes = compound.nodes.filter((n) => sp.isClassName(n));
+      const otherSimple = compound.nodes.some(
+        (n) => sp.isTag(n) || sp.isIdentifier(n) || sp.isAttribute(n) || sp.isUniversal(n) || sp.isNesting(n)
+      );
+      const pseudos = compound.nodes.filter((n) => sp.isPseudo(n));
+      const structuralPseudo = pseudos.some((p) => STRUCTURAL_PSEUDOS.has(pseudoName(p)));
+      const functionalPseudo = pseudos.some((p) => FUNCTIONAL_PSEUDOS.has(pseudoName(p)));
+      const statePseudos = pseudos.filter(
+        (p) => sp.isPseudoClass(p) && !STRUCTURAL_PSEUDOS.has(pseudoName(p)) && !FUNCTIONAL_PSEUDOS.has(pseudoName(p))
+      );
+      const elementPseudos = pseudos.filter((p) => isPseudoElement(p));
+      const qualified = classes.length > 1 || otherSimple || functionalPseudo || statePseudos.length > 0;
+      if (structuralPseudo) hasStructural = true;
+      for (const cls of classes) {
+        const token = cls.value;
+        this.#known.add(token);
+        const u = this.#getUsage(token);
+        u.referenced = true;
+        if (isSubject) u.asSubject = true;
+        if (rightCombinator === " " || rightCombinator === ">") u.asAncestor = true;
+        if (rightCombinator === "+" || rightCombinator === "~") u.asSibling = true;
+        if (qualified) u.asCompound = true;
+        if (structuralPseudo) u.asStructural = true;
+        if (rightCombinator !== null || qualified || structuralPseudo || elementPseudos.length > 0) {
+          u.loadBearing = true;
         }
-      }
-      if (fits) candidates.push(entry);
-    }
-    const remaining = new Map(target);
-    const classes = [];
-    while (remaining.size > 0) {
-      let best = null;
-      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];
-        if (better) {
-          best = entry;
-          bestCover = cover;
+        const forwardEligible = compounds.length === 1 && classes.length === 1 && !otherSimple && !structuralPseudo && !functionalPseudo && elementPseudos.length <= 1;
+        if (forwardEligible && decls.length > 0) {
+          const condition = {
+            media,
+            states: statePseudos.map(pseudoName).sort(),
+            pseudoElement: elementPseudos.length === 1 ? normalizePseudoElement(elementPseudos[0]) : ""
+          };
+          this.#addRuleEntry(token, { order, token, condition, decls });
         }
       }
-      if (!best) break;
-      classes.push(best[0]);
-      for (const prop of best[1].keys()) remaining.delete(prop);
+      for (const p of pseudos) {
+        const isHas = pseudoName(p) === ":has";
+        p.walkClasses((inner) => {
+          const token = inner.value;
+          this.#known.add(token);
+          const u = this.#getUsage(token);
+          u.referenced = true;
+          u.loadBearing = true;
+          if (isHas) u.asHasArgument = true;
+        });
+      }
+    });
+    if (hasCombinator || hasStructural) {
+      complex.add(selector.toString().trim());
     }
-    const exact = remaining.size === 0 && !hasNonBase;
-    if (remaining.size === 0) return { classes, exact, warnings: [] };
-    const residual = synthesizeResidual(remaining, ctx);
-    return residual ? { classes, residual, exact, warnings: [] } : { classes, exact, warnings: [] };
-  }
-  selectorUsage(token) {
-    const ex = this.#extract(token);
-    if (!ex.produced || ex.opaque) return OPAQUE_USAGE;
-    const baseOnly = ex.blocks.length > 0 && ex.blocks.every((b) => conditionKey(b.condition) === conditionKey(BASE_CONDITION));
-    if (!baseOnly) return OPAQUE_USAGE;
-    return DROPPABLE_USAGE;
-  }
-};
-function expandForEmit(norm, prop, value, important) {
-  const pairsFor = (p, v) => norm.normalizeDeclaration(p, v, important).map((d) => [d.property, String(d.value)]);
-  if (prop === "size") {
-    return [...pairsFor("width", value), ...pairsFor("height", value)];
   }
-  if (prop === "inset-block" || prop === "inset-inline") {
-    const parts = value.split(/\s+/).filter((s) => s.length > 0);
-    const a = parts[0] ?? value;
-    const b = parts[1] ?? a;
-    const sides = prop === "inset-block" ? ["top", "bottom"] : ["left", "right"];
-    return [...pairsFor(sides[0], a), ...pairsFor(sides[1], b)];
+  #addRuleEntry(token, entry) {
+    const list = this.#classIndex.get(token);
+    if (list) list.push(entry);
+    else this.#classIndex.set(token, [entry]);
   }
-  return pairsFor(prop, value);
-}
-function synthesizeResidual(remaining, ctx) {
-  if (remaining.size === 0) return void 0;
-  const norm = ctx.normalizer ?? normalizer;
-  const decls = /* @__PURE__ */ new Map();
-  for (const [prop, value] of remaining) {
-    for (const decl of norm.normalizeDeclaration(String(prop), value, false)) {
-      decls.set(decl.property, decl);
+  #getUsage(token) {
+    let u = this.#usage.get(token);
+    if (!u) {
+      u = {
+        referenced: false,
+        asSubject: false,
+        asAncestor: false,
+        asCompound: false,
+        asSibling: false,
+        asHasArgument: false,
+        asStructural: false,
+        loadBearing: false
+      };
+      this.#usage.set(token, u);
     }
+    return u;
   }
-  const block = { condition: BASE_CONDITION, decls };
-  const styleMap = { blocks: /* @__PURE__ */ new Map([[conditionKey(BASE_CONDITION), block]]) };
-  const css = [...remaining].map(([p, v]) => `${p}:${v}`).join(";");
-  const className = `df-${fnv1a(css)}`;
-  const synthetic = { className, decls: styleMap, css: `.${className}{${css}}` };
-  try {
-    ctx.sink.register(synthetic);
-  } catch {
-  }
-  return synthetic;
-}
-function unescapeClass(selector) {
-  const sel = selector.trim();
-  if (sel[0] !== ".") return null;
-  let out = "";
-  for (let i = 1; i < sel.length; i += 1) {
-    const c = sel[i];
-    if (c === "\\") {
-      i += 1;
-      if (i < sel.length) out += sel[i];
-      continue;
+  /**
+   * Resolve a set of tokens into a normalized condition-keyed StyleMap. `tokenList` is the original
+   * class list (for per-declaration `tokenIndex` provenance); `request` is the set being resolved.
+   */
+  #resolveTokens(request, tokenList) {
+    const entries = [];
+    for (const token of new Set(request)) {
+      const list = this.#classIndex.get(token);
+      if (list) entries.push(...list);
     }
-    if (c === ":" || c === "." || c === "[" || c === " " || c === ">" || c === "+" || c === "~" || c === ",") {
-      return null;
+    if (entries.length === 0) return emptyStyleMap();
+    entries.sort((a, b) => a.order - b.order);
+    const acc = /* @__PURE__ */ new Map();
+    for (const entry of entries) {
+      const key = conditionKey(entry.condition);
+      let block = acc.get(key);
+      if (!block) {
+        block = { condition: entry.condition, decls: /* @__PURE__ */ new Map() };
+        acc.set(key, block);
+      }
+      const tokenIndex = tokenList.indexOf(entry.token);
+      const origin = { kind: "class", tokenIndex, className: entry.token };
+      for (const [prop, value, important] of entry.decls) {
+        for (const decl of normalizer.normalizeDeclaration(prop, value, important)) {
+          block.decls.set(decl.property, { ...decl, origin });
+        }
+      }
     }
-    out += c;
+    const rawBlocks = /* @__PURE__ */ new Map();
+    for (const [key, block] of acc) {
+      if (block.decls.size === 0) continue;
+      rawBlocks.set(key, { condition: block.condition, decls: block.decls });
+    }
+    if (rawBlocks.size === 0) return emptyStyleMap();
+    return normalizer.normalizeStyleMap({ blocks: rawBlocks });
   }
-  return out.length > 0 ? out : null;
-}
-function createTailwindResolver(config) {
-  return new TailwindResolver(config);
+  /** Build (once) the reverse index used by {@link emit}. */
+  #reverseIndex() {
+    if (this.#reverse) return this.#reverse;
+    const out = [];
+    for (const token of this.#classIndex.keys()) {
+      const styles = this.#resolveTokens([token], [token]);
+      const keyed = /* @__PURE__ */ new Map();
+      for (const [ck, block] of styles.blocks) {
+        for (const [prop, decl] of block.decls) keyed.set(`${ck} ${prop}`, String(decl.value));
+      }
+      if (keyed.size > 0) out.push({ token, keyed });
+    }
+    out.sort((a, b) => b.keyed.size - a.keyed.size);
+    this.#reverse = out;
+    return out;
+  }
+};
+function createCssResolver(cssFiles = [], options) {
+  return new CustomCSSResolver(cssFiles, options);
 }
 
 // ../resolver-css/src/index.ts
 init_esm_shims();
-import { readFileSync } from "fs";
-import { createRequire as createRequire2 } from "module";
-import * as path2 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"));
-  bases.push(moduleBase2());
-  for (const base of bases) {
-    try {
-      const req = createRequire2(base);
-      req.resolve("postcss");
-      req.resolve("postcss-selector-parser");
-      const postcss = req("postcss");
-      const raw = req("postcss-selector-parser");
-      const selector = raw.default ?? raw;
-      return { parse: postcss.parse, selectorParser: selector };
-    } catch {
-    }
-  }
-  return null;
-}
-var pc = null;
-var sp = null;
-function ensurePostcss(projectRoot) {
-  if (pc && sp) return;
-  const engine = loadPostcssEngine(projectRoot);
-  if (!engine) {
-    throw new Error(
-      '@domflax/resolver-css requires "postcss" and "postcss-selector-parser" to be installed in your project (they are optional peer dependencies of domflax, loaded only when the custom-CSS provider is used). Install them with: npm install postcss postcss-selector-parser'
-    );
+
+// ../frontend-jsx/src/frontend.ts
+init_esm_shims();
+
+// ../frontend-jsx/src/frontend-ast.ts
+init_esm_shims();
+import babelTraverse from "@babel/traverse";
+var traverse = typeof babelTraverse === "function" ? babelTraverse : babelTraverse.default;
+var JSX_LANGS = ["jsx", "tsx"];
+var FILE_ID = 1;
+function jsxName(node) {
+  switch (node.type) {
+    case "JSXIdentifier":
+      return node.name;
+    case "JSXMemberExpression":
+      return `${jsxName(node.object)}.${node.property.name}`;
+    case "JSXNamespacedName":
+      return `${node.namespace.name}:${node.name.name}`;
   }
-  pc = engine.parse;
-  sp = engine.selectorParser;
 }
-var CSS_RESOLVER_ID = "css";
-var CSS_RESOLVER_PROVIDER = "custom-css";
-var ENGINE_VERSION = "css-index@1";
-var STRUCTURAL_PSEUDOS = /* @__PURE__ */ new Set([
-  ":nth-child",
-  ":nth-last-child",
-  ":first-child",
-  ":last-child",
-  ":only-child",
-  ":nth-of-type",
-  ":nth-last-of-type",
-  ":first-of-type",
-  ":last-of-type",
-  ":only-of-type"
-]);
-var FUNCTIONAL_PSEUDOS = /* @__PURE__ */ new Set([
-  ":not",
-  ":is",
-  ":where",
-  ":has",
-  ":matches"
-]);
-var LEGACY_PSEUDO_ELEMENTS2 = /* @__PURE__ */ new Set([
-  ":before",
-  ":after",
-  ":first-line",
-  ":first-letter"
-]);
-var CustomCSSResolver = class {
-  id = CSS_RESOLVER_ID;
-  provider = CSS_RESOLVER_PROVIDER;
-  fingerprint;
-  #files;
-  /** Forward map: class token → simple-`.class` rule contributions (source order). */
-  #classIndex = /* @__PURE__ */ new Map();
-  /** Selector-participation facts per class token. */
-  #usage = /* @__PURE__ */ new Map();
-  /** Every class referenced anywhere in the stylesheets (forward-resolvable or not). */
-  #known = /* @__PURE__ */ new Set();
-  /** Distinct COMPLEX selectors (combinator or structural pseudo), sorted. */
-  #complex;
-  #reverse = null;
-  constructor(cssFiles = [], options = {}) {
-    ensurePostcss(options.projectRoot);
-    const fromDisk = (options.files ?? []).map(readCssPath);
-    this.#files = [...cssFiles, ...fromDisk];
-    this.fingerprint = options.fingerprint ?? deriveFingerprint(this.provider, this.#files);
-    const complex = /* @__PURE__ */ new Set();
-    let order = 0;
-    for (const file of this.#files) {
-      order = this.#indexFile(file, order, complex);
-    }
-    this.#complex = [...complex].sort();
-  }
-  /** The stylesheets this resolver was constructed with (raw sources + any read from disk). */
-  get files() {
-    return this.#files;
+function isComponentName(node) {
+  if (node.type === "JSXMemberExpression") return true;
+  if (node.type === "JSXNamespacedName") return false;
+  return /^[A-Z]/.test(node.name);
+}
+function attrName(name) {
+  return name.type === "JSXNamespacedName" ? `${name.namespace.name}:${name.name.name}` : name.name;
+}
+function exprKind(node) {
+  switch (node.type) {
+    case "CallExpression":
+    case "OptionalCallExpression":
+      return "call";
+    case "MemberExpression":
+    case "OptionalMemberExpression":
+      return "member";
+    case "ConditionalExpression":
+    case "LogicalExpression":
+      return "conditional";
+    case "TemplateLiteral":
+    case "TaggedTemplateExpression":
+      return "template";
+    case "Identifier":
+      return "identifier";
+    case "SpreadElement":
+      return "spread";
+    default:
+      return "other";
   }
-  /** Owns any plain class token referenced by one of {@link files}. */
-  owns(token) {
-    return isPlainClassToken(token) && this.#known.has(token);
+}
+function classFormOf(node) {
+  switch (node.type) {
+    case "TemplateLiteral":
+    case "TaggedTemplateExpression":
+      return "template-literal";
+    case "CallExpression":
+    case "OptionalCallExpression":
+      return "call";
+    case "ConditionalExpression":
+    case "LogicalExpression":
+      return "conditional";
+    case "MemberExpression":
+    case "OptionalMemberExpression":
+    case "Identifier":
+      return "member";
+    default:
+      return "call";
   }
-  resolve(input) {
-    const styles = this.#resolveTokens(input.classes, input.classes);
-    const resolved = [];
-    const unknown = [];
-    for (const token of input.classes) {
-      if (this.#classIndex.has(token)) resolved.push(token);
-      else unknown.push(token);
+}
+function findNestedJsxRoots(root) {
+  const out = [];
+  const seen = /* @__PURE__ */ new Set();
+  const visit = (n) => {
+    if (!n || seen.has(n)) return;
+    seen.add(n);
+    switch (n.type) {
+      case "JSXElement":
+      case "JSXFragment":
+        out.push(n);
+        return;
+      case "ParenthesizedExpression":
+      case "TSNonNullExpression":
+      case "TSAsExpression":
+      case "TSSatisfiesExpression":
+      case "TSTypeAssertion":
+        visit(n.expression);
+        return;
+      case "LogicalExpression":
+        visit(n.left);
+        visit(n.right);
+        return;
+      case "ConditionalExpression":
+        visit(n.consequent);
+        visit(n.alternate);
+        return;
+      case "SequenceExpression":
+        for (const e of n.expressions) visit(e);
+        return;
+      case "CallExpression":
+      case "OptionalCallExpression":
+        for (const a of n.arguments) visit(a);
+        return;
+      case "ArrowFunctionExpression":
+      case "FunctionExpression":
+        visit(n.body);
+        return;
+      case "BlockStatement":
+        for (const s of n.body) visit(s);
+        return;
+      case "ReturnStatement":
+        visit(n.argument);
+        return;
+      case "IfStatement":
+        visit(n.consequent);
+        visit(n.alternate);
+        return;
+      case "ArrayExpression":
+        for (const el of n.elements) visit(el);
+        return;
+      default:
+        return;
     }
-    return { styles, resolved, unknown, opaque: [], warnings: [] };
-  }
-  emit(styles, ctx) {
-    const norm = ctx.normalizer ?? normalizer;
-    const remaining = /* @__PURE__ */ new Map();
-    for (const [ck, block] of norm.normalizeStyleMap(styles).blocks) {
-      for (const [prop, decl] of block.decls) {
-        remaining.set(`${ck}\0${prop}`, String(decl.value));
-      }
+  };
+  visit(root);
+  return out;
+}
+function looksLikeJsx(id, code) {
+  if (/\.[jt]sx$/i.test(id)) return true;
+  return /<\/?[A-Za-z][\w.-]*|<>/.test(code);
+}
+
+// ../frontend-jsx/src/frontend-parse.ts
+init_esm_shims();
+import { parse as babelParse } from "@babel/parser";
+function doParse(code, ctx) {
+  const diagnostics = [];
+  const doc = createDocument("jsx");
+  const backref = doc.backref;
+  const ast = babelParse(code, {
+    sourceType: "module",
+    plugins: ["jsx", "typescript"]
+  });
+  const eol = code.includes("\r\n") ? "\r\n" : "\n";
+  const sourceFile = {
+    id: FILE_ID,
+    path: ctx.id,
+    text: code,
+    frontend: "jsx",
+    eol,
+    indentUnit: "  ",
+    native: ast
+  };
+  doc.sources.set(FILE_ID, sourceFile);
+  const spanOf = (node) => {
+    if (node.start == null || node.end == null) return null;
+    const span = {
+      file: FILE_ID,
+      start: node.start,
+      end: node.end,
+      startLoc: node.loc ? { line: node.loc.start.line, column: node.loc.start.column } : void 0,
+      endLoc: node.loc ? { line: node.loc.end.line, column: node.loc.end.column } : void 0
+    };
+    return span;
+  };
+  const sliceOf = (node) => node.start == null || node.end == null ? "" : code.slice(node.start, node.end);
+  const internExpr = (node, spread) => {
+    const payload = { text: sliceOf(node), spread };
+    return doc.exprs.intern({
+      span: spanOf(node) ?? { file: FILE_ID, start: 0, end: 0 },
+      kind: exprKind(node),
+      payload
+    });
+  };
+  const splitTokens = (raw) => raw.split(/\s+/).filter((t) => t.length > 0).map((value) => ({ value }));
+  const buildClassList = (attr) => {
+    const attrSpan = spanOf(attr) ?? void 0;
+    const v = attr.value;
+    const staticList = (tokens, valueSpan) => {
+      const seg = { kind: "static", span: valueSpan ?? void 0, tokens };
+      return {
+        form: "string-literal",
+        segments: [seg],
+        valueSpan,
+        attrSpan,
+        hasDynamic: false,
+        opaque: false,
+        rewritable: true
+      };
+    };
+    if (v == null) return staticList([], null);
+    if (v.type === "StringLiteral") {
+      return staticList(splitTokens(v.value), spanOf(v));
     }
-    if (remaining.size === 0) return { classes: [], exact: true, warnings: [] };
-    const classes = [];
-    for (const { token, keyed } of this.#reverseIndex()) {
-      let matches = true;
-      for (const [key, value] of keyed) {
-        if (remaining.get(key) !== value) {
-          matches = false;
-          break;
-        }
+    if (v.type === "JSXExpressionContainer") {
+      const expr = v.expression;
+      if (expr.type === "StringLiteral") {
+        return staticList(splitTokens(expr.value), spanOf(expr));
       }
-      if (!matches) continue;
-      classes.push(token);
-      for (const key of keyed.keys()) remaining.delete(key);
-      if (remaining.size === 0) break;
-    }
-    return { classes, exact: remaining.size === 0, warnings: [] };
-  }
-  selectorUsage(token) {
-    const u = this.#usage.get(token);
-    if (!u) {
+      if (expr.type === "JSXEmptyExpression") return staticList([], null);
+      const ref = internExpr(expr, false);
+      const valueSpan = spanOf(expr);
+      const seg = { kind: "dynamic", span: valueSpan ?? void 0, expr: ref };
       return {
-        asSubject: false,
-        asAncestor: false,
-        asCompound: false,
-        asSibling: false,
-        asHasArgument: false,
-        asStructural: false,
-        droppable: true
+        form: classFormOf(expr),
+        segments: [seg],
+        valueSpan,
+        attrSpan,
+        hasDynamic: true,
+        opaque: true,
+        rewritable: false
       };
     }
-    return {
-      asSubject: u.asSubject,
-      asAncestor: u.asAncestor,
-      asCompound: u.asCompound,
-      asSibling: u.asSibling,
-      asHasArgument: u.asHasArgument,
-      asStructural: u.asStructural,
-      // Safe to drop/rename only when every reference is the lone subject of a bare `.x {}`.
-      droppable: u.referenced && !u.loadBearing
-    };
-  }
-  /**
-   * The distinct COMPLEX selectors found across all stylesheets — anything containing a combinator
-   * (descendant / `>` / `+` / `~`) or a structural pseudo (`:nth-child`, `:first-child`, …). Feeds
-   * domflax's CSS-selector-safety guard.
-   */
-  complexSelectors() {
-    return this.#complex;
-  }
-  /* ─────────────────────────── internals ─────────────────────────── */
-  /** Parse one stylesheet and fold its rules into the indexes. Returns the advanced order counter. */
-  #indexFile(file, startOrder, complex) {
-    let order = startOrder;
-    let root;
-    try {
-      root = pc(file.css, { from: file.id });
-    } catch {
-      return order;
+    return emptyClassList();
+  };
+  const staticTokensOf2 = (classes) => {
+    const out = [];
+    for (const seg of classes.segments) {
+      if (seg.kind === "static") for (const t of seg.tokens) out.push(t.value);
     }
-    root.walkRules((rule) => {
-      const media = mediaContext(rule);
-      if (media.skip) return;
-      const decls = collectDecls(rule);
-      let ast;
-      try {
-        ast = sp().astSync(rule.selector);
-      } catch {
+    return out;
+  };
+  const buildAttrValue = (attr) => {
+    const v = attr.value;
+    if (v == null) return { kind: "static", value: true, span: spanOf(attr) ?? void 0 };
+    if (v.type === "StringLiteral") {
+      return { kind: "static", value: v.value, span: spanOf(v) ?? void 0 };
+    }
+    if (v.type === "JSXExpressionContainer") {
+      if (v.expression.type === "JSXEmptyExpression") {
+        return { kind: "static", value: true, span: spanOf(v) ?? void 0 };
+      }
+      return { kind: "dynamic", expr: internExpr(v.expression, false), span: spanOf(v) ?? void 0 };
+    }
+    return { kind: "dynamic", expr: internExpr(v, false), span: spanOf(v) ?? void 0 };
+  };
+  const buildNestedRoot = (jsx, parentId) => jsx.type === "JSXFragment" ? buildFragment(jsx, parentId) : buildElement(jsx, parentId);
+  const appendChild = (node, parentId, out) => {
+    switch (node.type) {
+      case "JSXText": {
+        const id = doc.alloc.next();
+        doc.nodes.set(
+          id,
+          createText(id, node.value, {
+            parent: parentId,
+            span: spanOf(node),
+            collapsible: /^\s*$/.test(node.value)
+          })
+        );
+        out.push(id);
         return;
       }
-      for (const sel of ast.nodes) {
-        const thisOrder = order;
-        this.#analyzeSelector(sel, media.media, decls, thisOrder, complex);
-      }
-      order += 1;
-    });
-    return order;
-  }
-  /** Analyze one comma-segment selector: forward indexing, usage facts, complex detection. */
-  #analyzeSelector(selector, media, decls, order, complex) {
-    const compounds = splitCompounds(selector);
-    let hasCombinator = false;
-    let hasStructural = false;
-    compounds.forEach((compound, index) => {
-      const isSubject = index === compounds.length - 1;
-      const rightCombinator = index < compounds.length - 1 ? compounds[index + 1].leftCombinator : null;
-      if (rightCombinator) hasCombinator = true;
-      const classes = compound.nodes.filter((n) => sp.isClassName(n));
-      const otherSimple = compound.nodes.some(
-        (n) => sp.isTag(n) || sp.isIdentifier(n) || sp.isAttribute(n) || sp.isUniversal(n) || sp.isNesting(n)
-      );
-      const pseudos = compound.nodes.filter((n) => sp.isPseudo(n));
-      const structuralPseudo = pseudos.some((p) => STRUCTURAL_PSEUDOS.has(pseudoName(p)));
-      const functionalPseudo = pseudos.some((p) => FUNCTIONAL_PSEUDOS.has(pseudoName(p)));
-      const statePseudos = pseudos.filter(
-        (p) => sp.isPseudoClass(p) && !STRUCTURAL_PSEUDOS.has(pseudoName(p)) && !FUNCTIONAL_PSEUDOS.has(pseudoName(p))
-      );
-      const elementPseudos = pseudos.filter((p) => isPseudoElement(p));
-      const qualified = classes.length > 1 || otherSimple || functionalPseudo || statePseudos.length > 0;
-      if (structuralPseudo) hasStructural = true;
-      for (const cls of classes) {
-        const token = cls.value;
-        this.#known.add(token);
-        const u = this.#getUsage(token);
-        u.referenced = true;
-        if (isSubject) u.asSubject = true;
-        if (rightCombinator === " " || rightCombinator === ">") u.asAncestor = true;
-        if (rightCombinator === "+" || rightCombinator === "~") u.asSibling = true;
-        if (qualified) u.asCompound = true;
-        if (structuralPseudo) u.asStructural = true;
-        if (rightCombinator !== null || qualified || structuralPseudo || elementPseudos.length > 0) {
-          u.loadBearing = true;
+      case "JSXExpressionContainer": {
+        const expr = node.expression;
+        if (expr.type === "JSXEmptyExpression") return;
+        if (expr.type === "JSXElement" || expr.type === "JSXFragment") {
+          out.push(buildNestedRoot(expr, parentId));
+          return;
         }
-        const forwardEligible = compounds.length === 1 && classes.length === 1 && !otherSimple && !structuralPseudo && !functionalPseudo && elementPseudos.length <= 1;
-        if (forwardEligible && decls.length > 0) {
-          const condition = {
-            media,
-            states: statePseudos.map(pseudoName).sort(),
-            pseudoElement: elementPseudos.length === 1 ? normalizePseudoElement(elementPseudos[0]) : ""
-          };
-          this.#addRuleEntry(token, { order, token, condition, decls });
+        const id = doc.alloc.next();
+        const ref = internExpr(expr, false);
+        doc.nodes.set(id, createExpr(id, ref, { parent: parentId, span: spanOf(node) }));
+        out.push(id);
+        for (const jsx of findNestedJsxRoots(expr)) out.push(buildNestedRoot(jsx, parentId));
+        return;
+      }
+      case "JSXSpreadChild": {
+        const id = doc.alloc.next();
+        const ref = internExpr(node.expression, true);
+        doc.nodes.set(id, createExpr(id, ref, { parent: parentId, span: spanOf(node) }));
+        out.push(id);
+        for (const jsx of findNestedJsxRoots(node.expression)) {
+          out.push(buildNestedRoot(jsx, parentId));
         }
+        return;
       }
-      for (const p of pseudos) {
-        const isHas = pseudoName(p) === ":has";
-        p.walkClasses((inner) => {
-          const token = inner.value;
-          this.#known.add(token);
-          const u = this.#getUsage(token);
-          u.referenced = true;
-          u.loadBearing = true;
-          if (isHas) u.asHasArgument = true;
+      case "JSXElement":
+        out.push(buildElement(node, parentId));
+        return;
+      case "JSXFragment":
+        out.push(buildFragment(node, parentId));
+        return;
+      default:
+        return;
+    }
+  };
+  const buildFragment = (node, parentId) => {
+    const id = doc.alloc.next();
+    const children = [];
+    for (const c of node.children) appendChild(c, id, children);
+    doc.nodes.set(id, createFragment(id, { children, parent: parentId, span: spanOf(node) }));
+    backref.set(id, {
+      nodeId: id,
+      span: spanOf(node) ?? { file: FILE_ID, start: 0, end: 0 },
+      openTagSpan: spanOf(node.openingFragment),
+      closeTagSpan: spanOf(node.closingFragment),
+      innerSpan: null,
+      selfClosing: false
+    });
+    return id;
+  };
+  const buildElement = (node, parentId) => {
+    const id = doc.alloc.next();
+    const opening = node.openingElement;
+    const tag = jsxName(opening.name);
+    const component = isComponentName(opening.name);
+    const meta = defaultMeta();
+    meta.isComponent = component;
+    let classes = emptyClassList();
+    const entries = /* @__PURE__ */ new Map();
+    const order = [];
+    const spreads = [];
+    for (const attr of opening.attributes) {
+      if (attr.type === "JSXSpreadAttribute") {
+        spreads.push(internExpr(attr.argument, true));
+        meta.hasSpreadAttrs = true;
+        continue;
+      }
+      const name = attrName(attr.name);
+      if (name === "className" || name === "class") {
+        classes = buildClassList(attr);
+        continue;
+      }
+      if (name === "ref") meta.hasRef = true;
+      else if (name === "key") meta.hasKey = true;
+      else if (name === "dangerouslySetInnerHTML") meta.hasDangerousHtml = true;
+      else if (/^on[A-Z]/.test(name)) meta.hasEventHandlers = true;
+      entries.set(name, buildAttrValue(attr));
+      order.push(name);
+    }
+    const attrs = { entries, spreads, order };
+    const children = [];
+    for (const c of node.children) appendChild(c, id, children);
+    for (const cid of children) {
+      const cn = doc.nodes.get(cid);
+      if (cn && cn.kind === "expr") {
+        meta.hasDynamicChildren = true;
+        break;
+      }
+    }
+    let computed2 = emptyStyleMap();
+    if (!classes.hasDynamic) {
+      const tokens = staticTokensOf2(classes);
+      if (tokens.length > 0) {
+        const res = ctx.resolver.resolve({
+          classes: tokens,
+          element: { tagName: tag, namespace: component ? void 0 : "html" }
         });
+        computed2 = ctx.normalizer.normalizeStyleMap(res.styles);
+        for (const w of res.warnings) {
+          diagnostics.push({
+            code: "DF_STYLE_CONFLICT_UNRESOLVED",
+            severity: w.severity,
+            message: w.message,
+            nodeId: id
+          });
+        }
       }
+    }
+    const namespace = component ? "component" : "html";
+    const el = createElement(id, {
+      tag,
+      namespace,
+      isComponent: component,
+      selfClosing: opening.selfClosing,
+      classes,
+      computed: computed2,
+      attrs,
+      children,
+      parent: parentId,
+      span: spanOf(node),
+      meta
     });
-    if (hasCombinator || hasStructural) {
-      complex.add(selector.toString().trim());
+    doc.nodes.set(id, el);
+    const inner = children.length > 0 ? spanOf(node.children[0]) && spanOf(node.children.at(-1)) ? {
+      file: FILE_ID,
+      start: spanOf(node.children[0]).start,
+      end: spanOf(node.children.at(-1)).end
+    } : null : null;
+    backref.set(id, {
+      nodeId: id,
+      span: spanOf(node) ?? { file: FILE_ID, start: 0, end: 0 },
+      openTagSpan: spanOf(opening),
+      closeTagSpan: node.closingElement ? spanOf(node.closingElement) : null,
+      innerSpan: inner,
+      selfClosing: opening.selfClosing
+    });
+    return id;
+  };
+  const roots = [];
+  traverse(ast, {
+    JSXElement(path3) {
+      roots.push(path3.node);
+      path3.skip();
+    },
+    JSXFragment(path3) {
+      roots.push(path3.node);
+      path3.skip();
     }
+  });
+  const rootFrag = doc.nodes.get(doc.root);
+  for (const r of roots) {
+    const id = r.type === "JSXFragment" ? buildFragment(r, doc.root) : buildElement(r, doc.root);
+    rootFrag.children.push(id);
   }
-  #addRuleEntry(token, entry) {
-    const list = this.#classIndex.get(token);
-    if (list) list.push(entry);
-    else this.#classIndex.set(token, [entry]);
+  return { doc, diagnostics };
+}
+
+// ../frontend-jsx/src/frontend.ts
+var jsxFrontend = {
+  name: "babel-jsx",
+  langs: JSX_LANGS,
+  canParse(id, code) {
+    return looksLikeJsx(id, code);
+  },
+  parse(code, ctx) {
+    return doParse(code, ctx);
   }
-  #getUsage(token) {
-    let u = this.#usage.get(token);
-    if (!u) {
-      u = {
-        referenced: false,
-        asSubject: false,
-        asAncestor: false,
-        asCompound: false,
-        asSibling: false,
-        asHasArgument: false,
-        asStructural: false,
-        loadBearing: false
-      };
-      this.#usage.set(token, u);
-    }
-    return u;
+};
+function createJsxFrontend() {
+  return jsxFrontend;
+}
+
+// ../frontend-jsx/src/backend.ts
+init_esm_shims();
+import MagicString from "magic-string";
+var JSX_LANGS2 = ["jsx", "tsx"];
+function exprText(doc, ref) {
+  const rec = doc.exprs.get(ref);
+  const payload = rec?.payload;
+  if (payload && typeof payload.text === "string") {
+    return { text: payload.text, spread: payload.spread === true };
+  }
+  if (rec) {
+    const sf = doc.sources.get(rec.span.file);
+    if (sf) return { text: sf.text.slice(rec.span.start, rec.span.end), spread: false };
+  }
+  return { text: "", spread: false };
+}
+function staticTokensOf(classes) {
+  const out = [];
+  for (const seg of classes.segments) {
+    if (seg.kind === "static") for (const t of seg.tokens) out.push(t.value);
+  }
+  return out;
+}
+function primarySource(doc) {
+  for (const sf of doc.sources.values()) {
+    if (typeof sf.text === "string" && sf.text.length > 0) return sf;
   }
-  /**
-   * Resolve a set of tokens into a normalized condition-keyed StyleMap. `tokenList` is the original
-   * class list (for per-declaration `tokenIndex` provenance); `request` is the set being resolved.
-   */
-  #resolveTokens(request, tokenList) {
-    const entries = [];
-    for (const token of new Set(request)) {
-      const list = this.#classIndex.get(token);
-      if (list) entries.push(...list);
+  return null;
+}
+function collectKept(doc) {
+  const out = [];
+  const seen = /* @__PURE__ */ new Set();
+  const visit = (id) => {
+    if (seen.has(id)) return;
+    seen.add(id);
+    const n = doc.nodes.get(id);
+    if (!n) return;
+    out.push(n);
+    if (n.kind === "element" || n.kind === "fragment") for (const c of n.children) visit(c);
+  };
+  visit(doc.root);
+  return out;
+}
+function strictlyContains(a, b) {
+  if (a.file !== b.file) return false;
+  if (a.start <= b.start && b.end <= a.end) return !(a.start === b.start && a.end === b.end);
+  return false;
+}
+function editClasses(ms, doc, sf, el) {
+  const classes = el.classes;
+  if (classes.hasDynamic || classes.opaque) return false;
+  const tokens = staticTokensOf(classes);
+  const valueSpan = classes.valueSpan;
+  if (valueSpan && valueSpan.file === sf.id) {
+    const current = sf.text.slice(valueSpan.start, valueSpan.end);
+    const quote = current.startsWith("'") ? "'" : '"';
+    const next = `${quote}${tokens.join(" ")}${quote}`;
+    if (current !== next) {
+      ms.overwrite(valueSpan.start, valueSpan.end, next);
+      return true;
     }
-    if (entries.length === 0) return emptyStyleMap();
-    entries.sort((a, b) => a.order - b.order);
-    const acc = /* @__PURE__ */ new Map();
-    for (const entry of entries) {
-      const key = conditionKey(entry.condition);
-      let block = acc.get(key);
-      if (!block) {
-        block = { condition: entry.condition, decls: /* @__PURE__ */ new Map() };
-        acc.set(key, block);
-      }
-      const tokenIndex = tokenList.indexOf(entry.token);
-      const origin = { kind: "class", tokenIndex, className: entry.token };
-      for (const [prop, value, important] of entry.decls) {
-        for (const decl of normalizer.normalizeDeclaration(prop, value, important)) {
-          block.decls.set(decl.property, { ...decl, origin });
+    return false;
+  }
+  if (tokens.length === 0) return false;
+  if (el.isComponent) return false;
+  const back = doc.backref.get(el.id);
+  const openTag = back?.openTagSpan;
+  if (!openTag || openTag.file !== sf.id) return false;
+  const insertAt = openTag.start + 1 + el.tag.length;
+  ms.appendLeft(insertAt, ` className="${tokens.join(" ")}"`);
+  return true;
+}
+function extractKeyAttr(openTag) {
+  const m = /(^|\s)key\s*=\s*/.exec(openTag);
+  if (!m) return null;
+  const keyStart = m.index + m[1].length;
+  let i = m.index + m[0].length;
+  const ch = openTag[i];
+  if (ch === "{") {
+    let depth = 0;
+    for (; i < openTag.length; i += 1) {
+      const c = openTag[i];
+      if (c === "{") depth += 1;
+      else if (c === "}") {
+        depth -= 1;
+        if (depth === 0) {
+          i += 1;
+          break;
         }
       }
     }
-    const rawBlocks = /* @__PURE__ */ new Map();
-    for (const [key, block] of acc) {
-      if (block.decls.size === 0) continue;
-      rawBlocks.set(key, { condition: block.condition, decls: block.decls });
-    }
-    if (rawBlocks.size === 0) return emptyStyleMap();
-    return normalizer.normalizeStyleMap({ blocks: rawBlocks });
-  }
-  /** Build (once) the reverse index used by {@link emit}. */
-  #reverseIndex() {
-    if (this.#reverse) return this.#reverse;
-    const out = [];
-    for (const token of this.#classIndex.keys()) {
-      const styles = this.#resolveTokens([token], [token]);
-      const keyed = /* @__PURE__ */ new Map();
-      for (const [ck, block] of styles.blocks) {
-        for (const [prop, decl] of block.decls) keyed.set(`${ck}\0${prop}`, String(decl.value));
+  } else if (ch === '"' || ch === "'") {
+    const q = ch;
+    i += 1;
+    for (; i < openTag.length; i += 1) {
+      if (openTag[i] === q) {
+        i += 1;
+        break;
       }
-      if (keyed.size > 0) out.push({ token, keyed });
     }
-    out.sort((a, b) => b.keyed.size - a.keyed.size);
-    this.#reverse = out;
-    return out;
+  } else {
+    for (; i < openTag.length; i += 1) {
+      if (/[\s>/]/.test(openTag[i])) break;
+    }
   }
-};
-function createCssResolver(cssFiles = [], options) {
-  return new CustomCSSResolver(cssFiles, options);
+  return openTag.slice(keyStart, i);
 }
-function splitCompounds(selector) {
-  const compounds = [];
-  let current = [];
-  let leftCombinator = null;
-  for (const node of selector.nodes) {
-    if (sp.isCombinator(node)) {
-      compounds.push({ leftCombinator, nodes: current });
-      current = [];
-      leftCombinator = combinatorValue(node);
+function transferKeyOnUnwrap(ms, doc, sf, region, kept) {
+  const open = region.openTagSpan;
+  if (!open || open.file !== sf.id) return;
+  const keyAttr = extractKeyAttr(sf.text.slice(open.start, open.end));
+  if (!keyAttr) return;
+  const inside = [];
+  for (const n of kept) {
+    if (n.kind !== "element" || !n.span || n.span.file !== sf.id) continue;
+    if (strictlyContains(region.span, n.span)) inside.push(n);
+  }
+  const maximal = inside.filter(
+    (n) => !inside.some((o) => o !== n && o.span && n.span && strictlyContains(o.span, n.span))
+  );
+  if (maximal.length !== 1) return;
+  const child = maximal[0];
+  const childOpen = doc.backref.get(child.id)?.openTagSpan;
+  if (!childOpen || childOpen.file !== sf.id) return;
+  if (extractKeyAttr(sf.text.slice(childOpen.start, childOpen.end))) return;
+  ms.appendLeft(childOpen.start + 1 + child.tag.length, ` ${keyAttr}`);
+}
+function surgicalPrint(doc) {
+  const sf = primarySource(doc);
+  if (!sf) return null;
+  const ms = new MagicString(sf.text);
+  const kept = collectKept(doc);
+  const keptSpans = [];
+  for (const n of kept) if (n.span && n.span.file === sf.id) keptSpans.push(n.span);
+  const removed = [];
+  for (const id of backrefIds(doc)) {
+    if (doc.nodes.has(id)) continue;
+    const back = doc.backref.get(id);
+    if (!back || back.span.file !== sf.id) continue;
+    const unwrapped = keptSpans.some((k) => strictlyContains(back.span, k));
+    removed.push({ backref: back, unwrapped });
+  }
+  const fullRemovals = removed.filter((r) => !r.unwrapped).map((r) => r.backref.span);
+  for (const r of removed) {
+    const span = r.backref.span;
+    const coveredByFull = fullRemovals.some((f) => f !== span && strictlyContains(f, span));
+    if (coveredByFull) continue;
+    if (r.unwrapped) {
+      transferKeyOnUnwrap(ms, doc, sf, r.backref, kept);
+      const open = r.backref.openTagSpan;
+      const close = r.backref.closeTagSpan;
+      if (open && open.file === sf.id && open.end > open.start) ms.remove(open.start, open.end);
+      if (close && close.file === sf.id && close.end > close.start) {
+        ms.remove(close.start, close.end);
+      }
     } else {
-      current.push(node);
+      ms.remove(span.start, span.end);
     }
   }
-  compounds.push({ leftCombinator, nodes: current });
-  return compounds;
-}
-function combinatorValue(node) {
-  const v = node.value;
-  return v.trim() === "" ? " " : v.trim();
+  for (const n of kept) {
+    if (n.kind === "element") editClasses(ms, doc, sf, n);
+  }
+  return ms.toString();
 }
-function pseudoName(node) {
-  return node.value.toLowerCase();
+function backrefIds(doc) {
+  const out = [];
+  const max = doc.alloc.peek;
+  for (let i = 1; i < max; i += 1) {
+    const id = i;
+    if (doc.backref.get(id)) out.push(id);
+  }
+  return out;
 }
-function isPseudoElement(node) {
-  return sp.isPseudoElement(node) || LEGACY_PSEUDO_ELEMENTS2.has(pseudoName(node));
+function classText(doc, classes) {
+  if (classes.form === "absent" || classes.segments.length === 0) return null;
+  const dynamic = classes.segments.find((s) => s.kind === "dynamic");
+  if (dynamic && dynamic.kind === "dynamic") {
+    return `className={${exprText(doc, dynamic.expr).text}}`;
+  }
+  const tokens = staticTokensOf(classes);
+  return `className="${tokens.join(" ")}"`;
 }
-function normalizePseudoElement(node) {
-  const name = pseudoName(node);
-  return name.startsWith("::") ? name : `::${name.replace(/^:/, "")}`;
+function attrText(doc, name, value) {
+  if (value.kind === "static") {
+    if (value.value === true) return name;
+    if (value.value === false) return "";
+    return `${name}="${String(value.value)}"`;
+  }
+  return `${name}={${exprText(doc, value.expr).text}}`;
 }
-function mediaContext(rule) {
+function printElement(doc, el) {
   const parts = [];
-  let skip = false;
-  let parent = rule.parent;
-  while (parent && parent.type === "atrule") {
-    const at = parent;
-    const name = at.name.toLowerCase();
-    if (name === "media") parts.unshift(at.params.trim().replace(/\s+/g, " "));
-    else if (name === "keyframes" || name.endsWith("keyframes") || name === "font-face") skip = true;
-    parent = parent.parent;
+  const cls = classText(doc, el.classes);
+  if (cls !== null) parts.push(cls);
+  for (const name of el.attrs.order) {
+    const v = el.attrs.entries.get(name);
+    if (!v) continue;
+    const text = attrText(doc, name, v);
+    if (text.length > 0) parts.push(text);
   }
-  return { media: parts.join(" and "), skip };
+  for (const ref of el.attrs.spreads) parts.push(`{...${exprText(doc, ref).text}}`);
+  const attrStr = parts.length > 0 ? ` ${parts.join(" ")}` : "";
+  const tag = el.tag;
+  if (el.children.length === 0) {
+    return el.selfClosing ? `<${tag}${attrStr} />` : `<${tag}${attrStr}></${tag}>`;
+  }
+  const inner = el.children.map((c) => printNode(doc, c)).join("");
+  return `<${tag}${attrStr}>${inner}</${tag}>`;
 }
-function collectDecls(rule) {
-  const out = [];
-  for (const node of rule.nodes) {
-    if (node.type === "decl") out.push([node.prop, node.value, node.important === true]);
+function printNode(doc, id) {
+  const node = doc.nodes.get(id);
+  if (!node) return "";
+  switch (node.kind) {
+    case "text":
+      return node.value;
+    case "comment":
+      return `{/*${node.value}*/}`;
+    case "expr": {
+      const { text, spread } = exprText(doc, node.expr);
+      return spread ? `{...${text}}` : `{${text}}`;
+    }
+    case "fragment":
+      return `<>${node.children.map((c) => printNode(doc, c)).join("")}</>`;
+    case "element":
+      return printElement(doc, node);
   }
-  return out;
 }
-function isPlainClassToken(token) {
-  return token.length > 0 && !/[\s.#>+~:[\]()]/.test(token);
+function rePrint(doc) {
+  const root = doc.nodes.get(doc.root);
+  if (!root || root.kind !== "fragment") return printNode(doc, doc.root);
+  return root.children.map((c) => printNode(doc, c)).join("");
 }
-function readCssPath(path3) {
-  try {
-    return { id: path3, css: readFileSync(path3, "utf8") };
-  } catch (cause) {
-    throw new Error(`resolver-css: cannot read CSS file "${path3}"`, { cause });
-  }
+function doPrint(doc) {
+  const surgical = surgicalPrint(doc);
+  return surgical ?? rePrint(doc);
 }
-function deriveFingerprint(provider, files) {
-  const parts = files.map((f) => `${f.id}:${f.css.length}`).sort();
-  return `${provider}/${ENGINE_VERSION}::${parts.join("|")}`;
+var jsxBackend = {
+  name: "babel-jsx",
+  langs: JSX_LANGS2,
+  print(doc, _plan, _ctx) {
+    const code = doPrint(doc);
+    return { code, map: null, edits: [], diagnostics: [] };
+  }
+};
+function createJsxBackend() {
+  return jsxBackend;
 }
 
+// ../frontend-jsx/src/index.ts
+init_esm_shims();
+
 export {
+  displayContentsWrapper,
   emptyStyleDiv,
   flexCenterWrapper,
+  inlineFlexCenterWrapper,
   nestedFlexMerge,
+  nestedGridMerge,
   passthroughWrapper,
   redundantFragment,
+  redundantInlineWrapper,
+  borderRadiusShorthand,
+  borderShorthand,
   dedupeClasses,
+  gapShorthand,
   insetShorthand,
   marginShorthand,
+  overflowShorthand,
+  overscrollBehaviorShorthand,
   paddingShorthand,
+  placeShorthand,
+  scrollMarginShorthand,
+  scrollPaddingShorthand,
   sizeShorthand,
   builtinPatterns,
-  createJsxFrontend,
-  createJsxBackend,
   createTailwindResolver,
-  createCssResolver
+  createCssResolver,
+  createJsxFrontend,
+  createJsxBackend
 };
-//# sourceMappingURL=chunk-4HHISSMR.js.map
+//# sourceMappingURL=chunk-DNHOGPYV.js.map