@ohhwells/bridge 0.1.53-next.145 → 0.1.54-next.146

package/dist/index.cjs

@@ -155,7 +155,8 @@ function parseAiSectionsState(raw) {
       label: typeof entry.label === "string" ? entry.label : "Generated section",
       media: entry.media && typeof entry.media === "object" ? entry.media : {}
     }));
-    return { v: 1, sections };
+    const removed = Array.isArray(parsed.removed) ? parsed.removed.filter((id) => typeof id === "string" && id.length > 0) : [];
+    return { v: 1, sections, ...removed.length ? { removed } : {} };
   } catch {
     return EMPTY_AI_SECTIONS;
   }
@@ -164,17 +165,30 @@ function serializeAiSectionsState(state) {
   return JSON.stringify(state);
 }
 function applyTreeToState(state, payload) {
+  const insertBefore = payload.mode === "insert" && payload.position === "before";
   const entry = {
     id: payload.id,
     label: payload.label ?? "Generated section",
-    afterSection: payload.mode === "insert" ? payload.targetSectionId ?? null : null,
+    afterSection: payload.mode === "insert" && !insertBefore ? payload.targetSectionId ?? null : null,
+    ...insertBefore && payload.targetSectionId ? { beforeSection: payload.targetSectionId } : {},
     ...payload.mode === "replace" && payload.targetSectionId ? { replaces: payload.targetSectionId } : {},
     tree: payload.tree,
     media: payload.media ?? {},
     ...payload.brand && typeof payload.brand === "object" ? { brand: payload.brand } : {}
   };
   const others = state.sections.filter((existing) => existing.id !== entry.id);
-  return { v: 1, sections: [...others, entry] };
+  return { ...state, v: 1, sections: [...others, entry] };
+}
+function removeFromState(state, id) {
+  return { ...state, v: 1, sections: state.sections.filter((entry) => entry.id !== id) };
+}
+function deleteSectionFromState(state, sectionId) {
+  if (state.sections.some((entry) => entry.id === sectionId)) {
+    return removeFromState(state, sectionId);
+  }
+  const removed = state.removed ?? [];
+  if (removed.includes(sectionId)) return state;
+  return { ...state, v: 1, sections: state.sections, removed: [...removed, sectionId] };
 }
 
 // src/ui/ai-tree/aiSectionsManager.tsx
