made-refine 0.1.9 → 0.1.11

package/README.md

@@ -15,7 +15,7 @@ Visual CSS editor for React. Edit styles in the browser, then copy agent-ready e
 ## Quick start
 
 ```bash
-npx made-refine init
+npx made-refine@latest init
 ```
 
 This detects your framework, installs the package, previews file changes, and applies them after your confirmation. No manual wiring needed.

package/dist/cli.cjs

@@ -1149,8 +1149,8 @@ var require_command = __commonJS({
     "use strict";
     var EventEmitter = require("events").EventEmitter;
     var childProcess = require("child_process");
-    var path2 = require("path");
-    var fs2 = require("fs");
+    var path3 = require("path");
+    var fs3 = require("fs");
     var process2 = require("process");
     var { Argument: Argument2, humanReadableArgName } = require_argument();
     var { CommanderError: CommanderError2 } = require_error();
@@ -2131,7 +2131,7 @@ Expecting one of '${allowedValues.join("', '")}'`);
        * @param {string} subcommandName
        */
       _checkForMissingExecutable(executableFile, executableDir, subcommandName) {
-        if (fs2.existsSync(executableFile)) return;
+        if (fs3.existsSync(executableFile)) return;
         const executableDirMessage = executableDir ? `searched for local subcommand relative to directory '${executableDir}'` : "no directory for search for local subcommand, use .executableDir() to supply a custom directory";
         const executableMissing = `'${executableFile}' does not exist
  - if '${subcommandName}' is not meant to be an executable command, remove description parameter from '.command()' and use '.description()' instead
@@ -2149,11 +2149,11 @@ Expecting one of '${allowedValues.join("', '")}'`);
         let launchWithNode = false;
         const sourceExt = [".js", ".ts", ".tsx", ".mjs", ".cjs"];
         function findFile2(baseDir, baseName) {
-          const localBin = path2.resolve(baseDir, baseName);
-          if (fs2.existsSync(localBin)) return localBin;
-          if (sourceExt.includes(path2.extname(baseName))) return void 0;
+          const localBin = path3.resolve(baseDir, baseName);
+          if (fs3.existsSync(localBin)) return localBin;
+          if (sourceExt.includes(path3.extname(baseName))) return void 0;
           const foundExt = sourceExt.find(
-            (ext) => fs2.existsSync(`${localBin}${ext}`)
+            (ext) => fs3.existsSync(`${localBin}${ext}`)
           );
           if (foundExt) return `${localBin}${foundExt}`;
           return void 0;
@@ -2165,21 +2165,21 @@ Expecting one of '${allowedValues.join("', '")}'`);
         if (this._scriptPath) {
           let resolvedScriptPath;
           try {
-            resolvedScriptPath = fs2.realpathSync(this._scriptPath);
+            resolvedScriptPath = fs3.realpathSync(this._scriptPath);
           } catch {
             resolvedScriptPath = this._scriptPath;
           }
-          executableDir = path2.resolve(
-            path2.dirname(resolvedScriptPath),
+          executableDir = path3.resolve(
+            path3.dirname(resolvedScriptPath),
             executableDir
           );
         }
         if (executableDir) {
           let localFile = findFile2(executableDir, executableFile);
           if (!localFile && !subcommand._executableFile && this._scriptPath) {
-            const legacyName = path2.basename(
+            const legacyName = path3.basename(
               this._scriptPath,
-              path2.extname(this._scriptPath)
+              path3.extname(this._scriptPath)
             );
             if (legacyName !== this._name) {
               localFile = findFile2(
@@ -2190,7 +2190,7 @@ Expecting one of '${allowedValues.join("', '")}'`);
           }
           executableFile = localFile || executableFile;
         }
-        launchWithNode = sourceExt.includes(path2.extname(executableFile));
+        launchWithNode = sourceExt.includes(path3.extname(executableFile));
         let proc;
         if (process2.platform !== "win32") {
           if (launchWithNode) {
@@ -3037,7 +3037,7 @@ Expecting one of '${allowedValues.join("', '")}'`);
        * @return {Command}
        */
       nameFromFilename(filename) {
-        this._name = path2.basename(filename, path2.extname(filename));
+        this._name = path3.basename(filename, path3.extname(filename));
         return this;
       }
       /**
@@ -3051,9 +3051,9 @@ Expecting one of '${allowedValues.join("', '")}'`);
        * @param {string} [path]
        * @return {(string|null|Command)}
        */
-      executableDir(path3) {
-        if (path3 === void 0) return this._executableDir;
-        this._executableDir = path3;
+      executableDir(path4) {
+        if (path4 === void 0) return this._executableDir;
+        this._executableDir = path4;
         return this;
       }
       /**
@@ -8274,13 +8274,70 @@ var {
 // src/cli.ts
 var import_prompts = __toESM(require_prompts3());
 var import_picocolors = __toESM(require_picocolors());
+var import_fs2 = __toESM(require("fs"));
+var import_path2 = __toESM(require("path"));
+var import_child_process = require("child_process");
+
+// src/cli-package-manager.ts
 var import_fs = __toESM(require("fs"));
 var import_path = __toESM(require("path"));
-var import_child_process = require("child_process");
+function parsePackageManager(value) {
+  if (typeof value !== "string") return null;
+  const normalized = value.trim().toLowerCase();
+  if (normalized === "bun" || normalized.startsWith("bun@")) return "bun";
+  if (normalized === "pnpm" || normalized.startsWith("pnpm@")) return "pnpm";
+  if (normalized === "yarn" || normalized.startsWith("yarn@")) return "yarn";
+  if (normalized === "npm" || normalized.startsWith("npm@")) return "npm";
+  return null;
+}
+function detectFromPackageJson(cwd) {
+  const packageJsonPath = import_path.default.join(cwd, "package.json");
+  if (!import_fs.default.existsSync(packageJsonPath)) return null;
+  try {
+    const pkg = JSON.parse(import_fs.default.readFileSync(packageJsonPath, "utf-8"));
+    return parsePackageManager(pkg.packageManager);
+  } catch {
+    return null;
+  }
+}
+function detectFromLockfile(directory) {
+  if (import_fs.default.existsSync(import_path.default.join(directory, "bun.lockb")) || import_fs.default.existsSync(import_path.default.join(directory, "bun.lock"))) return "bun";
+  if (import_fs.default.existsSync(import_path.default.join(directory, "pnpm-lock.yaml"))) return "pnpm";
+  if (import_fs.default.existsSync(import_path.default.join(directory, "yarn.lock"))) return "yarn";
+  if (import_fs.default.existsSync(import_path.default.join(directory, "package-lock.json")) || import_fs.default.existsSync(import_path.default.join(directory, "npm-shrinkwrap.json"))) return "npm";
+  return null;
+}
+function detectPackageManager(cwd) {
+  const fromPackageJson = detectFromPackageJson(cwd);
+  if (fromPackageJson) return fromPackageJson;
+  let current = import_path.default.resolve(cwd);
+  while (true) {
+    const fromLockfile = detectFromLockfile(current);
+    if (fromLockfile) return fromLockfile;
+    const parent = import_path.default.dirname(current);
+    if (parent === current) break;
+    current = parent;
+  }
+  return "npm";
+}
+function getInstallCommand(pm) {
+  switch (pm) {
+    case "bun":
+      return "bun add -d made-refine@latest";
+    case "pnpm":
+      return "pnpm add -D made-refine@latest";
+    case "yarn":
+      return "yarn add -D made-refine@latest";
+    case "npm":
+      return "npm install --save-dev made-refine@latest";
+  }
+}
+
+// src/cli.ts
 function detectFramework(cwd) {
-  const pkgPath = import_path.default.join(cwd, "package.json");
-  if (!import_fs.default.existsSync(pkgPath)) return null;
-  const pkg = JSON.parse(import_fs.default.readFileSync(pkgPath, "utf-8"));
+  const pkgPath = import_path2.default.join(cwd, "package.json");
+  if (!import_fs2.default.existsSync(pkgPath)) return null;
+  const pkg = JSON.parse(import_fs2.default.readFileSync(pkgPath, "utf-8"));
   const deps = { ...pkg.dependencies, ...pkg.devDependencies };
   if (deps["@tanstack/start"] || deps["@tanstack/react-start"]) return "tanstack";
   if (deps["next"]) return "next";
@@ -8289,13 +8346,13 @@ function detectFramework(cwd) {
 }
 function findFile(cwd, ...candidates) {
   for (const c of candidates) {
-    const full = import_path.default.join(cwd, c);
-    if (import_fs.default.existsSync(full)) return full;
+    const full = import_path2.default.join(cwd, c);
+    if (import_fs2.default.existsSync(full)) return full;
   }
   return null;
 }
 function showDiff(filePath, original, modified) {
-  const relPath = import_path.default.relative(process.cwd(), filePath);
+  const relPath = import_path2.default.relative(process.cwd(), filePath);
   console.log();
   console.log(import_picocolors.default.bold(`  Changes to ${relPath}:`));
   console.log();
@@ -8344,10 +8401,10 @@ function showDiff(filePath, original, modified) {
   console.log();
 }
 async function transformFile(filePath, transform) {
-  const original = import_fs.default.readFileSync(filePath, "utf-8");
+  const original = import_fs2.default.readFileSync(filePath, "utf-8");
   const modified = transform(original);
   if (modified === null || modified === original) {
-    console.log(import_picocolors.default.dim(`  ${import_path.default.relative(process.cwd(), filePath)} \u2014 no changes needed`));
+    console.log(import_picocolors.default.dim(`  ${import_path2.default.relative(process.cwd(), filePath)} \u2014 no changes needed`));
     return false;
   }
   showDiff(filePath, original, modified);
@@ -8358,29 +8415,13 @@ async function transformFile(filePath, transform) {
     initial: true
   });
   if (confirm) {
-    import_fs.default.writeFileSync(filePath, modified, "utf-8");
-    console.log(import_picocolors.default.green(`  \u2713 Updated ${import_path.default.relative(process.cwd(), filePath)}`));
+    import_fs2.default.writeFileSync(filePath, modified, "utf-8");
+    console.log(import_picocolors.default.green(`  \u2713 Updated ${import_path2.default.relative(process.cwd(), filePath)}`));
     return true;
   }
   console.log(import_picocolors.default.dim("  Skipped"));
   return false;
 }
-function detectPackageManager(cwd) {
-  if (import_fs.default.existsSync(import_path.default.join(cwd, "bun.lockb")) || import_fs.default.existsSync(import_path.default.join(cwd, "bun.lock"))) return "bun";
-  if (import_fs.default.existsSync(import_path.default.join(cwd, "pnpm-lock.yaml"))) return "pnpm";
-  if (import_fs.default.existsSync(import_path.default.join(cwd, "yarn.lock"))) return "yarn";
-  return "bun";
-}
-function getInstallCommand(pm) {
-  switch (pm) {
-    case "bun":
-      return "bun add -d made-refine@beta";
-    case "pnpm":
-      return "pnpm add -D made-refine@beta";
-    case "yarn":
-      return "yarn add -D made-refine@beta";
-  }
-}
 function installPackage(cwd) {
   console.log(import_picocolors.default.bold("\nInstalling made-refine..."));
   const pm = detectPackageManager(cwd);
@@ -8396,9 +8437,9 @@ function installPackage(cwd) {
 }
 async function setupNextJs(cwd) {
   console.log(import_picocolors.default.bold("\nConfiguring for Next.js...\n"));
-  const babelrcPath = import_path.default.join(cwd, ".babelrc");
-  if (import_fs.default.existsSync(babelrcPath)) {
-    const content2 = import_fs.default.readFileSync(babelrcPath, "utf-8");
+  const babelrcPath = import_path2.default.join(cwd, ".babelrc");
+  if (import_fs2.default.existsSync(babelrcPath)) {
+    const content2 = import_fs2.default.readFileSync(babelrcPath, "utf-8");
     if (content2.includes("made-refine")) {
       console.log(import_picocolors.default.dim("  .babelrc \u2014 already configured"));
     } else {
@@ -8418,16 +8459,16 @@ async function setupNextJs(cwd) {
       2
     );
     console.log(import_picocolors.default.green(`  \u2713 Created .babelrc`));
-    import_fs.default.writeFileSync(babelrcPath, babelrc + "\n", "utf-8");
+    import_fs2.default.writeFileSync(babelrcPath, babelrc + "\n", "utf-8");
   }
-  const preloadSrc = import_path.default.join(cwd, "node_modules/made-refine/dist/preload/preload.js");
-  const publicDir = import_path.default.join(cwd, "public");
-  const preloadDest = import_path.default.join(publicDir, "made-refine-preload.js");
-  if (!import_fs.default.existsSync(publicDir)) {
-    import_fs.default.mkdirSync(publicDir, { recursive: true });
+  const preloadSrc = import_path2.default.join(cwd, "node_modules/made-refine/dist/preload/preload.js");
+  const publicDir = import_path2.default.join(cwd, "public");
+  const preloadDest = import_path2.default.join(publicDir, "made-refine-preload.js");
+  if (!import_fs2.default.existsSync(publicDir)) {
+    import_fs2.default.mkdirSync(publicDir, { recursive: true });
   }
-  if (import_fs.default.existsSync(preloadSrc)) {
-    import_fs.default.copyFileSync(preloadSrc, preloadDest);
+  if (import_fs2.default.existsSync(preloadSrc)) {
+    import_fs2.default.copyFileSync(preloadSrc, preloadDest);
     console.log(import_picocolors.default.green("  \u2713 Copied preload script to public/made-refine-preload.js"));
   } else {
     console.log(import_picocolors.default.yellow("  \u26A0 Preload script not found. After install, run:"));
@@ -8439,9 +8480,9 @@ async function setupNextJs(cwd) {
     printNextLayoutInstructions();
     return;
   }
-  const content = import_fs.default.readFileSync(layoutFile, "utf-8");
+  const content = import_fs2.default.readFileSync(layoutFile, "utf-8");
   if (content.includes("made-refine")) {
-    console.log(import_picocolors.default.dim(`  ${import_path.default.relative(cwd, layoutFile)} \u2014 already configured`));
+    console.log(import_picocolors.default.dim(`  ${import_path2.default.relative(cwd, layoutFile)} \u2014 already configured`));
     return;
   }
   const transformed = await transformFile(layoutFile, (src) => {
@@ -8532,9 +8573,9 @@ async function setupVite(cwd) {
     printViteConfigInstructions();
     return;
   }
-  const viteContent = import_fs.default.readFileSync(viteConfig, "utf-8");
+  const viteContent = import_fs2.default.readFileSync(viteConfig, "utf-8");
   if (viteContent.includes("made-refine")) {
-    console.log(import_picocolors.default.dim(`  ${import_path.default.relative(cwd, viteConfig)} \u2014 already configured`));
+    console.log(import_picocolors.default.dim(`  ${import_path2.default.relative(cwd, viteConfig)} \u2014 already configured`));
   } else {
     await transformFile(viteConfig, (src) => transformViteConfig(src));
   }
@@ -8554,9 +8595,9 @@ async function setupVite(cwd) {
     printViteComponentInstructions();
     return;
   }
-  const appContent = import_fs.default.readFileSync(appFile, "utf-8");
+  const appContent = import_fs2.default.readFileSync(appFile, "utf-8");
   if (appContent.includes("made-refine")) {
-    console.log(import_picocolors.default.dim(`  ${import_path.default.relative(cwd, appFile)} \u2014 already configured`));
+    console.log(import_picocolors.default.dim(`  ${import_path2.default.relative(cwd, appFile)} \u2014 already configured`));
     return;
   }
   const transformed = await transformFile(appFile, (src) => {
@@ -8665,9 +8706,9 @@ async function setupTanStack(cwd) {
     console.log(import_picocolors.default.yellow("  Could not find vite.config \u2014 add manually:"));
     printViteConfigInstructions();
   } else {
-    const viteContent = import_fs.default.readFileSync(viteConfig, "utf-8");
+    const viteContent = import_fs2.default.readFileSync(viteConfig, "utf-8");
     if (viteContent.includes("made-refine")) {
-      console.log(import_picocolors.default.dim(`  ${import_path.default.relative(cwd, viteConfig)} \u2014 already configured`));
+      console.log(import_picocolors.default.dim(`  ${import_path2.default.relative(cwd, viteConfig)} \u2014 already configured`));
     } else {
       await transformFile(viteConfig, (src) => transformViteConfig(src));
     }
@@ -8684,9 +8725,9 @@ async function setupTanStack(cwd) {
     printTanStackInstructions();
     return;
   }
-  const rootContent = import_fs.default.readFileSync(rootFile, "utf-8");
+  const rootContent = import_fs2.default.readFileSync(rootFile, "utf-8");
   if (rootContent.includes("made-refine")) {
-    console.log(import_picocolors.default.dim(`  ${import_path.default.relative(cwd, rootFile)} \u2014 already configured`));
+    console.log(import_picocolors.default.dim(`  ${import_path2.default.relative(cwd, rootFile)} \u2014 already configured`));
     return;
   }
   const transformed = await transformFile(rootFile, (src) => {
@@ -8747,7 +8788,7 @@ function printTanStackInstructions() {
 async function init() {
   const cwd = process.cwd();
   console.log(import_picocolors.default.bold("\nmade-refine init\n"));
-  if (!import_fs.default.existsSync(import_path.default.join(cwd, "package.json"))) {
+  if (!import_fs2.default.existsSync(import_path2.default.join(cwd, "package.json"))) {
     console.log(import_picocolors.default.red("No package.json found. Run this command from your project root."));
     process.exit(1);
   }

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 SpacingPropertyKey, C as CSSPropertyValue, B as BorderRadiusPropertyKey, b as BorderPropertyKey, c as BorderProperties, F as FlexPropertyKey, d as SizingPropertyKey, e as SizingValue, f as ColorPropertyKey, g as ColorValue, T as TypographyPropertyKey, A as ActiveTool, h as Theme, i as BorderStyleControlPreference, j as SessionEdit, k as SessionItem, l as DirectEditState, m as TypographyProperties, M as MeasurementLine, G as Guideline, n as Comment } from './utils-ClbtK5sb.mjs';
-export { o as BorderRadiusProperties, p as BorderStyle, q as ColorProperties, r as CommentReply, s as DomSourceLocation, t as DropTarget, E as ElementInfo, u as ElementLocator, v as FlexProperties, w as MeasurementState, R as ReactComponentFrame, x as SizingMode, y as SizingProperties, z as SpacingProperties, U as UndoEditEntry, H as UndoEntry, I as UndoMoveEntry, J as UndoSelectionEntry, K as buildCommentExport, L as buildSessionExport, N as calculateDropPosition, O as calculateElementMeasurements, P as calculateGuidelineMeasurements, Q as calculateParentMeasurements, V as colorToTailwind, W as elementFromPointWithoutOverlays, X as findContainerAtPoint, Y as formatPropertyValue, Z as getComputedBorderStyles, _ as getComputedBoxShadow, $ as getComputedColorStyles, a0 as getComputedStyles, a1 as getDimensionDisplay, a2 as getElementInfo, a3 as getElementLocator, a4 as getFlexDirection, a5 as isFlexContainer, a6 as parseColorValue, a7 as parsePropertyValue, a8 as stylesToTailwind } from './utils-ClbtK5sb.mjs';
+import { D as DragState, a as DropIndicator, S as SpacingPropertyKey, C as CSSPropertyValue, B as BorderRadiusPropertyKey, b as BorderPropertyKey, c as BorderProperties, F as FlexPropertyKey, d as SizingPropertyKey, e as SizingValue, f as ColorPropertyKey, g as ColorValue, T as TypographyPropertyKey, A as ActiveTool, h as Theme, i as BorderStyleControlPreference, j as SessionEdit, k as SessionItem, l as DirectEditState, m as TypographyProperties, M as MeasurementLine, G as Guideline, n as Comment } from './utils-DUE0nsRc.mjs';
+export { o as BorderRadiusProperties, p as BorderStyle, q as ColorProperties, r as CommentReply, s as DomSourceLocation, t as DropTarget, E as ElementInfo, u as ElementLocator, v as FlexProperties, w as MeasurementState, R as ReactComponentFrame, x as SizingMode, y as SizingProperties, z as SpacingProperties, U as UndoEditEntry, H as UndoEntry, I as UndoMoveEntry, J as UndoSelectionEntry, K as buildCommentExport, L as buildSessionExport, N as calculateDropPosition, O as calculateElementMeasurements, P as calculateGuidelineMeasurements, Q as calculateParentMeasurements, V as colorToTailwind, W as elementFromPointWithoutOverlays, X as findContainerAtPoint, Y as formatPropertyValue, Z as getComputedBorderStyles, _ as getComputedBoxShadow, $ as getComputedColorStyles, a0 as getComputedStyles, a1 as getDimensionDisplay, a2 as getElementInfo, a3 as getElementLocator, a4 as getFlexDirection, a5 as isFlexContainer, a6 as parseColorValue, a7 as parsePropertyValue, a8 as stylesToTailwind } from './utils-DUE0nsRc.mjs';
 
 declare function DirectEdit(): react_jsx_runtime.JSX.Element;
 
@@ -20,11 +20,14 @@ interface UseMoveDropTarget {
     insertBefore: HTMLElement | null;
     flexDirection: 'row' | 'row-reverse' | 'column' | 'column-reverse';
 }
+interface StartDragOptions {
+    constrainToOriginalParent?: boolean;
+}
 interface UseMoveResult {
     dragState: DragState;
     dropTarget: UseMoveDropTarget | null;
     dropIndicator: DropIndicator | null;
-    startDrag: (e: React.PointerEvent, element: HTMLElement) => void;
+    startDrag: (e: React.PointerEvent, element: HTMLElement, options?: StartDragOptions) => void;
 }
 declare function useMove({ onMoveComplete }: UseMoveOptions): UseMoveResult;
 
@@ -59,6 +62,7 @@ interface DirectEditActionsContextValue {
     addCommentReply: (id: string, text: string) => void;
     deleteComment: (id: string) => void;
     exportComment: (id: string) => Promise<boolean>;
+    canSendEditToAgent: () => boolean;
     sendEditToAgent: () => Promise<boolean>;
     sendCommentToAgent: (id: string) => Promise<boolean>;
     setActiveCommentId: (id: string | null) => void;
@@ -147,6 +151,7 @@ interface DirectEditPanelInnerProps {
     onReset: () => void;
     onExportEdits: () => Promise<boolean>;
     onSendToAgent: () => Promise<boolean>;
+    canSendToAgent?: boolean;
     className?: string;
     style?: React.CSSProperties;
     panelRef?: React.RefObject<HTMLDivElement>;
@@ -155,7 +160,7 @@ interface DirectEditPanelInnerProps {
     onHeaderPointerMove?: (e: React.PointerEvent) => void;
     onHeaderPointerUp?: (e: React.PointerEvent) => void;
 }
-declare function DirectEditPanelInner({ elementInfo, computedSpacing, computedBorderRadius, computedBorder, computedFlex, computedSizing, computedColor, computedBoxShadow, borderStyleControlPreference, computedTypography, pendingStyles, onClose, onSelectParent, onSelectChild, onUpdateSpacing, onUpdateBorderRadius, onUpdateBorder, onBatchUpdateBorder, onSetCSS, onUpdateFlex, onToggleFlex, onUpdateSizing, onUpdateColor, onUpdateTypography, onReset, onExportEdits, onSendToAgent, className, style, panelRef, isDragging, onHeaderPointerDown, onHeaderPointerMove, onHeaderPointerUp, }: DirectEditPanelInnerProps): react_jsx_runtime.JSX.Element;
+declare function DirectEditPanelInner({ elementInfo, computedSpacing, computedBorderRadius, computedBorder, computedFlex, computedSizing, computedColor, computedBoxShadow, borderStyleControlPreference, computedTypography, pendingStyles, onClose, onSelectParent, onSelectChild, onUpdateSpacing, onUpdateBorderRadius, onUpdateBorder, onBatchUpdateBorder, onSetCSS, onUpdateFlex, onToggleFlex, onUpdateSizing, onUpdateColor, onUpdateTypography, onReset, onExportEdits, onSendToAgent, canSendToAgent, className, style, panelRef, isDragging, onHeaderPointerDown, onHeaderPointerMove, onHeaderPointerUp, }: DirectEditPanelInnerProps): react_jsx_runtime.JSX.Element;
 declare function DirectEditPanel(): react_jsx_runtime.JSX.Element | null;
 
 interface DirectEditToolbarInnerProps {
@@ -196,20 +201,25 @@ interface MeasurementOverlayProps {
 }
 declare function MeasurementOverlay({ selectedElement, hoveredElement, measurements, }: MeasurementOverlayProps): react_jsx_runtime.JSX.Element;
 
+interface MoveStartOptions {
+    constrainToOriginalParent?: boolean;
+}
 interface SelectionOverlayProps {
     selectedElement: HTMLElement;
+    draggedElement?: HTMLElement | null;
     isDragging: boolean;
     ghostPosition?: {
         x: number;
         y: number;
     };
-    onMoveStart: (e: React.PointerEvent) => void;
+    onMoveStart: (e: React.PointerEvent, targetElement?: HTMLElement, options?: MoveStartOptions) => void;
+    showMoveHandle?: boolean;
     isTextEditing?: boolean;
     onDoubleClick?: (clientX: number, clientY: number) => void;
     onHoverElement?: (element: HTMLElement | null) => void;
     onClickThrough?: (clientX: number, clientY: number) => void;
 }
-declare function SelectionOverlay({ selectedElement, isDragging, ghostPosition, onMoveStart, isTextEditing, onDoubleClick, onHoverElement, onClickThrough, }: SelectionOverlayProps): react_jsx_runtime.JSX.Element;
+declare function SelectionOverlay({ selectedElement, draggedElement, isDragging, ghostPosition, onMoveStart, showMoveHandle, isTextEditing, onDoubleClick, onHoverElement, onClickThrough, }: SelectionOverlayProps): react_jsx_runtime.JSX.Element;
 
 interface MoveOverlayProps {
     dropIndicator: DropIndicator | null;
@@ -246,9 +256,14 @@ interface CommentOverlayProps {
     onUpdateText: (id: string, text: string) => void;
     onAddReply: (id: string, text: string) => void;
     onDelete: (id: string) => void;
+    onExport?: (id: string) => Promise<boolean>;
     onSendToAgent: (id: string) => Promise<boolean>;
+    attentionRequest?: {
+        commentId: string;
+        nonce: number;
+    } | null;
 }
-declare function CommentOverlay({ comments, activeCommentId, onSetActiveComment, onUpdateText, onAddReply, onDelete, onSendToAgent, }: CommentOverlayProps): react_jsx_runtime.JSX.Element | null;
+declare function CommentOverlay({ comments, activeCommentId, onSetActiveComment, onUpdateText, onAddReply, onDelete, onExport, onSendToAgent, attentionRequest, }: CommentOverlayProps): react_jsx_runtime.JSX.Element | null;
 
 declare function formatColorValue(color: ColorValue): string;
 

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 SpacingPropertyKey, C as CSSPropertyValue, B as BorderRadiusPropertyKey, b as BorderPropertyKey, c as BorderProperties, F as FlexPropertyKey, d as SizingPropertyKey, e as SizingValue, f as ColorPropertyKey, g as ColorValue, T as TypographyPropertyKey, A as ActiveTool, h as Theme, i as BorderStyleControlPreference, j as SessionEdit, k as SessionItem, l as DirectEditState, m as TypographyProperties, M as MeasurementLine, G as Guideline, n as Comment } from './utils-ClbtK5sb.js';
-export { o as BorderRadiusProperties, p as BorderStyle, q as ColorProperties, r as CommentReply, s as DomSourceLocation, t as DropTarget, E as ElementInfo, u as ElementLocator, v as FlexProperties, w as MeasurementState, R as ReactComponentFrame, x as SizingMode, y as SizingProperties, z as SpacingProperties, U as UndoEditEntry, H as UndoEntry, I as UndoMoveEntry, J as UndoSelectionEntry, K as buildCommentExport, L as buildSessionExport, N as calculateDropPosition, O as calculateElementMeasurements, P as calculateGuidelineMeasurements, Q as calculateParentMeasurements, V as colorToTailwind, W as elementFromPointWithoutOverlays, X as findContainerAtPoint, Y as formatPropertyValue, Z as getComputedBorderStyles, _ as getComputedBoxShadow, $ as getComputedColorStyles, a0 as getComputedStyles, a1 as getDimensionDisplay, a2 as getElementInfo, a3 as getElementLocator, a4 as getFlexDirection, a5 as isFlexContainer, a6 as parseColorValue, a7 as parsePropertyValue, a8 as stylesToTailwind } from './utils-ClbtK5sb.js';
+import { D as DragState, a as DropIndicator, S as SpacingPropertyKey, C as CSSPropertyValue, B as BorderRadiusPropertyKey, b as BorderPropertyKey, c as BorderProperties, F as FlexPropertyKey, d as SizingPropertyKey, e as SizingValue, f as ColorPropertyKey, g as ColorValue, T as TypographyPropertyKey, A as ActiveTool, h as Theme, i as BorderStyleControlPreference, j as SessionEdit, k as SessionItem, l as DirectEditState, m as TypographyProperties, M as MeasurementLine, G as Guideline, n as Comment } from './utils-DUE0nsRc.js';
+export { o as BorderRadiusProperties, p as BorderStyle, q as ColorProperties, r as CommentReply, s as DomSourceLocation, t as DropTarget, E as ElementInfo, u as ElementLocator, v as FlexProperties, w as MeasurementState, R as ReactComponentFrame, x as SizingMode, y as SizingProperties, z as SpacingProperties, U as UndoEditEntry, H as UndoEntry, I as UndoMoveEntry, J as UndoSelectionEntry, K as buildCommentExport, L as buildSessionExport, N as calculateDropPosition, O as calculateElementMeasurements, P as calculateGuidelineMeasurements, Q as calculateParentMeasurements, V as colorToTailwind, W as elementFromPointWithoutOverlays, X as findContainerAtPoint, Y as formatPropertyValue, Z as getComputedBorderStyles, _ as getComputedBoxShadow, $ as getComputedColorStyles, a0 as getComputedStyles, a1 as getDimensionDisplay, a2 as getElementInfo, a3 as getElementLocator, a4 as getFlexDirection, a5 as isFlexContainer, a6 as parseColorValue, a7 as parsePropertyValue, a8 as stylesToTailwind } from './utils-DUE0nsRc.js';
 
 declare function DirectEdit(): react_jsx_runtime.JSX.Element;
 
@@ -20,11 +20,14 @@ interface UseMoveDropTarget {
     insertBefore: HTMLElement | null;
     flexDirection: 'row' | 'row-reverse' | 'column' | 'column-reverse';
 }
+interface StartDragOptions {
+    constrainToOriginalParent?: boolean;
+}
 interface UseMoveResult {
     dragState: DragState;
     dropTarget: UseMoveDropTarget | null;
     dropIndicator: DropIndicator | null;
-    startDrag: (e: React.PointerEvent, element: HTMLElement) => void;
+    startDrag: (e: React.PointerEvent, element: HTMLElement, options?: StartDragOptions) => void;
 }
 declare function useMove({ onMoveComplete }: UseMoveOptions): UseMoveResult;
 
@@ -59,6 +62,7 @@ interface DirectEditActionsContextValue {
     addCommentReply: (id: string, text: string) => void;
     deleteComment: (id: string) => void;
     exportComment: (id: string) => Promise<boolean>;
+    canSendEditToAgent: () => boolean;
     sendEditToAgent: () => Promise<boolean>;
     sendCommentToAgent: (id: string) => Promise<boolean>;
     setActiveCommentId: (id: string | null) => void;
@@ -147,6 +151,7 @@ interface DirectEditPanelInnerProps {
     onReset: () => void;
     onExportEdits: () => Promise<boolean>;
     onSendToAgent: () => Promise<boolean>;
+    canSendToAgent?: boolean;
     className?: string;
     style?: React.CSSProperties;
     panelRef?: React.RefObject<HTMLDivElement>;
@@ -155,7 +160,7 @@ interface DirectEditPanelInnerProps {
     onHeaderPointerMove?: (e: React.PointerEvent) => void;
     onHeaderPointerUp?: (e: React.PointerEvent) => void;
 }
-declare function DirectEditPanelInner({ elementInfo, computedSpacing, computedBorderRadius, computedBorder, computedFlex, computedSizing, computedColor, computedBoxShadow, borderStyleControlPreference, computedTypography, pendingStyles, onClose, onSelectParent, onSelectChild, onUpdateSpacing, onUpdateBorderRadius, onUpdateBorder, onBatchUpdateBorder, onSetCSS, onUpdateFlex, onToggleFlex, onUpdateSizing, onUpdateColor, onUpdateTypography, onReset, onExportEdits, onSendToAgent, className, style, panelRef, isDragging, onHeaderPointerDown, onHeaderPointerMove, onHeaderPointerUp, }: DirectEditPanelInnerProps): react_jsx_runtime.JSX.Element;
+declare function DirectEditPanelInner({ elementInfo, computedSpacing, computedBorderRadius, computedBorder, computedFlex, computedSizing, computedColor, computedBoxShadow, borderStyleControlPreference, computedTypography, pendingStyles, onClose, onSelectParent, onSelectChild, onUpdateSpacing, onUpdateBorderRadius, onUpdateBorder, onBatchUpdateBorder, onSetCSS, onUpdateFlex, onToggleFlex, onUpdateSizing, onUpdateColor, onUpdateTypography, onReset, onExportEdits, onSendToAgent, canSendToAgent, className, style, panelRef, isDragging, onHeaderPointerDown, onHeaderPointerMove, onHeaderPointerUp, }: DirectEditPanelInnerProps): react_jsx_runtime.JSX.Element;
 declare function DirectEditPanel(): react_jsx_runtime.JSX.Element | null;
 
 interface DirectEditToolbarInnerProps {
@@ -196,20 +201,25 @@ interface MeasurementOverlayProps {
 }
 declare function MeasurementOverlay({ selectedElement, hoveredElement, measurements, }: MeasurementOverlayProps): react_jsx_runtime.JSX.Element;
 
+interface MoveStartOptions {
+    constrainToOriginalParent?: boolean;
+}
 interface SelectionOverlayProps {
     selectedElement: HTMLElement;
+    draggedElement?: HTMLElement | null;
     isDragging: boolean;
     ghostPosition?: {
         x: number;
         y: number;
     };
-    onMoveStart: (e: React.PointerEvent) => void;
+    onMoveStart: (e: React.PointerEvent, targetElement?: HTMLElement, options?: MoveStartOptions) => void;
+    showMoveHandle?: boolean;
     isTextEditing?: boolean;
     onDoubleClick?: (clientX: number, clientY: number) => void;
     onHoverElement?: (element: HTMLElement | null) => void;
     onClickThrough?: (clientX: number, clientY: number) => void;
 }
-declare function SelectionOverlay({ selectedElement, isDragging, ghostPosition, onMoveStart, isTextEditing, onDoubleClick, onHoverElement, onClickThrough, }: SelectionOverlayProps): react_jsx_runtime.JSX.Element;
+declare function SelectionOverlay({ selectedElement, draggedElement, isDragging, ghostPosition, onMoveStart, showMoveHandle, isTextEditing, onDoubleClick, onHoverElement, onClickThrough, }: SelectionOverlayProps): react_jsx_runtime.JSX.Element;
 
 interface MoveOverlayProps {
     dropIndicator: DropIndicator | null;
@@ -246,9 +256,14 @@ interface CommentOverlayProps {
     onUpdateText: (id: string, text: string) => void;
     onAddReply: (id: string, text: string) => void;
     onDelete: (id: string) => void;
+    onExport?: (id: string) => Promise<boolean>;
     onSendToAgent: (id: string) => Promise<boolean>;
+    attentionRequest?: {
+        commentId: string;
+        nonce: number;
+    } | null;
 }
-declare function CommentOverlay({ comments, activeCommentId, onSetActiveComment, onUpdateText, onAddReply, onDelete, onSendToAgent, }: CommentOverlayProps): react_jsx_runtime.JSX.Element | null;
+declare function CommentOverlay({ comments, activeCommentId, onSetActiveComment, onUpdateText, onAddReply, onDelete, onExport, onSendToAgent, attentionRequest, }: CommentOverlayProps): react_jsx_runtime.JSX.Element | null;
 
 declare function formatColorValue(color: ColorValue): string;