@ohhwells/bridge 0.1.117-next.314 → 0.1.117-next.316

package/dist/index.cjs

@@ -75,7 +75,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/OhhwellsBridge.tsx
-var import_react18 = __toESM(require("react"), 1);
+var import_react19 = __toESM(require("react"), 1);
 var import_client2 = require("react-dom/client");
 var import_react_dom4 = require("react-dom");
 
@@ -1620,7 +1620,11 @@ function MediaBox({
   aspect,
   radius,
   height,
-  editPath
+  editPath,
+  alt,
+  fit,
+  grayscale,
+  fixedSize
 }) {
   const url = refValue ? ctx.resolveMedia(refValue) : null;
   const isIcon = /^(lucide|simple):/.test(refValue);
@@ -1654,9 +1658,10 @@ function MediaBox({
     {
       ...editAttrs,
       style: {
-        width: "100%",
+        width: fixedSize ? "auto" : "100%",
         aspectRatio,
-        minHeight: height ?? (aspectRatio ? void 0 : 180),
+        height: fixedSize ? height : void 0,
+        minHeight: fixedSize ? void 0 : height ?? (aspectRatio ? void 0 : 180),
         borderRadius: radius,
         overflow: "hidden",
         background: "#DBEAFE",
@@ -1664,7 +1669,8 @@ function MediaBox({
         alignItems: "center",
         justifyContent: "center",
         color: "#93C5FD",
-        fontSize: 13
+        fontSize: 13,
+        filter: grayscale ? "grayscale(1)" : void 0
       },
       children: url || keyed ? (
         // Keyed slots always mount an <img> so hydrate overrides have a target.
@@ -1672,8 +1678,13 @@ function MediaBox({
           "img",
           {
             src: url ?? TRANSPARENT_PX,
-            alt: "",
-            style: { width: "100%", height: "100%", objectFit: "cover", display: "block" }
+            alt: alt ?? "",
+            style: {
+              width: fixedSize ? "auto" : "100%",
+              height: "100%",
+              objectFit: fit ?? "cover",
+              display: "block"
+            }
           }
         )
       ) : refValue || "media"
@@ -2328,7 +2339,8 @@ function toggleAccordionItem(button) {
 }
 function AccordionBlock({ node, ctx, path }) {
   const rule = `1px solid ${ctx.brand.palette.dark}33`;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "data-ai-accordion": "", style: { borderTop: rule }, children: (node.items ?? []).map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { borderBottom: rule }, children: [
+  const items = node.items ?? [];
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "data-ai-accordion": "", style: { borderTop: rule }, children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { borderBottom: rule }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       "button",
       {
@@ -2381,6 +2393,83 @@ function AccordionBlock({ node, ctx, path }) {
     ) })
   ] }, i)) });
 }
+function MediaStripBlock({ node, ctx, path }) {
+  const slots = node.slots ?? {};
+  const items = node.items ?? [];
+  const variant = slots.variant === "reel" ? "reel" : "logos";
+  const align = slots.align === "left" || slots.align === "right" ? slots.align : "center";
+  const treatment = slots.treatment === "color" || slots.treatment === "grayscale" ? slots.treatment : variant === "logos" ? "grayscale" : "color";
+  const logoMaxHeight = typeof slots.logoMaxHeight === "number" ? slots.logoMaxHeight : 48;
+  const cardWidth = typeof slots.cardWidth === "number" ? slots.cardWidth : 240;
+  const justify = align === "left" ? "flex-start" : align === "right" ? "flex-end" : "center";
+  const label = str(slots.label);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { "data-ohw-media-strip": "", style: { display: "flex", flexDirection: "column", gap: AI_TREE_TOKENS.spacing6 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: '[data-ohw-media-strip-item]{transition:transform 0.2s ease, opacity 0.2s ease}[data-ohw-media-strip-hover="lift"]:hover{transform:translateY(-4px)}[data-ohw-media-strip-hover="zoom"]:hover{transform:scale(1.05)}[data-ohw-media-strip-hover="fade"]:hover{opacity:0.75}' }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        ...textAttrs(ctx, `${path}.label`),
+        style: {
+          ...typeStyle(AI_TREE_TOKENS.type.eyebrow, ctx.brand.fonts.body),
+          color: ctx.brand.palette.accent,
+          textAlign: align
+        },
+        children: label
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        style: {
+          display: "flex",
+          flexWrap: "wrap",
+          gap: AI_TREE_TOKENS.spacing4,
+          justifyContent: justify,
+          alignItems: variant === "logos" ? "center" : "flex-start"
+        },
+        children: items.map((item, i) => {
+          const hasLink = typeof item.href === "string" && item.href.length > 0;
+          const hoverPreset = slots.hover === "none" || slots.hover === "lift" || slots.hover === "zoom" || slots.hover === "fade" ? slots.hover : hasLink ? "lift" : "none";
+          const box = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              "data-ohw-media-strip-item": "",
+              "data-ohw-media-strip-index": i,
+              "data-ohw-media-strip-hover": hoverPreset === "none" ? void 0 : hoverPreset,
+              style: variant === "logos" ? { height: logoMaxHeight, width: "auto" } : { width: cardWidth, flexShrink: 0 },
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                MediaBox,
+                {
+                  refValue: item.assetId,
+                  ctx,
+                  aspect: variant === "reel" ? "9:16" : void 0,
+                  radius: variant === "reel" ? AI_TREE_TOKENS.radiusCard : 4,
+                  height: variant === "logos" ? logoMaxHeight : void 0,
+                  editPath: `${path}.items.${i}.assetId`,
+                  alt: item.alt,
+                  fit: variant === "logos" ? "contain" : "cover",
+                  grayscale: treatment === "grayscale",
+                  fixedSize: variant === "logos"
+                }
+              )
+            }
+          );
+          return hasLink ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "a",
+            {
+              href: item.href,
+              target: item.linkTarget === "new-tab" ? "_blank" : void 0,
+              rel: item.linkTarget === "new-tab" ? "noopener noreferrer" : void 0,
+              style: { display: "block", textDecoration: "none" },
+              children: box
+            },
+            i
+          ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.default.Fragment, { children: box }, i);
+        })
+      }
+    )
+  ] });
+}
 function useIsMobile() {
   const [mobile, setMobile] = import_react.default.useState(
     () => typeof window !== "undefined" && window.matchMedia("(max-width: 768px)").matches
@@ -2712,6 +2801,8 @@ function renderNode(node, ctx, path) {
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CollectionBlock, { node, ctx, path });
     case "accordion":
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AccordionBlock, { node, ctx, path });
+    case "media-strip":
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MediaStripBlock, { node, ctx, path });
     case "embed": {
       const child = (node.children ?? [])[0];
       if (child) {
@@ -3211,21 +3302,21 @@ function placeContainer(container, entry) {
     const original = findTemplateSection(entry.replaces);
     if (original) {
       original.insertAdjacentElement("afterend", container);
-      return;
+      return "anchored";
     }
   }
   if (entry.beforeSection) {
     const anchor = findPlacementAnchor(entry.beforeSection, container);
     if (anchor) {
       anchor.insertAdjacentElement("beforebegin", container);
-      return;
+      return "anchored";
     }
   }
   if (entry.afterSection) {
     const anchor = findPlacementAnchor(entry.afterSection, container);
     if (anchor) {
       anchor.insertAdjacentElement("afterend", container);
-      return;
+      return "anchored";
     }
   }
   const footer = findFooterSection();
@@ -3234,6 +3325,7 @@ function placeContainer(container, entry) {
   } else {
     document.body.appendChild(container);
   }
+  return "fallback";
 }
 function syncRemovedSections(state) {
   const removed = new Set(state.removed ?? []);
@@ -3290,6 +3382,10 @@ function syncReplacedOriginals(state) {
 }
 var sectionOrderIndex = /* @__PURE__ */ new Map();
 var removedSectionIds = /* @__PURE__ */ new Set();
+var persistSectionOrder = null;
+function setSectionOrderPersistHandler(handler) {
+  persistSectionOrder = handler;
+}
 function setAiSectionOrder(raw, currentPath) {
   const next = /* @__PURE__ */ new Map();
   const removed = /* @__PURE__ */ new Set();
@@ -3370,6 +3466,7 @@ function applyAiSectionsToDom(state, options) {
       mounted.delete(id);
     }
   }
+  const newlyAnchoredIds = [];
   for (const entry of ordered) {
     const serialized = JSON.stringify(entry) + brandKey;
     const existing = mounted.get(entry.id);
@@ -3389,7 +3486,10 @@ function applyAiSectionsToDom(state, options) {
     container.setAttribute("data-ohw-section", entry.id);
     container.setAttribute("data-ohw-instance", entry.id);
     container.setAttribute("data-ohw-section-label", entry.label);
-    if (isNewMount) placeContainer(container, entry);
+    if (isNewMount) {
+      const mode = placeContainer(container, entry);
+      if (mode === "anchored" && !sectionOrderIndex.has(entry.id)) newlyAnchoredIds.push(entry.id);
+    }
     const root = mounted.get(entry.id)?.root ?? (0, import_client.createRoot)(container);
     const resolveMedia = (ref) => entry.media[ref] ?? null;
     (0, import_react_dom.flushSync)(() => {
@@ -3419,6 +3519,16 @@ function applyAiSectionsToDom(state, options) {
       prev = el;
     }
   }
+  if (newlyAnchoredIds.length > 0 && persistSectionOrder) {
+    const snapshot = topLevelSections().map((el, order) => ({
+      instanceId: instanceIdOf(el),
+      type: el.getAttribute("data-ohw-section") ?? "",
+      order,
+      pagePath
+    }));
+    for (const snapEntry of snapshot) sectionOrderIndex.set(snapEntry.instanceId, snapEntry.order);
+    persistSectionOrder(snapshot);
+  }
   syncReplacedOriginals(state);
   syncRemovedSections(state);
   syncTemplateHidden(state, pageSections.length > 0);
@@ -10194,7 +10304,515 @@ function PricingCardToolbar({
   const buttonCount = (card?.children ?? []).filter((c) => c.type === "button").length;
   const featureCount = pricingCardFeatureCount(entry.tree, index);
   const pillWrap = window.innerWidth <= 480 ? "wrap" : "nowrap";
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+    "div",
+    {
+      "data-ohw-bridge": "",
+      "data-ohw-toolbar": "",
+      onMouseDown: (e) => e.stopPropagation(),
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 6,
+        alignItems: "center",
+        background: OHW_BLUE,
+        padding: 8,
+        borderRadius: 12,
+        boxShadow: "0 8px 24px rgba(0,0,0,0.25)",
+        pointerEvents: pending ? "none" : "auto",
+        opacity: pending ? 0.6 : 1,
+        // Only cap width on mobile, where the pill rows wrap — on desktop the row stays on one
+        // line and should size to fit it, not get clipped/overflow against a fixed cap.
+        maxWidth: pillWrap === "wrap" ? "calc(100vw - 24px)" : "none"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { display: "flex", gap: 6, flexWrap: pillWrap, justifyContent: "center" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "+ Tier", onClick: onAddTier, disabled: collectionCount >= 4 }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "- Tier", onClick: onRemoveTier, disabled: collectionCount <= 1 }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "Featured", active: isFeatured, onClick: () => onToggleFeatured(!isFeatured) }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "+ Button", onClick: onAddButton, disabled: buttonCount >= 2 }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "- Button", onClick: onRemoveButton, disabled: buttonCount === 0 }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "+ Feature", onClick: onAddFeature, disabled: featureCount >= 10 }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "- Feature", onClick: onRemoveFeature, disabled: featureCount <= 1 })
+        ] }),
+        isFeatured && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { display: "flex", gap: 6, flexWrap: pillWrap, justifyContent: "center" }, children: EMPHASIS_TREATMENTS.map((t) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          Pill,
+          {
+            label: t.label,
+            active: (featured?.treatment ?? "outlined") === t.value,
+            onClick: () => onSetTreatment(t.value)
+          },
+          t.value
+        )) }),
+        error && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { color: "#FCA5A5", fontSize: 11, maxWidth: 220, textAlign: "center" }, children: error })
+      ]
+    }
+  );
+}
+function findPricingCardNode(tree, index) {
+  const stack = tree.rows.flatMap((row) => row.blocks);
+  while (stack.length) {
+    const node = stack.shift();
+    if (node.type === "collection" && Array.isArray(node.children) && node.children[0]?.type === "card" && node.children[0].slots?.preset === "pricing") {
+      return node.children[index] ?? null;
+    }
+    if (node.children) stack.push(...node.children);
+  }
+  return null;
+}
+function AiPricingCardOverlay({
+  postToParent: postToParent2,
+  aiSectionsRef,
+  applyTreeLocalRef
+}) {
+  const [hover, setHover] = (0, import_react9.useState)(null);
+  const [active, setActive] = (0, import_react9.useState)(null);
+  const [pending, setPending] = (0, import_react9.useState)(false);
+  const [error, setError] = (0, import_react9.useState)(null);
+  const activeRef = (0, import_react9.useRef)(null);
+  activeRef.current = active;
+  (0, import_react9.useEffect)(() => {
+    const onMove = (e) => {
+      const t = e.target;
+      if (!(t instanceof HTMLElement)) return;
+      if (t.closest("[data-ohw-toolbar], [data-ohw-edit-chrome], [data-ohw-item-interaction], [data-ohw-link-modal-root], [data-ohw-section-picker], [data-ohw-ai-review]")) {
+        return;
+      }
+      const cardEl = t.closest("[data-ohw-pricing-card]");
+      if (!cardEl) {
+        setHover(null);
+        return;
+      }
+      const sectionEl = cardEl.closest("[data-ohw-section]");
+      const unit = sectionEl ? movableUnit(sectionEl) : null;
+      const sectionId = unit ? instanceIdOf(unit) || null : null;
+      const index = Number(cardEl.dataset.ohwPricingIndex);
+      if (!sectionId || Number.isNaN(index)) {
+        setHover(null);
+        return;
+      }
+      setHover({ sectionId, index });
+    };
+    const onLeave = () => setHover(null);
+    document.addEventListener("mousemove", onMove, { passive: true });
+    document.documentElement.addEventListener("mouseleave", onLeave);
+    return () => {
+      document.removeEventListener("mousemove", onMove);
+      document.documentElement.removeEventListener("mouseleave", onLeave);
+    };
+  }, []);
+  (0, import_react9.useEffect)(() => {
+    const onClick = (e) => {
+      const current = activeRef.current;
+      if (!current) return;
+      const t = e.target;
+      if (!(t instanceof HTMLElement)) return;
+      if (t.closest("[data-ohw-item-interaction]")) return;
+      const cardEl = findPricingCardElement(current.sectionId, current.index);
+      if (cardEl && cardEl.contains(t)) return;
+      setActive(null);
+      setError(null);
+    };
+    document.addEventListener("click", onClick, true);
+    return () => document.removeEventListener("click", onClick, true);
+  }, []);
+  (0, import_react9.useEffect)(() => {
+    const onBlur = () => {
+      if (!activeRef.current) return;
+      setActive(null);
+      setError(null);
+    };
+    window.addEventListener("blur", onBlur);
+    return () => window.removeEventListener("blur", onBlur);
+  }, []);
+  (0, import_react9.useEffect)(() => {
+    const onKeyDown = (e) => {
+      if (e.key !== "Escape") return;
+      if (!activeRef.current) return;
+      setActive(null);
+      setError(null);
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, []);
+  const findEntry = (0, import_react9.useCallback)(
+    (sectionId) => {
+      const state = parseAiSectionsState(aiSectionsRef.current);
+      return state.sections.find((s) => s.id === sectionId) ?? null;
+    },
+    [aiSectionsRef]
+  );
+  const runMutation = (0, import_react9.useCallback)(
+    async (sectionId, mutate) => {
+      const entry = findEntry(sectionId);
+      if (!entry) return false;
+      const nextTree = mutate(entry.tree);
+      if (!nextTree) return false;
+      setPending(true);
+      setError(null);
+      const { ok, reasons } = await requestValidateTree(postToParent2, nextTree);
+      setPending(false);
+      if (!ok) {
+        setError(reasons[0] ?? "That change is not allowed.");
+        return false;
+      }
+      applyTreeLocalRef.current?.({
+        id: sectionId,
+        mode: "replace",
+        targetSectionId: sectionId,
+        tree: nextTree,
+        label: entry.label,
+        media: entry.media,
+        ...entry.brand ? { brand: entry.brand } : {},
+        // The user is already looking at the card they just edited — recentering the
+        // viewport on every tier add/remove/toggle reads as the section jumping around.
+        skipScrollIntoView: true
+      });
+      return true;
+    },
+    [findEntry, postToParent2, applyTreeLocalRef]
+  );
+  const activeEntry = active ? findEntry(active.sectionId) : null;
+  const activeCardRect = useLiveCardRect(active);
+  const hoverHandleRect = useLiveCardRect(!active && hover ? hover : null);
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+    hoverHandleRect && hover && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      "button",
+      {
+        type: "button",
+        "data-ohw-toolbar": "",
+        onClick: () => setActive(hover),
+        "aria-label": "Configure pricing tier",
+        style: {
+          position: "fixed",
+          top: hoverHandleRect.top + 8,
+          left: hoverHandleRect.left + hoverHandleRect.width - 36,
+          width: 28,
+          height: 28,
+          borderRadius: 8,
+          border: `1.5px dashed ${PRIMARY3}`,
+          background: "#ffffff",
+          color: PRIMARY3,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          cursor: "pointer",
+          zIndex: 2147483643,
+          fontSize: 14,
+          fontWeight: 700
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.Star, { size: 14, style: { pointerEvents: "none" } })
+      }
+    ),
+    activeCardRect && active && activeEntry && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      ItemInteractionLayer,
+      {
+        rect: activeCardRect,
+        state: "active-top",
+        toolbar: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          PricingCardToolbar,
+          {
+            entry: activeEntry,
+            index: active.index,
+            pending,
+            error,
+            onAddTier: () => runMutation(active.sectionId, addPricingTier),
+            onRemoveTier: () => {
+              void runMutation(active.sectionId, (tree) => removePricingTier(tree, active.index)).then(
+                (applied) => {
+                  if (applied) setActive(null);
+                }
+              );
+            },
+            onToggleFeatured: (enabled) => runMutation(
+              active.sectionId,
+              (tree) => setPricingCardFeatured(tree, active.index, { enabled })
+            ),
+            onSetTreatment: (treatment) => runMutation(
+              active.sectionId,
+              (tree) => setPricingCardFeatured(tree, active.index, { enabled: true, treatment })
+            ),
+            onAddButton: () => runMutation(active.sectionId, (tree) => addPricingCardButton(tree, active.index, "Learn more")),
+            onRemoveButton: () => runMutation(active.sectionId, (tree) => removePricingCardButton(tree, active.index)),
+            onAddFeature: () => runMutation(active.sectionId, (tree) => addPricingCardFeature(tree, active.index, "New feature")),
+            onRemoveFeature: () => runMutation(active.sectionId, (tree) => removePricingCardFeature(tree, active.index))
+          }
+        )
+      }
+    )
+  ] });
+}
+
+// src/ui/ai-section/AiMediaStripOverlay.tsx
+var import_react10 = require("react");
+var import_lucide_react9 = require("lucide-react");
+
+// src/lib/ai-media-strip-tree.ts
+var MEDIA_STRIP_ITEM_MIN = 1;
+var LOGO_MAX_HEIGHT_MIN = 24;
+var LOGO_MAX_HEIGHT_MAX = 96;
+var CARD_WIDTH_MIN = 160;
+var CARD_WIDTH_MAX = 320;
+function isMediaStrip(node) {
+  return node.type === "media-strip";
+}
+function findBlock(node) {
+  if (isMediaStrip(node)) return node;
+  for (const child of node.children ?? []) {
+    const found = findBlock(child);
+    if (found) return found;
+  }
+  return null;
+}
+function findMediaStripBlock(tree) {
+  for (const row of tree.rows ?? []) {
+    for (const block of row.blocks ?? []) {
+      const found = findBlock(block);
+      if (found) return found;
+    }
+  }
+  return null;
+}
+function mediaStripItems(tree) {
+  const block = findMediaStripBlock(tree);
+  return block?.items ?? [];
+}
+function withMediaStrip(tree, mutate) {
+  const next = JSON.parse(JSON.stringify(tree));
+  const block = findMediaStripBlock(next);
+  if (!block) return null;
+  block.items = block.items ?? [];
+  return mutate(block) ? next : null;
+}
+function addMediaStripItem(tree, item, afterIndex) {
+  return withMediaStrip(tree, (block) => {
+    const items = block.items;
+    const at = afterIndex === void 0 ? items.length : Math.min(items.length, afterIndex + 1);
+    items.splice(at, 0, { ...item });
+    return true;
+  });
+}
+function removeMediaStripItem(tree, index) {
+  return withMediaStrip(tree, (block) => {
+    const items = block.items;
+    if (items.length <= MEDIA_STRIP_ITEM_MIN) return false;
+    if (index < 0 || index >= items.length) return false;
+    items.splice(index, 1);
+    return true;
+  });
+}
+function reorderMediaStripItem(tree, index, direction) {
+  return withMediaStrip(tree, (block) => {
+    const items = block.items;
+    const target = index + direction;
+    if (index < 0 || index >= items.length || target < 0 || target >= items.length) return false;
+    const [moved] = items.splice(index, 1);
+    items.splice(target, 0, moved);
+    return true;
+  });
+}
+function setMediaStripVariant(tree, variant) {
+  return withMediaStrip(tree, (block) => {
+    block.slots = { ...block.slots, variant };
+    if (variant === "logos") delete block.slots.cardWidth;
+    if (variant === "reel") delete block.slots.logoMaxHeight;
+    return true;
+  });
+}
+function setMediaStripSizing(tree, value) {
+  return withMediaStrip(tree, (block) => {
+    const variant = block.slots?.variant;
+    if (variant === "logos") {
+      block.slots = { ...block.slots, logoMaxHeight: Math.min(LOGO_MAX_HEIGHT_MAX, Math.max(LOGO_MAX_HEIGHT_MIN, value)) };
+      return true;
+    }
+    if (variant === "reel") {
+      block.slots = { ...block.slots, cardWidth: Math.min(CARD_WIDTH_MAX, Math.max(CARD_WIDTH_MIN, value)) };
+      return true;
+    }
+    return false;
+  });
+}
+function setMediaStripTreatment(tree, treatment) {
+  return withMediaStrip(tree, (block) => {
+    block.slots = { ...block.slots, treatment };
+    return true;
+  });
+}
+function setMediaStripAlign(tree, align) {
+  return withMediaStrip(tree, (block) => {
+    block.slots = { ...block.slots, align };
+    return true;
+  });
+}
+function setMediaStripHover(tree, hover) {
+  return withMediaStrip(tree, (block) => {
+    block.slots = { ...block.slots, hover };
+    return true;
+  });
+}
+
+// src/ui/ai-section/AiMediaStripOverlay.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var PRIMARY4 = "#0885FE";
+var OHW_BLUE2 = `var(--ohw-primary, ${PRIMARY4})`;
+var OHW_BLUE_DARK2 = `color-mix(in srgb, var(--ohw-primary, ${PRIMARY4}) 60%, #000000)`;
+function findMediaStripItemElement(sectionId, index) {
+  const sectionEl = findByInstanceId(sectionId);
+  if (!sectionEl) return null;
+  const items = sectionEl.querySelectorAll("[data-ohw-media-strip-item]");
+  for (const el of Array.from(items)) {
+    if (Number(el.dataset.ohwMediaStripIndex) === index) return el;
+  }
+  return null;
+}
+function readRect3(ref) {
+  const el = ref && findMediaStripItemElement(ref.sectionId, ref.index);
+  if (!el) return null;
+  const r2 = el.getBoundingClientRect();
+  if (r2.width <= 0 || r2.height <= 0) return null;
+  return { top: r2.top, left: r2.left, width: r2.width, height: r2.height };
+}
+function useLiveItemRect(ref) {
+  const [rect, setRect] = (0, import_react10.useState)(null);
+  (0, import_react10.useEffect)(() => {
+    if (!ref) {
+      setRect(null);
+      return;
+    }
+    const update = () => {
+      const next = readRect3(ref);
+      setRect(
+        (prev) => prev && next && prev.top === next.top && prev.left === next.left && prev.width === next.width && prev.height === next.height ? prev : next
+      );
+    };
+    update();
+    const opts = { capture: true, passive: true };
+    window.addEventListener("scroll", update, opts);
+    window.addEventListener("resize", update);
+    const interval = setInterval(update, 500);
+    return () => {
+      window.removeEventListener("scroll", update, opts);
+      window.removeEventListener("resize", update);
+      clearInterval(interval);
+    };
+  }, [ref?.sectionId, ref?.index]);
+  return rect;
+}
+function requestValidateTree2(postToParent2, tree) {
+  return new Promise((resolve) => {
+    const id = `ai-validate-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
+    const timeout = window.setTimeout(() => {
+      window.removeEventListener("message", onMessage);
+      resolve({ ok: false, reasons: ["Validation request timed out."] });
+    }, 8e3);
+    function onMessage(e) {
+      if (e.data?.type !== "ow:ai-validate-tree-result" || e.data.id !== id) return;
+      window.clearTimeout(timeout);
+      window.removeEventListener("message", onMessage);
+      resolve({ ok: e.data.ok === true, reasons: Array.isArray(e.data.reasons) ? e.data.reasons : [] });
+    }
+    window.addEventListener("message", onMessage);
+    postToParent2({ type: "ow:ai-validate-tree-request", id, tree });
+  });
+}
+function requestAssetPick(postToParent2) {
+  return new Promise((resolve) => {
+    const id = `ai-asset-pick-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
+    const timeout = window.setTimeout(() => {
+      window.removeEventListener("message", onMessage);
+      resolve(null);
+    }, 3e5);
+    function onMessage(e) {
+      if (e.data?.type !== "ow:asset-picked" || e.data.id !== id) return;
+      window.clearTimeout(timeout);
+      window.removeEventListener("message", onMessage);
+      resolve(
+        typeof e.data.assetId === "string" && typeof e.data.url === "string" ? { assetId: e.data.assetId, url: e.data.url } : null
+      );
+    }
+    window.addEventListener("message", onMessage);
+    postToParent2({ type: "ow:asset-pick", id });
+  });
+}
+function Pill2({
+  label,
+  onClick,
+  disabled,
+  active
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    "button",
+    {
+      type: "button",
+      onClick,
+      disabled,
+      style: {
+        height: 28,
+        padding: "0 10px",
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 4,
+        borderRadius: 999,
+        border: "none",
+        cursor: disabled ? "default" : "pointer",
+        background: active ? OHW_BLUE_DARK2 : "#ffffff",
+        color: active ? "#ffffff" : OHW_BLUE_DARK2,
+        opacity: disabled ? 0.4 : 1,
+        fontSize: 12,
+        lineHeight: "16px",
+        fontFamily: "Figtree, ui-sans-serif, system-ui, sans-serif",
+        whiteSpace: "nowrap",
+        flex: "0 0 auto"
+      },
+      children: label
+    }
+  );
+}
+var VARIANTS = [
+  { value: "logos", label: "Logos" },
+  { value: "reel", label: "Reel" }
+];
+var ALIGNS = [
+  { value: "left", label: "Left" },
+  { value: "center", label: "Center" },
+  { value: "right", label: "Right" }
+];
+var HOVERS = [
+  { value: "none", label: "None" },
+  { value: "lift", label: "Lift" },
+  { value: "zoom", label: "Zoom" },
+  { value: "fade", label: "Fade" }
+];
+var TREATMENTS = [
+  { value: "color", label: "Color" },
+  { value: "grayscale", label: "Grayscale" }
+];
+function MediaStripToolbar({
+  entry,
+  index,
+  pending,
+  error,
+  onSetVariant,
+  onSetAlign,
+  onSetHover,
+  onSetTreatment,
+  onResize,
+  onAddItem,
+  onRemoveItem,
+  onMoveLeft,
+  onMoveRight
+}) {
+  const items = mediaStripItems(entry.tree);
+  const itemCount = items.length;
+  const slots = findMediaStripSlots(entry.tree);
+  const variant = slots?.variant === "reel" ? "reel" : "logos";
+  const align = slots?.align === "left" || slots?.align === "right" ? slots.align : "center";
+  const hover = slots?.hover === "none" || slots?.hover === "lift" || slots?.hover === "zoom" || slots?.hover === "fade" ? slots.hover : "none";
+  const treatment = slots?.treatment === "color" || slots?.treatment === "grayscale" ? slots.treatment : variant === "logos" ? "grayscale" : "color";
+  const sizeValue = variant === "logos" ? typeof slots?.logoMaxHeight === "number" ? slots.logoMaxHeight : 48 : typeof slots?.cardWidth === "number" ? slots.cardWidth : 240;
+  const pillWrap = window.innerWidth <= 480 ? "wrap" : "nowrap";
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
     "div",
     {
       "data-ohw-bridge": "",
@@ -10205,78 +10823,78 @@ function PricingCardToolbar({
         flexDirection: "column",
         gap: 6,
         alignItems: "center",
-        background: OHW_BLUE,
+        background: OHW_BLUE2,
         padding: 8,
         borderRadius: 12,
         boxShadow: "0 8px 24px rgba(0,0,0,0.25)",
         pointerEvents: pending ? "none" : "auto",
         opacity: pending ? 0.6 : 1,
-        // Only cap width on mobile, where the pill rows wrap — on desktop the row stays on one
-        // line and should size to fit it, not get clipped/overflow against a fixed cap.
         maxWidth: pillWrap === "wrap" ? "calc(100vw - 24px)" : "none"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { display: "flex", gap: 6, flexWrap: pillWrap, justifyContent: "center" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "+ Tier", onClick: onAddTier, disabled: collectionCount >= 4 }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "- Tier", onClick: onRemoveTier, disabled: collectionCount <= 1 }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "Featured", active: isFeatured, onClick: () => onToggleFeatured(!isFeatured) }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "+ Button", onClick: onAddButton, disabled: buttonCount >= 2 }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "- Button", onClick: onRemoveButton, disabled: buttonCount === 0 }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "+ Feature", onClick: onAddFeature, disabled: featureCount >= 10 }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Pill, { label: "- Feature", onClick: onRemoveFeature, disabled: featureCount <= 1 })
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { style: { display: "flex", gap: 6, flexWrap: pillWrap, justifyContent: "center" }, children: [
+          VARIANTS.map((v) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Pill2, { label: v.label, active: variant === v.value, onClick: () => onSetVariant(v.value) }, v.value)),
+          ALIGNS.map((a) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Pill2, { label: a.label, active: align === a.value, onClick: () => onSetAlign(a.value) }, a.value))
         ] }),
