made-refine 0.2.11 → 0.2.15

package/dist/index.mjs

@@ -117,6 +117,225 @@ 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 };
+    }
+  }
+  return { isComponentPrimitive: false };
+}
+
 // src/utils.ts
 function clamp(value, min, max) {
   if (!Number.isFinite(value)) return min;
@@ -1504,7 +1723,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 +1984,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 +2000,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 +2018,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 +2028,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 +2368,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 +2411,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 +2427,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}`);
   }
@@ -2900,7 +3201,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.");
@@ -3612,11 +3913,6 @@ function useStyleUpdaters({
 import * as React3 from "react";
 
 // src/clipboard.ts
-function buildAgentClipboardText(markdown) {
-  return `implement the visual edits
-
-${markdown}`;
-}
 function tryRestoreFocus(element) {
   if (!(element instanceof HTMLElement)) return;
   try {
@@ -3949,6 +4245,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;
@@ -3967,6 +4265,7 @@ function useSessionManager({
         computedColor: computed.color,
         computedBoxShadow: computed.boxShadow,
         computedTypography: computed.typography,
+        isComponentPrimitive: isPrimitive,
         originalStyles,
         pendingStyles,
         editModeActive: prev.editModeActive,
@@ -3997,6 +4296,7 @@ function useSessionManager({
         computedColor: null,
         computedBoxShadow: null,
         computedTypography: null,
+        isComponentPrimitive: false,
         originalStyles: {},
         pendingStyles: {},
         activeCommentId: null,
@@ -4537,6 +4837,7 @@ function useSessionManager({
         computedColor: computed.color,
         computedBoxShadow: computed.boxShadow,
         computedTypography: computed.typography,
+        isComponentPrimitive: prev.isComponentPrimitive,
         originalStyles: styleState.originalStyles,
         pendingStyles: styleState.pendingStyles,
         editModeActive: prev.editModeActive,
@@ -5314,7 +5615,15 @@ async function checkAgentConnection() {
 }
 
 // src/use-agent-comms.ts
+function withInstruction(profile, markdown) {
+  const instruction = buildExportInstruction(profile);
+  return instruction ? `${instruction}
+
+${markdown}` : markdown;
+}
 function buildLocatorPayload(locator) {
+  const { componentLabel, formattedSource, formattedCallSite } = getLocatorHeader(locator);
+  const reactTree = formatComponentTree(locator.reactStack);
   return {
     element: {
       tagName: locator.tagName,
@@ -5322,10 +5631,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 }) {
@@ -5406,6 +5727,11 @@ function useAgentComms({ stateRef, sessionEditsRef, getSessionItems, saveCurrent
     const movePlan = includeBatchMoveEnvelope ? resolvedPlanContext.movePlan : null;
     const hasMeaningfulPayload = changes.length > 0 || sessionEdit.textEdit != null || moveIntent != null;
     if (!hasMeaningfulPayload) return true;
+    const profile = getExportContentProfile(
+      [sessionEdit],
+      [],
+      resolvedPlanContext
+    );
     try {
       const result = await sendEditToAgent({
         ...buildLocatorPayload(locator),
@@ -5413,7 +5739,7 @@ function useAgentComms({ stateRef, sessionEditsRef, getSessionItems, saveCurrent
         textChange: sessionEdit.textEdit ?? null,
         moveIntent,
         ...movePlan ? { movePlan } : {},
-        exportMarkdown
+        exportMarkdown: withInstruction(profile, exportMarkdown)
       });
       if (result.ok) {
         removeSessionEdit(sessionEdit.element);
@@ -5425,12 +5751,13 @@ function useAgentComms({ stateRef, sessionEditsRef, getSessionItems, saveCurrent
   }, [updateAgentAvailability, removeSessionEdit]);
   const sendSessionCommentToAgent = React5.useCallback(async (comment) => {
     const exportMarkdown = buildCommentExport(comment.locator, comment.text, comment.replies);
+    const commentProfile = { hasCssEdits: false, hasTextEdits: false, hasMoves: false, hasComments: true };
     try {
       const result = await sendCommentToAgent({
         ...buildLocatorPayload(comment.locator),
         commentText: comment.text,
         replies: comment.replies,
-        exportMarkdown
+        exportMarkdown: withInstruction(commentProfile, exportMarkdown)
       });
       if (result.ok) {
         deleteComment(comment.id);
@@ -5450,12 +5777,14 @@ function useAgentComms({ stateRef, sessionEditsRef, getSessionItems, saveCurrent
       );
       if (editsWithChanges.length === 0 && contextBlocks.length === 0) return false;
       const markdownParts = [];
+      let movePlanCtx = null;
       if (editsWithChanges.length > 0) {
-        const movePlanContext = buildMovePlanContext(editsWithChanges);
-        markdownParts.push(buildSessionExport(editsWithChanges, [], { movePlanContext }));
+        movePlanCtx = buildMovePlanContext(editsWithChanges);
+        markdownParts.push(buildSessionExport(editsWithChanges, [], { movePlanContext: movePlanCtx }));
       }
       markdownParts.push(...contextBlocks);
       const exportMarkdown = markdownParts.join("\n\n");
+      const multiProfile = getExportContentProfile(editsWithChanges, [], movePlanCtx);
       const primaryEl = current.selectedElements.find((el) => el.isConnected);
       if (!primaryEl) return false;
       const primary = getElementLocator(primaryEl);
@@ -5465,7 +5794,7 @@ function useAgentComms({ stateRef, sessionEditsRef, getSessionItems, saveCurrent
           changes: [],
           textChange: null,
           moveIntent: null,
-          exportMarkdown
+          exportMarkdown: withInstruction(multiProfile, exportMarkdown)
         });
         if (result.ok) {
           for (const el of current.selectedElements) {
@@ -6293,6 +6622,7 @@ function DirectEditProvider({ children }) {
     computedColor: null,
     computedBoxShadow: null,
     computedTypography: null,
+    isComponentPrimitive: false,
     originalStyles: {},
     pendingStyles: {},
     editModeActive: false,
@@ -6414,9 +6744,10 @@ function DirectEditProvider({ children }) {
       enterCanvas();
     }
     if (wasActive) {
+      clearSelection();
       closePanel();
     }
-  }, [toggleEditModeBase, stateRef, exitCanvas, enterCanvas, closePanel]);
+  }, [toggleEditModeBase, stateRef, exitCanvas, enterCanvas, clearSelection, closePanel]);
   const toggleCanvasWithPreference = React8.useCallback(() => {
     const willBeActive = !stateRef.current.canvas.active;
     toggleCanvas();
@@ -8584,6 +8915,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;
@@ -8627,9 +8959,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);
@@ -8957,7 +9291,7 @@ function SelectionOverlay({
           zIndex: 99997,
           background: "transparent",
           border: "none",
-          color: BLUE3,
+          color: selectionColor,
           fontSize: `${pageLabelFontSize}px`,
           lineHeight: `${pageLabelLineHeight}px`,
           padding: 0,
@@ -8985,7 +9319,7 @@ function SelectionOverlay({
           height: rect.height,
           pointerEvents: "none",
           zIndex: 99996,
-          border: `1px solid ${BLUE3}`,
+          border: `1px solid ${selectionColor}`,
           borderRadius: "0px",
           boxSizing: "border-box"
         }
@@ -9002,18 +9336,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(
@@ -9069,7 +9413,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",
@@ -12494,6 +12838,7 @@ function DirectEditPanelContent() {
     computedColor,
     computedBoxShadow,
     computedTypography,
+    isComponentPrimitive,
     borderStyleControlPreference,
     pendingStyles,
     editModeActive,
@@ -12814,6 +13159,7 @@ function DirectEditPanelContent() {
           selectElement(child);
         }
       },
+      isComponentPrimitive,
       enableResizeHandles: true,
       onResizeSizingChange: updateSizingProperties
     }
@@ -14805,7 +15151,10 @@ function DirectEditDemo() {
   const handleExportEdits = async () => {
     if (Object.keys(pendingStyles).length === 0) return false;
     const exportMarkdown = buildEditExport(DEMO_LOCATOR, pendingStyles);
-    return copyText(buildAgentClipboardText(exportMarkdown));
+    const instruction = buildExportInstruction({ hasCssEdits: true, hasTextEdits: false, hasMoves: false, hasComments: false });
+    return copyText(`${instruction}
+
+${exportMarkdown}`);
   };
   return /* @__PURE__ */ jsx36("div", { className: "min-h-screen p-8", children: /* @__PURE__ */ jsxs29("div", { className: "mx-auto max-w-4xl", children: [
     /* @__PURE__ */ jsx36("h1", { className: "mb-2 text-2xl font-bold", children: "Direct Edit Panel" }),