@ohhwells/bridge 0.1.121 → 0.1.122

package/dist/index.cjs

@@ -598,9 +598,9 @@ function styleSheetCss() {
     );
   }
   const pad = { tight: 40, balanced: 64, airy: 96 };
-  for (const [spacing, px] of Object.entries(pad)) {
+  for (const [spacing, px2] of Object.entries(pad)) {
     rules.push(
-      `[data-ohw-style-spacing="${spacing}"] { padding-top: ${px}px !important; padding-bottom: ${px}px !important; }`
+      `[data-ohw-style-spacing="${spacing}"] { padding-top: ${px2}px !important; padding-bottom: ${px2}px !important; }`
     );
   }
   rules.push(
@@ -3167,12 +3167,12 @@ function deriveTemplateButtonStyle() {
     cs.borderBottomLeftRadius
   ].map((v) => v || "0px");
   const radius = corners.every((v) => v === corners[0]) ? corners[0] : corners.join(" ");
-  const px = (v) => parseFloat(v) || 0;
-  const lineHeight = px(cs.lineHeight) || px(cs.fontSize) * 1.2;
-  const contentH = btn.getBoundingClientRect().height - px(cs.borderTopWidth) - px(cs.borderBottomWidth);
+  const px2 = (v) => parseFloat(v) || 0;
+  const lineHeight = px2(cs.lineHeight) || px2(cs.fontSize) * 1.2;
+  const contentH = btn.getBoundingClientRect().height - px2(cs.borderTopWidth) - px2(cs.borderBottomWidth);
   const impliedY = Math.round(Math.max(0, (contentH - lineHeight) / 2));
-  const padY = Math.max(px(cs.paddingTop), px(cs.paddingBottom), impliedY);
-  const padX = Math.max(px(cs.paddingLeft), px(cs.paddingRight));
+  const padY = Math.max(px2(cs.paddingTop), px2(cs.paddingBottom), impliedY);
+  const padX = Math.max(px2(cs.paddingLeft), px2(cs.paddingRight));
   return {
     radius: radius || "10px",
     padding: `${padY}px ${padX}px`,
@@ -8089,6 +8089,14 @@ function ItemActionToolbar({
             e.preventDefault();
             e.stopPropagation();
             onStyle?.();
+          },
+          // Same as Edit link: mousedown opens the panel and remounts this toolbar
+          // (styleActive flips). Without stopping click, the gesture lands on whatever
+          // is now under the cursor — navbar CTAs park the toolbar below the button, so
+          // that miss deselects and the panel closes as soon as it opens.
+          onClick: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
           }
         },
         children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react3.Brush, { className: "size-4 shrink-0", "aria-hidden": true })
@@ -8411,20 +8419,32 @@ function ItemInteractionLayer({
   itemDragSurface = true,
   chromeGap,
   toolbarAlign = "center",
+  hidden = false,
   className
 }) {
+  const localRef = (0, import_react7.useRef)(null);
+  (0, import_react7.useLayoutEffect)(() => {
+    const node = localRef.current;
+    if (!node) return;
+    node.style.display = hidden ? "none" : "block";
+  }, [hidden, rect.top, rect.left, rect.width, rect.height, state]);
   if (state === "default") return null;
   const gap = chromeGap ?? (state === "hover" ? HOVER_CHROME_GAP : SELECTION_CHROME_GAP);
   const isActive = state === "active-top" || state === "active-bottom";
   const isDragging = state === "dragging";
   const showToolbar = isActive && toolbar;
   const showDragHandle = (isActive || isDragging) && showHandle;
-  const itemDragEnabled = itemDragSurface && isActive && showHandle && !isDragging && !dragDisabled;
+  const itemDragEnabled = itemDragSurface && isActive && !isDragging && !dragDisabled && Boolean(showHandle || onItemPointerDown);
   const useDetachedBelowToolbar = Boolean(showToolbar && state === "active-bottom" && toolbarBelowRect);
+  const setRootRef = (node) => {
+    localRef.current = node;
+    if (typeof elRef === "function") elRef(node);
+    else if (elRef) elRef.current = node;
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     "div",
     {
-      ref: elRef,
+      ref: setRootRef,
       "data-ohw-item-interaction": "",
       "data-ohw-item-interaction-state": state,
       className: cn("pointer-events-none", className),
@@ -8434,7 +8454,8 @@ function ItemInteractionLayer({
         left: rect.left - gap,
         width: rect.width + gap * 2,
         height: rect.height + gap * 2,
-        zIndex: getChromeZIndex(state)
+        zIndex: getChromeZIndex(state),
+        display: hidden ? "none" : "block"
       },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
@@ -11255,6 +11276,13 @@ function findButtonAtPoint(x, y, media) {
   if (hits.length === 0) return null;
   return hits.reduce((best, el) => best.contains(el) ? el : best);
 }
+function findNavbarCtaAtPoint(x, y) {
+  const hits = Array.from(
+    document.querySelectorAll('[data-ohw-role="navbar-button"]')
+  ).filter((el) => containsPoint(el, x, y) && !el.closest("[data-ohw-bridge]"));
+  if (hits.length === 0) return null;
+  return hits.reduce((best, el) => best.contains(el) ? el : best);
+}
 
 // src/lib/session-search.ts
 var STORAGE_KEY = "ohw-preserved-search";
@@ -11990,6 +12018,26 @@ var import_react12 = require("react");
 var import_react_dom3 = require("react-dom");
 var import_lucide_react15 = require("lucide-react");
 var import_navigation2 = require("next/navigation");
+
+// src/lib/parent-scroll.ts
+function visibleBand(parentScroll) {
+  const { iframeOffsetTop, headerH: visibleCanvasTop, canvasH } = parentScroll;
+  const top = Math.max(0, visibleCanvasTop - iframeOffsetTop);
+  const bottom = Math.min(window.innerHeight, visibleCanvasTop + canvasH - iframeOffsetTop);
+  return { top, bottom: Math.max(top, bottom) };
+}
+function getIframeVisibleClip(parentScroll) {
+  if (!parentScroll) return null;
+  return visibleBand(parentScroll);
+}
+function getIframeChromeClip(parentScroll) {
+  if (!parentScroll) return null;
+  const band = visibleBand(parentScroll);
+  const promptBarH = Math.max(0, parentScroll.promptBarH ?? 0);
+  return { top: band.top, bottom: Math.max(band.top, band.bottom - promptBarH) };
+}
+
+// src/ui/link-modal/SectionPickerOverlay.tsx
 var import_jsx_runtime27 = require("react/jsx-runtime");
 var DIM_OVERLAY = "rgba(0, 0, 0, 0.45)";
 function rectsEqual(a, b) {
@@ -12127,20 +12175,22 @@ function SectionPickerOverlay({
     []
   );
   (0, import_react12.useEffect)(() => {
-    const applyClip = (iframeOffsetTop, visibleCanvasTop, canvasH) => {
-      const top = Math.max(0, visibleCanvasTop - iframeOffsetTop);
-      const bottom = Math.min(
-        window.innerHeight,
-        visibleCanvasTop + canvasH - iframeOffsetTop
-      );
+    const applyClip = (iframeOffsetTop, visibleCanvasTop, canvasH, promptBarH = 0) => {
+      const next = getIframeVisibleClip({
+        iframeOffsetTop,
+        headerH: visibleCanvasTop,
+        canvasH,
+        promptBarH
+      });
+      if (!next) return;
       setChromeClip(
-        (prev) => prev.top === top && prev.bottom === bottom ? prev : { top, bottom: Math.max(top, bottom) }
+        (prev) => prev.top === next.top && prev.bottom === next.bottom ? prev : next
       );
     };
     const onParentScroll = (e) => {
       if (e.data?.type !== "ow:parent-scroll") return;
-      const { iframeOffsetTop, headerH, canvasH } = e.data;
-      applyClip(iframeOffsetTop, headerH, canvasH);
+      const { iframeOffsetTop, headerH, canvasH, promptBarH = 0 } = e.data;
+      applyClip(iframeOffsetTop, headerH, canvasH, promptBarH);
       iframeOffsetTopRef.current = iframeOffsetTop;
       if (!pointerScreenRef.current && pointerRef.current) {
         pointerScreenRef.current = {
@@ -15804,36 +15854,50 @@ 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;
 function getVisibleClip(parentScroll) {
   const left = 0;
   const right = window.innerWidth;
-  if (!parentScroll) {
+  const band = getIframeChromeClip(parentScroll);
+  if (!band) {
     return { top: 0, bottom: window.innerHeight, left, right };
   }
-  const { iframeOffsetTop, headerH: visibleCanvasTop, canvasH } = parentScroll;
-  const top = Math.max(0, visibleCanvasTop - iframeOffsetTop);
-  const bottom = Math.min(window.innerHeight, visibleCanvasTop + canvasH - iframeOffsetTop);
-  return { top, bottom: Math.max(top, bottom), left, right };
+  return { ...band, left, right };
 }
-function defaultFloatingPanelPosition(parentScroll, panelHeight = 280) {
+function defaultFloatingPanelPosition(parentScroll, _panelHeight = 280) {
   const clip = getVisibleClip(parentScroll);
   return {
     x: Math.max(EDGE_MARGIN, clip.right - PANEL_WIDTH - EDGE_MARGIN),
-    y: Math.min(
-      Math.max(clip.top + EDGE_MARGIN, EDGE_MARGIN),
-      Math.max(clip.top + EDGE_MARGIN, clip.bottom - panelHeight - EDGE_MARGIN)
-    )
+    y: clip.top + EDGE_MARGIN
   };
 }
-function clampPosition(pos, parentScroll, panelW, panelH) {
+function clampX(x, panelW) {
+  const left = EDGE_MARGIN;
+  const maxX = Math.max(left, window.innerWidth - panelW - EDGE_MARGIN);
+  return Math.min(Math.max(x, left), maxX);
+}
+function clampDragPosition(pos, parentScroll, panelW) {
   const clip = getVisibleClip(parentScroll);
-  const maxX = Math.max(clip.left + EDGE_MARGIN, clip.right - panelW - EDGE_MARGIN);
-  const maxY = Math.max(clip.top + EDGE_MARGIN, clip.bottom - panelH - EDGE_MARGIN);
+  const minY = clip.top + EDGE_MARGIN;
+  const maxY = Math.max(minY, clip.bottom - EDGE_MARGIN - HEADER_MIN);
   return {
-    x: Math.min(Math.max(pos.x, clip.left + EDGE_MARGIN), maxX),
-    y: Math.min(Math.max(pos.y, clip.top + EDGE_MARGIN), maxY)
+    x: clampX(pos.x, panelW),
+    y: Math.min(Math.max(pos.y, minY), maxY)
   };
 }
+function fitPanelInClip(homeY, parentScroll, preferredHeight) {
+  const clip = getVisibleClip(parentScroll);
+  const minY = clip.top + EDGE_MARGIN;
+  const maxBottom = clip.bottom - EDGE_MARGIN;
+  const band = Math.max(HEADER_MIN, maxBottom - minY);
+  let y = Math.max(homeY, minY);
+  const want = Math.min(Math.max(preferredHeight, HEADER_MIN), band);
+  if (y + want > maxBottom) {
+    y = Math.max(minY, maxBottom - want);
+  }
+  const maxHeight = Math.max(HEADER_MIN, Math.floor(maxBottom - y));
+  return { y, maxHeight };
+}
 function FloatingPanel({
   open,
   title,
@@ -15850,19 +15914,54 @@ function FloatingPanel({
   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, measured.h);
-  const clamped = clampPosition(resolved, parentScroll, measured.w, measured.h);
+  const homeRef = (0, import_react15.useRef)(null);
+  if (!open) {
+    homeRef.current = null;
+  } else if (position) {
+    homeRef.current = position;
+  } else if (homeRef.current == null) {
+    homeRef.current = defaultFloatingPanelPosition(parentScroll);
+  }
+  const [liveScroll, setLiveScroll] = (0, import_react15.useState)(parentScroll);
+  const home = position ?? homeRef.current ?? defaultFloatingPanelPosition(parentScroll);
+  const { y: fittedY, maxHeight } = fitPanelInClip(home.y, liveScroll, measured.h);
+  const clamped = {
+    x: clampX(home.x, measured.w),
+    y: fittedY
+  };
+  (0, import_react15.useEffect)(() => {
+    setLiveScroll(parentScroll);
+  }, [parentScroll]);
+  (0, import_react15.useEffect)(() => {
+    if (!open) return;
+    const onParentScroll = (e) => {
+      if (e.data?.type !== "ow:parent-scroll") return;
+      const { iframeOffsetTop, headerH, canvasH, promptBarH = 0 } = e.data;
+      setLiveScroll({ iframeOffsetTop, headerH, canvasH, promptBarH });
+    };
+    window.addEventListener("message", onParentScroll);
+    return () => window.removeEventListener("message", onParentScroll);
+  }, [open]);
+  const positionRef = (0, import_react15.useRef)(position);
+  (0, import_react15.useLayoutEffect)(() => {
+    if (!open) {
+      positionRef.current = position;
+      return;
+    }
+    if (position == null && positionRef.current != null) {
+      homeRef.current = defaultFloatingPanelPosition(liveScroll ?? parentScroll);
+    }
+    positionRef.current = position;
+  }, [open, position, liveScroll, parentScroll]);
   (0, import_react15.useLayoutEffect)(() => {
     if (!open || !panelRef.current) return;
     const el = panelRef.current;
-    const next = { w: el.offsetWidth || PANEL_WIDTH, h: el.offsetHeight || 280 };
+    const header = el.querySelector("[data-ohw-floating-panel-header]");
+    const body = el.querySelector("[data-ohw-floating-panel-body]");
+    const contentH = (header?.offsetHeight ?? 0) + (body?.scrollHeight ?? 0) || el.scrollHeight || 280;
+    const next = { w: el.offsetWidth || PANEL_WIDTH, h: contentH };
     setMeasured((prev) => prev.w === next.w && prev.h === next.h ? prev : next);
   }, [open, children, title, context]);
-  (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_react15.useCallback)(
     (e) => {
       if (e.button !== 0) return;
@@ -15896,18 +15995,17 @@ function FloatingPanel({
         return;
       }
       e.preventDefault();
-      const next = clampPosition(
+      const next = clampDragPosition(
         {
           x: drag.originX + (e.clientX - drag.startX),
           y: drag.originY + (e.clientY - drag.startY)
         },
-        parentScroll,
-        measured.w,
-        measured.h
+        liveScroll,
+        measured.w
       );
       onPositionChange?.(next);
     },
-    [measured.h, measured.w, onPositionChange, parentScroll]
+    [measured.w, onPositionChange, liveScroll]
   );
   const endDrag = (0, import_react15.useCallback)((e) => {
     const drag = dragRef.current;
@@ -15937,7 +16035,7 @@ function FloatingPanel({
         "fixed z-[2147483647] flex w-64 flex-col overflow-hidden rounded-xl border border-border bg-background font-sans shadow-lg outline-none",
         className
       ),
-      style: { left: clamped.x, top: clamped.y },
+      style: { left: clamped.x, top: clamped.y, maxHeight },
       onMouseDown: (e) => e.stopPropagation(),
       onPointerDown: (e) => e.stopPropagation(),
       onClick: (e) => e.stopPropagation(),
@@ -15946,7 +16044,7 @@ function FloatingPanel({
           "div",
           {
             "data-ohw-floating-panel-header": "",
-            className: "relative flex cursor-grab items-start gap-2 border-b border-border py-5 pl-5 pr-11 active:cursor-grabbing",
+            className: "relative flex shrink-0 cursor-grab items-start gap-2 border-b border-border py-4! pl-5! pr-11! active:cursor-grabbing",
             onPointerDown: onHeaderPointerDown,
             onPointerMove: onHeaderPointerMove,
             onPointerUp: endDrag,
@@ -15981,7 +16079,11 @@ function FloatingPanel({
           "div",
           {
             "data-ohw-floating-panel-body": "",
-            className: cn("flex w-full flex-col gap-4 p-5", bodyClassName),
+            className: cn(
+              "flex min-h-0 w-full flex-1 flex-col gap-4 overflow-y-auto overscroll-contain p-4",
+              bodyClassName
+            ),
+            style: { WebkitOverflowScrolling: "touch" },
             children
           }
         )
@@ -16059,201 +16161,1635 @@ function SocialsDisplayPanel({ display, onChange, className }) {
   ] });
 }
 
-// src/lib/item-drag-interaction.ts
-function disableNativeHrefDrag(el) {
-  if (el.draggable) el.draggable = false;
-  if (el.getAttribute("draggable") !== "false") {
-    el.setAttribute("draggable", "false");
+// src/ui/button-style-panel.tsx
+var import_lucide_react17 = require("lucide-react");
+
+// src/lib/button-styles.ts
+var BUTTON_VARIANTS_KEY = "__ohw_button_variants";
+var BUTTON_SIZES_KEY = "__ohw_button_sizes";
+var BUTTON_ASSIGNMENTS_KEY = "__ohw_button_assignments";
+var BUTTON_VARIANT_IDS = ["primary", "secondary", "ghost"];
+var BUTTON_SIZE_IDS = ["s", "m", "l"];
+var TRANSPARENT = "rgba(0, 0, 0, 0)";
+var REFERENCE_SIZES = {
+  s: { height: 40, paddingTop: 8, paddingRight: 16, paddingBottom: 8, paddingLeft: 16, fontSize: 15, borderRadius: 8, gap: 8 },
+  m: { height: 48, paddingTop: 12, paddingRight: 24, paddingBottom: 12, paddingLeft: 24, fontSize: 15, borderRadius: 8, gap: 8 },
+  l: { height: 56, paddingTop: 16, paddingRight: 32, paddingBottom: 16, paddingLeft: 32, fontSize: 15, borderRadius: 8, gap: 8 }
+};
+function buttonStyleContext(_el) {
+  return "Button";
+}
+function previewSlotBackground(el) {
+  let node = el.parentElement;
+  while (node && node !== el.ownerDocument.documentElement) {
+    if (node.closest("[data-ohw-bridge], [data-ohw-bridge-root]")) {
+      node = node.parentElement;
+      continue;
+    }
+    const bg = getComputedStyle(node).backgroundColor;
+    const parsed = parseColor(bg);
+    if (parsed && !isTransparent(parsed)) return bg;
+    node = node.parentElement;
+  }
+  const root = el.ownerDocument.documentElement;
+  const style = getComputedStyle(root);
+  for (const name of ["--brand-surface", "--brand-background", "--ohw-brand-light", "--color-light"]) {
+    const value = style.getPropertyValue(name).trim();
+    if (value) return value;
   }
+  return "var(--brand-background, var(--ohw-brand-light, var(--color-light, #ffffff)))";
 }
-function clearTextSelection() {
-  const sel = window.getSelection();
-  if (sel && !sel.isCollapsed) sel.removeAllRanges();
+function buttonId(el) {
+  if (!el) return null;
+  const button = el.matches(CTA_BUTTON_SELECTOR) ? el : el.closest(CTA_BUTTON_SELECTOR);
+  const id = button?.getAttribute("data-ohw-href-key")?.trim();
+  return id || null;
 }
-function armItemPressDrag() {
-  document.documentElement.setAttribute("data-ohw-footer-press-drag", "");
+function isButtonVariantId(value) {
+  return BUTTON_VARIANT_IDS.includes(value);
 }
-function lockItemDuringDrag() {
-  document.documentElement.removeAttribute("data-ohw-footer-press-drag");
-  document.documentElement.setAttribute("data-ohw-item-dragging", "");
-  clearTextSelection();
+function isButtonSizeId(value) {
+  return BUTTON_SIZE_IDS.includes(value);
 }
-function unlockItemDragInteraction() {
-  const wasDragging = document.documentElement.hasAttribute("data-ohw-item-dragging");
-  document.documentElement.removeAttribute("data-ohw-footer-press-drag");
-  document.documentElement.removeAttribute("data-ohw-item-dragging");
-  if (wasDragging) clearTextSelection();
+function px(value) {
+  const rounded = Math.round(value * 100) / 100;
+  return `${rounded}px`;
 }
-var armFooterPressDrag = armItemPressDrag;
-var lockFooterDuringDrag = lockItemDuringDrag;
-var unlockFooterDragInteraction = unlockItemDragInteraction;
-
-// src/lib/nav-dnd.ts
-function listReorderableNavItems(draggedEl) {
-  return listActiveNavbarItems(draggedEl).filter((el) => {
-    const key = el.getAttribute("data-ohw-href-key");
-    return isNavbarHrefKey(key) && !isNestedNavChild(el);
-  });
+function parsePx(value, rootFont = 16) {
+  if (!value) return 0;
+  const n = parseFloat(value);
+  if (!Number.isFinite(n)) return 0;
+  if (value.trim().endsWith("rem") || value.trim().endsWith("em")) return n * rootFont;
+  return n;
 }
-function resolveParentNavHrefKey(child) {
-  const childrenRoot = child.closest("[data-ohw-nav-children]");
-  const group = childrenRoot?.closest("[data-ohw-nav-group]");
-  if (!group) return null;
-  const trigger = group.querySelector(":scope > [data-ohw-href-key]") ?? Array.from(group.querySelectorAll("[data-ohw-href-key]")).find(
-    (el) => !el.closest("[data-ohw-nav-children]")
-  ) ?? null;
-  const key = trigger?.getAttribute("data-ohw-href-key");
-  return key && isNavbarHrefKey(key) ? key : null;
+function classifyHeight(height) {
+  if (height < 44) return "s";
+  if (height < 52) return "m";
+  return "l";
 }
-function listNavChildren(parentHrefKey, draggedEl) {
-  const items = listActiveNavbarItems(draggedEl);
-  const parent = items.find((el) => el.getAttribute("data-ohw-href-key") === parentHrefKey);
-  if (!parent) return [];
-  const group = parent.closest("[data-ohw-nav-group]");
-  const childrenRoot = group?.querySelector(":scope > [data-ohw-nav-children]");
-  if (!childrenRoot) return [];
-  return Array.from(childrenRoot.querySelectorAll(":scope > [data-ohw-href-key]")).filter(
-    (el) => isNavbarHrefKey(el.getAttribute("data-ohw-href-key"))
-  );
+function scaleGeometry(geometry, scale = 0.75) {
+  return {
+    paddingTop: px(parsePx(geometry.paddingTop) * scale),
+    paddingRight: px(parsePx(geometry.paddingRight) * scale),
+    paddingBottom: px(parsePx(geometry.paddingBottom) * scale),
+    paddingLeft: px(parsePx(geometry.paddingLeft) * scale),
+    fontSize: px(parsePx(geometry.fontSize) * scale),
+    borderRadius: px(parsePx(geometry.borderRadius) * scale),
+    gap: px(parsePx(geometry.gap) * scale),
+    height: Math.round(geometry.height * scale)
+  };
 }
-function isVerticalNavLayout(items, draggedEl) {
-  const visible = items.filter((el) => el.getClientRects().length > 0);
-  if (visible.length >= 2) {
-    const a = visible[0].getBoundingClientRect();
-    const b = visible[1].getBoundingClientRect();
-    const verticalGap = b.top - a.bottom;
-    const horizontalGap = b.left - a.right;
-    return verticalGap > horizontalGap;
-  }
-  const container = getActiveNavbarListContainer(draggedEl);
-  if (!container) return false;
-  const style = window.getComputedStyle(container);
-  return style.flexDirection === "column" || style.flexDirection === "column-reverse";
+function relativeLuminance(color) {
+  const channel = (value) => {
+    const s = value / 255;
+    return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+  };
+  return 0.2126 * channel(color.r) + 0.7152 * channel(color.g) + 0.0722 * channel(color.b);
 }
-function buildVerticalRootNavDropSlots(items, draggedEl) {
-  const slots = [];
-  const barThickness = 3;
-  if (items.length === 0) {
-    const container = getActiveNavbarListContainer(draggedEl);
-    if (!container) return slots;
-    const rect = container.getBoundingClientRect();
-    slots.push({
-      insertIndex: 0,
-      parentId: null,
-      left: rect.left,
-      top: rect.top + rect.height / 2 - barThickness / 2,
-      width: Math.max(rect.width, 40),
-      height: barThickness,
-      direction: "horizontal"
-    });
-    return slots;
-  }
-  const edgeGap = (() => {
-    if (items.length < 2) return 16;
-    const a = items[0].getBoundingClientRect();
-    const b = items[1].getBoundingClientRect();
-    return Math.max(0, b.top - a.bottom);
-  })();
-  for (let i = 0; i <= items.length; i++) {
-    let top;
-    let width;
-    let left;
-    if (i === 0) {
-      const first = items[0].getBoundingClientRect();
-      top = first.top - edgeGap / 2 - barThickness / 2;
-      left = first.left;
-      width = first.width;
-    } else if (i === items.length) {
-      const last = items[items.length - 1].getBoundingClientRect();
-      const lastGap = items.length >= 2 ? Math.max(0, last.top - items[items.length - 2].getBoundingClientRect().bottom) : edgeGap;
-      top = last.bottom + lastGap / 2 - barThickness / 2;
-      left = last.left;
-      width = last.width;
-    } else {
-      const prev = items[i - 1].getBoundingClientRect();
-      const next = items[i].getBoundingClientRect();
-      top = (prev.bottom + next.top) / 2 - barThickness / 2;
-      left = Math.min(prev.left, next.left);
-      width = Math.max(prev.right, next.right) - left;
+function contrastRatio(a, b) {
+  const lighter = Math.max(relativeLuminance(a), relativeLuminance(b));
+  const darker = Math.min(relativeLuminance(a), relativeLuminance(b));
+  return (lighter + 0.05) / (darker + 0.05);
+}
+function compositeOver(fg, bg) {
+  const a = fg.a + bg.a * (1 - fg.a);
+  if (a < 1e-3) return { ...bg, a: 0 };
+  return {
+    r: (fg.r * fg.a + bg.r * bg.a * (1 - fg.a)) / a,
+    g: (fg.g * fg.a + bg.g * bg.a * (1 - fg.a)) / a,
+    b: (fg.b * fg.a + bg.b * bg.a * (1 - fg.a)) / a,
+    a
+  };
+}
+function previewSlotForChrome(chrome, slotBackground) {
+  const text = parseColor(chrome.color);
+  if (!text || text.a < 0.2) return slotBackground;
+  const slot = parseColor(slotBackground) ?? { r: 250, g: 250, b: 249, a: 1 };
+  const fill = parseColor(chrome.background);
+  const effective = fill && !isTransparent(fill) ? compositeOver(fill, slot) : slot;
+  if (contrastRatio(text, effective) >= 3) return slotBackground;
+  return relativeLuminance(text) > 0.55 ? "#2c2c2c" : "#f4f4f5";
+}
+function parseColor(input) {
+  if (!input) return null;
+  const value = input.trim().toLowerCase();
+  if (value === "transparent") return { r: 0, g: 0, b: 0, a: 0 };
+  const hex = value.match(/^#([0-9a-f]{3,8})$/);
+  if (hex) {
+    const raw = hex[1];
+    const expand = (pair) => parseInt(pair.length === 1 ? pair + pair : pair, 16);
+    if (raw.length === 3 || raw.length === 4) {
+      return {
+        r: expand(raw[0]),
+        g: expand(raw[1]),
+        b: expand(raw[2]),
+        a: raw.length === 4 ? expand(raw[3]) / 255 : 1
+      };
+    }
+    if (raw.length === 6 || raw.length === 8) {
+      return {
+        r: expand(raw.slice(0, 2)),
+        g: expand(raw.slice(2, 4)),
+        b: expand(raw.slice(4, 6)),
+        a: raw.length === 8 ? expand(raw.slice(6, 8)) / 255 : 1
+      };
     }
-    slots.push({
-      insertIndex: i,
-      parentId: null,
-      left,
-      top,
-      width: Math.max(width, 40),
-      height: barThickness,
-      direction: "horizontal"
-    });
   }
-  return slots;
-}
-function buildHorizontalRootNavDropSlots(items, draggedEl) {
-  const slots = [];
-  const barThickness = 3;
-  if (items.length === 0) {
-    const container = getActiveNavbarListContainer(draggedEl);
-    if (!container) return slots;
-    const rect = container.getBoundingClientRect();
-    slots.push({
-      insertIndex: 0,
-      parentId: null,
-      left: rect.left + rect.width / 2 - barThickness / 2,
-      top: rect.top,
-      width: barThickness,
-      height: Math.max(rect.height, 24),
-      direction: "vertical"
-    });
-    return slots;
+  const rgb = value.match(
+    /^rgba?\(\s*([\d.]+)[%\s,]+([\d.]+)[%\s,]+([\d.]+)(?:%?\s*[,/]\s*([\d.]+%?))?\s*\)$/
+  );
+  if (rgb) {
+    const alphaRaw = rgb[4];
+    const alpha = alphaRaw == null ? 1 : alphaRaw.endsWith("%") ? parseFloat(alphaRaw) / 100 : parseFloat(alphaRaw);
+    return { r: Number(rgb[1]), g: Number(rgb[2]), b: Number(rgb[3]), a: alpha };
   }
-  const edgeGap = (() => {
-    if (items.length < 2) return 32;
-    const a = items[0].getBoundingClientRect();
-    const b = items[1].getBoundingClientRect();
-    return Math.max(0, b.left - a.right);
-  })();
-  for (let i = 0; i <= items.length; i++) {
-    let left;
-    let top;
-    let height;
-    if (i === 0) {
-      const first = items[0].getBoundingClientRect();
-      left = first.left - edgeGap / 2 - barThickness / 2;
-      top = first.top;
-      height = first.height;
-    } else if (i === items.length) {
-      const last = items[items.length - 1].getBoundingClientRect();
-      const lastGap = items.length >= 2 ? Math.max(0, last.left - items[items.length - 2].getBoundingClientRect().right) : edgeGap;
-      left = last.right + lastGap / 2 - barThickness / 2;
-      top = last.top;
-      height = last.height;
-    } else {
-      const prev = items[i - 1].getBoundingClientRect();
-      const next = items[i].getBoundingClientRect();
-      left = (prev.right + next.left) / 2 - barThickness / 2;
-      top = Math.min(prev.top, next.top);
-      height = Math.max(prev.bottom, next.bottom) - top;
-    }
-    slots.push({
-      insertIndex: i,
-      parentId: null,
-      left,
-      top,
-      width: barThickness,
-      height: Math.max(height, 24),
-      direction: "vertical"
-    });
+  const oklch = value.match(
+    /^oklch\(\s*([\d.]+%?)\s+([\d.]+)\s+([\d.]+)(?:deg)?(?:\s*\/\s*([\d.]+%?))?\s*\)$/
+  );
+  if (oklch) {
+    const Lraw = oklch[1];
+    const L = Lraw.endsWith("%") ? parseFloat(Lraw) / 100 : parseFloat(Lraw);
+    const gray = Math.max(0, Math.min(1, L)) * 255;
+    const alphaRaw = oklch[4];
+    const alpha = alphaRaw == null ? 1 : alphaRaw.endsWith("%") ? parseFloat(alphaRaw) / 100 : parseFloat(alphaRaw);
+    return { r: gray, g: gray, b: gray, a: alpha };
   }
-  return slots;
+  return null;
 }
-function buildRootNavDropSlots(draggedEl) {
-  const items = listReorderableNavItems(draggedEl);
-  if (isVerticalNavLayout(items, draggedEl)) {
-    return buildVerticalRootNavDropSlots(items, draggedEl);
-  }
-  return buildHorizontalRootNavDropSlots(items, draggedEl);
+function isTransparent(color) {
+  return !color || color.a < 0.05;
 }
-function buildChildNavDropSlots(parentHrefKey, draggedEl) {
+function hasOpaqueBackground(background) {
+  if (!background) return false;
+  const value = background.trim().toLowerCase();
+  if (!value || value === "transparent" || value === "rgba(0, 0, 0, 0)" || value === "rgb(0, 0, 0, 0)") {
+    return false;
+  }
+  const parsed = parseColor(background);
+  if (parsed) return !isTransparent(parsed);
+  return true;
+}
+function toCss(color) {
+  const r2 = Math.round(color.r);
+  const g = Math.round(color.g);
+  const b = Math.round(color.b);
+  if (color.a >= 0.995) return `rgb(${r2}, ${g}, ${b})`;
+  return `rgba(${r2}, ${g}, ${b}, ${Math.round(color.a * 100) / 100})`;
+}
+function colorKey(input) {
+  const parsed = parseColor(input);
+  if (!parsed || isTransparent(parsed)) return "transparent";
+  return `${Math.round(parsed.r / 8)}-${Math.round(parsed.g / 8)}-${Math.round(parsed.b / 8)}-${Math.round(parsed.a * 4)}`;
+}
+function declaredVariant(className) {
+  const match = className.match(/\bbtn--(primary|secondary|ghost)\b/);
+  return match && isButtonVariantId(match[1]) ? match[1] : null;
+}
+function fillSlot(sample) {
+  const width = parseFloat(sample.borderWidth);
+  const border = parseColor(sample.borderColor);
+  if (width > 0 && !isTransparent(border)) return "secondary";
+  if (hasOpaqueBackground(sample.background)) return "primary";
+  return "ghost";
+}
+function sampleSlot(sample) {
+  return declaredVariant(sample.className) ?? fillSlot(sample);
+}
+function fingerprint(sample) {
+  const width = parseFloat(sample.borderWidth);
+  const border = width > 0 ? colorKey(sample.borderColor) : "none";
+  return `${colorKey(sample.background)}|${border}|${colorKey(sample.color)}|${sampleSlot(sample)}`;
+}
+function paintColor(chrome) {
+  if (hasOpaqueBackground(chrome.background)) {
+    const parsed = parseColor(chrome.background);
+    return parsed ? toCss({ ...parsed, a: 1 }) : chrome.background;
+  }
+  const width = parseFloat(chrome.borderWidth);
+  if (width > 0 && hasOpaqueBackground(chrome.borderColor)) {
+    const parsed = parseColor(chrome.borderColor);
+    return parsed ? toCss({ ...parsed, a: 1 }) : chrome.borderColor;
+  }
+  const text = parseColor(chrome.color);
+  return text ? toCss({ ...text, a: 1 }) : chrome.color;
+}
+function accentColor(chrome) {
+  const bg = parseColor(chrome.background);
+  if (bg && !isTransparent(bg) && relativeLuminance(bg) < 0.55) {
+    return toCss({ ...bg, a: 1 });
+  }
+  const text = parseColor(chrome.color);
+  if (text && !isTransparent(text)) return toCss({ ...text, a: 1 });
+  return paintColor(chrome);
+}
+function chromeFrom(sample) {
+  return {
+    background: sample.background || TRANSPARENT,
+    color: sample.color || "currentColor",
+    borderColor: sample.borderColor || TRANSPARENT,
+    borderWidth: sample.borderWidth || "0px"
+  };
+}
+function filledPrimary(seed) {
+  const paint = parseColor(paintColor(seed)) ?? { r: 15, g: 15, b: 15, a: 1 };
+  const luminance = relativeLuminance(paint);
+  return {
+    background: toCss({ ...paint, a: 1 }),
+    color: luminance > 0.55 ? "rgb(15, 15, 15)" : "rgb(255, 255, 255)",
+    borderColor: TRANSPARENT,
+    borderWidth: "0px"
+  };
+}
+function generatedSecondary(primary) {
+  const paint = accentColor(primary);
+  return {
+    background: TRANSPARENT,
+    color: paint,
+    borderColor: paint,
+    borderWidth: "1px"
+  };
+}
+function generatedGhost(primary) {
+  return {
+    background: TRANSPARENT,
+    color: accentColor(primary),
+    borderColor: TRANSPARENT,
+    borderWidth: "0px"
+  };
+}
+function normalizeOutlineChrome(outline, primary) {
+  const paint = accentColor(primary);
+  const text = parseColor(outline.color);
+  const paintRgb = parseColor(paint);
+  const primaryLabel = parseColor(primary.color);
+  const matchesOnPrimary = Boolean(text && primaryLabel) && colorKey(outline.color) === colorKey(primary.color);
+  const textTooLight = text ? relativeLuminance(text) > 0.7 : false;
+  const paintIsDarker = paintRgb ? relativeLuminance(paintRgb) < 0.65 : hasOpaqueBackground(primary.background);
+  if (!(matchesOnPrimary || textTooLight) || !paintIsDarker) return outline;
+  const hasBorder = parseFloat(outline.borderWidth) > 0;
+  return {
+    ...outline,
+    color: paint,
+    borderColor: hasBorder ? paint : outline.borderColor
+  };
+}
+function generateButtonVariants(samples) {
+  if (samples.length === 0) return { status: "unresolved" };
+  const groups = /* @__PURE__ */ new Map();
+  for (const sample of samples) {
+    const key = fingerprint(sample);
+    const list = groups.get(key) ?? [];
+    list.push(sample);
+    groups.set(key, list);
+  }
+  if (groups.size > 3) return { status: "unresolved" };
+  const bySlot = /* @__PURE__ */ new Map();
+  for (const group of groups.values()) {
+    const sample = group[0];
+    const slot = sampleSlot(sample);
+    if (bySlot.has(slot)) return { status: "unresolved" };
+    bySlot.set(slot, sample);
+  }
+  const primarySample = bySlot.get("primary");
+  const seed = chromeFrom(primarySample ?? samples[0]);
+  const primary = primarySample ? seed : filledPrimary(seed);
+  const secondary = normalizeOutlineChrome(
+    bySlot.has("secondary") ? chromeFrom(bySlot.get("secondary")) : generatedSecondary(primary),
+    primary
+  );
+  const ghost = normalizeOutlineChrome(
+    bySlot.has("ghost") ? chromeFrom(bySlot.get("ghost")) : generatedGhost(primary),
+    primary
+  );
+  return {
+    status: "ready",
+    tokens: { primary, secondary, ghost }
+  };
+}
+function geometryFromSample(sample) {
+  return {
+    paddingTop: px(sample.paddingTop),
+    paddingRight: px(sample.paddingRight),
+    paddingBottom: px(sample.paddingBottom),
+    paddingLeft: px(sample.paddingLeft),
+    fontSize: px(sample.fontSize),
+    borderRadius: px(sample.borderRadius),
+    gap: px(sample.gap),
+    height: Math.round(sample.height)
+  };
+}
+function shiftSample(base, steps) {
+  return {
+    height: Math.max(24, base.height + steps * 8),
+    paddingTop: Math.max(0, base.paddingTop + steps * 4),
+    paddingBottom: Math.max(0, base.paddingBottom + steps * 4),
+    paddingLeft: Math.max(0, base.paddingLeft + steps * 8),
+    paddingRight: Math.max(0, base.paddingRight + steps * 8),
+    fontSize: base.fontSize,
+    borderRadius: base.borderRadius,
+    gap: base.gap
+  };
+}
+function clusterSizes(samples) {
+  const sorted = [...samples].sort((a, b) => a.height - b.height);
+  const clusters = [];
+  for (const sample of sorted) {
+    const current = clusters[clusters.length - 1];
+    const head = current?.[0];
+    if (!current || !head || Math.abs(sample.height - head.height) > 2) clusters.push([sample]);
+    else current.push(sample);
+  }
+  return clusters.map((group) => {
+    const pick = (key) => group.reduce((sum, item) => sum + item[key], 0) / group.length;
+    return {
+      height: pick("height"),
+      paddingTop: pick("paddingTop"),
+      paddingRight: pick("paddingRight"),
+      paddingBottom: pick("paddingBottom"),
+      paddingLeft: pick("paddingLeft"),
+      fontSize: pick("fontSize"),
+      borderRadius: pick("borderRadius"),
+      gap: pick("gap")
+    };
+  });
+}
+function tokensFromSamples(bySlot, radius, gap) {
+  const fill = (id) => {
+    const sample = bySlot[id] ?? REFERENCE_SIZES[id];
+    return geometryFromSample({ ...sample, borderRadius: radius, gap });
+  };
+  return { s: fill("s"), m: fill("m"), l: fill("l") };
+}
+function interpolateSizes(known) {
+  const order = BUTTON_SIZE_IDS;
+  const indexOf = (id) => order.indexOf(id);
+  const sorted = [...known].sort((a, b) => indexOf(a.id) - indexOf(b.id));
+  const left = sorted[0];
+  const right = sorted[1];
+  const span = indexOf(right.id) - indexOf(left.id);
+  const step = (key) => (right.sample[key] - left.sample[key]) / span;
+  const at = (index) => {
+    const steps = index - indexOf(left.id);
+    return {
+      height: left.sample.height + step("height") * steps,
+      paddingTop: Math.max(0, left.sample.paddingTop + step("paddingTop") * steps),
+      paddingBottom: Math.max(0, left.sample.paddingBottom + step("paddingBottom") * steps),
+      paddingLeft: Math.max(0, left.sample.paddingLeft + step("paddingLeft") * steps),
+      paddingRight: Math.max(0, left.sample.paddingRight + step("paddingRight") * steps),
+      fontSize: Math.max(10, left.sample.fontSize + step("fontSize") * steps),
+      borderRadius: left.sample.borderRadius,
+      gap: left.sample.gap
+    };
+  };
+  const bySlot = {
+    [left.id]: left.sample,
+    [right.id]: { ...right.sample, borderRadius: left.sample.borderRadius, gap: left.sample.gap }
+  };
+  for (const id of order) {
+    if (!bySlot[id]) bySlot[id] = at(indexOf(id));
+  }
+  return tokensFromSamples(bySlot, left.sample.borderRadius, left.sample.gap);
+}
+function generateButtonSizes(samples) {
+  const clusters = clusterSizes(samples.filter((sample) => sample.height > 0));
+  if (clusters.length === 0) {
+    return { status: "ready", tokens: tokensFromSamples(REFERENCE_SIZES, 8, 8) };
+  }
+  if (clusters.length > 3) return { status: "unresolved" };
+  if (clusters.length === 3) {
+    const sorted = [...clusters].sort((a, b) => a.height - b.height);
+    const radius = sorted[1].borderRadius;
+    const gap = sorted[1].gap;
+    return {
+      status: "ready",
+      tokens: {
+        s: geometryFromSample({ ...sorted[0], borderRadius: radius, gap }),
+        m: geometryFromSample({ ...sorted[1], borderRadius: radius, gap }),
+        l: geometryFromSample({ ...sorted[2], borderRadius: radius, gap })
+      }
+    };
+  }
+  if (clusters.length === 1) {
+    const known = clusters[0];
+    const slot = classifyHeight(known.height);
+    const offset = BUTTON_SIZE_IDS.indexOf(slot);
+    const bySlot = Object.fromEntries(
+      BUTTON_SIZE_IDS.map((id, index) => [id, shiftSample(known, index - offset)])
+    );
+    bySlot[slot] = known;
+    return { status: "ready", tokens: tokensFromSamples(bySlot, known.borderRadius, known.gap) };
+  }
+  const mapped = clusters.map((sample) => ({ id: classifyHeight(sample.height), sample }));
+  if (mapped[0].id === mapped[1].id) {
+    const larger = clusters.slice().sort((a, b) => b.height - a.height)[0];
+    return generateButtonSizes([larger]);
+  }
+  return { status: "ready", tokens: interpolateSizes(mapped) };
+}
+function parseJson(raw) {
+  if (!raw) return null;
+  try {
+    return JSON.parse(raw);
+  } catch {
+    return null;
+  }
+}
+function isChrome(value) {
+  if (!value || typeof value !== "object") return false;
+  const chrome = value;
+  return typeof chrome.background === "string" && typeof chrome.color === "string";
+}
+function isGeometry(value) {
+  if (!value || typeof value !== "object") return false;
+  const geometry = value;
+  return typeof geometry.paddingTop === "string" && typeof geometry.height === "number";
+}
+function readVariantTokens(content) {
+  const parsed = parseJson(content[BUTTON_VARIANTS_KEY]);
+  if (!parsed) return null;
+  if (!BUTTON_VARIANT_IDS.every((id) => isChrome(parsed[id]))) return null;
+  return parsed;
+}
+function readSizeTokens(content) {
+  const parsed = parseJson(content[BUTTON_SIZES_KEY]);
+  if (!parsed) return null;
+  if (!BUTTON_SIZE_IDS.every((id) => isGeometry(parsed[id]))) return null;
+  return parsed;
+}
+function readAssignments(content) {
+  const parsed = parseJson(content[BUTTON_ASSIGNMENTS_KEY]);
+  if (!parsed || typeof parsed !== "object") return {};
+  const next = {};
+  for (const [id, value] of Object.entries(parsed)) {
+    if (!value || !isButtonVariantId(value.variant) || !isButtonSizeId(value.size)) continue;
+    next[id] = { variant: value.variant, size: value.size };
+  }
+  return next;
+}
+function cssLength(style, prop) {
+  return style.getPropertyValue(prop) || "0px";
+}
+function readVariantSample(el) {
+  const style = getComputedStyle(el);
+  return {
+    background: style.backgroundColor,
+    color: style.color,
+    borderColor: style.borderTopColor,
+    borderWidth: style.borderTopWidth,
+    className: el.className || ""
+  };
+}
+function readSizeSample(el) {
+  const style = getComputedStyle(el);
+  const rootFont = parsePx(getComputedStyle(el.ownerDocument.documentElement).fontSize) || 16;
+  const rect = el.getBoundingClientRect();
+  return {
+    height: rect.height,
+    paddingTop: parsePx(cssLength(style, "padding-top"), rootFont),
+    paddingRight: parsePx(cssLength(style, "padding-right"), rootFont),
+    paddingBottom: parsePx(cssLength(style, "padding-bottom"), rootFont),
+    paddingLeft: parsePx(cssLength(style, "padding-left"), rootFont),
+    fontSize: parsePx(style.fontSize, rootFont),
+    borderRadius: parsePx(style.borderTopLeftRadius, rootFont),
+    gap: parsePx(style.columnGap || style.gap, rootFont)
+  };
+}
+function readTypography(el) {
+  const style = getComputedStyle(el);
+  return {
+    fontFamily: style.fontFamily,
+    fontWeight: style.fontWeight,
+    letterSpacing: style.letterSpacing,
+    textTransform: style.textTransform,
+    textDecoration: style.textDecorationLine || style.textDecoration || "none"
+  };
+}
+var buttonOriginByEl = /* @__PURE__ */ new WeakMap();
+var ORIGIN_ATTR = "data-ohw-btn-origin";
+function parseOriginAttr(raw) {
+  if (!raw) return null;
+  try {
+    const value = JSON.parse(raw);
+    if (!value?.variant || !value.size || !value.typography) return null;
+    return value;
+  } catch {
+    return null;
+  }
+}
+function measureLiveOrigin(el) {
+  return {
+    variant: readVariantSample(el),
+    size: readSizeSample(el),
+    typography: readTypography(el)
+  };
+}
+function captureButtonOrigin(el) {
+  const cached = buttonOriginByEl.get(el);
+  if (cached) return cached;
+  const fromAttr = parseOriginAttr(el.getAttribute(ORIGIN_ATTR));
+  if (fromAttr) {
+    buttonOriginByEl.set(el, fromAttr);
+    return fromAttr;
+  }
+  const origin = measureLiveOrigin(el);
+  buttonOriginByEl.set(el, origin);
+  try {
+    el.setAttribute(ORIGIN_ATTR, JSON.stringify(origin));
+  } catch {
+  }
+  return origin;
+}
+function listStyleButtons(doc) {
+  return Array.from(doc.querySelectorAll(CTA_BUTTON_SELECTOR)).filter((el) => {
+    if (el.closest("[data-ohw-bridge], [data-ohw-bridge-root]")) return false;
+    const rect = el.getBoundingClientRect();
+    return rect.width > 0 && rect.height > 0;
+  });
+}
+function generateTokensFromButtons(buttons) {
+  const variants = generateButtonVariants(buttons.map(readVariantSample));
+  const sizes = generateButtonSizes(buttons.map(readSizeSample));
+  if (variants.status !== "ready" || sizes.status !== "ready") return { status: "unresolved" };
+  return { status: "ready", tokens: { variants: variants.tokens, sizes: sizes.tokens } };
+}
+function tokensFromButton(el) {
+  const origin = captureButtonOrigin(el);
+  const sample = origin.variant;
+  const variants = generateButtonVariants([sample]);
+  const sizes = generateButtonSizes([origin.size]);
+  const primary = chromeFrom(sample);
+  return {
+    variants: variants.status === "ready" ? variants.tokens : { primary, secondary: generatedSecondary(primary), ghost: generatedGhost(primary) },
+    sizes: sizes.status === "ready" ? sizes.tokens : tokensFromSamples(REFERENCE_SIZES, 8, 8)
+  };
+}
+function readStoredStyleTokens(content) {
+  const variants = readVariantTokens(content);
+  const sizes = readSizeTokens(content);
+  if (!variants || !sizes) return null;
+  return { variants, sizes };
+}
+function styleTokenNodes(tokens) {
+  return [
+    { key: BUTTON_VARIANTS_KEY, text: JSON.stringify(tokens.variants) },
+    { key: BUTTON_SIZES_KEY, text: JSON.stringify(tokens.sizes) }
+  ];
+}
+function ensureButtonStyleTokens(doc, content) {
+  const stored = readStoredStyleTokens(content);
+  if (stored) return { tokens: stored, nodes: [] };
+  const generated = generateTokensFromButtons(listStyleButtons(doc));
+  if (generated.status !== "ready") return { tokens: null, nodes: [] };
+  return { tokens: generated.tokens, nodes: styleTokenNodes(generated.tokens) };
+}
+function detectVariant(el, tokens) {
+  const declared = declaredVariant(el.className || "");
+  if (declared) return declared;
+  const stamped = el.getAttribute("data-ohw-btn-variant");
+  if (stamped && isButtonVariantId(stamped)) return stamped;
+  const sample = readVariantSample(el);
+  if (!tokens) return sampleSlot(sample);
+  const key = fingerprint(sample);
+  for (const id of BUTTON_VARIANT_IDS) {
+    const chrome = tokens[id];
+    const tokenKey = fingerprint({
+      background: chrome.background,
+      color: chrome.color,
+      borderColor: chrome.borderColor,
+      borderWidth: chrome.borderWidth,
+      className: `btn btn--${id}`
+    });
+    if (tokenKey === key) return id;
+  }
+  return sampleSlot(sample);
+}
+function detectSize(el, tokens) {
+  const stamped = el.getAttribute("data-ohw-btn-size");
+  if (stamped && isButtonSizeId(stamped)) return stamped;
+  const height = el.getBoundingClientRect().height;
+  if (!tokens) return classifyHeight(height);
+  let best = "m";
+  let bestDelta = Number.POSITIVE_INFINITY;
+  for (const id of BUTTON_SIZE_IDS) {
+    const delta = Math.abs(tokens[id].height - height);
+    if (delta < bestDelta) {
+      best = id;
+      bestDelta = delta;
+    }
+  }
+  return best;
+}
+function assignmentFor(el, content, tokens) {
+  const id = buttonId(el);
+  const stored = id ? readAssignments(content)[id] : void 0;
+  if (stored) return stored;
+  return {
+    variant: detectVariant(el, tokens?.variants ?? null),
+    size: detectSize(el, tokens?.sizes ?? null)
+  };
+}
+function labelElement(el) {
+  return el.querySelector('[data-ohw-editable="text"], [data-ohw-editable="plain"]') ?? (el.matches('[data-ohw-editable="text"], [data-ohw-editable="plain"]') ? el : null);
+}
+var paintLockByEl = /* @__PURE__ */ new WeakMap();
+var paintObserverByEl = /* @__PURE__ */ new WeakMap();
+var paintingButton = false;
+function paintButtonChrome(el, assignment, tokens) {
+  const origin = captureButtonOrigin(el);
+  const chrome = tokens.variants[assignment.variant];
+  const originSlot = classifyHeight(origin.size.height);
+  const geometry = assignment.size === originSlot ? geometryFromSample({ ...origin.size, borderRadius: origin.size.borderRadius, gap: origin.size.gap }) : tokens.sizes[assignment.size];
+  const { typography } = origin;
+  el.setAttribute("data-ohw-btn-variant", assignment.variant);
+  el.setAttribute("data-ohw-btn-size", assignment.size);
+  el.style.transition = "none";
+  el.style.boxSizing = "border-box";
+  el.style.display = "inline-flex";
+  el.style.alignItems = "center";
+  el.style.justifyContent = "center";
+  el.style.background = chrome.background;
+  el.style.color = chrome.color;
+  el.style.borderStyle = parseFloat(chrome.borderWidth) > 0 ? "solid" : "none";
+  el.style.borderColor = chrome.borderColor;
+  el.style.borderWidth = chrome.borderWidth;
+  el.style.padding = `${geometry.paddingTop} ${geometry.paddingRight} ${geometry.paddingBottom} ${geometry.paddingLeft}`;
+  el.style.fontSize = geometry.fontSize;
+  el.style.borderRadius = px(origin.size.borderRadius);
+  el.style.gap = geometry.gap;
+  el.style.height = px(geometry.height);
+  el.style.fontFamily = typography.fontFamily;
+  el.style.fontWeight = typography.fontWeight;
+  el.style.letterSpacing = typography.letterSpacing;
+  el.style.textTransform = typography.textTransform;
+  if (typography.textDecoration && typography.textDecoration !== "none") {
+    el.style.textDecoration = typography.textDecoration;
+  } else {
+    el.style.textDecoration = "none";
+  }
+  const label = labelElement(el);
+  if (label && label !== el) label.style.color = chrome.color;
+}
+function guardTemplateHover(el) {
+  if (paintObserverByEl.has(el)) return;
+  const observer = new MutationObserver(() => {
+    if (paintingButton) return;
+    const lock = paintLockByEl.get(el);
+    if (!lock) return;
+    paintingButton = true;
+    paintButtonChrome(el, lock.assignment, lock.tokens);
+    paintingButton = false;
+  });
+  observer.observe(el, { attributes: true, attributeFilter: ["style", "class"] });
+  paintObserverByEl.set(el, observer);
+}
+function applyButtonStyle(el, assignment, tokens) {
+  paintLockByEl.set(el, { assignment, tokens });
+  paintingButton = true;
+  paintButtonChrome(el, assignment, tokens);
+  paintingButton = false;
+  guardTemplateHover(el);
+}
+function applyButtonStylesFromContent(doc, content) {
+  const assignments = readAssignments(content);
+  for (const [id, assignment] of Object.entries(assignments)) {
+    const el = doc.querySelector(`[data-ohw-href-key="${CSS.escape(id)}"]`);
+    if (!el) continue;
+    applyButtonStyle(el, assignment, tokensFromButton(el));
+  }
+}
+function withAssignment(content, id, assignment) {
+  return { ...readAssignments(content), [id]: assignment };
+}
+
+// src/ui/button-style-panel.tsx
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var SIZE_LABEL = { s: "S", m: "M", l: "L" };
+function ButtonStylePanel({
+  variants,
+  sizes,
+  variant,
+  size,
+  onVariant,
+  onSize,
+  previewLabel = "Book Now",
+  slotBackground = "var(--brand-background, var(--ohw-brand-light, var(--color-light, #ffffff)))"
+}) {
+  const preview = scaleGeometry(sizes.m, 0.75);
+  const label = previewLabel.trim() || "Book Now";
+  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_runtime31.jsxs)(
+          "button",
+          {
+            type: "button",
+            "aria-pressed": selected,
+            "aria-label": id,
+            onMouseDown: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+            },
+            onClick: () => onVariant(id),
+            className: cn(
+              "relative w-full overflow-hidden rounded-xl border-solid text-left",
+              selected ? "border-2 border-primary" : "border border-border"
+            ),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                "div",
+                {
+                  className: "flex w-full items-center justify-center py-4",
+                  style: { background: cardSlot },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                    "span",
+                    {
+                      className: "inline-flex items-center justify-center whitespace-nowrap font-semibold uppercase leading-none",
+                      style: {
+                        background: chrome.background,
+                        color: chrome.color,
+                        borderColor: chrome.borderColor,
+                        borderWidth: hasBorder ? chrome.borderWidth : "0px",
+                        borderStyle: hasBorder ? "solid" : "none",
+                        padding: `${preview.paddingTop} ${preview.paddingRight} ${preview.paddingBottom} ${preview.paddingLeft}`,
+                        fontSize: preview.fontSize,
+                        borderRadius: preview.borderRadius,
+                        height: preview.height,
+                        boxSizing: "border-box",
+                        letterSpacing: "0.12em"
+                      },
+                      children: label
+                    }
+                  )
+                }
+              ),
+              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_runtime31.jsx)(import_lucide_react17.Check, { className: "size-3", strokeWidth: 3 })
+                }
+              ) : null
+            ]
+          },
+          id
+        );
+      }) })
+    ] }),
+    /* @__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",
+          role: "radiogroup",
+          "aria-label": "Size",
+          children: BUTTON_SIZE_IDS.map((id) => {
+            const selected = id === size;
+            return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+              "button",
+              {
+                type: "button",
+                role: "radio",
+                "aria-checked": selected,
+                onMouseDown: (e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                },
+                onClick: () => onSize(id),
+                className: cn(
+                  "flex min-w-14 flex-1 items-center justify-center rounded-md px-3 py-1.5 text-sm font-medium leading-5",
+                  selected ? "bg-white text-stone-950 shadow-sm" : "bg-transparent text-stone-500"
+                ),
+                children: SIZE_LABEL[id]
+              },
+              id
+            );
+          })
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/lib/button-collections.ts
+var BUTTON_COLLECTIONS_KEY = "__ohw_button_collections";
+var BUTTON_SNAPSHOTS_KEY = "__ohw_button_snapshots";
+var BUTTON_HIDDEN_KEY = "__ohw_button_hidden";
+var COLLECTION_ATTR = "data-ohw-button-collection";
+function parseJson2(raw) {
+  if (!raw) return null;
+  try {
+    return JSON.parse(raw);
+  } catch {
+    return null;
+  }
+}
+function readCollections(content) {
+  const parsed = parseJson2(content[BUTTON_COLLECTIONS_KEY]);
+  if (!parsed || typeof parsed !== "object") return {};
+  const next = {};
+  for (const [id, value] of Object.entries(parsed)) {
+    if (!value || !Array.isArray(value.members)) continue;
+    next[id] = {
+      id,
+      members: value.members.filter((member) => typeof member === "string" && member),
+      gap: typeof value.gap === "string" ? value.gap : "12px"
+    };
+  }
+  return next;
+}
+function readSnapshots(content) {
+  const parsed = parseJson2(content[BUTTON_SNAPSHOTS_KEY]);
+  if (!parsed || typeof parsed !== "object") return {};
+  const next = {};
+  for (const [id, value] of Object.entries(parsed)) {
+    if (!value || typeof value.html !== "string") continue;
+    next[id] = value;
+  }
+  return next;
+}
+function readHiddenButtons(content) {
+  const parsed = parseJson2(content[BUTTON_HIDDEN_KEY]);
+  if (!Array.isArray(parsed)) return [];
+  return parsed.filter((id) => typeof id === "string" && id);
+}
+function buttonCollectionOf(el) {
+  return el?.closest(`[${COLLECTION_ATTR}]`) ?? null;
+}
+function isNavbarCta(el) {
+  return el.getAttribute("data-ohw-role") === "navbar-button" || Boolean(el.closest('[data-ohw-role="navbar-button"]'));
+}
+function navbarScope(el) {
+  return el.closest("nav, [data-ohw-nav-container], [data-ohw-nav-drawer]") ?? el.ownerDocument;
+}
+function isLastNavbarButton(el) {
+  if (!isNavbarCta(el)) return false;
+  const buttons = Array.from(navbarScope(el).querySelectorAll(CTA_BUTTON_SELECTOR)).filter(
+    (button) => isNavbarCta(button) && buttonId(button)
+  );
+  return buttons.length <= 1;
+}
+function canDeleteButton(el) {
+  return !isLastNavbarButton(el);
+}
+function canDuplicateButton(el) {
+  return isNavbarCta(el);
+}
+function labelElement2(el) {
+  return el.querySelector('[data-ohw-editable="text"], [data-ohw-editable="plain"]') ?? el.querySelector("[data-ohw-key]");
+}
+function buttonLabel(el) {
+  return (labelElement2(el)?.textContent ?? el.textContent ?? "").trim();
+}
+function buttonHref(el) {
+  return el.getAttribute("href") ?? "";
+}
+function hrefKeyBase(hrefKey) {
+  return hrefKey.replace(/-href$/, "").replace(/-copy-\d+$/, "");
+}
+function labelKeyForHrefKey(hrefKey) {
+  return `${hrefKey.replace(/-href$/, "")}-label`;
+}
+function cleanClone(el) {
+  const copy = el.cloneNode(true);
+  copy.querySelectorAll("[data-ohw-selected], [data-ohw-hovered], [data-ohw-editing]").forEach((node) => {
+    node.removeAttribute("data-ohw-selected");
+    node.removeAttribute("data-ohw-hovered");
+    node.removeAttribute("data-ohw-editing");
+    node.removeAttribute("contenteditable");
+  });
+  copy.removeAttribute("data-ohw-selected");
+  copy.removeAttribute("data-ohw-hovered");
+  copy.removeAttribute("data-ohw-editing");
+  copy.removeAttribute("contenteditable");
+  copy.removeAttribute("data-ohw-drag-disabled");
+  return copy;
+}
+function nextCopyId(sourceId, content, doc) {
+  const used = /* @__PURE__ */ new Set([
+    ...Object.keys(readSnapshots(content)),
+    ...Object.keys(readAssignments(content)),
+    ...Array.from(doc.querySelectorAll("[data-ohw-href-key]")).map(
+      (el) => el.getAttribute("data-ohw-href-key") ?? ""
+    )
+  ]);
+  const base = hrefKeyBase(sourceId);
+  let n = 2;
+  while (used.has(`${base}-copy-${n}-href`)) n += 1;
+  return `${base}-copy-${n}-href`;
+}
+function nextCollectionId(content, doc) {
+  const used = /* @__PURE__ */ new Set([
+    ...Object.keys(readCollections(content)),
+    ...Array.from(doc.querySelectorAll(`[${COLLECTION_ATTR}]`)).map(
+      (el) => el.getAttribute(COLLECTION_ATTR) ?? ""
+    )
+  ]);
+  let n = 1;
+  while (used.has(`bc-${n}`)) n += 1;
+  return `bc-${n}`;
+}
+var COLLECTION_GAP_MAX_PX = 12;
+var COLLECTION_GAP_DEFAULT = "12px";
+function usableGap(value) {
+  if (!value || value === "normal") return null;
+  const n = parseFloat(value);
+  if (!Number.isFinite(n) || n <= 0) return null;
+  if (n > COLLECTION_GAP_MAX_PX) return COLLECTION_GAP_DEFAULT;
+  return `${Math.round(n * 100) / 100}px`;
+}
+function collectionGap(el, tokens) {
+  const fromCollection = usableGap(buttonCollectionOf(el)?.style.gap);
+  if (fromCollection) return fromCollection;
+  const parent = el.parentElement;
+  if (parent) {
+    const style = getComputedStyle(parent);
+    const fromParent = usableGap(style.columnGap) ?? usableGap(style.gap);
+    if (fromParent) return fromParent;
+  }
+  const fromTokens = usableGap(tokens?.sizes.m.gap);
+  if (fromTokens) return fromTokens;
+  return COLLECTION_GAP_DEFAULT;
+}
+function styleCollection(collection, gap) {
+  collection.style.display = "inline-flex";
+  collection.style.alignItems = "center";
+  collection.style.flexWrap = "wrap";
+  collection.style.gap = gap;
+  collection.style.maxWidth = "100%";
+}
+function createCollection(doc, id, gap) {
+  const collection = doc.createElement("div");
+  collection.setAttribute(COLLECTION_ATTR, id);
+  styleCollection(collection, gap);
+  return collection;
+}
+function setButtonDragAttr(el) {
+  if (isNavbarCta(el) && buttonCollectionOf(el)) el.removeAttribute("data-ohw-drag-disabled");
+  else el.setAttribute("data-ohw-drag-disabled", "true");
+}
+function rekeyCopy(copy, id) {
+  copy.setAttribute("data-ohw-href-key", id);
+  const label = labelElement2(copy);
+  const labelKey = labelKeyForHrefKey(id);
+  if (label) label.setAttribute("data-ohw-key", labelKey);
+  setButtonDragAttr(copy);
+  return { labelKey };
+}
+function stampVariantClass(el, variant) {
+  const raw = typeof el.className === "string" ? el.className : el.getAttribute("class") || "";
+  const without = raw.replace(/\bbtn--(?:primary|secondary|ghost)\b/g, "").replace(/\s+/g, " ").trim();
+  el.className = without ? `${without} btn--${variant}` : `btn btn--${variant}`;
+}
+function snapshotOf(el) {
+  const id = buttonId(el) ?? "";
+  const label = labelElement2(el);
+  return {
+    id,
+    href: buttonHref(el),
+    label: buttonLabel(el),
+    labelKey: label?.getAttribute("data-ohw-key") ?? labelKeyForHrefKey(id),
+    html: cleanClone(el).outerHTML
+  };
+}
+function htmlToElement(doc, html) {
+  const wrap = doc.createElement("div");
+  wrap.innerHTML = html;
+  const el = wrap.firstElementChild;
+  return el instanceof HTMLElement ? el : null;
+}
+function findButton(doc, id) {
+  return doc.querySelector(`[data-ohw-href-key="${CSS.escape(id)}"]`);
+}
+function duplicateButton(source, content) {
+  if (!canDuplicateButton(source)) return null;
+  const sourceId = buttonId(source);
+  if (!sourceId) return null;
+  const doc = source.ownerDocument;
+  const tokens = tokensFromButton(source);
+  const copyId = nextCopyId(sourceId, content, doc);
+  const copy = cleanClone(source);
+  const { labelKey } = rekeyCopy(copy, copyId);
+  const href = buttonHref(source);
+  const label = buttonLabel(source);
+  if (href) copy.setAttribute("href", href);
+  const sourceAssignment = readAssignments(content)[sourceId] ?? assignmentFor(source, content, tokens);
+  const copyAssignment = {
+    variant: "secondary",
+    size: sourceAssignment.size
+  };
+  stampVariantClass(copy, "secondary");
+  applyButtonStyle(copy, copyAssignment, tokens);
+  const copyLabelEl = labelElement2(copy);
+  if (copyLabelEl) copyLabelEl.textContent = label;
+  let collection = buttonCollectionOf(source);
+  const collections = readCollections(content);
+  let collectionId = collection?.getAttribute(COLLECTION_ATTR) ?? "";
+  let members = collectionId && collections[collectionId] ? [...collections[collectionId].members] : [];
+  const gap = collectionGap(source, tokens);
+  if (!collection) {
+    collectionId = nextCollectionId(content, doc);
+    collection = createCollection(doc, collectionId, gap);
+    source.parentElement?.insertBefore(collection, source);
+    collection.append(source, copy);
+    setButtonDragAttr(source);
+    setButtonDragAttr(copy);
+    members = [sourceId, copyId];
+  } else {
+    styleCollection(collection, gap);
+    source.after(copy);
+    setButtonDragAttr(copy);
+    if (!members.includes(sourceId)) members = listCollectionMembers(collection);
+    const at = members.indexOf(sourceId);
+    members.splice(at >= 0 ? at + 1 : members.length, 0, copyId);
+  }
+  const sourceLabelKey = labelElement2(source)?.getAttribute("data-ohw-key");
+  const snapshots = {
+    ...readSnapshots(content),
+    [sourceId]: snapshotOf(source),
+    [copyId]: snapshotOf(copy)
+  };
+  const nextCollections = {
+    ...collections,
+    [collectionId]: { id: collectionId, members, gap }
+  };
+  const assignments = withAssignment(content, copyId, copyAssignment);
+  const nextContent = {
+    ...content,
+    [copyId]: href,
+    [labelKey]: label,
+    [BUTTON_COLLECTIONS_KEY]: JSON.stringify(nextCollections),
+    [BUTTON_SNAPSHOTS_KEY]: JSON.stringify(snapshots),
+    [BUTTON_ASSIGNMENTS_KEY]: JSON.stringify(assignments)
+  };
+  if (sourceLabelKey && nextContent[sourceLabelKey] === void 0) {
+    nextContent[sourceLabelKey] = label;
+  }
+  const nodeKeys = [
+    copyId,
+    labelKey,
+    BUTTON_COLLECTIONS_KEY,
+    BUTTON_SNAPSHOTS_KEY,
+    BUTTON_ASSIGNMENTS_KEY
+  ];
+  if (sourceLabelKey) nodeKeys.push(sourceLabelKey);
+  return {
+    copy,
+    content: nextContent,
+    nodes: contentNodes(nextContent, nodeKeys)
+  };
+}
+function listCollectionMembers(collection) {
+  return Array.from(collection.querySelectorAll(CTA_BUTTON_SELECTOR)).map((el) => buttonId(el)).filter((id) => Boolean(id));
+}
+function contentNodes(content, keys) {
+  return keys.filter((key) => content[key] !== void 0).map((key) => ({ key, text: content[key] }));
+}
+function deleteButton(source, content) {
+  if (!canDeleteButton(source)) return null;
+  const id = buttonId(source);
+  if (!id) return null;
+  const parent = source.parentElement;
+  const nextSibling = source.nextSibling;
+  const removed = source;
+  const collection = buttonCollectionOf(source);
+  const collectionId = collection?.getAttribute(COLLECTION_ATTR) ?? "";
+  const previousCollections = readCollections(content);
+  const previousHidden = readHiddenButtons(content);
+  const snapshots = { ...readSnapshots(content) };
+  const assignments = { ...readAssignments(content) };
+  delete assignments[id];
+  const remainingBeforeUnwrap = collection ? listCollectionMembers(collection).filter((member) => member !== id) : [];
+  removed.remove();
+  let nextCollections = { ...previousCollections };
+  let unwrapped = null;
+  if (collection && collectionId) {
+    const members = listCollectionMembers(collection);
+    if (members.length <= 1) {
+      unwrapped = collection;
+      unwrapCollection(collection);
+      delete nextCollections[collectionId];
+    } else {
+      nextCollections[collectionId] = {
+        id: collectionId,
+        members,
+        gap: collection.style.gap || previousCollections[collectionId]?.gap || "12px"
+      };
+    }
+  }
+  const hidden = previousHidden.includes(id) ? previousHidden : [...previousHidden, id];
+  const nextContent = {
+    ...content,
+    [id]: "",
+    [BUTTON_COLLECTIONS_KEY]: JSON.stringify(nextCollections),
+    [BUTTON_HIDDEN_KEY]: JSON.stringify(hidden),
+    [BUTTON_SNAPSHOTS_KEY]: JSON.stringify(snapshots),
+    [BUTTON_ASSIGNMENTS_KEY]: JSON.stringify(assignments)
+  };
+  return {
+    content: nextContent,
+    nodes: contentNodes(nextContent, [id, BUTTON_COLLECTIONS_KEY, BUTTON_HIDDEN_KEY, BUTTON_SNAPSHOTS_KEY, BUTTON_ASSIGNMENTS_KEY]),
+    undo: () => {
+      if (unwrapped && remainingBeforeUnwrap.length === 1) {
+        const remaining = findButton(removed.ownerDocument, remainingBeforeUnwrap[0]);
+        const host = remaining?.parentElement;
+        if (remaining && host) {
+          const restoredCollection = createCollection(
+            removed.ownerDocument,
+            collectionId,
+            previousCollections[collectionId]?.gap || "12px"
+          );
+          host.insertBefore(restoredCollection, remaining);
+          restoredCollection.append(remaining, removed);
+          return;
+        }
+      }
+      if (nextSibling && nextSibling.parentNode === parent) parent?.insertBefore(removed, nextSibling);
+      else parent?.appendChild(removed);
+    }
+  };
+}
+function unwrapCollection(collection) {
+  const parent = collection.parentElement;
+  if (!parent) return;
+  while (collection.firstChild) parent.insertBefore(collection.firstChild, collection);
+  collection.remove();
+}
+function reorderButtonInCollection(button, clientX) {
+  const collection = buttonCollectionOf(button);
+  const id = buttonId(button);
+  if (!collection || !id) return null;
+  const siblings = Array.from(collection.querySelectorAll(CTA_BUTTON_SELECTOR)).filter((el) => el !== button);
+  let placed = false;
+  for (const sibling of siblings) {
+    const rect = sibling.getBoundingClientRect();
+    if (clientX < rect.left + rect.width / 2) {
+      sibling.before(button);
+      placed = true;
+      break;
+    }
+  }
+  if (!placed) collection.append(button);
+  return listCollectionMembers(collection);
+}
+function listVisibleCollectionButtons(collection) {
+  return Array.from(collection.querySelectorAll(CTA_BUTTON_SELECTOR)).filter((el) => {
+    if (!buttonId(el)) return false;
+    return el.getClientRects().length > 0;
+  });
+}
+function isVerticalButtonLayout(items, collection) {
+  if (items.length >= 2) {
+    const a = items[0].getBoundingClientRect();
+    const b = items[1].getBoundingClientRect();
+    return b.top - a.bottom > b.left - a.right;
+  }
+  const style = window.getComputedStyle(collection);
+  return style.flexDirection === "column" || style.flexDirection === "column-reverse";
+}
+function buildButtonCollectionDropSlots(collection) {
+  const items = listVisibleCollectionButtons(collection);
+  const barThickness = 3;
+  const slots = [];
+  if (items.length === 0) {
+    const rect = collection.getBoundingClientRect();
+    slots.push({
+      insertIndex: 0,
+      left: rect.left + rect.width / 2 - barThickness / 2,
+      top: rect.top,
+      width: barThickness,
+      height: Math.max(rect.height, 24),
+      direction: "vertical"
+    });
+    return slots;
+  }
+  if (isVerticalButtonLayout(items, collection)) {
+    const edgeGap2 = items.length >= 2 ? Math.max(0, items[1].getBoundingClientRect().top - items[0].getBoundingClientRect().bottom) : 16;
+    for (let i = 0; i <= items.length; i++) {
+      let top;
+      let left;
+      let width;
+      if (i === 0) {
+        const first = items[0].getBoundingClientRect();
+        top = first.top - edgeGap2 / 2 - barThickness / 2;
+        left = first.left;
+        width = first.width;
+      } else if (i === items.length) {
+        const last = items[items.length - 1].getBoundingClientRect();
+        const lastGap = items.length >= 2 ? Math.max(0, last.top - items[items.length - 2].getBoundingClientRect().bottom) : edgeGap2;
+        top = last.bottom + lastGap / 2 - barThickness / 2;
+        left = last.left;
+        width = last.width;
+      } else {
+        const prev = items[i - 1].getBoundingClientRect();
+        const next = items[i].getBoundingClientRect();
+        top = (prev.bottom + next.top) / 2 - barThickness / 2;
+        left = Math.min(prev.left, next.left);
+        width = Math.max(prev.right, next.right) - left;
+      }
+      slots.push({
+        insertIndex: i,
+        left,
+        top,
+        width: Math.max(width, 40),
+        height: barThickness,
+        direction: "horizontal"
+      });
+    }
+    return slots;
+  }
+  const edgeGap = items.length >= 2 ? Math.max(0, items[1].getBoundingClientRect().left - items[0].getBoundingClientRect().right) : 12;
+  for (let i = 0; i <= items.length; i++) {
+    let left;
+    let top;
+    let height;
+    if (i === 0) {
+      const first = items[0].getBoundingClientRect();
+      left = first.left - edgeGap / 2 - barThickness / 2;
+      top = first.top;
+      height = first.height;
+    } else if (i === items.length) {
+      const last = items[items.length - 1].getBoundingClientRect();
+      const lastGap = items.length >= 2 ? Math.max(0, last.left - items[items.length - 2].getBoundingClientRect().right) : edgeGap;
+      left = last.right + lastGap / 2 - barThickness / 2;
+      top = last.top;
+      height = last.height;
+    } else {
+      const prev = items[i - 1].getBoundingClientRect();
+      const next = items[i].getBoundingClientRect();
+      left = (prev.right + next.left) / 2 - barThickness / 2;
+      top = Math.min(prev.top, next.top);
+      height = Math.max(prev.bottom, next.bottom) - top;
+    }
+    slots.push({
+      insertIndex: i,
+      left,
+      top,
+      width: barThickness,
+      height: Math.max(height, 24),
+      direction: "vertical"
+    });
+  }
+  return slots;
+}
+function hitTestButtonCollectionDropSlot(collection, clientX, clientY) {
+  const slots = buildButtonCollectionDropSlots(collection);
+  let best = null;
+  for (const slot of slots) {
+    const cx2 = slot.left + slot.width / 2;
+    const cy = slot.top + slot.height / 2;
+    const dist = slot.direction === "vertical" ? Math.abs(clientX - cx2) + Math.abs(clientY - cy) * 0.25 : Math.abs(clientY - cy) + Math.abs(clientX - cx2) * 0.25;
+    if (!best || dist < best.dist) best = { slot, dist };
+  }
+  return best?.slot ?? null;
+}
+function insertButtonAtCollectionIndex(button, insertIndex) {
+  const collection = buttonCollectionOf(button);
+  if (!collection) return null;
+  const items = listVisibleCollectionButtons(collection);
+  const from = items.indexOf(button);
+  if (from < 0) return null;
+  const others = items.filter((el) => el !== button);
+  let index = insertIndex;
+  if (from < insertIndex) index -= 1;
+  if (index <= 0) {
+    const first = others[0];
+    if (first) first.before(button);
+    else collection.append(button);
+  } else if (index >= others.length) {
+    collection.append(button);
+  } else {
+    others[index].before(button);
+  }
+  return listCollectionMembers(collection);
+}
+function persistCollectionOrder(collection, content) {
+  const id = collection.getAttribute(COLLECTION_ATTR);
+  if (!id) return null;
+  const collections = readCollections(content);
+  const current = collections[id];
+  const members = listCollectionMembers(collection);
+  const next = {
+    ...collections,
+    [id]: { id, members, gap: collection.style.gap || current?.gap || "12px" }
+  };
+  const nextContent = { ...content, [BUTTON_COLLECTIONS_KEY]: JSON.stringify(next) };
+  return { content: nextContent, nodes: [{ key: BUTTON_COLLECTIONS_KEY, text: nextContent[BUTTON_COLLECTIONS_KEY] }] };
+}
+function hideButton(el) {
+  if (el.getAttribute("data-ohw-button-hidden") === "") return;
+  el.setAttribute("data-ohw-button-hidden", "");
+  el.style.display = "none";
+}
+function syncButtonsFromContent(doc, content) {
+  reconcileButtonCollections(doc, content);
+  applyButtonContentFromContent(doc, content);
+  applyButtonStylesFromContent(doc, content);
+}
+function applyButtonContentFromContent(doc, content) {
+  const snapshots = readSnapshots(content);
+  for (const snapshot of Object.values(snapshots)) {
+    const el = findButton(doc, snapshot.id);
+    if (!el) continue;
+    applySnapshotContent(el, snapshot, content);
+  }
+}
+function applySnapshotContent(el, snapshot, content) {
+  const href = content[snapshot.id] ?? snapshot.href;
+  if (href) el.setAttribute("href", href);
+  const labelKey = snapshot.labelKey || labelKeyForHrefKey(snapshot.id);
+  if (labelKey && !el.querySelector(`[data-ohw-key="${CSS.escape(labelKey)}"]`)) {
+    const label2 = labelElement2(el);
+    if (label2) label2.setAttribute("data-ohw-key", labelKey);
+  }
+  const text = content[labelKey];
+  if (text === void 0) return;
+  const label = labelElement2(el);
+  if (label) {
+    if (label.getAttribute("data-ohw-key") !== labelKey) label.setAttribute("data-ohw-key", labelKey);
+    if (label.textContent !== text) label.textContent = text;
+  }
+}
+function reconcileButtonCollections(doc, content) {
+  const hidden = new Set(readHiddenButtons(content));
+  for (const id of hidden) {
+    const el = findButton(doc, id);
+    if (el) hideButton(el);
+  }
+  const snapshots = readSnapshots(content);
+  const collections = readCollections(content);
+  for (const collectionState of Object.values(collections)) {
+    const live = collectionState.members.map((id) => findButton(doc, id) ?? restoreSnapshot(doc, snapshots[id], content)).filter((el) => Boolean(el && !hidden.has(buttonId(el) ?? "")));
+    if (live.length === 0) continue;
+    if (live.length === 1) {
+      const existing = buttonCollectionOf(live[0]);
+      if (existing) unwrapCollection(existing);
+      continue;
+    }
+    const anchor = live.find((el) => el.isConnected) ?? live[0];
+    let collection = live.map((el) => buttonCollectionOf(el)).find((el) => el?.getAttribute(COLLECTION_ATTR) === collectionState.id) ?? null;
+    if (!collection) {
+      if (!anchor.parentElement) continue;
+      collection = createCollection(doc, collectionState.id, collectionState.gap);
+      anchor.parentElement.insertBefore(collection, anchor);
+    }
+    styleCollection(collection, collectionState.gap);
+    const current = listCollectionMembers(collection);
+    const sameOrder = current.length === live.length && current.every((id, index) => id === buttonId(live[index]));
+    if (!sameOrder) {
+      for (const member of live) collection.append(member);
+    }
+    for (const member of live) setButtonDragAttr(member);
+  }
+}
+function restoreSnapshot(doc, snapshot, content) {
+  if (!snapshot) return null;
+  const existing = findButton(doc, snapshot.id);
+  if (existing) {
+    applySnapshotContent(existing, snapshot, content);
+    return existing;
+  }
+  const el = htmlToElement(doc, snapshot.html);
+  if (!el) return null;
+  el.setAttribute("data-ohw-href-key", snapshot.id);
+  const label = labelElement2(el);
+  const labelKey = snapshot.labelKey || labelKeyForHrefKey(snapshot.id);
+  if (label) label.setAttribute("data-ohw-key", labelKey);
+  applySnapshotContent(el, snapshot, content);
+  setButtonDragAttr(el);
+  return el;
+}
+function navbarCtasInScope(el) {
+  const scope = el.closest("nav, [data-ohw-nav-root], [data-ohw-nav-drawer]") ?? el.parentElement;
+  if (!scope) return [];
+  return Array.from(scope.querySelectorAll(CTA_BUTTON_SELECTOR)).filter(
+    (button) => isNavbarCta(button) && buttonId(button)
+  );
+}
+function ensureNavbarButtonCollection(button, content) {
+  const existing = buttonCollectionOf(button);
+  if (existing) return existing;
+  if (!isNavbarCta(button) || !buttonId(button)) return null;
+  const parent = button.parentElement;
+  if (!parent) return null;
+  const siblings = navbarCtasInScope(button).filter((el) => el.parentElement === parent);
+  if (siblings.length < 2) return null;
+  const id = nextCollectionId(content, button.ownerDocument);
+  const collection = createCollection(button.ownerDocument, id, collectionGap(button, tokensFromButton(button)));
+  siblings[0].before(collection);
+  for (const member of siblings) {
+    collection.append(member);
+    setButtonDragAttr(member);
+  }
+  return collection;
+}
+function collectionDragEnabled(el) {
+  if (!isNavbarCta(el) || !buttonId(el)) return false;
+  if (buttonCollectionOf(el)) return true;
+  return navbarCtasInScope(el).length >= 2;
+}
+
+// src/lib/item-drag-interaction.ts
+function disableNativeHrefDrag(el) {
+  if (el.draggable) el.draggable = false;
+  if (el.getAttribute("draggable") !== "false") {
+    el.setAttribute("draggable", "false");
+  }
+}
+function clearTextSelection() {
+  const sel = window.getSelection();
+  if (sel && !sel.isCollapsed) sel.removeAllRanges();
+}
+function armItemPressDrag() {
+  document.documentElement.setAttribute("data-ohw-footer-press-drag", "");
+}
+function lockItemDuringDrag() {
+  document.documentElement.removeAttribute("data-ohw-footer-press-drag");
+  document.documentElement.setAttribute("data-ohw-item-dragging", "");
+  clearTextSelection();
+}
+function unlockItemDragInteraction() {
+  const wasDragging = document.documentElement.hasAttribute("data-ohw-item-dragging");
+  document.documentElement.removeAttribute("data-ohw-footer-press-drag");
+  document.documentElement.removeAttribute("data-ohw-item-dragging");
+  if (wasDragging) clearTextSelection();
+}
+var armFooterPressDrag = armItemPressDrag;
+var lockFooterDuringDrag = lockItemDuringDrag;
+var unlockFooterDragInteraction = unlockItemDragInteraction;
+
+// src/lib/nav-dnd.ts
+function listReorderableNavItems(draggedEl) {
+  return listActiveNavbarItems(draggedEl).filter((el) => {
+    const key = el.getAttribute("data-ohw-href-key");
+    return isNavbarHrefKey(key) && !isNestedNavChild(el);
+  });
+}
+function resolveParentNavHrefKey(child) {
+  const childrenRoot = child.closest("[data-ohw-nav-children]");
+  const group = childrenRoot?.closest("[data-ohw-nav-group]");
+  if (!group) return null;
+  const trigger = group.querySelector(":scope > [data-ohw-href-key]") ?? Array.from(group.querySelectorAll("[data-ohw-href-key]")).find(
+    (el) => !el.closest("[data-ohw-nav-children]")
+  ) ?? null;
+  const key = trigger?.getAttribute("data-ohw-href-key");
+  return key && isNavbarHrefKey(key) ? key : null;
+}
+function listNavChildren(parentHrefKey, draggedEl) {
+  const items = listActiveNavbarItems(draggedEl);
+  const parent = items.find((el) => el.getAttribute("data-ohw-href-key") === parentHrefKey);
+  if (!parent) return [];
+  const group = parent.closest("[data-ohw-nav-group]");
+  const childrenRoot = group?.querySelector(":scope > [data-ohw-nav-children]");
+  if (!childrenRoot) return [];
+  return Array.from(childrenRoot.querySelectorAll(":scope > [data-ohw-href-key]")).filter(
+    (el) => isNavbarHrefKey(el.getAttribute("data-ohw-href-key"))
+  );
+}
+function isVerticalNavLayout(items, draggedEl) {
+  const visible = items.filter((el) => el.getClientRects().length > 0);
+  if (visible.length >= 2) {
+    const a = visible[0].getBoundingClientRect();
+    const b = visible[1].getBoundingClientRect();
+    const verticalGap = b.top - a.bottom;
+    const horizontalGap = b.left - a.right;
+    return verticalGap > horizontalGap;
+  }
+  const container = getActiveNavbarListContainer(draggedEl);
+  if (!container) return false;
+  const style = window.getComputedStyle(container);
+  return style.flexDirection === "column" || style.flexDirection === "column-reverse";
+}
+function buildVerticalRootNavDropSlots(items, draggedEl) {
+  const slots = [];
+  const barThickness = 3;
+  if (items.length === 0) {
+    const container = getActiveNavbarListContainer(draggedEl);
+    if (!container) return slots;
+    const rect = container.getBoundingClientRect();
+    slots.push({
+      insertIndex: 0,
+      parentId: null,
+      left: rect.left,
+      top: rect.top + rect.height / 2 - barThickness / 2,
+      width: Math.max(rect.width, 40),
+      height: barThickness,
+      direction: "horizontal"
+    });
+    return slots;
+  }
+  const edgeGap = (() => {
+    if (items.length < 2) return 16;
+    const a = items[0].getBoundingClientRect();
+    const b = items[1].getBoundingClientRect();
+    return Math.max(0, b.top - a.bottom);
+  })();
+  for (let i = 0; i <= items.length; i++) {
+    let top;
+    let width;
+    let left;
+    if (i === 0) {
+      const first = items[0].getBoundingClientRect();
+      top = first.top - edgeGap / 2 - barThickness / 2;
+      left = first.left;
+      width = first.width;
+    } else if (i === items.length) {
+      const last = items[items.length - 1].getBoundingClientRect();
+      const lastGap = items.length >= 2 ? Math.max(0, last.top - items[items.length - 2].getBoundingClientRect().bottom) : edgeGap;
+      top = last.bottom + lastGap / 2 - barThickness / 2;
+      left = last.left;
+      width = last.width;
+    } else {
+      const prev = items[i - 1].getBoundingClientRect();
+      const next = items[i].getBoundingClientRect();
+      top = (prev.bottom + next.top) / 2 - barThickness / 2;
+      left = Math.min(prev.left, next.left);
+      width = Math.max(prev.right, next.right) - left;
+    }
+    slots.push({
+      insertIndex: i,
+      parentId: null,
+      left,
+      top,
+      width: Math.max(width, 40),
+      height: barThickness,
+      direction: "horizontal"
+    });
+  }
+  return slots;
+}
+function buildHorizontalRootNavDropSlots(items, draggedEl) {
+  const slots = [];
+  const barThickness = 3;
+  if (items.length === 0) {
+    const container = getActiveNavbarListContainer(draggedEl);
+    if (!container) return slots;
+    const rect = container.getBoundingClientRect();
+    slots.push({
+      insertIndex: 0,
+      parentId: null,
+      left: rect.left + rect.width / 2 - barThickness / 2,
+      top: rect.top,
+      width: barThickness,
+      height: Math.max(rect.height, 24),
+      direction: "vertical"
+    });
+    return slots;
+  }
+  const edgeGap = (() => {
+    if (items.length < 2) return 32;
+    const a = items[0].getBoundingClientRect();
+    const b = items[1].getBoundingClientRect();
+    return Math.max(0, b.left - a.right);
+  })();
+  for (let i = 0; i <= items.length; i++) {
+    let left;
+    let top;
+    let height;
+    if (i === 0) {
+      const first = items[0].getBoundingClientRect();
+      left = first.left - edgeGap / 2 - barThickness / 2;
+      top = first.top;
+      height = first.height;
+    } else if (i === items.length) {
+      const last = items[items.length - 1].getBoundingClientRect();
+      const lastGap = items.length >= 2 ? Math.max(0, last.left - items[items.length - 2].getBoundingClientRect().right) : edgeGap;
+      left = last.right + lastGap / 2 - barThickness / 2;
+      top = last.top;
+      height = last.height;
+    } else {
+      const prev = items[i - 1].getBoundingClientRect();
+      const next = items[i].getBoundingClientRect();
+      left = (prev.right + next.left) / 2 - barThickness / 2;
+      top = Math.min(prev.top, next.top);
+      height = Math.max(prev.bottom, next.bottom) - top;
+    }
+    slots.push({
+      insertIndex: i,
+      parentId: null,
+      left,
+      top,
+      width: barThickness,
+      height: Math.max(height, 24),
+      direction: "vertical"
+    });
+  }
+  return slots;
+}
+function buildRootNavDropSlots(draggedEl) {
+  const items = listReorderableNavItems(draggedEl);
+  if (isVerticalNavLayout(items, draggedEl)) {
+    return buildVerticalRootNavDropSlots(items, draggedEl);
+  }
+  return buildHorizontalRootNavDropSlots(items, draggedEl);
+}
+function buildChildNavDropSlots(parentHrefKey, draggedEl) {
   const children = listNavChildren(parentHrefKey, draggedEl);
   const slots = [];
   const barThickness = 3;
@@ -16488,7 +18024,7 @@ function useNavItemDrag({
         document.querySelectorAll(
           "nav [data-ohw-href-key], [data-ohw-nav-container] [data-ohw-href-key], [data-ohw-nav-drawer] [data-ohw-href-key]"
         ).forEach((el) => {
-          if (isNavbarHrefKey(el.getAttribute("data-ohw-href-key"))) {
+          if (isNavbarHrefKey(el.getAttribute("data-ohw-href-key")) || isCtaButton(el)) {
             disableNativeHrefDrag(el);
           }
         });
@@ -16797,12 +18333,6 @@ var SECTION_DRAG_EXCLUDED_SELECTOR = [
   "[data-ohw-media-overlay]",
   "[data-ohw-media-skeleton]"
 ].join(", ");
-function visibleClip(ps) {
-  if (!ps) return null;
-  const top = Math.max(0, ps.headerH - ps.iframeOffsetTop);
-  const bottom = Math.min(window.innerHeight, ps.headerH + ps.canvasH - ps.iframeOffsetTop);
-  return { top, bottom: Math.max(top, bottom) };
-}
 function useSectionDrag({
   isEditMode,
   editContentRef,
@@ -16839,7 +18369,7 @@ function useSectionDrag({
   }, [postToParentRef, stopAutoScroll]);
   const updateAutoScroll = (0, import_react17.useCallback)(
     (clientY) => {
-      const clip = visibleClip(parentScrollRef.current);
+      const clip = getIframeChromeClip(parentScrollRef.current);
       let delta = 0;
       if (clip) {
         const distTop = clientY - clip.top;
@@ -17045,8 +18575,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,
@@ -17054,7 +18584,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": "",
@@ -17066,8 +18596,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",
@@ -17086,10 +18616,10 @@ 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" })
       ] })
     }
   ) });
@@ -17251,7 +18781,14 @@ function collectEditableNodes(extraContent, root = document) {
       // so collecting the DOM alone left them behind: the draft knew the row was showing icons and
       // had gained an item, and the published page went back to the template's own (OHH-736).
       SOCIALS_ORDER_KEY,
-      SOCIALS_DISPLAY_KEY
+      SOCIALS_DISPLAY_KEY,
+      // Button variant/size tokens and per-CTA assignments — JSON in editContent, applied on hydrate.
+      BUTTON_VARIANTS_KEY,
+      BUTTON_SIZES_KEY,
+      BUTTON_ASSIGNMENTS_KEY,
+      BUTTON_COLLECTIONS_KEY,
+      BUTTON_SNAPSHOTS_KEY,
+      BUTTON_HIDDEN_KEY
     ]) {
       const text = extraContent[key];
       if (typeof text === "string" && text.length > 0) {
@@ -17571,14 +19108,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": "",
@@ -17590,7 +19127,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",
@@ -17607,7 +19144,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 })
         }
       )
     }
@@ -17616,7 +19153,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",
   {
@@ -17640,7 +19177,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,
@@ -17657,7 +19194,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",
   {
@@ -17675,12 +19212,12 @@ 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 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;
@@ -17802,7 +19339,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,
@@ -17940,7 +19477,7 @@ function mountSchedulingWidget(insertAfter, notifyOnConnect = false, 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,
@@ -18103,8 +19640,8 @@ function lockVideoBox(video) {
   }
   const fit = video.style.objectFit || getComputedStyle(video).objectFit;
   const bg = getComputedStyle(video).backgroundColor;
-  const isTransparent = bg === "rgba(0, 0, 0, 0)" || bg === "transparent" || !bg;
-  if (fit === "contain" && isTransparent) {
+  const isTransparent2 = bg === "rgba(0, 0, 0, 0)" || bg === "transparent" || !bg;
+  if (fit === "contain" && isTransparent2) {
     video.style.backgroundColor = "var(--color-dark, #000)";
   }
 }
@@ -18254,7 +19791,10 @@ function listNavigationItems() {
   ).filter((el) => isNavigationItem2(el));
 }
 function getNavigationItemReorderState(anchor) {
-  if (isCtaButton(anchor)) return { key: null, disabled: false };
+  if (isCtaButton(anchor)) {
+    if (!collectionDragEnabled(anchor)) return { key: null, disabled: true };
+    return { key: buttonId(anchor), disabled: false };
+  }
   return getReorderHandleStateFromAnchor(anchor);
 }
 function getReorderHandleState(el) {
@@ -18353,6 +19893,12 @@ function isPointOverNavigation(x, y) {
     const r2 = panel.getBoundingClientRect();
     if (x >= r2.left && x <= r2.right && y >= r2.top && y <= r2.bottom) return true;
   }
+  for (const el of document.querySelectorAll('[data-ohw-role="navbar-button"]')) {
+    const r2 = el.getBoundingClientRect();
+    if (r2.width > 0 && r2.height > 0 && x >= r2.left && x <= r2.right && y >= r2.top && y <= r2.bottom) {
+      return true;
+    }
+  }
   return false;
 }
 function findHoveredNavOrFooterContainer(x, y) {
@@ -18686,7 +20232,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,
@@ -18701,7 +20247,7 @@ function EditGlowChrome({
         zIndex: 2147483646
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           "div",
           {
             style: {
@@ -18715,7 +20261,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": "",
@@ -18727,7 +20273,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}`,
@@ -18741,22 +20287,12 @@ function EditGlowChrome({
     }
   );
 }
-function getIframeVisibleClip(parentScroll) {
-  if (!parentScroll) return null;
-  const { iframeOffsetTop, headerH: visibleCanvasTop, canvasH } = parentScroll;
-  const clipTop = Math.max(0, visibleCanvasTop - iframeOffsetTop);
-  const clipBottom = Math.min(
-    window.innerHeight,
-    visibleCanvasTop + canvasH - iframeOffsetTop
-  );
-  return { top: clipTop, bottom: Math.max(clipTop, clipBottom) };
-}
 function isRectOutsideClip(rect, clip) {
   if (!clip) return false;
   return rect.bottom < clip.top || rect.top > clip.bottom;
 }
 function applyVisibleViewport(el, parentScroll) {
-  const clip = getIframeVisibleClip(parentScroll);
+  const clip = getIframeChromeClip(parentScroll);
   const top = clip?.top ?? 0;
   const height = clip ? clip.bottom - clip.top : window.innerHeight;
   el.style.top = `${top}px`;
@@ -18796,7 +20332,7 @@ function clampToolbarLeft(centerX, toolbarWidth) {
 function calcToolbarPos(rect, parentScroll, toolbarW = 306) {
   const GAP = TOOLBAR_OFFSET_FROM_ELEMENT;
   const APPROX_H = 32;
-  const clip = getIframeVisibleClip(parentScroll);
+  const clip = getIframeChromeClip(parentScroll);
   const clipTop = clip?.top ?? 0;
   const canvasTopInIframe = parentScroll != null ? parentScroll.headerH - parentScroll.iframeOffsetTop : 0;
   const visibleTop = rect.top - canvasTopInIframe;
@@ -18941,7 +20477,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,
@@ -18953,12 +20489,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_react19.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,
@@ -18967,7 +20503,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",
@@ -18988,7 +20524,7 @@ function FloatingToolbar({
             );
           })
         ] }, gi)),
-        showEditLink ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        showEditLink ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           CustomToolbarButton,
           {
             type: "button",
@@ -19002,7 +20538,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
       ] })
@@ -19019,7 +20555,7 @@ function StateToggle({
   states,
   onStateChange
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     ToggleGroup,
     {
       "data-ohw-state-toggle": "",
@@ -19033,7 +20569,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))
     }
   );
 }
@@ -19049,9 +20585,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",
@@ -19061,7 +20597,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",
@@ -19077,7 +20613,7 @@ function OhwLoaderSpinner() {
   ] });
 }
 function OhwBrandMark() {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
     "svg",
     {
       width: "16",
@@ -19088,7 +20624,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",
@@ -19098,15 +20634,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" })
         ] })
       ]
     }
@@ -19143,7 +20679,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",
@@ -19153,8 +20689,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" })
       ]
     }
   );
@@ -19644,7 +21180,15 @@ function OhhwellsBridge() {
   const [floatingPanel, setFloatingPanel] = (0, import_react19.useState)(null);
   const floatingPanelOpenRef = (0, import_react19.useRef)(false);
   floatingPanelOpenRef.current = floatingPanel !== null;
+  const floatingPanelRef = (0, import_react19.useRef)(null);
+  floatingPanelRef.current = floatingPanel;
   const [floatingPanelPos, setFloatingPanelPos] = (0, import_react19.useState)(null);
+  const buttonCollectionDragRef = (0, import_react19.useRef)(null);
+  const buttonDropInsertIndexRef = (0, import_react19.useRef)(null);
+  const [buttonDropSlots, setButtonDropSlots] = (0, import_react19.useState)([]);
+  const [activeButtonDropIndex, setActiveButtonDropIndex] = (0, import_react19.useState)(null);
+  const buttonPointerDragRef = (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);
@@ -19945,6 +21489,7 @@ function OhhwellsBridge() {
     hoveredItemElRef.current = null;
     setHoveredItemRect(null);
     setFloatingPanel(null);
+    setFloatingPanelPos(null);
     setLogoSizeDraft(null);
     if (!activeElRef.current) {
       if (nestedGroup?.isConnected) {
@@ -20545,6 +22090,47 @@ function OhhwellsBridge() {
     },
     [beginFooterDrag]
   );
+  const persistButtonCollectionDrag = (0, import_react19.useCallback)(
+    (button, clientX) => {
+      const insertIndex = buttonDropInsertIndexRef.current;
+      if (insertIndex != null) insertButtonAtCollectionIndex(button, insertIndex);
+      else if (typeof clientX === "number" && clientX !== 0) reorderButtonInCollection(button, clientX);
+      buttonDropInsertIndexRef.current = null;
+      const collection = buttonCollectionOf(button);
+      if (collection) {
+        const persisted = persistCollectionOrder(collection, editContentRef.current);
+        if (persisted) {
+          editContentRef.current = persisted.content;
+          postToParent2({ type: "ow:change", nodes: persisted.nodes });
+        }
+      }
+      buttonCollectionDragRef.current = null;
+      buttonPointerDragRef.current = null;
+      setButtonDropSlots([]);
+      setActiveButtonDropIndex(null);
+      setIsItemDragging(false);
+      unlockFooterDragInteraction();
+      if (button.isConnected) setToolbarRect(button.getBoundingClientRect());
+    },
+    [postToParent2]
+  );
+  const refreshButtonDragVisuals = (0, import_react19.useCallback)((button, clientX, clientY) => {
+    const collection = buttonCollectionOf(button);
+    if (!collection) {
+      setButtonDropSlots([]);
+      setActiveButtonDropIndex(null);
+      buttonDropInsertIndexRef.current = null;
+      return;
+    }
+    const slots = buildButtonCollectionDropSlots(collection);
+    const active = hitTestButtonCollectionDropSlot(collection, clientX, clientY);
+    setButtonDropSlots(slots);
+    const idx = active ? slots.findIndex((slot) => slot.insertIndex === active.insertIndex) : -1;
+    setActiveButtonDropIndex(idx >= 0 ? idx : null);
+    buttonDropInsertIndexRef.current = active?.insertIndex ?? null;
+    setDraggedItemRect(button.getBoundingClientRect());
+    if (selectedElRef.current === button) setToolbarRect(button.getBoundingClientRect());
+  }, []);
   const handleItemDragStart = (0, import_react19.useCallback)(
     (e) => {
       const selected = selectedElRef.current;
@@ -20554,6 +22140,17 @@ function OhhwellsBridge() {
       }
       const clientX = e?.clientX ?? selected.getBoundingClientRect().left + 8;
       const clientY = e?.clientY ?? selected.getBoundingClientRect().top + 8;
+      if (isCtaButton(selected) && collectionDragEnabled(selected)) {
+        buttonCollectionDragRef.current = selected;
+        setMediaHover(null);
+        if (e?.dataTransfer) {
+          e.dataTransfer.effectAllowed = "move";
+          e.dataTransfer.setData("text/plain", buttonId(selected) ?? "button");
+        }
+        setIsItemDragging(true);
+        refreshButtonDragVisuals(selected, clientX, clientY);
+        return;
+      }
       if (startFooterLinkDrag(selected, clientX, clientY, true)) return;
       if (selected.hasAttribute("data-ohw-footer-col") || isInferredFooterGroup2(selected) && selected.closest("footer")) {
         if (startFooterColumnDrag(selected, clientX, clientY, true)) return;
@@ -20563,10 +22160,15 @@ function OhhwellsBridge() {
       setSiblingHintRect(null);
       setIsItemDragging(true);
     },
-    [startFooterColumnDrag, startFooterLinkDrag, startNavLinkDrag]
+    [startFooterColumnDrag, startFooterLinkDrag, startNavLinkDrag, refreshButtonDragVisuals]
   );
   const handleItemDragEnd = (0, import_react19.useCallback)(
     (e) => {
+      const collectionButton = buttonCollectionDragRef.current;
+      if (collectionButton) {
+        persistButtonCollectionDrag(collectionButton, e?.clientX);
+        return;
+      }
       if (footerDragRef.current) {
         const x = e?.clientX;
         const y = e?.clientY;
@@ -20589,12 +22191,22 @@ function OhhwellsBridge() {
       }
       setIsItemDragging(false);
     },
-    [commitFooterDrag, commitNavDrag, navDragRef]
+    [commitFooterDrag, commitNavDrag, navDragRef, persistButtonCollectionDrag]
   );
   const handleItemChromePointerDown = (0, import_react19.useCallback)((e) => {
     if (e.button !== 0) return;
     const selected = selectedElRef.current;
     if (!selected) return;
+    if (isCtaButton(selected) && collectionDragEnabled(selected)) {
+      buttonPointerDragRef.current = {
+        el: selected,
+        startX: e.clientX,
+        startY: e.clientY,
+        pointerId: e.pointerId,
+        started: false
+      };
+      return;
+    }
     const hrefKey = selected.getAttribute("data-ohw-href-key");
     if (hrefKey && isFooterHrefKey(hrefKey)) {
       footerPointerDragRef.current = {
@@ -20673,10 +22285,29 @@ function OhhwellsBridge() {
     setIsFooterFrameSelection(false);
     setToolbarVariant("link-action");
     setToolbarRect(anchor.getBoundingClientRect());
+    if (glowElRef.current) glowElRef.current.style.display = "";
     setToolbarShowEditLink(false);
     setActiveCommands(/* @__PURE__ */ new Set());
-    setFloatingPanel(null);
-    setLogoSizeDraft(null);
+    const panel = floatingPanelRef.current;
+    if (panel?.kind === "button-style" && isCtaButton(anchor)) {
+      const id = buttonId(anchor);
+      if (id && panel.buttonId !== id) {
+        captureButtonOrigin(anchor);
+        setFloatingPanelPos(null);
+        setParentScrollSnap(parentScrollRef.current);
+        setFloatingPanel({
+          ...panel,
+          key: `button-style:${id}`,
+          buttonId: id,
+          context: buttonStyleContext(anchor)
+        });
+        setButtonStyleTick((n) => n + 1);
+      }
+    } else {
+      setFloatingPanel(null);
+      setFloatingPanelPos(null);
+      setLogoSizeDraft(null);
+    }
   }, [deactivate, markSelected]);
   const selectFrame = (0, import_react19.useCallback)((el) => {
     if (!isNavigationContainer(el)) return;
@@ -20716,6 +22347,7 @@ function OhhwellsBridge() {
     setToolbarShowEditLink(false);
     setActiveCommands(/* @__PURE__ */ new Set());
     setFloatingPanel(null);
+    setFloatingPanelPos(null);
     setLogoSizeDraft(null);
   }, [deactivate, markSelected, postToParent2]);
   const selectLogo = (0, import_react19.useCallback)(
@@ -20761,6 +22393,7 @@ function OhhwellsBridge() {
     });
   }, []);
   const openSocialsDisplayPanel = (0, import_react19.useCallback)((row) => {
+    setFloatingPanelPos(null);
     setParentScrollSnap(parentScrollRef.current);
     setFloatingPanel({
       key: "socials-display",
@@ -20770,6 +22403,87 @@ function OhhwellsBridge() {
       row
     });
   }, []);
+  const rememberButtonTokens = (0, import_react19.useCallback)(
+    (content, tokens, nodes) => {
+      if (nodes.length === 0) return content;
+      const next = { ...content };
+      for (const node of nodes) next[node.key] = node.text;
+      editContentRef.current = next;
+      postToParent2({ type: "ow:change", nodes });
+      return next;
+    },
+    [postToParent2]
+  );
+  const tokensForButton = (0, import_react19.useCallback)(
+    (el, persistFallback = false) => {
+      const stored = readStoredStyleTokens(editContentRef.current);
+      if (stored) return stored;
+      const ensured = ensureButtonStyleTokens(document, editContentRef.current);
+      if (ensured.tokens) {
+        rememberButtonTokens(editContentRef.current, ensured.tokens, ensured.nodes);
+        return ensured.tokens;
+      }
+      const fallback = tokensFromButton(el);
+      if (persistFallback) rememberButtonTokens(editContentRef.current, fallback, styleTokenNodes(fallback));
+      return fallback;
+    },
+    [rememberButtonTokens]
+  );
+  const openButtonStylePanel = (0, import_react19.useCallback)(
+    (anchor) => {
+      const id = buttonId(anchor);
+      if (!id) return;
+      captureButtonOrigin(anchor);
+      tokensForButton(anchor);
+      setFloatingPanelPos(null);
+      setParentScrollSnap(parentScrollRef.current);
+      setFloatingPanel({
+        key: `button-style:${id}`,
+        title: "Style",
+        context: buttonStyleContext(anchor),
+        kind: "button-style",
+        buttonId: id
+      });
+    },
+    [tokensForButton]
+  );
+  const applySelectedButtonStyle = (0, import_react19.useCallback)(
+    (patch) => {
+      const panel = floatingPanelRef.current;
+      const id = panel?.kind === "button-style" ? panel.buttonId : null;
+      const el = id ? document.querySelector(`[data-ohw-href-key="${CSS.escape(id)}"]`) : null;
+      if (!el || !id || !isCtaButton(el)) return;
+      const tokens = tokensFromButton(el);
+      const next = { ...assignmentFor(el, editContentRef.current, tokens), ...patch };
+      const assignments = withAssignment(editContentRef.current, id, next);
+      const text = JSON.stringify(assignments);
+      editContentRef.current = { ...editContentRef.current, [BUTTON_ASSIGNMENTS_KEY]: text };
+      applyButtonStyle(el, next, tokens);
+      postToParent2({ type: "ow:change", nodes: [{ key: BUTTON_ASSIGNMENTS_KEY, text }] });
+      setButtonStyleTick((n) => n + 1);
+      if (selectedElRef.current === el) setToolbarRect(el.getBoundingClientRect());
+    },
+    [postToParent2]
+  );
+  (0, import_react19.useEffect)(() => {
+    const onDragOver = (e) => {
+      const dragged = buttonCollectionDragRef.current;
+      if (!dragged) return;
+      e.preventDefault();
+      if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
+      refreshButtonDragVisuals(dragged, e.clientX, e.clientY);
+    };
+    const onDrop = (e) => {
+      if (!buttonCollectionDragRef.current) return;
+      e.preventDefault();
+    };
+    document.addEventListener("dragover", onDragOver);
+    document.addEventListener("drop", onDrop);
+    return () => {
+      document.removeEventListener("dragover", onDragOver);
+      document.removeEventListener("drop", onDrop);
+    };
+  }, [refreshButtonDragVisuals]);
   const isEditModeRef = (0, import_react19.useRef)(false);
   const requestMissingSocialIconsRef = (0, import_react19.useRef)(() => {
   });
@@ -20812,11 +22526,13 @@ function OhhwellsBridge() {
   );
   const closeFloatingPanelOnly = (0, import_react19.useCallback)(() => {
     setFloatingPanel(null);
+    setFloatingPanelPos(null);
     setLogoSizeDraft(null);
   }, []);
   closeFloatingPanelOnlyRef.current = closeFloatingPanelOnly;
   const closeFloatingPanelAndDeselect = (0, import_react19.useCallback)(() => {
     setFloatingPanel(null);
+    setFloatingPanelPos(null);
     setLogoSizeDraft(null);
     deselectRef.current();
   }, []);
@@ -21085,6 +22801,7 @@ function OhhwellsBridge() {
       reconcileSocialsFromContent(content);
       applySocialsDisplayFromContent(content);
       applySocialsLabelsFromContent(content, document, { fillEmptyOnly: isEditModeRef.current });
+      syncButtonsFromContent(document, content);
       if (isEditModeRef.current) requestMissingSocialIconsRef.current();
       if (typeof content[STYLE_STORE_KEY] === "string") {
         applyStylesToDom(parseStyleStore(content[STYLE_STORE_KEY]));
@@ -21285,6 +23002,7 @@ function OhhwellsBridge() {
         reconcileSocialsFromContent(content);
         applySocialsDisplayFromContent(content);
         applySocialsLabelsFromContent(content, document, { fillEmptyOnly: isEditModeRef.current });
+        syncButtonsFromContent(document, content);
         if (isEditModeRef.current) requestMissingSocialIconsRef.current();
         if (typeof content[STYLE_STORE_KEY] === "string") {
           applyStylesToDom(parseStyleStore(content[STYLE_STORE_KEY]));
@@ -21373,7 +23091,10 @@ function OhhwellsBridge() {
     if (roots.length === 0) {
       reconcileNavbarItemsFromContent(contentForNav());
       reconcileFooterOrderFromContent(contentForNav());
-      if (isEditMode) syncNavigationDragCursorAttrs();
+      if (isEditMode) {
+        syncButtonsFromContent(document, contentForNav());
+        syncNavigationDragCursorAttrs();
+      }
       return;
     }
     let rafId = null;
@@ -21385,7 +23106,7 @@ function OhhwellsBridge() {
       }
     };
     const run = () => {
-      if (footerDragRef.current || navDragRef.current || applying) return;
+      if (footerDragRef.current || navDragRef.current || buttonCollectionDragRef.current || applying) return;
       applying = true;
       observer?.disconnect();
       try {
@@ -21395,6 +23116,7 @@ function OhhwellsBridge() {
         reconcileSocialsFromContent(content);
         applySocialsDisplayFromContent(content);
         applySocialsLabelsFromContent(content, document, { fillEmptyOnly: isEditModeRef.current });
+        syncButtonsFromContent(document, content);
         if (isEditModeRef.current) requestMissingSocialIconsRef.current();
         document.querySelectorAll("footer [data-ohw-href-key]").forEach((el) => {
           if (isFooterHrefKey(el.getAttribute("data-ohw-href-key")) || getSocialItem(el)) {
@@ -21402,9 +23124,9 @@ function OhhwellsBridge() {
           }
         });
         document.querySelectorAll(
-          "nav [data-ohw-href-key], [data-ohw-nav-container] [data-ohw-href-key], [data-ohw-nav-drawer] [data-ohw-href-key]"
+          'nav [data-ohw-href-key], [data-ohw-nav-container] [data-ohw-href-key], [data-ohw-nav-drawer] [data-ohw-href-key], [data-ohw-role="navbar-button"]'
         ).forEach((el) => {
-          if (isNavbarHrefKey(el.getAttribute("data-ohw-href-key"))) {
+          if (isNavbarHrefKey(el.getAttribute("data-ohw-href-key")) || isCtaButton(el)) {
             disableNativeHrefDrag(el);
           }
         });
@@ -21429,6 +23151,44 @@ function OhhwellsBridge() {
       observer?.disconnect();
     };
   }, [isEditMode, pathname, subdomain, fetchState, resyncSelectedNavigationItem]);
+  (0, import_react19.useEffect)(() => {
+    if (!isEditMode) return;
+    let applying = false;
+    let rafId = null;
+    const run = () => {
+      if (applying || buttonCollectionDragRef.current) return;
+      const content = editContentRef.current;
+      if (!content[BUTTON_COLLECTIONS_KEY] && !content[BUTTON_SNAPSHOTS_KEY]) return;
+      applying = true;
+      try {
+        syncButtonsFromContent(document, content);
+      } finally {
+        applying = false;
+      }
+    };
+    const schedule = () => {
+      if (rafId != null) return;
+      rafId = requestAnimationFrame(() => {
+        rafId = null;
+        run();
+      });
+    };
+    const observer = new MutationObserver((mutations) => {
+      if (mutations.every((m) => {
+        const t = m.target;
+        return t instanceof Element && Boolean(t.closest("[data-ohw-bridge], [data-ohw-bridge-root], [data-ohw-button-collection]"));
+      })) {
+        return;
+      }
+      schedule();
+    });
+    observer.observe(document.body, { childList: true, subtree: true });
+    run();
+    return () => {
+      if (rafId != null) cancelAnimationFrame(rafId);
+      observer.disconnect();
+    };
+  }, [isEditMode, pathname]);
   (0, import_react19.useEffect)(() => {
     if (!isEditMode) return;
     let lastPosted = 0;
@@ -21955,14 +23715,6 @@ function OhhwellsBridge() {
         }
         const clickedButton = findClosestButtonLike(target);
         const buttonOnMedia = Boolean(clickedButton && isMediaEditable(editable) && editable.contains(clickedButton));
-        console.log("[click-debug]", {
-          editableType: editable.dataset.ohwEditable,
-          editableTag: editable.tagName,
-          targetTag: target.tagName,
-          clickedButtonTag: clickedButton?.tagName ?? null,
-          buttonOnMedia,
-          isMediaEditableEditable: isMediaEditable(editable)
-        });
         if (isMediaEditable(editable) && !buttonOnMedia) {
           e.preventDefault();
           e.stopPropagation();
@@ -21997,11 +23749,6 @@ function OhhwellsBridge() {
         const hrefLookupTarget = buttonOnMedia ? clickedButton : editable;
         const hrefCtx = getHrefKeyFromElement(hrefLookupTarget);
         const navAnchor = hrefCtx ? getNavigationItemAnchor(hrefCtx.anchor) : null;
-        console.log("[click-debug 2]", {
-          hrefLookupTargetTag: hrefLookupTarget.tagName,
-          hrefCtx: hrefCtx ? { key: hrefCtx.key } : null,
-          navAnchorTag: navAnchor?.tagName ?? null
-        });
         if (navAnchor) {
           e.preventDefault();
           e.stopPropagation();
@@ -22517,6 +24264,20 @@ function OhhwellsBridge() {
         }
         return;
       }
+      const navbarCtaHit = findNavbarCtaAtPoint(x, y);
+      if (navbarCtaHit) {
+        hoveredNavContainerRef.current = null;
+        setHoveredNavContainerRect(null);
+        if (selected !== navbarCtaHit && !selected?.contains(navbarCtaHit)) {
+          clearHrefKeyHover(navbarCtaHit);
+          hoveredItemElRef.current = navbarCtaHit;
+          setHoveredItemRect(navbarCtaHit.getBoundingClientRect());
+        } else if (hoveredItemElRef.current === navbarCtaHit) {
+          hoveredItemElRef.current = null;
+          setHoveredItemRect(null);
+        }
+        return;
+      }
       const navContainers = Array.from(
         document.querySelectorAll("[data-ohw-nav-container]")
       );
@@ -22619,6 +24380,24 @@ function OhhwellsBridge() {
         return;
       }
       const { x, y } = toProbeCoords(clientX, clientY, fromParentViewport);
+      if (!isDragOver) {
+        const buttonHit = findButtonAtPoint(x, y);
+        if (buttonHit) {
+          dismissImageHover();
+          if (findNavbarCtaAtPoint(x, y)) {
+            probeNavigationHoverAt(x, y);
+            return;
+          }
+          document.querySelectorAll("[data-ohw-hovered]").forEach((el) => el.removeAttribute("data-ohw-hovered"));
+          const selected = selectedElRef.current;
+          if (selected !== buttonHit && !selected?.contains(buttonHit)) {
+            clearHrefKeyHover(buttonHit);
+            hoveredItemElRef.current = buttonHit;
+            setHoveredItemRect(buttonHit.getBoundingClientRect());
+          }
+          return;
+        }
+      }
       if (isPointOverNavigation(x, y)) {
         dismissImageHover();
         probeNavigationHoverAt(x, y);
@@ -23040,6 +24819,11 @@ function OhhwellsBridge() {
         return;
       }
       if (onNavDragOver(e)) return;
+      if (buttonCollectionDragRef.current) {
+        e.preventDefault();
+        if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
+        return;
+      }
       e.preventDefault();
       const el = findImageAtPoint(e.clientX, e.clientY, false);
       if (!el) {
@@ -23064,6 +24848,7 @@ function OhhwellsBridge() {
     };
     const handleDrop = (e) => {
       e.preventDefault();
+      if (buttonCollectionDragRef.current || navDragRef.current || footerDragRef.current) return;
       const el = findImageAtPoint(e.clientX, e.clientY, false);
       if (!el) return;
       const file = e.dataTransfer?.files?.[0];
@@ -23419,6 +25204,7 @@ function OhhwellsBridge() {
       editContentRef.current = { ...editContentRef.current, ...content };
       reconcileNavbarItemsFromContent(editContentRef.current);
       reconcileFooterOrderFromContent(editContentRef.current);
+      syncButtonsFromContent(document, editContentRef.current);
       syncNavigationDragCursorAttrs();
       if (typeof content[STYLE_STORE_KEY] === "string") {
         applyStylesToDom(parseStyleStore(content[STYLE_STORE_KEY]));
@@ -24328,11 +26114,8 @@ function OhhwellsBridge() {
     };
     const handleParentScroll = (e) => {
       if (e.data?.type !== "ow:parent-scroll") return;
-      const { iframeOffsetTop, headerH, canvasH } = e.data;
-      parentScrollRef.current = { iframeOffsetTop, headerH, canvasH };
-      if (floatingPanelOpenRef.current) {
-        setParentScrollSnap({ iframeOffsetTop, headerH, canvasH });
-      }
+      const { iframeOffsetTop, headerH, canvasH, promptBarH = 0 } = e.data;
+      parentScrollRef.current = { iframeOffsetTop, headerH, canvasH, promptBarH };
       if (visibleViewportRef.current) {
         applyVisibleViewport(visibleViewportRef.current, parentScrollRef.current);
       }
@@ -24722,6 +26505,97 @@ function OhhwellsBridge() {
       unlockFooterDragInteraction();
     };
   }, [isEditMode]);
+  (0, import_react19.useEffect)(() => {
+    if (!isEditMode) return;
+    const THRESHOLD = 10;
+    const onPointerDown = (e) => {
+      if (e.button !== 0) return;
+      if (buttonCollectionDragRef.current || navDragRef.current || footerDragRef.current) return;
+      if (buttonPointerDragRef.current) return;
+      const target = e.target;
+      if (!target) return;
+      if (target.closest(
+        '[data-ohw-drag-handle-container], [data-slot="drag-handle"], [data-ohw-toolbar], [data-ohw-item-toolbar-anchor], [data-ohw-link-popover-root], [data-ohw-floating-panel]'
+      )) {
+        return;
+      }
+      const fromTarget = target.closest('[data-ohw-role="navbar-button"]');
+      const anchor = (fromTarget && !fromTarget.closest("[data-ohw-bridge]") ? fromTarget : null) ?? findNavbarCtaAtPoint(e.clientX, e.clientY);
+      if (!anchor || !collectionDragEnabled(anchor)) return;
+      disableNativeHrefDrag(anchor);
+      setMediaHover(null);
+      buttonPointerDragRef.current = {
+        el: anchor,
+        startX: e.clientX,
+        startY: e.clientY,
+        pointerId: e.pointerId,
+        started: false
+      };
+    };
+    const onPointerMove = (e) => {
+      const pending = buttonPointerDragRef.current;
+      if (!pending) return;
+      if (pending.started) {
+        e.preventDefault();
+        clearTextSelection();
+        const dragged = buttonCollectionDragRef.current;
+        if (!dragged) return;
+        refreshButtonDragVisuals(dragged, e.clientX, e.clientY);
+        return;
+      }
+      const dx = e.clientX - pending.startX;
+      const dy = e.clientY - pending.startY;
+      if (dx * dx + dy * dy < THRESHOLD * THRESHOLD) return;
+      e.preventDefault();
+      pending.started = true;
+      armFooterPressDrag();
+      clearTextSelection();
+      try {
+        document.body.setPointerCapture(pending.pointerId);
+      } catch {
+      }
+      if (linkPopoverOpenRef.current) setLinkPopoverRef.current(null);
+      if (activeElRef.current) deactivateRef.current();
+      ensureNavbarButtonCollection(pending.el, editContentRef.current);
+      buttonCollectionDragRef.current = pending.el;
+      lockFooterDuringDrag();
+      setIsItemDragging(true);
+      refreshButtonDragVisuals(pending.el, e.clientX, e.clientY);
+    };
+    const endPointerDrag = (e) => {
+      const pending = buttonPointerDragRef.current;
+      buttonPointerDragRef.current = null;
+      try {
+        if (document.body.hasPointerCapture(e.pointerId)) {
+          document.body.releasePointerCapture(e.pointerId);
+        }
+      } catch {
+      }
+      if (!pending) return;
+      if (!pending.started) {
+        unlockFooterDragInteraction();
+        return;
+      }
+      suppressNextClickRef.current = true;
+      suppressClickUntilRef.current = Date.now() + 500;
+      persistButtonCollectionDrag(pending.el, e.clientX);
+    };
+    const blockSelectStart = (e) => {
+      if (buttonCollectionDragRef.current || buttonPointerDragRef.current?.started) e.preventDefault();
+    };
+    document.addEventListener("pointerdown", onPointerDown, true);
+    document.addEventListener("pointermove", onPointerMove, true);
+    document.addEventListener("pointerup", endPointerDrag, true);
+    document.addEventListener("pointercancel", endPointerDrag, true);
+    document.addEventListener("selectstart", blockSelectStart, true);
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown, true);
+      document.removeEventListener("pointermove", onPointerMove, true);
+      document.removeEventListener("pointerup", endPointerDrag, true);
+      document.removeEventListener("pointercancel", endPointerDrag, true);
+      document.removeEventListener("selectstart", blockSelectStart, true);
+    };
+  }, [isEditMode, persistButtonCollectionDrag, refreshButtonDragVisuals]);
   (0, import_react19.useEffect)(() => {
     const handler = (e) => {
       if (e.data?.type !== "ow:request-schedule-config") return;
@@ -24762,7 +26636,7 @@ function OhhwellsBridge() {
       postToParent2({
         type: "ow:ready",
         version: "1",
-        bridgeVersion: "0.1.120",
+        bridgeVersion: "0.1.121",
         path: pathname,
         nodes: collectEditableNodes(editContentRef.current),
         sections
@@ -24841,12 +26715,12 @@ function OhhwellsBridge() {
         return;
       }
       if (type !== "ow:logo-size-set") return;
-      const px = Number(e.data.px);
-      if (!Number.isFinite(px)) return;
-      const next = editorViewport === "mobile" ? { ...logoSizeDraft, mobilePx: px, mobileFollowing: false } : {
+      const px2 = Number(e.data.px);
+      if (!Number.isFinite(px2)) return;
+      const next = editorViewport === "mobile" ? { ...logoSizeDraft, mobilePx: px2, mobileFollowing: false } : {
         ...logoSizeDraft,
-        desktopPx: px,
-        mobilePx: logoSizeDraft.mobileFollowing ? px : logoSizeDraft.mobilePx
+        desktopPx: px2,
+        mobilePx: logoSizeDraft.mobileFollowing ? px2 : logoSizeDraft.mobilePx
       };
       setLogoSizeDraft(next);
       persistLogoSizeDraft(session.placement, next);
@@ -24944,6 +26818,36 @@ function OhhwellsBridge() {
   const handleDuplicateSelected = (0, import_react19.useCallback)(() => {
     const selected = selectedElRef.current;
     if (!selected || !isNavigationItem2(selected)) return;
+    if (isCtaButton(selected)) {
+      const id = buttonId(selected);
+      if (!id) return;
+      const tokens = tokensForButton(selected, true);
+      if (!readAssignments(editContentRef.current)[id]) {
+        const assignment = assignmentFor(selected, editContentRef.current, tokens);
+        const assignments = withAssignment(editContentRef.current, id, assignment);
+        editContentRef.current = {
+          ...editContentRef.current,
+          [BUTTON_ASSIGNMENTS_KEY]: JSON.stringify(assignments)
+        };
+        applyButtonStyle(selected, assignment, tokens);
+      }
+      const result = duplicateButton(selected, editContentRef.current);
+      if (!result) return;
+      editContentRef.current = result.content;
+      const copyHref = result.copy.getAttribute("data-ohw-href-key");
+      const copyHrefVal = copyHref ? result.content[copyHref] : void 0;
+      if (copyHref && copyHrefVal !== void 0) applyLinkByKey(copyHref, copyHrefVal);
+      postToParent2({ type: "ow:change", nodes: result.nodes });
+      enforceLinkHrefs();
+      requestAnimationFrame(() => {
+        selectRef.current(result.copy);
+        requestAnimationFrame(() => {
+          const el = selectedElRef.current;
+          if (el?.isConnected) setToolbarRect(el.getBoundingClientRect());
+        });
+      });
+      return;
+    }
     const hrefKey = selected.getAttribute("data-ohw-href-key");
     if (!hrefKey) return;
     const social = getSocialItem(selected);
@@ -25073,7 +26977,7 @@ function OhhwellsBridge() {
         selectRef.current(result.anchor);
       });
     }
-  }, [postToParent2]);
+  }, [postToParent2, tokensForButton]);
   const runPendingDeleteUndo = (0, import_react19.useCallback)(() => {
     const pending = pendingDeleteUndoRef.current;
     if (!pending) return false;
@@ -25085,6 +26989,38 @@ function OhhwellsBridge() {
   const handleDeleteSelected = (0, import_react19.useCallback)(() => {
     const selected = selectedElRef.current;
     if (!selected) return false;
+    if (isCtaButton(selected)) {
+      if (!canDeleteButton(selected)) return false;
+      const previousContent = editContentRef.current;
+      const result = deleteButton(selected, previousContent);
+      if (!result) return false;
+      editContentRef.current = result.content;
+      postToParent2({ type: "ow:change", nodes: result.nodes });
+      const actionId = typeof crypto !== "undefined" && "randomUUID" in crypto ? crypto.randomUUID() : `delete-${Date.now()}`;
+      const restoreNodes = result.nodes.map((node) => ({
+        key: node.key,
+        text: previousContent[node.key] ?? ""
+      }));
+      pendingDeleteUndoRef.current = {
+        actionId,
+        restore: () => {
+          result.undo();
+          editContentRef.current = { ...editContentRef.current, ...Object.fromEntries(restoreNodes.map((node) => [node.key, node.text])) };
+          postToParent2({ type: "ow:change", nodes: restoreNodes });
+          syncButtonsFromContent(document, editContentRef.current);
+        }
+      };
+      deselectRef.current();
+      postToParent2({
+        type: "ow:toast",
+        title: "Button deleted",
+        toastType: "success",
+        actionLabel: "Undo",
+        actionId,
+        duration: 6e3
+      });
+      return true;
+    }
     return deleteSelectedNavFooterItem({
       selected,
       isTextEditing: Boolean(activeElRef.current),
@@ -25222,14 +27158,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,
@@ -25237,7 +27173,7 @@ function OhhwellsBridge() {
             onSelectionChange: handleAiSectionSelectionChange
           }
         ),
-        isEditMode && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        isEditMode && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           AiMediaStripOverlay,
           {
             postToParent: postToParent2,
@@ -25246,7 +27182,7 @@ function OhhwellsBridge() {
             clearInteractionChromeRef
           }
         ),
-        isEditMode && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        isEditMode && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           AiPricingCardOverlay,
           {
             postToParent: postToParent2,
@@ -25254,12 +27190,12 @@ function OhhwellsBridge() {
             applyTreeLocalRef
           }
         ),
-        isSectionDragging && sectionDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        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",
@@ -25270,7 +27206,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 },
@@ -25281,7 +27217,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,
@@ -25292,7 +27228,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,
@@ -25304,7 +27240,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,
@@ -25312,10 +27248,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 && selectedElRef.current !== buttonCollectionDragRef.current && /* @__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",
@@ -25325,7 +27261,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,
@@ -25336,7 +27272,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",
@@ -25346,7 +27282,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,
@@ -25357,10 +27293,31 @@ 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)(
+        isItemDragging && buttonDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          "div",
+          {
+            className: "pointer-events-none fixed z-2147483646",
+            style: {
+              left: slot.left,
+              top: slot.top,
+              width: slot.width,
+              height: slot.height
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+              DropIndicator,
+              {
+                direction: slot.direction,
+                state: activeButtonDropIndex === i ? "dragActive" : "dragIdle",
+                className: "!h-full !w-full"
+              }
+            )
+          },
+          `button-drop-${slot.direction}-${slot.insertIndex}-${i}`
+        )),
+        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,
@@ -25368,13 +27325,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",
@@ -25382,11 +27339,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",
@@ -25402,11 +27359,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": "",
@@ -25418,8 +27375,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",
@@ -25450,7 +27407,7 @@ function OhhwellsBridge() {
             )
           }
         ),
-        formHoverRect && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        formHoverRect && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           ItemInteractionLayer,
           {
             rect: formHoverRect,
@@ -25458,7 +27415,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,
@@ -25470,7 +27427,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,
@@ -25483,12 +27440,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",
@@ -25501,7 +27458,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]",
@@ -25509,12 +27466,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,
@@ -25522,13 +27479,17 @@ 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,
+            rect: isItemDragging && draggedItemRect && (footerDragRef.current?.wasSelected || navDragRef.current?.wasSelected || selectedElRef.current === buttonCollectionDragRef.current) ? draggedItemRect : toolbarRect,
             toolbarBelowRect: selectedElRef.current && isNavigationItem2(selectedElRef.current) ? getOpenNavDropdownPanelRect(selectedElRef.current) : null,
             toolbarBelowEl: selectedElRef.current && isNavigationItem2(selectedElRef.current) ? getOpenNavDropdownPanel(selectedElRef.current) : null,
             elRef: glowElRef,
+            hidden: isRectOutsideClip(
+              isItemDragging && draggedItemRect && (footerDragRef.current?.wasSelected || navDragRef.current?.wasSelected || selectedElRef.current === buttonCollectionDragRef.current) ? draggedItemRect : toolbarRect,
+              getIframeVisibleClip(parentScrollRef.current)
+            ),
             state: isItemDragging ? "dragging" : selectedElRef.current && isNavigationItem2(selectedElRef.current) && getOpenNavDropdownPanel(selectedElRef.current) ? "active-bottom" : resolveItemInteractionState(toolbarRect, parentScrollRef.current),
             showHandle: toolbarVariant === "link-action" && Boolean(reorderHrefKey) || toolbarVariant === "select-frame" && isFooterFrameSelection,
             dragDisabled: reorderDragDisabled,
@@ -25538,18 +27499,25 @@ 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,
                 onStyle: () => {
                   const row = selectedElRef.current;
                   if (!row) return;
-                  if (floatingPanel?.kind === "socials-display") closeFloatingPanelOnly();
+                  suppressNextClickRef.current = true;
+                  suppressClickUntilRef.current = Date.now() + 500;
+                  if (isCtaButton(row)) {
+                    if (floatingPanelRef.current?.kind === "button-style") closeFloatingPanelOnly();
+                    else openButtonStylePanel(row);
+                    return;
+                  }
+                  if (floatingPanelRef.current?.kind === "socials-display") closeFloatingPanelOnly();
                   else openSocialsDisplayPanel(row);
                 },
-                showStyle: selectedIsSocialsRow,
-                styleActive: floatingPanel?.kind === "socials-display",
+                showStyle: selectedIsSocialsRow || selectedIsCta,
+                styleActive: floatingPanel?.kind === "socials-display" || floatingPanel?.kind === "button-style",
                 onAddItem: handleAddChildItem,
                 onSelectParent: handleSelectParent,
                 onDuplicate: handleDuplicateSelected,
@@ -25560,11 +27528,11 @@ function OhhwellsBridge() {
                 })(),
                 editLinkDisabled: false,
                 moreDisabled: false,
-                deleteDisabled: selectedElRef.current !== null && (() => {
+                deleteDisabled: selectedElRef.current !== null && isCtaButton(selectedElRef.current) && !canDeleteButton(selectedElRef.current) || selectedElRef.current !== null && (() => {
                   const social = getSocialItem(selectedElRef.current);
                   return social ? !canRemoveSocialItem(social) : false;
                 })(),
-                duplicateDisabled: isFooterFrameSelection || selectedIsSocialsRow || selectedElRef.current !== null && (() => {
+                duplicateDisabled: isFooterFrameSelection || selectedIsSocialsRow || selectedElRef.current !== null && isCtaButton(selectedElRef.current) && !canDuplicateButton(selectedElRef.current) || selectedElRef.current !== null && (() => {
                   const social = getSocialItem(selectedElRef.current);
                   const row = social ? findSocialsRow(social) : null;
                   return row ? !canAddSocialItem(row) : false;
@@ -25573,7 +27541,7 @@ function OhhwellsBridge() {
                 showAddItem: isFooterFrameSelection || selectedIsSocialsRow || !selectedIsCta && Boolean(
                   selectedElRef.current && isNavbarHrefKey(selectedElRef.current.getAttribute("data-ohw-href-key")) && !isNestedNavChild(selectedElRef.current)
                 ),
-                showMore: (!selectedIsCta || isFooterFrameSelection) && !selectedIsSocialsRow,
+                showMore: !selectedIsSocialsRow,
                 dropdownOpen: navDropdownPreviewOpen,
                 onDropdownOpenChange: handleNavDropdownOpenChange,
                 headingVisible: footerHeadingVisible,
@@ -25582,8 +27550,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,
@@ -25593,7 +27561,7 @@ function OhhwellsBridge() {
               hideHandle: isItemDragging
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
             FloatingToolbar,
             {
               rect: toolbarRect,
@@ -25606,7 +27574,7 @@ function OhhwellsBridge() {
             }
           )
         ] }),
-        maxBadge && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+        maxBadge && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
           "div",
           {
             "data-ohw-max-badge": "",
@@ -25632,7 +27600,7 @@ function OhhwellsBridge() {
             ]
           }
         ),
-        toggleState && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        toggleState && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           StateToggle,
           {
             rect: toggleState.rect,
@@ -25641,15 +27609,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",
@@ -25666,11 +27634,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,
@@ -25687,7 +27655,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,
@@ -25697,7 +27665,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),
@@ -25708,7 +27676,48 @@ function OhhwellsBridge() {
               }
             )
           }
-        ) : null
+        ) : null,
+        floatingPanel && floatingPanel.kind === "button-style" ? (() => {
+          const button = document.querySelector(
+            `[data-ohw-href-key="${CSS.escape(floatingPanel.buttonId)}"]`
+          );
+          if (!button) return null;
+          captureButtonOrigin(button);
+          const tokens = tokensFromButton(button);
+          const current = assignmentFor(button, editContentRef.current, tokens);
+          void buttonStyleTick;
+          return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+            FloatingPanel,
+            {
+              open: true,
+              title: floatingPanel.title,
+              context: floatingPanel.context,
+              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_runtime36.jsx)(
+                ButtonStylePanel,
+                {
+                  variants: tokens.variants,
+                  sizes: tokens.sizes,
+                  variant: current.variant,
+                  size: current.size,
+                  slotBackground: previewSlotBackground(button),
+                  previewLabel: (button.querySelector(
+                    '[data-ohw-editable="text"], [data-ohw-editable="plain"]'
+                  )?.textContent ?? button.textContent ?? "Book Now").trim() || "Book Now",
+                  onVariant: (variant) => applySelectedButtonStyle({ variant }),
+                  onSize: (size) => applySelectedButtonStyle({ size })
+                },
+                floatingPanel.key
+              )
+            },
+            floatingPanel.key
+          );
+        })() : null
       ] }),
       bridgeRoot
     ) : null