@@ -425,7 +439,7 @@ function PersonEl({
         )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: { flex: 1, minWidth: 0 }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "span",
         {
@@ -499,7 +513,14 @@ function PricingCard({ node, ctx, path }) {
         features && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("hr", { style: { border: "none", borderTop: `1px solid ${dark}`, opacity: 0.2, margin: 0, width: "100%" } }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: AI_TREE_TOKENS.spacing4 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { ...typeStyle({ size: 24, line: 1.3, weight: 700 }, ctx.brand.fonts.body), color: dark }, children: "Includes:" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "div",
+              {
+                ...textAttrs(ctx, `${path}.featuresLabel`),
+                style: { ...typeStyle({ size: 24, line: 1.3, weight: 700 }, ctx.brand.fonts.body), color: dark },
+                children: str(slots.featuresLabel) || "Includes:"
+              }
+            ),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: FEATURE_LINE_CSS }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               "div",
@@ -1203,6 +1224,7 @@ function AiTreeRenderer({ tree, brand, resolveMedia, editKeyPrefix }) {
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var CONTAINER_ATTR = "data-ohw-ai-generated";
 var REPLACED_ATTR = "data-ohw-ai-replaced-by";
+var REMOVED_ATTR = "data-ohw-ai-removed";
 function deriveTemplateBrand() {
   if (typeof document === "undefined") return null;
   const cs = getComputedStyle(document.documentElement);
@@ -1231,6 +1253,14 @@ function findTemplateSection(id) {
   }
   return null;
 }
+function findPlacementAnchor(id, exclude) {
+  for (const el of document.querySelectorAll(`[data-ohw-section="${CSS.escape(id)}"]`)) {
+    if (el === exclude) continue;
+    if (el.parentElement?.closest("[data-ohw-section]")) continue;
+    return el;
+  }
+  return null;
+}
 function placeContainer(container, entry) {
   if (entry.replaces) {
     const original = findTemplateSection(entry.replaces);
@@ -1239,8 +1269,15 @@ function placeContainer(container, entry) {
       return;
     }
   }
+  if (entry.beforeSection) {
+    const anchor = findPlacementAnchor(entry.beforeSection, container);
+    if (anchor) {
+      anchor.insertAdjacentElement("beforebegin", container);
+      return;
+    }
+  }
   if (entry.afterSection) {
-    const anchor = findTemplateSection(entry.afterSection);
+    const anchor = findPlacementAnchor(entry.afterSection, container);
     if (anchor) {
       anchor.insertAdjacentElement("afterend", container);
       return;
@@ -1253,6 +1290,23 @@ function placeContainer(container, entry) {
     document.body.appendChild(container);
   }
 }
+function syncRemovedSections(state) {
+  const removed = new Set(state.removed ?? []);
+  for (const el of document.querySelectorAll(`[${REMOVED_ATTR}]`)) {
+    const id = el.getAttribute("data-ohw-section") ?? "";
+    if (!removed.has(id)) {
+      el.style.removeProperty("display");
+      el.removeAttribute(REMOVED_ATTR);
+    }
+  }
+  for (const id of removed) {
+    const section = findTemplateSection(id);
+    if (section && !section.hasAttribute(REPLACED_ATTR)) {
+      section.style.display = "none";
+      section.setAttribute(REMOVED_ATTR, "");
+    }
+  }
+}
 function syncReplacedOriginals(state) {
   for (const el of document.querySelectorAll(`[${REPLACED_ATTR}]`)) {
     const byId = el.getAttribute(REPLACED_ATTR) ?? "";
@@ -1317,6 +1371,7 @@ function applyAiSectionsToDom(state, options) {
     mounted.set(entry.id, { root, container, serialized });
   }
   syncReplacedOriginals(state);
+  syncRemovedSections(state);
 }
 
 // src/useLinkHrefGuardian.ts
@@ -11668,9 +11723,12 @@ function collectEditableNodes(extraContent, root = document) {
         text: String(video.muted)
       });
     });
-    for (const key of listCarouselKeys()) {
-      nodes.push({ key, type: "carousel", text: JSON.stringify(readCarouselValue(key)) });
-    }
+  }
+  const carouselKeys = isScoped ? new Set(
+    Array.from(root.querySelectorAll("[data-ohw-carousel]")).map((el) => el.getAttribute("data-ohw-key") ?? "").filter(Boolean)
+  ) : listCarouselKeys();
+  for (const key of carouselKeys) {
+    nodes.push({ key, type: "carousel", text: JSON.stringify(readCarouselValue(key)) });
   }
   const byKey = /* @__PURE__ */ new Map();
   for (const node of nodes) {
@@ -12302,7 +12360,16 @@ function syncNavigationDragCursorAttrs() {
     el.setAttribute("data-ohw-can-drag", "");
   });
 }
-var AI_NODE_TYPES = /* @__PURE__ */ new Set(["image", "bg-image", "video", "link", "plain", "text/rich", "text"]);
+var AI_NODE_TYPES = /* @__PURE__ */ new Set([
+  "image",
+  "bg-image",
+  "video",
+  "link",
+  "plain",
+  "text/rich",
+  "text",
+  "carousel"
+]);
 function normalizeAiNodeType(type) {
   return AI_NODE_TYPES.has(type) ? type : "text";
 }
@@ -16127,6 +16194,24 @@ function OhhwellsBridge() {
       appliedEl?.scrollIntoView({ behavior: "smooth", block: "center" });
     };
     window.addEventListener("message", handleAiApplyTree);
+    const handleAiDeleteSection = (e) => {
+      if (e.data?.type !== "ow:ai-delete-section") return;
+      const sectionId = typeof e.data.sectionId === "string" ? e.data.sectionId : "";
+      if (!sectionId || sectionId === "navbar" || sectionId === "footer") return;
+      const exists = document.querySelector(`[data-ohw-section="${CSS.escape(sectionId)}"]`);
+      if (!exists) return;
+      const previous = aiSectionsRef.current;
+      const nextState = deleteSectionFromState(parseAiSectionsState(previous), sectionId);
+      const nextValue = serializeAiSectionsState(nextState);
+      aiSectionsRef.current = nextValue;
+      applyAiSectionsToDom(nextState);
+      const newHeight = document.documentElement.scrollHeight;
+      if (newHeight > 50) postToParentRef.current({ type: "ow:height", height: newHeight });
+      postToParentRef.current({ type: "ow:change", nodes: [{ key: AI_SECTIONS_KEY, text: nextValue }] });
+      postToParentRef.current({ type: "ow:ai-section-deleted", sectionId, previous, value: nextValue });
+      postAiSectionsChanged();
+    };
+    window.addEventListener("message", handleAiDeleteSection);
     const handleAiSetSections = (e) => {
       if (e.data?.type !== "ow:ai-set-sections") return;
       const value = typeof e.data.value === "string" ? e.data.value : "";
@@ -16449,7 +16534,7 @@ function OhhwellsBridge() {
         `[data-ohw-section="${CSS.escape(sectionId)}"]`
       );
       const nodes = sectionEl ? collectEditableNodes(void 0, sectionEl).filter(
-        (n) => n.key && !n.key.startsWith("__ohw_") && !["meta", "sections", "carousel", "video-setting"].includes(n.type)
+        (n) => n.key && !n.key.startsWith("__ohw_") && !["meta", "sections", "video-setting"].includes(n.type)
       ).map((n) => ({ ...n, text: n.text ?? "", type: normalizeAiNodeType(n.type) })) : [];
       const box = sectionEl?.getBoundingClientRect();
       const rect = box ? {
@@ -16776,6 +16861,7 @@ function OhhwellsBridge() {
       window.removeEventListener("message", handleViewMode);
       window.removeEventListener("message", handleHydrate);
       window.removeEventListener("message", handleAiApplyTree);
+      window.removeEventListener("message", handleAiDeleteSection);
       window.removeEventListener("message", handleAiSetSections);
       window.removeEventListener("message", handleDeactivate);
       window.removeEventListener("message", handleToastAction);
@@ -16980,7 +17066,7 @@ function OhhwellsBridge() {
       postToParent2({
         type: "ow:ready",
         version: "1",
-        bridgeVersion: "0.1.53",
+        bridgeVersion: "0.1.54",
         path: pathname,
         nodes: collectEditableNodes(editContentRef.current),
         sections