@framed-dev/react 0.3.0 → 0.3.2

package/dist/index.js

@@ -3387,7 +3387,8 @@ function ElementSelector({ onSelect }) {
 }
 function TextEditOverlay({
   onSubmit,
-  author = "Anonymous"
+  author = "Anonymous",
+  demoMode = false
 }) {
   const textareaRef = useRef(null);
   const {
@@ -3403,13 +3404,6 @@ function TextEditOverlay({
     showToast
   } = useWidgetStore();
   const isOpen = annotationMode === "text-edit" && selectedElement && originalText;
-  useEffect(() => {
-    if (isOpen && textareaRef.current) {
-      textareaRef.current.focus();
-      textareaRef.current.select();
-      isolateKeyboardEvents(textareaRef.current);
-    }
-  }, [isOpen]);
   const getElementPath2 = useCallback(() => {
     if (!selectedElement) return "";
     const parts = [];
@@ -3430,7 +3424,8 @@ function TextEditOverlay({
     }
     clearSelection();
     closeQuickInput();
-  }, [selectedElement, originalText, clearSelection, closeQuickInput]);
+    setAnnotationMode(null);
+  }, [selectedElement, originalText, clearSelection, closeQuickInput, setAnnotationMode]);
   const handleApply = useCallback(() => {
     const newText = textareaRef.current?.value || "";
     if (!selectedElement) {
@@ -3500,9 +3495,30 @@ To: "${newText.substring(0, 150)}${newText.length > 150 ? "..." : ""}"`;
     showToast,
     handleClose
   ]);
+  useEffect(() => {
+    if (isOpen && textareaRef.current) {
+      textareaRef.current.focus();
+      textareaRef.current.select();
+      isolateKeyboardEvents(textareaRef.current);
+    }
+  }, [isOpen]);
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        e.stopPropagation();
+        handleClose();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown, true);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown, true);
+    };
+  }, [isOpen, handleClose]);
   const displayOriginal = originalText && originalText.length > 200 ? originalText.substring(0, 200) + "..." : originalText || "";
   if (!isOpen) return null;
-  return /* @__PURE__ */ jsxs("div", { className: "framed-text-edit-overlay", "data-framed-widget": true, children: [
+  return /* @__PURE__ */ jsx("div", { className: `framed-text-edit-container ${demoMode ? "framed-demo-mode" : ""}`, "data-framed-widget": true, children: /* @__PURE__ */ jsxs("div", { className: `framed-text-edit-overlay ${demoMode ? "framed-demo-mode" : ""}`, "data-framed-widget": true, children: [
     /* @__PURE__ */ jsxs("div", { className: "framed-text-edit-header", children: [
       /* @__PURE__ */ jsx("span", { className: "framed-text-edit-label-header", children: "Text Edit" }),
       /* @__PURE__ */ jsx("span", { className: "framed-text-edit-divider", children: "|" }),
@@ -3572,7 +3588,7 @@ To: "${newText.substring(0, 150)}${newText.length > 150 ? "..." : ""}"`;
         }
       )
     ] })
-  ] });
+  ] }) });
 }
 function RegionSelectOverlay() {
   const {
@@ -6641,6 +6657,32 @@ var WIDGET_CSS = `/* Framed Widget Styles - Figma-style floating toolbar */
     transform: scale(1);
   }
 }
+
+/* Text Edit Overlay - Demo mode (flexbox centering to avoid transform conflicts) */
+.framed-text-edit-container.framed-demo-mode {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  z-index: 2147483647;
+}
+
+.framed-text-edit-overlay.framed-demo-mode {
+  /* Reset transform-based positioning */
+  position: relative !important;
+  top: auto !important;
+  left: auto !important;
+  bottom: auto !important;
+  transform: none !important;
+  /* Use a simple scale animation without translate */
+  animation: framed-demo-scale-in 0.3s var(--framed-ease-spring) forwards !important;
+  pointer-events: auto;
+}
 `;
 var WIDGET_STYLE_ID = "framed-widget-styles";
 function Widget({
@@ -6791,7 +6833,7 @@ function Widget({
     /* @__PURE__ */ jsx(FeedbackDrawer, { onExport, onLocateComment }),
     /* @__PURE__ */ jsx(QuickInput, { author, onSubmit, demoMode, onCommentAdded: demoMode ? openFeedbackPanel : void 0 }),
     /* @__PURE__ */ jsx(ChatModal, { author, onSubmit }),
-    /* @__PURE__ */ jsx(TextEditOverlay, { author, onSubmit }),
+    /* @__PURE__ */ jsx(TextEditOverlay, { author, onSubmit, demoMode }),
     /* @__PURE__ */ jsx(RegionSelectOverlay, {}),
     /* @__PURE__ */ jsx(ExportModal, {}),
     animationsPaused && /* @__PURE__ */ jsxs("div", { className: "framed-animations-paused-indicator", "data-framed-widget": true, children: [