-        isFeatured && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { display: "flex", gap: 6, flexWrap: pillWrap, justifyContent: "center" }, children: EMPHASIS_TREATMENTS.map((t) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-          Pill,
-          {
-            label: t.label,
-            active: (featured?.treatment ?? "outlined") === t.value,
-            onClick: () => onSetTreatment(t.value)
-          },
-          t.value
-        )) }),
-        error && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { color: "#FCA5A5", fontSize: 11, maxWidth: 220, textAlign: "center" }, children: error })
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { style: { display: "flex", gap: 6, flexWrap: pillWrap, justifyContent: "center" }, children: [
+          HOVERS.map((h) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Pill2, { label: h.label, active: hover === h.value, onClick: () => onSetHover(h.value) }, h.value)),
+          TREATMENTS.map((t) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Pill2, { label: t.label, active: treatment === t.value, onClick: () => onSetTreatment(t.value) }, t.value))
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { style: { display: "flex", gap: 6, alignItems: "center" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Pill2, { label: "\u2212", onClick: () => onResize(-8) }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { style: { color: "#ffffff", fontSize: 12, minWidth: 34, textAlign: "center" }, children: [
+            sizeValue,
+            "px"
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Pill2, { label: "+", onClick: () => onResize(8) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { style: { display: "flex", gap: 6, flexWrap: pillWrap, justifyContent: "center" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Pill2, { label: "+ Item", onClick: onAddItem }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Pill2, { label: "\u2212 Item", onClick: onRemoveItem, disabled: itemCount <= 1 }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Pill2, { label: "\u2190 Move", onClick: onMoveLeft, disabled: index <= 0 }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Pill2, { label: "\u2192 Move", onClick: onMoveRight, disabled: index >= itemCount - 1 })
+        ] }),
+        error && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { style: { color: "#FCA5A5", fontSize: 11, maxWidth: 220, textAlign: "center" }, children: error })
       ]
     }
   );
 }
