made-refine 0.2.11 → 0.2.13

package/dist/index.d.mts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { D as DragState, a as DropIndicator, S as SelectElementOptions, b as SelectElementsOptions, c as SpacingPropertyKey, C as CSSPropertyValue, B as BorderRadiusPropertyKey, d as BorderPropertyKey, e as BorderProperties, F as FlexPropertyKey, f as SizingPropertyKey, g as SizingValue, h as SizingChangeOptions, i as ColorPropertyKey, j as ColorValue, T as TypographyPropertyKey, A as ActiveTool, k as Theme, l as BorderStyleControlPreference, m as DirectEditState, n as SessionEdit, o as SessionItem, p as CanvasElementKind, q as TypographyProperties, M as MeasurementLine, G as Guideline, r as Comment } from './utils-Dn_oW8f_.mjs';
-export { s as BorderRadiusProperties, t as BorderStyle, u as ColorProperties, v as CommentReply, w as DomSourceLocation, x as DropTarget, E as ElementInfo, y as ElementLocator, z as FlexProperties, H as MeasurementState, R as ReactComponentFrame, I as SizingChangePhase, J as SizingMode, K as SizingProperties, L as SpacingProperties, U as UndoEditEntry, N as UndoEntry, O as UndoMoveEntry, P as UndoSelectionEntry, Q as buildCommentExport, V as buildSessionExport, W as calculateDropPosition, X as calculateElementMeasurements, Y as calculateGuidelineMeasurements, Z as calculateParentMeasurements, _ as colorToTailwind, $ as elementFromPointWithoutOverlays, a0 as findContainerAtPoint, a1 as findLayoutContainerAtPoint, a2 as formatPropertyValue, a3 as getComputedBorderStyles, a4 as getComputedBoxShadow, a5 as getComputedColorStyles, a6 as getComputedStyles, a7 as getDimensionDisplay, a8 as getElementInfo, a9 as getElementLocator, aa as getFlexDirection, ab as isFlexContainer, ac as isLayoutContainer, ad as parseColorValue, ae as parsePropertyValue, af as stylesToTailwind } from './utils-Dn_oW8f_.mjs';
+import { D as DragState, a as DropIndicator, S as SelectElementOptions, b as SelectElementsOptions, c as SpacingPropertyKey, C as CSSPropertyValue, B as BorderRadiusPropertyKey, d as BorderPropertyKey, e as BorderProperties, F as FlexPropertyKey, f as SizingPropertyKey, g as SizingValue, h as SizingChangeOptions, i as ColorPropertyKey, j as ColorValue, T as TypographyPropertyKey, A as ActiveTool, k as Theme, l as BorderStyleControlPreference, m as DirectEditState, n as SessionEdit, o as SessionItem, p as CanvasElementKind, q as TypographyProperties, M as MeasurementLine, G as Guideline, r as Comment } from './utils-DvJ3xKrO.mjs';
+export { s as BorderRadiusProperties, t as BorderStyle, u as ColorProperties, v as CommentReply, w as DomSourceLocation, x as DropTarget, E as ElementInfo, y as ElementLocator, z as FlexProperties, H as MeasurementState, R as ReactComponentFrame, I as SizingChangePhase, J as SizingMode, K as SizingProperties, L as SpacingProperties, U as UndoEditEntry, N as UndoEntry, O as UndoMoveEntry, P as UndoSelectionEntry, Q as buildCommentExport, V as buildSessionExport, W as calculateDropPosition, X as calculateElementMeasurements, Y as calculateGuidelineMeasurements, Z as calculateParentMeasurements, _ as colorToTailwind, $ as elementFromPointWithoutOverlays, a0 as findContainerAtPoint, a1 as findLayoutContainerAtPoint, a2 as formatPropertyValue, a3 as getComputedBorderStyles, a4 as getComputedBoxShadow, a5 as getComputedColorStyles, a6 as getComputedStyles, a7 as getDimensionDisplay, a8 as getElementInfo, a9 as getElementLocator, aa as getFlexDirection, ab as isFlexContainer, ac as isLayoutContainer, ad as parseColorValue, ae as parsePropertyValue, af as stylesToTailwind } from './utils-DvJ3xKrO.mjs';
 
 declare function DirectEdit(): react_jsx_runtime.JSX.Element;
 

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { D as DragState, a as DropIndicator, S as SelectElementOptions, b as SelectElementsOptions, c as SpacingPropertyKey, C as CSSPropertyValue, B as BorderRadiusPropertyKey, d as BorderPropertyKey, e as BorderProperties, F as FlexPropertyKey, f as SizingPropertyKey, g as SizingValue, h as SizingChangeOptions, i as ColorPropertyKey, j as ColorValue, T as TypographyPropertyKey, A as ActiveTool, k as Theme, l as BorderStyleControlPreference, m as DirectEditState, n as SessionEdit, o as SessionItem, p as CanvasElementKind, q as TypographyProperties, M as MeasurementLine, G as Guideline, r as Comment } from './utils-Dn_oW8f_.js';
-export { s as BorderRadiusProperties, t as BorderStyle, u as ColorProperties, v as CommentReply, w as DomSourceLocation, x as DropTarget, E as ElementInfo, y as ElementLocator, z as FlexProperties, H as MeasurementState, R as ReactComponentFrame, I as SizingChangePhase, J as SizingMode, K as SizingProperties, L as SpacingProperties, U as UndoEditEntry, N as UndoEntry, O as UndoMoveEntry, P as UndoSelectionEntry, Q as buildCommentExport, V as buildSessionExport, W as calculateDropPosition, X as calculateElementMeasurements, Y as calculateGuidelineMeasurements, Z as calculateParentMeasurements, _ as colorToTailwind, $ as elementFromPointWithoutOverlays, a0 as findContainerAtPoint, a1 as findLayoutContainerAtPoint, a2 as formatPropertyValue, a3 as getComputedBorderStyles, a4 as getComputedBoxShadow, a5 as getComputedColorStyles, a6 as getComputedStyles, a7 as getDimensionDisplay, a8 as getElementInfo, a9 as getElementLocator, aa as getFlexDirection, ab as isFlexContainer, ac as isLayoutContainer, ad as parseColorValue, ae as parsePropertyValue, af as stylesToTailwind } from './utils-Dn_oW8f_.js';
+import { D as DragState, a as DropIndicator, S as SelectElementOptions, b as SelectElementsOptions, c as SpacingPropertyKey, C as CSSPropertyValue, B as BorderRadiusPropertyKey, d as BorderPropertyKey, e as BorderProperties, F as FlexPropertyKey, f as SizingPropertyKey, g as SizingValue, h as SizingChangeOptions, i as ColorPropertyKey, j as ColorValue, T as TypographyPropertyKey, A as ActiveTool, k as Theme, l as BorderStyleControlPreference, m as DirectEditState, n as SessionEdit, o as SessionItem, p as CanvasElementKind, q as TypographyProperties, M as MeasurementLine, G as Guideline, r as Comment } from './utils-DvJ3xKrO.js';
+export { s as BorderRadiusProperties, t as BorderStyle, u as ColorProperties, v as CommentReply, w as DomSourceLocation, x as DropTarget, E as ElementInfo, y as ElementLocator, z as FlexProperties, H as MeasurementState, R as ReactComponentFrame, I as SizingChangePhase, J as SizingMode, K as SizingProperties, L as SpacingProperties, U as UndoEditEntry, N as UndoEntry, O as UndoMoveEntry, P as UndoSelectionEntry, Q as buildCommentExport, V as buildSessionExport, W as calculateDropPosition, X as calculateElementMeasurements, Y as calculateGuidelineMeasurements, Z as calculateParentMeasurements, _ as colorToTailwind, $ as elementFromPointWithoutOverlays, a0 as findContainerAtPoint, a1 as findLayoutContainerAtPoint, a2 as formatPropertyValue, a3 as getComputedBorderStyles, a4 as getComputedBoxShadow, a5 as getComputedColorStyles, a6 as getComputedStyles, a7 as getDimensionDisplay, a8 as getElementInfo, a9 as getElementLocator, aa as getFlexDirection, ab as isFlexContainer, ac as isLayoutContainer, ad as parseColorValue, ae as parsePropertyValue, af as stylesToTailwind } from './utils-DvJ3xKrO.js';
 
 declare function DirectEdit(): react_jsx_runtime.JSX.Element;
 

