made-refine 0.2.13 → 0.2.16

package/dist/index.mjs

@@ -117,6 +117,228 @@ function getZoomScale() {
   return snap.active ? snap.zoom : 1;
 }
 
+// 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;
+  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;
+    }
+  }
+  return frame;
+}
+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;
+}
+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, 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, 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]";
+    }
+  }
+  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 };
+    }
+  }
+  if (!elementSourceFile && fiber._debugSource) {
+    return { isComponentPrimitive: true };
+  }
+  return { isComponentPrimitive: false };
+}
+
 // src/utils.ts
 function clamp(value, min, max) {
   if (!Number.isFinite(value)) return min;
@@ -1504,7 +1726,7 @@ function calculateDropPosition(container, pointerX, pointerY, draggedElement) {
   };
   return { insertBefore, indicator };
 }
-function getFiberForElement(element) {
+function getFiberForElement2(element) {
   if (typeof window !== "undefined") {
     const devtools = window.__DIRECT_EDIT_DEVTOOLS__;
     if (devtools?.getFiberForElement) {
@@ -1765,7 +1987,7 @@ function getSourceFromDebugStack(fiber) {
   }
   return null;
 }
-function getSourceFromFiber(fiber) {
+function getSourceFromFiber2(fiber) {
   const debugSource = fiber?._debugSource;
   if (debugSource?.fileName) return debugSource;
   const owner = fiber?._debugOwner;
@@ -1781,13 +2003,13 @@ function getSourceFromFiber(fiber) {
   if (fromDebugStack?.fileName) return fromDebugStack;
   return null;
 }
-function buildFrame(fiber) {
+function buildFrame2(fiber) {
   const type = fiber?.type;
   if (typeof type !== "function" && typeof type !== "object") return null;
   const name = type?.displayName || type?.name || null;
   if (!name || name === "Fragment") return null;
   const frame = { name };
-  const source = getSourceFromFiber(fiber);
+  const source = getSourceFromFiber2(fiber);
   if (source?.fileName) {
     frame.file = source.fileName;
     if (typeof source.lineNumber === "number") {
@@ -1799,7 +2021,7 @@ function buildFrame(fiber) {
   }
   return frame;
 }
-function shouldIncludeFrame(frame, lastFrame) {
+function shouldIncludeFrame2(frame, lastFrame) {
   if (!lastFrame) return true;
   if (frame.name !== lastFrame.name) return true;
   if (!lastFrame.file && frame.file) return true;
@@ -1809,42 +2031,52 @@ function shouldIncludeFrame(frame, lastFrame) {
   }
   return false;
 }
-function getOwnerStack(fiber) {
+function getOwnerStack2(fiber) {
   const frames = [];
   let current = fiber;
   let lastFrame = null;
+  let nearestComponentFiber = null;
   while (current) {
-    const frame = buildFrame(current);
-    if (frame && shouldIncludeFrame(frame, lastFrame)) {
+    const frame = buildFrame2(current);
+    if (frame && shouldIncludeFrame2(frame, lastFrame)) {
       frames.push(frame);
       lastFrame = frame;
+      if (!nearestComponentFiber) {
+        nearestComponentFiber = current;
+      }
     }
     current = current._debugOwner;
   }
-  return frames;
+  return { frames, nearestComponentFiber };
 }
-function getRenderStack(fiber) {
+function getRenderStack2(fiber) {
   const frames = [];
   let current = fiber;
   let lastFrame = null;
+  let nearestComponentFiber = null;
   while (current) {
-    const frame = buildFrame(current);
-    if (frame && shouldIncludeFrame(frame, lastFrame)) {
+    const frame = buildFrame2(current);
+    if (frame && shouldIncludeFrame2(frame, lastFrame)) {
       frames.push(frame);
       lastFrame = frame;
+      if (!nearestComponentFiber) {
+        nearestComponentFiber = current;
+      }
     }
     current = current.return;
   }
-  return frames;
+  return { frames, nearestComponentFiber };
 }
-function getReactComponentStack(element) {
-  const fiber = getFiberForElement(element);
-  if (!fiber) return [];
-  const ownerStack = getOwnerStack(fiber);
-  if (ownerStack.length > 0) {
-    return ownerStack;
+function getReactComponentInfo2(element) {
+  const fiber = getFiberForElement2(element);
+  if (!fiber) return { frames: [], nearestComponentFiber: null };
+  const elementSource = getSourceFromFiber2(fiber);
+  const elementSourceFile = elementSource?.fileName || void 0;
+  const ownerResult = getOwnerStack2(fiber);
+  if (ownerResult.frames.length > 0) {
+    return { ...ownerResult, elementSourceFile };
   }
-  return getRenderStack(fiber);
+  return { ...getRenderStack2(fiber), elementSourceFile };
 }
 function getElementDisplayName(element) {
   const tag = element.tagName.toLowerCase();
@@ -2139,14 +2371,35 @@ 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;
   const seenFibers = /* @__PURE__ */ new Set();
-  let fiber = getFiberForElement(element);
+  let fiber = getFiberForElement2(element);
   while (fiber && !seenFibers.has(fiber)) {
     seenFibers.add(fiber);
-    const fiberSource = getSourceFromFiber(fiber);
+    const fiberSource = getSourceFromFiber2(fiber);
     if (fiberSource?.fileName) {
       return {
         file: fiberSource.fileName,
@@ -2161,8 +2414,15 @@ function getElementSource(element) {
 function getElementLocator(element) {
   const elementInfo = getElementInfo(element);
   const domSource = getElementSource(element);
+  const { frames, nearestComponentFiber, elementSourceFile } = getReactComponentInfo2(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),
@@ -2170,36 +2430,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}`);
   }
@@ -3944,6 +4248,8 @@ function useSessionManager({
       const originalStyles = options?.originalStyles ?? existingEdit?.originalStyles ?? getOriginalInlineStyles(nextSingleElement);
       const pendingStyles = options?.pendingStyles ?? existingEdit?.pendingStyles ?? {};
       const elementInfo = getElementInfo(nextSingleElement);
+      const { frames, nearestComponentFiber, elementSourceFile } = getReactComponentInfo(nextSingleElement);
+      const isPrimitive = classifyComponentFiber(nearestComponentFiber, frames, elementSourceFile).isComponentPrimitive;
       setState((prev) => ({
         comments: prev.activeCommentId ? prev.comments.filter((comment) => {
           if (comment.id !== prev.activeCommentId) return true;
@@ -3962,6 +4268,7 @@ function useSessionManager({
         computedColor: computed.color,
         computedBoxShadow: computed.boxShadow,
         computedTypography: computed.typography,
+        isComponentPrimitive: isPrimitive,
         originalStyles,
         pendingStyles,
         editModeActive: prev.editModeActive,
@@ -3992,6 +4299,7 @@ function useSessionManager({
         computedColor: null,
         computedBoxShadow: null,
         computedTypography: null,
+        isComponentPrimitive: false,
         originalStyles: {},
         pendingStyles: {},
         activeCommentId: null,
@@ -4532,6 +4840,7 @@ function useSessionManager({
         computedColor: computed.color,
         computedBoxShadow: computed.boxShadow,
         computedTypography: computed.typography,
+        isComponentPrimitive: prev.isComponentPrimitive,
         originalStyles: styleState.originalStyles,
         pendingStyles: styleState.pendingStyles,
         editModeActive: prev.editModeActive,
@@ -5316,6 +5625,8 @@ function withInstruction(profile, markdown) {
 ${markdown}` : markdown;
 }
 function buildLocatorPayload(locator) {
+  const { componentLabel, formattedSource, formattedCallSite } = getLocatorHeader(locator);
+  const reactTree = formatComponentTree(locator.reactStack);
   return {
     element: {
       tagName: locator.tagName,
@@ -5323,10 +5634,22 @@ function buildLocatorPayload(locator) {
       classList: locator.classList,
       domSelector: locator.domSelector,
       targetHtml: locator.targetHtml,
+      contextHtml: locator.domContextHtml || null,
       textPreview: locator.textPreview
     },
-    source: locator.domSource || null,
-    reactStack: locator.reactStack
+    componentLabel,
+    reactTree,
+    reactStack: locator.reactStack,
+    reactComponentName: locator.reactComponentName ?? null,
+    authoredProps: locator.authoredProps ?? null,
+    type: locator.isComponentPrimitive != null ? locator.isComponentPrimitive ? "component" : "instance" : null,
+    isComponentPrimitive: locator.isComponentPrimitive ?? false,
+    source: formattedSource,
+    callSite: formattedCallSite,
+    rawSource: locator.domSource || null,
+    callSiteSource: locator.callSiteSource ?? null,
+    definitionSource: locator.definitionSource ?? null,
+    subElementSources: locator.subElementSources ?? null
   };
 }
 function useAgentComms({ stateRef, sessionEditsRef, getSessionItems, saveCurrentToSession, removeSessionEdit, deleteComment }) {
@@ -6302,6 +6625,7 @@ function DirectEditProvider({ children }) {
     computedColor: null,
     computedBoxShadow: null,
     computedTypography: null,
+    isComponentPrimitive: false,
     originalStyles: {},
     pendingStyles: {},
     editModeActive: false,
@@ -8594,6 +8918,7 @@ function useSelectionResize({
 import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 var BLUE3 = "#0D99FF";
 var MAGENTA = "#E11BB6";
+var COMPONENT_PURPLE = "#8B5CF6";
 var DRAG_THRESHOLD = 4;
 var DBLCLICK_DELAY = 300;
 var HANDLE_SIZE = 12;
@@ -8637,9 +8962,11 @@ function SelectionOverlay({
   onHoverElement,
   onClickThrough,
   onSelectPageFrame,
+  isComponentPrimitive = false,
   enableResizeHandles = false,
   onResizeSizingChange
 }) {
+  const selectionColor = isComponentPrimitive ? COMPONENT_PURPLE : BLUE3;
   const rectElement = isDragging && draggedElement ? draggedElement : selectedElement;
   const [rect, setRect] = React19.useState(() => rectElement.getBoundingClientRect());
   const [pageFrameRect, setPageFrameRect] = React19.useState(() => pageFrameElement ? pageFrameElement.getBoundingClientRect() : null);
@@ -8967,7 +9294,7 @@ function SelectionOverlay({
           zIndex: 99997,
           background: "transparent",
           border: "none",
-          color: BLUE3,
+          color: selectionColor,
           fontSize: `${pageLabelFontSize}px`,
           lineHeight: `${pageLabelLineHeight}px`,
           padding: 0,
@@ -8995,7 +9322,7 @@ function SelectionOverlay({
           height: rect.height,
           pointerEvents: "none",
           zIndex: 99996,
-          border: `1px solid ${BLUE3}`,
+          border: `1px solid ${selectionColor}`,
           borderRadius: "0px",
           boxSizing: "border-box"
         }
@@ -9012,18 +9339,28 @@ function SelectionOverlay({
           transform: "translateX(-50%)",
           pointerEvents: "none",
           zIndex: 99992,
-          background: BLUE3,
-          color: "white",
-          fontSize: "11px",
-          lineHeight: "20px",
-          padding: "0 6px",
-          borderRadius: "4px",
-          whiteSpace: "nowrap",
-          fontFamily: "system-ui, sans-serif",
-          fontWeight: 500,
-          letterSpacing: "-0.01em"
+          display: "flex",
+          alignItems: "center",
+          gap: "4px"
         },
-        children: dimensionText
+        children: /* @__PURE__ */ jsx9(
+          "span",
+          {
+            style: {
+              background: selectionColor,
+              color: "white",
+              fontSize: "11px",
+              lineHeight: "20px",
+              padding: "0 6px",
+              borderRadius: "4px",
+              whiteSpace: "nowrap",
+              fontFamily: "system-ui, sans-serif",
+              fontWeight: 500,
+              letterSpacing: "-0.01em"
+            },
+            children: dimensionText
+          }
+        )
       }
     ),
     !isDragging && !isTextEditing && /* @__PURE__ */ jsxs5(
@@ -9079,7 +9416,7 @@ function SelectionOverlay({
                 position: "absolute",
                 width: RESIZE_CORNER_SIZE,
                 height: RESIZE_CORNER_SIZE,
-                border: `1px solid ${BLUE3}`,
+                border: `1px solid ${selectionColor}`,
                 background: "#fff",
                 borderRadius: 1,
                 boxSizing: "border-box",
@@ -12504,6 +12841,7 @@ function DirectEditPanelContent() {
     computedColor,
     computedBoxShadow,
     computedTypography,
+    isComponentPrimitive,
     borderStyleControlPreference,
     pendingStyles,
     editModeActive,
@@ -12824,6 +13162,7 @@ function DirectEditPanelContent() {
           selectElement(child);
         }
       },
+      isComponentPrimitive,
       enableResizeHandles: true,
       onResizeSizingChange: updateSizingProperties
     }