made-refine 0.2.11 → 0.2.15

package/dist/utils.mjs

@@ -40,6 +40,122 @@ 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]";
+    }
+  }
+  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;
+    }
+  }
+  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 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;
+  }
+  for (const pattern of PRIMITIVE_NPM_PATTERNS) {
+    if (pattern.test(normalized)) return true;
+  }
+  for (const pattern of PRIMITIVE_PATH_PATTERNS) {
+    if (pattern.test(normalized)) return true;
+  }
+  return false;
+}
+function classifyComponentFiber(fiber, frames, elementSourceFile) {
+  if (elementSourceFile && isComponentPrimitivePath(elementSourceFile)) {
+    return { isComponentPrimitive: true };
+  }
+  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 { isComponentPrimitive: false };
+}
+
 // src/utils.ts
 function clamp(value, min, max) {
   if (!Number.isFinite(value)) return min;
@@ -1805,38 +1921,48 @@ 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;
+      }
     }
     current = current._debugOwner;
   }
-  return frames;
+  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;
+      }
     }
     current = current.return;
   }
-  return frames;
+  return { frames, nearestComponentFiber };
 }
-function getReactComponentStack(element) {
+function getReactComponentInfo(element) {
   const fiber = getFiberForElement(element);
-  if (!fiber) return [];
-  const ownerStack = getOwnerStack(fiber);
-  if (ownerStack.length > 0) {
-    return ownerStack;
+  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);
+  return { ...getRenderStack(fiber), elementSourceFile };
 }
 function getElementDisplayName(element) {
   const tag = element.tagName.toLowerCase();
@@ -2138,6 +2264,27 @@ function parseDomSource(element) {
   }
   return { file, line, column };
 }
+var MAX_SUB_ELEMENT_SOURCES = 20;
+function collectSubElementSources(element) {
+  const sources = {};
+  const children = element.querySelectorAll("[data-direct-edit-source]");
+  const labelCounts = /* @__PURE__ */ new Map();
+  let count = 0;
+  for (const child of children) {
+    if (count >= MAX_SUB_ELEMENT_SOURCES) break;
+    if (!(child instanceof HTMLElement)) continue;
+    const source = parseDomSource(child);
+    if (!source) continue;
+    const text = ((child.innerText || child.textContent) ?? "").trim();
+    let baseLabel = text.length > 0 && text.length <= 30 ? text.slice(0, 30).toLowerCase().replace(/\s+/g, "_") : child.tagName.toLowerCase();
+    const existing = labelCounts.get(baseLabel) ?? 0;
+    labelCounts.set(baseLabel, existing + 1);
+    const label = existing > 0 ? `${baseLabel}_${existing + 1}` : baseLabel;
+    sources[label] = source;
+    count++;
+  }
+  return sources;
+}
 function getElementSource(element) {
   const domSource = parseDomSource(element);
   if (domSource) return domSource;
@@ -2160,8 +2307,15 @@ function getElementSource(element) {
 function getElementLocator(element) {
   const elementInfo = getElementInfo(element);
   const domSource = getElementSource(element);
+  const { frames, nearestComponentFiber, elementSourceFile } = getReactComponentInfo(element);
+  const componentName = nearestComponentFiber?.type?.displayName || nearestComponentFiber?.type?.name || void 0;
+  const authoredProps = nearestComponentFiber ? getComponentProps(nearestComponentFiber) : void 0;
+  const classification = classifyComponentFiber(nearestComponentFiber, frames, elementSourceFile);
+  const callSite = nearestComponentFiber ? getCallSiteSource(nearestComponentFiber) : null;
+  const definitionSrc = classification.isComponentPrimitive ? deriveDefinitionSource(frames) : null;
+  const subSources = collectSubElementSources(element);
   return {
-    reactStack: getReactComponentStack(element),
+    reactStack: frames,
     domSelector: buildDomSelector(element),
     domContextHtml: buildDomContextHtml(element),
     targetHtml: buildTargetHtml(element),
@@ -2169,36 +2323,80 @@ function getElementLocator(element) {
     tagName: elementInfo.tagName,
     id: elementInfo.id,
     classList: elementInfo.classList,
-    domSource: domSource ?? void 0
+    domSource: domSource ?? void 0,
+    reactComponentName: componentName,
+    authoredProps: authoredProps && Object.keys(authoredProps).length > 0 ? authoredProps : void 0,
+    subElementSources: Object.keys(subSources).length > 0 ? subSources : void 0,
+    callSiteSource: callSite ?? void 0,
+    definitionSource: definitionSrc ?? void 0,
+    isComponentPrimitive: nearestComponentFiber || elementSourceFile ? classification.isComponentPrimitive : void 0
   };
 }
 function getLocatorHeader(locator) {
   const primaryFrame = getPrimaryFrame(locator);
-  const componentLabel = primaryFrame?.name ? primaryFrame.name : locator.tagName;
-  const formattedSource = locator.domSource?.file ? formatSourceLocation(locator.domSource.file, locator.domSource.line, locator.domSource.column) : primaryFrame?.file ? formatSourceLocation(primaryFrame.file, primaryFrame.line, primaryFrame.column) : null;
-  return { componentLabel, formattedSource };
+  const componentLabel = locator.reactComponentName ?? primaryFrame?.name ?? locator.tagName;
+  let formattedSource;
+  if (locator.isComponentPrimitive && locator.definitionSource?.file) {
+    formattedSource = formatSourceLocation(
+      locator.definitionSource.file,
+      locator.definitionSource.line,
+      locator.definitionSource.column
+    );
+  } else {
+    formattedSource = locator.domSource?.file ? formatSourceLocation(locator.domSource.file, locator.domSource.line, locator.domSource.column) : primaryFrame?.file ? formatSourceLocation(primaryFrame.file, primaryFrame.line, primaryFrame.column) : null;
+  }
+  const formattedCallSite = locator.callSiteSource?.file ? formatSourceLocation(locator.callSiteSource.file, locator.callSiteSource.line, locator.callSiteSource.column) : null;
+  return { componentLabel, formattedSource, formattedCallSite };
+}
+function formatComponentTree(reactStack) {
+  const names = reactStack.map((f) => f.name).filter(Boolean);
+  if (names.length === 0) return null;
+  if (names.length === 1) return names[0];
+  const [component, ...ancestors] = names;
+  return `${component} (in ${ancestors.join(" > ")})`;
 }
 function buildLocatorContextLines(locator, options) {
   const lines = [];
-  const { componentLabel, formattedSource } = getLocatorHeader(locator);
+  const { componentLabel, formattedSource, formattedCallSite } = getLocatorHeader(locator);
   const target = (locator.targetHtml || locator.domContextHtml || "").trim();
   const context = locator.domContextHtml?.trim() || "";
-  const selector = locator.domSelector?.trim();
+  const path = locator.domSelector?.trim();
   const text = locator.textPreview?.trim();
   lines.push(`@<${componentLabel}>`);
   lines.push("");
+  const tree = formatComponentTree(locator.reactStack);
+  if (tree) {
+    lines.push(`react: ${tree}`);
+  }
+  if (locator.authoredProps && Object.keys(locator.authoredProps).length > 0) {
+    lines.push(`props: ${JSON.stringify(locator.authoredProps)}`);
+  }
+  if (locator.isComponentPrimitive != null) {
+    lines.push(`type: ${locator.isComponentPrimitive ? "component" : "instance"}`);
+  }
+  lines.push(`source: ${formattedSource ?? "(file not available)"}`);
+  if (formattedCallSite && formattedCallSite !== formattedSource) {
+    lines.push(`call-site: ${formattedCallSite}`);
+  }
+  if (locator.subElementSources && Object.keys(locator.subElementSources).length > 0) {
+    lines.push("source-map:");
+    for (const [label, source] of Object.entries(locator.subElementSources)) {
+      lines.push(`  - ${label}: ${formatSourceLocation(source.file, source.line, source.column)}`);
+    }
+  }
+  if (path) {
+    lines.push(`path: ${path}`);
+  }
   if (target) {
+    lines.push("");
     lines.push("target:");
     lines.push(target);
   }
   if (!options?.skipContext && context && context !== target) {
+    lines.push("");
     lines.push("context:");
     lines.push(context);
   }
-  lines.push(`in ${formattedSource ?? "(file not available)"}`);
-  if (selector) {
-    lines.push(`selector: ${selector}`);
-  }
   if (text) {
     lines.push(`text: ${text}`);
   }
@@ -2908,7 +3106,7 @@ function buildExportInstruction(profile) {
     return hasComments ? "Address this feedback on the UI. Use the provided source location and selector to find each element in the codebase." : "";
   }
   const parts = [];
-  if (hasCssEdits) parts.push("Apply the CSS changes to the targeted elements using the project's existing styling approach (Tailwind, CSS modules, etc.).");
+  if (hasCssEdits) parts.push("Apply the CSS changes to the targeted elements using the project's existing styling approach (Tailwind, CSS modules, etc.). Map values to existing CSS variables, design tokens, or utility classes already used in the project whenever possible.");
   if (hasTextEdits) parts.push("Update the text content as specified.");
   if (hasMoves) parts.push("Implement the move plan below directly in source code. For `structural_move`, reorder/reparent elements using the target anchors. For `layout_refactor`, apply the listed flex/grid refactor steps. Do NOT simulate movement with absolute positioning, left/top offsets, transform, or margin hacks.");
   if (hasComments) parts.push("Address the comments on the relevant elements.");
@@ -2994,6 +3192,7 @@ export {
   findTextOwnerAtPoint,
   findTextOwnerByRangeScan,
   flexPropertyToCSSMap,
+  formatComponentTree,
   formatPropertyValue,
   getAllComputedStyles,
   getChildBriefInfo,
@@ -3011,6 +3210,7 @@ export {
   getElementSource,
   getExportContentProfile,
   getFlexDirection,
+  getLocatorHeader,
   getMoveIntentForEdit,
   getOriginalInlineStyles,
   getSelectionColors,