made-refine 0.2.20 → 0.3.0

package/dist/utils.mjs

@@ -320,10 +320,30 @@ function getSourceFromFiber(fiber) {
   if (fromDebugStack?.fileName) return fromDebugStack;
   return null;
 }
+var REACT_FORWARD_REF_TYPE = /* @__PURE__ */ Symbol.for("react.forward_ref");
+var REACT_MEMO_TYPE = /* @__PURE__ */ Symbol.for("react.memo");
+function resolveComponentName(type) {
+  let current = type;
+  for (let depth = 0; depth < 4 && current != null; depth++) {
+    const name = current.displayName || (typeof current === "function" ? current.name : void 0);
+    if (name) return name;
+    if (typeof current !== "object") return null;
+    if (current.$$typeof === REACT_MEMO_TYPE) {
+      current = current.type;
+      continue;
+    }
+    if (current.$$typeof === REACT_FORWARD_REF_TYPE) {
+      current = current.render;
+      continue;
+    }
+    return null;
+  }
+  return null;
+}
 function buildFrame(fiber) {
   const type = fiber?.type;
   if (typeof type !== "function" && typeof type !== "object") return null;
-  const name = type?.displayName || type?.name || null;
+  const name = resolveComponentName(type);
   if (!name || name === "Fragment") return null;
   const frame = { name };
   const source = getSourceFromFiber(fiber);
@@ -395,14 +415,7 @@ function getReactComponentInfo(element) {
   }
   return { ...getRenderStack(fiber), elementSourceFile };
 }
