@ohhwells/bridge 0.1.65-next.181 → 0.1.65-next.183

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) => {
@@ -7015,6 +7018,7 @@ var FIELD_TYPES = [
 ];
 var FIELD_ATTR = "data-ohw-form-field";
 var FIELD_TYPE_ATTR = "data-ohw-field-type";
+var PLACEHOLDER_EDIT_ATTR = "data-ohw-placeholder-edit";
 function fieldsKey(formKey) {
   return `${formKey}-fields`;
 }
@@ -7052,7 +7056,7 @@ function ensureFieldLabel(wrapper, key) {
   label.style.lineHeight = "1.3";
   const fromPlaceholder = input?.getAttribute("placeholder")?.trim();
   const text = fromPlaceholder && fromPlaceholder.length < 40 ? fromPlaceholder : key.replace(/[-_]/g, " ");
-  label.textContent = input?.hasAttribute("required") ? `${text} *` : text;
+  label.textContent = text;
   if (input && input.parentElement === wrapper) wrapper.insertBefore(label, input);
   else wrapper.insertBefore(label, wrapper.firstChild);
   return label;
@@ -7108,8 +7112,11 @@ function readFieldsFromDom(form) {
     return {
       key: fieldKeyOf(wrapper),
       type: fieldTypeOf(wrapper),
-      label: fieldLabelOf(wrapper)?.textContent?.trim() ?? "",
-      placeholder: input?.getAttribute("placeholder") ?? "",
+      label: fieldLabelText(fieldLabelOf(wrapper)).trim(),
+      // While a field is selected its placeholder text lives in the value (see
+      // beginPlaceholderEdit), so reading the attribute would store an empty one — whoever
+      // happens to save at that moment must still record what the owner typed.
+      placeholder: input ? input.hasAttribute(PLACEHOLDER_EDIT_ATTR) ? input.value : input.getAttribute("placeholder") ?? "" : "",
       required: Boolean(input?.hasAttribute("required"))
     };
   });
@@ -7137,7 +7144,7 @@ function applyFieldType(wrapper, type) {
   const followsDefaults = {
     // A label the owner wrote stays; one that still reads as a type name (or as the old
     // placeholder the template shipped) follows the new type.
-    label: isDefaultText(label?.textContent ?? "", (d) => d.label) || (label?.textContent ?? "").trim().replace(/\s*\*$/, "") === placeholder.trim()
+    label: isDefaultText(label?.textContent ?? "", (d) => d.label) || fieldLabelText(label).trim() === placeholder.trim()
   };
   const { tag, inputType } = inputTagFor(type);
   wrapper.setAttribute(FIELD_TYPE_ATTR, type);
@@ -7151,8 +7158,7 @@ function applyFieldType(wrapper, type) {
   const applyDefaults = (el) => {
     el.setAttribute("placeholder", defaults.placeholder);
     if (label && followsDefaults.label) {
-      const required = (label.textContent ?? "").trim().endsWith("*");
-      label.textContent = required ? `${defaults.label} *` : defaults.label;
+      label.textContent = defaults.label;
     }
   };
   if (input.tagName.toLowerCase() === tag) {
@@ -7172,13 +7178,19 @@ function applyFieldType(wrapper, type) {
   input.replaceWith(next);
   applyDefaults(next);
 }
+var REQUIRED_MARK_ATTR = "data-ohw-field-required";
+function fieldLabelText(label) {
+  if (!label) return "";
+  return (label.textContent ?? "").replace(/\s*\*\s*$/, "").trimEnd();
+}
 function syncRequiredMark(wrapper) {
   const label = fieldLabelOf(wrapper);
   if (!label) return;
-  const required = isFieldRequired(wrapper);
-  const base = (label.textContent ?? "").replace(/\s*\*\s*$/, "").trimEnd();
-  const next = required ? `${base} *` : base;
-  if (label.textContent !== next) label.textContent = next;
+  label.querySelectorAll("[data-ohw-required-mark]").forEach((el) => el.remove());
+  const words = fieldLabelText(label);
+  if ((label.textContent ?? "") !== words) label.textContent = words;
+  if (isFieldRequired(wrapper)) label.setAttribute(REQUIRED_MARK_ATTR, "");
+  else label.removeAttribute(REQUIRED_MARK_ATTR);
 }
 function setFieldRequired(wrapper, required) {
   const input = fieldInputOf(wrapper);
@@ -7188,7 +7200,6 @@ function setFieldRequired(wrapper, required) {
   else input.removeAttribute("required");
   if (label) syncRequiredMark(wrapper);
 }
-var PLACEHOLDER_EDIT_ATTR = "data-ohw-placeholder-edit";
 function beginPlaceholderEdit(wrapper) {
   const input = fieldInputOf(wrapper);
   if (!input || input.hasAttribute(PLACEHOLDER_EDIT_ATTR)) return;
@@ -7267,14 +7278,25 @@ function duplicateField(form, wrapper) {
 function removeField(wrapper) {
   wrapper.remove();
 }
-function moveField(form, key, toIndex) {
+function applyFieldOrder(form, keys) {
   const wrappers = listFieldWrappers(form);
-  const moving = wrappers.find((wrapper) => fieldKeyOf(wrapper) === key);
-  if (!moving) return;
-  const rest = wrappers.filter((wrapper) => wrapper !== moving);
-  const target = rest[Math.max(0, Math.min(rest.length, toIndex))];
-  if (target) target.before(moving);
-  else rest[rest.length - 1]?.after(moving);
+  const byKey = new Map(wrappers.map((wrapper) => [fieldKeyOf(wrapper), wrapper]));
+  const ordered = keys.map((key) => byKey.get(key)).filter((w) => Boolean(w));
+  if (ordered.length !== wrappers.length) return;
+  const slots = wrappers.map((wrapper) => {
+    const slot = document.createComment("ohw-field-slot");
+    wrapper.replaceWith(slot);
+    return slot;
+  });
+  ordered.forEach((wrapper, index) => slots[index].replaceWith(wrapper));
+}
+function moveField(form, key, toIndex) {
+  const keys = listFieldWrappers(form).map(fieldKeyOf);
+  const from = keys.indexOf(key);
+  if (from === -1) return;
+  const rest = keys.filter((k) => k !== key);
+  rest.splice(Math.max(0, Math.min(rest.length, toIndex)), 0, key);
+  applyFieldOrder(form, rest);
 }
 function reconcileFieldsFromContent(form, content) {
   const formKey = form.getAttribute("data-ohw-key");
@@ -7300,13 +7322,18 @@ function reconcileFieldsFromContent(form, content) {
     setFieldRequired(wrapper, spec.required);
     setFieldPlaceholder(wrapper, spec.placeholder);
     const label = fieldLabelOf(wrapper);
-    if (label && spec.label) label.textContent = spec.label;
+    if (label && spec.label) label.textContent = spec.label.replace(/\s*\*\s*$/, "").trimEnd();
+    syncRequiredMark(wrapper);
   });
   const wanted = new Set(stored.map((spec) => spec.key));
   listFieldWrappers(form).forEach((wrapper) => {
     if (!wanted.has(fieldKeyOf(wrapper))) wrapper.remove();
   });
-  stored.forEach((spec, index) => moveField(form, spec.key, index));
+  const currentOrder = listFieldWrappers(form).map(fieldKeyOf).join("\0");
+  const storedOrder = stored.map((spec) => spec.key).join("\0");
+  if (currentOrder !== storedOrder) {
+    applyFieldOrder(form, stored.map((spec) => spec.key));
+  }
 }
 
 // src/ui/form-field-toolbar.tsx
@@ -14129,6 +14156,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");
@@ -15167,9 +15198,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);
@@ -15223,8 +15259,8 @@ function OhhwellsBridge() {
       if (!wrapper || !form) return;
       commitPlaceholderEdit(wrapper);
       run(form, wrapper);
-      beginPlaceholderEdit(wrapper);
       persistFields(form);
+      beginPlaceholderEdit(wrapper);
       setFormPickRect(form.getBoundingClientRect());
     },
     [persistFields]
@@ -15563,7 +15599,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) {
@@ -15580,6 +15618,12 @@ function OhhwellsBridge() {
     }
     el.removeAttribute("contenteditable");
     el.removeAttribute("data-ohw-editing");
+    const labelField = getFieldWrapper(el);
+    if (labelField) {
+      syncRequiredMark(labelField);
+      const owner = labelField.closest('[data-ohw-editable="form"]');
+      if (owner) persistFieldsRef.current(owner);
+    }
     activeElRef.current = null;
     setNavGroupForceOpen(null, false);
     setReorderHrefKey(null);
@@ -15735,6 +15779,12 @@ function OhhwellsBridge() {
     }
     el.removeAttribute("contenteditable");
     el.removeAttribute("data-ohw-editing");
+    const labelField = getFieldWrapper(el);
+    if (labelField) {
+      syncRequiredMark(labelField);
+      const owner = labelField.closest('[data-ohw-editable="form"]');
+      if (owner) persistFieldsRef.current(owner);
+    }
     activeElRef.current = null;
     setMaxBadge(null);
     setActiveCommands(/* @__PURE__ */ new Set());
@@ -16672,6 +16722,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;
           }
@@ -16774,8 +16825,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);
@@ -16847,6 +16899,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;
             }
@@ -16858,6 +16911,9 @@ function OhhwellsBridge() {
         reconcileFooterOrderFromContent(content);
         reconcileSocialsFromContent(content);
         applySocialsDisplayFromContent(content);
+        document.querySelectorAll('[data-ohw-editable="form"]').forEach((form) => {
+          listFieldWrappers(form).forEach(syncRequiredMark);
+        });
       } finally {
         observer?.observe(document.body, { childList: true, subtree: true });
       }
@@ -17489,6 +17545,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);
@@ -18230,7 +18299,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;
@@ -18969,6 +19041,13 @@ function OhhwellsBridge() {
       if (brandKitRef.current) {
         nodes.push({ key: BRAND_KIT_KEY, type: "brand", text: brandKitRef.current });
       }
+      document.querySelectorAll('[data-ohw-editable="form"]').forEach((form) => {
+        const formKey = formKeyOf(form);
+        if (!formKey) return;
+        const specs = readFieldsFromDom(form);
+        const text = specs.length ? JSON.stringify(specs) : editContentRef.current[fieldsKey(formKey)];
+        if (text) nodes.push({ key: fieldsKey(formKey), type: "text", text });
+      });
       postToParentRef.current({ type: "ow:save-result", nodes });
     };
     const handleInsertSection = (e) => {
@@ -20105,28 +20184,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",
                   {
@@ -20137,7 +20194,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());
@@ -20165,7 +20222,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,