-function findPricingCardNode(tree, index) {
+function findMediaStripSlots(tree) {
   const stack = tree.rows.flatMap((row) => row.blocks);
   while (stack.length) {
     const node = stack.shift();
-    if (node.type === "collection" && Array.isArray(node.children) && node.children[0]?.type === "card" && node.children[0].slots?.preset === "pricing") {
-      return node.children[index] ?? null;
-    }
+    if (node.type === "media-strip") return node.slots ?? {};
     if (node.children) stack.push(...node.children);
   }
   return null;
 }
-function AiPricingCardOverlay({
+function AiMediaStripOverlay({
   postToParent: postToParent2,
   aiSectionsRef,
   applyTreeLocalRef
 }) {
-  const [hover, setHover] = (0, import_react9.useState)(null);
-  const [active, setActive] = (0, import_react9.useState)(null);
-  const [pending, setPending] = (0, import_react9.useState)(false);
-  const [error, setError] = (0, import_react9.useState)(null);
-  const activeRef = (0, import_react9.useRef)(null);
+  const [hover, setHover] = (0, import_react10.useState)(null);
+  const [active, setActive] = (0, import_react10.useState)(null);
+  const [pending, setPending] = (0, import_react10.useState)(false);
+  const [error, setError] = (0, import_react10.useState)(null);
+  const activeRef = (0, import_react10.useRef)(null);
   activeRef.current = active;
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     const onMove = (e) => {
       const t = e.target;
       if (!(t instanceof HTMLElement)) return;
       if (t.closest("[data-ohw-toolbar], [data-ohw-edit-chrome], [data-ohw-item-interaction], [data-ohw-link-modal-root], [data-ohw-section-picker], [data-ohw-ai-review]")) {
         return;
       }
-      const cardEl = t.closest("[data-ohw-pricing-card]");
-      if (!cardEl) {
+      const itemEl = t.closest("[data-ohw-media-strip-item]");
+      if (!itemEl) {
         setHover(null);
         return;
       }
-      const sectionEl = cardEl.closest("[data-ohw-section]");
+      const sectionEl = itemEl.closest("[data-ohw-section]");
       const unit = sectionEl ? movableUnit(sectionEl) : null;
       const sectionId = unit ? instanceIdOf(unit) || null : null;
-      const index = Number(cardEl.dataset.ohwPricingIndex);
+      const index = Number(itemEl.dataset.ohwMediaStripIndex);
       if (!sectionId || Number.isNaN(index)) {
         setHover(null);
         return;
@@ -10291,22 +10909,22 @@ function AiPricingCardOverlay({
       document.documentElement.removeEventListener("mouseleave", onLeave);
     };
   }, []);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     const onClick = (e) => {
       const current = activeRef.current;
       if (!current) return;
       const t = e.target;
       if (!(t instanceof HTMLElement)) return;
       if (t.closest("[data-ohw-item-interaction]")) return;
-      const cardEl = findPricingCardElement(current.sectionId, current.index);
-      if (cardEl && cardEl.contains(t)) return;
+      const itemEl = findMediaStripItemElement(current.sectionId, current.index);
+      if (itemEl && itemEl.contains(t)) return;
       setActive(null);
       setError(null);
     };
     document.addEventListener("click", onClick, true);
     return () => document.removeEventListener("click", onClick, true);
   }, []);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     const onBlur = () => {
       if (!activeRef.current) return;
       setActive(null);
@@ -10315,7 +10933,7 @@ function AiPricingCardOverlay({
     window.addEventListener("blur", onBlur);
     return () => window.removeEventListener("blur", onBlur);
   }, []);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     const onKeyDown = (e) => {
       if (e.key !== "Escape") return;
       if (!activeRef.current) return;
@@ -10325,14 +10943,14 @@ function AiPricingCardOverlay({
     document.addEventListener("keydown", onKeyDown);
     return () => document.removeEventListener("keydown", onKeyDown);
   }, []);
-  const findEntry = (0, import_react9.useCallback)(
+  const findEntry = (0, import_react10.useCallback)(
     (sectionId) => {
       const state = parseAiSectionsState(aiSectionsRef.current);
       return state.sections.find((s) => s.id === sectionId) ?? null;
     },
     [aiSectionsRef]
   );
-  const runMutation = (0, import_react9.useCallback)(
+  const runMutation = (0, import_react10.useCallback)(
     async (sectionId, mutate) => {
       const entry = findEntry(sectionId);
       if (!entry) return false;
@@ -10340,7 +10958,7 @@ function AiPricingCardOverlay({
       if (!nextTree) return false;
       setPending(true);
       setError(null);
-      const { ok, reasons } = await requestValidateTree(postToParent2, nextTree);
+      const { ok, reasons } = await requestValidateTree2(postToParent2, nextTree);
       setPending(false);
       if (!ok) {
         setError(reasons[0] ?? "That change is not allowed.");
@@ -10354,8 +10972,6 @@ function AiPricingCardOverlay({
         label: entry.label,
         media: entry.media,
         ...entry.brand ? { brand: entry.brand } : {},
-        // The user is already looking at the card they just edited — recentering the
-        // viewport on every tier add/remove/toggle reads as the section jumping around.
         skipScrollIntoView: true
       });
       return true;
@@ -10363,16 +10979,16 @@ function AiPricingCardOverlay({
     [findEntry, postToParent2, applyTreeLocalRef]
   );
   const activeEntry = active ? findEntry(active.sectionId) : null;
-  const activeCardRect = useLiveCardRect(active);
-  const hoverHandleRect = useLiveCardRect(!active && hover ? hover : null);
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
-    hoverHandleRect && hover && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  const hoverHandleRect = useLiveItemRect(!active && hover ? hover : null);
+  const activeItemRect = useLiveItemRect(active);
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+    hoverHandleRect && hover && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       "button",
       {
         type: "button",
         "data-ohw-toolbar": "",
         onClick: () => setActive(hover),
-        "aria-label": "Configure pricing tier",
+        "aria-label": "Configure media item",
         style: {
           position: "fixed",
           top: hoverHandleRect.top + 8,
@@ -10380,9 +10996,9 @@ function AiPricingCardOverlay({
           width: 28,
           height: 28,
           borderRadius: 8,
-          border: `1.5px dashed ${PRIMARY3}`,
+          border: `1.5px dashed ${PRIMARY4}`,
           background: "#ffffff",
-          color: PRIMARY3,
+          color: PRIMARY4,
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
@@ -10391,41 +11007,63 @@ function AiPricingCardOverlay({
           fontSize: 14,
           fontWeight: 700
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.Star, { size: 14, style: { pointerEvents: "none" } })
+        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react9.Star, { size: 14, style: { pointerEvents: "none" } })
       }
     ),
-    activeCardRect && active && activeEntry && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    activeItemRect && active && activeEntry && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       ItemInteractionLayer,
       {
-        rect: activeCardRect,
+        rect: activeItemRect,
         state: "active-top",
-        toolbar: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-          PricingCardToolbar,
+        toolbar: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          MediaStripToolbar,
           {
             entry: activeEntry,
             index: active.index,
             pending,
             error,
-            onAddTier: () => runMutation(active.sectionId, addPricingTier),
-            onRemoveTier: () => {
-              void runMutation(active.sectionId, (tree) => removePricingTier(tree, active.index)).then(
+            onSetVariant: (variant) => runMutation(active.sectionId, (tree) => setMediaStripVariant(tree, variant)),
+            onSetAlign: (align) => runMutation(active.sectionId, (tree) => setMediaStripAlign(tree, align)),
+            onSetHover: (hoverPreset) => runMutation(active.sectionId, (tree) => setMediaStripHover(tree, hoverPreset)),
+            onSetTreatment: (treatment) => runMutation(active.sectionId, (tree) => setMediaStripTreatment(tree, treatment)),
+            onResize: (delta) => {
+              const slots = findMediaStripSlots(activeEntry.tree);
+              const variant = slots?.variant === "reel" ? "reel" : "logos";
+              const current = variant === "logos" ? typeof slots?.logoMaxHeight === "number" ? slots.logoMaxHeight : 48 : typeof slots?.cardWidth === "number" ? slots.cardWidth : 240;
+              void runMutation(active.sectionId, (tree) => setMediaStripSizing(tree, current + delta));
+            },
+            onAddItem: () => {
+              void requestAssetPick(postToParent2).then((picked) => {
+                if (!picked) return;
+                const item = { assetId: picked.assetId, alt: "Logo" };
+                void runMutation(active.sectionId, (tree) => addMediaStripItem(tree, item, active.index)).then(
+                  (applied) => {
+                    if (applied) setActive({ sectionId: active.sectionId, index: active.index + 1 });
+                  }
+                );
+              });
+            },
+            onRemoveItem: () => {
+              void runMutation(active.sectionId, (tree) => removeMediaStripItem(tree, active.index)).then(
                 (applied) => {
                   if (applied) setActive(null);
                 }
               );
             },
-            onToggleFeatured: (enabled) => runMutation(
-              active.sectionId,
-              (tree) => setPricingCardFeatured(tree, active.index, { enabled })
-            ),
-            onSetTreatment: (treatment) => runMutation(
-              active.sectionId,
-              (tree) => setPricingCardFeatured(tree, active.index, { enabled: true, treatment })
-            ),
-            onAddButton: () => runMutation(active.sectionId, (tree) => addPricingCardButton(tree, active.index, "Learn more")),
-            onRemoveButton: () => runMutation(active.sectionId, (tree) => removePricingCardButton(tree, active.index)),
-            onAddFeature: () => runMutation(active.sectionId, (tree) => addPricingCardFeature(tree, active.index, "New feature")),
-            onRemoveFeature: () => runMutation(active.sectionId, (tree) => removePricingCardFeature(tree, active.index))
+            onMoveLeft: () => {
+              void runMutation(active.sectionId, (tree) => reorderMediaStripItem(tree, active.index, -1)).then(
+                (applied) => {
+                  if (applied) setActive({ sectionId: active.sectionId, index: active.index - 1 });
+                }
+              );
+            },
+            onMoveRight: () => {
+              void runMutation(active.sectionId, (tree) => reorderMediaStripItem(tree, active.index, 1)).then(
+                (applied) => {
+                  if (applied) setActive({ sectionId: active.sectionId, index: active.index + 1 });
+                }
+              );
+            }
           }
         )
       }
@@ -10737,28 +11375,28 @@ function scrollToHashSectionWhenReady(behavior = "smooth") {
 }
 
 // src/ui/link-modal/LinkPopover.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 
 // src/ui/dialog.tsx
 var React9 = __toESM(require("react"), 1);
 var import_radix_ui6 = require("radix-ui");
-var import_lucide_react9 = require("lucide-react");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_lucide_react10 = require("lucide-react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function Dialog2({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_radix_ui6.Dialog.Root, { "data-slot": "dialog", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_radix_ui6.Dialog.Root, { "data-slot": "dialog", ...props });
 }
 function DialogPortal({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_radix_ui6.Dialog.Portal, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_radix_ui6.Dialog.Portal, { ...props });
 }
 function DialogOverlay({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     import_radix_ui6.Dialog.Overlay,
     {
       "data-slot": "dialog-overlay",
@@ -10771,9 +11409,9 @@ function DialogOverlay({
 var DialogContent = React9.forwardRef(
   ({ className, children, showCloseButton = true, container, ...props }, ref) => {
     const positionMode = container ? "absolute" : "fixed";
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(DialogPortal, { container: container ?? void 0, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DialogOverlay, { className: cn(positionMode, "inset-0") }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(DialogPortal, { container: container ?? void 0, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DialogOverlay, { className: cn(positionMode, "inset-0") }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
         import_radix_ui6.Dialog.Content,
         {
           ref,
@@ -10789,13 +11427,13 @@ var DialogContent = React9.forwardRef(
           ...props,
           children: [
             children,
-            showCloseButton ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            showCloseButton ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
               import_radix_ui6.Dialog.Close,
               {
                 type: "button",
                 className: "absolute right-[9px] top-[9px] rounded-sm p-1.5 text-foreground hover:bg-muted/50",
                 "aria-label": "Close",
-                children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react9.X, { size: 16, "aria-hidden": true })
+                children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react10.X, { size: 16, "aria-hidden": true })
               }
             ) : null
           ]
@@ -10809,13 +11447,13 @@ function DialogHeader({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: cn("flex flex-col gap-1.5", className), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: cn("flex flex-col gap-1.5", className), ...props });
 }
 function DialogFooter({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "div",
     {
       className: cn("flex items-center justify-end gap-2", className),
@@ -10823,7 +11461,7 @@ function DialogFooter({
     }
   );
 }
-var DialogTitle = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+var DialogTitle = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
   import_radix_ui6.Dialog.Title,
   {
     ref,
@@ -10835,7 +11473,7 @@ var DialogTitle = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 DialogTitle.displayName = import_radix_ui6.Dialog.Title.displayName;
-var DialogDescription = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+var DialogDescription = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
   import_radix_ui6.Dialog.Description,
   {
     ref,
@@ -10847,63 +11485,63 @@ DialogDescription.displayName = import_radix_ui6.Dialog.Description.displayName;
 var DialogClose = import_radix_ui6.Dialog.Close;
 
 // src/ui/link-modal/LinkEditorPanel.tsx
-var import_lucide_react13 = require("lucide-react");
+var import_lucide_react14 = require("lucide-react");
 
 // src/ui/link-modal/DestinationBreadcrumb.tsx
-var import_lucide_react10 = require("lucide-react");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_lucide_react11 = require("lucide-react");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function DestinationBreadcrumb({
   pageTitle,
   sectionLabel
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex w-full flex-col gap-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-sm font-medium! text-foreground m-0", children: "Destination" }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react10.File, { size: 16, className: "shrink-0 text-foreground", "aria-hidden": true }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-sm font-medium leading-none text-foreground!", children: pageTitle })
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex w-full flex-col gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-sm font-medium! text-foreground m-0", children: "Destination" }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react11.File, { size: 16, className: "shrink-0 text-foreground", "aria-hidden": true }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-sm font-medium leading-none text-foreground!", children: pageTitle })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-        import_lucide_react10.ArrowRight,
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        import_lucide_react11.ArrowRight,
         {
           size: 16,
           className: "shrink-0 text-muted-foreground",
           "aria-hidden": true
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-          import_lucide_react10.GalleryVertical,
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          import_lucide_react11.GalleryVertical,
           {
             size: 16,
             className: "shrink-0 text-foreground",
             "aria-hidden": true
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "truncate text-sm font-medium leading-none text-foreground", children: sectionLabel })
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "truncate text-sm font-medium leading-none text-foreground", children: sectionLabel })
       ] })
     ] })
   ] });
 }
 
 // src/ui/link-modal/SectionTreeItem.tsx
-var import_lucide_react11 = require("lucide-react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_lucide_react12 = require("lucide-react");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function SectionTreeItem({
   section,
   onSelect,
   selected
 }) {
   const interactive = Boolean(onSelect);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex h-9 w-full items-end pl-3", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex h-9 w-full items-end pl-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       "div",
       {
         className: "-mr-px h-9 w-2 shrink-0 rounded-bl-sm border-b border-l border-border mb-4",
         "aria-hidden": true
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
       "div",
       {
         role: interactive ? "button" : void 0,
@@ -10921,15 +11559,15 @@ function SectionTreeItem({
           interactive && selected && "border-bridge-primary"
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-            import_lucide_react11.GalleryVertical,
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            import_lucide_react12.GalleryVertical,
             {
               size: 16,
               className: "shrink-0 text-foreground",
               "aria-hidden": true
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "truncate text-sm font-normal leading-5 text-foreground", children: section.label })
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "truncate text-sm font-normal leading-5 text-foreground", children: section.label })
         ]
       }
     )
@@ -10937,14 +11575,14 @@ function SectionTreeItem({
 }
 
 // src/ui/link-modal/UrlOrPageInput.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 
 // src/ui/input.tsx
 var React10 = __toESM(require("react"), 1);
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var Input = React10.forwardRef(
   ({ className, type, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       "input",
       {
         type,
@@ -10963,9 +11601,9 @@ Input.displayName = "Input";
 
 // src/ui/label.tsx
 var import_radix_ui7 = require("radix-ui");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function Label({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     import_radix_ui7.Label.Root,
     {
       "data-slot": "label",
@@ -10976,12 +11614,12 @@ function Label({ className, ...props }) {
 }
 
 // src/ui/link-modal/UrlOrPageInput.tsx
-var import_lucide_react12 = require("lucide-react");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_lucide_react13 = require("lucide-react");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function FieldChevron({
   onClick
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "button",
     {
       type: "button",
@@ -10989,7 +11627,7 @@ function FieldChevron({
       onClick,
       "aria-label": "Open page list",
       tabIndex: -1,
-      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react12.ChevronDown, { size: 16 })
+      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react13.ChevronDown, { size: 16 })
     }
   );
 }
@@ -11005,11 +11643,11 @@ function UrlOrPageInput({
   readOnly = false,
   urlError
 }) {
-  const inputId = (0, import_react10.useId)();
-  const inputRef = (0, import_react10.useRef)(null);
-  const rootRef = (0, import_react10.useRef)(null);
-  const [isFocused, setIsFocused] = (0, import_react10.useState)(false);
-  (0, import_react10.useEffect)(() => {
+  const inputId = (0, import_react11.useId)();
+  const inputRef = (0, import_react11.useRef)(null);
+  const rootRef = (0, import_react11.useRef)(null);
+  const [isFocused, setIsFocused] = (0, import_react11.useState)(false);
+  (0, import_react11.useEffect)(() => {
     if (!dropdownOpen) return;
     const isOutside = (e) => {
       const root = rootRef.current;
@@ -11050,19 +11688,19 @@ function UrlOrPageInput({
     "data-ohw-link-field flex h-[36px] w-full items-center overflow-hidden rounded-md border bg-background pl-3 pr-3 py-2 outline-none transition-[border-color,box-shadow]",
     urlError ? "border-destructive shadow-[0_0_0_1px_var(--ohw-destructive)]" : isFocused ? "border-bridge-primary shadow-[0_0_0_1px_var(--ohw-primary)]" : "border-input"
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex w-full flex-col gap-2 p-0", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Label, { htmlFor: inputId, className: cn(urlError && "text-destructive"), children: "Destination" }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { ref: rootRef, className: "relative w-full", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { "data-ohw-link-field": true, className: fieldClassName, children: [
-        selectedPage ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex shrink-0 items-center pr-2", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-          import_lucide_react12.File,
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex w-full flex-col gap-2 p-0", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Label, { htmlFor: inputId, className: cn(urlError && "text-destructive"), children: "Destination" }),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { ref: rootRef, className: "relative w-full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { "data-ohw-link-field": true, className: fieldClassName, children: [
+        selectedPage ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex shrink-0 items-center pr-2", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          import_lucide_react13.File,
           {
             size: 16,
             className: "shrink-0 text-foreground",
             "aria-hidden": true
           }
         ) }) : null,
-        readOnly ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "min-w-0 flex-1 truncate text-sm leading-5 text-foreground", children: selectedPage?.title ?? value }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        readOnly ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "min-w-0 flex-1 truncate text-sm leading-5 text-foreground", children: selectedPage?.title ?? value }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           Input,
           {
             ref: inputRef,
@@ -11088,7 +11726,7 @@ function UrlOrPageInput({
             )
           }
         ),
-        selectedPage && !readOnly ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        selectedPage && !readOnly ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           "button",
           {
             type: "button",
@@ -11096,26 +11734,26 @@ function UrlOrPageInput({
             onMouseDown: clearSelection,
             "aria-label": "Clear selected page",
             tabIndex: -1,
-            children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react12.X, { size: 16, "aria-hidden": true })
+            children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react13.X, { size: 16, "aria-hidden": true })
           }
         ) : null,
-        !readOnly ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(FieldChevron, { onClick: toggleDropdown }) : null
+        !readOnly ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(FieldChevron, { onClick: toggleDropdown }) : null
       ] }),
-      dropdownOpen && !readOnly && filteredPages.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      dropdownOpen && !readOnly && filteredPages.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
         "div",
         {
           "data-ohw-link-page-dropdown": "",
           className: "absolute left-0 right-0 top-[calc(100%+4px)] z-50 max-h-48 overflow-auto rounded-lg border border-border bg-popover py-1 shadow-lg",
           onMouseDown: (e) => e.preventDefault(),
-          children: filteredPages.map((page) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+          children: filteredPages.map((page) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
             "button",
             {
               type: "button",
               className: "flex h-9 w-full items-center gap-2 border-0 bg-transparent px-3 text-left text-sm leading-5 text-foreground outline-none hover:bg-muted",
               onClick: () => onPageSelect(page),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react12.File, { size: 16, className: "shrink-0", "aria-hidden": true }),
-                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "truncate", children: page.title })
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react13.File, { size: 16, className: "shrink-0", "aria-hidden": true }),
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "truncate", children: page.title })
               ]
             },
             page.path
@@ -11123,34 +11761,34 @@ function UrlOrPageInput({
         }
       ) : null
     ] }),
-    urlError ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-sm font-medium text-destructive", children: urlError }) : null
+    urlError ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "text-sm font-medium text-destructive", children: urlError }) : null
   ] });
 }
 
 // src/ui/link-modal/LinkEditorPanel.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function LinkEditorPanel({ state, onClose }) {
   const isCancel = state.secondaryLabel === "Cancel" || state.secondaryLabel === "Back to sections";
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DialogClose, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DialogClose, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       "button",
       {
         type: "button",
         className: "absolute right-[9px] top-[9px] rounded-sm p-1.5 text-foreground hover:bg-muted/50 h-7",
         "aria-label": "Close",
         onClick: onClose,
-        children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react13.X, { size: 16, "aria-hidden": true })
+        children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react14.X, { size: 16, "aria-hidden": true })
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DialogHeader, { className: "w-full gap-1.5 p-6 pr-12", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DialogTitle, { className: "m-0 w-full break-words", children: state.title }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex w-full flex-col gap-3 px-6 pb-8 pt-1", children: [
-      state.showBreadcrumb && state.selectedPage && state.selectedSection ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DialogHeader, { className: "w-full gap-1.5 p-6 pr-12", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DialogTitle, { className: "m-0 w-full break-words", children: state.title }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex w-full flex-col gap-3 px-6 pb-8 pt-1", children: [
+      state.showBreadcrumb && state.selectedPage && state.selectedSection ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         DestinationBreadcrumb,
         {
           pageTitle: state.selectedPage.title,
           sectionLabel: state.selectedSection.label
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         UrlOrPageInput,
         {
           value: state.searchValue,
@@ -11163,8 +11801,8 @@ function LinkEditorPanel({ state, onClose }) {
           urlError: state.urlError
         }
       ),
-      state.showChooseSection ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex flex-col justify-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      state.showChooseSection ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex flex-col justify-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           Button,
           {
             type: "button",
@@ -11175,15 +11813,15 @@ function LinkEditorPanel({ state, onClose }) {
             children: "Choose a section"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-center gap-1 text-sm text-muted-foreground", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react13.Info, { size: 16, className: "shrink-0", "aria-hidden": true }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: "Pick a section this link should scroll to." })
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center gap-1 text-sm text-muted-foreground", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react14.Info, { size: 16, className: "shrink-0", "aria-hidden": true }),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { children: "Pick a section this link should scroll to." })
         ] })
       ] }) : null,
-      state.showSectionRow && state.selectedSection ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(SectionTreeItem, { section: state.selectedSection, selected: true }) : null
+      state.showSectionRow && state.selectedSection ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SectionTreeItem, { section: state.selectedSection, selected: true }) : null
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(DialogFooter, { className: "w-full px-6 pb-6", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(DialogFooter, { className: "w-full px-6 pb-6", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         Button,
         {
           type: "button",
@@ -11198,7 +11836,7 @@ function LinkEditorPanel({ state, onClose }) {
           children: state.secondaryLabel
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         Button,
         {
           type: "button",
@@ -11217,9 +11855,9 @@ function LinkEditorPanel({ state, onClose }) {
 }
 
 // src/ui/link-modal/SectionPickerOverlay.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_react_dom3 = require("react-dom");
-var import_lucide_react14 = require("lucide-react");
+var import_lucide_react15 = require("lucide-react");
 var import_navigation2 = require("next/navigation");
 
 // src/lib/parent-scroll.ts
@@ -11241,7 +11879,7 @@ function getIframeChromeClip(parentScroll) {
 }
 
 // src/ui/link-modal/SectionPickerOverlay.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var DIM_OVERLAY = "rgba(0, 0, 0, 0.45)";
 function rectsEqual(a, b) {
   if (a.size !== b.size) return false;
@@ -11274,12 +11912,12 @@ function hitTestSectionId(x, y, sectionIds, rects) {
   return null;
 }
 function useSectionRects(sectionIdsKey, enabled) {
-  const [rects, setRects] = (0, import_react11.useState)(/* @__PURE__ */ new Map());
-  const sectionIds = (0, import_react11.useMemo)(
+  const [rects, setRects] = (0, import_react12.useState)(/* @__PURE__ */ new Map());
+  const sectionIds = (0, import_react12.useMemo)(
     () => sectionIdsKey ? sectionIdsKey.split("\0") : [],
     [sectionIdsKey]
   );
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (!enabled || sectionIds.length === 0) {
       setRects((prev) => prev.size === 0 ? prev : /* @__PURE__ */ new Map());
       return;
@@ -11320,13 +11958,13 @@ function SectionPickerOverlay({
 }) {
   const router = (0, import_navigation2.useRouter)();
   const pathname = (0, import_navigation2.usePathname)();
-  const [selectedId, setSelectedId] = (0, import_react11.useState)(null);
-  const [hoveredId, setHoveredId] = (0, import_react11.useState)(null);
-  const pointerRef = (0, import_react11.useRef)(null);
-  const pointerScreenRef = (0, import_react11.useRef)(null);
-  const iframeOffsetTopRef = (0, import_react11.useRef)(null);
-  const sectionIdsRef = (0, import_react11.useRef)([]);
-  const [chromeClip, setChromeClip] = (0, import_react11.useState)(
+  const [selectedId, setSelectedId] = (0, import_react12.useState)(null);
+  const [hoveredId, setHoveredId] = (0, import_react12.useState)(null);
+  const pointerRef = (0, import_react12.useRef)(null);
+  const pointerScreenRef = (0, import_react12.useRef)(null);
+  const iframeOffsetTopRef = (0, import_react12.useRef)(null);
+  const sectionIdsRef = (0, import_react12.useRef)([]);
+  const [chromeClip, setChromeClip] = (0, import_react12.useState)(
     () => ({
       top: 0,
       bottom: typeof window !== "undefined" ? window.innerHeight : 0
@@ -11334,12 +11972,12 @@ function SectionPickerOverlay({
   );
   const normalizedTarget = normalizePath(pagePath);
   const isOnTargetPage = normalizePath(pathname) === normalizedTarget;
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (isOnTargetPage) return;
     const search = readPreservedSearch();
     router.push(`${normalizedTarget}${search}`);
   }, [isOnTargetPage, normalizedTarget, router]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     document.documentElement.setAttribute("data-ohw-section-picking", "");
     document.querySelectorAll("[data-ohw-hovered]").forEach((el) => {
       el.removeAttribute("data-ohw-hovered");
@@ -11351,24 +11989,24 @@ function SectionPickerOverlay({
       document.documentElement.removeAttribute("data-ohw-section-picking");
     };
   }, []);
-  const liveSections = (0, import_react11.useMemo)(() => {
+  const liveSections = (0, import_react12.useMemo)(() => {
     if (!isOnTargetPage) return sections;
     const live = collectSectionsFromDom();
     if (live.length === 0) return sections;
     const labels = new Map(sections.map((s) => [s.id, s.label]));
     return live.map((s) => ({ id: s.id, label: labels.get(s.id) ?? s.label }));
   }, [isOnTargetPage, sections, pathname]);
-  const sectionIdsKey = (0, import_react11.useMemo)(
+  const sectionIdsKey = (0, import_react12.useMemo)(
     () => liveSections.map((s) => s.id).join("\0"),
     [liveSections]
   );
-  const sectionIds = (0, import_react11.useMemo)(
+  const sectionIds = (0, import_react12.useMemo)(
     () => liveSections.map((s) => s.id),
     [liveSections]
   );
   sectionIdsRef.current = sectionIds;
   const rects = useSectionRects(sectionIdsKey, isOnTargetPage);
-  const applyHoverAt = (0, import_react11.useCallback)(
+  const applyHoverAt = (0, import_react12.useCallback)(
     (x, y, liveRects) => {
       const ids = sectionIdsRef.current;
       const map = liveRects ?? readSectionRects(ids);
@@ -11377,7 +12015,7 @@ function SectionPickerOverlay({
     },
     []
   );
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     const applyClip = (iframeOffsetTop, visibleCanvasTop, canvasH, promptBarH = 0) => {
       const next = getIframeVisibleClip({
         iframeOffsetTop,
@@ -11421,12 +12059,12 @@ function SectionPickerOverlay({
       window.removeEventListener("resize", onResize);
     };
   }, [applyHoverAt]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     const ptr = pointerRef.current;
     if (!ptr) return;
     applyHoverAt(ptr.x, ptr.y, rects);
   }, [rects, applyHoverAt]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     const rememberPointer = (clientX, clientY) => {
       pointerRef.current = { x: clientX, y: clientY };
       const top = iframeOffsetTopRef.current;
@@ -11450,7 +12088,7 @@ function SectionPickerOverlay({
       window.removeEventListener("message", onPointerSync);
     };
   }, [rects, applyHoverAt]);
-  const handleSelect = (0, import_react11.useCallback)(
+  const handleSelect = (0, import_react12.useCallback)(
     (section) => {
       if (selectedId) return;
       setSelectedId(section.id);
@@ -11458,7 +12096,7 @@ function SectionPickerOverlay({
     },
     [selectedId, onSelect]
   );
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     const onKeyDown = (e) => {
       if (e.key === "Escape") {
         e.preventDefault();
@@ -11472,7 +12110,7 @@ function SectionPickerOverlay({
   const portalRoot = typeof document !== "undefined" ? document.querySelector("[data-ohw-bridge-root]") ?? document.body : null;
   if (!portalRoot) return null;
   return (0, import_react_dom3.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
       "div",
       {
         "data-ohw-section-picker": "",
@@ -11482,12 +12120,12 @@ function SectionPickerOverlay({
         role: "dialog",
         "aria-label": "Choose a section",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
             "div",
             {
               className: "pointer-events-auto fixed left-5 z-[2]",
               style: { top: chromeClip.top + 20 },
-              children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
                 Button,
                 {
                   type: "button",
@@ -11496,14 +12134,14 @@ function SectionPickerOverlay({
                   className: "h-8 min-w-0 gap-1 border-border bg-background px-2 py-1.5 shadow-sm hover:bg-muted cursor-pointer",
                   onClick: onBack,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react14.ArrowLeft, { className: "size-4 shrink-0", "aria-hidden": true }),
+                    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react15.ArrowLeft, { className: "size-4 shrink-0", "aria-hidden": true }),
                     "Back"
                   ]
                 }
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
             "div",
             {
               className: "pointer-events-none fixed left-1/2 z-[2] rounded-lg px-4 py-3 text-xs leading-4 tracking-[0.18px] text-white shadow-md",
@@ -11516,7 +12154,7 @@ function SectionPickerOverlay({
               children: "Click on section to select"
             }
           ),
-          !isOnTargetPage ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          !isOnTargetPage ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
             "div",
             {
               className: "pointer-events-none fixed left-1/2 z-[1] -translate-x-1/2 rounded-md px-3 py-2 text-sm text-muted-foreground shadow-sm",
@@ -11524,14 +12162,14 @@ function SectionPickerOverlay({
               children: "Loading page preview\u2026"
             }
           ) : null,
-          isOnTargetPage && liveSections.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "pointer-events-auto fixed inset-0 z-[1] flex items-center justify-center bg-muted/40", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-sm text-muted-foreground", children: "No sections found on this page." }) }) : null,
+          isOnTargetPage && liveSections.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "pointer-events-auto fixed inset-0 z-[1] flex items-center justify-center bg-muted/40", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "text-sm text-muted-foreground", children: "No sections found on this page." }) }) : null,
           isOnTargetPage ? liveSections.map((section) => {
             const rect = rects.get(section.id);
             if (!rect || rect.width <= 0 || rect.height <= 0) return null;
             const isSelected = selectedId === section.id;
             const isHovered = hoveredId === section.id;
             const isLit = isSelected || isHovered;
-            return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+            return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
               "button",
               {
                 type: "button",
@@ -11546,7 +12184,7 @@ function SectionPickerOverlay({
                 "aria-label": `Select section ${section.label}`,
                 onClick: () => handleSelect(section),
                 children: [
-                  isLit ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                  isLit ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                     "span",
                     {
                       className: "pointer-events-none absolute",
@@ -11559,13 +12197,13 @@ function SectionPickerOverlay({
                       "aria-hidden": true
                     }
                   ) : null,
-                  isSelected ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                  isSelected ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                     "span",
                     {
                       className: "absolute right-3 top-3 flex size-8 items-center justify-center rounded-full text-white",
                       style: { backgroundColor: "var(--ohw-primary, #0885fe)" },
                       "aria-hidden": true,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react14.Check, { className: "size-5" })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react15.Check, { className: "size-5" })
                     }
                   ) : null
                 ]
@@ -11581,7 +12219,7 @@ function SectionPickerOverlay({
 }
 
 // src/ui/link-modal/useLinkModalState.ts
-var import_react12 = require("react");
+var import_react13 = require("react");
 function useLinkModalState({
   open,
   mode,
@@ -11593,14 +12231,14 @@ function useLinkModalState({
   onClose,
   onSubmit
 }) {
-  const availablePages = (0, import_react12.useMemo)(() => pages, [pages]);
-  const [searchValue, setSearchValue] = (0, import_react12.useState)("");
-  const [selectedPage, setSelectedPage] = (0, import_react12.useState)(null);
-  const [selectedSection, setSelectedSection] = (0, import_react12.useState)(null);
-  const [step, setStep] = (0, import_react12.useState)("input");
-  const [dropdownOpen, setDropdownOpen] = (0, import_react12.useState)(false);
-  const [urlError, setUrlError] = (0, import_react12.useState)("");
-  const reset = (0, import_react12.useCallback)(() => {
+  const availablePages = (0, import_react13.useMemo)(() => pages, [pages]);
+  const [searchValue, setSearchValue] = (0, import_react13.useState)("");
+  const [selectedPage, setSelectedPage] = (0, import_react13.useState)(null);
+  const [selectedSection, setSelectedSection] = (0, import_react13.useState)(null);
+  const [step, setStep] = (0, import_react13.useState)("input");
+  const [dropdownOpen, setDropdownOpen] = (0, import_react13.useState)(false);
+  const [urlError, setUrlError] = (0, import_react13.useState)("");
+  const reset = (0, import_react13.useCallback)(() => {
     setSearchValue("");
     setSelectedPage(null);
     setSelectedSection(null);
@@ -11608,7 +12246,7 @@ function useLinkModalState({
     setDropdownOpen(false);
     setUrlError("");
   }, []);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (!open) return;
     if (mode === "edit" && initialTarget) {
       const { pageRoute } = parseTarget(initialTarget);
@@ -11624,11 +12262,11 @@ function useLinkModalState({
     setDropdownOpen(false);
     setUrlError("");
   }, [open, mode, initialTarget, reset]);
-  const filteredPages = (0, import_react12.useMemo)(() => {
+  const filteredPages = (0, import_react13.useMemo)(() => {
     if (!searchValue.trim()) return availablePages;
     return availablePages.filter((p) => p.title.toLowerCase().startsWith(searchValue.toLowerCase()));
   }, [availablePages, searchValue]);
-  const activeSections = (0, import_react12.useMemo)(() => {
+  const activeSections = (0, import_react13.useMemo)(() => {
     if (!selectedPage) return [];
     return getSectionsForPath(sectionsByPath, selectedPage.path);
   }, [selectedPage, sectionsByPath]);
@@ -11677,7 +12315,7 @@ function useLinkModalState({
     reset();
     onClose();
   };
-  const isValid = (0, import_react12.useMemo)(() => {
+  const isValid = (0, import_react13.useMemo)(() => {
     if (urlError) return false;
     if (showBreadcrumb) return true;
     if (selectedPage) return true;
@@ -11745,7 +12383,7 @@ function useLinkModalState({
 }
 
 // src/ui/link-modal/LinkPopover.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function postToParent(data) {
   window.parent?.postMessage(data, "*");
 }
@@ -11774,7 +12412,7 @@ function LinkPopover({
     onSubmit
   });
   const sectionPickerActive = state.showSectionPicker && Boolean(state.selectedPage);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (!open) return;
     if (sectionPickerActive) {
       postToParent({ type: "ui:unlock" });
@@ -11841,15 +12479,15 @@ function LinkPopover({
       );
     };
   }, [open, sectionPickerActive]);
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       Dialog2,
       {
         open: open && !sectionPickerActive,
         onOpenChange: (next) => {
           if (!next) onClose?.();
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           DialogContent,
           {
             ref: panelRef,
@@ -11859,12 +12497,12 @@ function LinkPopover({
             "data-ohw-bridge": "",
             showCloseButton: false,
             className: "gap-0 p-0 w-full max-w-[448px] pointer-events-auto z-[2147483646] overflow-visible",
-            children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(LinkEditorPanel, { state, onClose })
+            children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(LinkEditorPanel, { state, onClose })
           }
         )
       }
     ),
-    sectionPickerActive && state.selectedPage ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    sectionPickerActive && state.selectedPage ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       SectionPickerOverlay,
       {
         pagePath: state.selectedPage.path,
@@ -15053,9 +15691,9 @@ function addFooterColumnWithPersist({
 }
 
 // src/ui/FloatingPanel.tsx
-var import_react14 = require("react");
-var import_lucide_react15 = require("lucide-react");
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_react15 = require("react");
+var import_lucide_react16 = require("lucide-react");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var PANEL_WIDTH = 256;
 var EDGE_MARGIN = 16;
 var HEADER_MIN = 56;
@@ -15103,24 +15741,24 @@ function FloatingPanel({
   className,
   bodyClassName
 }) {
-  const panelRef = (0, import_react14.useRef)(null);
-  const [measured, setMeasured] = (0, import_react14.useState)({ w: PANEL_WIDTH, h: 280 });
-  const dragRef = (0, import_react14.useRef)(null);
+  const panelRef = (0, import_react15.useRef)(null);
+  const [measured, setMeasured] = (0, import_react15.useState)({ w: PANEL_WIDTH, h: 280 });
+  const dragRef = (0, import_react15.useRef)(null);
   const resolved = position ?? defaultFloatingPanelPosition(parentScroll);
   const clamped = clampPosition(resolved, parentScroll, measured.w);
   const maxHeight = availablePanelHeight(parentScroll, clamped.y);
-  (0, import_react14.useLayoutEffect)(() => {
+  (0, import_react15.useLayoutEffect)(() => {
     if (!open || !panelRef.current) return;
     const el = panelRef.current;
     const next = { w: el.offsetWidth || PANEL_WIDTH, h: el.offsetHeight || 280 };
     setMeasured((prev) => prev.w === next.w && prev.h === next.h ? prev : next);
   }, [open, children, title, context]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (!open || !position || !onPositionChange) return;
     const next = clampPosition(position, parentScroll, measured.w, measured.h);
     if (next.x !== position.x || next.y !== position.y) onPositionChange(next);
   }, [open, parentScroll, measured.w, measured.h, position, onPositionChange]);
-  const onHeaderPointerDown = (0, import_react14.useCallback)(
+  const onHeaderPointerDown = (0, import_react15.useCallback)(
     (e) => {
       if (e.button !== 0) return;
       if (e.target.closest("[data-ohw-floating-panel-close]")) return;
@@ -15139,7 +15777,7 @@ function FloatingPanel({
     },
     [clamped.x, clamped.y]
   );
-  const onHeaderPointerMove = (0, import_react14.useCallback)(
+  const onHeaderPointerMove = (0, import_react15.useCallback)(
     (e) => {
       const drag = dragRef.current;
       if (!drag || drag.pointerId !== e.pointerId) return;
@@ -15166,7 +15804,7 @@ function FloatingPanel({
     },
     [measured.h, measured.w, onPositionChange, parentScroll]
   );
-  const endDrag = (0, import_react14.useCallback)((e) => {
+  const endDrag = (0, import_react15.useCallback)((e) => {
     const drag = dragRef.current;
     if (!drag || drag.pointerId !== e.pointerId) return;
     dragRef.current = null;
@@ -15176,13 +15814,13 @@ function FloatingPanel({
     } catch {
     }
   }, []);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (open) return;
     document.documentElement.removeAttribute("data-ohw-panel-dragging");
   }, [open]);
-  (0, import_react14.useEffect)(() => () => document.documentElement.removeAttribute("data-ohw-panel-dragging"), []);
+  (0, import_react15.useEffect)(() => () => document.documentElement.removeAttribute("data-ohw-panel-dragging"), []);
   if (!open) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
     "div",
     {
       ref: panelRef,
@@ -15199,7 +15837,7 @@ function FloatingPanel({
       onPointerDown: (e) => e.stopPropagation(),
       onClick: (e) => e.stopPropagation(),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
           "div",
           {
             "data-ohw-floating-panel-header": "",
@@ -15209,14 +15847,14 @@ function FloatingPanel({
             onPointerUp: endDrag,
             onPointerCancel: endDrag,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center gap-2", children: [
-                  icon ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "shrink-0 text-foreground", children: icon }) : null,
-                  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "min-w-0 flex-1 text-lg font-semibold leading-7 text-foreground", children: title })
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-center gap-2", children: [
+                  icon ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "shrink-0 text-foreground", children: icon }) : null,
+                  /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "min-w-0 flex-1 text-lg font-semibold leading-7 text-foreground", children: title })
                 ] }),
-                context ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "w-full text-sm leading-5 text-muted-foreground", children: context }) : null
+                context ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "w-full text-sm leading-5 text-muted-foreground", children: context }) : null
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                 "button",
                 {
                   type: "button",
@@ -15228,13 +15866,13 @@ function FloatingPanel({
                     onClose();
                   },
                   onPointerDown: (e) => e.stopPropagation(),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react15.X, { size: 16, "aria-hidden": true })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react16.X, { size: 16, "aria-hidden": true })
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           "div",
           {
             "data-ohw-floating-panel-body": "",
@@ -15252,15 +15890,15 @@ function FloatingPanel({
 }
 
 // src/ui/socials-display-panel.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function DisplaySwitch({
   label,
   checked,
   disabled,
   onChange
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex w-full items-center gap-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex w-full items-center gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       "span",
       {
         className: cn(
@@ -15270,7 +15908,7 @@ function DisplaySwitch({
         children: label
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       "button",
       {
         type: "button",
@@ -15284,7 +15922,7 @@ function DisplaySwitch({
           checked ? "bg-bridge-primary" : "bg-primary-50",
           disabled ? "cursor-default opacity-50" : "cursor-pointer"
         ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
           "span",
           {
             className: cn(
@@ -15298,8 +15936,8 @@ function DisplaySwitch({
   ] });
 }
 function SocialsDisplayPanel({ display, onChange, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: cn("flex w-full flex-col gap-3", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: cn("flex w-full flex-col gap-3", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       DisplaySwitch,
       {
         label: "Text",
@@ -15308,7 +15946,7 @@ function SocialsDisplayPanel({ display, onChange, className }) {
         onChange: (text) => onChange({ ...display, text })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       DisplaySwitch,
       {
         label: "Icon",
@@ -15321,7 +15959,7 @@ function SocialsDisplayPanel({ display, onChange, className }) {
 }
 
 // src/ui/button-style-panel.tsx
-var import_lucide_react16 = require("lucide-react");
+var import_lucide_react17 = require("lucide-react");
 
 // src/lib/button-styles.ts
 var BUTTON_VARIANTS_KEY = "__ohw_button_variants";
@@ -16021,7 +16659,7 @@ function withAssignment(content, id, assignment) {
 }
 
 // src/ui/button-style-panel.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var SIZE_LABEL = { s: "S", m: "M", l: "L" };
 function ButtonStylePanel({
   variants,
@@ -16035,15 +16673,15 @@ function ButtonStylePanel({
 }) {
   const preview = scaleGeometry(sizes.m, 0.75);
   const label = previewLabel.trim() || "Book Now";
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex w-full flex-col gap-5", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("section", { className: "flex w-full flex-col gap-2.5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("h3", { className: "text-xs font-semibold uppercase leading-4 tracking-[0.6px] text-stone-500", children: "Variants" }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "flex w-full flex-col gap-2.5", children: BUTTON_VARIANT_IDS.map((id) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex w-full flex-col gap-5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("section", { className: "flex w-full flex-col gap-2.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("h3", { className: "text-xs font-semibold uppercase leading-4 tracking-[0.6px] text-stone-500 font-sans", children: "Variants" }),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex w-full flex-col gap-2.5", children: BUTTON_VARIANT_IDS.map((id) => {
         const chrome = variants[id];
         const selected = id === variant;
         const hasBorder = parseFloat(chrome.borderWidth) > 0;
         const cardSlot = previewSlotForChrome(chrome, slotBackground);
-        return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
           "button",
           {
             type: "button",
@@ -16059,12 +16697,12 @@ function ButtonStylePanel({
               selected ? "border-2 border-primary" : "border border-border"
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                 "div",
                 {
                   className: "flex w-full items-center justify-center py-5",
                   style: { background: cardSlot },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                     "span",
                     {
                       className: "inline-flex items-center justify-center whitespace-nowrap font-semibold uppercase leading-none",
@@ -16086,12 +16724,12 @@ function ButtonStylePanel({
                   )
                 }
               ),
-              selected ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+              selected ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                 "span",
                 {
                   className: "absolute right-0.5 top-0.5 flex size-5 items-center justify-center rounded-full bg-primary text-primary-foreground",
                   "aria-hidden": true,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react16.Check, { className: "size-3", strokeWidth: 3 })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react17.Check, { className: "size-3", strokeWidth: 3 })
                 }
               ) : null
             ]
@@ -16100,9 +16738,9 @@ function ButtonStylePanel({
         );
       }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("section", { className: "flex w-full flex-col gap-2.5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("h3", { className: "text-xs font-semibold uppercase leading-4 tracking-[0.6px] text-stone-500", children: "Size" }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("section", { className: "flex w-full flex-col gap-2.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("h3", { className: "text-xs font-semibold uppercase leading-4 tracking-[0.6px] text-stone-500 font-sans", children: "Size" }),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         "div",
         {
           className: "flex w-full items-start rounded-lg bg-stone-100 p-1",
@@ -16110,7 +16748,7 @@ function ButtonStylePanel({
           "aria-label": "Size",
           children: BUTTON_SIZE_IDS.map((id) => {
             const selected = id === size;
-            return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
               "button",
               {
                 type: "button",
@@ -16852,7 +17490,7 @@ function hitTestNavDropSlot(clientX, clientY, draggedHrefKey, draggedEl) {
 }
 
 // src/useNavItemDrag.ts
-var import_react15 = require("react");
+var import_react16 = require("react");
 function useNavItemDrag({
   isEditMode,
   editContentRef,
@@ -16876,11 +17514,11 @@ function useNavItemDrag({
   getNavigationItemAnchor: getNavigationItemAnchor2,
   isDragHandleDisabled: isDragHandleDisabled2
 }) {
-  const navDragRef = (0, import_react15.useRef)(null);
-  const [navDropSlots, setNavDropSlots] = (0, import_react15.useState)([]);
-  const [activeNavDropIndex, setActiveNavDropIndex] = (0, import_react15.useState)(null);
-  const navPointerDragRef = (0, import_react15.useRef)(null);
-  const clearNavDragVisuals = (0, import_react15.useCallback)(() => {
+  const navDragRef = (0, import_react16.useRef)(null);
+  const [navDropSlots, setNavDropSlots] = (0, import_react16.useState)([]);
+  const [activeNavDropIndex, setActiveNavDropIndex] = (0, import_react16.useState)(null);
+  const navPointerDragRef = (0, import_react16.useRef)(null);
+  const clearNavDragVisuals = (0, import_react16.useCallback)(() => {
     const session = navDragRef.current;
     const nestedHrefKey = session?.draggedEl?.closest("[data-ohw-nav-children]") != null ? session.hrefKey : null;
     navDragRef.current = null;
@@ -16913,7 +17551,7 @@ function useNavItemDrag({
     document.documentElement.removeAttribute("data-ohw-nav-dragging-root");
     unlockItemDragInteraction();
   }, [setDraggedItemRect, setIsItemDragging, setSiblingHintRects]);
-  const refreshNavDragVisuals = (0, import_react15.useCallback)(
+  const refreshNavDragVisuals = (0, import_react16.useCallback)(
     (session, activeSlot, clientX, clientY) => {
       setDraggedItemRect(session.draggedEl.getBoundingClientRect());
       if (typeof clientX === "number" && typeof clientY === "number") {
@@ -16931,13 +17569,13 @@ function useNavItemDrag({
     },
     [setDraggedItemRect, setSiblingHintRects]
   );
-  const refreshNavDragVisualsRef = (0, import_react15.useRef)(refreshNavDragVisuals);
+  const refreshNavDragVisualsRef = (0, import_react16.useRef)(refreshNavDragVisuals);
   refreshNavDragVisualsRef.current = refreshNavDragVisuals;
-  const commitNavDragRef = (0, import_react15.useRef)(() => {
+  const commitNavDragRef = (0, import_react16.useRef)(() => {
   });
-  const beginNavDragRef = (0, import_react15.useRef)(() => {
+  const beginNavDragRef = (0, import_react16.useRef)(() => {
   });
-  const beginNavDrag = (0, import_react15.useCallback)(
+  const beginNavDrag = (0, import_react16.useCallback)(
     (session) => {
       const rect = session.draggedEl.getBoundingClientRect();
       session.lastClientX = session.lastClientX || rect.left + rect.width / 2;
@@ -16976,7 +17614,7 @@ function useNavItemDrag({
     ]
   );
   beginNavDragRef.current = beginNavDrag;
-  const commitNavDrag = (0, import_react15.useCallback)(
+  const commitNavDrag = (0, import_react16.useCallback)(
     (clientX, clientY) => {
       const session = navDragRef.current;
       if (!session) {
@@ -17055,7 +17693,7 @@ function useNavItemDrag({
     [clearNavDragVisuals, deselectRef, editContentRef, postToParentRef, selectRef]
   );
   commitNavDragRef.current = commitNavDrag;
-  const startNavLinkDrag = (0, import_react15.useCallback)(
+  const startNavLinkDrag = (0, import_react16.useCallback)(
     (anchor, clientX, clientY, wasSelected) => {
       if (footerDragRef.current) return false;
       const hrefKey = anchor.getAttribute("data-ohw-href-key");
@@ -17073,7 +17711,7 @@ function useNavItemDrag({
     },
     [beginNavDrag, footerDragRef, isDragHandleDisabled2, isCtaButton]
   );
-  const onNavDragOver = (0, import_react15.useCallback)(
+  const onNavDragOver = (0, import_react16.useCallback)(
     (e) => {
       const session = navDragRef.current;
       if (!session) return false;
@@ -17085,7 +17723,7 @@ function useNavItemDrag({
     },
     []
   );
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (!isEditMode) return;
     const THRESHOLD = 10;
     const resolveWasSelected = (el) => {
@@ -17212,7 +17850,7 @@ function useNavItemDrag({
     setLinkPopover,
     suppressNextClickRef
   ]);
-  const armNavPressFromChrome = (0, import_react15.useCallback)(
+  const armNavPressFromChrome = (0, import_react16.useCallback)(
     (selected, clientX, clientY, pointerId) => {
       const hrefKey = selected.getAttribute("data-ohw-href-key");
       if (!hrefKey || !isNavbarHrefKey(hrefKey)) return false;
@@ -17244,7 +17882,7 @@ function useNavItemDrag({
 }
 
 // src/useSectionDrag.ts
-var import_react16 = require("react");
+var import_react17 = require("react");
 
 // src/lib/section-dnd.ts
 function isFooterSection(el) {
@@ -17337,21 +17975,21 @@ function useSectionDrag({
   suppressNextClickRef,
   suppressClickUntilRef
 }) {
-  const sectionDragRef = (0, import_react16.useRef)(null);
-  const [sectionDropSlots, setSectionDropSlots] = (0, import_react16.useState)([]);
-  const [activeSectionDropIndex, setActiveSectionDropIndex] = (0, import_react16.useState)(null);
-  const [isSectionDragging, setIsSectionDragging] = (0, import_react16.useState)(false);
-  const sectionPointerDragRef = (0, import_react16.useRef)(null);
-  const autoScrollRafRef = (0, import_react16.useRef)(null);
-  const autoScrollDeltaRef = (0, import_react16.useRef)(0);
-  const stopAutoScroll = (0, import_react16.useCallback)(() => {
+  const sectionDragRef = (0, import_react17.useRef)(null);
+  const [sectionDropSlots, setSectionDropSlots] = (0, import_react17.useState)([]);
+  const [activeSectionDropIndex, setActiveSectionDropIndex] = (0, import_react17.useState)(null);
+  const [isSectionDragging, setIsSectionDragging] = (0, import_react17.useState)(false);
+  const sectionPointerDragRef = (0, import_react17.useRef)(null);
+  const autoScrollRafRef = (0, import_react17.useRef)(null);
+  const autoScrollDeltaRef = (0, import_react17.useRef)(0);
+  const stopAutoScroll = (0, import_react17.useCallback)(() => {
     if (autoScrollRafRef.current != null) {
       cancelAnimationFrame(autoScrollRafRef.current);
       autoScrollRafRef.current = null;
     }
     autoScrollDeltaRef.current = 0;
   }, []);
-  const tickAutoScroll = (0, import_react16.useCallback)(() => {
+  const tickAutoScroll = (0, import_react17.useCallback)(() => {
     if (!sectionDragRef.current) {
       stopAutoScroll();
       return;
@@ -17361,7 +17999,7 @@ function useSectionDrag({
     }
     autoScrollRafRef.current = requestAnimationFrame(tickAutoScroll);
   }, [postToParentRef, stopAutoScroll]);
-  const updateAutoScroll = (0, import_react16.useCallback)(
+  const updateAutoScroll = (0, import_react17.useCallback)(
     (clientY) => {
       const clip = getIframeChromeClip(parentScrollRef.current);
       let delta = 0;
@@ -17383,7 +18021,7 @@ function useSectionDrag({
     },
     [parentScrollRef, stopAutoScroll, tickAutoScroll]
   );
-  const clearSectionDragVisuals = (0, import_react16.useCallback)(() => {
+  const clearSectionDragVisuals = (0, import_react17.useCallback)(() => {
     sectionDragRef.current?.draggedEl.removeAttribute("data-ohw-section-dragging");
     sectionDragRef.current = null;
     setSectionDropSlots([]);
@@ -17393,7 +18031,7 @@ function useSectionDrag({
     document.documentElement.removeAttribute("data-ohw-section-dragging-root");
     unlockItemDragInteraction();
   }, [stopAutoScroll]);
-  const refreshSectionDragVisuals = (0, import_react16.useCallback)(
+  const refreshSectionDragVisuals = (0, import_react17.useCallback)(
     (session, clientX, clientY) => {
       session.lastClientX = clientX;
       session.lastClientY = clientY;
@@ -17407,7 +18045,7 @@ function useSectionDrag({
     },
     [updateAutoScroll]
   );
-  const beginSectionDrag = (0, import_react16.useCallback)(
+  const beginSectionDrag = (0, import_react17.useCallback)(
     (session) => {
       sectionDragRef.current = session;
       setIsSectionDragging(true);
@@ -17418,7 +18056,7 @@ function useSectionDrag({
     },
     [refreshSectionDragVisuals]
   );
-  const commitSectionDrag = (0, import_react16.useCallback)(() => {
+  const commitSectionDrag = (0, import_react17.useCallback)(() => {
     const session = sectionDragRef.current;
     if (!session) {
       clearSectionDragVisuals();
@@ -17447,7 +18085,7 @@ function useSectionDrag({
       });
     });
   }, [clearSectionDragVisuals, editContentRef, postToParentRef]);
-  const startSectionPressDrag = (0, import_react16.useCallback)(
+  const startSectionPressDrag = (0, import_react17.useCallback)(
     (el, clientX, clientY, pointerId) => {
       if (navDragRef.current || footerDragRef.current || sectionDragRef.current) return false;
       const instanceId = instanceIdOf(el);
@@ -17464,7 +18102,7 @@ function useSectionDrag({
     },
     [footerDragRef, navDragRef]
   );
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!isEditMode) return;
     const onPointerDown = (e) => {
       if (e.button !== 0) return;
@@ -17569,8 +18207,8 @@ function useSectionDrag({
 }
 
 // src/ui/footer-container-chrome.tsx
-var import_lucide_react17 = require("lucide-react");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_lucide_react18 = require("lucide-react");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 function FooterContainerChrome({
   rect,
   onAdd,
@@ -17578,7 +18216,7 @@ function FooterContainerChrome({
 }) {
   const chromeGap = 6;
   const buttonMargin = 7;
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     "div",
     {
       "data-ohw-footer-container-chrome": "",
@@ -17590,8 +18228,8 @@ function FooterContainerChrome({
         width: rect.width + chromeGap * 2,
         height: rect.height + chromeGap * 2
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Tooltip, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Tooltip, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
           "button",
           {
             type: "button",
@@ -17610,17 +18248,17 @@ function FooterContainerChrome({
               if (addDisabled) return;
               onAdd();
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react17.Plus, { className: "size-4 shrink-0 text-foreground", "aria-hidden": true })
+            children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react18.Plus, { className: "size-4 shrink-0 text-foreground", "aria-hidden": true })
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TooltipContent, { side: "bottom", sideOffset: 9, children: addDisabled ? "Maximum columns reached" : "Add item" })
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TooltipContent, { side: "bottom", sideOffset: 9, children: addDisabled ? "Maximum columns reached" : "Add item" })
       ] })
     }
   ) });
 }
 
 // src/lib/carousel.ts
-var import_react17 = require("react");
+var import_react18 = require("react");
 var CAROUSEL_ATTR = "data-ohw-carousel";
 var CAROUSEL_VALUE_ATTR = "data-ohw-carousel-value";
 var CAROUSEL_SLIDE_ATTR = "data-ohw-carousel-slide";
@@ -17682,8 +18320,8 @@ function applyCarouselNode(key, val) {
   return true;
 }
 function useOhwCarousel(key, initial) {
-  const [images, setImages] = (0, import_react17.useState)(initial);
-  (0, import_react17.useEffect)(() => {
+  const [images, setImages] = (0, import_react18.useState)(initial);
+  (0, import_react18.useEffect)(() => {
     const el = document.querySelector(
       `[${CAROUSEL_ATTR}][data-ohw-key="${CSS.escape(key)}"]`
     );
@@ -18102,14 +18740,14 @@ function deleteSelectedNavFooterItem(deps) {
 }
 
 // src/ui/navbar-container-chrome.tsx
-var import_lucide_react18 = require("lucide-react");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_lucide_react19 = require("lucide-react");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function NavbarContainerChrome({
   rect,
   onAdd
 }) {
   const chromeGap = 6;
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     "div",
     {
       "data-ohw-navbar-container-chrome": "",
@@ -18121,7 +18759,7 @@ function NavbarContainerChrome({
         width: rect.width + chromeGap * 2,
         height: rect.height + chromeGap * 2
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
         "button",
         {
           type: "button",
@@ -18138,7 +18776,7 @@ function NavbarContainerChrome({
             e.stopPropagation();
             onAdd();
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react18.Plus, { className: "size-4 shrink-0 text-foreground", "aria-hidden": true })
+          children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react19.Plus, { className: "size-4 shrink-0 text-foreground", "aria-hidden": true })
         }
       )
     }
@@ -18147,7 +18785,7 @@ function NavbarContainerChrome({
 
 // src/ui/drop-indicator.tsx
 var React11 = __toESM(require("react"), 1);
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var dropIndicatorVariants = cva(
   "ov-gap-line pointer-events-none shrink-0 transition-opacity duration-150",
   {
@@ -18171,7 +18809,7 @@ var dropIndicatorVariants = cva(
 );
 var DropIndicator = React11.forwardRef(
   ({ className, direction, state, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       "div",
       {
         ref,
@@ -18188,7 +18826,7 @@ var DropIndicator = React11.forwardRef(
 DropIndicator.displayName = "DropIndicator";
 
 // src/ui/badge.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var badgeVariants = cva(
   "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
   {
@@ -18206,13 +18844,13 @@ var badgeVariants = cva(
   }
 );
 function Badge({ className, variant, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: cn(badgeVariants({ variant }), className), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: cn(badgeVariants({ variant }), className), ...props });
 }
 
 // src/OhhwellsBridge.tsx
-var import_lucide_react19 = require("lucide-react");
-var import_jsx_runtime35 = require("react/jsx-runtime");
-var PRIMARY4 = "#0885FE";
+var import_lucide_react20 = require("lucide-react");
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var PRIMARY5 = "#0885FE";
 var IMAGE_FADE_MS = 300;
 var MEDIA_SETTLE_TIMEOUT_MS = 2500;
 function runOpacityFade(el, onDone) {
@@ -18333,7 +18971,7 @@ function duplicateSchedulingWidget(instanceId, scheduleId) {
     schedulingRoots.set(container, root);
     (0, import_react_dom4.flushSync)(() => {
       root.render(
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           SchedulingWidget,
           {
             notifyOnConnect: false,
@@ -18461,7 +19099,7 @@ function mountSchedulingWidget(anchorId, notifyOnConnect = false, scheduleId, be
     schedulingRoots.set(container, root);
     (0, import_react_dom4.flushSync)(() => {
       root.render(
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           SchedulingWidget,
           {
             notifyOnConnect,
@@ -19191,7 +19829,7 @@ var TOOLBAR_STROKE_GAP2 = 4;
 var TOOLBAR_OFFSET_FROM_ELEMENT = SELECTION_CHROME_GAP2 + TOOLBAR_STROKE_GAP2;
 var HOVER_STROKE_WIDTH = 1.5;
 var TEXT_HOVER_SIDE_PAD = 4;
-var CHROME_PRIMARY = `var(--ohw-primary, ${PRIMARY4})`;
+var CHROME_PRIMARY = `var(--ohw-primary, ${PRIMARY5})`;
 var TOOLBAR_GROUPS = [
   [
     { cmd: "bold", title: "Bold" },
@@ -19217,7 +19855,7 @@ function EditGlowChrome({
   hideHandle = false
 }) {
   const GAP = SELECTION_CHROME_GAP2;
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
     "div",
     {
       ref: elRef,
@@ -19232,7 +19870,7 @@ function EditGlowChrome({
         zIndex: 2147483646
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           "div",
           {
             style: {
@@ -19246,7 +19884,7 @@ function EditGlowChrome({
             }
           }
         ),
-        reorderHrefKey && !hideHandle && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        reorderHrefKey && !hideHandle && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           "div",
           {
             "data-ohw-drag-handle-container": "",
@@ -19258,7 +19896,7 @@ function EditGlowChrome({
               transform: "translate(calc(-100% - 7px), -50%)",
               pointerEvents: dragDisabled ? "none" : "auto"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
               DragHandle,
               {
                 "aria-label": `Reorder ${reorderHrefKey}`,
@@ -19435,9 +20073,9 @@ function FloatingToolbar({
   showEditLink,
   onEditLink
 }) {
-  const localRef = import_react18.default.useRef(null);
-  const [measuredW, setMeasuredW] = import_react18.default.useState(330);
-  const setRefs = import_react18.default.useCallback(
+  const localRef = import_react19.default.useRef(null);
+  const [measuredW, setMeasuredW] = import_react19.default.useState(330);
+  const setRefs = import_react19.default.useCallback(
     (node) => {
       localRef.current = node;
       if (typeof elRef === "function") elRef(node);
@@ -19449,7 +20087,7 @@ function FloatingToolbar({
     },
     [elRef]
   );
-  import_react18.default.useLayoutEffect(() => {
+  import_react19.default.useLayoutEffect(() => {
     const node = localRef.current;
     if (!node) return;
     const update = () => {
@@ -19462,7 +20100,7 @@ function FloatingToolbar({
     return () => ro.disconnect();
   }, [showEditLink, activeCommands]);
   const { top, left, transform } = calcToolbarPos(rect, parentScroll, measuredW);
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     "div",
     {
       ref: setRefs,
@@ -19474,12 +20112,12 @@ function FloatingToolbar({
         zIndex: 2147483647,
         pointerEvents: "auto"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(CustomToolbar, { children: [
-        TOOLBAR_GROUPS.map((btns, gi) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_react18.default.Fragment, { children: [
-          gi > 0 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(CustomToolbarDivider, {}),
+      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(CustomToolbar, { children: [
+        TOOLBAR_GROUPS.map((btns, gi) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_react19.default.Fragment, { children: [
+          gi > 0 && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(CustomToolbarDivider, {}),
           btns.map((btn) => {
             const isActive = activeCommands.has(btn.cmd);
-            return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
               CustomToolbarButton,
               {
                 title: btn.title,
@@ -19488,7 +20126,7 @@ function FloatingToolbar({
                   e.preventDefault();
                   onCommand(btn.cmd);
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                   "svg",
                   {
                     width: "16",
@@ -19509,7 +20147,7 @@ function FloatingToolbar({
             );
           })
         ] }, gi)),
-        showEditLink ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        showEditLink ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           CustomToolbarButton,
           {
             type: "button",
@@ -19523,7 +20161,7 @@ function FloatingToolbar({
               e.preventDefault();
               e.stopPropagation();
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react19.Link, { className: "size-4 shrink-0", "aria-hidden": true })
+            children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react20.Link, { className: "size-4 shrink-0", "aria-hidden": true })
           }
         ) : null
       ] })
@@ -19540,7 +20178,7 @@ function StateToggle({
   states,
   onStateChange
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     ToggleGroup,
     {
       "data-ohw-state-toggle": "",
@@ -19554,7 +20192,7 @@ function StateToggle({
         left: rect.right - 8,
         transform: "translateX(-100%)"
       },
-      children: states.map((state) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ToggleGroupItem, { value: state, size: "sm", children: state }, state))
+      children: states.map((state) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ToggleGroupItem, { value: state, size: "sm", children: state }, state))
     }
   );
 }
@@ -19571,9 +20209,9 @@ var OHW_LOADER_STYLE = {
   justifyContent: "center"
 };
 function OhwLoaderSpinner() {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("svg", { width: "28", height: "28", viewBox: "0 0 28 28", fill: "none", "aria-hidden": true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("circle", { cx: "14", cy: "14", r: "11", stroke: "#E7E5E4", strokeWidth: "3" }),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("svg", { width: "28", height: "28", viewBox: "0 0 28 28", fill: "none", "aria-hidden": true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("circle", { cx: "14", cy: "14", r: "11", stroke: "#E7E5E4", strokeWidth: "3" }),
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
       "circle",
       {
         cx: "14",
@@ -19583,7 +20221,7 @@ function OhwLoaderSpinner() {
         strokeWidth: "3",
         strokeDasharray: "17 52",
         strokeLinecap: "round",
-        children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           "animateTransform",
           {
             attributeName: "transform",
@@ -19599,7 +20237,7 @@ function OhwLoaderSpinner() {
   ] });
 }
 function OhwBrandMark() {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
     "svg",
     {
       width: "16",
@@ -19610,7 +20248,7 @@ function OhwBrandMark() {
       style: { display: "block", flexShrink: 0 },
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           "mask",
           {
             id: "ohw-badge-mark",
@@ -19620,15 +20258,15 @@ function OhwBrandMark() {
             y: "0",
             width: "48",
             height: "48",
-            children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("path", { d: "M23.8741 48C37.0594 48 47.7481 37.2548 47.7481 24C47.7481 10.7452 37.0594 0 23.8741 0C10.6888 0 0 10.7452 0 24C0 37.2548 10.6888 48 23.8741 48Z", fill: "white" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("path", { d: "M23.8741 48C37.0594 48 47.7481 37.2548 47.7481 24C47.7481 10.7452 37.0594 0 23.8741 0C10.6888 0 0 10.7452 0 24C0 37.2548 10.6888 48 23.8741 48Z", fill: "white" })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("g", { mask: "url(#ohw-badge-mark)", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("path", { d: "M23.8731 48.0497C37.0584 48.0497 47.7472 37.3046 47.7472 24.0497C47.7472 10.7949 37.0584 0.0497208 23.8731 0.0497208C10.6878 0.0497208 -0.000976562 10.7949 -0.000976562 24.0497C-0.000976562 37.3046 10.6878 48.0497 23.8731 48.0497Z", fill: "#0078E5" }),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("path", { d: "M17.1307 14.7172C13.1687 14.7172 9.38102 18.1154 8.65114 22.34C8.38885 23.8488 8.5598 25.2581 9.06929 26.4451C6.20005 29.1677 1.77216 27.8721 -1.40212 26.1536C-2.73618 25.4317 -3.92695 27.4745 -2.59037 28.1981C1.33389 30.3226 6.86037 31.6621 10.4402 28.4188C11.4718 29.3859 12.867 29.9621 14.4894 29.9621C18.4161 29.9621 22.2038 26.5318 22.9337 22.34C23.6636 18.1162 21.0566 14.7172 17.1298 14.7172H17.1307ZM19.9798 22.34C19.5281 25.0399 17.2689 27.231 14.9754 27.231C12.6466 27.231 11.1877 25.0399 11.6394 22.34C12.1262 19.6401 14.3151 17.4482 16.6438 17.4482C18.9374 17.4482 20.4667 19.6401 19.9798 22.34Z", fill: "white" }),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("path", { d: "M40.0017 27.0262C39.1797 27.081 38.2721 26.995 37.4668 26.7415C37.3344 26.6993 37.28 26.5401 37.3529 26.4205C37.5959 26.0212 37.8255 25.6152 38.009 25.1889C38.1071 24.9918 38.2018 24.793 38.2897 24.5908C38.3274 24.5041 38.4163 24.451 38.5101 24.4619C38.63 24.4754 38.7054 24.4821 38.8881 24.4821L39.1529 24.4796L39.8283 24.4543C45.9229 24.0492 50.4765 20.4319 54.8466 16.9014C56.0172 15.9554 57.6932 17.6208 56.5116 18.5752C51.7687 22.4065 47.1966 26.5081 40.9319 26.9689", fill: "white" }),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("path", { d: "M37.9687 24.27C38.4472 23.1319 38.7656 21.9045 38.9609 20.6991C39.5927 16.76 38.5058 14.2193 36.1553 14.2193C34.1835 14.2193 33.1469 17.2427 32.9199 18.8694C32.743 19.9872 32.5914 22.1219 33.6028 23.9524C33.7553 24.259 34.15 24.7712 34.471 25.1259C34.5447 25.2067 34.6746 25.2 34.7349 25.1082C34.9528 24.7788 35.1615 24.4039 35.3584 24.0257C35.5444 23.6677 35.5888 23.6138 35.8587 23.0207C35.8838 22.966 35.8813 22.9002 35.8478 22.8505C35.5888 22.4597 35.2168 21.9787 35.1204 21.4614C34.9184 20.4455 34.9436 19.2257 35.2218 18.1078C35.4413 17.3118 35.7195 16.7844 35.9039 16.5106C35.9466 16.4466 36.0279 16.4129 36.0975 16.4449C36.369 16.5671 36.5827 16.8838 36.7385 17.396C37.0167 18.2089 37.0167 19.3782 36.814 20.6999C36.6991 21.5271 36.4771 22.3729 36.1746 23.1673C36.1293 23.308 36.0757 23.4461 36.0187 23.5826C36.0187 23.5868 36.0187 23.591 36.0187 23.5961C35.9911 23.6946 35.9207 23.8067 35.8846 23.901C35.5536 24.5497 35.2344 25.1697 34.8439 25.7838C34.8388 25.7863 34.8346 25.7914 34.8296 25.7931C34.6528 26.0525 34.4718 26.2901 34.2866 26.4965C34.2774 26.5099 34.2682 26.5234 34.2589 26.5369C34.2405 26.5638 34.2179 26.5815 34.1944 26.595C33.5064 27.3212 32.7665 27.6893 32.0123 27.6893C31.8606 27.6893 31.6838 27.664 31.507 27.4349C31.3042 27.1299 30.85 26.0879 31.2539 22.9112C31.4785 21.3949 31.8011 20.0268 31.931 19.5408C31.9579 19.4413 31.8908 19.3419 31.7886 19.3293L30.0062 19.1162C29.9241 19.1061 29.8478 19.1566 29.8252 19.2366C29.2704 21.1615 27.0305 27.6885 24.9599 27.6885C24.328 27.6885 24.1512 26.6211 24.1001 26.2909C23.775 23.6264 25.528 18.5492 29.5302 16.2267C29.6048 16.1838 29.635 16.0928 29.5998 16.0136L28.9042 14.467C28.8632 14.3752 28.7501 14.3389 28.6638 14.3886C25.8079 16.0414 24.1847 18.5231 23.2915 20.3436C22.2046 22.5793 21.6993 25.0189 21.9515 26.8738C22.1795 28.7794 23.1398 29.872 24.6054 29.872C26.0543 29.872 27.4369 28.9066 28.7098 27.0187C28.7953 26.8915 28.9889 26.9311 29.0149 27.0819C29.2646 28.5283 29.9811 29.872 31.6579 29.872C33.5282 29.872 35.3232 28.7288 36.7134 26.6447C36.7712 26.5874 36.7972 26.5411 36.8181 26.4906C36.8232 26.4931 36.8282 26.4948 36.8332 26.4973C37.01 26.2025 37.181 25.9051 37.3444 25.6027C37.4508 25.4005 37.5572 25.1992 37.6586 24.9945C37.7181 24.874 37.7743 24.7527 37.8262 24.6289C37.838 24.6002 37.8547 24.5665 37.8706 24.5337", fill: "white" }),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("path", { d: "M30.5839 31.6397C25.7546 34.8577 19.4773 34.7853 14.6907 31.5243C13.5368 30.7384 12.5044 32.6498 13.6474 33.4281C19.034 37.0985 26.3077 37.096 31.7218 33.488C32.8791 32.7172 31.7478 30.8639 30.5839 31.6397Z", fill: "white" })
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("g", { mask: "url(#ohw-badge-mark)", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("path", { d: "M23.8731 48.0497C37.0584 48.0497 47.7472 37.3046 47.7472 24.0497C47.7472 10.7949 37.0584 0.0497208 23.8731 0.0497208C10.6878 0.0497208 -0.000976562 10.7949 -0.000976562 24.0497C-0.000976562 37.3046 10.6878 48.0497 23.8731 48.0497Z", fill: "#0078E5" }),
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("path", { d: "M17.1307 14.7172C13.1687 14.7172 9.38102 18.1154 8.65114 22.34C8.38885 23.8488 8.5598 25.2581 9.06929 26.4451C6.20005 29.1677 1.77216 27.8721 -1.40212 26.1536C-2.73618 25.4317 -3.92695 27.4745 -2.59037 28.1981C1.33389 30.3226 6.86037 31.6621 10.4402 28.4188C11.4718 29.3859 12.867 29.9621 14.4894 29.9621C18.4161 29.9621 22.2038 26.5318 22.9337 22.34C23.6636 18.1162 21.0566 14.7172 17.1298 14.7172H17.1307ZM19.9798 22.34C19.5281 25.0399 17.2689 27.231 14.9754 27.231C12.6466 27.231 11.1877 25.0399 11.6394 22.34C12.1262 19.6401 14.3151 17.4482 16.6438 17.4482C18.9374 17.4482 20.4667 19.6401 19.9798 22.34Z", fill: "white" }),
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("path", { d: "M40.0017 27.0262C39.1797 27.081 38.2721 26.995 37.4668 26.7415C37.3344 26.6993 37.28 26.5401 37.3529 26.4205C37.5959 26.0212 37.8255 25.6152 38.009 25.1889C38.1071 24.9918 38.2018 24.793 38.2897 24.5908C38.3274 24.5041 38.4163 24.451 38.5101 24.4619C38.63 24.4754 38.7054 24.4821 38.8881 24.4821L39.1529 24.4796L39.8283 24.4543C45.9229 24.0492 50.4765 20.4319 54.8466 16.9014C56.0172 15.9554 57.6932 17.6208 56.5116 18.5752C51.7687 22.4065 47.1966 26.5081 40.9319 26.9689", fill: "white" }),
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("path", { d: "M37.9687 24.27C38.4472 23.1319 38.7656 21.9045 38.9609 20.6991C39.5927 16.76 38.5058 14.2193 36.1553 14.2193C34.1835 14.2193 33.1469 17.2427 32.9199 18.8694C32.743 19.9872 32.5914 22.1219 33.6028 23.9524C33.7553 24.259 34.15 24.7712 34.471 25.1259C34.5447 25.2067 34.6746 25.2 34.7349 25.1082C34.9528 24.7788 35.1615 24.4039 35.3584 24.0257C35.5444 23.6677 35.5888 23.6138 35.8587 23.0207C35.8838 22.966 35.8813 22.9002 35.8478 22.8505C35.5888 22.4597 35.2168 21.9787 35.1204 21.4614C34.9184 20.4455 34.9436 19.2257 35.2218 18.1078C35.4413 17.3118 35.7195 16.7844 35.9039 16.5106C35.9466 16.4466 36.0279 16.4129 36.0975 16.4449C36.369 16.5671 36.5827 16.8838 36.7385 17.396C37.0167 18.2089 37.0167 19.3782 36.814 20.6999C36.6991 21.5271 36.4771 22.3729 36.1746 23.1673C36.1293 23.308 36.0757 23.4461 36.0187 23.5826C36.0187 23.5868 36.0187 23.591 36.0187 23.5961C35.9911 23.6946 35.9207 23.8067 35.8846 23.901C35.5536 24.5497 35.2344 25.1697 34.8439 25.7838C34.8388 25.7863 34.8346 25.7914 34.8296 25.7931C34.6528 26.0525 34.4718 26.2901 34.2866 26.4965C34.2774 26.5099 34.2682 26.5234 34.2589 26.5369C34.2405 26.5638 34.2179 26.5815 34.1944 26.595C33.5064 27.3212 32.7665 27.6893 32.0123 27.6893C31.8606 27.6893 31.6838 27.664 31.507 27.4349C31.3042 27.1299 30.85 26.0879 31.2539 22.9112C31.4785 21.3949 31.8011 20.0268 31.931 19.5408C31.9579 19.4413 31.8908 19.3419 31.7886 19.3293L30.0062 19.1162C29.9241 19.1061 29.8478 19.1566 29.8252 19.2366C29.2704 21.1615 27.0305 27.6885 24.9599 27.6885C24.328 27.6885 24.1512 26.6211 24.1001 26.2909C23.775 23.6264 25.528 18.5492 29.5302 16.2267C29.6048 16.1838 29.635 16.0928 29.5998 16.0136L28.9042 14.467C28.8632 14.3752 28.7501 14.3389 28.6638 14.3886C25.8079 16.0414 24.1847 18.5231 23.2915 20.3436C22.2046 22.5793 21.6993 25.0189 21.9515 26.8738C22.1795 28.7794 23.1398 29.872 24.6054 29.872C26.0543 29.872 27.4369 28.9066 28.7098 27.0187C28.7953 26.8915 28.9889 26.9311 29.0149 27.0819C29.2646 28.5283 29.9811 29.872 31.6579 29.872C33.5282 29.872 35.3232 28.7288 36.7134 26.6447C36.7712 26.5874 36.7972 26.5411 36.8181 26.4906C36.8232 26.4931 36.8282 26.4948 36.8332 26.4973C37.01 26.2025 37.181 25.9051 37.3444 25.6027C37.4508 25.4005 37.5572 25.1992 37.6586 24.9945C37.7181 24.874 37.7743 24.7527 37.8262 24.6289C37.838 24.6002 37.8547 24.5665 37.8706 24.5337", fill: "white" }),
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("path", { d: "M30.5839 31.6397C25.7546 34.8577 19.4773 34.7853 14.6907 31.5243C13.5368 30.7384 12.5044 32.6498 13.6474 33.4281C19.034 37.0985 26.3077 37.096 31.7218 33.488C32.8791 32.7172 31.7478 30.8639 30.5839 31.6397Z", fill: "white" })
         ] })
       ]
     }
@@ -19665,7 +20303,7 @@ var OHW_BADGE_LABEL_STYLE = {
   whiteSpace: "nowrap"
 };
 function MadeWithOhhWells() {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
     "a",
     {
       href: "https://ohhwells.com",
@@ -19675,8 +20313,8 @@ function MadeWithOhhWells() {
       "data-ohw-badge": "",
       style: OHW_BADGE_STYLE,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(OhwBrandMark, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { style: OHW_BADGE_LABEL_STYLE, children: "Made with OhhWells" })
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(OhwBrandMark, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { style: OHW_BADGE_LABEL_STYLE, children: "Made with OhhWells" })
       ]
     }
   );
@@ -19722,8 +20360,8 @@ function OhhwellsBridge() {
   const router = (0, import_navigation3.useRouter)();
   const searchParams = (0, import_navigation3.useSearchParams)();
   const isEditMode = isEditSessionActive();
-  const [bridgeRoot, setBridgeRoot] = (0, import_react18.useState)(null);
-  (0, import_react18.useEffect)(() => {
+  const [bridgeRoot, setBridgeRoot] = (0, import_react19.useState)(null);
+  (0, import_react19.useEffect)(() => {
     const figtreeFontId = "ohw-figtree-font";
     if (!document.getElementById(figtreeFontId)) {
       const preconnect1 = Object.assign(document.createElement("link"), { rel: "preconnect", href: "https://fonts.googleapis.com" });
@@ -19749,8 +20387,8 @@ function OhhwellsBridge() {
     };
   }, []);
   const subdomainFromQuery = searchParams.get("subdomain");
-  const [subdomain, setSubdomain] = (0, import_react18.useState)(() => resolveSubdomain(subdomainFromQuery));
-  (0, import_react18.useLayoutEffect)(() => {
+  const [subdomain, setSubdomain] = (0, import_react19.useState)(() => resolveSubdomain(subdomainFromQuery));
+  (0, import_react19.useLayoutEffect)(() => {
     const next = resolveSubdomain(subdomainFromQuery);
     if (next !== subdomain) setSubdomain(next);
     if (next) return;
@@ -19762,7 +20400,7 @@ function OhhwellsBridge() {
     }, 0);
     return () => window.clearTimeout(t);
   }, [subdomainFromQuery, subdomain]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!subdomainFromQuery || typeof window === "undefined") return;
     const url = new URL(window.location.href);
     if (!url.searchParams.has("subdomain")) return;
@@ -19771,45 +20409,45 @@ function OhhwellsBridge() {
   }, [subdomainFromQuery]);
   useLinkHrefGuardian(pathname, subdomain, isEditMode);
   useSavedLinkNavigation(isEditMode);
-  const postToParent2 = (0, import_react18.useCallback)((data) => {
+  const postToParent2 = (0, import_react19.useCallback)((data) => {
     if (typeof window !== "undefined" && window.parent !== window) {
       window.parent.postMessage(data, "*");
     }
   }, []);
-  const [fetchState, setFetchState] = (0, import_react18.useState)("idle");
-  const [showBranding, setShowBranding] = (0, import_react18.useState)(false);
-  const autoSaveTimers = (0, import_react18.useRef)(/* @__PURE__ */ new Map());
-  const activeElRef = (0, import_react18.useRef)(null);
-  const pointerHeldRef = (0, import_react18.useRef)(false);
-  const selectedElRef = (0, import_react18.useRef)(null);
-  const selectedHrefKeyRef = (0, import_react18.useRef)(null);
-  const selectedFooterColAttrRef = (0, import_react18.useRef)(null);
-  const originalContentRef = (0, import_react18.useRef)(null);
-  const activeStateElRef = (0, import_react18.useRef)(null);
-  const parentScrollRef = (0, import_react18.useRef)(null);
-  const visibleViewportRef = (0, import_react18.useRef)(null);
-  const [dialogPortalContainer, setDialogPortalContainer] = (0, import_react18.useState)(null);
-  const attachVisibleViewport = (0, import_react18.useCallback)((node) => {
+  const [fetchState, setFetchState] = (0, import_react19.useState)("idle");
+  const [showBranding, setShowBranding] = (0, import_react19.useState)(false);
+  const autoSaveTimers = (0, import_react19.useRef)(/* @__PURE__ */ new Map());
+  const activeElRef = (0, import_react19.useRef)(null);
+  const pointerHeldRef = (0, import_react19.useRef)(false);
+  const selectedElRef = (0, import_react19.useRef)(null);
+  const selectedHrefKeyRef = (0, import_react19.useRef)(null);
+  const selectedFooterColAttrRef = (0, import_react19.useRef)(null);
+  const originalContentRef = (0, import_react19.useRef)(null);
+  const activeStateElRef = (0, import_react19.useRef)(null);
+  const parentScrollRef = (0, import_react19.useRef)(null);
+  const visibleViewportRef = (0, import_react19.useRef)(null);
+  const [dialogPortalContainer, setDialogPortalContainer] = (0, import_react19.useState)(null);
+  const attachVisibleViewport = (0, import_react19.useCallback)((node) => {
     visibleViewportRef.current = node;
     setDialogPortalContainer(node);
     if (node) applyVisibleViewport(node, parentScrollRef.current);
   }, []);
-  const toolbarElRef = (0, import_react18.useRef)(null);
-  const glowElRef = (0, import_react18.useRef)(null);
-  const hoveredImageRef = (0, import_react18.useRef)(null);
-  const hoveredImageHasTextOverlapRef = (0, import_react18.useRef)(false);
-  const dragOverElRef = (0, import_react18.useRef)(null);
-  const [mediaHover, setMediaHover] = (0, import_react18.useState)(null);
-  const [selectedAiSectionId, setSelectedAiSectionId] = (0, import_react18.useState)(null);
-  const selectedAiSectionIdRef = (0, import_react18.useRef)(null);
-  const handleAiSectionSelectionChange = (0, import_react18.useCallback)((id) => {
+  const toolbarElRef = (0, import_react19.useRef)(null);
+  const glowElRef = (0, import_react19.useRef)(null);
+  const hoveredImageRef = (0, import_react19.useRef)(null);
+  const hoveredImageHasTextOverlapRef = (0, import_react19.useRef)(false);
+  const dragOverElRef = (0, import_react19.useRef)(null);
+  const [mediaHover, setMediaHover] = (0, import_react19.useState)(null);
+  const [selectedAiSectionId, setSelectedAiSectionId] = (0, import_react19.useState)(null);
+  const selectedAiSectionIdRef = (0, import_react19.useRef)(null);
+  const handleAiSectionSelectionChange = (0, import_react19.useCallback)((id) => {
     selectedAiSectionIdRef.current = id;
     setSelectedAiSectionId(id);
   }, []);
-  const [selectedMedia, setSelectedMedia] = (0, import_react18.useState)(null);
-  const selectedMediaElRef = (0, import_react18.useRef)(null);
-  const mediaKeyDropTokenRef = (0, import_react18.useRef)(0);
-  const clearMediaSelection = (0, import_react18.useCallback)(() => {
+  const [selectedMedia, setSelectedMedia] = (0, import_react19.useState)(null);
+  const selectedMediaElRef = (0, import_react19.useRef)(null);
+  const mediaKeyDropTokenRef = (0, import_react19.useRef)(0);
+  const clearMediaSelection = (0, import_react19.useCallback)(() => {
     const prev = selectedMediaElRef.current;
     selectedMediaElRef.current = null;
     setSelectedMedia(null);
@@ -19834,9 +20472,9 @@ function OhhwellsBridge() {
       window.postMessage({ type: "ow:media-key-drop", token }, "*");
     }
   }, []);
-  const clearMediaSelectionRef = (0, import_react18.useRef)(clearMediaSelection);
+  const clearMediaSelectionRef = (0, import_react19.useRef)(clearMediaSelection);
   clearMediaSelectionRef.current = clearMediaSelection;
-  const selectMediaElement = (0, import_react18.useCallback)((el) => {
+  const selectMediaElement = (0, import_react19.useCallback)((el) => {
     const r2 = el.getBoundingClientRect();
     const video = el.dataset.ohwEditable === "video" ? el.querySelector("video") : null;
     selectedMediaElRef.current = el;
@@ -19860,9 +20498,9 @@ function OhhwellsBridge() {
       keyLabel: el.dataset.ohwEditable === "video" ? "Video" : el.dataset.ohwEditable === "bg-image" ? "Background" : "Image"
     });
   }, []);
-  const selectMediaElementRef = (0, import_react18.useRef)(selectMediaElement);
+  const selectMediaElementRef = (0, import_react19.useRef)(selectMediaElement);
   selectMediaElementRef.current = selectMediaElement;
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!selectedMedia) return;
     const update = () => {
       const el = selectedMediaElRef.current;
@@ -19882,55 +20520,55 @@ function OhhwellsBridge() {
       window.removeEventListener("resize", update);
     };
   }, [selectedMedia !== null]);
-  const [carouselHover, setCarouselHover] = (0, import_react18.useState)(null);
-  const [uploadingRects, setUploadingRects] = (0, import_react18.useState)({});
-  const hoveredGapRef = (0, import_react18.useRef)(null);
-  const imageUnhoverTimerRef = (0, import_react18.useRef)(null);
-  const imageShowTimerRef = (0, import_react18.useRef)(null);
-  const editStylesRef = (0, import_react18.useRef)(null);
-  const activateRef = (0, import_react18.useRef)(() => {
+  const [carouselHover, setCarouselHover] = (0, import_react19.useState)(null);
+  const [uploadingRects, setUploadingRects] = (0, import_react19.useState)({});
+  const hoveredGapRef = (0, import_react19.useRef)(null);
+  const imageUnhoverTimerRef = (0, import_react19.useRef)(null);
+  const imageShowTimerRef = (0, import_react19.useRef)(null);
+  const editStylesRef = (0, import_react19.useRef)(null);
+  const activateRef = (0, import_react19.useRef)(() => {
   });
-  const deactivateRef = (0, import_react18.useRef)(() => {
+  const deactivateRef = (0, import_react19.useRef)(() => {
   });
-  const selectRef = (0, import_react18.useRef)(() => {
+  const selectRef = (0, import_react19.useRef)(() => {
   });
-  const selectFrameRef = (0, import_react18.useRef)(() => {
+  const selectFrameRef = (0, import_react19.useRef)(() => {
   });
-  const selectLogoRef = (0, import_react18.useRef)(() => {
+  const selectLogoRef = (0, import_react19.useRef)(() => {
   });
-  const openLogoSizePanelRef = (0, import_react18.useRef)(() => {
+  const openLogoSizePanelRef = (0, import_react19.useRef)(() => {
   });
-  const deselectRef = (0, import_react18.useRef)(() => {
+  const deselectRef = (0, import_react19.useRef)(() => {
   });
-  const closeFloatingPanelOnlyRef = (0, import_react18.useRef)(() => {
+  const closeFloatingPanelOnlyRef = (0, import_react19.useRef)(() => {
   });
-  const reselectNavigationItemRef = (0, import_react18.useRef)(() => {
+  const reselectNavigationItemRef = (0, import_react19.useRef)(() => {
   });
-  const commitNavigationTextEditRef = (0, import_react18.useRef)(() => {
+  const commitNavigationTextEditRef = (0, import_react19.useRef)(() => {
   });
-  const handleDeleteSelectedRef = (0, import_react18.useRef)(() => false);
-  const runPendingDeleteUndoRef = (0, import_react18.useRef)(() => false);
-  const isFooterFrameSelectionRef = (0, import_react18.useRef)(false);
-  const refreshActiveCommandsRef = (0, import_react18.useRef)(() => {
+  const handleDeleteSelectedRef = (0, import_react19.useRef)(() => false);
+  const runPendingDeleteUndoRef = (0, import_react19.useRef)(() => false);
+  const isFooterFrameSelectionRef = (0, import_react19.useRef)(false);
+  const refreshActiveCommandsRef = (0, import_react19.useRef)(() => {
   });
-  const postToParentRef = (0, import_react18.useRef)(postToParent2);
+  const postToParentRef = (0, import_react19.useRef)(postToParent2);
   postToParentRef.current = postToParent2;
-  const aiSectionApiRef = (0, import_react18.useRef)(null);
-  const applyTreeLocalRef = (0, import_react18.useRef)(null);
-  const sectionsLoadedRef = (0, import_react18.useRef)(false);
-  const pendingScheduleConfigRequests = (0, import_react18.useRef)([]);
-  const [toolbarRect, setToolbarRect] = (0, import_react18.useState)(null);
-  const [formPickRect, setFormPickRect] = (0, import_react18.useState)(null);
-  const formPickElRef = (0, import_react18.useRef)(null);
-  const [formViewState, setFormViewStateUi] = (0, import_react18.useState)("default");
-  const [formPickCount, setFormPickCount] = (0, import_react18.useState)(null);
-  const [formHoverRect, setFormHoverRect] = (0, import_react18.useState)(null);
-  const formHoverElRef = (0, import_react18.useRef)(null);
-  const [fieldPickRect, setFieldPickRect] = (0, import_react18.useState)(null);
-  const fieldPickElRef = (0, import_react18.useRef)(null);
-  const [fieldPickState, setFieldPickState] = (0, import_react18.useState)(null);
-  const [fieldTypePickerOpen, setFieldTypePickerOpen] = (0, import_react18.useState)(false);
-  const clearFormPick = (0, import_react18.useCallback)(() => {
+  const aiSectionApiRef = (0, import_react19.useRef)(null);
+  const applyTreeLocalRef = (0, import_react19.useRef)(null);
+  const sectionsLoadedRef = (0, import_react19.useRef)(false);
+  const pendingScheduleConfigRequests = (0, import_react19.useRef)([]);
+  const [toolbarRect, setToolbarRect] = (0, import_react19.useState)(null);
+  const [formPickRect, setFormPickRect] = (0, import_react19.useState)(null);
+  const formPickElRef = (0, import_react19.useRef)(null);
+  const [formViewState, setFormViewStateUi] = (0, import_react19.useState)("default");
+  const [formPickCount, setFormPickCount] = (0, import_react19.useState)(null);
+  const [formHoverRect, setFormHoverRect] = (0, import_react19.useState)(null);
+  const formHoverElRef = (0, import_react19.useRef)(null);
+  const [fieldPickRect, setFieldPickRect] = (0, import_react19.useState)(null);
+  const fieldPickElRef = (0, import_react19.useRef)(null);
+  const [fieldPickState, setFieldPickState] = (0, import_react19.useState)(null);
+  const [fieldTypePickerOpen, setFieldTypePickerOpen] = (0, import_react19.useState)(false);
+  const clearFormPick = (0, import_react19.useCallback)(() => {
     const form = formPickElRef.current;
     const editing = fieldPickElRef.current;
     if (commitPlaceholderEdit(editing) && editing) {
@@ -19950,7 +20588,7 @@ function OhhwellsBridge() {
     formPickElRef.current = null;
     setFormPickRect(null);
   }, []);
-  const clearFieldPick = (0, import_react18.useCallback)(() => {
+  const clearFieldPick = (0, import_react19.useCallback)(() => {
     const wrapper = fieldPickElRef.current;
     if (commitPlaceholderEdit(wrapper) && wrapper) {
       const form = wrapper.closest('[data-ohw-editable="form"]');
@@ -19960,9 +20598,9 @@ function OhhwellsBridge() {
     setFieldPickRect(null);
     setFieldPickState(null);
   }, []);
-  const persistFieldsRef = (0, import_react18.useRef)(() => {
+  const persistFieldsRef = (0, import_react19.useRef)(() => {
   });
-  const persistFields = (0, import_react18.useCallback)(
+  const persistFields = (0, import_react19.useCallback)(
     (form) => {
       const key = formKeyOf(form);
       if (!key) return;
@@ -19973,7 +20611,7 @@ function OhhwellsBridge() {
     []
   );
   persistFieldsRef.current = persistFields;
-  const selectField = (0, import_react18.useCallback)((wrapper) => {
+  const selectField = (0, import_react19.useCallback)((wrapper) => {
     if (fieldPickElRef.current && fieldPickElRef.current !== wrapper) {
       commitPlaceholderEdit(fieldPickElRef.current);
     }
@@ -19986,7 +20624,7 @@ function OhhwellsBridge() {
     setFieldPickState({ type: fieldTypeOf(wrapper), required: isFieldRequired(wrapper) });
     setFieldTypePickerOpen(false);
   }, []);
-  const withSelectedField = (0, import_react18.useCallback)(
+  const withSelectedField = (0, import_react19.useCallback)(
     (run) => {
       const wrapper = fieldPickElRef.current;
       const form = formPickElRef.current;
@@ -19999,28 +20637,28 @@ function OhhwellsBridge() {
     },
     [persistFields]
   );
-  const handleFieldTypeChange = (0, import_react18.useCallback)(
+  const handleFieldTypeChange = (0, import_react19.useCallback)(
     (type) => withSelectedField((_form, wrapper) => {
       applyFieldType(wrapper, type);
       selectField(wrapper);
     }),
     [selectField, withSelectedField]
   );
-  const handleFieldRequiredToggle = (0, import_react18.useCallback)(
+  const handleFieldRequiredToggle = (0, import_react19.useCallback)(
     () => withSelectedField((_form, wrapper) => {
       setFieldRequired(wrapper, !isFieldRequired(wrapper));
       selectField(wrapper);
     }),
     [selectField, withSelectedField]
   );
-  const handleFieldDuplicate = (0, import_react18.useCallback)(
+  const handleFieldDuplicate = (0, import_react19.useCallback)(
     () => withSelectedField((form, wrapper) => {
       const copy = duplicateField(form, wrapper);
       selectField(copy);
     }),
     [selectField, withSelectedField]
   );
-  const handleFieldDelete = (0, import_react18.useCallback)(
+  const handleFieldDelete = (0, import_react19.useCallback)(
     () => withSelectedField((_form, wrapper) => {
       removeField(wrapper);
       clearFieldPick();
@@ -20028,7 +20666,7 @@ function OhhwellsBridge() {
     }),
     [clearFieldPick, withSelectedField]
   );
-  const handleAddField = (0, import_react18.useCallback)(
+  const handleAddField = (0, import_react19.useCallback)(
     (type) => {
       const form = formPickElRef.current;
       if (!form) return;
@@ -20044,8 +20682,8 @@ function OhhwellsBridge() {
     },
     [persistFields, selectField]
   );
-  const fieldDragRef = (0, import_react18.useRef)(null);
-  const buildFieldDropSlots = (0, import_react18.useCallback)((form, draggedKey) => {
+  const fieldDragRef = (0, import_react19.useRef)(null);
+  const buildFieldDropSlots = (0, import_react19.useCallback)((form, draggedKey) => {
     const others = listFieldWrappers(form).filter((el) => fieldKeyOf(el) !== draggedKey);
     const slots = others.map((el) => {
       const rect = el.getBoundingClientRect();
@@ -20058,7 +20696,7 @@ function OhhwellsBridge() {
     }
     return slots;
   }, []);
-  const handleFieldDragStart = (0, import_react18.useCallback)(() => {
+  const handleFieldDragStart = (0, import_react19.useCallback)(() => {
     const wrapper = fieldPickElRef.current;
     const form = formPickElRef.current;
     if (!wrapper || !form) return;
@@ -20067,18 +20705,18 @@ function OhhwellsBridge() {
     setFieldDragging(true);
     setFieldDropSlots(buildFieldDropSlots(form, key));
   }, [buildFieldDropSlots]);
-  const handleFieldDragEnd = (0, import_react18.useCallback)(() => {
+  const handleFieldDragEnd = (0, import_react19.useCallback)(() => {
     fieldDragRef.current = null;
     setFieldDropIndex(null);
     setFieldDropSlots([]);
     setFieldDragging(false);
   }, []);
-  const [fieldDropIndex, setFieldDropIndex] = (0, import_react18.useState)(null);
-  const [fieldDropSlots, setFieldDropSlots] = (0, import_react18.useState)([]);
-  const [fieldDragging, setFieldDragging] = (0, import_react18.useState)(false);
-  const clearFormPickRef = (0, import_react18.useRef)(clearFormPick);
+  const [fieldDropIndex, setFieldDropIndex] = (0, import_react19.useState)(null);
+  const [fieldDropSlots, setFieldDropSlots] = (0, import_react19.useState)([]);
+  const [fieldDragging, setFieldDragging] = (0, import_react19.useState)(false);
+  const clearFormPickRef = (0, import_react19.useRef)(clearFormPick);
   clearFormPickRef.current = clearFormPick;
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     const el = fieldPickElRef.current;
     if (!el || fieldPickRect === null) return;
     const observer = new ResizeObserver(() => {
@@ -20087,7 +20725,7 @@ function OhhwellsBridge() {
     observer.observe(el);
     return () => observer.disconnect();
   }, [fieldPickRect !== null, fieldPickState]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     const el = formPickElRef.current;
     if (!el || formPickRect === null) return;
     const observer = new ResizeObserver(() => {
@@ -20096,25 +20734,25 @@ function OhhwellsBridge() {
     observer.observe(el);
     return () => observer.disconnect();
   }, [formPickRect !== null, formViewState]);
-  const [toolbarVariant, setToolbarVariant] = (0, import_react18.useState)("none");
-  const toolbarVariantRef = (0, import_react18.useRef)("none");
+  const [toolbarVariant, setToolbarVariant] = (0, import_react19.useState)("none");
+  const toolbarVariantRef = (0, import_react19.useRef)("none");
   toolbarVariantRef.current = toolbarVariant;
-  const [selectedIsCta, setSelectedIsCta] = (0, import_react18.useState)(false);
-  const [selectedIsSocial, setSelectedIsSocial] = (0, import_react18.useState)(false);
-  const [selectedIsSocialsRow, setSelectedIsSocialsRow] = (0, import_react18.useState)(false);
-  const [reorderHrefKey, setReorderHrefKey] = (0, import_react18.useState)(null);
-  const [reorderDragDisabled, setReorderDragDisabled] = (0, import_react18.useState)(false);
-  const [toggleState, setToggleState] = (0, import_react18.useState)(null);
-  const [maxBadge, setMaxBadge] = (0, import_react18.useState)(null);
-  const [activeCommands, setActiveCommands] = (0, import_react18.useState)(/* @__PURE__ */ new Set());
-  const [sectionGap, setSectionGap] = (0, import_react18.useState)(null);
-  const [toolbarShowEditLink, setToolbarShowEditLink] = (0, import_react18.useState)(false);
-  const hoveredNavContainerRef = (0, import_react18.useRef)(null);
-  const [hoveredNavContainerRect, setHoveredNavContainerRect] = (0, import_react18.useState)(null);
-  const hoveredItemElRef = (0, import_react18.useRef)(null);
-  const [hoveredItemRect, setHoveredItemRect] = (0, import_react18.useState)(null);
-  const [hoveredTextRect, setHoveredTextRect] = (0, import_react18.useState)(null);
-  (0, import_react18.useEffect)(() => {
+  const [selectedIsCta, setSelectedIsCta] = (0, import_react19.useState)(false);
+  const [selectedIsSocial, setSelectedIsSocial] = (0, import_react19.useState)(false);
+  const [selectedIsSocialsRow, setSelectedIsSocialsRow] = (0, import_react19.useState)(false);
+  const [reorderHrefKey, setReorderHrefKey] = (0, import_react19.useState)(null);
+  const [reorderDragDisabled, setReorderDragDisabled] = (0, import_react19.useState)(false);
+  const [toggleState, setToggleState] = (0, import_react19.useState)(null);
+  const [maxBadge, setMaxBadge] = (0, import_react19.useState)(null);
+  const [activeCommands, setActiveCommands] = (0, import_react19.useState)(/* @__PURE__ */ new Set());
+  const [sectionGap, setSectionGap] = (0, import_react19.useState)(null);
+  const [toolbarShowEditLink, setToolbarShowEditLink] = (0, import_react19.useState)(false);
+  const hoveredNavContainerRef = (0, import_react19.useRef)(null);
+  const [hoveredNavContainerRect, setHoveredNavContainerRect] = (0, import_react19.useState)(null);
+  const hoveredItemElRef = (0, import_react19.useRef)(null);
+  const [hoveredItemRect, setHoveredItemRect] = (0, import_react19.useState)(null);
+  const [hoveredTextRect, setHoveredTextRect] = (0, import_react19.useState)(null);
+  (0, import_react19.useEffect)(() => {
     const sync = () => {
       const el = document.querySelector(
         '[data-ohw-hovered]:not([contenteditable]):not([data-ohw-href-key]):not([data-ohw-editable="form"] *)'
@@ -20158,53 +20796,53 @@ function OhhwellsBridge() {
     });
     return () => observer.disconnect();
   }, []);
-  const siblingHintElRef = (0, import_react18.useRef)(null);
-  const [siblingHintRect, setSiblingHintRect] = (0, import_react18.useState)(null);
-  const [siblingHintRects, setSiblingHintRects] = (0, import_react18.useState)([]);
-  const [isItemDragging, setIsItemDragging] = (0, import_react18.useState)(false);
-  const [isFooterFrameSelection, setIsFooterFrameSelection] = (0, import_react18.useState)(false);
+  const siblingHintElRef = (0, import_react19.useRef)(null);
+  const [siblingHintRect, setSiblingHintRect] = (0, import_react19.useState)(null);
+  const [siblingHintRects, setSiblingHintRects] = (0, import_react19.useState)([]);
+  const [isItemDragging, setIsItemDragging] = (0, import_react19.useState)(false);
+  const [isFooterFrameSelection, setIsFooterFrameSelection] = (0, import_react19.useState)(false);
   isFooterFrameSelectionRef.current = isFooterFrameSelection;
-  const [navDropdownPreviewOpen, setNavDropdownPreviewOpen] = (0, import_react18.useState)(null);
-  const [footerHeadingVisible, setFooterHeadingVisible] = (0, import_react18.useState)(null);
-  const footerDragRef = (0, import_react18.useRef)(null);
-  const [footerDropSlots, setFooterDropSlots] = (0, import_react18.useState)([]);
-  const [activeFooterDropIndex, setActiveFooterDropIndex] = (0, import_react18.useState)(null);
-  const [draggedItemRect, setDraggedItemRect] = (0, import_react18.useState)(null);
-  const footerPointerDragRef = (0, import_react18.useRef)(null);
-  const suppressNextClickRef = (0, import_react18.useRef)(false);
-  const suppressClickUntilRef = (0, import_react18.useRef)(0);
-  const [linkPopover, setLinkPopover] = (0, import_react18.useState)(null);
-  const linkPopoverSessionRef = (0, import_react18.useRef)(null);
-  const addNavAfterAnchorRef = (0, import_react18.useRef)(null);
-  const editContentRef = (0, import_react18.useRef)({});
-  const aiSectionsRef = (0, import_react18.useRef)("");
-  const brandKitRef = (0, import_react18.useRef)("");
-  const stylesRef = (0, import_react18.useRef)("");
-  const appliedDrawerRef = (0, import_react18.useRef)(null);
-  const pendingDeleteUndoRef = (0, import_react18.useRef)(null);
-  const [floatingPanel, setFloatingPanel] = (0, import_react18.useState)(null);
-  const floatingPanelOpenRef = (0, import_react18.useRef)(false);
-  const floatingPanelRef = (0, import_react18.useRef)(null);
+  const [navDropdownPreviewOpen, setNavDropdownPreviewOpen] = (0, import_react19.useState)(null);
+  const [footerHeadingVisible, setFooterHeadingVisible] = (0, import_react19.useState)(null);
+  const footerDragRef = (0, import_react19.useRef)(null);
+  const [footerDropSlots, setFooterDropSlots] = (0, import_react19.useState)([]);
+  const [activeFooterDropIndex, setActiveFooterDropIndex] = (0, import_react19.useState)(null);
+  const [draggedItemRect, setDraggedItemRect] = (0, import_react19.useState)(null);
+  const footerPointerDragRef = (0, import_react19.useRef)(null);
+  const suppressNextClickRef = (0, import_react19.useRef)(false);
+  const suppressClickUntilRef = (0, import_react19.useRef)(0);
+  const [linkPopover, setLinkPopover] = (0, import_react19.useState)(null);
+  const linkPopoverSessionRef = (0, import_react19.useRef)(null);
+  const addNavAfterAnchorRef = (0, import_react19.useRef)(null);
+  const editContentRef = (0, import_react19.useRef)({});
+  const aiSectionsRef = (0, import_react19.useRef)("");
+  const brandKitRef = (0, import_react19.useRef)("");
+  const stylesRef = (0, import_react19.useRef)("");
+  const appliedDrawerRef = (0, import_react19.useRef)(null);
+  const pendingDeleteUndoRef = (0, import_react19.useRef)(null);
+  const [floatingPanel, setFloatingPanel] = (0, import_react19.useState)(null);
+  const floatingPanelOpenRef = (0, import_react19.useRef)(false);
+  const floatingPanelRef = (0, import_react19.useRef)(null);
   floatingPanelRef.current = floatingPanel;
-  const setFloatingPanelRef = (0, import_react18.useRef)(setFloatingPanel);
-  const [floatingPanelPos, setFloatingPanelPos] = (0, import_react18.useState)(null);
-  const buttonCollectionDragRef = (0, import_react18.useRef)(null);
-  const [buttonStyleTick, setButtonStyleTick] = (0, import_react18.useState)(0);
-  const [logoSizeDraft, setLogoSizeDraft] = (0, import_react18.useState)(null);
-  const [editorViewport, setEditorViewport] = (0, import_react18.useState)("desktop");
-  const [parentScrollSnap, setParentScrollSnap] = (0, import_react18.useState)(null);
-  const [sitePages, setSitePages] = (0, import_react18.useState)([]);
-  const [sectionsByPath, setSectionsByPath] = (0, import_react18.useState)({});
-  const sectionsPrefetchGenRef = (0, import_react18.useRef)(0);
-  const setLinkPopoverRef = (0, import_react18.useRef)(setLinkPopover);
-  const linkPopoverPanelRef = (0, import_react18.useRef)(null);
-  const linkPopoverOpenRef = (0, import_react18.useRef)(false);
-  const linkPopoverGraceUntilRef = (0, import_react18.useRef)(0);
+  const setFloatingPanelRef = (0, import_react19.useRef)(setFloatingPanel);
+  const [floatingPanelPos, setFloatingPanelPos] = (0, import_react19.useState)(null);
+  const buttonCollectionDragRef = (0, import_react19.useRef)(null);
+  const [buttonStyleTick, setButtonStyleTick] = (0, import_react19.useState)(0);
+  const [logoSizeDraft, setLogoSizeDraft] = (0, import_react19.useState)(null);
+  const [editorViewport, setEditorViewport] = (0, import_react19.useState)("desktop");
+  const [parentScrollSnap, setParentScrollSnap] = (0, import_react19.useState)(null);
+  const [sitePages, setSitePages] = (0, import_react19.useState)([]);
+  const [sectionsByPath, setSectionsByPath] = (0, import_react19.useState)({});
+  const sectionsPrefetchGenRef = (0, import_react19.useRef)(0);
+  const setLinkPopoverRef = (0, import_react19.useRef)(setLinkPopover);
+  const linkPopoverPanelRef = (0, import_react19.useRef)(null);
+  const linkPopoverOpenRef = (0, import_react19.useRef)(false);
+  const linkPopoverGraceUntilRef = (0, import_react19.useRef)(0);
   setLinkPopoverRef.current = setLinkPopover;
   setFloatingPanelRef.current = setFloatingPanel;
   linkPopoverSessionRef.current = linkPopover;
   floatingPanelOpenRef.current = Boolean(floatingPanel);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     const syncViewport = () => {
       const next = window.innerWidth <= 480 ? "mobile" : "desktop";
       setEditorViewport((prev) => prev === next ? prev : next);
@@ -20213,6 +20851,16 @@ function OhhwellsBridge() {
     window.addEventListener("resize", syncViewport);
     return () => window.removeEventListener("resize", syncViewport);
   }, []);
+  (0, import_react19.useEffect)(() => {
+    setSectionOrderPersistHandler((entries) => {
+      const currentPath = window.location.pathname;
+      const merged = mergePageSectionOrder(editContentRef.current[SECTION_ORDER_KEY], currentPath, entries);
+      const text = JSON.stringify(merged);
+      editContentRef.current = { ...editContentRef.current, [SECTION_ORDER_KEY]: text };
+      postToParentRef.current({ type: "ow:change", nodes: [{ key: SECTION_ORDER_KEY, text }] });
+    });
+    return () => setSectionOrderPersistHandler(null);
+  }, []);
   const {
     navDragRef,
     navPointerDragRef,
@@ -20259,7 +20907,7 @@ function OhhwellsBridge() {
   const bumpLinkPopoverGrace = () => {
     linkPopoverGraceUntilRef.current = Date.now() + 350;
   };
-  const runSectionsPrefetch = (0, import_react18.useCallback)((pages) => {
+  const runSectionsPrefetch = (0, import_react19.useCallback)((pages) => {
     if (!isEditMode || shouldUseDevFixtures() || pages.length === 0) return;
     const gen = ++sectionsPrefetchGenRef.current;
     const paths = pages.map((p) => p.path);
@@ -20278,9 +20926,9 @@ function OhhwellsBridge() {
       );
     });
   }, [isEditMode, pathname]);
-  const runSectionsPrefetchRef = (0, import_react18.useRef)(runSectionsPrefetch);
+  const runSectionsPrefetchRef = (0, import_react19.useRef)(runSectionsPrefetch);
   runSectionsPrefetchRef.current = runSectionsPrefetch;
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!linkPopover) {
       document.documentElement.removeAttribute("data-ohw-link-popover-open");
       return;
@@ -20308,7 +20956,7 @@ function OhhwellsBridge() {
       document.documentElement.removeAttribute("data-ohw-link-popover-open");
     };
   }, [linkPopover, postToParent2]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!isEditMode) return;
     const useFixtures = shouldUseDevFixtures();
     if (useFixtures) {
@@ -20332,14 +20980,14 @@ function OhhwellsBridge() {
     if (!useFixtures) postToParent2({ type: "ow:request-site-pages" });
     return () => window.removeEventListener("message", onSitePages);
   }, [isEditMode, postToParent2]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!isEditMode || shouldUseDevFixtures()) return;
     void loadAllSectionsManifest().then((manifest) => {
       if (Object.keys(manifest).length === 0) return;
       setSectionsByPath((prev) => ({ ...manifest, ...prev }));
     });
   }, [isEditMode]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     const update = () => {
       const el = activeElRef.current ?? selectedElRef.current;
       if (el) setToolbarRect(getEditMeasureEl(el).getBoundingClientRect());
@@ -20363,10 +21011,10 @@ function OhhwellsBridge() {
       vvp.removeEventListener("resize", update);
     };
   }, []);
-  const refreshStateRules = (0, import_react18.useCallback)(() => {
+  const refreshStateRules = (0, import_react19.useCallback)(() => {
     editStylesRef.current?.forceHover && (editStylesRef.current.forceHover.textContent = collectStateRules());
   }, []);
-  const processConfigRequest = (0, import_react18.useCallback)((insertAfterVal) => {
+  const processConfigRequest = (0, import_react19.useCallback)((insertAfterVal) => {
     const tracker = getSectionsTracker();
     let entries = [];
     try {
@@ -20389,7 +21037,7 @@ function OhhwellsBridge() {
     }
     window.postMessage({ type: "ow:schedule-config", insertAfter: insertAfterVal, scheduleId: null }, "*");
   }, [isEditMode]);
-  const deactivate = (0, import_react18.useCallback)(() => {
+  const deactivate = (0, import_react19.useCallback)(() => {
     const el = activeElRef.current;
     if (!el) return;
     const isFormBlock = el.dataset.ohwEditable === "form";
@@ -20440,12 +21088,12 @@ function OhhwellsBridge() {
     setToolbarShowEditLink(false);
     postToParent2({ type: "ow:exit-edit" });
   }, [postToParent2]);
-  const clearSelectedAttr = (0, import_react18.useCallback)(() => {
+  const clearSelectedAttr = (0, import_react19.useCallback)(() => {
     document.querySelectorAll("[data-ohw-selected]").forEach((el) => {
       el.removeAttribute("data-ohw-selected");
     });
   }, []);
-  const deselect = (0, import_react18.useCallback)(() => {
+  const deselect = (0, import_react19.useCallback)(() => {
     const nestedGroup = selectedElRef.current?.closest("[data-ohw-nav-children]") != null ? selectedElRef.current.closest("[data-ohw-nav-group]") : null;
     clearSelectedAttr();
     selectedElRef.current = null;
@@ -20480,20 +21128,20 @@ function OhhwellsBridge() {
       setToolbarVariant("none");
     }
   }, [clearSelectedAttr]);
-  const markSelected = (0, import_react18.useCallback)((el) => {
+  const markSelected = (0, import_react19.useCallback)((el) => {
     clearSelectedAttr();
     el.removeAttribute("data-ohw-hovered");
     el.setAttribute("data-ohw-selected", "");
   }, [clearSelectedAttr]);
-  const isSelectedForHover = (0, import_react18.useCallback)((el) => {
+  const isSelectedForHover = (0, import_react19.useCallback)((el) => {
     if (!el) return false;
     return [selectedElRef.current, activeElRef.current].some(
       (busy) => busy && (el === busy || busy.contains(el) || el.contains(busy))
     );
   }, []);
-  const isSelectedForHoverRef = (0, import_react18.useRef)(isSelectedForHover);
+  const isSelectedForHoverRef = (0, import_react19.useRef)(isSelectedForHover);
   isSelectedForHoverRef.current = isSelectedForHover;
-  const resolveHrefKeyElement = (0, import_react18.useCallback)((hrefKey) => {
+  const resolveHrefKeyElement = (0, import_react19.useCallback)((hrefKey) => {
     if (isFooterHrefKey(hrefKey)) {
       return document.querySelector(
         `footer [data-ohw-href-key="${CSS.escape(hrefKey)}"]`
@@ -20508,7 +21156,7 @@ function OhhwellsBridge() {
       `[data-ohw-href-key="${CSS.escape(hrefKey)}"]`
     );
   }, []);
-  const resyncSelectedNavigationItem = (0, import_react18.useCallback)(() => {
+  const resyncSelectedNavigationItem = (0, import_react19.useCallback)(() => {
     const hrefKey = selectedHrefKeyRef.current;
     if (hrefKey) {
       const link = resolveHrefKeyElement(hrefKey);
@@ -20546,7 +21194,7 @@ function OhhwellsBridge() {
       );
     }
   }, [resolveHrefKeyElement]);
-  const reselectNavigationItem = (0, import_react18.useCallback)((navAnchor) => {
+  const reselectNavigationItem = (0, import_react19.useCallback)((navAnchor) => {
     selectedElRef.current = navAnchor;
     selectedHrefKeyRef.current = navAnchor.getAttribute("data-ohw-href-key");
     selectedFooterColAttrRef.current = null;
@@ -20577,7 +21225,7 @@ function OhhwellsBridge() {
     setToolbarShowEditLink(false);
     setActiveCommands(/* @__PURE__ */ new Set());
   }, [markSelected]);
-  const commitNavigationTextEdit = (0, import_react18.useCallback)((navAnchor) => {
+  const commitNavigationTextEdit = (0, import_react19.useCallback)((navAnchor) => {
     const el = activeElRef.current;
     if (!el) return;
     const key = el.dataset.ohwKey;
@@ -20610,7 +21258,7 @@ function OhhwellsBridge() {
     postToParent2({ type: "ow:exit-edit" });
     reselectNavigationItem(navAnchor);
   }, [postToParent2, reselectNavigationItem]);
-  const handleAddTopLevelNavItem = (0, import_react18.useCallback)(() => {
+  const handleAddTopLevelNavItem = (0, import_react19.useCallback)(() => {
     const items = listNavbarRootItems();
     addNavAfterAnchorRef.current = items[items.length - 1] ?? null;
     deselectRef.current();
@@ -20622,7 +21270,7 @@ function OhhwellsBridge() {
       intent: "add-nav"
     });
   }, []);
-  const maybeWarnNavLinkDropdownConflict = (0, import_react18.useCallback)(
+  const maybeWarnNavLinkDropdownConflict = (0, import_react19.useCallback)(
     (anchor) => {
       if (!isNavbarHrefKey(anchor.getAttribute("data-ohw-href-key"))) return;
       if (!navDropdownsOpenOnClick()) return;
@@ -20635,7 +21283,7 @@ function OhhwellsBridge() {
     },
     [postToParent2]
   );
-  const handleNavDropdownOpenChange = (0, import_react18.useCallback)((open) => {
+  const handleNavDropdownOpenChange = (0, import_react19.useCallback)((open) => {
     const selected = selectedElRef.current;
     if (!selected || !isNavigationItem2(selected)) return;
     if (isNestedNavChild(selected)) return;
@@ -20651,7 +21299,7 @@ function OhhwellsBridge() {
       }
     });
   }, []);
-  const handleFooterHeadingVisibleChange = (0, import_react18.useCallback)(
+  const handleFooterHeadingVisibleChange = (0, import_react19.useCallback)(
     (visible) => {
       const selected = selectedElRef.current;
       if (!selected || !isFooterFrameSelectionRef.current) return;
@@ -20675,7 +21323,7 @@ function OhhwellsBridge() {
     },
     [postToParent2]
   );
-  const enterEditOnNewItem = (0, import_react18.useCallback)((anchor) => {
+  const enterEditOnNewItem = (0, import_react19.useCallback)((anchor) => {
     const label = anchor.querySelector('[data-ohw-editable="text"]');
     if (!label) {
       selectRef.current(anchor);
@@ -20684,8 +21332,8 @@ function OhhwellsBridge() {
     setNavGroupForceOpen(anchor, true);
     activateRef.current(label);
   }, []);
-  const pendingSocialAddRef = (0, import_react18.useRef)(null);
-  const handleAddChildItem = (0, import_react18.useCallback)(() => {
+  const pendingSocialAddRef = (0, import_react19.useRef)(null);
+  const handleAddChildItem = (0, import_react19.useCallback)(() => {
     const selected = selectedElRef.current;
     if (!selected) return;
     const socialsRow = isSocialsRow(selected) ? selected : findSocialsRow(selected);
@@ -20796,7 +21444,7 @@ function OhhwellsBridge() {
       });
     });
   }, [enterEditOnNewItem, isFooterFrameSelection, maybeWarnNavLinkDropdownConflict, postToParent2]);
-  const handleAddFooterColumn = (0, import_react18.useCallback)(() => {
+  const handleAddFooterColumn = (0, import_react19.useCallback)(() => {
     if (!canAddFooterColumn()) {
       postToParent2({
         type: "ow:toast",
@@ -20817,7 +21465,7 @@ function OhhwellsBridge() {
       selectRef.current(result.firstLink);
     });
   }, [postToParent2]);
-  const clearFooterDragVisuals = (0, import_react18.useCallback)(() => {
+  const clearFooterDragVisuals = (0, import_react19.useCallback)(() => {
     footerDragRef.current = null;
     setSiblingHintRects([]);
     setFooterDropSlots([]);
@@ -20826,7 +21474,7 @@ function OhhwellsBridge() {
     setIsItemDragging(false);
     unlockFooterDragInteraction();
   }, []);
-  const refreshFooterDragVisuals = (0, import_react18.useCallback)((session, activeSlot, clientX, clientY) => {
+  const refreshFooterDragVisuals = (0, import_react19.useCallback)((session, activeSlot, clientX, clientY) => {
     const dragged = session.draggedEl;
     setDraggedItemRect(dragged.getBoundingClientRect());
     if (typeof clientX === "number" && typeof clientY === "number") {
@@ -20858,13 +21506,13 @@ function OhhwellsBridge() {
     const activeIdx = activeSlot ? slots.findIndex((s) => s.insertIndex === activeSlot.insertIndex) : -1;
     setActiveFooterDropIndex(activeIdx >= 0 ? activeIdx : null);
   }, []);
-  const refreshFooterDragVisualsRef = (0, import_react18.useRef)(refreshFooterDragVisuals);
+  const refreshFooterDragVisualsRef = (0, import_react19.useRef)(refreshFooterDragVisuals);
   refreshFooterDragVisualsRef.current = refreshFooterDragVisuals;
-  const commitFooterDragRef = (0, import_react18.useRef)(() => {
+  const commitFooterDragRef = (0, import_react19.useRef)(() => {
   });
-  const beginFooterDragRef = (0, import_react18.useRef)(() => {
+  const beginFooterDragRef = (0, import_react19.useRef)(() => {
   });
-  const beginFooterDrag = (0, import_react18.useCallback)(
+  const beginFooterDrag = (0, import_react19.useCallback)(
     (session) => {
       const rect = session.draggedEl.getBoundingClientRect();
       session.lastClientX = session.lastClientX || rect.left + rect.width / 2;
@@ -20884,7 +21532,7 @@ function OhhwellsBridge() {
     [refreshFooterDragVisuals]
   );
   beginFooterDragRef.current = beginFooterDrag;
-  const commitFooterDrag = (0, import_react18.useCallback)(
+  const commitFooterDrag = (0, import_react19.useCallback)(
     (clientX, clientY) => {
       const session = footerDragRef.current;
       if (!session) {
@@ -21013,7 +21661,7 @@ function OhhwellsBridge() {
     [clearFooterDragVisuals, resolveHrefKeyElement, resyncSelectedNavigationItem]
   );
   commitFooterDragRef.current = commitFooterDrag;
-  const startFooterLinkDrag = (0, import_react18.useCallback)(
+  const startFooterLinkDrag = (0, import_react19.useCallback)(
     (anchor, clientX, clientY, wasSelected) => {
       const hrefKey = anchor.getAttribute("data-ohw-href-key");
       if (!hrefKey) return false;
@@ -21049,7 +21697,7 @@ function OhhwellsBridge() {
     },
     [beginFooterDrag]
   );
-  const startFooterColumnDrag = (0, import_react18.useCallback)(
+  const startFooterColumnDrag = (0, import_react19.useCallback)(
     (columnEl, clientX, clientY, wasSelected) => {
       const columns = listFooterColumns();
       const idx = columns.indexOf(columnEl);
@@ -21069,7 +21717,7 @@ function OhhwellsBridge() {
     },
     [beginFooterDrag]
   );
-  const handleItemDragStart = (0, import_react18.useCallback)(
+  const handleItemDragStart = (0, import_react19.useCallback)(
     (e) => {
       const selected = selectedElRef.current;
       if (!selected) {
@@ -21098,7 +21746,7 @@ function OhhwellsBridge() {
     },
     [startFooterColumnDrag, startFooterLinkDrag, startNavLinkDrag]
   );
-  const handleItemDragEnd = (0, import_react18.useCallback)(
+  const handleItemDragEnd = (0, import_react19.useCallback)(
     (e) => {
       const collectionButton = buttonCollectionDragRef.current;
       if (collectionButton) {
@@ -21141,7 +21789,7 @@ function OhhwellsBridge() {
     },
     [commitFooterDrag, commitNavDrag, navDragRef, postToParent2]
   );
-  const handleItemChromePointerDown = (0, import_react18.useCallback)((e) => {
+  const handleItemChromePointerDown = (0, import_react19.useCallback)((e) => {
     if (e.button !== 0) return;
     const selected = selectedElRef.current;
     if (!selected) return;
@@ -21172,7 +21820,7 @@ function OhhwellsBridge() {
     }
     if (armNavPressFromChrome(selected, e.clientX, e.clientY, e.pointerId)) return;
   }, [armNavPressFromChrome]);
-  const handleItemChromeClick = (0, import_react18.useCallback)((clientX, clientY) => {
+  const handleItemChromeClick = (0, import_react19.useCallback)((clientX, clientY) => {
     if (suppressNextClickRef.current || Date.now() < suppressClickUntilRef.current) {
       suppressNextClickRef.current = false;
       return;
@@ -21185,7 +21833,7 @@ function OhhwellsBridge() {
   }, []);
   reselectNavigationItemRef.current = reselectNavigationItem;
   commitNavigationTextEditRef.current = commitNavigationTextEdit;
-  const select = (0, import_react18.useCallback)((anchor) => {
+  const select = (0, import_react19.useCallback)((anchor) => {
     if (!isNavigationItem2(anchor)) return;
     if (activeElRef.current) deactivate();
     aiSectionApiRef.current?.selectFromElement(anchor);
@@ -21245,7 +21893,7 @@ function OhhwellsBridge() {
       setLogoSizeDraft(null);
     }
   }, [deactivate, markSelected]);
-  const selectFrame = (0, import_react18.useCallback)((el) => {
+  const selectFrame = (0, import_react19.useCallback)((el) => {
     if (!isNavigationContainer(el)) return;
     if (activeElRef.current) deactivate();
     aiSectionApiRef.current?.selectFromElement(el);
@@ -21286,7 +21934,7 @@ function OhhwellsBridge() {
     setFloatingPanelPos(null);
     setLogoSizeDraft(null);
   }, [deactivate, markSelected, postToParent2]);
-  const selectLogo = (0, import_react18.useCallback)(
+  const selectLogo = (0, import_react19.useCallback)(
     (logoEl) => {
       if (activeElRef.current) deactivate();
       selectedElRef.current = logoEl;
@@ -21315,7 +21963,7 @@ function OhhwellsBridge() {
     },
     [deactivate, markSelected]
   );
-  const openLogoSizePanel = (0, import_react18.useCallback)((logoEl) => {
+  const openLogoSizePanel = (0, import_react19.useCallback)((logoEl) => {
     const placement = getLogoPlacement(logoEl);
     const draft = readLogoSizeState(editContentRef.current, placement);
     setLogoSizeDraft(draft);
@@ -21328,7 +21976,7 @@ function OhhwellsBridge() {
       placement
     });
   }, []);
-  const openSocialsDisplayPanel = (0, import_react18.useCallback)((row) => {
+  const openSocialsDisplayPanel = (0, import_react19.useCallback)((row) => {
     setParentScrollSnap(parentScrollRef.current);
     setFloatingPanel({
       key: "socials-display",
@@ -21338,7 +21986,7 @@ function OhhwellsBridge() {
       row
     });
   }, []);
-  const rememberButtonTokens = (0, import_react18.useCallback)(
+  const rememberButtonTokens = (0, import_react19.useCallback)(
     (content, tokens, nodes) => {
       if (nodes.length === 0) return content;
       const next = { ...content };
@@ -21349,7 +21997,7 @@ function OhhwellsBridge() {
     },
     [postToParent2]
   );
-  const tokensForButton = (0, import_react18.useCallback)(
+  const tokensForButton = (0, import_react19.useCallback)(
     (el, persistFallback = false) => {
       const stored = readStoredStyleTokens(editContentRef.current);
       if (stored) return stored;
@@ -21364,7 +22012,7 @@ function OhhwellsBridge() {
     },
     [rememberButtonTokens]
   );
-  const openButtonStylePanel = (0, import_react18.useCallback)(
+  const openButtonStylePanel = (0, import_react19.useCallback)(
     (anchor) => {
       const id = buttonId(anchor);
       if (!id) return;
@@ -21382,7 +22030,7 @@ function OhhwellsBridge() {
     },
     [tokensForButton]
   );
-  const applySelectedButtonStyle = (0, import_react18.useCallback)(
+  const applySelectedButtonStyle = (0, import_react19.useCallback)(
     (patch) => {
       const panel = floatingPanelRef.current;
       const id = panel?.kind === "button-style" ? panel.buttonId : null;
@@ -21400,7 +22048,7 @@ function OhhwellsBridge() {
     },
     [postToParent2]
   );
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     const onDragOver = (e) => {
       const dragged = buttonCollectionDragRef.current;
       if (!dragged) return;
@@ -21419,11 +22067,11 @@ function OhhwellsBridge() {
       document.removeEventListener("drop", onDrop);
     };
   }, []);
-  const isEditModeRef = (0, import_react18.useRef)(false);
-  const requestMissingSocialIconsRef = (0, import_react18.useRef)(() => {
+  const isEditModeRef = (0, import_react19.useRef)(false);
+  const requestMissingSocialIconsRef = (0, import_react19.useRef)(() => {
   });
-  const askedSocialIconsRef = (0, import_react18.useRef)(/* @__PURE__ */ new Set());
-  const requestMissingSocialIcons = (0, import_react18.useCallback)(() => {
+  const askedSocialIconsRef = (0, import_react19.useRef)(/* @__PURE__ */ new Set());
+  const requestMissingSocialIcons = (0, import_react19.useCallback)(() => {
     const items = Array.from(document.querySelectorAll(`[${SOCIALS_ROW_ATTR}]`)).filter((row) => socialsDisplayFor(row, editContentRef.current).icon).flatMap((row) => {
       const missing = socialsMissingIcons(row);
       listSocialItems(row).forEach((item) => ensureIconSlot(item));
@@ -21435,7 +22083,7 @@ function OhhwellsBridge() {
   }, []);
   requestMissingSocialIconsRef.current = requestMissingSocialIcons;
   isEditModeRef.current = isEditMode;
-  const changeSocialsDisplay = (0, import_react18.useCallback)(
+  const changeSocialsDisplay = (0, import_react19.useCallback)(
     (row, next) => {
       if (next.icon) {
         const missing = socialsMissingIcons(row);
@@ -21459,19 +22107,19 @@ function OhhwellsBridge() {
     },
     []
   );
-  const closeFloatingPanelOnly = (0, import_react18.useCallback)(() => {
+  const closeFloatingPanelOnly = (0, import_react19.useCallback)(() => {
     setFloatingPanel(null);
     setFloatingPanelPos(null);
     setLogoSizeDraft(null);
   }, []);
   closeFloatingPanelOnlyRef.current = closeFloatingPanelOnly;
-  const closeFloatingPanelAndDeselect = (0, import_react18.useCallback)(() => {
+  const closeFloatingPanelAndDeselect = (0, import_react19.useCallback)(() => {
     setFloatingPanel(null);
     setFloatingPanelPos(null);
     setLogoSizeDraft(null);
     deselectRef.current();
   }, []);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     const session = floatingPanel && floatingPanel.kind === "logo-size" ? floatingPanel : null;
     if (!session || !logoSizeDraft) {
       postToParentRef.current({ type: "ow:logo-size-panel", open: false });
@@ -21490,7 +22138,7 @@ function OhhwellsBridge() {
       max: LOGO_SIZE_MAX
     });
   }, [floatingPanel, logoSizeDraft, editorViewport]);
-  const persistLogoSizeDraft = (0, import_react18.useCallback)(
+  const persistLogoSizeDraft = (0, import_react19.useCallback)(
     (placement, draft) => {
       const desktopKey = LOGO_SIZE_DESKTOP_KEYS[placement];
       const mobileKey = LOGO_SIZE_MOBILE_KEYS[placement];
@@ -21530,7 +22178,7 @@ function OhhwellsBridge() {
     },
     [postToParent2]
   );
-  const activate = (0, import_react18.useCallback)((el, options) => {
+  const activate = (0, import_react19.useCallback)((el, options) => {
     if (activeElRef.current === el) return;
     document.querySelectorAll("[data-ohw-hovered]").forEach((hovered) => {
       hovered.removeAttribute("data-ohw-hovered");
@@ -21628,8 +22276,8 @@ function OhhwellsBridge() {
   openLogoSizePanelRef.current = openLogoSizePanel;
   deselectRef.current = deselect;
   closeFloatingPanelOnlyRef.current = closeFloatingPanelOnly;
-  const lastSiteWideScopeRef = (0, import_react18.useRef)(null);
-  (0, import_react18.useEffect)(() => {
+  const lastSiteWideScopeRef = (0, import_react19.useRef)(null);
+  (0, import_react19.useEffect)(() => {
     if (!isEditMode) {
       if (lastSiteWideScopeRef.current !== false) {
         lastSiteWideScopeRef.current = false;
@@ -21655,7 +22303,7 @@ function OhhwellsBridge() {
     isFooterFrameSelection,
     postToParent2
   ]);
-  (0, import_react18.useLayoutEffect)(() => {
+  (0, import_react19.useLayoutEffect)(() => {
     if (!subdomain || isEditMode) {
       setFetchState("done");
       return;
@@ -21778,7 +22426,7 @@ function OhhwellsBridge() {
       cancelled = true;
     };
   }, [subdomain, isEditMode]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!isEditMode) return;
     const resolveIndex = (form, clientY) => {
       const wrappers = listFieldWrappers(form).filter((el) => fieldKeyOf(el) !== fieldDragRef.current?.key);
@@ -21819,7 +22467,7 @@ function OhhwellsBridge() {
       window.removeEventListener("drop", onDrop, true);
     };
   }, [buildFieldDropSlots, isEditMode, persistFields, selectField]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!isEditMode) return;
     const mark = () => document.querySelectorAll('[data-ohw-editable="form"]').forEach((form) => {
       markFormFields(form);
@@ -21831,7 +22479,7 @@ function OhhwellsBridge() {
     });
     return () => observer.disconnect();
   }, [isEditMode, fetchState, pathname]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!isEditMode) return;
     let saveTimer = null;
     const onInput = (e) => {
@@ -21853,14 +22501,14 @@ function OhhwellsBridge() {
     document.addEventListener("input", onInput, true);
     return () => document.removeEventListener("input", onInput, true);
   }, [isEditMode, persistFields]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (isEditMode || fetchState !== "done") return;
     const content = contentCache.get(subdomain) ?? {};
     document.querySelectorAll('[data-ohw-editable="form"]').forEach((form) => {
       reconcileFieldsFromContent(form, content);
     });
   }, [isEditMode, fetchState, subdomain]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!isEditMode) return;
     const swallow = (e) => {
       const target = e.target;
@@ -21869,14 +22517,14 @@ function OhhwellsBridge() {
     document.addEventListener("submit", swallow, true);
     return () => document.removeEventListener("submit", swallow, true);
   }, [isEditMode]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (isEditMode || fetchState !== "done") return;
     console.log("env", process.env.NEXT_PUBLIC_FLOWOPS_API_URL);
     const apiUrl = process.env.NEXT_PUBLIC_FLOWOPS_API_URL ?? "https://flowops-backend-staging-2yfdh7pwpq-as.a.run.app";
     console.log({ apiUrl, subdomain });
     bindPublishedForms(apiUrl, subdomain, contentCache.get(subdomain) ?? {});
   }, [isEditMode, fetchState, subdomain]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!subdomain || isEditMode) return;
     let debounceTimer = null;
     let observer = null;
@@ -21978,16 +22626,16 @@ function OhhwellsBridge() {
       if (debounceTimer) clearTimeout(debounceTimer);
     };
   }, [subdomain, isEditMode, pathname]);
-  (0, import_react18.useLayoutEffect)(() => {
+  (0, import_react19.useLayoutEffect)(() => {
     const el = document.getElementById("ohw-loader");
     if (!el) return;
     const visible = Boolean(subdomain) && fetchState !== "done";
     el.style.display = visible ? "flex" : "none";
   }, [subdomain, fetchState]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     postToParent2({ type: "ow:navigation", path: pathname });
   }, [pathname, postToParent2]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!subdomain || isEditMode) return;
     const content = contentCache.get(subdomain);
     if (!content) return;
@@ -22003,7 +22651,7 @@ function OhhwellsBridge() {
       applyAiSectionsToDom(parseAiSectionsState(content[AI_SECTIONS_KEY]));
     }
   }, [pathname, subdomain, isEditMode]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!isEditMode) return;
     if (linkPopoverSessionRef.current?.intent === "add-nav") return;
     if (document.querySelector("[data-ohw-section-picker]")) return;
@@ -22011,11 +22659,11 @@ function OhhwellsBridge() {
     deselectRef.current();
     deactivateRef.current();
   }, [pathname, isEditMode]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!isEditMode) return;
     initSectionInstancesFromContent(editContentRef.current, pathname);
   }, [pathname, isEditMode]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!isEditMode) return;
     const observer = new MutationObserver(() => {
       const drawer = document.querySelector("[data-ohw-nav-drawer]");
@@ -22026,7 +22674,7 @@ function OhhwellsBridge() {
     observer.observe(document.body, { childList: true, subtree: true });
     return () => observer.disconnect();
   }, [isEditMode, pathname]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     const contentForNav = () => {
       if (isEditMode) return editContentRef.current;
       if (!subdomain) return {};
@@ -22099,7 +22747,7 @@ function OhhwellsBridge() {
       observer?.disconnect();
     };
   }, [isEditMode, pathname, subdomain, fetchState, resyncSelectedNavigationItem]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!isEditMode) return;
     let applying = false;
     let rafId = null;
@@ -22137,7 +22785,7 @@ function OhhwellsBridge() {
       observer.disconnect();
     };
   }, [isEditMode, pathname]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!isEditMode) return;
     let lastPosted = 0;
     const measure = () => {
@@ -22166,7 +22814,7 @@ function OhhwellsBridge() {
       ro.disconnect();
     };
   }, [pathname, isEditMode, postToParent2]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!subdomainFromQuery || isEditMode) return;
     const handleClick = (e) => {
       const anchor = e.target.closest("a");
@@ -22182,7 +22830,7 @@ function OhhwellsBridge() {
     document.addEventListener("click", handleClick, true);
     return () => document.removeEventListener("click", handleClick, true);
   }, [subdomainFromQuery, isEditMode, router]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!isEditMode) {
       editStylesRef.current?.base.remove();
       editStylesRef.current?.forceHover.remove();
@@ -22408,11 +23056,11 @@ function OhhwellsBridge() {
       footer [data-ohw-href-key] [data-ohw-editable][contenteditable],
       footer [data-ohw-href-key] [data-ohw-editable][contenteditable] * {
         outline: none !important;
-        caret-color: ${PRIMARY4} !important;
+        caret-color: ${PRIMARY5} !important;
         cursor: text !important;
       }
       [data-ohw-editable][contenteditable]::selection,
-      [data-ohw-editable][contenteditable] *::selection { background: ${PRIMARY4}59 !important; }
+      [data-ohw-editable][contenteditable] *::selection { background: ${PRIMARY5}59 !important; }
       [data-ohw-editable-state], [data-ohw-editable-state] * { pointer-events: none !important; }
       [data-ohw-editable-state][data-ohw-active-state] [data-ohw-editable] { pointer-events: auto !important; }
       [data-ohw-editable-state][data-ohw-active-state][data-ohw-editable] { pointer-events: auto !important; }
@@ -25260,7 +25908,7 @@ function OhhwellsBridge() {
       if (imageShowTimerRef.current) clearTimeout(imageShowTimerRef.current);
     };
   }, [isEditMode, refreshStateRules]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!isEditMode) return;
     const THRESHOLD = 10;
     const resolveWasSelected = (el) => {
@@ -25416,7 +26064,7 @@ function OhhwellsBridge() {
       unlockFooterDragInteraction();
     };
   }, [isEditMode]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     const handler = (e) => {
       if (e.data?.type !== "ow:request-schedule-config") return;
       const insertAfterVal = e.data.insertAfter;
@@ -25432,7 +26080,7 @@ function OhhwellsBridge() {
     window.addEventListener("message", handler);
     return () => window.removeEventListener("message", handler);
   }, [processConfigRequest]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!isEditMode) return;
     document.querySelectorAll("[data-ohw-active-state]").forEach((el) => {
       el.removeAttribute("data-ohw-active-state");
@@ -25468,13 +26116,13 @@ function OhhwellsBridge() {
       clearTimeout(timer);
     };
   }, [pathname, isEditMode, refreshStateRules, postToParent2]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     scrollToHashSectionWhenReady();
     const onHashChange = () => scrollToHashSectionWhenReady();
     window.addEventListener("hashchange", onHashChange);
     return () => window.removeEventListener("hashchange", onHashChange);
   }, [pathname]);
-  const handleCommand = (0, import_react18.useCallback)((cmd) => {
+  const handleCommand = (0, import_react19.useCallback)((cmd) => {
     const el = activeElRef.current;
     const selBefore = window.getSelection();
     let savedOffsets = null;
@@ -25510,7 +26158,7 @@ function OhhwellsBridge() {
     if (el) setToolbarRect(getEditMeasureEl(el).getBoundingClientRect());
     refreshActiveCommandsRef.current();
   }, []);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     const session = floatingPanel && floatingPanel.kind === "logo-size" ? floatingPanel : null;
     if (!session || !logoSizeDraft) return;
     const onPanelAction = (e) => {
@@ -25548,7 +26196,7 @@ function OhhwellsBridge() {
     window.addEventListener("message", onPanelAction);
     return () => window.removeEventListener("message", onPanelAction);
   }, [floatingPanel, logoSizeDraft, editorViewport, persistLogoSizeDraft, closeFloatingPanelAndDeselect]);
-  const handleStateChange = (0, import_react18.useCallback)((state) => {
+  const handleStateChange = (0, import_react19.useCallback)((state) => {
     if (!activeStateElRef.current) return;
     const el = activeStateElRef.current;
     if (state === "Default") {
@@ -25561,7 +26209,7 @@ function OhhwellsBridge() {
     }
     setToggleState((prev) => prev ? { ...prev, activeState: state } : null);
   }, [deactivate]);
-  const reselectAfterLinkPopover = (0, import_react18.useCallback)(
+  const reselectAfterLinkPopover = (0, import_react19.useCallback)(
     (hrefKey) => {
       requestAnimationFrame(() => {
         const el = resolveHrefKeyElement(hrefKey);
@@ -25570,7 +26218,7 @@ function OhhwellsBridge() {
     },
     [resolveHrefKeyElement]
   );
-  const closeLinkPopover = (0, import_react18.useCallback)(() => {
+  const closeLinkPopover = (0, import_react19.useCallback)(() => {
     const session = linkPopoverSessionRef.current;
     addNavAfterAnchorRef.current = null;
     setLinkPopover(null);
@@ -25578,9 +26226,9 @@ function OhhwellsBridge() {
       reselectAfterLinkPopover(session.key);
     }
   }, [reselectAfterLinkPopover]);
-  const closeLinkPopoverRef = (0, import_react18.useRef)(closeLinkPopover);
+  const closeLinkPopoverRef = (0, import_react19.useRef)(closeLinkPopover);
   closeLinkPopoverRef.current = closeLinkPopover;
-  const openLinkPopoverForActive = (0, import_react18.useCallback)(() => {
+  const openLinkPopoverForActive = (0, import_react19.useCallback)(() => {
     const hrefCtx = getHrefKeyFromElement(activeElRef.current);
     if (!hrefCtx) return;
     bumpLinkPopoverGrace();
@@ -25591,7 +26239,7 @@ function OhhwellsBridge() {
     });
     deactivate();
   }, [deactivate]);
-  const openLinkPopoverForSelected = (0, import_react18.useCallback)(() => {
+  const openLinkPopoverForSelected = (0, import_react19.useCallback)(() => {
     const anchor = selectedElRef.current;
     if (!anchor) return;
     const key = anchor.getAttribute("data-ohw-href-key");
@@ -25608,7 +26256,7 @@ function OhhwellsBridge() {
     });
     deselect();
   }, [deselect]);
-  const handleSelectParent = (0, import_react18.useCallback)(() => {
+  const handleSelectParent = (0, import_react19.useCallback)(() => {
     const selected = selectedElRef.current;
     if (!selected) return;
     if (toolbarVariantRef.current === "select-frame") {
@@ -25635,7 +26283,7 @@ function OhhwellsBridge() {
     }
     deselectRef.current();
   }, []);
-  const handleDuplicateSelected = (0, import_react18.useCallback)(() => {
+  const handleDuplicateSelected = (0, import_react19.useCallback)(() => {
     const selected = selectedElRef.current;
     if (!selected || !isNavigationItem2(selected)) return;
     if (isCtaButton(selected)) {
@@ -25798,7 +26446,7 @@ function OhhwellsBridge() {
       });
     }
   }, [postToParent2, tokensForButton]);
-  const runPendingDeleteUndo = (0, import_react18.useCallback)(() => {
+  const runPendingDeleteUndo = (0, import_react19.useCallback)(() => {
     const pending = pendingDeleteUndoRef.current;
     if (!pending) return false;
     pendingDeleteUndoRef.current = null;
@@ -25806,7 +26454,7 @@ function OhhwellsBridge() {
     enforceLinkHrefs();
     return true;
   }, []);
-  const handleDeleteSelected = (0, import_react18.useCallback)(() => {
+  const handleDeleteSelected = (0, import_react19.useCallback)(() => {
     const selected = selectedElRef.current;
     if (!selected) return false;
     if (isCtaButton(selected)) {
@@ -25859,7 +26507,7 @@ function OhhwellsBridge() {
   }, [postToParent2]);
   handleDeleteSelectedRef.current = handleDeleteSelected;
   runPendingDeleteUndoRef.current = runPendingDeleteUndo;
-  const handleLinkPopoverSubmit = (0, import_react18.useCallback)(
+  const handleLinkPopoverSubmit = (0, import_react19.useCallback)(
     (target) => {
       const session = linkPopoverSessionRef.current;
       if (!session) return;
@@ -25925,14 +26573,14 @@ function OhhwellsBridge() {
   const showEditLink = toolbarShowEditLink;
   const currentSections = sectionsByPath[pathname] ?? [];
   linkPopoverOpenRef.current = linkPopover !== null;
-  const handleMediaSelect = (0, import_react18.useCallback)((key) => {
+  const handleMediaSelect = (0, import_react19.useCallback)((key) => {
     const el = hoveredImageRef.current?.dataset.ohwKey === key ? hoveredImageRef.current : Array.from(document.querySelectorAll(MEDIA_SELECTOR)).find(
       (m) => (m.dataset.ohwKey ?? "") === key
     ) ?? null;
     if (!el) return;
     selectMediaElementRef.current(el);
   }, []);
-  const handleMediaReplace = (0, import_react18.useCallback)(
+  const handleMediaReplace = (0, import_react19.useCallback)(
     (key) => {
       postToParent2({
         type: "ow:image-pick",
@@ -25942,13 +26590,13 @@ function OhhwellsBridge() {
     },
     [postToParent2, mediaHover?.elementType, selectedMedia?.elementType]
   );
-  const handleEditCarousel = (0, import_react18.useCallback)(
+  const handleEditCarousel = (0, import_react19.useCallback)(
     (key) => {
       postToParent2({ type: "ow:carousel-open", key, images: readCarouselValue(key) });
     },
     [postToParent2]
   );
-  const handleMediaFadeOutComplete = (0, import_react18.useCallback)((key) => {
+  const handleMediaFadeOutComplete = (0, import_react19.useCallback)((key) => {
     setUploadingRects((prev) => {
       if (!(key in prev)) return prev;
       const next = { ...prev };
@@ -25956,7 +26604,7 @@ function OhhwellsBridge() {
       return next;
     });
   }, []);
-  const handleVideoSettingsChange = (0, import_react18.useCallback)(
+  const handleVideoSettingsChange = (0, import_react19.useCallback)(
     (key, settings) => {
       document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
         const video = getVideoEl2(el);
@@ -25978,14 +26626,14 @@ function OhhwellsBridge() {
     },
     [postToParent2]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { id: "ohw-loader", suppressHydrationWarning: true, style: { ...OHW_LOADER_STYLE, display: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(OhwLoaderSpinner, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("script", { suppressHydrationWarning: true, dangerouslySetInnerHTML: { __html: OHW_LOADER_PREHYDRATE_SCRIPT } }),
-    subdomain && !isEditMode && showBranding && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(MadeWithOhhWells, {}),
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { id: "ohw-loader", suppressHydrationWarning: true, style: { ...OHW_LOADER_STYLE, display: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(OhwLoaderSpinner, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("script", { suppressHydrationWarning: true, dangerouslySetInnerHTML: { __html: OHW_LOADER_PREHYDRATE_SCRIPT } }),
+    subdomain && !isEditMode && showBranding && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(MadeWithOhhWells, {}),
     bridgeRoot ? (0, import_react_dom5.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { ref: attachVisibleViewport, "data-ohw-visible-viewport": "", "aria-hidden": true }),
-        isEditMode && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { ref: attachVisibleViewport, "data-ohw-visible-viewport": "", "aria-hidden": true }),
+        isEditMode && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           AiSectionOverlay,
           {
             postToParent: postToParent2,
@@ -25993,7 +26641,7 @@ function OhhwellsBridge() {
             onSelectionChange: handleAiSectionSelectionChange
           }
         ),
-        isEditMode && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        isEditMode && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           AiPricingCardOverlay,
           {
             postToParent: postToParent2,
@@ -26001,12 +26649,20 @@ function OhhwellsBridge() {
             applyTreeLocalRef
           }
         ),
-        isSectionDragging && sectionDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        isEditMode && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          AiMediaStripOverlay,
+          {
+            postToParent: postToParent2,
+            aiSectionsRef,
+            applyTreeLocalRef
+          }
+        ),
+        isSectionDragging && sectionDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           "div",
           {
             className: "pointer-events-none fixed z-2147483646",
             style: { left: slot.left, top: slot.y, width: slot.width, height: 3, transform: "translateY(-50%)" },
-            children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
               DropIndicator,
               {
                 direction: "horizontal",
@@ -26017,7 +26673,7 @@ function OhhwellsBridge() {
           },
           `section-drop-${slot.insertIndex}-${i}`
         )),
-        Object.entries(uploadingRects).map(([key, { rect, fadingOut }]) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        Object.entries(uploadingRects).map(([key, { rect, fadingOut }]) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           MediaOverlay,
           {
             hover: { key, rect, elementType: "image", isDragOver: false, hasTextOverlap: false },
@@ -26028,7 +26684,7 @@ function OhhwellsBridge() {
           },
           `uploading-${key}`
         )),
-        mediaHover && !(mediaHover.key in uploadingRects) && mediaHover.key !== selectedMedia?.key && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        mediaHover && !(mediaHover.key in uploadingRects) && mediaHover.key !== selectedMedia?.key && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           MediaOverlay,
           {
             hover: mediaHover,
@@ -26039,7 +26695,7 @@ function OhhwellsBridge() {
             onVideoSettingsChange: handleVideoSettingsChange
           }
         ),
-        selectedMedia && !(selectedMedia.key in uploadingRects) && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        selectedMedia && !(selectedMedia.key in uploadingRects) && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           MediaOverlay,
           {
             hover: selectedMedia,
@@ -26051,7 +26707,7 @@ function OhhwellsBridge() {
             onVideoSettingsChange: handleVideoSettingsChange
           }
         ),
-        carouselHover && !linkPopover && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        carouselHover && !linkPopover && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           CarouselOverlay,
           {
             hover: carouselHover,
@@ -26059,10 +26715,10 @@ function OhhwellsBridge() {
             cueOnly: !!carouselHover.fullBleedSectionId && carouselHover.fullBleedSectionId !== selectedAiSectionId
           }
         ),
-        siblingHintRect && !linkPopover && !isItemDragging && siblingHintRects.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ItemInteractionLayer, { rect: siblingHintRect, state: "sibling-hint" }),
-        siblingHintRects.length > 0 && !linkPopover && !isItemDragging && siblingHintRects.map((rect, i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ItemInteractionLayer, { rect, state: "sibling-hint" }, `sibling-hint-${i}`)),
-        isItemDragging && draggedItemRect && selectedElRef.current !== footerDragRef.current?.draggedEl && selectedElRef.current !== navDragRef.current?.draggedEl && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ItemInteractionLayer, { rect: draggedItemRect, state: "dragging" }),
-        isItemDragging && footerDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        siblingHintRect && !linkPopover && !isItemDragging && siblingHintRects.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ItemInteractionLayer, { rect: siblingHintRect, state: "sibling-hint" }),
+        siblingHintRects.length > 0 && !linkPopover && !isItemDragging && siblingHintRects.map((rect, i) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ItemInteractionLayer, { rect, state: "sibling-hint" }, `sibling-hint-${i}`)),
+        isItemDragging && draggedItemRect && selectedElRef.current !== footerDragRef.current?.draggedEl && selectedElRef.current !== navDragRef.current?.draggedEl && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ItemInteractionLayer, { rect: draggedItemRect, state: "dragging" }),
+        isItemDragging && footerDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           "div",
           {
             className: "pointer-events-none fixed z-2147483646",
@@ -26072,7 +26728,7 @@ function OhhwellsBridge() {
               width: slot.width,
               height: slot.height
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
               DropIndicator,
               {
                 direction: slot.direction,
@@ -26083,7 +26739,7 @@ function OhhwellsBridge() {
           },
           `footer-drop-${slot.direction}-${slot.columnIndex}-${slot.insertIndex}-${i}`
         )),
-        isItemDragging && navDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        isItemDragging && navDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           "div",
           {
             className: "pointer-events-none fixed z-2147483646",
@@ -26093,7 +26749,7 @@ function OhhwellsBridge() {
               width: slot.width,
               height: slot.height
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
               DropIndicator,
               {
                 direction: slot.direction,
@@ -26104,10 +26760,10 @@ function OhhwellsBridge() {
           },
           `nav-drop-${slot.direction}-${slot.parentId ?? "root"}-${slot.insertIndex}-${i}`
         )),
-        hoveredNavContainerRect && (toolbarVariant !== "select-frame" || isFooterFrameSelection) && !linkPopover && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ItemInteractionLayer, { rect: hoveredNavContainerRect, state: "hover" }),
-        hoveredItemRect && !linkPopover && !hoveredNavContainerRect && !isItemDragging && hoveredItemElRef.current !== selectedElRef.current && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ItemInteractionLayer, { rect: hoveredItemRect, state: "hover" }),
-        hoveredTextRect && !hoveredNavContainerRect && !hoveredItemRect && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ItemInteractionLayer, { rect: hoveredTextRect, state: "hover" }),
-        formPickRect && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        hoveredNavContainerRect && (toolbarVariant !== "select-frame" || isFooterFrameSelection) && !linkPopover && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ItemInteractionLayer, { rect: hoveredNavContainerRect, state: "hover" }),
+        hoveredItemRect && !linkPopover && !hoveredNavContainerRect && !isItemDragging && hoveredItemElRef.current !== selectedElRef.current && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ItemInteractionLayer, { rect: hoveredItemRect, state: "hover" }),
+        hoveredTextRect && !hoveredNavContainerRect && !hoveredItemRect && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ItemInteractionLayer, { rect: hoveredTextRect, state: "hover" }),
+        formPickRect && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           ItemInteractionLayer,
           {
             rect: formPickRect,
@@ -26115,13 +26771,13 @@ function OhhwellsBridge() {
             itemDragSurface: false,
             toolbarAlign: "left",
             chromeGap: 24,
-            toolbar: fieldPickRect ? void 0 : /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+            toolbar: fieldPickRect ? void 0 : /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
               "div",
               {
                 "data-ohw-form-toolbar": "",
                 className: "pointer-events-auto flex items-center gap-0.5 whitespace-nowrap rounded-lg border border-border bg-background p-1 shadow-md",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                     "button",
                     {
                       type: "button",
@@ -26129,11 +26785,11 @@ function OhhwellsBridge() {
                       className: "flex h-7 w-7 items-center justify-center rounded-md text-foreground transition-colors hover:bg-muted/80",
                       onClick: () => setFieldTypePickerOpen((open) => !open),
                       "data-ohw-add-field": "",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react19.Plus, { size: 15, "aria-hidden": true })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react20.Plus, { size: 15, "aria-hidden": true })
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "mx-0.5 h-5 w-px bg-border" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "mx-0.5 h-5 w-px bg-border" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
                     "button",
                     {
                       type: "button",
@@ -26149,11 +26805,11 @@ function OhhwellsBridge() {
                         });
                       },
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react19.Settings, { size: 14, "aria-hidden": true }),
+                        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react20.Settings, { size: 14, "aria-hidden": true }),
                         "Form settings",
                         formPickCount ? (
                           // Counter pill, per the design — not a text suffix.
-                          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                             "span",
                             {
                               "data-ohw-form-count": "",
@@ -26165,8 +26821,8 @@ function OhhwellsBridge() {
                       ]
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "mx-0.5 h-5 w-px bg-border" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex items-center rounded-md bg-muted/70 p-0.5", children: ["default", "success"].map((state) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "mx-0.5 h-5 w-px bg-border" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "flex items-center rounded-md bg-muted/70 p-0.5", children: ["default", "success"].map((state) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                     "button",
                     {
                       type: "button",
@@ -26197,7 +26853,7 @@ function OhhwellsBridge() {
             )
           }
         ),
-        formHoverRect && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        formHoverRect && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           ItemInteractionLayer,
           {
             rect: formHoverRect,
@@ -26205,7 +26861,7 @@ function OhhwellsBridge() {
             chromeGap: formHoverElRef.current && getFieldWrapper(formHoverElRef.current) ? 8 : 24
           }
         ),
-        fieldPickRect && fieldPickState && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        fieldPickRect && fieldPickState && !isItemDragging && toolbarVariant !== "rich-text" && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           ItemInteractionLayer,
           {
             rect: fieldPickRect,
@@ -26217,7 +26873,7 @@ function OhhwellsBridge() {
             dragHandleLabel: "Reorder field",
             onDragHandleDragStart: handleFieldDragStart,
             onDragHandleDragEnd: handleFieldDragEnd,
-            toolbar: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+            toolbar: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
               FormFieldToolbar,
               {
                 type: fieldPickState.type,
@@ -26230,12 +26886,12 @@ function OhhwellsBridge() {
             )
           }
         ),
-        fieldDragging ? fieldDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        fieldDragging ? fieldDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           "div",
           {
             className: "pointer-events-none fixed z-[2147483644]",
             style: { top: slot.top, left: slot.left, width: slot.width },
-            children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
               DropIndicator,
               {
                 direction: "horizontal",
@@ -26248,7 +26904,7 @@ function OhhwellsBridge() {
         )) : null,
         fieldTypePickerOpen && formPickRect ? (() => {
           const toolbar = document.querySelector("[data-ohw-form-toolbar]")?.getBoundingClientRect();
-          return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
             "div",
             {
               className: "pointer-events-none fixed z-[2147483645]",
@@ -26256,12 +26912,12 @@ function OhhwellsBridge() {
                 top: toolbar ? toolbar.bottom + 6 : formPickRect.top + 16,
                 left: toolbar ? toolbar.left : formPickRect.left + 24
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(FieldTypePicker, { onPick: handleAddField })
+              children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(FieldTypePicker, { onPick: handleAddField })
             }
           );
         })() : null,
-        toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isNavbarLinksContainer2(selectedElRef.current) && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(NavbarContainerChrome, { rect: toolbarRect, onAdd: handleAddTopLevelNavItem }),
-        toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isFooterLinksContainer(selectedElRef.current) && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isNavbarLinksContainer2(selectedElRef.current) && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(NavbarContainerChrome, { rect: toolbarRect, onAdd: handleAddTopLevelNavItem }),
+        toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isFooterLinksContainer(selectedElRef.current) && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           FooterContainerChrome,
           {
             rect: toolbarRect,
@@ -26269,7 +26925,7 @@ function OhhwellsBridge() {
             addDisabled: !canAddFooterColumn()
           }
         ),
-        toolbarRect && !linkPopover && (toolbarVariant === "link-action" || toolbarVariant === "select-frame" || toolbarVariant === "logo") && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        toolbarRect && !linkPopover && (toolbarVariant === "link-action" || toolbarVariant === "select-frame" || toolbarVariant === "logo") && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           ItemInteractionLayer,
           {
             rect: isItemDragging && draggedItemRect && (footerDragRef.current?.wasSelected || navDragRef.current?.wasSelected) ? draggedItemRect : toolbarRect,
@@ -26285,7 +26941,7 @@ function OhhwellsBridge() {
             onItemPointerDown: toolbarVariant === "logo" ? void 0 : handleItemChromePointerDown,
             onItemClick: toolbarVariant === "logo" ? void 0 : handleItemChromeClick,
             itemDragSurface: toolbarVariant !== "logo" && !isFooterFrameSelection && !selectedIsSocialsRow,
-            toolbar: toolbarVariant === "link-action" && !isItemDragging || toolbarVariant === "select-frame" && (isFooterFrameSelection || selectedIsSocialsRow) && !isItemDragging ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+            toolbar: toolbarVariant === "link-action" && !isItemDragging || toolbarVariant === "select-frame" && (isFooterFrameSelection || selectedIsSocialsRow) && !isItemDragging ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
               ItemActionToolbar,
               {
                 onEditLink: openLinkPopoverForSelected,
@@ -26336,8 +26992,8 @@ function OhhwellsBridge() {
             ) : void 0
           }
         ),
-        toolbarRect && toolbarVariant === "rich-text" && !linkPopover && !isRectOutsideClip(toolbarRect, getIframeVisibleClip(parentScrollRef.current)) && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        toolbarRect && toolbarVariant === "rich-text" && !linkPopover && !isRectOutsideClip(toolbarRect, getIframeVisibleClip(parentScrollRef.current)) && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
             EditGlowChrome,
             {
               rect: toolbarRect,
@@ -26347,7 +27003,7 @@ function OhhwellsBridge() {
               hideHandle: isItemDragging
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
             FloatingToolbar,
             {
               rect: toolbarRect,
@@ -26360,7 +27016,7 @@ function OhhwellsBridge() {
             }
           )
         ] }),
-        maxBadge && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+        maxBadge && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
           "div",
           {
             "data-ohw-max-badge": "",
@@ -26386,7 +27042,7 @@ function OhhwellsBridge() {
             ]
           }
         ),
-        toggleState && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        toggleState && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           StateToggle,
           {
             rect: toggleState.rect,
@@ -26395,15 +27051,15 @@ function OhhwellsBridge() {
             onStateChange: handleStateChange
           }
         ),
-        sectionGap && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+        sectionGap && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
           "div",
           {
             "data-ohw-section-insert-line": "",
             className: "fixed left-0 w-full z-2147483646 flex items-center pointer-events-none",
             style: { top: sectionGap.y, transform: "translateY(-50%)" },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex-1 bg-bridge-primary", style: { height: 3 } }),
-              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "flex-1 bg-bridge-primary", style: { height: 3 } }),
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                 Badge,
                 {
                   className: "px-8 py-1 bg-bridge-primary hover:bg-bridge-primary text-primary-foreground text-xs font-medium shrink-0 rounded-full cursor-pointer pointer-events-auto",
@@ -26420,11 +27076,11 @@ function OhhwellsBridge() {
                   children: "Add Section"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex-1 bg-bridge-primary", style: { height: 3 } })
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "flex-1 bg-bridge-primary", style: { height: 3 } })
             ]
           }
         ),
-        linkPopover && dialogPortalContainer ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        linkPopover && dialogPortalContainer ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           LinkPopover,
           {
             panelRef: linkPopoverPanelRef,
@@ -26441,7 +27097,7 @@ function OhhwellsBridge() {
           },
           linkPopover.key
         ) : null,
-        floatingPanel && floatingPanel.kind === "socials-display" ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        floatingPanel && floatingPanel.kind === "socials-display" ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           FloatingPanel,
           {
             open: true,
@@ -26451,7 +27107,7 @@ function OhhwellsBridge() {
             onPositionChange: setFloatingPanelPos,
             parentScroll: parentScrollSnap ?? parentScrollRef.current,
             onClose: closeFloatingPanelOnly,
-            children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
               SocialsDisplayPanel,
               {
                 display: socialsDisplayFor(floatingPanel.row, editContentRef.current),
@@ -26472,19 +27128,19 @@ function OhhwellsBridge() {
           const tokens = tokensFromButton(button);
           const current = assignmentFor(button, editContentRef.current, tokens);
           void buttonStyleTick;
-          return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
             FloatingPanel,
             {
               open: true,
               title: floatingPanel.title,
               context: floatingPanel.context,
-              icon: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react19.Brush, { className: "size-4 shrink-0", "aria-hidden": true }),
+              icon: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react20.Brush, { className: "size-4 shrink-0", "aria-hidden": true }),
               position: floatingPanelPos,
               onPositionChange: setFloatingPanelPos,
               parentScroll: parentScrollSnap ?? parentScrollRef.current,
               onClose: closeFloatingPanelOnly,
               bodyClassName: "gap-5",
-              children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                 ButtonStylePanel,
                 {
                   variants: tokens.variants,
@@ -26512,10 +27168,10 @@ function OhhwellsBridge() {
 
 // src/ui/EmptySection.tsx
 var import_link = __toESM(require("next/link"), 1);
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 function EmptySection({ title, homeHref = "/", eyebrowKey, titleKey, subtitleKey }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       "p",
       {
         style: {
@@ -26527,10 +27183,10 @@ function EmptySection({ title, homeHref = "/", eyebrowKey, titleKey, subtitleKey
           color: "var(--brand-accent)",
           marginBottom: "1.5rem"
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_link.default, { href: homeHref, style: { color: "inherit" }, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { ...eyebrowKey ? { "data-ohw-editable": "text", "data-ohw-key": eyebrowKey } : {}, children: "Home" }) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_link.default, { href: homeHref, style: { color: "inherit" }, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { ...eyebrowKey ? { "data-ohw-editable": "text", "data-ohw-key": eyebrowKey } : {}, children: "Home" }) })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       "h1",
       {
         style: {
@@ -26545,7 +27201,7 @@ function EmptySection({ title, homeHref = "/", eyebrowKey, titleKey, subtitleKey
         children: title
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       "p",
       {
         style: {