made-refine 0.2.17 → 0.2.19

package/dist/utils.mjs

@@ -40,1932 +40,1934 @@ function getZoomScale() {
   return snap.active ? snap.zoom : 1;
 }
 
-// src/utils/react-fiber.ts
-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;
-  if (value === void 0) return void 0;
-  if (value !== null && typeof value === "object") {
-    if ("$$typeof" in value) return "[element]";
-    try {
-      JSON.stringify(value);
-      return value;
-    } catch {
-      return "[object]";
+// 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);
   }
-  return value;
-}
-function getComponentProps(fiber) {
-  const props = fiber?.memoizedProps ?? fiber?.pendingProps;
-  if (!props || typeof props !== "object") return {};
-  const result = {};
-  for (const [key, value] of Object.entries(props)) {
-    if (EXCLUDED_PROP_KEYS.has(key)) continue;
-    if (key.startsWith("data-")) continue;
-    const serialized = serializePropValue(value);
-    if (serialized !== void 0) {
-      result[key] = serialized;
-    }
+  if (filtered.length > 0 && filtered[0].includes("fakeJSXCallSite")) {
+    filtered.shift();
   }
-  return result;
+  return filtered.join("\n");
 }
-function getCallSiteSource(fiber) {
-  const source = fiber?._debugSource;
-  if (source?.fileName) {
-    return {
-      file: source.fileName,
-      line: typeof source.lineNumber === "number" ? source.lineNumber : void 0,
-      column: typeof source.columnNumber === "number" ? source.columnNumber : void 0
-    };
+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, "");
   }
-  const pending = fiber?.pendingProps?.__source;
-  if (pending?.fileName) {
+  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 {
-      file: pending.fileName,
-      line: typeof pending.lineNumber === "number" ? pending.lineNumber : void 0,
-      column: typeof pending.columnNumber === "number" ? pending.columnNumber : void 0
+      functionName
     };
   }
-  return null;
+  return {
+    functionName,
+    fileName,
+    lineNumber,
+    columnNumber,
+    source: currentLine,
+    isServer: currentLine.includes(SERVER_FRAME_MARKER) || fileName.startsWith("rsc://")
+  };
 }
