made-refine 0.2.17 → 0.2.19

package/dist/index.mjs

@@ -117,6 +117,255 @@ function getZoomScale() {
   return snap.active ? snap.zoom : 1;
 }
 
+// src/utils/debug-stack.ts
+var STACK_SOURCE_FILE_EXTENSION_REGEX = /\.(jsx|tsx|ts|js)$/;
+var STACK_BUNDLED_FILE_PATTERN_REGEX = /(\.min|bundle|chunk|vendor|vendors|runtime|polyfill|polyfills)\.(js|mjs|cjs)$|(chunk|bundle|vendor|vendors|runtime|polyfill|polyfills|framework|app|main|index)[-_.][A-Za-z0-9_-]{4,}\.(js|mjs|cjs)$|[\da-f]{8,}\.(js|mjs|cjs)$|[-_.][\da-f]{20,}\.(js|mjs|cjs)$|\/dist\/|\/build\/|\/.next\/|\/out\/|\/node_modules\/|\.webpack\.|\.vite\.|\.turbopack\./i;
+var FIREFOX_SAFARI_STACK_REGEXP = /(^|@)\S+:\d+/;
+var SAFARI_NATIVE_CODE_REGEXP = /^(eval@)?(\[native code\])?$/;
+var SERVER_FRAME_MARKER = "(at Server)";
+var STACK_INTERNAL_SCHEME_PREFIXES = [
+  "rsc://",
+  "about://React/",
+  "React/Server/",
+  "file:///",
+  "webpack://",
+  "webpack-internal://",
+  "node:",
+  "turbopack://",
+  "/app-pages-browser/"
+];
+function formatOwnerDebugStack(stack) {
+  if (!stack) return "";
+  const lines = stack.split("\n");
+  const filtered = [];
+  for (const line of lines) {
+    const trimmed = line.trim();
+    if (!trimmed) continue;
+    if (trimmed === "Error: react-stack-top-frame") continue;
+    if (trimmed.includes("react_stack_bottom_frame") || trimmed.includes("react-stack-bottom-frame")) {
+      continue;
+    }
+    filtered.push(line);
+  }
+  if (filtered.length > 0 && filtered[0].includes("fakeJSXCallSite")) {
+    filtered.shift();
+  }
+  return filtered.join("\n");
+}
+function extractStackLocation(urlLike) {
+  if (!urlLike.includes(":")) return [urlLike, void 0, void 0];
+  const isWrappedLocation = urlLike.startsWith("(") && /:\d+\)$/.test(urlLike);
+  const sanitizedResult = isWrappedLocation ? urlLike.slice(1, -1) : urlLike;
+  const parts = /(.+?)(?::(\d+))?(?::(\d+))?$/.exec(sanitizedResult);
+  if (!parts) return [sanitizedResult, void 0, void 0];
+  return [
+    parts[1],
+    parts[2] !== void 0 ? Number(parts[2]) : void 0,
+    parts[3] !== void 0 ? Number(parts[3]) : void 0
+  ];
+}
+function parseV8StackLine(line) {
+  let currentLine = line;
+  if (currentLine.includes("(eval ")) {
+    currentLine = currentLine.replace(/eval code/g, "eval").replace(/(\(eval at [^()]*)|(,.*$)/g, "");
+  }
+  let sanitizedLine = currentLine.replace(/^\s+/, "").replace(/\(eval code/g, "(").replace(/^.*?\s+/, "");
+  const locationMatch = sanitizedLine.match(/ (\(.+\)$)/);
+  if (locationMatch) {
+    sanitizedLine = sanitizedLine.replace(locationMatch[0], "");
+  }
+  const [fileName, lineNumber, columnNumber] = extractStackLocation(
+    locationMatch ? locationMatch[1] : sanitizedLine
+  );
+  const functionName = locationMatch && sanitizedLine ? sanitizedLine : void 0;
+  if (fileName === "eval" || fileName === "<anonymous>") {
+    return {
+      functionName
+    };
+  }
+  return {
+    functionName,
+    fileName,
+    lineNumber,
+    columnNumber,
+    source: currentLine,
+    isServer: currentLine.includes(SERVER_FRAME_MARKER) || fileName.startsWith("rsc://")
+  };
+}
+function parseFFOrSafariStackLine(line) {
+  let currentLine = line;
+  if (currentLine.includes(" > eval")) {
+    currentLine = currentLine.replace(
+      / line (\d+)(?: > eval line \d+)* > eval:\d+:\d+/g,
+      ":$1"
+    );
+  }
+  const trimmed = currentLine.trim();
+  if (!trimmed || SAFARI_NATIVE_CODE_REGEXP.test(trimmed)) {
+    return null;
+  }
+  if (!trimmed.includes("@") && !trimmed.includes(":")) {
+    return {
+      functionName: trimmed,
+      source: currentLine,
+      isServer: trimmed.includes(SERVER_FRAME_MARKER)
+    };
+  }
+  const atIndex = trimmed.lastIndexOf("@");
+  if (atIndex === -1) {
+    return null;
+  }
+  const maybeFunctionName = trimmed.slice(0, atIndex);
+  const location = trimmed.slice(atIndex + 1);
+  const [fileName, lineNumber, columnNumber] = extractStackLocation(location);
+  return {
+    functionName: maybeFunctionName || void 0,
+    fileName,
+    lineNumber,
+    columnNumber,
+    source: currentLine,
+    isServer: currentLine.includes(SERVER_FRAME_MARKER) || fileName.startsWith("rsc://")
+  };
+}
+function parseInStackLine(line) {
+  const functionName = line.replace(/^\s*in\s+/, "").replace(/\s*\(at .*\)$/, "").trim();
+  if (!functionName) return null;
+  return {
+    functionName,
+    source: line,
+    isServer: line.includes(SERVER_FRAME_MARKER)
+  };
+}
+function parseDebugStack(stack) {
+  const frames = [];
+  for (const rawLine of stack.split("\n")) {
+    if (FIREFOX_SAFARI_STACK_REGEXP.test(rawLine)) {
+      const parsed = parseFFOrSafariStackLine(rawLine);
+      if (parsed) frames.push(parsed);
+      continue;
+    }
+    if (/^\s*at\s+/.test(rawLine)) {
+      const parsed = parseV8StackLine(rawLine);
+      if (parsed) frames.push(parsed);
+      continue;
+    }
+    if (/^\s*in\s+/.test(rawLine)) {
+      const parsed = parseInStackLine(rawLine);
+      if (parsed) frames.push(parsed);
+    }
+  }
+  return frames;
+}
+function normalizeStackFileName(fileName) {
+  if (!fileName) return "";
+  let normalized = fileName;
+  const isHttpUrl = normalized.startsWith("http://") || normalized.startsWith("https://");
+  if (isHttpUrl) {
+    try {
+      normalized = new URL(normalized).pathname;
+    } catch {
+    }
+  }
+  let didStripPrefix = true;
+  while (didStripPrefix) {
+    didStripPrefix = false;
+    for (const prefix of STACK_INTERNAL_SCHEME_PREFIXES) {
+      if (normalized.startsWith(prefix)) {
+        normalized = normalized.slice(prefix.length);
+        if (prefix === "file:///") {
+          normalized = `/${normalized.replace(/^\/+/, "")}`;
+        }
+        didStripPrefix = true;
+        break;
+      }
+    }
+  }
+  normalized = normalized.replace(/^\/\(app-pages-browser\)\//, "/").replace(/^\/\.\//, "/").replace(/^\.\//, "");
+  const queryIndex = normalized.indexOf("?");
+  if (queryIndex !== -1) {
+    normalized = normalized.slice(0, queryIndex);
+  }
+  return normalized;
+}
+function isSourceStackFile(fileName) {
+  const normalizedFileName = normalizeStackFileName(fileName);
+  if (!normalizedFileName) return false;
+  if (!STACK_SOURCE_FILE_EXTENSION_REGEX.test(normalizedFileName)) return false;
+  return !STACK_BUNDLED_FILE_PATTERN_REGEX.test(normalizedFileName);
+}
+function buildFunctionNameToRscFramesMap(fiber) {
+  const functionNameToRscFrames = /* @__PURE__ */ new Map();
+  const visited = /* @__PURE__ */ new Set();
+  let current = fiber;
+  while (current && !visited.has(current)) {
+    visited.add(current);
+    const rawStack = current?._debugStack?.stack;
+    const stack = typeof rawStack === "string" ? formatOwnerDebugStack(rawStack) : "";
+    if (stack) {
+      const frames = parseDebugStack(stack);
+      for (const frame of frames) {
+        if (!frame.functionName || !frame.fileName) continue;
+        if (!frame.fileName.startsWith("rsc://")) continue;
+        const normalized = normalizeStackFileName(frame.fileName);
+        if (!normalized) continue;
+        const existing = functionNameToRscFrames.get(frame.functionName) ?? [];
+        const duplicate = existing.some(
+          (candidate) => candidate.fileName === normalized && candidate.lineNumber === frame.lineNumber && candidate.columnNumber === frame.columnNumber
+        );
+        if (!duplicate) {
+          existing.push({
+            fileName: normalized,
+            lineNumber: frame.lineNumber,
+            columnNumber: frame.columnNumber
+          });
+          functionNameToRscFrames.set(frame.functionName, existing);
+        }
+      }
+    }
+    current = current._debugOwner ?? current.return ?? null;
+  }
+  return functionNameToRscFrames;
+}
+function enrichServerFrame(frame, functionNameToRscFrames, functionNameToUsageIndex) {
+  if (!frame.functionName) return frame;
+  const available = functionNameToRscFrames.get(frame.functionName);
+  if (!available) return frame;
+  const usageIndex = functionNameToUsageIndex.get(frame.functionName) ?? 0;
+  const resolved = available[usageIndex % available.length];
+  functionNameToUsageIndex.set(frame.functionName, usageIndex + 1);
+  return {
+    ...frame,
+    fileName: resolved.fileName,
+    lineNumber: resolved.lineNumber,
+    columnNumber: resolved.columnNumber
+  };
+}
+function getSourceFromDebugStack(fiber) {
+  const rawStack = fiber?._debugStack?.stack;
+  if (typeof rawStack !== "string" || rawStack.length === 0) {
+    return null;
+  }
+  const formattedStack = formatOwnerDebugStack(rawStack);
+  if (!formattedStack) return null;
+  const stackFrames = parseDebugStack(formattedStack);
+  const functionNameToRscFrames = buildFunctionNameToRscFramesMap(fiber);
+  const functionNameToUsageIndex = /* @__PURE__ */ new Map();
+  for (const frame of stackFrames) {
+    const maybeEnriched = frame.isServer ? enrichServerFrame(frame, functionNameToRscFrames, functionNameToUsageIndex) : frame;
+    if (!maybeEnriched.fileName) continue;
+    const normalizedFileName = normalizeStackFileName(maybeEnriched.fileName);
+    if (!normalizedFileName) continue;
+    if (isSourceStackFile(normalizedFileName)) {
+      return {
+        fileName: normalizedFileName,
+        lineNumber: maybeEnriched.lineNumber,
+        columnNumber: maybeEnriched.columnNumber
+      };
+    }
+  }
+  return null;
+}
+
 // src/utils/react-fiber.ts
 function getFiberForElement(element) {
   if (typeof window !== "undefined") {
@@ -144,6 +393,8 @@ function getSourceFromFiber(fiber) {
   if (pending?.fileName) return pending;
   const memo = fiber?.memoizedProps?.__source;
   if (memo?.fileName) return memo;
+  const fromDebugStack = getSourceFromDebugStack(fiber);
+  if (fromDebugStack?.fileName) return fromDebugStack;
   return null;
 }
 function buildFrame(fiber) {
@@ -1567,516 +1818,164 @@ function htmlChildren(el) {
 function findFlexAncestor(element, boundary) {
   let current = element;
   while (current && current !== document.body) {
-    const parent = current.parentElement;
-    if (!parent) break;
-    const display = getComputedStyle(parent).display;
-    if (display === "flex" || display === "inline-flex") {
-      return { flexParent: parent, child: current };
-    }
-    if (boundary && parent === boundary) break;
-    current = parent;
-  }
-  return null;
-}
-function computeHoverHighlight(elementUnder, selectedElement) {
-  if (!elementUnder || elementUnder === document.body || elementUnder === document.documentElement || elementUnder.closest("[data-direct-edit]") || elementUnder.closest("[data-direct-edit-host]") || elementUnder === selectedElement) {
-    return null;
-  }
-  const boundary = selectedElement?.contains(elementUnder) ? selectedElement : null;
-  const ownDisplay = getComputedStyle(elementUnder).display;
-  if (ownDisplay === "flex" || ownDisplay === "inline-flex") {
-    return { flexContainer: elementUnder, children: htmlChildren(elementUnder) };
-  }
-  const found = findFlexAncestor(elementUnder, boundary);
-  if (found) {
-    return { flexContainer: found.flexParent, children: htmlChildren(found.flexParent) };
-  }
-  return { flexContainer: elementUnder, children: [] };
-}
-function resolveElementTarget(elementUnder, selectedElement) {
-  const boundary = selectedElement?.contains(elementUnder) ? selectedElement : null;
-  const found = findFlexAncestor(elementUnder, boundary);
-  if (found && found.flexParent === boundary) return elementUnder;
-  return found?.child ?? elementUnder;
-}
-function findChildAtPoint(parent, clientX, clientY) {
-  const children = htmlChildren(parent);
-  if (children.length === 0) return null;
-  const hit = children.find((child) => {
-    const r = child.getBoundingClientRect();
-    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];
-  return null;
-}
-function elementFromPointWithoutOverlays(x, y) {
-  const host = document.querySelector("[data-direct-edit-host]");
-  if (host) host.style.display = "none";
-  const el = document.elementFromPoint(x, y);
-  if (host) host.style.display = "";
-  return el;
-}
-function isLayoutContainer(element) {
-  const display = window.getComputedStyle(element).display;
-  return display === "flex" || display === "inline-flex" || display === "grid" || display === "inline-grid";
-}
-function isBlockContainer(element) {
-  const display = window.getComputedStyle(element).display;
-  return display === "block" || display === "flow-root" || display === "inline-block" || display === "list-item";
-}
-function skipElement(el, exclude) {
-  if (exclude && exclude.contains(el)) return true;
-  if (el === document.body || el === document.documentElement) return true;
-  if (el.closest("[data-direct-edit]") || el.closest("[data-direct-edit-host]")) return true;
-  return false;
-}
-function findContainerViaTraversal(x, y, exclude) {
-  const el = elementFromPointWithoutOverlays(x, y);
-  if (!el) return null;
-  let current = el;
-  while (current) {
-    if (!skipElement(current, exclude)) {
-      if (isLayoutContainer(current) || isBlockContainer(current)) return current;
-    }
-    current = current.parentElement;
-  }
-  return null;
-}
-function findContainerAtPoint(x, y, exclude, preferredParent) {
-  const host = document.querySelector("[data-direct-edit-host]");
-  if (host) host.style.display = "none";
-  const elements = document.elementsFromPoint(x, y);
-  if (host) host.style.display = "";
-  for (const el of elements) {
-    if (skipElement(el, exclude)) continue;
-    if (isLayoutContainer(el) || isBlockContainer(el)) return el;
-  }
-  if (preferredParent && (isLayoutContainer(preferredParent) || isBlockContainer(preferredParent))) {
-    for (const el of elements) {
-      if (el === preferredParent) return preferredParent;
-    }
-  }
-  return findContainerViaTraversal(x, y, exclude);
-}
-function findLayoutContainerAtPoint(x, y, exclude, preferredParent) {
-  const host = document.querySelector("[data-direct-edit-host]");
-  if (host) host.style.display = "none";
-  const elements = document.elementsFromPoint(x, y);
-  if (host) host.style.display = "";
-  for (const el of elements) {
-    if (skipElement(el, exclude)) continue;
-    if (isLayoutContainer(el)) return el;
-  }
-  if (preferredParent && isLayoutContainer(preferredParent)) {
-    for (const el of elements) {
-      if (el === preferredParent) return preferredParent;
-    }
-  }
-  return null;
-}
-function calculateDropPosition(container, pointerX, pointerY, draggedElement) {
-  const { axis, reversed: isReversed } = detectChildrenDirection(container, draggedElement);
-  const isHorizontal = axis === "horizontal";
-  const children = Array.from(container.children).filter(
-    (child) => child !== draggedElement && child instanceof HTMLElement
-  );
-  if (children.length === 0) {
-    const containerRect2 = container.getBoundingClientRect();
-    return {
-      insertBefore: null,
-      indicator: {
-        x: containerRect2.left + 4,
-        y: containerRect2.top + 4,
-        width: isHorizontal ? 1 : containerRect2.width - 8,
-        height: isHorizontal ? containerRect2.height - 8 : 1
-      }
-    };
-  }
-  const containerRect = container.getBoundingClientRect();
-  let insertBefore = null;
-  let indicatorPosition = 0;
-  for (let i = 0; i < children.length; i++) {
-    const child = children[i];
-    const rect = child.getBoundingClientRect();
-    const midpoint = isHorizontal ? rect.left + rect.width / 2 : rect.top + rect.height / 2;
-    const pointer = isHorizontal ? pointerX : pointerY;
-    const beforeMidpoint = isReversed ? pointer > midpoint : pointer < midpoint;
-    if (beforeMidpoint) {
-      insertBefore = child;
-      indicatorPosition = isHorizontal ? rect.left : rect.top;
-      break;
-    }
-  }
-  if (!insertBefore) {
-    const lastChild = children[children.length - 1];
-    const lastRect = lastChild.getBoundingClientRect();
-    indicatorPosition = isHorizontal ? lastRect.right : lastRect.bottom;
-  }
-  const indicator = isHorizontal ? {
-    x: indicatorPosition,
-    y: containerRect.top + 4,
-    width: 2,
-    height: containerRect.height - 8
-  } : {
-    x: containerRect.left + 4,
-    y: indicatorPosition,
-    width: containerRect.width - 8,
-    height: 2
-  };
-  return { insertBefore, indicator };
-}
-function getFiberForElement2(element) {
-  if (typeof window !== "undefined") {
-    const devtools = window.__DIRECT_EDIT_DEVTOOLS__;
-    if (devtools?.getFiberForElement) {
-      const fiber = devtools.getFiberForElement(element);
-      if (fiber) return fiber;
-    }
-  }
-  const fiberKey = Object.keys(element).find(
-    (key) => key.startsWith("__reactFiber$") || key.startsWith("__reactInternalInstance$")
-  );
-  if (!fiberKey) return null;
-  return element[fiberKey] || null;
-}
-var STACK_SOURCE_FILE_EXTENSION_REGEX = /\.(jsx|tsx|ts|js)$/;
-var STACK_BUNDLED_FILE_PATTERN_REGEX = /(\.min|bundle|chunk|vendor|vendors|runtime|polyfill|polyfills)\.(js|mjs|cjs)$|(chunk|bundle|vendor|vendors|runtime|polyfill|polyfills|framework|app|main|index)[-_.][A-Za-z0-9_-]{4,}\.(js|mjs|cjs)$|[\da-f]{8,}\.(js|mjs|cjs)$|[-_.][\da-f]{20,}\.(js|mjs|cjs)$|\/dist\/|\/build\/|\/.next\/|\/out\/|\/node_modules\/|\.webpack\.|\.vite\.|\.turbopack\./i;
-var FIREFOX_SAFARI_STACK_REGEXP = /(^|@)\S+:\d+/;
-var SAFARI_NATIVE_CODE_REGEXP = /^(eval@)?(\[native code\])?$/;
-var SERVER_FRAME_MARKER = "(at Server)";
-var STACK_INTERNAL_SCHEME_PREFIXES = [
-  "rsc://",
-  "about://React/",
-  "React/Server/",
-  "file:///",
-  "webpack://",
-  "webpack-internal://",
-  "node:",
-  "turbopack://",
-  "/app-pages-browser/"
-];
-function formatOwnerDebugStack(stack) {
-  if (!stack) return "";
-  const lines = stack.split("\n");
-  const filtered = [];
-  for (const line of lines) {
-    const trimmed = line.trim();
-    if (!trimmed) continue;
-    if (trimmed === "Error: react-stack-top-frame") continue;
-    if (trimmed.includes("react_stack_bottom_frame") || trimmed.includes("react-stack-bottom-frame")) {
-      continue;
-    }
-    filtered.push(line);
-  }
-  if (filtered.length > 0 && filtered[0].includes("fakeJSXCallSite")) {
-    filtered.shift();
-  }
-  return filtered.join("\n");
-}
-function extractStackLocation(urlLike) {
-  if (!urlLike.includes(":")) return [urlLike, void 0, void 0];
-  const isWrappedLocation = urlLike.startsWith("(") && /:\d+\)$/.test(urlLike);
-  const sanitizedResult = isWrappedLocation ? urlLike.slice(1, -1) : urlLike;
-  const parts = /(.+?)(?::(\d+))?(?::(\d+))?$/.exec(sanitizedResult);
-  if (!parts) return [sanitizedResult, void 0, void 0];
-  return [
-    parts[1],
-    parts[2] !== void 0 ? Number(parts[2]) : void 0,
-    parts[3] !== void 0 ? Number(parts[3]) : void 0
-  ];
-}
-function parseV8StackLine(line) {
-  let currentLine = line;
-  if (currentLine.includes("(eval ")) {
-    currentLine = currentLine.replace(/eval code/g, "eval").replace(/(\(eval at [^()]*)|(,.*$)/g, "");
-  }
-  let sanitizedLine = currentLine.replace(/^\s+/, "").replace(/\(eval code/g, "(").replace(/^.*?\s+/, "");
-  const locationMatch = sanitizedLine.match(/ (\(.+\)$)/);
-  if (locationMatch) {
-    sanitizedLine = sanitizedLine.replace(locationMatch[0], "");
-  }
-  const [fileName, lineNumber, columnNumber] = extractStackLocation(
-    locationMatch ? locationMatch[1] : sanitizedLine
-  );
-  const functionName = locationMatch && sanitizedLine ? sanitizedLine : void 0;
-  if (fileName === "eval" || fileName === "<anonymous>") {
-    return {
-      functionName
-    };
-  }
-  return {
-    functionName,
-    fileName,
-    lineNumber,
-    columnNumber,
-    source: currentLine,
-    isServer: currentLine.includes(SERVER_FRAME_MARKER) || fileName.startsWith("rsc://")
-  };
-}
-function parseFFOrSafariStackLine(line) {
-  let currentLine = line;
-  if (currentLine.includes(" > eval")) {
-    currentLine = currentLine.replace(
-      / line (\d+)(?: > eval line \d+)* > eval:\d+:\d+/g,
-      ":$1"
-    );
-  }
-  const trimmed = currentLine.trim();
-  if (!trimmed || SAFARI_NATIVE_CODE_REGEXP.test(trimmed)) {
-    return null;
-  }
-  if (!trimmed.includes("@") && !trimmed.includes(":")) {
-    return {
-      functionName: trimmed,
-      source: currentLine,
-      isServer: trimmed.includes(SERVER_FRAME_MARKER)
-    };
-  }
-  const atIndex = trimmed.lastIndexOf("@");
-  if (atIndex === -1) {
-    return null;
-  }
-  const maybeFunctionName = trimmed.slice(0, atIndex);
-  const location = trimmed.slice(atIndex + 1);
-  const [fileName, lineNumber, columnNumber] = extractStackLocation(location);
-  return {
-    functionName: maybeFunctionName || void 0,
-    fileName,
-    lineNumber,
-    columnNumber,
-    source: currentLine,
-    isServer: currentLine.includes(SERVER_FRAME_MARKER) || fileName.startsWith("rsc://")
-  };
-}
-function parseInStackLine(line) {
-  const functionName = line.replace(/^\s*in\s+/, "").replace(/\s*\(at .*\)$/, "").trim();
-  if (!functionName) return null;
-  return {
-    functionName,
-    source: line,
-    isServer: line.includes(SERVER_FRAME_MARKER)
-  };
-}
-function parseDebugStack(stack) {
-  const frames = [];
-  for (const rawLine of stack.split("\n")) {
-    if (FIREFOX_SAFARI_STACK_REGEXP.test(rawLine)) {
-      const parsed = parseFFOrSafariStackLine(rawLine);
-      if (parsed) frames.push(parsed);
-      continue;
-    }
-    if (/^\s*at\s+/.test(rawLine)) {
-      const parsed = parseV8StackLine(rawLine);
-      if (parsed) frames.push(parsed);
-      continue;
-    }
-    if (/^\s*in\s+/.test(rawLine)) {
-      const parsed = parseInStackLine(rawLine);
-      if (parsed) frames.push(parsed);
-    }
-  }
-  return frames;
-}
-function normalizeStackFileName(fileName) {
-  if (!fileName) return "";
-  let normalized = fileName;
-  const isHttpUrl = normalized.startsWith("http://") || normalized.startsWith("https://");
-  if (isHttpUrl) {
-    try {
-      normalized = new URL(normalized).pathname;
-    } catch {
-    }
-  }
-  let didStripPrefix = true;
-  while (didStripPrefix) {
-    didStripPrefix = false;
-    for (const prefix of STACK_INTERNAL_SCHEME_PREFIXES) {
-      if (normalized.startsWith(prefix)) {
-        normalized = normalized.slice(prefix.length);
-        if (prefix === "file:///") {
-          normalized = `/${normalized.replace(/^\/+/, "")}`;
-        }
-        didStripPrefix = true;
-        break;
-      }
-    }
-  }
-  normalized = normalized.replace(/^\/\(app-pages-browser\)\//, "/").replace(/^\/\.\//, "/").replace(/^\.\//, "");
-  const queryIndex = normalized.indexOf("?");
-  if (queryIndex !== -1) {
-    normalized = normalized.slice(0, queryIndex);
-  }
-  return normalized;
-}
-function isSourceStackFile(fileName) {
-  const normalizedFileName = normalizeStackFileName(fileName);
-  if (!normalizedFileName) return false;
-  if (!STACK_SOURCE_FILE_EXTENSION_REGEX.test(normalizedFileName)) return false;
-  return !STACK_BUNDLED_FILE_PATTERN_REGEX.test(normalizedFileName);
-}
-function buildFunctionNameToRscFramesMap(fiber) {
-  const functionNameToRscFrames = /* @__PURE__ */ new Map();
-  const visited = /* @__PURE__ */ new Set();
-  let current = fiber;
-  while (current && !visited.has(current)) {
-    visited.add(current);
-    const rawStack = current?._debugStack?.stack;
-    const stack = typeof rawStack === "string" ? formatOwnerDebugStack(rawStack) : "";
-    if (stack) {
-      const frames = parseDebugStack(stack);
-      for (const frame of frames) {
-        if (!frame.functionName || !frame.fileName) continue;
-        if (!frame.fileName.startsWith("rsc://")) continue;
-        const normalized = normalizeStackFileName(frame.fileName);
-        if (!normalized) continue;
-        const existing = functionNameToRscFrames.get(frame.functionName) ?? [];
-        const duplicate = existing.some(
-          (candidate) => candidate.fileName === normalized && candidate.lineNumber === frame.lineNumber && candidate.columnNumber === frame.columnNumber
-        );
-        if (!duplicate) {
-          existing.push({
-            fileName: normalized,
-            lineNumber: frame.lineNumber,
-            columnNumber: frame.columnNumber
-          });
-          functionNameToRscFrames.set(frame.functionName, existing);
-        }
-      }
-    }
-    current = current._debugOwner ?? current.return ?? null;
-  }
-  return functionNameToRscFrames;
-}
-function enrichServerFrame(frame, functionNameToRscFrames, functionNameToUsageIndex) {
-  if (!frame.functionName) return frame;
-  const available = functionNameToRscFrames.get(frame.functionName);
-  if (!available) return frame;
-  const usageIndex = functionNameToUsageIndex.get(frame.functionName) ?? 0;
-  const resolved = available[usageIndex % available.length];
-  functionNameToUsageIndex.set(frame.functionName, usageIndex + 1);
-  return {
-    ...frame,
-    fileName: resolved.fileName,
-    lineNumber: resolved.lineNumber,
-    columnNumber: resolved.columnNumber
-  };
+    const parent = current.parentElement;
+    if (!parent) break;
+    const display = getComputedStyle(parent).display;
+    if (display === "flex" || display === "inline-flex") {
+      return { flexParent: parent, child: current };
+    }
+    if (boundary && parent === boundary) break;
+    current = parent;
+  }
+  return null;
 }
-function getSourceFromDebugStack(fiber) {
-  const rawStack = fiber?._debugStack?.stack;
-  if (typeof rawStack !== "string" || rawStack.length === 0) {
+function computeHoverHighlight(elementUnder, selectedElement) {
+  if (!elementUnder || elementUnder === document.body || elementUnder === document.documentElement || elementUnder.closest("[data-direct-edit]") || elementUnder.closest("[data-direct-edit-host]") || elementUnder === selectedElement) {
     return null;
   }
-  const formattedStack = formatOwnerDebugStack(rawStack);
-  if (!formattedStack) return null;
-  const stackFrames = parseDebugStack(formattedStack);
-  const functionNameToRscFrames = buildFunctionNameToRscFramesMap(fiber);
-  const functionNameToUsageIndex = /* @__PURE__ */ new Map();
-  for (const frame of stackFrames) {
-    const maybeEnriched = frame.isServer ? enrichServerFrame(frame, functionNameToRscFrames, functionNameToUsageIndex) : frame;
-    if (!maybeEnriched.fileName) continue;
-    const normalizedFileName = normalizeStackFileName(maybeEnriched.fileName);
-    if (!normalizedFileName) continue;
-    if (isSourceStackFile(normalizedFileName)) {
-      return {
-        fileName: normalizedFileName,
-        lineNumber: maybeEnriched.lineNumber,
-        columnNumber: maybeEnriched.columnNumber
-      };
-    }
+  const boundary = selectedElement?.contains(elementUnder) ? selectedElement : null;
+  const ownDisplay = getComputedStyle(elementUnder).display;
+  if (ownDisplay === "flex" || ownDisplay === "inline-flex") {
+    return { flexContainer: elementUnder, children: htmlChildren(elementUnder) };
   }
-  return null;
+  const found = findFlexAncestor(elementUnder, boundary);
+  if (found) {
+    return { flexContainer: found.flexParent, children: htmlChildren(found.flexParent) };
+  }
+  return { flexContainer: elementUnder, children: [] };
 }
-function getSourceFromFiber2(fiber) {
-  const debugSource = fiber?._debugSource;
-  if (debugSource?.fileName) return debugSource;
-  const owner = fiber?._debugOwner;
-  const ownerPending = owner?.pendingProps?.__source;
-  if (ownerPending?.fileName) return ownerPending;
-  const ownerMemo = owner?.memoizedProps?.__source;
-  if (ownerMemo?.fileName) return ownerMemo;
-  const pending = fiber?.pendingProps?.__source;
-  if (pending?.fileName) return pending;
-  const memo = fiber?.memoizedProps?.__source;
-  if (memo?.fileName) return memo;
-  const fromDebugStack = getSourceFromDebugStack(fiber);
-  if (fromDebugStack?.fileName) return fromDebugStack;
+function resolveElementTarget(elementUnder, selectedElement) {
+  const boundary = selectedElement?.contains(elementUnder) ? selectedElement : null;
+  const found = findFlexAncestor(elementUnder, boundary);
+  if (found && found.flexParent === boundary) return elementUnder;
+  return found?.child ?? elementUnder;
+}
+function findChildAtPoint(parent, clientX, clientY) {
+  const children = htmlChildren(parent);
+  if (children.length === 0) return null;
+  const hit = children.find((child) => {
+    const r = child.getBoundingClientRect();
+    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];
   return null;
 }
-function buildFrame2(fiber) {
-  const type = fiber?.type;
-  if (typeof type !== "function" && typeof type !== "object") return null;
-  const name = type?.displayName || type?.name || null;
-  if (!name || name === "Fragment") return null;
-  const frame = { name };
-  const source = getSourceFromFiber2(fiber);
-  if (source?.fileName) {
-    frame.file = source.fileName;
-    if (typeof source.lineNumber === "number") {
-      frame.line = source.lineNumber;
-    }
-    if (typeof source.columnNumber === "number") {
-      frame.column = source.columnNumber;
+function elementFromPointWithoutOverlays(x, y) {
+  const host = document.querySelector("[data-direct-edit-host]");
+  if (host) host.style.display = "none";
+  const el = document.elementFromPoint(x, y);
+  if (host) host.style.display = "";
+  return el;
+}
+function isLayoutContainer(element) {
+  const display = window.getComputedStyle(element).display;
+  return display === "flex" || display === "inline-flex" || display === "grid" || display === "inline-grid";
+}
+function isBlockContainer(element) {
+  const display = window.getComputedStyle(element).display;
+  return display === "block" || display === "flow-root" || display === "inline-block" || display === "list-item";
+}
+function skipElement(el, exclude) {
+  if (exclude && exclude.contains(el)) return true;
+  if (el === document.body || el === document.documentElement) return true;
+  if (el.closest("[data-direct-edit]") || el.closest("[data-direct-edit-host]")) return true;
+  return false;
+}
+function findContainerViaTraversal(x, y, exclude) {
+  const el = elementFromPointWithoutOverlays(x, y);
+  if (!el) return null;
+  let current = el;
+  while (current) {
+    if (!skipElement(current, exclude)) {
+      if (isLayoutContainer(current) || isBlockContainer(current)) return current;
     }
+    current = current.parentElement;
   }
-  return frame;
+  return null;
 }
-function shouldIncludeFrame2(frame, lastFrame) {
-  if (!lastFrame) return true;
-  if (frame.name !== lastFrame.name) return true;
-  if (!lastFrame.file && frame.file) return true;
-  if (lastFrame.file && frame.file && lastFrame.line == null && frame.line != null) return true;
-  if (lastFrame.file && frame.file && lastFrame.line != null && frame.line != null && lastFrame.column == null && frame.column != null) {
-    return true;
+function findContainerAtPoint(x, y, exclude, preferredParent) {
+  const host = document.querySelector("[data-direct-edit-host]");
+  if (host) host.style.display = "none";
+  const elements = document.elementsFromPoint(x, y);
+  if (host) host.style.display = "";
+  for (const el of elements) {
+    if (skipElement(el, exclude)) continue;
+    if (isLayoutContainer(el) || isBlockContainer(el)) return el;
   }
-  return false;
+  if (preferredParent && (isLayoutContainer(preferredParent) || isBlockContainer(preferredParent))) {
+    for (const el of elements) {
+      if (el === preferredParent) return preferredParent;
+    }
+  }
+  return findContainerViaTraversal(x, y, exclude);
 }
-function getOwnerStack2(fiber) {
-  const frames = [];
-  let current = fiber;
-  let lastFrame = null;
-  let nearestComponentFiber = null;
-  while (current) {
-    const frame = buildFrame2(current);
-    if (frame && shouldIncludeFrame2(frame, lastFrame)) {
-      frames.push(frame);
-      lastFrame = frame;
-      if (!nearestComponentFiber) {
-        nearestComponentFiber = current;
-      }
+function findLayoutContainerAtPoint(x, y, exclude, preferredParent) {
+  const host = document.querySelector("[data-direct-edit-host]");
+  if (host) host.style.display = "none";
+  const elements = document.elementsFromPoint(x, y);
+  if (host) host.style.display = "";
+  for (const el of elements) {
+    if (skipElement(el, exclude)) continue;
+    if (isLayoutContainer(el)) return el;
+  }
+  if (preferredParent && isLayoutContainer(preferredParent)) {
+    for (const el of elements) {
+      if (el === preferredParent) return preferredParent;
     }
-    current = current._debugOwner;
   }
-  return { frames, nearestComponentFiber };
+  return null;
 }
-function getRenderStack2(fiber) {
-  const frames = [];
-  let current = fiber;
-  let lastFrame = null;
-  let nearestComponentFiber = null;
-  while (current) {
-    const frame = buildFrame2(current);
-    if (frame && shouldIncludeFrame2(frame, lastFrame)) {
-      frames.push(frame);
-      lastFrame = frame;
-      if (!nearestComponentFiber) {
-        nearestComponentFiber = current;
+function calculateDropPosition(container, pointerX, pointerY, draggedElement) {
+  const { axis, reversed: isReversed } = detectChildrenDirection(container, draggedElement);
+  const isHorizontal = axis === "horizontal";
+  const children = Array.from(container.children).filter(
+    (child) => child !== draggedElement && child instanceof HTMLElement
+  );
+  if (children.length === 0) {
+    const containerRect2 = container.getBoundingClientRect();
+    return {
+      insertBefore: null,
+      indicator: {
+        x: containerRect2.left + 4,
+        y: containerRect2.top + 4,
+        width: isHorizontal ? 1 : containerRect2.width - 8,
+        height: isHorizontal ? containerRect2.height - 8 : 1
       }
+    };
+  }
+  const containerRect = container.getBoundingClientRect();
+  let insertBefore = null;
+  let indicatorPosition = 0;
+  for (let i = 0; i < children.length; i++) {
+    const child = children[i];
+    const rect = child.getBoundingClientRect();
+    const midpoint = isHorizontal ? rect.left + rect.width / 2 : rect.top + rect.height / 2;
+    const pointer = isHorizontal ? pointerX : pointerY;
+    const beforeMidpoint = isReversed ? pointer > midpoint : pointer < midpoint;
+    if (beforeMidpoint) {
+      insertBefore = child;
+      indicatorPosition = isHorizontal ? rect.left : rect.top;
+      break;
     }
-    current = current.return;
   }
-  return { frames, nearestComponentFiber };
-}
-function getReactComponentInfo2(element) {
-  const fiber = getFiberForElement2(element);
-  if (!fiber) return { frames: [], nearestComponentFiber: null };
-  const elementSource = getSourceFromFiber2(fiber);
-  const elementSourceFile = elementSource?.fileName || void 0;
-  const ownerResult = getOwnerStack2(fiber);
-  if (ownerResult.frames.length > 0) {
-    return { ...ownerResult, elementSourceFile };
+  if (!insertBefore) {
+    const lastChild = children[children.length - 1];
+    const lastRect = lastChild.getBoundingClientRect();
+    indicatorPosition = isHorizontal ? lastRect.right : lastRect.bottom;
   }
-  return { ...getRenderStack2(fiber), elementSourceFile };
+  const indicator = isHorizontal ? {
+    x: indicatorPosition,
+    y: containerRect.top + 4,
+    width: 2,
+    height: containerRect.height - 8
+  } : {
+    x: containerRect.left + 4,
+    y: indicatorPosition,
+    width: containerRect.width - 8,
+    height: 2
+  };
+  return { insertBefore, indicator };
 }
 function getElementDisplayName(element) {
   const tag = element.tagName.toLowerCase();
@@ -2396,10 +2295,10 @@ function getElementSource(element) {
   const domSource = parseDomSource(element);
   if (domSource) return domSource;
   const seenFibers = /* @__PURE__ */ new Set();
-  let fiber = getFiberForElement2(element);
+  let fiber = getFiberForElement(element);
   while (fiber && !seenFibers.has(fiber)) {
     seenFibers.add(fiber);
-    const fiberSource = getSourceFromFiber2(fiber);
+    const fiberSource = getSourceFromFiber(fiber);
     if (fiberSource?.fileName) {
       return {
         file: fiberSource.fileName,
@@ -2414,7 +2313,7 @@ function getElementSource(element) {
 function getElementLocator(element) {
   const elementInfo = getElementInfo(element);
   const domSource = getElementSource(element);
-  const { frames, nearestComponentFiber, elementSourceFile } = getReactComponentInfo2(element);
+  const { frames, nearestComponentFiber, elementSourceFile } = getReactComponentInfo(element);
   const componentName = nearestComponentFiber?.type?.displayName || nearestComponentFiber?.type?.name || void 0;
   const authoredProps = nearestComponentFiber ? getComponentProps(nearestComponentFiber) : void 0;
   const classification = classifyComponentFiber(nearestComponentFiber, frames, elementSourceFile);
@@ -4475,6 +4374,49 @@ function useSessionManager({
       pushUndo: false
     });
   }, [applySelection, buildSelectionSnapshot, getSanitizedSelection, pushUndo, saveCurrentToSession, stateRef]);
+  const deleteSelection = React3.useCallback(() => {
+    const selected = getSanitizedSelection(stateRef.current.selectedElements);
+    if (selected.length === 0 || !stateRef.current.editModeActive) return;
+    if (selected.some((el) => el === document.body || !el.parentElement)) return;
+    saveCurrentToSession();
+    const restoreSelection = buildSelectionSnapshot();
+    const snapshots = selected.map((el) => ({
+      element: el,
+      parent: el.parentElement,
+      nextSibling: el.nextSibling
+    }));
+    const sessionSnapshots = /* @__PURE__ */ new Map();
+    for (const el of selected) {
+      const edit = sessionEditsRef.current.get(el);
+      if (edit) sessionSnapshots.set(el, edit);
+      sessionEditsRef.current.delete(el);
+    }
+    syncSessionItemCount();
+    for (const { element } of snapshots) {
+      if (element.isConnected) element.remove();
+    }
+    pushUndo({
+      type: "structure",
+      restoreSelection,
+      undo: () => {
+        for (let i = snapshots.length - 1; i >= 0; i--) {
+          const { element, parent, nextSibling } = snapshots[i];
+          if (!element.isConnected && parent.isConnected) {
+            if (nextSibling && nextSibling.parentNode === parent) {
+              parent.insertBefore(element, nextSibling);
+            } else {
+              parent.appendChild(element);
+            }
+          }
+        }
+        for (const [el, edit] of sessionSnapshots) {
+          sessionEditsRef.current.set(el, edit);
+        }
+        syncSessionItemCount();
+      }
+    });
+    applySelection([], { primaryElement: null, pushUndo: false });
+  }, [applySelection, buildSelectionSnapshot, getSanitizedSelection, pushUndo, saveCurrentToSession, stateRef, syncSessionItemCount]);
   const resetToOriginal = React3.useCallback(() => {
     const current = stateRef.current;
     const el = current.selectedElement;
@@ -5011,6 +4953,7 @@ ${exportMarkdown}`);
     selectChild,
     insertElement,
     groupSelection,
+    deleteSelection,
     resetToOriginal,
     undo,
     handleMoveComplete,
@@ -5904,6 +5847,7 @@ function useKeyboardShortcuts({
   closePanel,
   clearSelection,
   groupSelection,
+  deleteSelection,
   insertElement,
   setState,
   toggleCanvas,
@@ -5991,6 +5935,13 @@ function useKeyboardShortcuts({
           return;
         }
       }
+      if ((e.key === "Backspace" || e.key === "Delete") && s.editModeActive && !s.textEditingElement) {
+        if (!isInputFocused() && s.selectedElements.length > 0) {
+          e.preventDefault();
+          deleteSelection();
+          return;
+        }
+      }
       if (e.key === "Enter" && s.editModeActive && !s.textEditingElement && s.selectedElement) {
         if (!isInputFocused() && isTextElement2(s.selectedElement)) {
           e.preventDefault();
@@ -6023,7 +5974,7 @@ function useKeyboardShortcuts({
     }
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [clearSelection, closePanel, commitTextEditing, fitCanvasToViewport, groupSelection, insertElement, setCanvasZoom, setState, startTextEditing, toggleCanvas, toggleEditMode, toggleFlexLayout, undo, usesMetaForUndo, zoomCanvasTo100]);
+  }, [clearSelection, closePanel, commitTextEditing, deleteSelection, fitCanvasToViewport, groupSelection, insertElement, setCanvasZoom, setState, startTextEditing, toggleCanvas, toggleEditMode, toggleFlexLayout, undo, usesMetaForUndo, zoomCanvasTo100]);
 }
 
 // src/use-canvas.ts
@@ -6673,6 +6624,7 @@ function DirectEditProvider({ children }) {
     removeSessionEdit,
     clearSessionEdits,
     groupSelection,
+    deleteSelection,
     insertElement
   } = useSessionManager({
     stateRef,
@@ -6901,6 +6853,7 @@ function DirectEditProvider({ children }) {
     setState,
     clearSelection,
     groupSelection,
+    deleteSelection,
     insertElement,
     toggleCanvas: toggleCanvasWithPreference,
     setCanvasZoom,
@@ -6968,6 +6921,7 @@ function DirectEditProvider({ children }) {
     startTextEditing,
     commitTextEditing,
     groupSelection,
+    deleteSelection,
     insertElement,
     toggleCanvas: toggleCanvasWithPreference,
     setCanvasZoom,
@@ -7020,6 +6974,7 @@ function DirectEditProvider({ children }) {
     startTextEditing,
     commitTextEditing,
     groupSelection,
+    deleteSelection,
     insertElement,
     toggleCanvasWithPreference,
     setCanvasZoom,
@@ -7643,6 +7598,8 @@ function useMove({ onMoveComplete }) {
   React12.useEffect(() => {
     if (!dragState.isDragging) return;
     function handlePointerMove(e) {
+      e.stopPropagation();
+      e.preventDefault();
       const current = dragStateRef.current;
       const { draggedElement, dragOffset, originalParent } = current;
       setDragState((prev) => ({
@@ -7730,12 +7687,17 @@ function useMove({ onMoveComplete }) {
         clearReorderPreview();
       }
     }
-    function handlePointerUp() {
+    function handlePointerUp(e) {
+      e.stopPropagation();
       completeDrag();
     }
-    function handlePointerCancel() {
+    function handlePointerCancel(e) {
+      e.stopPropagation();
       cancelDrag();
     }
+    function blockMouseEvent(e) {
+      e.stopPropagation();
+    }
     function handleKeyDown(e) {
       if (e.key === "Escape") {
         cancelDrag();
@@ -7744,15 +7706,19 @@ function useMove({ onMoveComplete }) {
     function handleBlur() {
       cancelDrag();
     }
-    window.addEventListener("pointermove", handlePointerMove);
-    window.addEventListener("pointerup", handlePointerUp);
-    window.addEventListener("pointercancel", handlePointerCancel);
+    window.addEventListener("pointermove", handlePointerMove, true);
+    window.addEventListener("pointerup", handlePointerUp, true);
+    window.addEventListener("pointercancel", handlePointerCancel, true);
+    window.addEventListener("mousemove", blockMouseEvent, true);
+    window.addEventListener("mouseup", blockMouseEvent, true);
     window.addEventListener("keydown", handleKeyDown);
     window.addEventListener("blur", handleBlur);
     return () => {
-      window.removeEventListener("pointermove", handlePointerMove);
-      window.removeEventListener("pointerup", handlePointerUp);
-      window.removeEventListener("pointercancel", handlePointerCancel);
+      window.removeEventListener("pointermove", handlePointerMove, true);
+      window.removeEventListener("pointerup", handlePointerUp, true);
+      window.removeEventListener("pointercancel", handlePointerCancel, true);
+      window.removeEventListener("mousemove", blockMouseEvent, true);
+      window.removeEventListener("mouseup", blockMouseEvent, true);
       window.removeEventListener("keydown", handleKeyDown);
       window.removeEventListener("blur", handleBlur);
     };
@@ -8534,7 +8500,7 @@ function SelectedCommentComposer({
   React17.useLayoutEffect(() => {
     updatePosition();
   }, [text, updatePosition]);
-  React17.useEffect(() => {
+  const handleComposerClick = React17.useCallback(() => {
     inputRef.current?.focus();
   }, []);
   React17.useEffect(() => {
@@ -8585,7 +8551,10 @@ function SelectedCommentComposer({
         width: position.width,
         pointerEvents: "auto"
       },
-      onClick: (e) => e.stopPropagation(),
+      onClick: (e) => {
+        e.stopPropagation();
+        handleComposerClick();
+      },
       children: [
         /* @__PURE__ */ jsx7(
           "textarea",
@@ -12883,7 +12852,8 @@ function DirectEditPanelContent() {
     sendCommentToAgent: sendCommentToAgent2,
     setActiveCommentId,
     startTextEditing,
-    toggleEditMode
+    toggleEditMode,
+    deleteSelection
   } = useDirectEditActions();
   const {
     position,