@nuvio/ast-engine 0.1.0 → 0.5.1

package/dist/index.d.ts

@@ -1,5 +1,19 @@
 import { PatchOp } from '@nuvio/shared';
 
+type ClassNameMode = "literal-only" | "cn-basic";
+type Breakpoint = "base" | "sm" | "md" | "lg" | "xl";
+type BreakpointBuckets = {
+    base: string[];
+    sm: string[];
+    md: string[];
+    lg: string[];
+    xl: string[];
+    passthrough: string[];
+};
+declare function parseClassNameByBreakpoint(className: string): BreakpointBuckets;
+declare function mergeAtBreakpoint(className: string, fragment: string, activeBreakpoint: Breakpoint): string;
+/** Strip allowlisted utilities from the active breakpoint (inverse of mergeAtBreakpoint). */
+declare function removeAtBreakpoint(className: string, fragment: string, activeBreakpoint: Breakpoint): string;
 type ApplyPatchToSourceResult = {
     ok: true;
     source: string;
@@ -12,7 +26,10 @@ type ApplyPatchToSourceResult = {
 /**
  * Apply Phase 2 patch operations to TSX/JSX source for a single `data-nuvio-id` host.
  */
-declare function applyPatchToSource(source: string, filePath: string, hostId: string, ops: readonly PatchOp[]): Promise<ApplyPatchToSourceResult>;
+declare function applyPatchToSource(source: string, filePath: string, hostId: string, ops: readonly PatchOp[], options?: {
+    classNameMode?: ClassNameMode;
+    activeBreakpoint?: Breakpoint;
+}): Promise<ApplyPatchToSourceResult>;
 
 /**
  * Phase 2 — conservative Tailwind v3-style allowlist for `mergeTailwindClassName`.
@@ -20,4 +37,4 @@ declare function applyPatchToSource(source: string, filePath: string, hostId: st
  */
 declare function validateTailwindFragment(fragment: string): void;
 
-export { type ApplyPatchToSourceResult, applyPatchToSource, validateTailwindFragment };
+export { type ApplyPatchToSourceResult, applyPatchToSource, mergeAtBreakpoint, parseClassNameByBreakpoint, removeAtBreakpoint, validateTailwindFragment };

package/dist/index.js

@@ -1,8 +1,8 @@
 // src/apply-patch.ts
-import { createRequire } from "module";
+import { createRequire as createRequire2 } from "module";
 import path from "path";
-import { parse } from "@babel/parser";
-import * as t from "@babel/types";
+import { parse as parse2 } from "@babel/parser";
+import * as t2 from "@babel/types";
 import prettier from "prettier";
 import { twMerge } from "tailwind-merge";
 
@@ -17,8 +17,13 @@ var BG_COLOR_OPACITY = /^bg-(slate|sky|neutral)-(800|900|950)\/(50|75|80)$/;
 var ROUNDED = /^rounded$|^rounded-(none|sm|md|lg|xl|2xl|3xl|full)$/;
 var LAYOUT = /^(flex|inline-flex|block|inline|inline-block|grid|inline-grid|hidden|contents)$/;
 var FLEX = /^(flex-row|flex-col|flex-wrap|flex-1|grow|shrink|basis-0|items-(start|end|center|baseline|stretch)|justify-(start|end|center|between|around|evenly))$/;
+var GRID_COLS = /^grid-cols-(1|2|3|4|5|6|7|8|9|10|11|12)$/;
 var BORDER_W = /^border(-(0|2|4|8))?$/;
+var BORDER_COLOR = /^border-(inherit|current|transparent|black|white|(slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(50|100|200|300|400|500|600|700|800|900|950))$/;
+var RING = /^ring(-(0|1|2|4|8))?$/;
+var RING_COLOR = /^ring-(inherit|current|transparent|black|white|(slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(50|100|200|300|400|500|600|700|800|900|950))$/;
 var TEXT_ALIGN = /^text-(left|center|right|justify|start|end)$/;
+var TRACKING = /^tracking-(tighter|tight|normal|wide|wider|widest)$/;
 var OPACITY = /^opacity-(0|5|10|15|20|25|30|40|50|60|70|75|80|90|95|100)$/;
 var SHADOW = /^shadow$|^shadow-(sm|md|lg|xl|2xl|inner|none)$/;
 var W_WIDTH = /^w-(auto|full|screen|min|max|fit|px|0|0\.5|1|1\.5|2|2\.5|3|3\.5|4|5|6|7|8|9|10|11|12|14|16|20|24|28|32|36|40|44|48|52|56|60|64|72|80|96|1\/2|1\/3|2\/3|1\/4|3\/4)$/;
@@ -31,33 +36,136 @@ function normalizeTailwindToken(raw) {
 function validateTailwindFragment(fragment) {
   const tokens = fragment.trim().split(/\s+/).filter(Boolean);
   for (const raw of tokens) {
-    const t2 = normalizeTailwindToken(raw);
-    if (!t2) {
+    const t3 = normalizeTailwindToken(raw);
+    if (!t3) {
       continue;
     }
-    if (SPACING.test(t2) || TEXT_SIZE.test(t2) || FONT_WEIGHT.test(t2) || LEADING.test(t2) || COLOR_SOLID.test(t2) || COLOR_SCALE.test(t2) || BG_COLOR_OPACITY.test(t2) || ROUNDED.test(t2) || LAYOUT.test(t2) || FLEX.test(t2) || BORDER_W.test(t2) || TEXT_ALIGN.test(t2) || OPACITY.test(t2) || SHADOW.test(t2) || W_WIDTH.test(t2) || H_HEIGHT.test(t2) || MAX_W.test(t2) || MIN_H.test(t2)) {
+    if (SPACING.test(t3) || TEXT_SIZE.test(t3) || FONT_WEIGHT.test(t3) || LEADING.test(t3) || COLOR_SOLID.test(t3) || COLOR_SCALE.test(t3) || BG_COLOR_OPACITY.test(t3) || ROUNDED.test(t3) || LAYOUT.test(t3) || FLEX.test(t3) || GRID_COLS.test(t3) || BORDER_W.test(t3) || BORDER_COLOR.test(t3) || RING.test(t3) || RING_COLOR.test(t3) || TEXT_ALIGN.test(t3) || TRACKING.test(t3) || OPACITY.test(t3) || SHADOW.test(t3) || W_WIDTH.test(t3) || H_HEIGHT.test(t3) || MAX_W.test(t3) || MIN_H.test(t3)) {
       continue;
     }
-    throw new Error(`Unknown or disallowed Tailwind utility: ${t2}`);
+    throw new Error(`Unknown or disallowed Tailwind utility: ${t3}`);
   }
 }
 
-// src/apply-patch.ts
+// src/set-table-data-field.ts
+import { parse } from "@babel/parser";
+import * as t from "@babel/types";
+import { createRequire } from "module";
 var require2 = createRequire(import.meta.url);
 var traverse = require2("@babel/traverse").default;
-var generate = require2("@babel/generator").default;
+function applySetTableDataField(ast, arrayName, rowKey, field, value) {
+  let updated = false;
+  traverse(ast, {
+    VariableDeclarator(path2) {
+      if (updated || !t.isIdentifier(path2.node.id) || path2.node.id.name !== arrayName) {
+        return;
+      }
+      if (!t.isArrayExpression(path2.node.init)) {
+        return;
+      }
+      for (const el of path2.node.init.elements) {
+        if (!el || !t.isObjectExpression(el)) {
+          continue;
+        }
+        let idValue = null;
+        for (const prop of el.properties) {
+          if (!t.isObjectProperty(prop) || !t.isIdentifier(prop.key)) {
+            continue;
+          }
+          if (prop.key.name === "id" && t.isNumericLiteral(prop.value)) {
+            idValue = String(prop.value.value);
+          }
+        }
+        if (idValue !== rowKey) {
+          continue;
+        }
+        for (const prop of el.properties) {
+          if (!t.isObjectProperty(prop) || !t.isIdentifier(prop.key)) {
+            continue;
+          }
+          if (prop.key.name !== field) {
+            continue;
+          }
+          if (t.isStringLiteral(prop.value)) {
+            prop.value.value = value;
+            updated = true;
+            path2.stop();
+            return;
+          }
+        }
+      }
+    }
+  });
+  if (!updated) {
+    throw new Error(
+      `No ${arrayName} entry with id=${rowKey} and string field "${field}" found in source`
+    );
+  }
+}
+
+// src/apply-patch.ts
+var require3 = createRequire2(import.meta.url);
+var traverse2 = require3("@babel/traverse").default;
+var generate = require3("@babel/generator").default;
+function extractRowKeysFromSource(ast) {
+  const keys = [];
+  traverse2(ast, {
+    VariableDeclarator(path2) {
+      if (!t2.isIdentifier(path2.node.id) || path2.node.id.name !== "tableData") {
+        return;
+      }
+      if (!t2.isArrayExpression(path2.node.init)) {
+        return;
+      }
+      for (const el of path2.node.init.elements) {
+        if (!el || !t2.isObjectExpression(el)) {
+          continue;
+        }
+        for (const prop of el.properties) {
+          if (t2.isObjectProperty(prop) && t2.isIdentifier(prop.key, { name: "id" }) && t2.isNumericLiteral(prop.value)) {
+            keys.push(String(prop.value.value));
+          }
+        }
+      }
+    }
+  });
+  return keys;
+}
+function templateLiteralMatchesHostId(attr, hostId, rowKeys) {
+  if (!t2.isJSXExpressionContainer(attr.value)) {
+    return false;
+  }
+  const expr = attr.value.expression;
+  if (!t2.isTemplateLiteral(expr) || expr.expressions.length !== 1) {
+    return false;
+  }
+  const ex = expr.expressions[0];
+  const mapOk = t2.isIdentifier(ex, { name: "product" }) || t2.isIdentifier(ex, { name: "item" }) || t2.isMemberExpression(ex) && !ex.computed && t2.isIdentifier(ex.object, { name: "product" }) && t2.isIdentifier(ex.property, { name: "id" });
+  if (!mapOk) {
+    return false;
+  }
+  const prefix = expr.quasis[0]?.value.cooked ?? "";
+  const suffix = expr.quasis[1]?.value.cooked ?? "";
+  return rowKeys.some((key) => `${prefix}${key}${suffix}` === hostId);
+}
 function findHostOpening(ast, hostId) {
+  const rowKeys = extractRowKeysFromSource(ast);
   let found = null;
-  traverse(ast, {
+  traverse2(ast, {
     JSXOpeningElement(path2) {
       for (const attr of path2.node.attributes) {
-        if (!t.isJSXAttribute(attr)) {
+        if (!t2.isJSXAttribute(attr)) {
           continue;
         }
-        if (!t.isJSXIdentifier(attr.name, { name: "data-nuvio-id" })) {
+        if (!t2.isJSXIdentifier(attr.name, { name: "data-nuvio-id" })) {
           continue;
         }
-        if (t.isStringLiteral(attr.value) && attr.value.value === hostId) {
+        if (t2.isStringLiteral(attr.value) && attr.value.value === hostId) {
+          found = path2;
+          path2.stop();
+          return;
+        }
+        if (rowKeys.length > 0 && templateLiteralMatchesHostId(attr, hostId, rowKeys)) {
           found = path2;
           path2.stop();
           return;
@@ -75,41 +183,189 @@ function applySetText(openingPath, text) {
   const jsx = parent;
   const { children } = jsx.node;
   if (children.length === 0) {
-    jsx.node.children = [t.jsxText(text)];
+    jsx.node.children = [t2.jsxText(text)];
     return;
   }
-  if (children.length === 1 && t.isJSXText(children[0])) {
+  if (children.length === 1 && t2.isJSXText(children[0])) {
     children[0].value = text;
     return;
   }
-  if (children.length === 1 && t.isJSXExpressionContainer(children[0]) && t.isStringLiteral(children[0].expression)) {
+  if (children.length === 1 && t2.isJSXExpressionContainer(children[0]) && t2.isStringLiteral(children[0].expression)) {
     children[0].expression.value = text;
     return;
   }
-  jsx.node.children = [t.jsxText(text)];
+  jsx.node.children = [t2.jsxText(text)];
+}
+function emptyBreakpointBuckets() {
+  return {
+    base: [],
+    sm: [],
+    md: [],
+    lg: [],
+    xl: [],
+    passthrough: []
+  };
+}
+function classifyTokenByBreakpoint(token) {
+  if (!token.includes(":")) {
+    return { bp: "base", value: token };
+  }
+  const m = token.match(/^(sm|md|lg|xl):(.*)$/);
+  if (!m) {
+    return { bp: "passthrough", value: token };
+  }
+  if (!m[2] || m[2].includes(":")) {
+    return { bp: "passthrough", value: token };
+  }
+  return { bp: m[1], value: m[2] };
+}
+function parseClassNameByBreakpoint(className) {
+  const buckets = emptyBreakpointBuckets();
+  const tokens = className.trim().split(/\s+/).filter(Boolean);
+  for (const tok of tokens) {
+    const parsed = classifyTokenByBreakpoint(tok);
+    if (parsed.bp === "passthrough") {
+      buckets.passthrough.push(parsed.value);
+      continue;
+    }
+    buckets[parsed.bp].push(parsed.value);
+  }
+  return buckets;
+}
+function prefixTokenForBreakpoint(token, bp) {
+  return bp === "base" ? token : `${bp}:${token}`;
+}
+var BREAKPOINT_ORDER = ["base", "sm", "md", "lg", "xl"];
+function serializeClassNameFromBuckets(buckets) {
+  const out = [];
+  const mergedBase = buckets.base.join(" ").trim();
+  if (mergedBase) {
+    out.push(mergedBase);
+  }
+  for (const bp of BREAKPOINT_ORDER.slice(1)) {
+    const merged = buckets[bp].join(" ").trim();
+    if (merged) {
+      out.push(
+        ...merged.split(/\s+/).filter(Boolean).map((t3) => prefixTokenForBreakpoint(t3, bp))
+      );
+    }
+  }
+  out.push(...buckets.passthrough);
+  return out.join(" ").trim();
+}
+function flattenTokensAtBreakpointFromBuckets(buckets, activeBreakpoint) {
+  const idx = BREAKPOINT_ORDER.indexOf(activeBreakpoint);
+  const out = [];
+  for (const tok of buckets.passthrough) {
+    if (/^dark:/.test(tok)) {
+      out.push(tok.replace(/^dark:/, ""));
+    }
+  }
+  for (let i = 0; i <= idx; i++) {
+    out.push(...buckets[BREAKPOINT_ORDER[i]]);
+  }
+  for (const tok of buckets.passthrough) {
+    if (!/^dark:/.test(tok)) {
+      out.push(tok);
+    }
+  }
+  return out;
+}
+function mergeAtBreakpoint(className, fragment, activeBreakpoint) {
+  const buckets = parseClassNameByBreakpoint(className);
+  const incomingBuckets = emptyBreakpointBuckets();
+  for (const tok of fragment.trim().split(/\s+/).filter(Boolean)) {
+    const parsed = classifyTokenByBreakpoint(tok);
+    if (parsed.bp === "passthrough") {
+      incomingBuckets.passthrough.push(parsed.value);
+      continue;
+    }
+    const targetBp = parsed.bp === "base" ? activeBreakpoint : parsed.bp;
+    incomingBuckets[targetBp].push(parsed.value);
+  }
+  const mergedBase = twMerge(buckets.base.join(" "), incomingBuckets.base.join(" ")).trim();
+  const mergedSm = twMerge(buckets.sm.join(" "), incomingBuckets.sm.join(" ")).trim();
+  const mergedMd = twMerge(buckets.md.join(" "), incomingBuckets.md.join(" ")).trim();
+  const mergedLg = twMerge(buckets.lg.join(" "), incomingBuckets.lg.join(" ")).trim();
+  const mergedXl = twMerge(buckets.xl.join(" "), incomingBuckets.xl.join(" ")).trim();
+  return serializeClassNameFromBuckets({
+    base: mergedBase ? mergedBase.split(/\s+/).filter(Boolean) : [],
+    sm: mergedSm ? mergedSm.split(/\s+/).filter(Boolean) : [],
+    md: mergedMd ? mergedMd.split(/\s+/).filter(Boolean) : [],
+    lg: mergedLg ? mergedLg.split(/\s+/).filter(Boolean) : [],
+    xl: mergedXl ? mergedXl.split(/\s+/).filter(Boolean) : [],
+    passthrough: [...buckets.passthrough, ...incomingBuckets.passthrough]
+  });
+}
+function removeAtBreakpoint(className, fragment, activeBreakpoint) {
+  const buckets = parseClassNameByBreakpoint(className);
+  const toRemove = fragment.trim().split(/\s+/).filter(Boolean);
+  if (toRemove.length === 0) {
+    return className.trim();
+  }
+  const idx = BREAKPOINT_ORDER.indexOf(activeBreakpoint);
+  for (const tok of toRemove) {
+    buckets[activeBreakpoint] = buckets[activeBreakpoint].filter((t3) => t3 !== tok);
+    const stillPresent = flattenTokensAtBreakpointFromBuckets(buckets, activeBreakpoint).includes(tok);
+    if (stillPresent) {
+      for (let i = idx; i >= 0; i--) {
+        const bp = BREAKPOINT_ORDER[i];
+        if (buckets[bp].includes(tok)) {
+          buckets[bp] = buckets[bp].filter((t3) => t3 !== tok);
+          break;
+        }
+      }
+    }
+  }
+  return serializeClassNameFromBuckets(buckets);
 }
-function readStringLiteralClassName(opening) {
+function getClassNameBinding(opening, classNameMode) {
   for (const attr of opening.attributes) {
-    if (t.isJSXAttribute(attr) && t.isJSXIdentifier(attr.name, { name: "className" })) {
-      if (t.isStringLiteral(attr.value)) {
-        return attr.value.value;
+    if (t2.isJSXAttribute(attr) && t2.isJSXIdentifier(attr.name, { name: "className" })) {
+      if (t2.isStringLiteral(attr.value)) {
+        const literal = attr.value;
+        return {
+          read: () => literal.value,
+          write: (next) => {
+            attr.value = t2.stringLiteral(next);
+          }
+        };
+      }
+      if (classNameMode === "cn-basic" && t2.isJSXExpressionContainer(attr.value) && t2.isCallExpression(attr.value.expression) && (t2.isIdentifier(attr.value.expression.callee) && (attr.value.expression.callee.name === "cn" || attr.value.expression.callee.name === "clsx") || false)) {
+        const call = attr.value.expression;
+        if (call.arguments.every((arg) => t2.isStringLiteral(arg))) {
+          return {
+            read: () => call.arguments.map((arg) => arg.value).join(" "),
+            write: (next) => {
+              call.arguments = [t2.stringLiteral(next)];
+            }
+          };
+        }
       }
       return null;
     }
   }
-  return "";
+  return {
+    read: () => "",
+    write: (next) => {
+      opening.attributes.push(
+        t2.jsxAttribute(t2.jsxIdentifier("className"), t2.stringLiteral(next))
+      );
+    }
+  };
 }
 function parentSupportsLayoutMoves(parentOpening) {
-  const cls = readStringLiteralClassName(parentOpening);
-  if (cls === null) {
+  const binding = getClassNameBinding(parentOpening, "literal-only");
+  if (!binding) {
     return false;
   }
+  const cls = binding.read();
   return /\b(flex|inline-flex|grid|inline-grid)\b/.test(cls) || /\b(flex-|grid-)/.test(cls);
 }
 function collectJsxElementChildIndices(parent) {
   const indices = [];
   parent.children.forEach((child, i) => {
-    if (t.isJSXElement(child)) {
+    if (t2.isJSXElement(child)) {
       indices.push(i);
     }
   });
@@ -151,34 +407,34 @@ function applyMoveSibling(openingPath, direction) {
   parent.children[hostIndex] = parent.children[swapIndex];
   parent.children[swapIndex] = hostNode;
 }
-function applySetHidden(openingPath, hidden) {
+function applySetHidden(openingPath, hidden, classNameMode, activeBreakpoint) {
   if (hidden) {
-    applyMergeClassName(openingPath, "hidden");
+    applyMergeClassName(openingPath, "hidden", classNameMode, activeBreakpoint);
     return;
   }
   const opening = openingPath.node;
   let clsAttr;
   for (const attr of opening.attributes) {
-    if (t.isJSXAttribute(attr) && t.isJSXIdentifier(attr.name, { name: "className" })) {
+    if (t2.isJSXAttribute(attr) && t2.isJSXIdentifier(attr.name, { name: "className" })) {
       clsAttr = attr;
       break;
     }
   }
-  if (!clsAttr || !t.isStringLiteral(clsAttr.value)) {
+  if (!clsAttr || !t2.isStringLiteral(clsAttr.value)) {
     return;
   }
   const tokens = clsAttr.value.value.split(/\s+/).filter((tok) => tok && tok !== "hidden");
-  clsAttr.value = t.stringLiteral(twMerge(tokens.join(" ")));
+  clsAttr.value = t2.stringLiteral(twMerge(tokens.join(" ")));
 }
 function collectNuvioIds(ast) {
   const ids = /* @__PURE__ */ new Set();
-  traverse(ast, {
+  traverse2(ast, {
     JSXOpeningElement(path2) {
       for (const attr of path2.node.attributes) {
-        if (!t.isJSXAttribute(attr) || !t.isJSXIdentifier(attr.name, { name: "data-nuvio-id" })) {
+        if (!t2.isJSXAttribute(attr) || !t2.isJSXIdentifier(attr.name, { name: "data-nuvio-id" })) {
           continue;
         }
-        if (t.isStringLiteral(attr.value)) {
+        if (t2.isStringLiteral(attr.value)) {
           ids.add(attr.value.value);
         }
       }
@@ -188,17 +444,41 @@ function collectNuvioIds(ast) {
 }
 function setNuvioIdOnOpening(opening, id) {
   for (const attr of opening.attributes) {
-    if (t.isJSXAttribute(attr) && t.isJSXIdentifier(attr.name, { name: "data-nuvio-id" })) {
-      if (t.isStringLiteral(attr.value)) {
+    if (t2.isJSXAttribute(attr) && t2.isJSXIdentifier(attr.name, { name: "data-nuvio-id" })) {
+      if (t2.isStringLiteral(attr.value)) {
         attr.value.value = id;
         return;
       }
     }
   }
   opening.attributes.push(
-    t.jsxAttribute(t.jsxIdentifier("data-nuvio-id"), t.stringLiteral(id))
+    t2.jsxAttribute(t2.jsxIdentifier("data-nuvio-id"), t2.stringLiteral(id))
   );
 }
+function remapDescendantNuvioIds(element, taken) {
+  const stack = [];
+  for (const child of element.children) {
+    if (t2.isJSXElement(child)) {
+      stack.push(child);
+    }
+  }
+  while (stack.length > 0) {
+    const el = stack.pop();
+    for (const attr of el.openingElement.attributes) {
+      if (!t2.isJSXAttribute(attr) || !t2.isJSXIdentifier(attr.name, { name: "data-nuvio-id" }) || !t2.isStringLiteral(attr.value)) {
+        continue;
+      }
+      const nextId = uniqueDuplicateId(attr.value.value, taken);
+      attr.value.value = nextId;
+      taken.add(nextId);
+    }
+    for (const child of el.children) {
+      if (t2.isJSXElement(child)) {
+        stack.push(child);
+      }
+    }
+  }
+}
 function uniqueDuplicateId(baseId, taken) {
   const candidate = `${baseId}.copy`;
   if (!taken.has(candidate)) {
@@ -221,11 +501,13 @@ function applyDuplicateHost(ast, openingPath, hostId) {
   }
   const taken = collectNuvioIds(ast);
   const newId = uniqueDuplicateId(hostId, taken);
-  const clone = t.cloneNode(hostPath.node, true);
-  if (!t.isJSXElement(clone)) {
+  const clone = t2.cloneNode(hostPath.node, true);
+  if (!t2.isJSXElement(clone)) {
     throw new Error("Failed to clone host element");
   }
   setNuvioIdOnOpening(clone.openingElement, newId);
+  taken.add(newId);
+  remapDescendantNuvioIds(clone, taken);
   const parent = parentPath.node;
   const hostIndex = parent.children.indexOf(hostPath.node);
   if (hostIndex < 0) {
@@ -234,32 +516,36 @@ function applyDuplicateHost(ast, openingPath, hostId) {
   parent.children.splice(hostIndex + 1, 0, clone);
   return newId;
 }
-function applyMergeClassName(openingPath, fragment) {
+function applyMergeClassName(openingPath, fragment, classNameMode, activeBreakpoint) {
   validateTailwindFragment(fragment);
   const opening = openingPath.node;
-  let clsAttr;
-  for (const attr of opening.attributes) {
-    if (t.isJSXAttribute(attr) && t.isJSXIdentifier(attr.name, { name: "className" })) {
-      clsAttr = attr;
-      break;
-    }
-  }
-  if (!clsAttr) {
-    opening.attributes.push(
-      t.jsxAttribute(t.jsxIdentifier("className"), t.stringLiteral(fragment.trim()))
+  const binding = getClassNameBinding(opening, classNameMode);
+  if (!binding) {
+    throw new Error(
+      classNameMode === "cn-basic" ? "className must be a string literal or simple cn()/clsx() string list in cn-basic mode" : "className must be a string literal for Phase 2 patches"
     );
-    return;
   }
-  if (!t.isStringLiteral(clsAttr.value)) {
-    throw new Error("className must be a string literal for Phase 2 patches");
+  const current = binding.read();
+  binding.write(mergeAtBreakpoint(current, fragment.trim(), activeBreakpoint));
+}
+function applyRemoveClassName(openingPath, fragment, classNameMode, activeBreakpoint) {
+  validateTailwindFragment(fragment);
+  const opening = openingPath.node;
+  const binding = getClassNameBinding(opening, classNameMode);
+  if (!binding) {
+    throw new Error(
+      classNameMode === "cn-basic" ? "className must be a string literal or simple cn()/clsx() string list in cn-basic mode" : "className must be a string literal for Phase 2 patches"
+    );
   }
-  const current = clsAttr.value.value;
-  clsAttr.value = t.stringLiteral(twMerge(current, fragment.trim()));
+  const current = binding.read();
+  binding.write(removeAtBreakpoint(current, fragment.trim(), activeBreakpoint));
 }
-async function applyPatchToSource(source, filePath, hostId, ops) {
+async function applyPatchToSource(source, filePath, hostId, ops, options) {
+  const classNameMode = options?.classNameMode ?? "literal-only";
+  const activeBreakpoint = options?.activeBreakpoint ?? "base";
   let ast;
   try {
-    ast = parse(source, {
+    ast = parse2(source, {
       sourceType: "module",
       plugins: ["typescript", "jsx"],
       sourceFilename: filePath
@@ -267,22 +553,52 @@ async function applyPatchToSource(source, filePath, hostId, ops) {
   } catch (e) {
     return { ok: false, code: "parse_error", message: String(e) };
   }
-  const openingPath = findHostOpening(ast, hostId);
-  if (!openingPath) {
+  const tableDataOps = ops.filter((o) => o.kind === "setTableDataField");
+  const hostOps = ops.filter((o) => o.kind !== "setTableDataField");
+  const openingPath = hostOps.length > 0 ? findHostOpening(ast, hostId) : tableDataOps.length > 0 ? null : findHostOpening(ast, hostId);
+  if (hostOps.length > 0 && !openingPath) {
+    return { ok: false, code: "host_not_found", message: `No JSX host with data-nuvio-id="${hostId}"` };
+  }
+  if (ops.length === 0) {
+    return { ok: false, code: "patch_rejected", message: "No patch operations" };
+  }
+  if (hostOps.length === 0 && tableDataOps.length === 0) {
     return { ok: false, code: "host_not_found", message: `No JSX host with data-nuvio-id="${hostId}"` };
   }
   let duplicateNewId;
   try {
     for (const op of ops) {
-      if (op.kind === "setText") {
+      if (op.kind === "setTableDataField") {
+        applySetTableDataField(ast, op.arrayName, op.rowKey, op.field, op.value);
+      } else if (op.kind === "setText") {
+        if (!openingPath) {
+          throw new Error("setText requires a JSX host");
+        }
         applySetText(openingPath, op.text);
       } else if (op.kind === "mergeTailwindClassName") {
-        applyMergeClassName(openingPath, op.classNameFragment);
+        if (!openingPath) {
+          throw new Error("mergeTailwindClassName requires a JSX host");
+        }
+        applyMergeClassName(openingPath, op.classNameFragment, classNameMode, activeBreakpoint);
+      } else if (op.kind === "removeTailwindClassName") {
+        if (!openingPath) {
+          throw new Error("removeTailwindClassName requires a JSX host");
+        }
+        applyRemoveClassName(openingPath, op.classNameFragment, classNameMode, activeBreakpoint);
       } else if (op.kind === "moveSibling") {
+        if (!openingPath) {
+          throw new Error("moveSibling requires a JSX host");
+        }
         applyMoveSibling(openingPath, op.direction);
       } else if (op.kind === "setHidden") {
-        applySetHidden(openingPath, op.hidden);
+        if (!openingPath) {
+          throw new Error("setHidden requires a JSX host");
+        }
+        applySetHidden(openingPath, op.hidden, classNameMode, activeBreakpoint);
       } else if (op.kind === "duplicateHost") {
+        if (!openingPath) {
+          throw new Error("duplicateHost requires a JSX host");
+        }
         duplicateNewId = applyDuplicateHost(ast, openingPath, hostId);
       }
     }
@@ -311,12 +627,16 @@ async function applyPatchToSource(source, filePath, hostId, ops) {
         return `set text (${op.text.length} char${op.text.length === 1 ? "" : "s"})`;
       case "mergeTailwindClassName":
         return `merge className (${op.classNameFragment.trim()})`;
+      case "removeTailwindClassName":
+        return `remove className (${op.classNameFragment.trim()})`;
       case "moveSibling":
         return `move sibling ${op.direction}`;
       case "setHidden":
         return op.hidden ? "hide element" : "show element";
       case "duplicateHost":
         return duplicateNewId ? `duplicate host \u2192 ${duplicateNewId}` : "duplicate host";
+      case "setTableDataField":
+        return `update ${op.arrayName}[${op.rowKey}].${op.field}`;
     }
   });
   const diffSummary = `${base}: ${opBits.join("; ")}`;
@@ -324,5 +644,8 @@ async function applyPatchToSource(source, filePath, hostId, ops) {
 }
 export {
   applyPatchToSource,
+  mergeAtBreakpoint,
+  parseClassNameByBreakpoint,
+  removeAtBreakpoint,
   validateTailwindFragment
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuvio/ast-engine",
-  "version": "0.1.0",
+  "version": "0.5.1",
   "description": "Nuvio AST patch engine: parse TSX/JSX, apply whitelist Tailwind merges and text edits, format with Prettier.",
   "license": "MIT",
   "repository": {
@@ -41,7 +41,7 @@
     "@babel/types": "^7.26.9",
     "prettier": "^3.5.1",
     "tailwind-merge": "^2.6.0",
-    "@nuvio/shared": "0.1.0"
+    "@nuvio/shared": "0.5.1"
   },
   "devDependencies": {
     "@types/babel__traverse": "^7.20.7",