-var EXCLUDED_PROP_KEYS = /* @__PURE__ */ new Set([
-  "className",
-  "style",
-  "children",
-  "ref",
-  "key",
-  "render"
-]);
+var EXCLUDED_PROP_KEYS = /* @__PURE__ */ new Set(["className", "style", "children", "ref", "key", "render"]);
 function serializePropValue(value) {
   if (typeof value === "function") return "[function]";
   if (typeof value === "symbol") return void 0;
@@ -513,19 +526,7 @@ function classifyComponentFiber(fiber, frames, elementSourceFile) {
   return { isComponentPrimitive: false };
 }
 
-// src/utils.ts
-function clamp(value, min, max) {
-  if (!Number.isFinite(value)) return min;
-  if (max < min) return min;
-  return Math.max(min, Math.min(max, value));
-}
-function isInputFocused() {
-  let active = document.activeElement;
-  while (active?.shadowRoot?.activeElement) {
-    active = active.shadowRoot.activeElement;
-  }
-  return active instanceof HTMLInputElement || active instanceof HTMLTextAreaElement || active instanceof HTMLElement && active.isContentEditable;
-}
+// src/utils/computed-styles.ts
 function getComputedStyles(element) {
   const computed = window.getComputedStyle(element);
   return {
@@ -634,6 +635,255 @@ function getOriginalInlineStyles(element) {
   }
   return styles;
 }
+function getComputedTypography(element) {
+  const computed = window.getComputedStyle(element);
+  let textVerticalAlign = "flex-start";
+  if (computed.display === "flex" || computed.display === "inline-flex") {
+    const alignItems = computed.alignItems;
+    if (alignItems === "center") textVerticalAlign = "center";
+    else if (alignItems === "flex-end" || alignItems === "end") textVerticalAlign = "flex-end";
+  }
+  const lineHeight = computed.lineHeight === "normal" ? {
+    numericValue: parseFloat(computed.fontSize) * 1.2,
+    unit: "px",
+    raw: `${Math.round(parseFloat(computed.fontSize) * 1.2)}px`
+  } : parsePropertyValue(computed.lineHeight);
+  const fontSize = parseFloat(computed.fontSize);
+  let letterSpacing;
+  if (computed.letterSpacing === "normal") {
+    letterSpacing = { numericValue: 0, unit: "em", raw: "0em" };
+  } else {
+    const parsed = parsePropertyValue(computed.letterSpacing);
+    if (parsed.unit === "px" && fontSize > 0) {
+      const emValue = Math.round(parsed.numericValue / fontSize * 100) / 100;
+      letterSpacing = { numericValue: emValue, unit: "em", raw: `${emValue}em` };
+    } else {
+      letterSpacing = parsed;
+    }
+  }
+  return {
+    fontFamily: computed.fontFamily,
+    fontWeight: computed.fontWeight,
+    fontSize: parsePropertyValue(computed.fontSize),
+    lineHeight,
+    letterSpacing,
+    textAlign: computed.textAlign,
+    textVerticalAlign
+  };
+}
+function getComputedSizing(element) {
+  return {
+    width: getSizingValue(element, "width"),
+    height: getSizingValue(element, "height")
+  };
+}
+var TEXT_ELEMENT_TAGS = /* @__PURE__ */ new Set([
+  "p",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "span",
+  "label",
+  "a",
+  "strong",
+  "em",
+  "small",
+  "blockquote",
+  "li",
+  "td",
+  "th",
+  "caption",
+  "figcaption",
+  "legend",
+  "dt",
+  "dd",
+  "abbr",
+  "cite",
+  "code",
+  "pre"
+]);
+function hasDirectNonWhitespaceText(element) {
+  return Array.from(element.childNodes).some(
+    (node) => node.nodeType === Node.TEXT_NODE && Boolean(node.textContent?.trim())
+  );
+}
+var TRANSPARENT_COLOR = { hex: "000000", alpha: 0, raw: "transparent" };
+function isVisibleBorderSide(side) {
+  return side.style !== "none" && side.style !== "hidden" && parseFloat(side.width) > 0;
+}
+function hasVisibleOutline(computed) {
+  return computed.outlineStyle !== "none" && parseFloat(computed.outlineWidth) > 0;
+}
+function parseVisibleColor(value, fallbackCurrentColor) {
+  const raw = value.trim();
+  const lowered = raw.toLowerCase();
+  if (!raw || lowered === "none" || lowered === "transparent") {
+    return null;
+  }
+  const resolved = /^currentcolor$/i.test(raw) ? fallbackCurrentColor ?? raw : raw;
+  const parsed = parseColorValue(resolved);
+  if (parsed.alpha <= 0) {
+    return null;
+  }
+  return parsed;
+}
+function addUniqueColor(colors, color) {
+  if (!color) return;
+  colors.set(`${color.hex}:${color.alpha}`, color);
+}
+function isTextRenderingFormControl(element) {
+  if (element instanceof HTMLTextAreaElement) return true;
+  if (element instanceof HTMLSelectElement) return true;
+  if (element instanceof HTMLButtonElement) return true;
+  if (element instanceof HTMLInputElement) {
+    const textlessInputTypes = /* @__PURE__ */ new Set([
+      "hidden",
+      "checkbox",
+      "radio",
+      "range",
+      "color",
+      "file",
+      "image"
+    ]);
+    return !textlessInputTypes.has(element.type.toLowerCase());
+  }
+  return false;
+}
+function hasRenderableTextNode(element) {
+  if (element.isContentEditable) return true;
+  if (isTextRenderingFormControl(element)) return true;
+  if (!element.textContent?.trim()) return false;
+  if (hasDirectNonWhitespaceText(element)) return true;
+  const tagName = element.tagName.toLowerCase();
+  return TEXT_ELEMENT_TAGS.has(tagName) || element.children.length === 0;
+}
+function getComputedBoxShadow(element) {
+  const computed = window.getComputedStyle(element);
+  const value = computed.boxShadow.trim();
+  return value || "none";
+}
+function getComputedColorStyles(element) {
+  const computed = window.getComputedStyle(element);
+  const borderSides = [
+    {
+      style: computed.borderTopStyle,
+      width: computed.borderTopWidth,
+      color: computed.borderTopColor
+    },
+    {
+      style: computed.borderRightStyle,
+      width: computed.borderRightWidth,
+      color: computed.borderRightColor
+    },
+    {
+      style: computed.borderBottomStyle,
+      width: computed.borderBottomWidth,
+      color: computed.borderBottomColor
+    },
+    {
+      style: computed.borderLeftStyle,
+      width: computed.borderLeftWidth,
+      color: computed.borderLeftColor
+    }
+  ];
+  const visibleBorderSide = borderSides.find((side) => isVisibleBorderSide(side));
+  const hasBorder = Boolean(visibleBorderSide);
+  const hasOutline = hasVisibleOutline(computed);
+  return {
+    backgroundColor: parseColorValue(computed.backgroundColor),
+    color: parseColorValue(computed.color),
+    borderColor: hasBorder && visibleBorderSide ? parseColorValue(visibleBorderSide.color) : TRANSPARENT_COLOR,
+    outlineColor: hasOutline ? parseColorValue(computed.outlineColor) : TRANSPARENT_COLOR
+  };
+}
+function getSelectionColors(element) {
+  const uniqueColors = /* @__PURE__ */ new Map();
+  const queue = [element];
+  for (let index = 0; index < queue.length; index++) {
+    const node = queue[index];
+    const computed = window.getComputedStyle(node);
+    if (computed.display === "none") {
+      continue;
+    }
+    const isVisibilityHidden = computed.visibility === "hidden" || computed.visibility === "collapse";
+    const currentTextColor = computed.color;
+    if (!isVisibilityHidden) {
+      addUniqueColor(uniqueColors, parseVisibleColor(computed.backgroundColor));
+      if (node instanceof HTMLElement && hasRenderableTextNode(node)) {
+        addUniqueColor(uniqueColors, parseVisibleColor(currentTextColor));
+      }
+      const borderSides = [
+        {
+          style: computed.borderTopStyle,
+          width: computed.borderTopWidth,
+          color: computed.borderTopColor
+        },
+        {
+          style: computed.borderRightStyle,
+          width: computed.borderRightWidth,
+          color: computed.borderRightColor
+        },
+        {
+          style: computed.borderBottomStyle,
+          width: computed.borderBottomWidth,
+          color: computed.borderBottomColor
+        },
+        {
+          style: computed.borderLeftStyle,
+          width: computed.borderLeftWidth,
+          color: computed.borderLeftColor
+        }
+      ];
+      for (const side of borderSides) {
+        if (!isVisibleBorderSide(side)) continue;
+        addUniqueColor(uniqueColors, parseVisibleColor(side.color, currentTextColor));
+      }
+      if (hasVisibleOutline(computed)) {
+        addUniqueColor(uniqueColors, parseVisibleColor(computed.outlineColor, currentTextColor));
+      }
+      if (node instanceof SVGElement) {
+        const fillColor = parseVisibleColor(computed.getPropertyValue("fill"), currentTextColor) ?? parseVisibleColor(node.getAttribute("fill") ?? "", currentTextColor);
+        const strokeColor = parseVisibleColor(computed.getPropertyValue("stroke"), currentTextColor) ?? parseVisibleColor(node.getAttribute("stroke") ?? "", currentTextColor);
+        addUniqueColor(uniqueColors, fillColor);
+        addUniqueColor(uniqueColors, strokeColor);
+      }
+    }
+    for (const child of node.children) {
+      queue.push(child);
+    }
+  }
+  return Array.from(uniqueColors.values());
+}
+function getAllComputedStyles(element) {
+  const { spacing, borderRadius, flex } = getComputedStyles(element);
+  return {
+    spacing,
+    borderRadius,
+    border: getComputedBorderStyles(element),
+    flex,
+    sizing: getComputedSizing(element),
+    color: getComputedColorStyles(element),
+    boxShadow: getComputedBoxShadow(element),
+    typography: getComputedTypography(element)
+  };
+}
+
+// src/utils.ts
+function clamp(value, min, max) {
+  if (!Number.isFinite(value)) return min;
+  if (max < min) return min;
+  return Math.max(min, Math.min(max, value));
+}
+function isInputFocused() {
+  let active = document.activeElement;
+  while (active?.shadowRoot?.activeElement) {
+    active = active.shadowRoot.activeElement;
+  }
+  return active instanceof HTMLInputElement || active instanceof HTMLTextAreaElement || active instanceof HTMLElement && active.isContentEditable;
+}
 var spacingScale = { 0: "0", 1: "px", 2: "0.5", 4: "1", 8: "2", 12: "3", 16: "4", 20: "5", 24: "6", 32: "8" };
 var tailwindClassMap = {
   padding: { prefix: "p", scale: spacingScale },
@@ -960,7 +1210,7 @@ var typographyPropertyToCSSMap = {
   textAlign: "text-align",
   textVerticalAlign: "align-items"
 };
-var TEXT_ELEMENT_TAGS = /* @__PURE__ */ new Set([
+var TEXT_ELEMENT_TAGS2 = /* @__PURE__ */ new Set([
   "p",
   "h1",
   "h2",
@@ -988,17 +1238,17 @@ var TEXT_ELEMENT_TAGS = /* @__PURE__ */ new Set([
   "code",
   "pre"
 ]);
-function hasDirectNonWhitespaceText(element) {
+function hasDirectNonWhitespaceText2(element) {
   return Array.from(element.childNodes).some(
     (node) => node.nodeType === Node.TEXT_NODE && Boolean(node.textContent?.trim())
   );
 }
 function isTextElement2(element) {
   const tagName = element.tagName.toLowerCase();
-  if (TEXT_ELEMENT_TAGS.has(tagName)) {
+  if (TEXT_ELEMENT_TAGS2.has(tagName)) {
     return true;
   }
-  if (hasDirectNonWhitespaceText(element)) {
+  if (hasDirectNonWhitespaceText2(element)) {
     return true;
   }
   if (element.children.length === 0 && element.textContent?.trim()) {
@@ -1006,38 +1256,6 @@ function isTextElement2(element) {
   }
   return false;
 }
-function getComputedTypography(element) {
-  const computed = window.getComputedStyle(element);
-  let textVerticalAlign = "flex-start";
-  if (computed.display === "flex" || computed.display === "inline-flex") {
-    const alignItems = computed.alignItems;
-    if (alignItems === "center") textVerticalAlign = "center";
-    else if (alignItems === "flex-end" || alignItems === "end") textVerticalAlign = "flex-end";
-  }
-  const lineHeight = computed.lineHeight === "normal" ? { numericValue: parseFloat(computed.fontSize) * 1.2, unit: "px", raw: `${Math.round(parseFloat(computed.fontSize) * 1.2)}px` } : parsePropertyValue(computed.lineHeight);
-  const fontSize = parseFloat(computed.fontSize);
-  let letterSpacing;
-  if (computed.letterSpacing === "normal") {
-    letterSpacing = { numericValue: 0, unit: "em", raw: "0em" };
-  } else {
-    const parsed = parsePropertyValue(computed.letterSpacing);
-    if (parsed.unit === "px" && fontSize > 0) {
-      const emValue = Math.round(parsed.numericValue / fontSize * 100) / 100;
-      letterSpacing = { numericValue: emValue, unit: "em", raw: `${emValue}em` };
-    } else {
-      letterSpacing = parsed;
-    }
-  }
-  return {
-    fontFamily: computed.fontFamily,
-    fontWeight: computed.fontWeight,
-    fontSize: parsePropertyValue(computed.fontSize),
-    lineHeight,
-    letterSpacing,
-    textAlign: computed.textAlign,
-    textVerticalAlign
-  };
-}
 function detectSizingMode(element, dimension) {
   const computed = window.getComputedStyle(element);
   const inlineValue = element.style[dimension];
@@ -1085,12 +1303,6 @@ function getSizingValue(element, dimension) {
     }
   };
 }
-function getComputedSizing(element) {
-  return {
-    width: getSizingValue(element, "width"),
-    height: getSizingValue(element, "height")
-  };
-}
 function sizingValueToCSS(sizing) {
   switch (sizing.mode) {
     case "fill":
@@ -1210,134 +1422,6 @@ function parseColorValue(cssValue) {
   }
   return parseNamedColor(raw);
 }
-var TRANSPARENT_COLOR = { hex: "000000", alpha: 0, raw: "transparent" };
-function isVisibleBorderSide(side) {
-  return side.style !== "none" && side.style !== "hidden" && parseFloat(side.width) > 0;
-}
-function hasVisibleOutline(computed) {
-  return computed.outlineStyle !== "none" && parseFloat(computed.outlineWidth) > 0;
-}
-function parseVisibleColor(value, fallbackCurrentColor) {
-  const raw = value.trim();
-  const lowered = raw.toLowerCase();
-  if (!raw || lowered === "none" || lowered === "transparent") {
-    return null;
-  }
-  const resolved = /^currentcolor$/i.test(raw) ? fallbackCurrentColor ?? raw : raw;
-  const parsed = parseColorValue(resolved);
-  if (parsed.alpha <= 0) {
-    return null;
-  }
-  return parsed;
-}
-function addUniqueColor(colors, color) {
-  if (!color) return;
-  colors.set(`${color.hex}:${color.alpha}`, color);
-}
-function isTextRenderingFormControl(element) {
-  if (element instanceof HTMLTextAreaElement) return true;
-  if (element instanceof HTMLSelectElement) return true;
-  if (element instanceof HTMLButtonElement) return true;
-  if (element instanceof HTMLInputElement) {
-    const textlessInputTypes = /* @__PURE__ */ new Set([
-      "hidden",
-      "checkbox",
-      "radio",
-      "range",
-      "color",
-      "file",
-      "image"
-    ]);
-    return !textlessInputTypes.has(element.type.toLowerCase());
-  }
-  return false;
-}
-function hasRenderableTextNode(element) {
-  if (element.isContentEditable) return true;
-  if (isTextRenderingFormControl(element)) return true;
-  if (!element.textContent?.trim()) return false;
-  if (hasDirectNonWhitespaceText(element)) return true;
-  const tagName = element.tagName.toLowerCase();
-  return TEXT_ELEMENT_TAGS.has(tagName) || element.children.length === 0;
-}
-function getComputedBoxShadow(element) {
-  const computed = window.getComputedStyle(element);
-  const value = computed.boxShadow.trim();
-  return value || "none";
-}
-function getComputedColorStyles(element) {
-  const computed = window.getComputedStyle(element);
-  const borderSides = [
-    { style: computed.borderTopStyle, width: computed.borderTopWidth, color: computed.borderTopColor },
-    { style: computed.borderRightStyle, width: computed.borderRightWidth, color: computed.borderRightColor },
-    { style: computed.borderBottomStyle, width: computed.borderBottomWidth, color: computed.borderBottomColor },
-    { style: computed.borderLeftStyle, width: computed.borderLeftWidth, color: computed.borderLeftColor }
-  ];
-  const visibleBorderSide = borderSides.find((side) => isVisibleBorderSide(side));
-  const hasBorder = Boolean(visibleBorderSide);
-  const hasOutline = hasVisibleOutline(computed);
-  return {
-    backgroundColor: parseColorValue(computed.backgroundColor),
-    color: parseColorValue(computed.color),
-    borderColor: hasBorder && visibleBorderSide ? parseColorValue(visibleBorderSide.color) : TRANSPARENT_COLOR,
-    outlineColor: hasOutline ? parseColorValue(computed.outlineColor) : TRANSPARENT_COLOR
-  };
-}
-function getSelectionColors(element) {
-  const uniqueColors = /* @__PURE__ */ new Map();
-  const queue = [element];
-  for (let index = 0; index < queue.length; index++) {
-    const node = queue[index];
-    const computed = window.getComputedStyle(node);
-    if (computed.display === "none") {
-      continue;
-    }
-    const isVisibilityHidden = computed.visibility === "hidden" || computed.visibility === "collapse";
-    const currentTextColor = computed.color;
-    if (!isVisibilityHidden) {
-      addUniqueColor(uniqueColors, parseVisibleColor(computed.backgroundColor));
-      if (node instanceof HTMLElement && hasRenderableTextNode(node)) {
-        addUniqueColor(uniqueColors, parseVisibleColor(currentTextColor));
-      }
-      const borderSides = [
-        { style: computed.borderTopStyle, width: computed.borderTopWidth, color: computed.borderTopColor },
-        { style: computed.borderRightStyle, width: computed.borderRightWidth, color: computed.borderRightColor },
-        { style: computed.borderBottomStyle, width: computed.borderBottomWidth, color: computed.borderBottomColor },
-        { style: computed.borderLeftStyle, width: computed.borderLeftWidth, color: computed.borderLeftColor }
-      ];
-      for (const side of borderSides) {
-        if (!isVisibleBorderSide(side)) continue;
-        addUniqueColor(uniqueColors, parseVisibleColor(side.color, currentTextColor));
-      }
-      if (hasVisibleOutline(computed)) {
-        addUniqueColor(uniqueColors, parseVisibleColor(computed.outlineColor, currentTextColor));
-      }
-      if (node instanceof SVGElement) {
-        const fillColor = parseVisibleColor(computed.getPropertyValue("fill"), currentTextColor) ?? parseVisibleColor(node.getAttribute("fill") ?? "", currentTextColor);
-        const strokeColor = parseVisibleColor(computed.getPropertyValue("stroke"), currentTextColor) ?? parseVisibleColor(node.getAttribute("stroke") ?? "", currentTextColor);
-        addUniqueColor(uniqueColors, fillColor);
-        addUniqueColor(uniqueColors, strokeColor);
-      }
-    }
-    for (const child of node.children) {
-      queue.push(child);
-    }
-  }
-  return Array.from(uniqueColors.values());
-}
-function getAllComputedStyles(element) {
-  const { spacing, borderRadius, flex } = getComputedStyles(element);
-  return {
-    spacing,
-    borderRadius,
-    border: getComputedBorderStyles(element),
-    flex,
-    sizing: getComputedSizing(element),
-    color: getComputedColorStyles(element),
-    boxShadow: getComputedBoxShadow(element),
-    typography: getComputedTypography(element)
-  };
-}
 var colorPropertyToCSSMap = {
   backgroundColor: "background-color",
   color: "color",
@@ -1850,7 +1934,7 @@ function findChildAtPoint(parent, clientX, clientY) {
     return clientX >= r.left && clientX <= r.right && clientY >= r.top && clientY <= r.bottom;
   });
   if (hit) return hit;
-  if (children.length === 1 && !hasDirectNonWhitespaceText(parent)) return children[0];
+  if (children.length === 1 && !hasDirectNonWhitespaceText2(parent)) return children[0];
   return null;
 }
 function elementFromPointWithoutOverlays(x, y) {
@@ -2411,7 +2495,7 @@ function buildElementContext(locator) {
   return buildLocatorContextLines(locator).join("\n");
 }
 function hasSessionEditChanges(edit) {
-  return Object.keys(edit.pendingStyles).length > 0 || Boolean(edit.textEdit) || Boolean(edit.move);
+  return Object.keys(edit.pendingStyles).length > 0 || Boolean(edit.textEdit) || Boolean(edit.move) || Boolean(edit.deleted);
 }
 function partitionMultiSelectedEdits(elements, sessionEditsRef) {
   const editsWithChanges = [];
@@ -2933,7 +3017,7 @@ function buildMoveEntries(edits) {
   let noopMoveCount = 0;
   for (const edit of edits) {
     const move = edit.move;
-    if (!move) continue;
+    if (!move || edit.deleted) continue;
     const subject = buildAnchorRef(
       getElementDisplayName(edit.element) || edit.locator.tagName,
       edit.locator.domSelector,
@@ -3101,19 +3185,22 @@ function getExportContentProfile(edits, comments, movePlanOrContext) {
     hasCssEdits: edits.some((e) => Object.keys(e.pendingStyles).length > 0),
     hasTextEdits: edits.some((e) => e.textEdit != null),
     hasMoves: moveOpCount > 0,
-    hasComments: comments.length > 0
+    hasComments: comments.length > 0,
+    hasDeletes: edits.some((e) => e.deleted)
   };
 }
 function buildExportInstruction(profile) {
   const { hasCssEdits, hasTextEdits, hasMoves, hasComments } = profile;
-  if (!hasCssEdits && !hasTextEdits && !hasMoves && !hasComments) return "";
-  if (!hasCssEdits && !hasTextEdits && !hasMoves) {
+  const hasDeletes = Boolean(profile.hasDeletes);
+  if (!hasCssEdits && !hasTextEdits && !hasMoves && !hasComments && !hasDeletes) return "";
+  if (!hasCssEdits && !hasTextEdits && !hasMoves && !hasDeletes) {
     return hasComments ? "Address this feedback on the UI. Use the provided source location and selector to find each element in the codebase." : "";
   }
   const parts = [];
   if (hasCssEdits) parts.push("Apply the CSS changes to the targeted elements using the project's existing styling approach (Tailwind, CSS modules, etc.). Map values to existing CSS variables, design tokens, or utility classes already used in the project whenever possible.");
   if (hasTextEdits) parts.push("Update the text content as specified.");
   if (hasMoves) parts.push("Implement the move plan below directly in source code. For `structural_move`, reorder/reparent elements using the target anchors. For `layout_refactor`, apply the listed flex/grid refactor steps. Do NOT simulate movement with absolute positioning, left/top offsets, transform, or margin hacks.");
+  if (hasDeletes) parts.push("Delete the elements marked for deletion from the source code \u2014 remove their markup/JSX (and any now-dead props, handlers, or imports they solely used).");
   if (hasComments) parts.push("Address the comments on the relevant elements.");
   return `${parts.join(" ")} Use the provided source locations, selectors, and context HTML to locate each element in the codebase.`;
 }
@@ -3148,6 +3235,13 @@ function buildSessionExport(edits, comments = [], options) {
     blocks.push(planLines.join("\n"));
   }
   for (const edit of edits) {
+    if (edit.deleted) {
+      const lines = buildLocatorContextLines(edit.locator);
+      lines.push("");
+      lines.push("action: delete this element \u2014 remove it from the source");
+      blocks.push(lines.join("\n"));
+      continue;
+    }
     const moveIntent = getMoveIntentForEdit(edit, planContext);
     const hasMove = Boolean(moveIntent);
     const hasStyleOrText = Object.keys(edit.pendingStyles).length > 0 || edit.textEdit != null;