-function deriveDefinitionSource(frames) {
-  for (const frame of frames) {
-    if (frame.file && isComponentPrimitivePath(frame.file)) {
-      return { file: frame.file, line: frame.line, column: frame.column };
-    }
+function parseFFOrSafariStackLine(line) {
+  let currentLine = line;
+  if (currentLine.includes(" > eval")) {
+    currentLine = currentLine.replace(
+      / line (\d+)(?: > eval line \d+)* > eval:\d+:\d+/g,
+      ":$1"
+    );
   }
-  return null;
-}
-var PRIMITIVE_PATH_PATTERNS = [
-  /(?:^|\/)components\/ui\//,
-  /(?:^|\/)ui\/primitives\//,
-  /(?:^|\/)design-system\//
-];
-var PRIMITIVE_NPM_PATTERNS = [
-  /@base-ui\//,
-  /@radix-ui\//,
-  /@headlessui\//,
-  /@chakra-ui\//,
-  /@mantine\//,
-  /@mui\//,
-  /@ark-ui\//
-];
-var FRAMEWORK_EXCLUSION_PATTERNS = [
-  /node_modules\/react\//,
-  /node_modules\/react-dom\//,
-  /node_modules\/next\/dist\//,
-  /node_modules\/scheduler\//,
-  /node_modules\/react-server\//
-];
-function isComponentPrimitivePath(filePath) {
-  const normalized = filePath.replace(/\\/g, "/");
-  for (const pattern of FRAMEWORK_EXCLUSION_PATTERNS) {
-    if (pattern.test(normalized)) return false;
+  const trimmed = currentLine.trim();
+  if (!trimmed || SAFARI_NATIVE_CODE_REGEXP.test(trimmed)) {
+    return null;
   }
-  for (const pattern of PRIMITIVE_NPM_PATTERNS) {
-    if (pattern.test(normalized)) return true;
+  if (!trimmed.includes("@") && !trimmed.includes(":")) {
+    return {
+      functionName: trimmed,
+      source: currentLine,
+      isServer: trimmed.includes(SERVER_FRAME_MARKER)
+    };
   }
-  for (const pattern of PRIMITIVE_PATH_PATTERNS) {
-    if (pattern.test(normalized)) return true;
+  const atIndex = trimmed.lastIndexOf("@");
+  if (atIndex === -1) {
+    return null;
   }
-  return false;
+  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 classifyComponentFiber(fiber, frames, elementSourceFile) {
-  if (elementSourceFile && isComponentPrimitivePath(elementSourceFile)) {
-    return { isComponentPrimitive: true };
+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);
+    }
   }
-  if (!fiber) return { isComponentPrimitive: false };
-  const callSite = getCallSiteSource(fiber);
-  if (callSite?.file && isComponentPrimitivePath(callSite.file)) {
-    return { isComponentPrimitive: true };
+  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 {
+    }
   }
-  for (const frame of frames) {
-    if (frame.file && isComponentPrimitivePath(frame.file)) {
-      return { isComponentPrimitive: true };
+  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;
+      }
     }
   }
-  if (!elementSourceFile && fiber._debugSource) {
-    return { isComponentPrimitive: true };
+  normalized = normalized.replace(/^\/\(app-pages-browser\)\//, "/").replace(/^\/\.\//, "/").replace(/^\.\//, "");
+  const queryIndex = normalized.indexOf("?");
+  if (queryIndex !== -1) {
+    normalized = normalized.slice(0, queryIndex);
   }
-  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));
+  return normalized;
 }
-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;
+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 getComputedStyles(element) {
-  const computed = window.getComputedStyle(element);
-  return {
-    spacing: {
-      paddingTop: parsePropertyValue(computed.paddingTop),
-      paddingRight: parsePropertyValue(computed.paddingRight),
-      paddingBottom: parsePropertyValue(computed.paddingBottom),
-      paddingLeft: parsePropertyValue(computed.paddingLeft),
-      marginTop: parsePropertyValue(computed.marginTop),
-      marginRight: parsePropertyValue(computed.marginRight),
-      marginBottom: parsePropertyValue(computed.marginBottom),
-      marginLeft: parsePropertyValue(computed.marginLeft),
-      gap: parsePropertyValue(computed.gap || "0px")
-    },
-    borderRadius: {
-      borderTopLeftRadius: parsePropertyValue(computed.borderTopLeftRadius),
-      borderTopRightRadius: parsePropertyValue(computed.borderTopRightRadius),
-      borderBottomRightRadius: parsePropertyValue(computed.borderBottomRightRadius),
-      borderBottomLeftRadius: parsePropertyValue(computed.borderBottomLeftRadius)
-    },
-    flex: {
-      display: computed.display,
-      flexDirection: computed.flexDirection,
-      justifyContent: computed.justifyContent,
-      alignItems: computed.alignItems
+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 getComputedBorderStyles(element) {
-  const computed = window.getComputedStyle(element);
-  const topStyle = computed.borderTopStyle;
-  const rightStyle = computed.borderRightStyle;
-  const bottomStyle = computed.borderBottomStyle;
-  const leftStyle = computed.borderLeftStyle;
-  const topWidth = parsePropertyValue(computed.borderTopWidth);
-  const rightWidth = parsePropertyValue(computed.borderRightWidth);
-  const bottomWidth = parsePropertyValue(computed.borderBottomWidth);
-  const leftWidth = parsePropertyValue(computed.borderLeftWidth);
+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 {
-    borderTopStyle: topStyle,
-    borderTopWidth: topWidth,
-    borderRightStyle: rightStyle,
-    borderRightWidth: rightWidth,
-    borderBottomStyle: bottomStyle,
-    borderBottomWidth: bottomWidth,
-    borderLeftStyle: leftStyle,
-    borderLeftWidth: leftWidth
+    ...frame,
+    fileName: resolved.fileName,
+    lineNumber: resolved.lineNumber,
+    columnNumber: resolved.columnNumber
   };
 }
-var ORIGINAL_STYLE_PROPS = [
-  "padding-top",
-  "padding-right",
-  "padding-bottom",
-  "padding-left",
-  "padding",
-  "margin-top",
-  "margin-right",
-  "margin-bottom",
-  "margin-left",
-  "margin",
-  "gap",
-  "border-radius",
-  "border-top-left-radius",
-  "border-top-right-radius",
-  "border-bottom-right-radius",
-  "border-bottom-left-radius",
-  "border",
-  "border-style",
-  "border-width",
-  "border-top-style",
-  "border-top-width",
-  "border-right-style",
-  "border-right-width",
-  "border-bottom-style",
-  "border-bottom-width",
-  "border-left-style",
-  "border-left-width",
-  "display",
-  "flex-direction",
-  "justify-content",
-  "align-items",
-  "width",
-  "height",
-  "background-color",
-  "background",
-  "color",
-  "border-color",
-  "outline-color",
-  "outline-style",
-  "outline-width",
-  "box-shadow",
-  "font-family",
-  "font-weight",
-  "font-size",
-  "line-height",
-  "letter-spacing",
-  "text-align"
-];
-function getOriginalInlineStyles(element) {
-  const styles = {};
-  for (const prop of ORIGINAL_STYLE_PROPS) {
-    const value = element.style.getPropertyValue(prop);
-    if (value) {
-      styles[prop] = value;
+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 styles;
+  return null;
 }
-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 },
-  "padding-inline": { prefix: "px", scale: spacingScale },
-  "padding-block": { prefix: "py", scale: spacingScale },
-  "padding-top": { prefix: "pt", scale: spacingScale },
-  "padding-right": { prefix: "pr", scale: spacingScale },
-  "padding-bottom": { prefix: "pb", scale: spacingScale },
-  "padding-left": { prefix: "pl", scale: spacingScale },
-  margin: { prefix: "m", scale: spacingScale },
-  "margin-inline": { prefix: "mx", scale: spacingScale },
-  "margin-block": { prefix: "my", scale: spacingScale },
-  "margin-top": { prefix: "mt", scale: spacingScale },
-  "margin-right": { prefix: "mr", scale: spacingScale },
-  "margin-bottom": { prefix: "mb", scale: spacingScale },
-  "margin-left": { prefix: "ml", scale: spacingScale },
-  gap: { prefix: "gap", scale: spacingScale },
-  "border-width": {
-    prefix: "border",
-    scale: { 0: "0", 1: "", 2: "2", 4: "4", 8: "8" }
-  },
-  "border-top-width": {
-    prefix: "border-t",
-    scale: { 0: "0", 1: "", 2: "2", 4: "4", 8: "8" }
-  },
-  "border-right-width": {
-    prefix: "border-r",
-    scale: { 0: "0", 1: "", 2: "2", 4: "4", 8: "8" }
-  },
-  "border-bottom-width": {
-    prefix: "border-b",
-    scale: { 0: "0", 1: "", 2: "2", 4: "4", 8: "8" }
-  },
-  "border-left-width": {
-    prefix: "border-l",
-    scale: { 0: "0", 1: "", 2: "2", 4: "4", 8: "8" }
-  },
-  "border-radius": {
-    prefix: "rounded",
-    scale: { 0: "none", 2: "sm", 4: "", 6: "md", 8: "lg", 12: "xl", 16: "2xl", 24: "3xl", 9999: "full" }
-  },
-  "border-top-left-radius": {
-    prefix: "rounded-tl",
-    scale: { 0: "none", 2: "sm", 4: "", 6: "md", 8: "lg", 12: "xl", 16: "2xl", 24: "3xl", 9999: "full" }
-  },
-  "border-top-right-radius": {
-    prefix: "rounded-tr",
-    scale: { 0: "none", 2: "sm", 4: "", 6: "md", 8: "lg", 12: "xl", 16: "2xl", 24: "3xl", 9999: "full" }
-  },
-  "border-bottom-right-radius": {
-    prefix: "rounded-br",
-    scale: { 0: "none", 2: "sm", 4: "", 6: "md", 8: "lg", 12: "xl", 16: "2xl", 24: "3xl", 9999: "full" }
-  },
-  "border-bottom-left-radius": {
-    prefix: "rounded-bl",
-    scale: { 0: "none", 2: "sm", 4: "", 6: "md", 8: "lg", 12: "xl", 16: "2xl", 24: "3xl", 9999: "full" }
-  }
-};
-var flexDirectionMap = {
-  row: "flex-row",
-  "row-reverse": "flex-row-reverse",
-  column: "flex-col",
-  "column-reverse": "flex-col-reverse"
-};
-var justifyContentMap = {
-  "flex-start": "justify-start",
-  "flex-end": "justify-end",
-  center: "justify-center",
-  "space-between": "justify-between",
-  "space-around": "justify-around",
-  "space-evenly": "justify-evenly",
-  start: "justify-start",
-  end: "justify-end"
-};
-var alignItemsMap = {
-  "flex-start": "items-start",
-  "flex-end": "items-end",
-  center: "items-center",
-  baseline: "items-baseline",
-  stretch: "items-stretch",
-  start: "items-start",
-  end: "items-end"
-};
-function getExactScaleValue(value, scale) {
-  if (Object.prototype.hasOwnProperty.call(scale, value)) {
-    return scale[value];
+
+// src/utils/react-fiber.ts
+function getFiberForElement(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;
+}
+function getSourceFromFiber(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;
   return null;
 }
-function normalizeTailwindArbitraryValue(value) {
-  return value.trim().replace(/\s+/g, "_");
+function buildFrame(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 = getSourceFromFiber(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;
+    }
+  }
+  return frame;
 }
-function normalizeShadowForComparison(value) {
-  return value.trim().toLowerCase().replace(/\s*\/\s*/g, "/").replace(/\(\s+/g, "(").replace(/\s+\)/g, ")").replace(/\s*,\s*/g, ",").replace(/\s+/g, " ");
+function shouldIncludeFrame(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;
+  }
+  return false;
 }
-var tailwindShadowClassValues = [
-  { className: "shadow-2xs", css: "0 1px rgb(0 0 0 / 0.05)" },
-  { className: "shadow-xs", css: "0 1px 2px 0 rgb(0 0 0 / 0.05)" },
-  { className: "shadow", css: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)" },
-  { className: "shadow-sm", css: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)" },
-  { className: "shadow-md", css: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)" },
-  { className: "shadow-lg", css: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)" },
-  { className: "shadow-xl", css: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)" },
-  { className: "shadow-2xl", css: "0 25px 50px -12px rgb(0 0 0 / 0.25)" },
-  { className: "shadow-inner", css: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)" }
-];
-function stylesToTailwind(styles) {
-  const classes = [];
-  for (const [prop, value] of Object.entries(styles)) {
-    if (tailwindClassMap[prop]) {
-      const parsed = parsePropertyValue(value);
-      const mapping = tailwindClassMap[prop];
-      if (value === "auto") {
-        classes.push(`${mapping.prefix}-auto`);
-        continue;
-      }
-      if (parsed.unit === "px") {
-        const exactScale = getExactScaleValue(parsed.numericValue, mapping.scale);
-        if (exactScale !== null) {
-          if (exactScale === "") {
-            classes.push(mapping.prefix);
-          } else {
-            classes.push(`${mapping.prefix}-${exactScale}`);
-          }
-          continue;
-        }
+function getOwnerStack(fiber) {
+  const frames = [];
+  let current = fiber;
+  let lastFrame = null;
+  let nearestComponentFiber = null;
+  while (current) {
+    const frame = buildFrame(current);
+    if (frame && shouldIncludeFrame(frame, lastFrame)) {
+      frames.push(frame);
+      lastFrame = frame;
+      if (!nearestComponentFiber) {
+        nearestComponentFiber = current;
       }
-      classes.push(`${mapping.prefix}-[${value}]`);
-      continue;
-    }
-    if (prop === "flex-direction" && flexDirectionMap[value]) {
-      classes.push(flexDirectionMap[value]);
-      continue;
-    }
-    if (prop === "justify-content" && justifyContentMap[value]) {
-      classes.push(justifyContentMap[value]);
-      continue;
-    }
-    if (prop === "align-items" && alignItemsMap[value]) {
-      classes.push(alignItemsMap[value]);
-      continue;
-    }
-    if (prop === "display") {
-      if (value === "flex") classes.push("flex");
-      else if (value === "inline-flex") classes.push("inline-flex");
-      else if (value === "grid") classes.push("grid");
-      else if (value === "block") classes.push("block");
-      else if (value === "inline-block") classes.push("inline-block");
-      else if (value === "none") classes.push("hidden");
-      continue;
     }
-    if (prop === "width") {
-      if (value === "100%") classes.push("w-full");
-      else if (value === "fit-content") classes.push("w-fit");
-      else if (value === "auto") classes.push("w-auto");
-      else classes.push(`w-[${value}]`);
-      continue;
-    }
-    if (prop === "height") {
-      if (value === "100%") classes.push("h-full");
-      else if (value === "fit-content") classes.push("h-fit");
-      else if (value === "auto") classes.push("h-auto");
-      else classes.push(`h-[${value}]`);
-      continue;
-    }
-    if (prop === "background-color") {
-      const colorValue = parseColorValue(value);
-      classes.push(colorToTailwind("backgroundColor", colorValue));
-      continue;
+    current = current._debugOwner;
+  }
+  return { frames, nearestComponentFiber };
+}
+function getRenderStack(fiber) {
+  const frames = [];
+  let current = fiber;
+  let lastFrame = null;
+  let nearestComponentFiber = null;
+  while (current) {
+    const frame = buildFrame(current);
+    if (frame && shouldIncludeFrame(frame, lastFrame)) {
+      frames.push(frame);
+      lastFrame = frame;
+      if (!nearestComponentFiber) {
+        nearestComponentFiber = current;
+      }
     }
-    if (prop === "color") {
-      const colorValue = parseColorValue(value);
-      classes.push(colorToTailwind("color", colorValue));
-      continue;
+    current = current.return;
+  }
+  return { frames, nearestComponentFiber };
+}
+function getReactComponentInfo(element) {
+  const fiber = getFiberForElement(element);
+  if (!fiber) return { frames: [], nearestComponentFiber: null };
+  const elementSource = getSourceFromFiber(fiber);
+  const elementSourceFile = elementSource?.fileName || void 0;
+  const ownerResult = getOwnerStack(fiber);
+  if (ownerResult.frames.length > 0) {
+    return { ...ownerResult, elementSourceFile };
+  }
+  return { ...getRenderStack(fiber), elementSourceFile };
+}
+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;
+  if (value === void 0) return void 0;
+  if (value !== null && typeof value === "object") {
+    if ("$$typeof" in value) return "[element]";
+    try {
+      JSON.stringify(value);
+      return value;
+    } catch {
+      return "[object]";
     }
-    if (prop === "border-color") {
-      const colorValue = parseColorValue(value);
-      classes.push(colorToTailwind("borderColor", colorValue));
-      continue;
+  }
+  return value;
+}
+function getComponentProps(fiber) {
+  const props = fiber?.memoizedProps ?? fiber?.pendingProps;
+  if (!props || typeof props !== "object") return {};
+  const result = {};
+  for (const [key, value] of Object.entries(props)) {
+    if (EXCLUDED_PROP_KEYS.has(key)) continue;
+    if (key.startsWith("data-")) continue;
+    const serialized = serializePropValue(value);
+    if (serialized !== void 0) {
+      result[key] = serialized;
     }
-    if (prop === "border-style") {
-      const styleMap = {
-        none: "border-none",
-        solid: "border-solid",
-        dashed: "border-dashed",
-        dotted: "border-dotted",
-        double: "border-double"
-      };
-      classes.push(styleMap[value] || `[border-style:${value}]`);
-      continue;
-    }
-    if (prop === "border-top-style" || prop === "border-right-style" || prop === "border-bottom-style" || prop === "border-left-style") {
-      const allPresent = "border-top-style" in styles && "border-right-style" in styles && "border-bottom-style" in styles && "border-left-style" in styles;
-      if (allPresent) {
-        if (prop === "border-top-style") {
-          const allSame = styles["border-top-style"] === styles["border-right-style"] && styles["border-top-style"] === styles["border-bottom-style"] && styles["border-top-style"] === styles["border-left-style"];
-          if (allSame) {
-            const styleMap = {
-              none: "border-none",
-              solid: "border-solid",
-              dashed: "border-dashed",
-              dotted: "border-dotted",
-              double: "border-double"
-            };
-            classes.push(styleMap[value] || `[border-style:${value}]`);
-          } else {
-            classes.push(`[border-top-style:${styles["border-top-style"]}]`);
-            classes.push(`[border-right-style:${styles["border-right-style"]}]`);
-            classes.push(`[border-bottom-style:${styles["border-bottom-style"]}]`);
-            classes.push(`[border-left-style:${styles["border-left-style"]}]`);
-          }
-        }
-      } else {
-        classes.push(`[${prop}:${value}]`);
-      }
-      continue;
-    }
-    if (prop === "outline-color") {
-      const colorValue = parseColorValue(value);
-      classes.push(colorToTailwind("outlineColor", colorValue));
-      continue;
-    }
-    if (prop === "box-shadow") {
-      const trimmed = value.trim();
-      if (trimmed === "none" || trimmed === "") {
-        classes.push("shadow-none");
-      } else {
-        const normalized = normalizeShadowForComparison(trimmed);
-        const preset = tailwindShadowClassValues.find(
-          (entry) => normalizeShadowForComparison(entry.css) === normalized
-        );
-        if (preset) classes.push(preset.className);
-        else classes.push(`shadow-[${normalizeTailwindArbitraryValue(value)}]`);
-      }
-      continue;
-    }
-    if (prop === "font-size") {
-      classes.push(`text-[${value}]`);
-      continue;
-    }
-    if (prop === "font-weight") {
-      const weightMap = {
-        "100": "font-thin",
-        "200": "font-extralight",
-        "300": "font-light",
-        "400": "font-normal",
-        "500": "font-medium",
-        "600": "font-semibold",
-        "700": "font-bold",
-        "800": "font-extrabold",
-        "900": "font-black"
-      };
-      classes.push(weightMap[value] || `font-[${value}]`);
-      continue;
-    }
-    if (prop === "line-height") {
-      classes.push(`leading-[${value}]`);
-      continue;
-    }
-    if (prop === "letter-spacing") {
-      classes.push(`tracking-[${value}]`);
-      continue;
-    }
-    if (prop === "text-align") {
-      const alignMap = {
-        left: "text-left",
-        center: "text-center",
-        right: "text-right",
-        justify: "text-justify"
-      };
-      if (alignMap[value]) classes.push(alignMap[value]);
-      continue;
-    }
-    if (prop === "font-family") {
-      classes.push(`font-[${value.replace(/\s+/g, "_")}]`);
-      continue;
+  }
+  return result;
+}
+function getCallSiteSource(fiber) {
+  const source = fiber?._debugSource;
+  if (source?.fileName) {
+    return {
+      file: source.fileName,
+      line: typeof source.lineNumber === "number" ? source.lineNumber : void 0,
+      column: typeof source.columnNumber === "number" ? source.columnNumber : void 0
+    };
+  }
+  const pending = fiber?.pendingProps?.__source;
+  if (pending?.fileName) {
+    return {
+      file: pending.fileName,
+      line: typeof pending.lineNumber === "number" ? pending.lineNumber : void 0,
+      column: typeof pending.columnNumber === "number" ? pending.columnNumber : void 0
+    };
+  }
+  return null;
+}
+function deriveDefinitionSource(frames) {
+  for (const frame of frames) {
+    if (frame.file && isComponentPrimitivePath(frame.file)) {
+      return { file: frame.file, line: frame.line, column: frame.column };
     }
   }
-  return classes.join(" ");
-}
-var propertyToCSSMap = {
-  paddingTop: "padding-top",
-  paddingRight: "padding-right",
-  paddingBottom: "padding-bottom",
-  paddingLeft: "padding-left",
-  marginTop: "margin-top",
-  marginRight: "margin-right",
-  marginBottom: "margin-bottom",
-  marginLeft: "margin-left",
-  gap: "gap"
-};
-var borderRadiusPropertyToCSSMap = {
-  borderTopLeftRadius: "border-top-left-radius",
-  borderTopRightRadius: "border-top-right-radius",
-  borderBottomRightRadius: "border-bottom-right-radius",
-  borderBottomLeftRadius: "border-bottom-left-radius"
-};
-var borderPropertyToCSSMap = {
-  borderTopStyle: "border-top-style",
-  borderTopWidth: "border-top-width",
-  borderRightStyle: "border-right-style",
-  borderRightWidth: "border-right-width",
-  borderBottomStyle: "border-bottom-style",
-  borderBottomWidth: "border-bottom-width",
-  borderLeftStyle: "border-left-style",
-  borderLeftWidth: "border-left-width"
-};
-var flexPropertyToCSSMap = {
-  display: "display",
-  flexDirection: "flex-direction",
-  justifyContent: "justify-content",
-  alignItems: "align-items"
-};
-var sizingPropertyToCSSMap = {
-  width: "width",
-  height: "height"
-};
-var typographyPropertyToCSSMap = {
-  fontFamily: "font-family",
-  fontWeight: "font-weight",
-  fontSize: "font-size",
-  lineHeight: "line-height",
-  letterSpacing: "letter-spacing",
-  textAlign: "text-align",
-  textVerticalAlign: "align-items"
-};
-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())
-  );
+  return null;
 }
-function isTextElement2(element) {
-  const tagName = element.tagName.toLowerCase();
-  if (TEXT_ELEMENT_TAGS.has(tagName)) {
-    return true;
+var PRIMITIVE_PATH_PATTERNS = [
+  /(?:^|\/)components\/ui\//,
+  /(?:^|\/)ui\/primitives\//,
+  /(?:^|\/)design-system\//
+];
+var PRIMITIVE_NPM_PATTERNS = [
+  /@base-ui\//,
+  /@radix-ui\//,
+  /@headlessui\//,
+  /@chakra-ui\//,
+  /@mantine\//,
+  /@mui\//,
+  /@ark-ui\//
+];
+var FRAMEWORK_EXCLUSION_PATTERNS = [
+  /node_modules\/react\//,
+  /node_modules\/react-dom\//,
+  /node_modules\/next\/dist\//,
+  /node_modules\/scheduler\//,
+  /node_modules\/react-server\//
+];
+function isComponentPrimitivePath(filePath) {
+  const normalized = filePath.replace(/\\/g, "/");
+  for (const pattern of FRAMEWORK_EXCLUSION_PATTERNS) {
+    if (pattern.test(normalized)) return false;
   }
-  if (hasDirectNonWhitespaceText(element)) {
-    return true;
+  for (const pattern of PRIMITIVE_NPM_PATTERNS) {
+    if (pattern.test(normalized)) return true;
   }
-  if (element.children.length === 0 && element.textContent?.trim()) {
-    return true;
+  for (const pattern of PRIMITIVE_PATH_PATTERNS) {
+    if (pattern.test(normalized)) return true;
   }
   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";
+function classifyComponentFiber(fiber, frames, elementSourceFile) {
+  if (elementSourceFile && isComponentPrimitivePath(elementSourceFile)) {
+    return { isComponentPrimitive: true };
   }
-  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;
+  if (!fiber) return { isComponentPrimitive: false };
+  const callSite = getCallSiteSource(fiber);
+  if (callSite?.file && isComponentPrimitivePath(callSite.file)) {
+    return { isComponentPrimitive: true };
+  }
+  for (const frame of frames) {
+    if (frame.file && isComponentPrimitivePath(frame.file)) {
+      return { isComponentPrimitive: true };
     }
   }
-  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];
-  if (inlineValue === "100%") return "fill";
-  if (inlineValue === "auto" || inlineValue === "fit-content") return "fit";
-  const computedValue = computed[dimension];
-  if (computedValue === "100%") return "fill";
-  if (computedValue === "auto" || computedValue === "fit-content" || computedValue === "max-content") {
-    return "fit";
+  if (!elementSourceFile && fiber._debugSource) {
+    return { isComponentPrimitive: true };
   }
-  const parent = element.parentElement;
-  if (parent) {
-    const parentComputed = window.getComputedStyle(parent);
-    if (parentComputed.display === "flex" || parentComputed.display === "inline-flex") {
-      const flexGrow = computed.flexGrow;
-      if (flexGrow !== "0") {
-        return "fill";
-      }
-    }
-  }
-  if (dimension === "width") {
-    if (computed.display === "block" && !inlineValue) {
-      return "fill";
-    }
-    if (computed.display === "inline-block" || computed.display === "inline-flex" || computed.display === "inline") {
-      return "fit";
-    }
-  }
-  if (dimension === "height") {
-    if (!inlineValue) {
-      return "fit";
-    }
+  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 "fixed";
+  return active instanceof HTMLInputElement || active instanceof HTMLTextAreaElement || active instanceof HTMLElement && active.isContentEditable;
 }
-function getSizingValue(element, dimension) {
-  const mode = detectSizingMode(element, dimension);
-  const numericValue = Math.round(dimension === "width" ? element.offsetWidth : element.offsetHeight);
+function getComputedStyles(element) {
+  const computed = window.getComputedStyle(element);
   return {
-    mode,
-    value: {
-      numericValue,
-      unit: "px",
-      raw: `${numericValue}px`
+    spacing: {
+      paddingTop: parsePropertyValue(computed.paddingTop),
+      paddingRight: parsePropertyValue(computed.paddingRight),
+      paddingBottom: parsePropertyValue(computed.paddingBottom),
+      paddingLeft: parsePropertyValue(computed.paddingLeft),
+      marginTop: parsePropertyValue(computed.marginTop),
+      marginRight: parsePropertyValue(computed.marginRight),
+      marginBottom: parsePropertyValue(computed.marginBottom),
+      marginLeft: parsePropertyValue(computed.marginLeft),
+      gap: parsePropertyValue(computed.gap || "0px")
+    },
+    borderRadius: {
+      borderTopLeftRadius: parsePropertyValue(computed.borderTopLeftRadius),
+      borderTopRightRadius: parsePropertyValue(computed.borderTopRightRadius),
+      borderBottomRightRadius: parsePropertyValue(computed.borderBottomRightRadius),
+      borderBottomLeftRadius: parsePropertyValue(computed.borderBottomLeftRadius)
+    },
+    flex: {
+      display: computed.display,
+      flexDirection: computed.flexDirection,
+      justifyContent: computed.justifyContent,
+      alignItems: computed.alignItems
     }
   };
 }
-function getComputedSizing(element) {
+function getComputedBorderStyles(element) {
+  const computed = window.getComputedStyle(element);
+  const topStyle = computed.borderTopStyle;
+  const rightStyle = computed.borderRightStyle;
+  const bottomStyle = computed.borderBottomStyle;
+  const leftStyle = computed.borderLeftStyle;
+  const topWidth = parsePropertyValue(computed.borderTopWidth);
+  const rightWidth = parsePropertyValue(computed.borderRightWidth);
+  const bottomWidth = parsePropertyValue(computed.borderBottomWidth);
+  const leftWidth = parsePropertyValue(computed.borderLeftWidth);
   return {
-    width: getSizingValue(element, "width"),
-    height: getSizingValue(element, "height")
+    borderTopStyle: topStyle,
+    borderTopWidth: topWidth,
+    borderRightStyle: rightStyle,
+    borderRightWidth: rightWidth,
+    borderBottomStyle: bottomStyle,
+    borderBottomWidth: bottomWidth,
+    borderLeftStyle: leftStyle,
+    borderLeftWidth: leftWidth
   };
 }
-function sizingValueToCSS(sizing) {
-  switch (sizing.mode) {
-    case "fill":
-      return "100%";
-    case "fit":
-      return "fit-content";
-    case "fixed":
-      return `${sizing.value.numericValue}${sizing.value.unit}`;
-  }
-}
-function sizingToTailwind(dimension, sizing) {
-  const prefix = dimension === "width" ? "w" : "h";
-  switch (sizing.mode) {
-    case "fill":
-      return `${prefix}-full`;
-    case "fit":
-      return `${prefix}-fit`;
-    case "fixed":
-      return `${prefix}-[${sizing.value.numericValue}${sizing.value.unit}]`;
+var ORIGINAL_STYLE_PROPS = [
+  "padding-top",
+  "padding-right",
+  "padding-bottom",
+  "padding-left",
+  "padding",
+  "margin-top",
+  "margin-right",
+  "margin-bottom",
+  "margin-left",
+  "margin",
+  "gap",
+  "border-radius",
+  "border-top-left-radius",
+  "border-top-right-radius",
+  "border-bottom-right-radius",
+  "border-bottom-left-radius",
+  "border",
+  "border-style",
+  "border-width",
+  "border-top-style",
+  "border-top-width",
+  "border-right-style",
+  "border-right-width",
+  "border-bottom-style",
+  "border-bottom-width",
+  "border-left-style",
+  "border-left-width",
+  "display",
+  "flex-direction",
+  "justify-content",
+  "align-items",
+  "width",
+  "height",
+  "background-color",
+  "background",
+  "color",
+  "border-color",
+  "outline-color",
+  "outline-style",
+  "outline-width",
+  "box-shadow",
+  "font-family",
+  "font-weight",
+  "font-size",
+  "line-height",
+  "letter-spacing",
+  "text-align"
+];
+function getOriginalInlineStyles(element) {
+  const styles = {};
+  for (const prop of ORIGINAL_STYLE_PROPS) {
+    const value = element.style.getPropertyValue(prop);
+    if (value) {
+      styles[prop] = value;
+    }
   }
+  return styles;
 }
-function parseHexColor(hex) {
-  const raw = hex;
-  let h = hex.replace("#", "");
-  if (h.length === 3) {
-    h = h.split("").map((c) => c + c).join("");
+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 },
+  "padding-inline": { prefix: "px", scale: spacingScale },
+  "padding-block": { prefix: "py", scale: spacingScale },
+  "padding-top": { prefix: "pt", scale: spacingScale },
+  "padding-right": { prefix: "pr", scale: spacingScale },
+  "padding-bottom": { prefix: "pb", scale: spacingScale },
+  "padding-left": { prefix: "pl", scale: spacingScale },
+  margin: { prefix: "m", scale: spacingScale },
+  "margin-inline": { prefix: "mx", scale: spacingScale },
+  "margin-block": { prefix: "my", scale: spacingScale },
+  "margin-top": { prefix: "mt", scale: spacingScale },
+  "margin-right": { prefix: "mr", scale: spacingScale },
+  "margin-bottom": { prefix: "mb", scale: spacingScale },
+  "margin-left": { prefix: "ml", scale: spacingScale },
+  gap: { prefix: "gap", scale: spacingScale },
+  "border-width": {
+    prefix: "border",
+    scale: { 0: "0", 1: "", 2: "2", 4: "4", 8: "8" }
+  },
+  "border-top-width": {
+    prefix: "border-t",
+    scale: { 0: "0", 1: "", 2: "2", 4: "4", 8: "8" }
+  },
+  "border-right-width": {
+    prefix: "border-r",
+    scale: { 0: "0", 1: "", 2: "2", 4: "4", 8: "8" }
+  },
+  "border-bottom-width": {
+    prefix: "border-b",
+    scale: { 0: "0", 1: "", 2: "2", 4: "4", 8: "8" }
+  },
+  "border-left-width": {
+    prefix: "border-l",
+    scale: { 0: "0", 1: "", 2: "2", 4: "4", 8: "8" }
+  },
+  "border-radius": {
+    prefix: "rounded",
+    scale: { 0: "none", 2: "sm", 4: "", 6: "md", 8: "lg", 12: "xl", 16: "2xl", 24: "3xl", 9999: "full" }
+  },
+  "border-top-left-radius": {
+    prefix: "rounded-tl",
+    scale: { 0: "none", 2: "sm", 4: "", 6: "md", 8: "lg", 12: "xl", 16: "2xl", 24: "3xl", 9999: "full" }
+  },
+  "border-top-right-radius": {
+    prefix: "rounded-tr",
+    scale: { 0: "none", 2: "sm", 4: "", 6: "md", 8: "lg", 12: "xl", 16: "2xl", 24: "3xl", 9999: "full" }
+  },
+  "border-bottom-right-radius": {
+    prefix: "rounded-br",
+    scale: { 0: "none", 2: "sm", 4: "", 6: "md", 8: "lg", 12: "xl", 16: "2xl", 24: "3xl", 9999: "full" }
+  },
+  "border-bottom-left-radius": {
+    prefix: "rounded-bl",
+    scale: { 0: "none", 2: "sm", 4: "", 6: "md", 8: "lg", 12: "xl", 16: "2xl", 24: "3xl", 9999: "full" }
   }
-  if (h.length === 8) {
-    const alpha = Math.round(parseInt(h.slice(6, 8), 16) / 255 * 100);
-    return { hex: h.slice(0, 6).toUpperCase(), alpha, raw };
+};
+var flexDirectionMap = {
+  row: "flex-row",
+  "row-reverse": "flex-row-reverse",
+  column: "flex-col",
+  "column-reverse": "flex-col-reverse"
+};
+var justifyContentMap = {
+  "flex-start": "justify-start",
+  "flex-end": "justify-end",
+  center: "justify-center",
+  "space-between": "justify-between",
+  "space-around": "justify-around",
+  "space-evenly": "justify-evenly",
+  start: "justify-start",
+  end: "justify-end"
+};
+var alignItemsMap = {
+  "flex-start": "items-start",
+  "flex-end": "items-end",
+  center: "items-center",
+  baseline: "items-baseline",
+  stretch: "items-stretch",
+  start: "items-start",
+  end: "items-end"
+};
+function getExactScaleValue(value, scale) {
+  if (Object.prototype.hasOwnProperty.call(scale, value)) {
+    return scale[value];
   }
-  return { hex: h.toUpperCase(), alpha: 100, raw };
+  return null;
 }
-function parseRgbChannel(value) {
-  const token = value.trim();
-  if (!token) return null;
-  if (token.endsWith("%")) {
-    const numeric2 = parseFloat(token.slice(0, -1));
-    if (!Number.isFinite(numeric2)) return null;
-    return Math.round(Math.max(0, Math.min(100, numeric2)) / 100 * 255);
-  }
-  const numeric = parseFloat(token);
-  if (!Number.isFinite(numeric)) return null;
-  return Math.round(Math.max(0, Math.min(255, numeric)));
+function normalizeTailwindArbitraryValue(value) {
+  return value.trim().replace(/\s+/g, "_");
 }
-function parseRgbAlpha(value) {
-  if (value == null || value.trim() === "") return 1;
-  const token = value.trim();
-  if (token.endsWith("%")) {
-    const numeric2 = parseFloat(token.slice(0, -1));
-    if (!Number.isFinite(numeric2)) return null;
-    return Math.max(0, Math.min(100, numeric2)) / 100;
-  }
-  const numeric = parseFloat(token);
-  if (!Number.isFinite(numeric)) return null;
-  return Math.max(0, Math.min(1, numeric));
+function normalizeShadowForComparison(value) {
+  return value.trim().toLowerCase().replace(/\s*\/\s*/g, "/").replace(/\(\s+/g, "(").replace(/\s+\)/g, ")").replace(/\s*,\s*/g, ",").replace(/\s+/g, " ");
 }
-function parseRgbaColor(rgba) {
-  const raw = rgba.trim();
-  const fnMatch = raw.match(/^rgba?\((.*)\)$/i);
-  if (!fnMatch) {
-    return { hex: "000000", alpha: 100, raw: rgba };
-  }
-  const body = fnMatch[1].trim();
-  let channelTokens = null;
-  let alphaToken;
-  const commaParts = body.split(",").map((part) => part.trim()).filter(Boolean);
-  if (commaParts.length === 3 || commaParts.length === 4) {
-    channelTokens = [commaParts[0], commaParts[1], commaParts[2]];
-    alphaToken = commaParts[3];
-  } else {
-    const slashParts = body.split("/");
-    if (slashParts.length === 1 || slashParts.length === 2) {
-      const channels = slashParts[0].trim().split(/\s+/).filter(Boolean);
-      if (channels.length === 3) {
-        channelTokens = [channels[0], channels[1], channels[2]];
-        alphaToken = slashParts[1]?.trim();
+var tailwindShadowClassValues = [
+  { className: "shadow-2xs", css: "0 1px rgb(0 0 0 / 0.05)" },
+  { className: "shadow-xs", css: "0 1px 2px 0 rgb(0 0 0 / 0.05)" },
+  { className: "shadow", css: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)" },
+  { className: "shadow-sm", css: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)" },
+  { className: "shadow-md", css: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)" },
+  { className: "shadow-lg", css: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)" },
+  { className: "shadow-xl", css: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)" },
+  { className: "shadow-2xl", css: "0 25px 50px -12px rgb(0 0 0 / 0.25)" },
+  { className: "shadow-inner", css: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)" }
+];
+function stylesToTailwind(styles) {
+  const classes = [];
+  for (const [prop, value] of Object.entries(styles)) {
+    if (tailwindClassMap[prop]) {
+      const parsed = parsePropertyValue(value);
+      const mapping = tailwindClassMap[prop];
+      if (value === "auto") {
+        classes.push(`${mapping.prefix}-auto`);
+        continue;
+      }
+      if (parsed.unit === "px") {
+        const exactScale = getExactScaleValue(parsed.numericValue, mapping.scale);
+        if (exactScale !== null) {
+          if (exactScale === "") {
+            classes.push(mapping.prefix);
+          } else {
+            classes.push(`${mapping.prefix}-${exactScale}`);
+          }
+          continue;
+        }
       }
+      classes.push(`${mapping.prefix}-[${value}]`);
+      continue;
     }
-  }
-  if (!channelTokens) {
-    return { hex: "000000", alpha: 100, raw: rgba };
-  }
-  const r = parseRgbChannel(channelTokens[0]);
-  const g = parseRgbChannel(channelTokens[1]);
-  const b = parseRgbChannel(channelTokens[2]);
-  const a = parseRgbAlpha(alphaToken);
-  if (r === null || g === null || b === null || a === null) {
-    return { hex: "000000", alpha: 100, raw: rgba };
-  }
-  const hex = [r, g, b].map((v) => v.toString(16).padStart(2, "0")).join("").toUpperCase();
-  const alpha = Math.round(a * 100);
-  return { hex, alpha, raw: rgba };
-}
-function parseNamedColor(name) {
-  const ctx = document.createElement("canvas").getContext("2d");
-  if (!ctx) {
-    return { hex: "000000", alpha: 100, raw: name };
-  }
-  ctx.fillStyle = name;
-  const computed = ctx.fillStyle;
-  if (computed.startsWith("#")) {
-    return parseHexColor(computed);
-  }
-  return parseRgbaColor(computed);
-}
-function parseColorValue(cssValue) {
-  const raw = cssValue.trim();
-  if (raw === "transparent") {
-    return { hex: "000000", alpha: 0, raw };
-  }
-  if (raw.startsWith("#")) {
-    return parseHexColor(raw);
-  }
-  if (raw.startsWith("rgb")) {
-    return parseRgbaColor(raw);
-  }
-  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") {
+    if (prop === "flex-direction" && flexDirectionMap[value]) {
+      classes.push(flexDirectionMap[value]);
       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 (prop === "justify-content" && justifyContentMap[value]) {
+      classes.push(justifyContentMap[value]);
+      continue;
+    }
+    if (prop === "align-items" && alignItemsMap[value]) {
+      classes.push(alignItemsMap[value]);
+      continue;
+    }
+    if (prop === "display") {
+      if (value === "flex") classes.push("flex");
+      else if (value === "inline-flex") classes.push("inline-flex");
+      else if (value === "grid") classes.push("grid");
+      else if (value === "block") classes.push("block");
+      else if (value === "inline-block") classes.push("inline-block");
+      else if (value === "none") classes.push("hidden");
+      continue;
+    }
+    if (prop === "width") {
+      if (value === "100%") classes.push("w-full");
+      else if (value === "fit-content") classes.push("w-fit");
+      else if (value === "auto") classes.push("w-auto");
+      else classes.push(`w-[${value}]`);
+      continue;
+    }
+    if (prop === "height") {
+      if (value === "100%") classes.push("h-full");
+      else if (value === "fit-content") classes.push("h-fit");
+      else if (value === "auto") classes.push("h-auto");
+      else classes.push(`h-[${value}]`);
+      continue;
+    }
+    if (prop === "background-color") {
+      const colorValue = parseColorValue(value);
+      classes.push(colorToTailwind("backgroundColor", colorValue));
+      continue;
+    }
+    if (prop === "color") {
+      const colorValue = parseColorValue(value);
+      classes.push(colorToTailwind("color", colorValue));
+      continue;
+    }
+    if (prop === "border-color") {
+      const colorValue = parseColorValue(value);
+      classes.push(colorToTailwind("borderColor", colorValue));
+      continue;
+    }
+    if (prop === "border-style") {
+      const styleMap = {
+        none: "border-none",
+        solid: "border-solid",
+        dashed: "border-dashed",
+        dotted: "border-dotted",
+        double: "border-double"
+      };
+      classes.push(styleMap[value] || `[border-style:${value}]`);
+      continue;
+    }
+    if (prop === "border-top-style" || prop === "border-right-style" || prop === "border-bottom-style" || prop === "border-left-style") {
+      const allPresent = "border-top-style" in styles && "border-right-style" in styles && "border-bottom-style" in styles && "border-left-style" in styles;
+      if (allPresent) {
+        if (prop === "border-top-style") {
+          const allSame = styles["border-top-style"] === styles["border-right-style"] && styles["border-top-style"] === styles["border-bottom-style"] && styles["border-top-style"] === styles["border-left-style"];
+          if (allSame) {
+            const styleMap = {
+              none: "border-none",
+              solid: "border-solid",
+              dashed: "border-dashed",
+              dotted: "border-dotted",
+              double: "border-double"
+            };
+            classes.push(styleMap[value] || `[border-style:${value}]`);
+          } else {
+            classes.push(`[border-top-style:${styles["border-top-style"]}]`);
+            classes.push(`[border-right-style:${styles["border-right-style"]}]`);
+            classes.push(`[border-bottom-style:${styles["border-bottom-style"]}]`);
+            classes.push(`[border-left-style:${styles["border-left-style"]}]`);
+          }
+        }
+      } else {
+        classes.push(`[${prop}:${value}]`);
       }
-      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);
+      continue;
+    }
+    if (prop === "outline-color") {
+      const colorValue = parseColorValue(value);
+      classes.push(colorToTailwind("outlineColor", colorValue));
+      continue;
+    }
+    if (prop === "box-shadow") {
+      const trimmed = value.trim();
+      if (trimmed === "none" || trimmed === "") {
+        classes.push("shadow-none");
+      } else {
+        const normalized = normalizeShadowForComparison(trimmed);
+        const preset = tailwindShadowClassValues.find(
+          (entry) => normalizeShadowForComparison(entry.css) === normalized
+        );
+        if (preset) classes.push(preset.className);
+        else classes.push(`shadow-[${normalizeTailwindArbitraryValue(value)}]`);
       }
+      continue;
     }
-    for (const child of node.children) {
-      queue.push(child);
+    if (prop === "font-size") {
+      classes.push(`text-[${value}]`);
+      continue;
+    }
+    if (prop === "font-weight") {
+      const weightMap = {
+        "100": "font-thin",
+        "200": "font-extralight",
+        "300": "font-light",
+        "400": "font-normal",
+        "500": "font-medium",
+        "600": "font-semibold",
+        "700": "font-bold",
+        "800": "font-extrabold",
+        "900": "font-black"
+      };
+      classes.push(weightMap[value] || `font-[${value}]`);
+      continue;
+    }
+    if (prop === "line-height") {
+      classes.push(`leading-[${value}]`);
+      continue;
+    }
+    if (prop === "letter-spacing") {
+      classes.push(`tracking-[${value}]`);
+      continue;
+    }
+    if (prop === "text-align") {
+      const alignMap = {
+        left: "text-left",
+        center: "text-center",
+        right: "text-right",
+        justify: "text-justify"
+      };
+      if (alignMap[value]) classes.push(alignMap[value]);
+      continue;
+    }
+    if (prop === "font-family") {
+      classes.push(`font-[${value.replace(/\s+/g, "_")}]`);
+      continue;
     }
   }
-  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)
-  };
+  return classes.join(" ");
 }
-var colorPropertyToCSSMap = {
-  backgroundColor: "background-color",
-  color: "color",
-  borderColor: "border-color",
-  outlineColor: "outline-color"
+var propertyToCSSMap = {
+  paddingTop: "padding-top",
+  paddingRight: "padding-right",
+  paddingBottom: "padding-bottom",
+  paddingLeft: "padding-left",
+  marginTop: "margin-top",
+  marginRight: "margin-right",
+  marginBottom: "margin-bottom",
+  marginLeft: "margin-left",
+  gap: "gap"
 };
-var colorTailwindPrefixMap = {
-  backgroundColor: "bg",
-  color: "text",
-  borderColor: "border",
-  outlineColor: "outline"
+var borderRadiusPropertyToCSSMap = {
+  borderTopLeftRadius: "border-top-left-radius",
+  borderTopRightRadius: "border-top-right-radius",
+  borderBottomRightRadius: "border-bottom-right-radius",
+  borderBottomLeftRadius: "border-bottom-left-radius"
+};
+var borderPropertyToCSSMap = {
+  borderTopStyle: "border-top-style",
+  borderTopWidth: "border-top-width",
+  borderRightStyle: "border-right-style",
+  borderRightWidth: "border-right-width",
+  borderBottomStyle: "border-bottom-style",
+  borderBottomWidth: "border-bottom-width",
+  borderLeftStyle: "border-left-style",
+  borderLeftWidth: "border-left-width"
+};
+var flexPropertyToCSSMap = {
+  display: "display",
+  flexDirection: "flex-direction",
+  justifyContent: "justify-content",
+  alignItems: "align-items"
+};
+var sizingPropertyToCSSMap = {
+  width: "width",
+  height: "height"
+};
+var typographyPropertyToCSSMap = {
+  fontFamily: "font-family",
+  fontWeight: "font-weight",
+  fontSize: "font-size",
+  lineHeight: "line-height",
+  letterSpacing: "letter-spacing",
+  textAlign: "text-align",
+  textVerticalAlign: "align-items"
 };
-function colorToTailwind(property, colorValue) {
-  const prefix = colorTailwindPrefixMap[property];
-  if (colorValue.alpha === 100) {
-    return `${prefix}-[#${colorValue.hex}]`;
-  }
-  return `${prefix}-[#${colorValue.hex}]/${colorValue.alpha}`;
+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())
+  );
 }
-function getElementInfo(element) {
-  const computed = window.getComputedStyle(element);
-  const parentElement = element === document.body ? null : element.parentElement;
-  const isFlexContainer2 = computed.display === "flex" || computed.display === "inline-flex";
-  let isFlexItem = false;
-  if (parentElement) {
-    const parentComputed = window.getComputedStyle(parentElement);
-    isFlexItem = parentComputed.display === "flex" || parentComputed.display === "inline-flex";
+function isTextElement2(element) {
+  const tagName = element.tagName.toLowerCase();
+  if (TEXT_ELEMENT_TAGS.has(tagName)) {
+    return true;
   }
-  return {
-    tagName: element.tagName.toLowerCase(),
-    id: element.id || null,
-    classList: Array.from(element.classList),
-    isFlexContainer: isFlexContainer2,
-    isFlexItem,
-    isTextElement: isTextElement2(element),
-    parentElement,
-    hasChildren: element.children.length > 0
-  };
-}
-function isFitSizing(element, dimension) {
-  const computed = window.getComputedStyle(element);
-  const inlineValue = element.style[dimension];
-  if (inlineValue === "auto") return true;
-  const computedValue = computed[dimension];
-  if (!inlineValue) {
-    const parent = element.parentElement;
-    if (parent) {
-      const parentComputed = window.getComputedStyle(parent);
-      if (parentComputed.display === "flex" || parentComputed.display === "inline-flex") {
-        const flexBasis = computed.flexBasis;
-        const flexGrow = computed.flexGrow;
-        if (flexBasis === "auto" && flexGrow === "0") {
-          return true;
-        }
-      }
-    }
-    if (dimension === "width") {
-      if (computed.display === "block" && !inlineValue) {
-        return false;
-      }
-      if (computed.display === "inline-block" || computed.display === "inline-flex" || computed.display === "inline") {
-        return true;
-      }
-    }
-    if (dimension === "height") {
-      return !inlineValue;
-    }
+  if (hasDirectNonWhitespaceText(element)) {
+    return true;
   }
-  if (computedValue.includes("fit-content") || computedValue.includes("max-content")) {
+  if (element.children.length === 0 && element.textContent?.trim()) {
     return true;
   }
   return false;
 }
-function getDimensionDisplay(element) {
-  const width = Math.round(element.offsetWidth);
-  const height = Math.round(element.offsetHeight);
-  const widthIsFit = isFitSizing(element, "width");
-  const heightIsFit = isFitSizing(element, "height");
+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 {
-    width: widthIsFit ? `Fit ${width}` : `${width}`,
-    height: heightIsFit ? `Fit ${height}` : `${height}`
+    fontFamily: computed.fontFamily,
+    fontWeight: computed.fontWeight,
+    fontSize: parsePropertyValue(computed.fontSize),
+    lineHeight,
+    letterSpacing,
+    textAlign: computed.textAlign,
+    textVerticalAlign
   };
 }
-function calculateParentMeasurements(element, container) {
-  const parent = container ?? element.parentElement;
-  if (!parent) return [];
-  const elementRect = element.getBoundingClientRect();
-  const parentRect = parent.getBoundingClientRect();
-  const paddingBoxLeft = parentRect.left + parent.clientLeft;
-  const paddingBoxTop = parentRect.top + parent.clientTop;
-  const paddingBoxRight = parentRect.left + parent.clientLeft + parent.clientWidth;
-  const paddingBoxBottom = parentRect.top + parent.clientTop + parent.clientHeight;
-  let parentInnerLeft;
-  let parentInnerTop;
-  let parentInnerRight;
-  let parentInnerBottom;
-  if (container) {
-    parentInnerLeft = paddingBoxLeft;
-    parentInnerTop = paddingBoxTop;
-    parentInnerRight = paddingBoxRight;
-    parentInnerBottom = paddingBoxBottom;
-  } else {
-    const parentStyles = window.getComputedStyle(parent);
-    parentInnerLeft = paddingBoxLeft + (parseFloat(parentStyles.paddingLeft) || 0);
-    parentInnerTop = paddingBoxTop + (parseFloat(parentStyles.paddingTop) || 0);
-    parentInnerRight = paddingBoxRight - (parseFloat(parentStyles.paddingRight) || 0);
-    parentInnerBottom = paddingBoxBottom - (parseFloat(parentStyles.paddingBottom) || 0);
-  }
-  const zoom = getZoomScale();
-  const measurements = [];
-  const topDistance = Math.round((elementRect.top - parentInnerTop) / zoom);
-  if (topDistance > 0) {
-    const midX = elementRect.left + elementRect.width / 2;
-    measurements.push({
-      direction: "vertical",
-      x1: midX,
-      y1: parentInnerTop,
-      x2: midX,
-      y2: elementRect.top,
-      distance: topDistance,
-      labelPosition: { x: midX, y: (parentInnerTop + elementRect.top) / 2 }
-    });
-  }
-  const bottomDistance = Math.round((parentInnerBottom - elementRect.bottom) / zoom);
-  if (bottomDistance > 0) {
-    const midX = elementRect.left + elementRect.width / 2;
-    measurements.push({
-      direction: "vertical",
-      x1: midX,
-      y1: elementRect.bottom,
-      x2: midX,
-      y2: parentInnerBottom,
-      distance: bottomDistance,
-      labelPosition: { x: midX, y: (elementRect.bottom + parentInnerBottom) / 2 }
-    });
-  }
-  const leftDistance = Math.round((elementRect.left - parentInnerLeft) / zoom);
-  if (leftDistance > 0) {
-    const midY = elementRect.top + elementRect.height / 2;
-    measurements.push({
-      direction: "horizontal",
-      x1: parentInnerLeft,
-      y1: midY,
-      x2: elementRect.left,
-      y2: midY,
-      distance: leftDistance,
-      labelPosition: { x: (parentInnerLeft + elementRect.left) / 2, y: midY }
-    });
-  }
-  const rightDistance = Math.round((parentInnerRight - elementRect.right) / zoom);
-  if (rightDistance > 0) {
-    const midY = elementRect.top + elementRect.height / 2;
-    measurements.push({
-      direction: "horizontal",
-      x1: elementRect.right,
-      y1: midY,
-      x2: parentInnerRight,
-      y2: midY,
-      distance: rightDistance,
-      labelPosition: { x: (elementRect.right + parentInnerRight) / 2, y: midY }
-    });
+function detectSizingMode(element, dimension) {
+  const computed = window.getComputedStyle(element);
+  const inlineValue = element.style[dimension];
+  if (inlineValue === "100%") return "fill";
+  if (inlineValue === "auto" || inlineValue === "fit-content") return "fit";
+  const computedValue = computed[dimension];
+  if (computedValue === "100%") return "fill";
+  if (computedValue === "auto" || computedValue === "fit-content" || computedValue === "max-content") {
+    return "fit";
   }
-  return measurements;
-}
-function calculateElementMeasurements(from, to) {
-  const fromRect = from.getBoundingClientRect();
-  const toRect = to.getBoundingClientRect();
-  const zoom = getZoomScale();
-  const measurements = [];
-  const horizontalOverlap = fromRect.left < toRect.right && fromRect.right > toRect.left;
-  const verticalOverlap = fromRect.top < toRect.bottom && fromRect.bottom > toRect.top;
-  if (verticalOverlap) {
-    const overlapTop = Math.max(fromRect.top, toRect.top);
-    const overlapBottom = Math.min(fromRect.bottom, toRect.bottom);
-    const midY = (overlapTop + overlapBottom) / 2;
-    if (fromRect.right <= toRect.left) {
-      const distance = Math.round((toRect.left - fromRect.right) / zoom);
-      measurements.push({
-        direction: "horizontal",
-        x1: fromRect.right,
-        y1: midY,
-        x2: toRect.left,
-        y2: midY,
-        distance,
-        labelPosition: { x: (fromRect.right + toRect.left) / 2, y: midY }
-      });
-    } else if (fromRect.left >= toRect.right) {
-      const distance = Math.round((fromRect.left - toRect.right) / zoom);
-      measurements.push({
-        direction: "horizontal",
-        x1: toRect.right,
-        y1: midY,
-        x2: fromRect.left,
-        y2: midY,
-        distance,
-        labelPosition: { x: (toRect.right + fromRect.left) / 2, y: midY }
-      });
+  const parent = element.parentElement;
+  if (parent) {
+    const parentComputed = window.getComputedStyle(parent);
+    if (parentComputed.display === "flex" || parentComputed.display === "inline-flex") {
+      const flexGrow = computed.flexGrow;
+      if (flexGrow !== "0") {
+        return "fill";
+      }
     }
   }
-  if (horizontalOverlap) {
-    const overlapLeft = Math.max(fromRect.left, toRect.left);
-    const overlapRight = Math.min(fromRect.right, toRect.right);
-    const midX = (overlapLeft + overlapRight) / 2;
-    if (fromRect.bottom <= toRect.top) {
-      const distance = Math.round((toRect.top - fromRect.bottom) / zoom);
-      measurements.push({
-        direction: "vertical",
-        x1: midX,
-        y1: fromRect.bottom,
-        x2: midX,
-        y2: toRect.top,
-        distance,
-        labelPosition: { x: midX, y: (fromRect.bottom + toRect.top) / 2 }
-      });
-    } else if (fromRect.top >= toRect.bottom) {
-      const distance = Math.round((fromRect.top - toRect.bottom) / zoom);
-      measurements.push({
-        direction: "vertical",
-        x1: midX,
-        y1: toRect.bottom,
-        x2: midX,
-        y2: fromRect.top,
-        distance,
-        labelPosition: { x: midX, y: (toRect.bottom + fromRect.top) / 2 }
-      });
+  if (dimension === "width") {
+    if (computed.display === "block" && !inlineValue) {
+      return "fill";
     }
-  }
-  if (!horizontalOverlap && !verticalOverlap) {
-    const fromCenterX = fromRect.left + fromRect.width / 2;
-    const fromCenterY = fromRect.top + fromRect.height / 2;
-    const toCenterX = toRect.left + toRect.width / 2;
-    const toCenterY = toRect.top + toRect.height / 2;
-    const hDistance = toCenterX > fromCenterX ? Math.round((toRect.left - fromRect.right) / zoom) : Math.round((fromRect.left - toRect.right) / zoom);
-    if (hDistance > 0) {
-      const startX = toCenterX > fromCenterX ? fromRect.right : fromRect.left;
-      const endX = toCenterX > fromCenterX ? toRect.left : toRect.right;
-      const y = (fromCenterY + toCenterY) / 2;
-      measurements.push({
-        direction: "horizontal",
-        x1: startX,
-        y1: y,
-        x2: endX,
-        y2: y,
-        distance: hDistance,
-        labelPosition: { x: (startX + endX) / 2, y }
-      });
+    if (computed.display === "inline-block" || computed.display === "inline-flex" || computed.display === "inline") {
+      return "fit";
     }
-    const vDistance = toCenterY > fromCenterY ? Math.round((toRect.top - fromRect.bottom) / zoom) : Math.round((fromRect.top - toRect.bottom) / zoom);
-    if (vDistance > 0) {
-      const x = (fromCenterX + toCenterX) / 2;
-      const startY = toCenterY > fromCenterY ? fromRect.bottom : fromRect.top;
-      const endY = toCenterY > fromCenterY ? toRect.top : toRect.bottom;
-      measurements.push({
-        direction: "vertical",
-        x1: x,
-        y1: startY,
-        x2: x,
-        y2: endY,
-        distance: vDistance,
-        labelPosition: { x, y: (startY + endY) / 2 }
-      });
+  }
+  if (dimension === "height") {
+    if (!inlineValue) {
+      return "fit";
     }
   }
-  return measurements;
+  return "fixed";
 }
-var GUIDELINE_PROXIMITY = 80;
-function calculateGuidelineMeasurements(element, guidelines, mousePosition) {
-  if (guidelines.length === 0) return [];
-  const snap = getCanvasSnapshot();
-  const zoom = snap.active ? snap.zoom : 1;
-  const rect = element.getBoundingClientRect();
-  const measurements = [];
-  for (const g of guidelines) {
-    let viewportPos;
-    if (snap.active) {
-      const pan = g.orientation === "horizontal" ? snap.panY : snap.panX;
-      const bo = g.orientation === "horizontal" ? getBodyOffset().y : getBodyOffset().x;
-      viewportPos = bo + (g.position - bo + pan) * zoom;
-    } else {
-      const scroll = g.orientation === "horizontal" ? window.scrollY : window.scrollX;
-      viewportPos = g.position - scroll;
+function getSizingValue(element, dimension) {
+  const mode = detectSizingMode(element, dimension);
+  const numericValue = Math.round(dimension === "width" ? element.offsetWidth : element.offsetHeight);
+  return {
+    mode,
+    value: {
+      numericValue,
+      unit: "px",
+      raw: `${numericValue}px`
     }
-    if (g.orientation === "horizontal") {
-      const midX = rect.left + rect.width / 2;
-      if (mousePosition && Math.abs(mousePosition.y - viewportPos) > GUIDELINE_PROXIMITY) continue;
-      if (viewportPos < rect.top) {
-        const distance = Math.round((rect.top - viewportPos) / zoom);
-        if (distance > 0) {
-          measurements.push({
-            direction: "vertical",
-            x1: midX,
-            y1: viewportPos,
-            x2: midX,
-            y2: rect.top,
-            distance,
-            labelPosition: { x: midX, y: (viewportPos + rect.top) / 2 }
-          });
-        }
-      } else if (viewportPos > rect.bottom) {
-        const distance = Math.round((viewportPos - rect.bottom) / zoom);
-        if (distance > 0) {
-          measurements.push({
-            direction: "vertical",
-            x1: midX,
-            y1: rect.bottom,
-            x2: midX,
-            y2: viewportPos,
-            distance,
-            labelPosition: { x: midX, y: (rect.bottom + viewportPos) / 2 }
-          });
-        }
-      }
-    } else {
-      const midY = rect.top + rect.height / 2;
-      if (mousePosition && Math.abs(mousePosition.x - viewportPos) > GUIDELINE_PROXIMITY) continue;
-      if (viewportPos < rect.left) {
-        const distance = Math.round((rect.left - viewportPos) / zoom);
-        if (distance > 0) {
-          measurements.push({
-            direction: "horizontal",
-            x1: viewportPos,
-            y1: midY,
-            x2: rect.left,
-            y2: midY,
-            distance,
-            labelPosition: { x: (viewportPos + rect.left) / 2, y: midY }
-          });
-        }
-      } else if (viewportPos > rect.right) {
-        const distance = Math.round((viewportPos - rect.right) / zoom);
-        if (distance > 0) {
-          measurements.push({
-            direction: "horizontal",
-            x1: rect.right,
-            y1: midY,
-            x2: viewportPos,
-            y2: midY,
-            distance,
-            labelPosition: { x: (rect.right + viewportPos) / 2, y: midY }
-          });
-        }
+  };
+}
+function getComputedSizing(element) {
+  return {
+    width: getSizingValue(element, "width"),
+    height: getSizingValue(element, "height")
+  };
+}
+function sizingValueToCSS(sizing) {
+  switch (sizing.mode) {
+    case "fill":
+      return "100%";
+    case "fit":
+      return "fit-content";
+    case "fixed":
+      return `${sizing.value.numericValue}${sizing.value.unit}`;
+  }
+}
+function sizingToTailwind(dimension, sizing) {
+  const prefix = dimension === "width" ? "w" : "h";
+  switch (sizing.mode) {
+    case "fill":
+      return `${prefix}-full`;
+    case "fit":
+      return `${prefix}-fit`;
+    case "fixed":
+      return `${prefix}-[${sizing.value.numericValue}${sizing.value.unit}]`;
+  }
+}
+function parseHexColor(hex) {
+  const raw = hex;
+  let h = hex.replace("#", "");
+  if (h.length === 3) {
+    h = h.split("").map((c) => c + c).join("");
+  }
+  if (h.length === 8) {
+    const alpha = Math.round(parseInt(h.slice(6, 8), 16) / 255 * 100);
+    return { hex: h.slice(0, 6).toUpperCase(), alpha, raw };
+  }
+  return { hex: h.toUpperCase(), alpha: 100, raw };
+}
+function parseRgbChannel(value) {
+  const token = value.trim();
+  if (!token) return null;
+  if (token.endsWith("%")) {
+    const numeric2 = parseFloat(token.slice(0, -1));
+    if (!Number.isFinite(numeric2)) return null;
+    return Math.round(Math.max(0, Math.min(100, numeric2)) / 100 * 255);
+  }
+  const numeric = parseFloat(token);
+  if (!Number.isFinite(numeric)) return null;
+  return Math.round(Math.max(0, Math.min(255, numeric)));
+}
+function parseRgbAlpha(value) {
+  if (value == null || value.trim() === "") return 1;
+  const token = value.trim();
+  if (token.endsWith("%")) {
+    const numeric2 = parseFloat(token.slice(0, -1));
+    if (!Number.isFinite(numeric2)) return null;
+    return Math.max(0, Math.min(100, numeric2)) / 100;
+  }
+  const numeric = parseFloat(token);
+  if (!Number.isFinite(numeric)) return null;
+  return Math.max(0, Math.min(1, numeric));
+}
+function parseRgbaColor(rgba) {
+  const raw = rgba.trim();
+  const fnMatch = raw.match(/^rgba?\((.*)\)$/i);
+  if (!fnMatch) {
+    return { hex: "000000", alpha: 100, raw: rgba };
+  }
+  const body = fnMatch[1].trim();
+  let channelTokens = null;
+  let alphaToken;
+  const commaParts = body.split(",").map((part) => part.trim()).filter(Boolean);
+  if (commaParts.length === 3 || commaParts.length === 4) {
+    channelTokens = [commaParts[0], commaParts[1], commaParts[2]];
+    alphaToken = commaParts[3];
+  } else {
+    const slashParts = body.split("/");
+    if (slashParts.length === 1 || slashParts.length === 2) {
+      const channels = slashParts[0].trim().split(/\s+/).filter(Boolean);
+      if (channels.length === 3) {
+        channelTokens = [channels[0], channels[1], channels[2]];
+        alphaToken = slashParts[1]?.trim();
       }
     }
   }
-  return measurements;
+  if (!channelTokens) {
+    return { hex: "000000", alpha: 100, raw: rgba };
+  }
+  const r = parseRgbChannel(channelTokens[0]);
+  const g = parseRgbChannel(channelTokens[1]);
+  const b = parseRgbChannel(channelTokens[2]);
+  const a = parseRgbAlpha(alphaToken);
+  if (r === null || g === null || b === null || a === null) {
+    return { hex: "000000", alpha: 100, raw: rgba };
+  }
+  const hex = [r, g, b].map((v) => v.toString(16).padStart(2, "0")).join("").toUpperCase();
+  const alpha = Math.round(a * 100);
+  return { hex, alpha, raw: rgba };
+}
+function parseNamedColor(name) {
+  const ctx = document.createElement("canvas").getContext("2d");
+  if (!ctx) {
+    return { hex: "000000", alpha: 100, raw: name };
+  }
+  ctx.fillStyle = name;
+  const computed = ctx.fillStyle;
+  if (computed.startsWith("#")) {
+    return parseHexColor(computed);
+  }
+  return parseRgbaColor(computed);
 }
-function isFlexContainer(element) {
-  const computed = window.getComputedStyle(element);
-  return computed.display === "flex" || computed.display === "inline-flex";
+function parseColorValue(cssValue) {
+  const raw = cssValue.trim();
+  if (raw === "transparent") {
+    return { hex: "000000", alpha: 0, raw };
+  }
+  if (raw.startsWith("#")) {
+    return parseHexColor(raw);
+  }
+  if (raw.startsWith("rgb")) {
+    return parseRgbaColor(raw);
+  }
+  return parseNamedColor(raw);
 }
-function getFlexDirection(element) {
-  const computed = window.getComputedStyle(element);
-  return computed.flexDirection;
+var TRANSPARENT_COLOR = { hex: "000000", alpha: 0, raw: "transparent" };
+function isVisibleBorderSide(side) {
+  return side.style !== "none" && side.style !== "hidden" && parseFloat(side.width) > 0;
 }
-function isInFlowChild(el) {
-  const cs = window.getComputedStyle(el);
-  return cs.display !== "none" && cs.position !== "absolute" && cs.position !== "fixed";
+function hasVisibleOutline(computed) {
+  return computed.outlineStyle !== "none" && parseFloat(computed.outlineWidth) > 0;
 }
-function detectChildrenDirection(container, exclude) {
-  const computed = window.getComputedStyle(container);
-  if (computed.display === "flex" || computed.display === "inline-flex") {
-    const dir = computed.flexDirection;
-    return {
-      axis: dir === "row" || dir === "row-reverse" ? "horizontal" : "vertical",
-      reversed: dir === "row-reverse" || dir === "column-reverse"
-    };
+function parseVisibleColor(value, fallbackCurrentColor) {
+  const raw = value.trim();
+  const lowered = raw.toLowerCase();
+  if (!raw || lowered === "none" || lowered === "transparent") {
+    return null;
   }
-  const visible = [];
-  for (const c of container.children) {
-    if (!(c instanceof HTMLElement) || c === exclude) continue;
-    if (!isInFlowChild(c)) continue;
-    visible.push(c);
-    if (visible.length === 2) break;
+  const resolved = /^currentcolor$/i.test(raw) ? fallbackCurrentColor ?? raw : raw;
+  const parsed = parseColorValue(resolved);
+  if (parsed.alpha <= 0) {
+    return null;
   }
-  if (visible.length < 2) return { axis: "vertical", reversed: false };
-  const first = visible[0].getBoundingClientRect();
-  const second = visible[1].getBoundingClientRect();
-  const yOverlap = first.bottom - 2 > second.top && second.bottom - 2 > first.top;
-  if (yOverlap) {
-    return { axis: "horizontal", reversed: second.right < first.left };
+  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 { axis: "vertical", reversed: second.bottom < first.top };
+  return false;
 }
-function computeIntendedIndex(parent, draggedElement) {
-  const { axis } = detectChildrenDirection(parent, draggedElement);
-  const isHorizontal = axis === "horizontal";
-  const draggedRect = draggedElement.getBoundingClientRect();
-  const intendedCenter = isHorizontal ? draggedRect.left + draggedRect.width / 2 : draggedRect.top + draggedRect.height / 2;
-  const siblings = [];
-  for (const c of parent.children) {
-    if (!(c instanceof HTMLElement) || c === draggedElement) continue;
-    if (!isInFlowChild(c)) continue;
-    siblings.push(c);
+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);
+    }
   }
-  if (siblings.length === 0) {
-    return { index: 0, siblingBefore: null, siblingAfter: null };
+  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",
+  borderColor: "border-color",
+  outlineColor: "outline-color"
+};
+var colorTailwindPrefixMap = {
+  backgroundColor: "bg",
+  color: "text",
+  borderColor: "border",
+  outlineColor: "outline"
+};
+function colorToTailwind(property, colorValue) {
+  const prefix = colorTailwindPrefixMap[property];
+  if (colorValue.alpha === 100) {
+    return `${prefix}-[#${colorValue.hex}]`;
   }
-  for (let i = 0; i < siblings.length; i++) {
-    const rect = siblings[i].getBoundingClientRect();
-    const midpoint = isHorizontal ? rect.left + rect.width / 2 : rect.top + rect.height / 2;
-    if (intendedCenter < midpoint) {
-      return { index: i, siblingBefore: i > 0 ? siblings[i - 1] : null, siblingAfter: siblings[i] };
+  return `${prefix}-[#${colorValue.hex}]/${colorValue.alpha}`;
+}
+function getElementInfo(element) {
+  const computed = window.getComputedStyle(element);
+  const parentElement = element === document.body ? null : element.parentElement;
+  const isFlexContainer2 = computed.display === "flex" || computed.display === "inline-flex";
+  let isFlexItem = false;
+  if (parentElement) {
+    const parentComputed = window.getComputedStyle(parentElement);
+    isFlexItem = parentComputed.display === "flex" || parentComputed.display === "inline-flex";
+  }
+  return {
+    tagName: element.tagName.toLowerCase(),
+    id: element.id || null,
+    classList: Array.from(element.classList),
+    isFlexContainer: isFlexContainer2,
+    isFlexItem,
+    isTextElement: isTextElement2(element),
+    parentElement,
+    hasChildren: element.children.length > 0
+  };
+}
+function isFitSizing(element, dimension) {
+  const computed = window.getComputedStyle(element);
+  const inlineValue = element.style[dimension];
+  if (inlineValue === "auto") return true;
+  const computedValue = computed[dimension];
+  if (!inlineValue) {
+    const parent = element.parentElement;
+    if (parent) {
+      const parentComputed = window.getComputedStyle(parent);
+      if (parentComputed.display === "flex" || parentComputed.display === "inline-flex") {
+        const flexBasis = computed.flexBasis;
+        const flexGrow = computed.flexGrow;
+        if (flexBasis === "auto" && flexGrow === "0") {
+          return true;
+        }
+      }
+    }
+    if (dimension === "width") {
+      if (computed.display === "block" && !inlineValue) {
+        return false;
+      }
+      if (computed.display === "inline-block" || computed.display === "inline-flex" || computed.display === "inline") {
+        return true;
+      }
+    }
+    if (dimension === "height") {
+      return !inlineValue;
     }
   }
-  return { index: siblings.length, siblingBefore: siblings[siblings.length - 1], siblingAfter: null };
-}
-function htmlChildren(el) {
-  return Array.from(el.children).filter(
-    (child) => child instanceof HTMLElement
-  );
-}
-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;
+  if (computedValue.includes("fit-content") || computedValue.includes("max-content")) {
+    return true;
   }
-  return null;
+  return false;
 }
-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) };
+function getDimensionDisplay(element) {
+  const width = Math.round(element.offsetWidth);
+  const height = Math.round(element.offsetHeight);
+  const widthIsFit = isFitSizing(element, "width");
+  const heightIsFit = isFitSizing(element, "height");
+  return {
+    width: widthIsFit ? `Fit ${width}` : `${width}`,
+    height: heightIsFit ? `Fit ${height}` : `${height}`
+  };
+}
+function calculateParentMeasurements(element, container) {
+  const parent = container ?? element.parentElement;
+  if (!parent) return [];
+  const elementRect = element.getBoundingClientRect();
+  const parentRect = parent.getBoundingClientRect();
+  const paddingBoxLeft = parentRect.left + parent.clientLeft;
+  const paddingBoxTop = parentRect.top + parent.clientTop;
+  const paddingBoxRight = parentRect.left + parent.clientLeft + parent.clientWidth;
+  const paddingBoxBottom = parentRect.top + parent.clientTop + parent.clientHeight;
+  let parentInnerLeft;
+  let parentInnerTop;
+  let parentInnerRight;
+  let parentInnerBottom;
+  if (container) {
+    parentInnerLeft = paddingBoxLeft;
+    parentInnerTop = paddingBoxTop;
+    parentInnerRight = paddingBoxRight;
+    parentInnerBottom = paddingBoxBottom;
+  } else {
+    const parentStyles = window.getComputedStyle(parent);
+    parentInnerLeft = paddingBoxLeft + (parseFloat(parentStyles.paddingLeft) || 0);
+    parentInnerTop = paddingBoxTop + (parseFloat(parentStyles.paddingTop) || 0);
+    parentInnerRight = paddingBoxRight - (parseFloat(parentStyles.paddingRight) || 0);
+    parentInnerBottom = paddingBoxBottom - (parseFloat(parentStyles.paddingBottom) || 0);
   }
-  const found = findFlexAncestor(elementUnder, boundary);
-  if (found) {
-    return { flexContainer: found.flexParent, children: htmlChildren(found.flexParent) };
+  const zoom = getZoomScale();
+  const measurements = [];
+  const topDistance = Math.round((elementRect.top - parentInnerTop) / zoom);
+  if (topDistance > 0) {
+    const midX = elementRect.left + elementRect.width / 2;
+    measurements.push({
+      direction: "vertical",
+      x1: midX,
+      y1: parentInnerTop,
+      x2: midX,
+      y2: elementRect.top,
+      distance: topDistance,
+      labelPosition: { x: midX, y: (parentInnerTop + elementRect.top) / 2 }
+    });
   }
-  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 findTextOwnerAtPoint(boundary, clientX, clientY) {
-  const doc = document;
-  const caretNode = doc.caretPositionFromPoint?.(clientX, clientY)?.offsetNode ?? doc.caretRangeFromPoint?.(clientX, clientY)?.startContainer ?? null;
-  if (!caretNode || caretNode.nodeType !== Node.TEXT_NODE) return null;
-  const textNode = caretNode;
-  if (!(textNode.nodeValue ?? "").trim()) return null;
-  const owner = textNode.parentElement;
-  if (!owner || !boundary.contains(owner)) return null;
-  if (owner.closest("[data-direct-edit]") || owner.closest("[data-direct-edit-host]")) return null;
-  const range = document.createRange();
-  range.selectNodeContents(textNode);
-  const hitsText = Array.from(range.getClientRects()).some(
-    (r) => clientX >= r.left && clientX <= r.right && clientY >= r.top && clientY <= r.bottom
-  );
-  range.detach?.();
-  return hitsText ? owner : null;
-}
-function findTextOwnerByRangeScan(boundary, clientX, clientY) {
-  const walker = document.createTreeWalker(boundary, NodeFilter.SHOW_TEXT);
-  let current = walker.nextNode();
-  while (current) {
-    const textNode = current;
-    if ((textNode.nodeValue ?? "").trim()) {
-      const owner = textNode.parentElement;
-      if (owner && boundary.contains(owner) && !owner.closest("[data-direct-edit]") && !owner.closest("[data-direct-edit-host]")) {
-        const range = document.createRange();
-        range.selectNodeContents(textNode);
-        const hitsText = Array.from(range.getClientRects()).some(
-          (r) => clientX >= r.left && clientX <= r.right && clientY >= r.top && clientY <= r.bottom
-        );
-        range.detach?.();
-        if (hitsText) return owner;
-      }
-    }
-    current = walker.nextNode();
+  const bottomDistance = Math.round((parentInnerBottom - elementRect.bottom) / zoom);
+  if (bottomDistance > 0) {
+    const midX = elementRect.left + elementRect.width / 2;
+    measurements.push({
+      direction: "vertical",
+      x1: midX,
+      y1: elementRect.bottom,
+      x2: midX,
+      y2: parentInnerBottom,
+      distance: bottomDistance,
+      labelPosition: { x: midX, y: (elementRect.bottom + parentInnerBottom) / 2 }
+    });
   }
-  return null;
-}
-function ensureDirectTextSpanAtPoint(parent, clientX, clientY) {
-  const directTextNodes = Array.from(parent.childNodes).filter(
-    (node) => node.nodeType === Node.TEXT_NODE && Boolean(node.textContent?.trim())
-  );
-  for (const textNode of directTextNodes) {
-    const range = document.createRange();
-    range.selectNodeContents(textNode);
-    const hitsText = Array.from(range.getClientRects()).some(
-      (r) => clientX >= r.left && clientX <= r.right && clientY >= r.top && clientY <= r.bottom
-    );
-    range.detach?.();
-    if (!hitsText) continue;
-    const span = document.createElement("span");
-    span.setAttribute("data-direct-edit-generated", "text-span");
-    span.textContent = textNode.textContent ?? "";
-    parent.replaceChild(span, textNode);
-    return span;
+  const leftDistance = Math.round((elementRect.left - parentInnerLeft) / zoom);
+  if (leftDistance > 0) {
+    const midY = elementRect.top + elementRect.height / 2;
+    measurements.push({
+      direction: "horizontal",
+      x1: parentInnerLeft,
+      y1: midY,
+      x2: elementRect.left,
+      y2: midY,
+      distance: leftDistance,
+      labelPosition: { x: (parentInnerLeft + elementRect.left) / 2, y: midY }
+    });
   }
-  return null;
-}
-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;
+  const rightDistance = Math.round((parentInnerRight - elementRect.right) / zoom);
+  if (rightDistance > 0) {
+    const midY = elementRect.top + elementRect.height / 2;
+    measurements.push({
+      direction: "horizontal",
+      x1: elementRect.right,
+      y1: midY,
+      x2: parentInnerRight,
+      y2: midY,
+      distance: rightDistance,
+      labelPosition: { x: (elementRect.right + parentInnerRight) / 2, y: midY }
+    });
   }
-  return null;
+  return measurements;
 }
-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;
+function calculateElementMeasurements(from, to) {
+  const fromRect = from.getBoundingClientRect();
+  const toRect = to.getBoundingClientRect();
+  const zoom = getZoomScale();
+  const measurements = [];
+  const horizontalOverlap = fromRect.left < toRect.right && fromRect.right > toRect.left;
+  const verticalOverlap = fromRect.top < toRect.bottom && fromRect.bottom > toRect.top;
+  if (verticalOverlap) {
+    const overlapTop = Math.max(fromRect.top, toRect.top);
+    const overlapBottom = Math.min(fromRect.bottom, toRect.bottom);
+    const midY = (overlapTop + overlapBottom) / 2;
+    if (fromRect.right <= toRect.left) {
+      const distance = Math.round((toRect.left - fromRect.right) / zoom);
+      measurements.push({
+        direction: "horizontal",
+        x1: fromRect.right,
+        y1: midY,
+        x2: toRect.left,
+        y2: midY,
+        distance,
+        labelPosition: { x: (fromRect.right + toRect.left) / 2, y: midY }
+      });
+    } else if (fromRect.left >= toRect.right) {
+      const distance = Math.round((fromRect.left - toRect.right) / zoom);
+      measurements.push({
+        direction: "horizontal",
+        x1: toRect.right,
+        y1: midY,
+        x2: fromRect.left,
+        y2: midY,
+        distance,
+        labelPosition: { x: (toRect.right + fromRect.left) / 2, y: midY }
+      });
     }
   }
-  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;
+  if (horizontalOverlap) {
+    const overlapLeft = Math.max(fromRect.left, toRect.left);
+    const overlapRight = Math.min(fromRect.right, toRect.right);
+    const midX = (overlapLeft + overlapRight) / 2;
+    if (fromRect.bottom <= toRect.top) {
+      const distance = Math.round((toRect.top - fromRect.bottom) / zoom);
+      measurements.push({
+        direction: "vertical",
+        x1: midX,
+        y1: fromRect.bottom,
+        x2: midX,
+        y2: toRect.top,
+        distance,
+        labelPosition: { x: midX, y: (fromRect.bottom + toRect.top) / 2 }
+      });
+    } else if (fromRect.top >= toRect.bottom) {
+      const distance = Math.round((fromRect.top - toRect.bottom) / zoom);
+      measurements.push({
+        direction: "vertical",
+        x1: midX,
+        y1: toRect.bottom,
+        x2: midX,
+        y2: fromRect.top,
+        distance,
+        labelPosition: { x: midX, y: (toRect.bottom + fromRect.top) / 2 }
+      });
     }
   }
-  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 (!horizontalOverlap && !verticalOverlap) {
+    const fromCenterX = fromRect.left + fromRect.width / 2;
+    const fromCenterY = fromRect.top + fromRect.height / 2;
+    const toCenterX = toRect.left + toRect.width / 2;
+    const toCenterY = toRect.top + toRect.height / 2;
+    const hDistance = toCenterX > fromCenterX ? Math.round((toRect.left - fromRect.right) / zoom) : Math.round((fromRect.left - toRect.right) / zoom);
+    if (hDistance > 0) {
+      const startX = toCenterX > fromCenterX ? fromRect.right : fromRect.left;
+      const endX = toCenterX > fromCenterX ? toRect.left : toRect.right;
+      const y = (fromCenterY + toCenterY) / 2;
+      measurements.push({
+        direction: "horizontal",
+        x1: startX,
+        y1: y,
+        x2: endX,
+        y2: y,
+        distance: hDistance,
+        labelPosition: { x: (startX + endX) / 2, y }
+      });
     }
-  }
-  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 getFiberForElement(element) {
-  if (typeof window !== "undefined") {
-    const devtools = window.__DIRECT_EDIT_DEVTOOLS__;
-    if (devtools?.getFiberForElement) {
-      const fiber = devtools.getFiberForElement(element);
-      if (fiber) return fiber;
+    const vDistance = toCenterY > fromCenterY ? Math.round((toRect.top - fromRect.bottom) / zoom) : Math.round((fromRect.top - toRect.bottom) / zoom);
+    if (vDistance > 0) {
+      const x = (fromCenterX + toCenterX) / 2;
+      const startY = toCenterY > fromCenterY ? fromRect.bottom : fromRect.top;
+      const endY = toCenterY > fromCenterY ? toRect.top : toRect.bottom;
+      measurements.push({
+        direction: "vertical",
+        x1: x,
+        y1: startY,
+        x2: x,
+        y2: endY,
+        distance: vDistance,
+        labelPosition: { x, y: (startY + endY) / 2 }
+      });
     }
   }
-  const fiberKey = Object.keys(element).find(
-    (key) => key.startsWith("__reactFiber$") || key.startsWith("__reactInternalInstance$")
-  );
-  if (!fiberKey) return null;
-  return element[fiberKey] || null;
+  return measurements;
 }
-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;
+var GUIDELINE_PROXIMITY = 80;
+function calculateGuidelineMeasurements(element, guidelines, mousePosition) {
+  if (guidelines.length === 0) return [];
+  const snap = getCanvasSnapshot();
+  const zoom = snap.active ? snap.zoom : 1;
+  const rect = element.getBoundingClientRect();
+  const measurements = [];
+  for (const g of guidelines) {
+    let viewportPos;
+    if (snap.active) {
+      const pan = g.orientation === "horizontal" ? snap.panY : snap.panX;
+      const bo = g.orientation === "horizontal" ? getBodyOffset().y : getBodyOffset().x;
+      viewportPos = bo + (g.position - bo + pan) * zoom;
+    } else {
+      const scroll = g.orientation === "horizontal" ? window.scrollY : window.scrollX;
+      viewportPos = g.position - scroll;
+    }
+    if (g.orientation === "horizontal") {
+      const midX = rect.left + rect.width / 2;
+      if (mousePosition && Math.abs(mousePosition.y - viewportPos) > GUIDELINE_PROXIMITY) continue;
+      if (viewportPos < rect.top) {
+        const distance = Math.round((rect.top - viewportPos) / zoom);
+        if (distance > 0) {
+          measurements.push({
+            direction: "vertical",
+            x1: midX,
+            y1: viewportPos,
+            x2: midX,
+            y2: rect.top,
+            distance,
+            labelPosition: { x: midX, y: (viewportPos + rect.top) / 2 }
+          });
+        }
+      } else if (viewportPos > rect.bottom) {
+        const distance = Math.round((viewportPos - rect.bottom) / zoom);
+        if (distance > 0) {
+          measurements.push({
+            direction: "vertical",
+            x1: midX,
+            y1: rect.bottom,
+            x2: midX,
+            y2: viewportPos,
+            distance,
+            labelPosition: { x: midX, y: (rect.bottom + viewportPos) / 2 }
+          });
+        }
+      }
+    } else {
+      const midY = rect.top + rect.height / 2;
+      if (mousePosition && Math.abs(mousePosition.x - viewportPos) > GUIDELINE_PROXIMITY) continue;
+      if (viewportPos < rect.left) {
+        const distance = Math.round((rect.left - viewportPos) / zoom);
+        if (distance > 0) {
+          measurements.push({
+            direction: "horizontal",
+            x1: viewportPos,
+            y1: midY,
+            x2: rect.left,
+            y2: midY,
+            distance,
+            labelPosition: { x: (viewportPos + rect.left) / 2, y: midY }
+          });
+        }
+      } else if (viewportPos > rect.right) {
+        const distance = Math.round((viewportPos - rect.right) / zoom);
+        if (distance > 0) {
+          measurements.push({
+            direction: "horizontal",
+            x1: rect.right,
+            y1: midY,
+            x2: viewportPos,
+            y2: midY,
+            distance,
+            labelPosition: { x: (rect.right + viewportPos) / 2, y: midY }
+          });
+        }
+      }
     }
-    filtered.push(line);
-  }
-  if (filtered.length > 0 && filtered[0].includes("fakeJSXCallSite")) {
-    filtered.shift();
   }
-  return filtered.join("\n");
+  return measurements;
 }
-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 isFlexContainer(element) {
+  const computed = window.getComputedStyle(element);
+  return computed.display === "flex" || computed.display === "inline-flex";
 }
-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>") {
+function getFlexDirection(element) {
+  const computed = window.getComputedStyle(element);
+  return computed.flexDirection;
+}
+function isInFlowChild(el) {
+  const cs = window.getComputedStyle(el);
+  return cs.display !== "none" && cs.position !== "absolute" && cs.position !== "fixed";
+}
+function detectChildrenDirection(container, exclude) {
+  const computed = window.getComputedStyle(container);
+  if (computed.display === "flex" || computed.display === "inline-flex") {
+    const dir = computed.flexDirection;
     return {
-      functionName
+      axis: dir === "row" || dir === "row-reverse" ? "horizontal" : "vertical",
+      reversed: dir === "row-reverse" || dir === "column-reverse"
     };
   }
-  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 visible = [];
+  for (const c of container.children) {
+    if (!(c instanceof HTMLElement) || c === exclude) continue;
+    if (!isInFlowChild(c)) continue;
+    visible.push(c);
+    if (visible.length === 2) break;
   }
-  const trimmed = currentLine.trim();
-  if (!trimmed || SAFARI_NATIVE_CODE_REGEXP.test(trimmed)) {
-    return null;
+  if (visible.length < 2) return { axis: "vertical", reversed: false };
+  const first = visible[0].getBoundingClientRect();
+  const second = visible[1].getBoundingClientRect();
+  const yOverlap = first.bottom - 2 > second.top && second.bottom - 2 > first.top;
+  if (yOverlap) {
+    return { axis: "horizontal", reversed: second.right < first.left };
   }
-  if (!trimmed.includes("@") && !trimmed.includes(":")) {
-    return {
-      functionName: trimmed,
-      source: currentLine,
-      isServer: trimmed.includes(SERVER_FRAME_MARKER)
-    };
+  return { axis: "vertical", reversed: second.bottom < first.top };
+}
+function computeIntendedIndex(parent, draggedElement) {
+  const { axis } = detectChildrenDirection(parent, draggedElement);
+  const isHorizontal = axis === "horizontal";
+  const draggedRect = draggedElement.getBoundingClientRect();
+  const intendedCenter = isHorizontal ? draggedRect.left + draggedRect.width / 2 : draggedRect.top + draggedRect.height / 2;
+  const siblings = [];
+  for (const c of parent.children) {
+    if (!(c instanceof HTMLElement) || c === draggedElement) continue;
+    if (!isInFlowChild(c)) continue;
+    siblings.push(c);
   }
-  const atIndex = trimmed.lastIndexOf("@");
-  if (atIndex === -1) {
-    return null;
+  if (siblings.length === 0) {
+    return { index: 0, siblingBefore: null, siblingAfter: 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://")
-  };
+  for (let i = 0; i < siblings.length; i++) {
+    const rect = siblings[i].getBoundingClientRect();
+    const midpoint = isHorizontal ? rect.left + rect.width / 2 : rect.top + rect.height / 2;
+    if (intendedCenter < midpoint) {
+      return { index: i, siblingBefore: i > 0 ? siblings[i - 1] : null, siblingAfter: siblings[i] };
+    }
+  }
+  return { index: siblings.length, siblingBefore: siblings[siblings.length - 1], siblingAfter: null };
 }
-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 htmlChildren(el) {
+  return Array.from(el.children).filter(
+    (child) => child instanceof HTMLElement
+  );
 }
-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);
+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 frames;
+  return null;
 }
-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 {
-    }
+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;
   }
-  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;
-      }
-    }
+  const boundary = selectedElement?.contains(elementUnder) ? selectedElement : null;
+  const ownDisplay = getComputedStyle(elementUnder).display;
+  if (ownDisplay === "flex" || ownDisplay === "inline-flex") {
+    return { flexContainer: elementUnder, children: htmlChildren(elementUnder) };
   }
-  normalized = normalized.replace(/^\/\(app-pages-browser\)\//, "/").replace(/^\/\.\//, "/").replace(/^\.\//, "");
-  const queryIndex = normalized.indexOf("?");
-  if (queryIndex !== -1) {
-    normalized = normalized.slice(0, queryIndex);
+  const found = findFlexAncestor(elementUnder, boundary);
+  if (found) {
+    return { flexContainer: found.flexParent, children: htmlChildren(found.flexParent) };
   }
-  return normalized;
+  return { flexContainer: elementUnder, children: [] };
 }
-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 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 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
+function findTextOwnerAtPoint(boundary, clientX, clientY) {
+  const doc = document;
+  const caretNode = doc.caretPositionFromPoint?.(clientX, clientY)?.offsetNode ?? doc.caretRangeFromPoint?.(clientX, clientY)?.startContainer ?? null;
+  if (!caretNode || caretNode.nodeType !== Node.TEXT_NODE) return null;
+  const textNode = caretNode;
+  if (!(textNode.nodeValue ?? "").trim()) return null;
+  const owner = textNode.parentElement;
+  if (!owner || !boundary.contains(owner)) return null;
+  if (owner.closest("[data-direct-edit]") || owner.closest("[data-direct-edit-host]")) return null;
+  const range = document.createRange();
+  range.selectNodeContents(textNode);
+  const hitsText = Array.from(range.getClientRects()).some(
+    (r) => clientX >= r.left && clientX <= r.right && clientY >= r.top && clientY <= r.bottom
+  );
+  range.detach?.();
+  return hitsText ? owner : null;
+}
+function findTextOwnerByRangeScan(boundary, clientX, clientY) {
+  const walker = document.createTreeWalker(boundary, NodeFilter.SHOW_TEXT);
+  let current = walker.nextNode();
+  while (current) {
+    const textNode = current;
+    if ((textNode.nodeValue ?? "").trim()) {
+      const owner = textNode.parentElement;
+      if (owner && boundary.contains(owner) && !owner.closest("[data-direct-edit]") && !owner.closest("[data-direct-edit-host]")) {
+        const range = document.createRange();
+        range.selectNodeContents(textNode);
+        const hitsText = Array.from(range.getClientRects()).some(
+          (r) => clientX >= r.left && clientX <= r.right && clientY >= r.top && clientY <= r.bottom
         );
-        if (!duplicate) {
-          existing.push({
-            fileName: normalized,
-            lineNumber: frame.lineNumber,
-            columnNumber: frame.columnNumber
-          });
-          functionNameToRscFrames.set(frame.functionName, existing);
-        }
+        range.detach?.();
+        if (hitsText) return owner;
       }
     }
-    current = current._debugOwner ?? current.return ?? null;
+    current = walker.nextNode();
   }
-  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
-  };
+  return null;
 }
-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
-      };
-    }
+function ensureDirectTextSpanAtPoint(parent, clientX, clientY) {
+  const directTextNodes = Array.from(parent.childNodes).filter(
+    (node) => node.nodeType === Node.TEXT_NODE && Boolean(node.textContent?.trim())
+  );
+  for (const textNode of directTextNodes) {
+    const range = document.createRange();
+    range.selectNodeContents(textNode);
+    const hitsText = Array.from(range.getClientRects()).some(
+      (r) => clientX >= r.left && clientX <= r.right && clientY >= r.top && clientY <= r.bottom
+    );
+    range.detach?.();
+    if (!hitsText) continue;
+    const span = document.createElement("span");
+    span.setAttribute("data-direct-edit-generated", "text-span");
+    span.textContent = textNode.textContent ?? "";
+    parent.replaceChild(span, textNode);
+    return span;
   }
   return null;
 }
-function getSourceFromFiber(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 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 buildFrame(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 = getSourceFromFiber(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 shouldIncludeFrame(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 getOwnerStack(fiber) {
-  const frames = [];
-  let current = fiber;
-  let lastFrame = null;
-  let nearestComponentFiber = null;
-  while (current) {
-    const frame = buildFrame(current);
-    if (frame && shouldIncludeFrame(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 getRenderStack(fiber) {
-  const frames = [];
-  let current = fiber;
-  let lastFrame = null;
-  let nearestComponentFiber = null;
-  while (current) {
-    const frame = buildFrame(current);
-    if (frame && shouldIncludeFrame(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 getReactComponentInfo(element) {
-  const fiber = getFiberForElement(element);
-  if (!fiber) return { frames: [], nearestComponentFiber: null };
-  const elementSource = getSourceFromFiber(fiber);
-  const elementSourceFile = elementSource?.fileName || void 0;
-  const ownerResult = getOwnerStack(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 { ...getRenderStack(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();