package/dist/index.js

@@ -2980,7 +2980,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.");
@@ -3692,11 +3692,6 @@ function useStyleUpdaters({
 var React3 = __toESM(require("react"));
 
 // src/clipboard.ts
-function buildAgentClipboardText(markdown) {
-  return `implement the visual edits
-
-${markdown}`;
-}
 function tryRestoreFocus(element) {
   if (!(element instanceof HTMLElement)) return;
   try {
@@ -5394,6 +5389,12 @@ async function checkAgentConnection() {
 }
 
 // src/use-agent-comms.ts
+function withInstruction(profile, markdown) {
+  const instruction = buildExportInstruction(profile);
+  return instruction ? `${instruction}
+
+${markdown}` : markdown;
+}
 function buildLocatorPayload(locator) {
   return {
     element: {
@@ -5486,6 +5487,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),
@@ -5493,7 +5499,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);
@@ -5505,12 +5511,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);
@@ -5530,12 +5537,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);
@@ -5545,7 +5554,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) {
@@ -6494,9 +6503,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();
@@ -14821,7 +14831,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__ */ (0, import_jsx_runtime36.jsx)("div", { className: "min-h-screen p-8", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "mx-auto max-w-4xl", children: [
     /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("h1", { className: "mb-2 text-2xl font-bold", children: "Direct Edit Panel" }),