@ohhwells/bridge 0.1.65-next.179 → 0.1.65-next.182

package/dist/index.cjs

@@ -6907,7 +6907,7 @@ function showSuccess(form, message) {
     });
     return;
   }
-  const text = message ?? form.getAttribute("data-ohw-success-text") ?? DEFAULT_SUCCESS_TEXT;
+  const text = message || form.getAttribute("data-ohw-success-text") || DEFAULT_SUCCESS_TEXT;
   const note = document.createElement("p");
   note.setAttribute("data-ohw-form-success", "");
   note.setAttribute("role", "status");
@@ -6949,6 +6949,9 @@ function ensureSuccessTextEl(form, formKey, initialText) {
   form.appendChild(el);
   return el;
 }
+function successInitialFor(form, formKey, content) {
+  return content[formSuccessKey(formKey)] || form.getAttribute("data-ohw-success-text") || DEFAULT_SUCCESS_TEXT;
+}
 function setFormViewState(form, formKey, state, initialText) {
   const success = ensureSuccessTextEl(form, formKey, initialText);
   Array.from(form.children).forEach((child) => {
@@ -7301,6 +7304,7 @@ function reconcileFieldsFromContent(form, content) {
     setFieldPlaceholder(wrapper, spec.placeholder);
     const label = fieldLabelOf(wrapper);
     if (label && spec.label) label.textContent = spec.label;
+    syncRequiredMark(wrapper);
   });
   const wanted = new Set(stored.map((spec) => spec.key));
   listFieldWrappers(form).forEach((wrapper) => {
@@ -7711,6 +7715,9 @@ var import_lucide_react7 = require("lucide-react");
 
 // src/lib/sections.ts
 var LINK_PICKER_EXCLUDED_IDS = /* @__PURE__ */ new Set(["navbar", "footer"]);
+function isChromeSection(el) {
+  return el.matches("header, nav, footer, aside");
+}
 function titleCaseSectionId(id) {
   return id.split("-").filter(Boolean).map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(" ");
 }
@@ -7783,7 +7790,7 @@ function useLiveSectionRect(sectionId) {
 }
 function computeSectionBoundaryFlags(instanceId) {
   const topLevel = Array.from(document.querySelectorAll("[data-ohw-section]")).filter(
-    (el) => !el.parentElement?.closest("[data-ohw-section]")
+    (el) => !el.parentElement?.closest("[data-ohw-section]") && !isChromeSection(el)
   );
   const index = topLevel.findIndex((el) => (el.dataset.ohwInstance ?? el.dataset.ohwSection) === instanceId);
   if (index === -1) return { isFirst: true, isLast: true };
@@ -7980,7 +7987,8 @@ function AiSectionOverlay({
   const reviewRect = useLiveSectionRect(reviewId);
   const hoverRect = useLiveSectionRect(reviewId || hoveredId === selectedId ? null : hoveredId);
   (0, import_react8.useEffect)(() => {
-    if (!activeSelectionId || !selectionRect) {
+    const selectedEl = activeSelectionId ? findSectionElement(activeSelectionId) : null;
+    if (!activeSelectionId || !selectionRect || selectedEl && isChromeSection(selectedEl)) {
       postToParent2({ type: "ow:section-rect", instanceId: null, rect: null });
       return;
     }
@@ -14125,6 +14133,10 @@ function isIconEditable(el) {
   return el.dataset.ohwEditable === "icon";
 }
 var MEDIA_SELECTOR = '[data-ohw-editable="image"], [data-ohw-editable="bg-image"], [data-ohw-editable="video"]';
+var EDITOR_CHROME_SELECTOR = '[data-ohw-toolbar], [data-ohw-form-toolbar], [data-ohw-field-toolbar], [data-ohw-item-toolbar], [data-ohw-more-menu], [data-ohw-state-toggle], [data-ohw-max-badge], [data-slot="dropdown-menu-content"], [data-slot="dropdown-menu-item"]';
+function isOverEditorChrome(x, y) {
+  return document.elementsFromPoint(x, y).some((el) => el instanceof HTMLElement && el.matches(EDITOR_CHROME_SELECTOR));
+}
 var NON_MEDIA_SELECTOR = '[data-ohw-editable]:not([data-ohw-editable="image"]):not([data-ohw-editable="bg-image"]):not([data-ohw-editable="video"]):not([data-ohw-editable="icon"]):not([data-ohw-editable="form"])';
 function getVideoEl2(el) {
   return el instanceof HTMLVideoElement ? el : el.querySelector("video");
@@ -15163,9 +15175,14 @@ function OhhwellsBridge() {
   const [fieldTypePickerOpen, setFieldTypePickerOpen] = (0, import_react16.useState)(false);
   const clearFormPick = (0, import_react16.useCallback)(() => {
     const form = formPickElRef.current;
+    const editing = fieldPickElRef.current;
+    if (commitPlaceholderEdit(editing) && editing) {
+      const owner = editing.closest('[data-ohw-editable="form"]');
+      if (owner) persistFieldsRef.current(owner);
+    }
     if (form) {
       const key = formKeyOf(form);
-      if (key) setFormViewState(form, key, "default", DEFAULT_SUCCESS_TEXT);
+      if (key) setFormViewState(form, key, "default", successInitialFor(form, key, editContentRef.current));
     }
     setFormViewStateUi("default");
     setFormPickCount(null);
@@ -15559,7 +15576,9 @@ function OhhwellsBridge() {
   const deactivate = (0, import_react16.useCallback)(() => {
     const el = activeElRef.current;
     if (!el) return;
-    const key = el.dataset.ohwKey;
+    const isFormBlock = el.dataset.ohwEditable === "form";
+    const isFormControl = el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement || el instanceof HTMLSelectElement;
+    const key = isFormBlock || isFormControl ? void 0 : el.dataset.ohwKey;
     if (key) {
       const timer = autoSaveTimers.current.get(key);
       if (timer !== void 0) {
@@ -16668,6 +16687,7 @@ function OhhwellsBridge() {
             applyLinkHref(el, val);
           } else if (el.dataset.ohwEditable === "icon") {
             applyIconMarkup(el, val);
+          } else if (el.dataset.ohwEditable === "form") {
           } else if (el.innerHTML !== val) {
             el.innerHTML = val;
           }
@@ -16770,8 +16790,9 @@ function OhhwellsBridge() {
       const wrapper = getFieldWrapper(input);
       if (!wrapper || wrapper !== fieldPickElRef.current) return;
       if (saveTimer) clearTimeout(saveTimer);
+      const owner = wrapper.closest('[data-ohw-editable="form"]');
       saveTimer = setTimeout(() => {
-        const form = formPickElRef.current;
+        const form = owner ?? formPickElRef.current;
         if (!form) return;
         const previous = input.getAttribute("placeholder");
         input.setAttribute("placeholder", input.value);
@@ -16843,6 +16864,7 @@ function OhhwellsBridge() {
               if (video && video.src !== val) applyVideoSrc(video, val);
             } else if (el.dataset.ohwEditable === "link") {
               applyLinkHref(el, val);
+            } else if (el.dataset.ohwEditable === "form") {
             } else if (el.innerHTML !== val) {
               el.innerHTML = val;
             }
@@ -17485,6 +17507,19 @@ function OhhwellsBridge() {
         setHoveredNavContainerRect(null);
         return;
       }
+      if (target.closest(EDITOR_CHROME_SELECTOR) || isOverEditorChrome(e.clientX, e.clientY) || isInsideLinkEditor(target)) {
+        document.querySelectorAll("[data-ohw-hovered]").forEach((el) => el.removeAttribute("data-ohw-hovered"));
+        hoveredItemElRef.current = null;
+        setHoveredItemRect(null);
+        hoveredNavContainerRef.current = null;
+        setHoveredNavContainerRect(null);
+        formHoverElRef.current = null;
+        setFormHoverRect(null);
+        siblingHintElRef.current = null;
+        setSiblingHintRect(null);
+        setSiblingHintRects([]);
+        return;
+      }
       if (document.documentElement.hasAttribute("data-ohw-panel-dragging") || isInsideFloatingPanel(target) || isPointOverFloatingPanel(e.clientX, e.clientY)) {
         hoveredItemElRef.current = null;
         setHoveredItemRect(null);
@@ -18226,7 +18261,10 @@ function OhhwellsBridge() {
     };
     const handleMouseMove = (e) => {
       const { clientX, clientY } = e;
-      if (document.documentElement.hasAttribute("data-ohw-panel-dragging") || floatingPanelOpenRef.current && isPointOverFloatingPanel(clientX, clientY)) {
+      if (document.documentElement.hasAttribute("data-ohw-panel-dragging") || floatingPanelOpenRef.current && isPointOverFloatingPanel(clientX, clientY) || isOverEditorChrome(clientX, clientY)) {
+        document.querySelectorAll("[data-ohw-hovered]").forEach((el) => el.removeAttribute("data-ohw-hovered"));
+        formHoverElRef.current = null;
+        setFormHoverRect(null);
         hoveredItemElRef.current = null;
         setHoveredItemRect(null);
         hoveredNavContainerRef.current = null;
@@ -20101,28 +20139,6 @@ function OhhwellsBridge() {
                   }
                 ),
                 /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "mx-0.5 h-5 w-px bg-border" }),
-                /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
-                  "button",
-                  {
-                    type: "button",
-                    className: "flex h-7 items-center gap-1.5 whitespace-nowrap rounded-md px-2 text-[13px] font-semibold text-foreground transition-colors hover:bg-muted/80",
-                    onClick: () => {
-                      const form = formPickElRef.current;
-                      if (!form) return;
-                      postToParent2({
-                        type: "ow:form-submissions",
-                        formKey: formKeyOf(form),
-                        hasLongText: formHasLongText(form)
-                      });
-                    },
-                    "data-ohw-view-submissions": "",
-                    children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react18.Table, { size: 14, "aria-hidden": true }),
-                      "View submissions"
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "mx-0.5 h-5 w-px bg-border" }),
                 /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex items-center rounded-md bg-muted/70 p-0.5", children: ["default", "success"].map((state) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                   "button",
                   {
@@ -20133,7 +20149,7 @@ function OhhwellsBridge() {
                       const form = formPickElRef.current;
                       const key = form ? formKeyOf(form) : null;
                       if (!form || !key) return;
-                      const initial = editContentRef.current[formSuccessKey(key)] ?? DEFAULT_SUCCESS_TEXT;
+                      const initial = successInitialFor(form, key, editContentRef.current);
                       setFormViewState(form, key, state, initial);
                       setFormViewStateUi(state);
                       setFormPickRect(form.getBoundingClientRect());
@@ -20161,7 +20177,7 @@ function OhhwellsBridge() {
           chromeGap: formHoverElRef.current && getFieldWrapper(formHoverElRef.current) ? 8 : 24
         }
       ),
-      fieldPickRect && fieldPickState && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      fieldPickRect && fieldPickState && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
         ItemInteractionLayer,
         {
           rect: fieldPickRect,