@ohhwells/bridge 0.1.152 → 0.1.153-next.417

package/dist/index.cjs

@@ -83,6 +83,7 @@ __export(index_exports, {
   foldAlignIntoTrees: () => foldAlignIntoTrees,
   getEditModeInitialState: () => getEditModeInitialState,
   hasMountedContentNodes: () => hasMountedContentNodes,
+  indexCollectionItems: () => indexCollectionItems,
   insertFooterHours: () => insertFooterHours,
   isEditSessionActive: () => isEditSessionActive,
   isPlainLeftClick: () => isPlainLeftClick,
@@ -90,6 +91,7 @@ __export(index_exports, {
   isRenderableTree: () => isRenderableTree,
   isStickySearchParam: () => isStickySearchParam,
   isValidUrl: () => isValidUrl,
+  matchCollectionItemClick: () => matchCollectionItemClick,
   nextViableSlide: () => nextViableSlide,
   parseAiFooterState: () => parseAiFooterState,
   parseAiSectionsState: () => parseAiSectionsState,
@@ -6652,6 +6654,21 @@ function pricingCardFeatureCount(tree, index) {
   const target = findPricingCollection(tree)?.children?.[index];
   return target ? pricingFeatureList(target).length : 0;
 }
+function prevailingFeatureIcon(features) {
+  const counts = /* @__PURE__ */ new Map();
+  for (const row of features) {
+    const key = `${row.icon ?? ""}|${row.iconColor ?? ""}`;
+    const entry = counts.get(key) ?? { count: 0, ...row.icon ? { icon: row.icon } : {}, ...row.iconColor ? { iconColor: row.iconColor } : {} };
+    entry.count += 1;
+    counts.set(key, entry);
+  }
+  let best = null;
+  for (const entry of counts.values()) {
+    if (!best || entry.count > best.count) best = entry;
+  }
+  if (!best) return {};
+  return { ...best.icon ? { icon: best.icon } : {}, ...best.iconColor ? { iconColor: best.iconColor } : {} };
+}
 function addPricingCardFeature(tree, index, text) {
   return withPricingCollection(tree, (collection) => {
     const children = collection.children;
@@ -6660,7 +6677,7 @@ function addPricingCardFeature(tree, index, text) {
     const features = pricingFeatureList(target);
     if (features.length >= PRICING_FEATURES_MAX) return false;
     target.slots = target.slots ?? {};
-    target.slots.features = [...features, { text }];
+    target.slots.features = [...features, { text, ...prevailingFeatureIcon(features) }];
     return true;
   });
 }
@@ -7271,6 +7288,21 @@ function applyCustomCodeToHead(content) {
   if (beforeNodes.length > 0) document.head.append(...beforeNodes);
 }
 
+// src/lib/selectNavContainer.ts
+function isOnScreen(el) {
+  const rect = el.getBoundingClientRect();
+  if (rect.width <= 0 || rect.height <= 0) return false;
+  if (el.offsetParent !== null) return true;
+  return getComputedStyle(el).position === "fixed";
+}
+function findSelectableNavContainer(doc = document) {
+  const visible = Array.from(doc.querySelectorAll("[data-ohw-nav-container]")).filter(isOnScreen);
+  if (visible.length === 0) return null;
+  return visible.reduce(
+    (best, el) => el.getBoundingClientRect().top < best.getBoundingClientRect().top ? el : best
+  );
+}
+
 // src/ui/ai-tree/aiSectionsManager.tsx
 var import_react_dom = require("react-dom");
 var import_client = require("react-dom/client");
@@ -7844,7 +7876,7 @@ var AI_MOBILE_CSS = [
   // page's first section. Top only (bottom needs no nav clearance); ~96px approximates the
   // template nav's own height (measured ~94px) — there's no shared `--ohw-header-h` var to read
   // an exact figure from (no live measurement exists), so this is a safe approximation, not a
-  // pixel-exact fit. Horizontal spacing already comes from `data-ai-container`.
+  // pixel-exact fit. Horizontal spacing already comes from `data-ai-section-inner`.
   '[data-ai-overlay-clearance] [data-ai-overlap-layer="overlay"]{padding-top:96px}',
   // A full-bleed carousel's height is pure arithmetic: it spans the whole window, so 16/9 turns
   // window width straight into height. Measured at 16/9 it came out ~90% of the viewport at EVERY
@@ -7860,8 +7892,10 @@ var AI_MOBILE_CSS = [
   "[data-ai-section]{overflow-x:hidden}",
   // `:not([data-ai-full-bleed])`: this `!important` gutter beat the inline `padding: 0` that a
   // full-bleed section's container sets, so a carousel/media hero that is edge-to-edge on desktop
-  // still got a 20px band of section background down both sides on a phone.
-  "[data-ai-container]:not([data-ai-full-bleed]){padding:0 20px !important}",
+  // still got a 20px band of section background down both sides on a phone. The footer's own
+  // container keeps the unguarded rule below — `data-ai-full-bleed` can never appear on it.
+  "[data-ai-section-inner]:not([data-ai-full-bleed]){padding:0 20px !important}",
+  "[data-ai-container]{padding:0 20px !important}",
   "[data-ai-row]{display:flex !important;flex-direction:column !important;align-items:stretch !important}",
   "[data-ai-cell]{width:100%;min-width:0}",
   // The rule above turns every row into a COLUMN flex container on phones, which silently breaks
@@ -8066,6 +8100,31 @@ function pricingCardEmphasis(featured, ctx, hasBg) {
 function textAttrs(ctx, path) {
   return ctx.keyFor ? { "data-ohw-key": ctx.keyFor(path), "data-ohw-editable": "text" } : {};
 }
+var AI_RESPONSIVE_CSS = [
+  "@media (max-width: 960px) {",
+  "  [data-ai-responsive] [data-ai-grid] { grid-template-columns: repeat(2, 1fr) !important; }",
+  '  [data-ai-responsive] [data-ai-grid="1"] { grid-template-columns: 1fr !important; }',
+  "}",
+  "@media (max-width: 640px) {",
+  "  [data-ai-responsive] [data-ai-grid] { grid-template-columns: 1fr !important; }",
+  "  [data-ai-responsive] [data-ai-columns] > * { grid-column: 1 / -1 !important; }",
+  // Group containers flatten to a column on phones; span placements come along for free.
+  // `:not([data-ai-group="overlap"])` for the same reason as the twin pair in AI_MOBILE_CSS — see
+  // the comment there. This sheet's copy is the narrower selector, so without the exemption it
+  // flattens an `overlap` hero below 640px even though the other rule stands down: measured a 390px
+  // viewport with the heading/CTA in flow *under* the image, 219px of section background where the
+  // layered text used to be.
+  '  [data-ai-responsive] [data-ai-group]:not([data-ai-group="overlap"]) { display: flex !important; flex-direction: column !important; }',
+  '  [data-ai-responsive] [data-ai-group]:not([data-ai-group="overlap"]) > * { grid-column: auto !important; }',
+  // `:not([data-ai-full-bleed])` for the same reason as the twin rule in AI_MOBILE_CSS: this one
+  // is narrower (0,2,0 vs 0,1,0) and also `!important`, so without the guard it wins outright and
+  // a full-bleed hero gets its 20px side band back below 640px only — the one width where the
+  // other rule had already been taught to stand down.
+  "  [data-ai-responsive] [data-ai-section-inner]:not([data-ai-full-bleed]) { padding-left: 20px !important; padding-right: 20px !important; }",
+  "  [data-ai-responsive] { overflow-x: hidden; }",
+  "  [data-ai-responsive] img { max-width: 100%; }",
+  "}"
+].join("\n");
 var TRANSPARENT_PX = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
 function MediaBox({
   refValue,
@@ -8120,7 +8179,7 @@ function MediaBox({
         position: fill ? "absolute" : void 0,
         inset: fill ? 0 : void 0,
         width: fill ? "100%" : fixedSize ? "auto" : "100%",
-        height: fill ? "100%" : void 0,
+        height: fill ? "100%" : fixedSize ? height : void 0,
         aspectRatio: fill ? void 0 : aspectRatio,
         minHeight: fill || fixedSize ? void 0 : height ?? (aspectRatio ? void 0 : 180),
         borderRadius: radius,
@@ -9616,7 +9675,7 @@ function CollectionBlock({ node, ctx, path }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
-      "data-ai-grid": "",
+      "data-ai-grid": String(itemsPerRow),
       "data-ohw-pricing-collection": isPricing ? "" : void 0,
       style: {
         display: "grid",
@@ -9918,7 +9977,7 @@ function renderNode(node, ctx, path, ambientAlign) {
                 },
                 children: [
                   i > 0 && ctx.heroOverlapFullBleed ? (
-                    // The section's `data-ai-container` gave up its max-width/gutter so the base
+                    // The section's `data-ai-section-inner` gave up its max-width/gutter so the base
                     // layer (this group's i===0 sibling) can span edge-to-edge — reintroduced here,
                     // scoped to just the overlay text, so a heading/copy/CTA stack doesn't stretch
                     // the full section width instead of reading at the usual content width.
@@ -10337,6 +10396,7 @@ function AiTreeRenderer({
       ...fillHeight ? { "data-ai-fill-height": "" } : {},
       ...needsOverlayClearance ? { "data-ai-overlay-clearance": "" } : {},
       ...bgAttrs,
+      "data-ai-responsive": "",
       style: {
         position: "relative",
         padding: `${padCss} 0`,
@@ -10350,12 +10410,13 @@ function AiTreeRenderer({
         ...fillHeight ? { display: "grid" } : {}
       },
       children: [
-        isOverlay && backgroundUrl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { position: "absolute", inset: 0, background: `rgba(255,255,255,${overlayAlpha})` } }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: AI_RESPONSIVE_CSS }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: AI_MOBILE_CSS }),
+        isOverlay && backgroundUrl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { position: "absolute", inset: 0, background: `rgba(255,255,255,${overlayAlpha})` } }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "div",
           {
-            "data-ai-container": "",
+            "data-ai-section-inner": "",
             ...fullBleedMedia ? { "data-ai-full-bleed": "" } : {},
             style: {
               position: "relative",
@@ -10372,7 +10433,7 @@ function AiTreeRenderer({
             children: tree.rows.map((row, r2) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               "div",
               {
-                "data-ai-row": "",
+                "data-ai-columns": "",
                 style: {
                   display: "grid",
                   gridTemplateColumns: "repeat(12, 1fr)",
@@ -11034,9 +11095,10 @@ function applyAiSectionsToDom(state, options) {
     if (existing && existing.serialized === serialized && existing.container.isConnected) {
       continue;
     }
-    const isNewMount = !existing || !existing.container.isConnected;
     let container = existing?.container;
+    let isNewMount = false;
     if (!container || !container.isConnected) {
+      isNewMount = true;
       existing?.root.unmount();
       container?.remove();
       container = document.createElement("div");
@@ -11680,6 +11742,172 @@ function useLinkHrefGuardian(...deps) {
   }, deps);
 }
 
+// src/ui/link-modal/linkModal.utils.ts
+function parseTarget(target) {
+  if (!target) return { pageRoute: "", sectionId: null };
+  const hashIndex = target.indexOf("#");
+  if (hashIndex === -1) return { pageRoute: target, sectionId: null };
+  return {
+    pageRoute: target.slice(0, hashIndex),
+    sectionId: target.slice(hashIndex + 1) || null
+  };
+}
+function normalizePath(path) {
+  const trimmed = path.trim();
+  if (!trimmed) return "/";
+  try {
+    if (/^https?:\/\//i.test(trimmed)) {
+      return new URL(trimmed).pathname || "/";
+    }
+  } catch {
+  }
+  const withSlash = trimmed.startsWith("/") ? trimmed : `/${trimmed}`;
+  if (withSlash.length > 1 && withSlash.endsWith("/")) return withSlash.slice(0, -1);
+  return withSlash;
+}
+function findPageByPath(pages, path) {
+  const normalized = normalizePath(path);
+  return pages.find((p) => normalizePath(p.path) === normalized);
+}
+function inferPageTitleFromPath(path) {
+  const normalized = normalizePath(path);
+  if (normalized === "/") return "Home";
+  const segment = normalized.split("/").filter(Boolean).pop() ?? "";
+  if (!segment) return "Home";
+  return segment.split("-").filter(Boolean).map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
+}
+function isInternalPath(route) {
+  const trimmed = route.trim();
+  if (!trimmed) return false;
+  if (/^https?:\/\//i.test(trimmed)) return false;
+  if (trimmed.startsWith("/")) return true;
+  if (trimmed.includes(" ") || trimmed.includes(".")) return false;
+  return true;
+}
+function resolvePage(route, pages) {
+  const found = findPageByPath(pages, route);
+  if (found) return { path: found.path, title: found.title };
+  return { path: normalizePath(route), title: inferPageTitleFromPath(route) };
+}
+function getSectionsForPath(sectionsByPath, pageRoute) {
+  if (!sectionsByPath) return [];
+  const normalized = normalizePath(pageRoute);
+  return sectionsByPath[normalized] ?? sectionsByPath[pageRoute] ?? [];
+}
+function buildTarget(page, section) {
+  if (section) return `${page.path}#${section.id}`;
+  return page.path;
+}
+function isValidUrl(urlString) {
+  try {
+    const url = new URL(urlString);
+    if (url.protocol !== "http:" && url.protocol !== "https:") return false;
+    const hostname = url.hostname;
+    if (!hostname || hostname.length === 0) return false;
+    if (hostname.includes(" ")) return false;
+    if (hostname === "localhost") return true;
+    if (!hostname.includes(".")) return false;
+    if (!/[a-z]/i.test(hostname)) return false;
+    return true;
+  } catch {
+    return false;
+  }
+}
+function normalizeUrl(value) {
+  const trimmed = value.trim();
+  if (trimmed.startsWith("http://") || trimmed.startsWith("https://")) return trimmed;
+  return `https://${trimmed}`;
+}
+function validateUrlInput(value, pages, allPages) {
+  const trimmed = value.trim();
+  if (!trimmed) return "";
+  const exactPage = allPages.find((p) => p.title.toLowerCase() === trimmed.toLowerCase());
+  if (exactPage) return "";
+  const hasPrefixMatch = pages.some((p) => p.title.toLowerCase().startsWith(trimmed.toLowerCase()));
+  if (hasPrefixMatch) {
+    return "Select a page from the list or enter a valid URL";
+  }
+  const hasScheme = /^https?:\/\//i.test(trimmed);
+  if (!hasScheme && !trimmed.includes(".")) {
+    return "Please enter a valid URL (e.g., https://example.com)";
+  }
+  if (!isValidUrl(normalizeUrl(trimmed))) {
+    return "Please enter a valid URL (e.g., https://example.com)";
+  }
+  return "";
+}
+function getEditModeInitialState(target, pages, sections) {
+  const empty = {
+    searchValue: "",
+    selectedPage: null,
+    selectedSection: null,
+    step: "input"
+  };
+  if (!target) return empty;
+  if (isValidUrl(normalizeUrl(target))) {
+    return { searchValue: target, selectedPage: null, selectedSection: null, step: "input" };
+  }
+  const { pageRoute, sectionId } = parseTarget(target);
+  if (sectionId) {
+    if (isInternalPath(pageRoute)) {
+      const page = resolvePage(pageRoute, pages);
+      const sec = sections.find((s) => s.id === sectionId);
+      return {
+        searchValue: page.title,
+        selectedPage: page,
+        selectedSection: sec ? { id: sec.id, label: sec.label } : null,
+        step: "input"
+      };
+    }
+    return { searchValue: pageRoute || target, selectedPage: null, selectedSection: null, step: "input" };
+  }
+  if (isInternalPath(pageRoute)) {
+    const page = resolvePage(pageRoute, pages);
+    return {
+      searchValue: page.title,
+      selectedPage: page,
+      selectedSection: null,
+      step: "input"
+    };
+  }
+  return { searchValue: target, selectedPage: null, selectedSection: null, step: "input" };
+}
+function filterAvailablePages(pages, existingTargets) {
+  const taken = new Set(existingTargets);
+  return pages.filter((p) => !taken.has(p.path));
+}
+
+// src/lib/collection-item-click.ts
+function indexCollectionItems(pages) {
+  const index = /* @__PURE__ */ new Map();
+  for (const page of pages) {
+    if (page.kind !== "COLLECTION_ITEM" || !page.collection || !page.path) continue;
+    index.set(normalizePath(page.path), { path: page.path, collection: page.collection });
+  }
+  return index;
+}
+function pathOfHref(href) {
+  const trimmed = href.trim();
+  if (!trimmed || trimmed.startsWith("#")) return null;
+  if (/^[a-z][a-z0-9+.-]*:/i.test(trimmed) && !/^https?:/i.test(trimmed)) return null;
+  const withoutHash = trimmed.split("#")[0];
+  const withoutQuery = withoutHash.split("?")[0];
+  if (!withoutQuery) return null;
+  return normalizePath(withoutQuery);
+}
+function matchCollectionItemClick(target, index) {
+  if (!target || index.size === 0) return null;
+  const text = target.closest('[data-ohw-editable="text"], [data-ohw-editable="plain"]');
+  if (!text) return null;
+  const anchor = text.closest("a");
+  if (!anchor || anchor.closest(CTA_BUTTON_SELECTOR)) return null;
+  const href = anchor.getAttribute("href");
+  if (!href) return null;
+  const path = pathOfHref(href);
+  if (!path) return null;
+  return index.get(path) ?? null;
+}
+
 // src/lib/sticky-search-params.ts
 var STICKY_EXACT = /* @__PURE__ */ new Set([
   // Site identity. Required in local dev and in the canvas editor's iframe, where there is no
@@ -17020,6 +17248,107 @@ function bindPublishedForms(apiUrl, subdomain, content = {}) {
   );
 }
 
+// src/lib/outage-beacon.ts
+var DEDUP_MS = 5 * 60 * 1e3;
+var lastSent = /* @__PURE__ */ new Map();
+function apiBase() {
+  return process.env.NEXT_PUBLIC_FLOWOPS_API_URL ?? "https://flowops-backend-staging-2yfdh7pwpq-as.a.run.app";
+}
+function bridgeVersion() {
+  try {
+    if (true) {
+      return "0.1.153-next.417";
+    }
+  } catch {
+  }
+  if (typeof document !== "undefined") {
+    return document.documentElement.getAttribute("data-ohw-bridge-version") || void 0;
+  }
+  return void 0;
+}
+function stampBridgeVersionOnDocument() {
+  if (typeof document === "undefined") {
+    return;
+  }
+  try {
+    const v = true ? "0.1.153-next.417" : "";
+    if (v) {
+      document.documentElement.setAttribute("data-ohw-bridge-version", v);
+      window.__OHW_BRIDGE_VERSION__ = v;
+    }
+  } catch {
+  }
+}
+var TRANSIENT_CONTENT_FETCH = /^(Failed to fetch|Load failed|NetworkError when attempting to fetch resource\.?|fetch failed|The user aborted a request\.?|The operation was aborted\.?)$/i;
+var RECOVERABLE_PAGE_ERROR = /Minified React error #(?:418|419|421|422|423|425)\b|Hydration failed because the initial UI does not match|Text content does not match server-rendered HTML|There was an error while hydrating|did not match\. Server:/i;
+function isVercelPreviewHost() {
+  if (typeof location === "undefined") {
+    return false;
+  }
+  return location.hostname.toLowerCase().endsWith(".vercel.ohhwells.site");
+}
+function reportOutageBeacon(args) {
+  if (typeof window === "undefined" || !args.subdomain) {
+    return;
+  }
+  if (isVercelPreviewHost()) {
+    return;
+  }
+  if (args.reason === "page_error" && args.detail && RECOVERABLE_PAGE_ERROR.test(args.detail)) {
+    return;
+  }
+  if (args.reason === "content_fetch_failed" && args.detail && TRANSIENT_CONTENT_FETCH.test(args.detail.trim())) {
+    return;
+  }
+  const key = `${args.subdomain}|${args.reason}`;
+  const now = Date.now();
+  const prev = lastSent.get(key) || 0;
+  if (now - prev < DEDUP_MS) {
+    return;
+  }
+  lastSent.set(key, now);
+  const body = JSON.stringify({
+    subdomain: args.subdomain,
+    reason: args.reason,
+    detail: args.detail?.slice(0, 300),
+    templateId: args.templateId,
+    bridgeVersion: bridgeVersion(),
+    href: typeof location !== "undefined" ? location.href : void 0
+  });
+  const url = `${apiBase()}/api/public/sites/outage-beacon`;
+  try {
+    if (typeof navigator !== "undefined" && typeof navigator.sendBeacon === "function") {
+      const blob = new Blob([body], { type: "application/json" });
+      if (navigator.sendBeacon(url, blob)) {
+        return;
+      }
+    }
+    void fetch(url, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body,
+      keepalive: true,
+      cache: "no-store"
+    }).catch(() => {
+    });
+  } catch {
+  }
+}
+function armLoaderHangBeacon(subdomain, fetchState, hangMs = 15e3) {
+  if (!subdomain || fetchState !== "loading") {
+    return () => {
+    };
+  }
+  const timer = window.setTimeout(() => {
+    reportOutageBeacon({
+      subdomain,
+      reason: "loader_stuck",
+      detail: `fetchState still loading after ${hangMs}ms`
+    });
+  }, hangMs);
+  return () => window.clearTimeout(timer);
+}
+
 // src/lib/form-fields.ts
 var FIELD_DEFAULTS = {
   "short-text": { label: "Short text", placeholder: "Type placeholder text..." },
@@ -17620,6 +17949,7 @@ function MediaOverlay({
       (prev) => prev && prev.fullWidth === width && prev.height === height ? prev : { fullWidth: width, height }
     );
   }, [isVideo]);
+  const replaceLabel = isVideo ? "Replace video" : hover.elementType === "bg-image" ? "Replace background" : "Replace image";
   const replaceMode = buttonSize ? replaceButtonMode({ width: rect.width, height: rect.height }, buttonSize) : "none";
   const box = {
     position: "fixed",
@@ -17718,11 +18048,10 @@ function MediaOverlay({
         className: "flex items-center justify-center cursor-pointer",
         style: {
           ...box,
-          // When text overlays this media, let clicks fall THROUGH to the text underneath. In the
-          // parent this needed a whole `ow:click-at` round-trip to re-hit-test inside the iframe;
-          // in-document, pointer-events does it natively. The button below opts back in, so
-          // Replace still works.
-          pointerEvents: hover.hasTextOverlap || cueOnly ? "none" : "auto",
+          // Visual only. `pointer-events: auto` on this full-bleed rect covered the navbar
+          // (hero bg includes the absolute TopNav) and swallowed CTA press-drag. Text overlay
+          // and cueOnly also need clicks to fall through — Replace / video controls opt back in.
+          pointerEvents: "none",
           // Selected: a firm component ring with no wash, so the image reads as chosen rather
           // than hovered. Hover keeps the existing tinted preview.
           boxShadow: selected ? "inset 0 0 0 2px var(--color-bridge-primary)" : "inset 0 0 0 1.5px var(--color-bridge-primary)",
@@ -17749,17 +18078,17 @@ function MediaOverlay({
               },
               children: [
                 isVideo ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react5.Film, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react5.ImageIcon, { size: 14 }),
-                isVideo ? "Replace video" : "Replace image"
+                replaceLabel
               ]
             }
           ),
-          replaceMode === "none" || cueOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+          showChrome && replaceMode !== "none" && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
             Button,
             {
               "data-ohw-media-overlay": "",
               variant: "outline",
               size: "sm",
-              "aria-label": isVideo ? "Replace video" : "Replace image",
+              "aria-label": replaceLabel,
               className: "gap-1.5 cursor-pointer hover:bg-background",
               style: {
                 ...OVERLAY_BUTTON_STYLE,
@@ -17782,7 +18111,7 @@ function MediaOverlay({
               },
               children: [
                 isVideo ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react5.Film, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react5.ImageIcon, { size: 14 }),
-                replaceMode === "full" ? isVideo ? "Replace video" : hover.elementType === "bg-image" ? "Replace background" : "Replace image" : null
+                replaceMode === "full" ? replaceLabel : null
               ]
             }
           )
@@ -18292,7 +18621,7 @@ function AiSectionOverlay({
 
 // src/ui/ai-section/AiMediaStripOverlay.tsx
 var import_react10 = require("react");
-var import_lucide_react8 = require("lucide-react");
+var import_lucide_react9 = require("lucide-react");
 
 // src/lib/ai-media-strip-tree.ts
 var MEDIA_STRIP_ITEM_MIN = 1;
@@ -18406,14 +18735,6 @@ function setMediaStripItemAsset(tree, index, assetId) {
     return true;
   });
 }
-function setMediaStripItemAlt(tree, index, alt) {
-  return withMediaStrip(tree, (block) => {
-    const items = block.items;
-    if (index < 0 || index >= items.length) return false;
-    items[index] = { ...items[index], alt };
-    return true;
-  });
-}
 function setMediaStripItemLink(tree, index, link) {
   return withMediaStrip(tree, (block) => {
     const items = block.items;
@@ -18431,38 +18752,165 @@ function setMediaStripItemLink(tree, index, link) {
   });
 }
 
-// src/ui/ai-section/AiMediaStripOverlay.tsx
+// src/ui/dialog.tsx
+var React9 = __toESM(require("react"), 1);
+var import_radix_ui6 = require("radix-ui");
+var import_lucide_react8 = require("lucide-react");
 var import_jsx_runtime20 = require("react/jsx-runtime");
-var PRIMARY3 = "#0885FE";
-var OHW_BLUE = `var(--ohw-primary, ${PRIMARY3})`;
-var OHW_BLUE_DARK = `color-mix(in srgb, var(--ohw-primary, ${PRIMARY3}) 60%, #000000)`;
-function findMediaStripItemElement(sectionId, index) {
-  const sectionEl = findByInstanceId(sectionId);
-  if (!sectionEl) return null;
-  const items = sectionEl.querySelectorAll("[data-ohw-media-strip-item]");
-  for (const el of Array.from(items)) {
-    if (Number(el.dataset.ohwMediaStripIndex) === index) return el;
-  }
-  return null;
+function Dialog2({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_radix_ui6.Dialog.Root, { "data-slot": "dialog", ...props });
 }
-function readRect2(ref) {
-  const el = ref && findMediaStripItemElement(ref.sectionId, ref.index);
-  if (!el) return null;
-  const r2 = el.getBoundingClientRect();
-  if (r2.width <= 0 || r2.height <= 0) return null;
-  return { top: r2.top, left: r2.left, width: r2.width, height: r2.height };
+function DialogPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_radix_ui6.Dialog.Portal, { ...props });
 }
-function useLiveItemRect(ref) {
-  const [rect, setRect] = (0, import_react10.useState)(null);
-  (0, import_react10.useEffect)(() => {
-    if (!ref) {
-      setRect(null);
-      return;
+function DialogOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    import_radix_ui6.Dialog.Overlay,
+    {
+      "data-slot": "dialog-overlay",
+      "data-ohw-link-modal-root": "",
+      className: cn("fixed inset-0 z-[2147483646] bg-black/50", className),
+      ...props
     }
-    const update = () => {
-      const next = readRect2(ref);
-      setRect(
-        (prev) => prev && next && prev.top === next.top && prev.left === next.left && prev.width === next.width && prev.height === next.height ? prev : next
+  );
+}
+var DialogContent = React9.forwardRef(
+  ({ className, children, showCloseButton = true, container, ...props }, ref) => {
+    const positionMode = container ? "absolute" : "fixed";
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(DialogPortal, { container: container ?? void 0, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DialogOverlay, { className: cn(positionMode, "inset-0") }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+        import_radix_ui6.Dialog.Content,
+        {
+          ref,
+          "data-slot": "dialog-content",
+          className: cn(
+            positionMode,
+            "left-1/2 top-1/2 z-[2147483647] flex w-full max-w-[448px] -translate-x-1/2 -translate-y-1/2 flex-col overflow-visible",
+            "rounded-xl border border-border bg-background font-sans shadow-lg outline-none",
+            container ? "max-h-[calc(100%-32px)]" : "max-h-[calc(100vh-32px)]",
+            className
+          ),
+          onMouseDown: (e) => e.stopPropagation(),
+          ...props,
+          children: [
+            children,
+            showCloseButton ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              import_radix_ui6.Dialog.Close,
+              {
+                type: "button",
+                className: "absolute right-[9px] top-[9px] rounded-sm p-1.5 text-foreground hover:bg-muted/50",
+                "aria-label": "Close",
+                children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react8.X, { size: 16, "aria-hidden": true })
+              }
+            ) : null
+          ]
+        }
+      )
+    ] });
+  }
+);
+DialogContent.displayName = import_radix_ui6.Dialog.Content.displayName;
+function DialogHeader({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: cn("flex flex-col gap-1.5", className), ...props });
+}
+function DialogFooter({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    "div",
+    {
+      className: cn("flex items-center justify-end gap-2", className),
+      ...props
+    }
+  );
+}
+var DialogTitle = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  import_radix_ui6.Dialog.Title,
+  {
+    ref,
+    className: cn(
+      "text-lg font-semibold leading-none tracking-tight text-card-foreground",
+      className
+    ),
+    ...props
+  }
+));
+DialogTitle.displayName = import_radix_ui6.Dialog.Title.displayName;
+var DialogDescription = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  import_radix_ui6.Dialog.Description,
+  {
+    ref,
+    className: cn("text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+DialogDescription.displayName = import_radix_ui6.Dialog.Description.displayName;
+var DialogClose = import_radix_ui6.Dialog.Close;
+
+// src/ui/ai-section/AiMediaStripOverlay.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var PRIMARY3 = "var(--ohw-primary, #0885FE)";
+var CHROME_SELECTOR = "[data-ohw-toolbar], [data-ohw-edit-chrome], [data-ohw-item-interaction], [data-ohw-link-modal-root], [data-ohw-section-picker], [data-ohw-ai-review], [data-ohw-more-menu]";
+function findMediaStripItemElement(sectionId, index) {
+  const sectionEl = findByInstanceId(sectionId);
+  if (!sectionEl) return null;
+  const items = sectionEl.querySelectorAll("[data-ohw-media-strip-item]");
+  for (const el of Array.from(items)) {
+    if (Number(el.dataset.ohwMediaStripIndex) === index) return el;
+  }
+  return null;
+}
+function itemRefFromTarget(target) {
+  if (!(target instanceof Element)) return null;
+  if (target.closest(CHROME_SELECTOR)) return null;
+  const itemEl = target.closest("[data-ohw-media-strip-item]");
+  if (!itemEl) return null;
+  const sectionEl = itemEl.closest("[data-ohw-section]");
+  const unit = sectionEl ? movableUnit(sectionEl) : null;
+  const sectionId = unit ? instanceIdOf(unit) || null : null;
+  const index = Number(itemEl.dataset.ohwMediaStripIndex);
+  if (!sectionId || Number.isNaN(index)) return null;
+  return { sectionId, index };
+}
+function sameRef(a, b) {
+  return a?.sectionId === b?.sectionId && a?.index === b?.index;
+}
+function rectOf(el) {
+  if (!el) return null;
+  const r2 = el.getBoundingClientRect();
+  if (r2.width <= 0 || r2.height <= 0) return null;
+  return { top: r2.top, left: r2.left, width: r2.width, height: r2.height };
+}
+function readRect2(ref) {
+  return rectOf(ref && findMediaStripItemElement(ref.sectionId, ref.index));
+}
+function readStripRect(ref) {
+  const item = ref && findMediaStripItemElement(ref.sectionId, ref.index);
+  return rectOf(item?.closest("[data-ohw-media-strip]") ?? item);
+}
+function useLiveItemRect(ref, strip = false) {
+  const [rect, setRect] = (0, import_react10.useState)(null);
+  (0, import_react10.useEffect)(() => {
+    if (!ref) {
+      setRect(null);
+      return;
+    }
+    const update = () => {
+      const next = strip ? readStripRect(ref) : readRect2(ref);
+      setRect(
+        (prev) => prev && next && prev.top === next.top && prev.left === next.left && prev.width === next.width && prev.height === next.height ? prev : next
       );
     };
     update();
@@ -18475,9 +18923,49 @@ function useLiveItemRect(ref) {
       window.removeEventListener("resize", update);
       clearInterval(interval);
     };
-  }, [ref?.sectionId, ref?.index]);
+  }, [ref?.sectionId, ref?.index, strip]);
   return rect;
 }
+var TOOLBAR_STRIP_GAP = 52;
+var TOOLBAR_STRIP_GAP_MOBILE = 42;
+var TOOLBAR_EDGE_MARGIN2 = 4;
+function StripToolbarSlot({ stripRect, children }) {
+  const slotRef = (0, import_react10.useRef)(null);
+  const [shift, setShift] = (0, import_react10.useState)(0);
+  const centerX = stripRect.left + stripRect.width / 2;
+  (0, import_react10.useLayoutEffect)(() => {
+    const slot = slotRef.current;
+    if (!slot) return;
+    const clamp = () => {
+      const w = slot.offsetWidth;
+      if (w <= 0) return;
+      const half = w / 2;
+      const clamped = Math.max(TOOLBAR_EDGE_MARGIN2 + half, Math.min(centerX, window.innerWidth - TOOLBAR_EDGE_MARGIN2 - half));
+      setShift((prev) => Math.abs(prev - (clamped - centerX)) < 0.5 ? prev : clamped - centerX);
+    };
+    clamp();
+    const ro = new ResizeObserver(clamp);
+    ro.observe(slot);
+    return () => ro.disconnect();
+  }, [centerX, children]);
+  const mobile = window.innerWidth <= 480;
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    "div",
+    {
+      ref: slotRef,
+      "data-ohw-bridge": "",
+      "data-ohw-item-interaction": "",
+      className: "pointer-events-auto fixed",
+      style: {
+        top: stripRect.top - (mobile ? TOOLBAR_STRIP_GAP_MOBILE : TOOLBAR_STRIP_GAP),
+        left: centerX + shift,
+        transform: "translate(-50%, -100%)",
+        zIndex: 2147483645
+      },
+      children
+    }
+  );
+}
 function requestValidateTree(postToParent2, tree) {
   return new Promise((resolve) => {
     const id = `ai-validate-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
@@ -18514,116 +19002,72 @@ function requestAssetPick(postToParent2) {
     postToParent2({ type: "ow:asset-pick", id });
   });
 }
-function Pill({
+function ToolbarAction({
   label,
   onClick,
-  disabled,
-  active
+  disabled = false,
+  active = false,
+  children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-    "button",
-    {
-      type: "button",
-      onClick,
-      disabled,
-      style: {
-        height: 28,
-        padding: "0 10px",
-        display: "inline-flex",
-        alignItems: "center",
-        gap: 4,
-        borderRadius: 999,
-        border: "none",
-        cursor: disabled ? "default" : "pointer",
-        background: active ? OHW_BLUE_DARK : "#ffffff",
-        color: active ? "#ffffff" : OHW_BLUE_DARK,
-        opacity: disabled ? 0.4 : 1,
-        fontSize: 12,
-        lineHeight: "16px",
-        fontFamily: "Figtree, ui-sans-serif, system-ui, sans-serif",
-        whiteSpace: "nowrap",
-        flex: "0 0 auto"
-      },
-      children: label
-    }
-  );
+  const button = /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CustomToolbarButton, { type: "button", "aria-label": label, disabled, active, onClick, className: "size-8", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Tooltip, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TooltipTrigger, { asChild: true, children: disabled ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "inline-flex", children: button }) : button }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TooltipContent, { side: "bottom", sideOffset: 8, children: label })
+  ] });
 }
-function AltInput({ value, onCommit }) {
-  const [draft, setDraft] = (0, import_react10.useState)(value);
-  (0, import_react10.useEffect)(() => setDraft(value), [value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-    "div",
-    {
-      style: {
-        display: "flex",
-        alignItems: "center",
-        gap: 6,
-        height: 28,
-        padding: "0 12px",
-        borderRadius: 999,
-        background: "#ffffff",
-        width: "100%",
-        maxWidth: 260,
-        boxSizing: "border-box"
-      },
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-          "span",
-          {
-            style: {
-              flex: "0 0 auto",
-              color: OHW_BLUE_DARK,
-              fontSize: 10,
-              fontWeight: 700,
-              textTransform: "uppercase",
-              letterSpacing: 0.4
-            },
-            children: "Alt"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-          "input",
+function ToolbarSeparator() {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { "aria-hidden": true, className: "mx-0.5 block h-6 w-px shrink-0 bg-border" });
+}
+function OptionMenu({
+  label,
+  value,
+  options,
+  onChange
+}) {
+  const current = options.find((o) => o.value === value) ?? options[0];
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center gap-1.5 pl-1.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-xs text-muted-foreground", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(DropdownMenu, { modal: false, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+        "button",
+        {
+          type: "button",
+          "aria-label": label,
+          className: "inline-flex h-8 min-w-[76px] items-center gap-[7px] rounded-[6px] bg-transparent px-2 text-[13px] font-medium text-foreground transition-colors hover:bg-muted data-[state=open]:bg-muted",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "flex-1 text-left", children: current.label }),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react9.ChevronDown, { size: 16, style: { pointerEvents: "none" } })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DropdownMenuContent, { align: "end", sideOffset: 8, className: "w-[132px] min-w-[132px] p-1", children: options.map((option) => {
+        const selected = option.value === value;
+        return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+          DropdownMenuItem,
           {
-            type: "text",
-            value: draft,
-            onChange: (e) => setDraft(e.target.value),
-            onBlur: () => {
-              if (draft !== value) onCommit(draft);
-            },
-            onKeyDown: (e) => {
-              if (e.key === "Enter") e.currentTarget.blur();
-              if (e.key === "Escape") {
-                setDraft(value);
-                e.currentTarget.blur();
-              }
-            },
-            placeholder: "Describe this image",
-            "aria-label": "Image alt text",
-            style: {
-              flex: 1,
-              minWidth: 0,
-              border: "none",
-              outline: "none",
-              background: "transparent",
-              fontSize: 12,
-              lineHeight: "16px",
-              fontFamily: "Figtree, ui-sans-serif, system-ui, sans-serif",
-              color: "#1f2937"
-            }
-          }
-        )
-      ]
-    }
-  );
+            role: "menuitemradio",
+            "aria-checked": selected,
+            onSelect: () => onChange(option.value),
+            className: cn("grid grid-cols-[1fr_16px] gap-2 py-2 pl-2 pr-2 text-[13px]", selected && "bg-muted"),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: option.label }),
+              selected && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react9.Check, { size: 16, className: "text-bridge-primary" })
+            ]
+          },
+          option.value
+        );
+      }) })
+    ] })
+  ] });
 }
 var VARIANTS = [
   { value: "logos", label: "Logos" },
   { value: "reel", label: "Reel" }
 ];
 var ALIGNS = [
-  { value: "left", label: "Left" },
-  { value: "center", label: "Center" },
-  { value: "right", label: "Right" }
+  { value: "left", label: "Align left", Icon: import_lucide_react9.AlignLeft },
+  { value: "center", label: "Align center", Icon: import_lucide_react9.AlignCenter },
+  { value: "right", label: "Align right", Icon: import_lucide_react9.AlignRight }
 ];
 var HOVERS = [
   { value: "none", label: "None" },
@@ -18631,104 +19075,104 @@ var HOVERS = [
   { value: "zoom", label: "Zoom" },
   { value: "fade", label: "Fade" }
 ];
-var TREATMENTS = [
-  { value: "color", label: "Color" },
-  { value: "grayscale", label: "Grayscale" }
-];
 var HTTP_URL_RE = /^https?:\/\/\S+$/i;
-function LinkInput({ value, onCommit }) {
-  const [draft, setDraft] = (0, import_react10.useState)(value);
+function LinkModal({
+  href,
+  linkTarget,
+  onClose,
+  onSave
+}) {
+  const [draft, setDraft] = (0, import_react10.useState)(href);
+  const [newTab, setNewTab] = (0, import_react10.useState)(linkTarget !== "same-tab");
   const [invalid, setInvalid] = (0, import_react10.useState)(false);
-  (0, import_react10.useEffect)(() => {
-    setDraft(value);
-    setInvalid(false);
-  }, [value]);
-  const commit = () => {
+  const save = () => {
     const next = draft.trim();
-    if (next === value) return setInvalid(false);
-    if (next && !HTTP_URL_RE.test(next)) return setInvalid(true);
-    setInvalid(false);
-    onCommit(next);
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-    "div",
-    {
-      style: {
-        display: "flex",
-        alignItems: "center",
-        gap: 6,
-        height: 28,
-        padding: "0 12px",
-        borderRadius: 999,
-        background: "#ffffff",
-        width: "100%",
-        maxWidth: 260,
-        boxSizing: "border-box",
-        boxShadow: invalid ? "inset 0 0 0 1.5px #EF4444" : "none"
-      },
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-          "span",
-          {
-            style: {
-              flex: "0 0 auto",
-              color: OHW_BLUE_DARK,
-              fontSize: 10,
-              fontWeight: 700,
-              textTransform: "uppercase",
-              letterSpacing: 0.4
-            },
-            children: "Link"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-          "input",
-          {
-            type: "text",
-            inputMode: "url",
-            value: draft,
-            onChange: (e) => setDraft(e.target.value),
-            onBlur: commit,
-            onKeyDown: (e) => {
-              if (e.key === "Enter") e.currentTarget.blur();
-              if (e.key === "Escape") {
-                setDraft(value);
-                setInvalid(false);
-                e.currentTarget.blur();
-              }
-            },
-            placeholder: "https://example.com",
-            "aria-label": "Image link URL",
-            "aria-invalid": invalid,
-            style: {
-              flex: 1,
-              minWidth: 0,
-              border: "none",
-              outline: "none",
-              background: "transparent",
-              fontSize: 12,
-              lineHeight: "16px",
-              fontFamily: "Figtree, ui-sans-serif, system-ui, sans-serif",
-              color: "#1f2937"
-            }
-          }
-        )
-      ]
+    if (next && !HTTP_URL_RE.test(next)) {
+      setInvalid(true);
+      return;
     }
-  );
+    onSave(next, newTab ? "new-tab" : "same-tab");
+    onClose();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Dialog2, { open: true, onOpenChange: (open) => !open && onClose(), children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(DialogContent, { "data-ohw-link-modal-root": "", className: "max-w-[400px] gap-4 p-5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DialogHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DialogTitle, { className: "text-base", children: "Image link" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-col gap-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        "input",
+        {
+          autoFocus: true,
+          type: "text",
+          inputMode: "url",
+          value: draft,
+          onChange: (e) => {
+            setDraft(e.target.value);
+            setInvalid(false);
+          },
+          onKeyDown: (e) => {
+            if (e.key === "Enter") save();
+          },
+          placeholder: "https://example.com",
+          "aria-label": "Image link URL",
+          "aria-invalid": invalid,
+          className: cn(
+            "h-9 w-full rounded-[6px] border border-border bg-background px-3 text-[13px] text-foreground outline-none placeholder:text-muted-foreground/70 focus:border-bridge-primary",
+            invalid && "border-destructive focus:border-destructive"
+          )
+        }
+      ),
+      invalid && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-xs text-destructive", children: "Enter a full URL starting with http:// or https://" }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("label", { className: "flex items-center gap-2 text-[13px] text-foreground", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("input", { type: "checkbox", checked: newTab, onChange: (e) => setNewTab(e.target.checked) }),
+        "Open in new tab"
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(DialogFooter, { children: [
+      href && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            onSave("", "new-tab");
+            onClose();
+          },
+          className: "mr-auto rounded-[6px] px-3 py-2 text-[13px] font-medium text-destructive transition-colors hover:bg-muted",
+          children: "Remove link"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: onClose,
+          className: "rounded-[6px] px-3 py-2 text-[13px] font-medium text-foreground transition-colors hover:bg-muted",
+          children: "Cancel"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: save,
+          className: "rounded-[6px] bg-bridge-primary px-3 py-2 text-[13px] font-medium text-primary-foreground transition-opacity hover:opacity-90",
+          children: "Save"
+        }
+      )
+    ] })
+  ] }) });
 }
 function MediaStripToolbar({
   entry,
   index,
   pending,
   error,
+  itemEditOn,
+  onToggleItemEdit,
   onSetVariant,
   onSetAlign,
   onSetHover,
   onSetTreatment,
   onResize,
-  onSetAlt,
-  onSetLink,
+  onOpenLink,
   onAddItem,
   onRemoveItem,
   onChangeImage,
@@ -18737,81 +19181,102 @@ function MediaStripToolbar({
 }) {
   const items = mediaStripItems(entry.tree);
   const itemCount = items.length;
-  const currentAlt = items[index]?.alt ?? "";
-  const currentHref = items[index]?.href ?? "";
-  const currentTarget = items[index]?.linkTarget === "same-tab" ? "same-tab" : "new-tab";
   const slots = findMediaStripSlots(entry.tree);
   const variant = slots?.variant === "reel" ? "reel" : "logos";
   const align = slots?.align === "left" || slots?.align === "right" ? slots.align : "center";
   const hover = slots?.hover === "none" || slots?.hover === "lift" || slots?.hover === "zoom" || slots?.hover === "fade" ? slots.hover : "lift";
   const treatment = slots?.treatment === "color" || slots?.treatment === "grayscale" ? slots.treatment : variant === "logos" ? "grayscale" : "color";
   const sizeValue = variant === "logos" ? typeof slots?.logoMaxHeight === "number" ? slots.logoMaxHeight : 48 : typeof slots?.cardWidth === "number" ? slots.cardWidth : 240;
-  const isMobile = window.innerWidth <= 480;
-  const rowStyle = isMobile ? {
-    display: "flex",
-    gap: 6,
-    flexWrap: "nowrap",
-    justifyContent: "center",
-    overflowX: "auto",
-    WebkitOverflowScrolling: "touch",
-    width: "100%",
-    scrollbarWidth: "none"
-  } : { display: "flex", gap: 6, flexWrap: "nowrap", justifyContent: "center" };
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+  const mobile = window.innerWidth <= 480;
+  const gatedLabel = (label) => itemEditOn ? label : "Turn on the star to edit this image";
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
     "div",
     {
       "data-ohw-bridge": "",
       "data-ohw-toolbar": "",
       onMouseDown: (e) => e.stopPropagation(),
-      style: {
-        display: "flex",
-        flexDirection: "column",
-        gap: 6,
-        alignItems: "center",
-        background: OHW_BLUE,
-        padding: 8,
-        borderRadius: 12,
-        boxShadow: "0 8px 24px rgba(0,0,0,0.25)",
-        pointerEvents: pending ? "none" : "auto",
-        opacity: pending ? 0.6 : 1,
-        maxWidth: isMobile ? "calc(100vw - 24px)" : "none"
-      },
+      className: cn("flex flex-col items-center gap-1.5 font-sans", pending && "pointer-events-none opacity-60"),
+      style: { maxWidth: mobile ? "calc(100vw - 24px)" : void 0 },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: rowStyle, children: [
-          VARIANTS.map((v) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Pill, { label: v.label, active: variant === v.value, onClick: () => onSetVariant(v.value) }, v.value)),
-          ALIGNS.map((a) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Pill, { label: a.label, active: align === a.value, onClick: () => onSetAlign(a.value) }, a.value))
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: rowStyle, children: [
-          HOVERS.map((h) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Pill, { label: h.label, active: hover === h.value, onClick: () => onSetHover(h.value) }, h.value)),
-          TREATMENTS.map((t) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Pill, { label: t.label, active: treatment === t.value, onClick: () => onSetTreatment(t.value) }, t.value))
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { display: "flex", gap: 6, alignItems: "center" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Pill, { label: "\u2212", onClick: () => onResize(-8) }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { style: { color: "#ffffff", fontSize: 12, minWidth: 34, textAlign: "center" }, children: [
-            sizeValue,
-            "px"
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Pill, { label: "+", onClick: () => onResize(8) })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { display: "flex", justifyContent: "center", width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(AltInput, { value: currentAlt, onCommit: onSetAlt }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { display: "flex", justifyContent: "center", width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(LinkInput, { value: currentHref, onCommit: (href) => onSetLink(href, currentTarget) }) }),
-        currentHref && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: rowStyle, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Pill, { label: "New tab", active: currentTarget === "new-tab", onClick: () => onSetLink(currentHref, "new-tab") }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Pill, { label: "Same tab", active: currentTarget === "same-tab", onClick: () => onSetLink(currentHref, "same-tab") })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: rowStyle, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Pill, { label: "Change Image", onClick: onChangeImage }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Pill, { label: "+ Item", onClick: onAddItem }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Pill, { label: "\u2212 Item", onClick: onRemoveItem, disabled: itemCount <= 1 })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: rowStyle, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Pill, { label: "\u2190 Move", onClick: onMoveLeft, disabled: index <= 0 }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Pill, { label: "\u2192 Move", onClick: onMoveRight, disabled: index >= itemCount - 1 })
-        ] }),
-        error && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { color: "#FCA5A5", fontSize: 11, maxWidth: 220, textAlign: "center" }, children: error })
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+          "div",
+          {
+            className: cn(
+              "flex items-center gap-1 rounded-[10px] border border-border bg-background p-1 whitespace-nowrap",
+              "shadow-[0px_10px_15px_-3px_rgba(0,0,0,0.1),0px_4px_6px_-4px_rgba(0,0,0,0.1)]",
+              mobile ? "flex-wrap justify-center" : "flex-nowrap"
+            ),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Tooltip, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                  CustomToolbarButton,
+                  {
+                    type: "button",
+                    "aria-label": itemEditOn ? "Done editing this image" : "Edit this image",
+                    "aria-pressed": itemEditOn,
+                    onClick: onToggleItemEdit,
+                    className: "group size-8",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                      import_lucide_react9.Star,
+                      {
+                        size: 16,
+                        fill: "currentColor",
+                        strokeWidth: 0,
+                        className: cn(
+                          "transition-colors",
+                          itemEditOn ? "text-[#f59e0b] group-hover:text-[#d97706]" : "text-[#d6d3d1] group-hover:text-[#fbbf24]"
+                        ),
+                        style: { pointerEvents: "none" }
+                      }
+                    )
+                  }
+                ) }),
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TooltipContent, { side: "bottom", sideOffset: 8, children: itemEditOn ? "Done editing this image" : "Edit this image" })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ToolbarSeparator, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ToolbarAction, { label: gatedLabel("Change image"), onClick: onChangeImage, disabled: !itemEditOn, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react9.Image, { size: 16, style: { pointerEvents: "none" } }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ToolbarAction, { label: gatedLabel("Link"), onClick: onOpenLink, disabled: !itemEditOn, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react9.Link, { size: 16, style: { pointerEvents: "none" } }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ToolbarAction, { label: gatedLabel("Move left"), onClick: onMoveLeft, disabled: !itemEditOn || index <= 0, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react9.ArrowLeft, { size: 16, style: { pointerEvents: "none" } }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                ToolbarAction,
+                {
+                  label: gatedLabel("Move right"),
+                  onClick: onMoveRight,
+                  disabled: !itemEditOn || index >= itemCount - 1,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react9.ArrowRight, { size: 16, style: { pointerEvents: "none" } })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ToolbarAction, { label: gatedLabel("Remove image"), onClick: onRemoveItem, disabled: !itemEditOn || itemCount <= 1, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react9.ImageMinus, { size: 16, style: { pointerEvents: "none" } }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ToolbarSeparator, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(OptionMenu, { label: "Layout", value: variant, options: VARIANTS, onChange: onSetVariant }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(OptionMenu, { label: "Hover", value: hover, options: HOVERS, onChange: onSetHover }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                ToolbarAction,
+                {
+                  label: treatment === "grayscale" ? "Show in color" : "Show grayscale",
+                  active: treatment === "grayscale",
+                  onClick: () => onSetTreatment(treatment === "grayscale" ? "color" : "grayscale"),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react9.Palette, { size: 16, style: { pointerEvents: "none" } })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ToolbarSeparator, {}),
+              ALIGNS.map(({ value, label, Icon }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ToolbarAction, { label, active: align === value, onClick: () => onSetAlign(value), children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon, { size: 16, style: { pointerEvents: "none" } }) }, value)),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ToolbarSeparator, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ToolbarAction, { label: "Smaller", onClick: () => onResize(-8), children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react9.Minus, { size: 16, style: { pointerEvents: "none" } }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: "min-w-[40px] text-center text-xs tabular-nums text-muted-foreground", children: [
+                sizeValue,
+                "px"
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ToolbarAction, { label: "Larger", onClick: () => onResize(8), children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react9.Plus, { size: 16, style: { pointerEvents: "none" } }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ToolbarSeparator, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ToolbarAction, { label: "Add image", onClick: onAddItem, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react9.ImagePlus, { size: 16, style: { pointerEvents: "none" } }) })
+            ]
+          }
+        ),
+        error && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "max-w-[260px] rounded-md bg-background px-2 py-1 text-center text-[11px] text-destructive shadow-sm", children: error })
       ]
     }
-  );
+  ) });
 }
 function findMediaStripSlots(tree) {
   const stack = tree.rows.flatMap((row) => row.blocks);
@@ -18830,31 +19295,23 @@ function AiMediaStripOverlay({
 }) {
   const [hover, setHover] = (0, import_react10.useState)(null);
   const [active, setActive] = (0, import_react10.useState)(null);
+  const [itemEditOn, setItemEditOn] = (0, import_react10.useState)(false);
+  const [linkOpen, setLinkOpen] = (0, import_react10.useState)(false);
   const [pending, setPending] = (0, import_react10.useState)(false);
   const [error, setError] = (0, import_react10.useState)(null);
   const activeRef = (0, import_react10.useRef)(null);
   activeRef.current = active;
+  const linkOpenRef = (0, import_react10.useRef)(false);
+  linkOpenRef.current = linkOpen;
   (0, import_react10.useEffect)(() => {
     const onMove = (e) => {
+      const ref = itemRefFromTarget(e.target);
       const t = e.target;
-      if (!(t instanceof HTMLElement)) return;
-      if (t.closest("[data-ohw-toolbar], [data-ohw-edit-chrome], [data-ohw-item-interaction], [data-ohw-link-modal-root], [data-ohw-section-picker], [data-ohw-ai-review]")) {
-        return;
-      }
-      const itemEl = t.closest("[data-ohw-media-strip-item]");
-      if (!itemEl) {
-        setHover(null);
-        return;
-      }
-      const sectionEl = itemEl.closest("[data-ohw-section]");
-      const unit = sectionEl ? movableUnit(sectionEl) : null;
-      const sectionId = unit ? instanceIdOf(unit) || null : null;
-      const index = Number(itemEl.dataset.ohwMediaStripIndex);
-      if (!sectionId || Number.isNaN(index)) {
-        setHover(null);
-        return;
-      }
-      setHover({ sectionId, index });
+      const overEditable = Boolean(t?.closest?.("[data-ohw-editable]"));
+      setHover((prev) => {
+        const next = ref && !overEditable ? ref : null;
+        return sameRef(prev, next) ? prev : next;
+      });
     };
     const onLeave = () => setHover(null);
     document.addEventListener("mousemove", onMove, { passive: true });
@@ -18866,23 +19323,25 @@ function AiMediaStripOverlay({
   }, []);
   (0, import_react10.useEffect)(() => {
     const onClick = (e) => {
-      const current = activeRef.current;
-      if (!current) return;
       const t = e.target;
-      if (!(t instanceof HTMLElement)) return;
-      if (t.closest("[data-ohw-item-interaction]")) return;
-      const itemEl = findMediaStripItemElement(current.sectionId, current.index);
-      if (itemEl && itemEl.contains(t)) return;
-      setActive(null);
+      if (!(t instanceof Element)) return;
+      if (t.closest(CHROME_SELECTOR)) return;
+      const ref = itemRefFromTarget(t);
+      if (sameRef(activeRef.current, ref)) return;
+      if (ref) clearInteractionChromeRef.current();
+      setItemEditOn(false);
       setError(null);
+      setActive(ref);
     };
     document.addEventListener("click", onClick, true);
     return () => document.removeEventListener("click", onClick, true);
-  }, []);
+  }, [clearInteractionChromeRef]);
   (0, import_react10.useEffect)(() => {
     const onBlur = () => {
       if (!activeRef.current) return;
       setActive(null);
+      setItemEditOn(false);
+      setLinkOpen(false);
       setError(null);
     };
     window.addEventListener("blur", onBlur);
@@ -18892,7 +19351,10 @@ function AiMediaStripOverlay({
     const onKeyDown = (e) => {
       if (e.key !== "Escape") return;
       if (!activeRef.current) return;
+      if (linkOpenRef.current) return;
+      if (document.querySelector('[data-ohw-more-menu][data-state="open"]')) return;
       setActive(null);
+      setItemEditOn(false);
       setError(null);
     };
     document.addEventListener("keydown", onKeyDown);
@@ -18926,137 +19388,133 @@ function AiMediaStripOverlay({
         tree: nextTree,
         label: entry.label,
         media: extraMedia ? { ...entry.media, ...extraMedia } : entry.media,
-        ...entry.brand ? { brand: entry.brand } : {}
+        ...entry.brand ? { brand: entry.brand } : {},
+        // The user is already looking at the strip they just edited — recentering the viewport
+        // on every edit reads as the section jumping around.
+        skipScrollIntoView: true
       });
       return true;
     },
     [findEntry, postToParent2, applyTreeLocalRef]
   );
   const activeEntry = active ? findEntry(active.sectionId) : null;
-  const hoverHandleRect = useLiveItemRect(!active && hover ? hover : null);
   const activeItemRect = useLiveItemRect(active);
-  const TOOLBAR_APPROX_H = 170;
-  const toolbarState = activeItemRect && activeItemRect.top < TOOLBAR_APPROX_H ? "active-bottom" : "active-top";
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-    hoverHandleRect && hover && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-      "button",
-      {
-        type: "button",
-        "data-ohw-toolbar": "",
-        onClick: () => {
-          clearInteractionChromeRef.current();
-          setActive(hover);
-        },
-        "aria-label": "Configure media item",
-        style: {
-          position: "fixed",
-          top: hoverHandleRect.top + 8,
-          left: hoverHandleRect.left + hoverHandleRect.width - 36,
-          width: 28,
-          height: 28,
-          borderRadius: 8,
-          border: `1.5px dashed ${PRIMARY3}`,
-          background: "#ffffff",
-          color: PRIMARY3,
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          cursor: "pointer",
-          zIndex: 2147483643,
-          fontSize: 14,
-          fontWeight: 700
-        },
-        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react8.Star, { size: 14, style: { pointerEvents: "none" } })
-      }
-    ),
-    activeItemRect && active && activeEntry && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-      ItemInteractionLayer,
-      {
-        rect: activeItemRect,
-        state: toolbarState,
-        toolbar: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-          MediaStripToolbar,
-          {
-            entry: activeEntry,
-            index: active.index,
-            pending,
-            error,
-            onSetVariant: (variant) => runMutation(active.sectionId, (tree) => setMediaStripVariant(tree, variant)),
-            onSetAlign: (align) => runMutation(active.sectionId, (tree) => setMediaStripAlign(tree, align)),
-            onSetHover: (hoverPreset) => runMutation(active.sectionId, (tree) => setMediaStripHover(tree, hoverPreset)),
-            onSetTreatment: (treatment) => runMutation(active.sectionId, (tree) => setMediaStripTreatment(tree, treatment)),
-            onResize: (delta) => {
-              const slots = findMediaStripSlots(activeEntry.tree);
-              const variant = slots?.variant === "reel" ? "reel" : "logos";
-              const current = variant === "logos" ? typeof slots?.logoMaxHeight === "number" ? slots.logoMaxHeight : 48 : typeof slots?.cardWidth === "number" ? slots.cardWidth : 240;
-              void runMutation(active.sectionId, (tree) => setMediaStripSizing(tree, current + delta));
-            },
-            onSetAlt: (alt) => {
-              void runMutation(active.sectionId, (tree) => setMediaStripItemAlt(tree, active.index, alt));
-            },
-            onSetLink: (href, linkTarget) => {
+  const activeStripRect = useLiveItemRect(active, true);
+  const hoverRect = useLiveItemRect(hover && !sameRef(hover, active) ? hover : null);
+  const activeItems = activeEntry ? mediaStripItems(activeEntry.tree) : [];
+  const activeItem = active ? activeItems[active.index] : void 0;
+  const activeHref = activeItem?.href ?? "";
+  const activeTarget = activeItem?.linkTarget === "same-tab" ? "same-tab" : "new-tab";
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+    hoverRect && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ItemInteractionLayer, { rect: hoverRect, state: "hover" }),
+    activeItemRect && activeStripRect && active && activeEntry && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ItemInteractionLayer, { rect: activeItemRect, state: "active-top" }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(StripToolbarSlot, { stripRect: activeStripRect, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        MediaStripToolbar,
+        {
+          entry: activeEntry,
+          index: active.index,
+          pending,
+          error,
+          itemEditOn,
+          onToggleItemEdit: () => setItemEditOn((on) => !on),
+          onSetVariant: (variant) => runMutation(active.sectionId, (tree) => setMediaStripVariant(tree, variant)),
+          onSetAlign: (align) => runMutation(active.sectionId, (tree) => setMediaStripAlign(tree, align)),
+          onSetHover: (hoverPreset) => runMutation(active.sectionId, (tree) => setMediaStripHover(tree, hoverPreset)),
+          onSetTreatment: (treatment) => runMutation(active.sectionId, (tree) => setMediaStripTreatment(tree, treatment)),
+          onResize: (delta) => {
+            const slots = findMediaStripSlots(activeEntry.tree);
+            const variant = slots?.variant === "reel" ? "reel" : "logos";
+            const current = variant === "logos" ? typeof slots?.logoMaxHeight === "number" ? slots.logoMaxHeight : 48 : typeof slots?.cardWidth === "number" ? slots.cardWidth : 240;
+            void runMutation(active.sectionId, (tree) => setMediaStripSizing(tree, current + delta));
+          },
+          onOpenLink: () => setLinkOpen(true),
+          onAddItem: () => {
+            void requestAssetPick(postToParent2).then((picked) => {
+              if (!picked) return;
+              const item = { assetId: picked.assetId, alt: "Logo" };
               void runMutation(
                 active.sectionId,
-                (tree) => setMediaStripItemLink(tree, active.index, href ? { href, linkTarget } : {})
-              );
-            },
-            onAddItem: () => {
-              void requestAssetPick(postToParent2).then((picked) => {
-                if (!picked) return;
-                const item = { assetId: picked.assetId, alt: "Logo" };
-                void runMutation(
-                  active.sectionId,
-                  (tree) => addMediaStripItem(tree, item, active.index),
-                  { [picked.assetId]: picked.url }
-                ).then((applied) => {
-                  if (applied) setActive({ sectionId: active.sectionId, index: active.index + 1 });
-                });
-              });
-            },
-            onChangeImage: () => {
-              void requestAssetPick(postToParent2).then((picked) => {
-                if (!picked) return;
-                void runMutation(
-                  active.sectionId,
-                  (tree) => setMediaStripItemAsset(tree, active.index, picked.assetId),
-                  { [picked.assetId]: picked.url }
-                );
+                (tree) => addMediaStripItem(tree, item, active.index),
+                { [picked.assetId]: picked.url }
+              ).then((applied) => {
+                if (applied) setActive({ sectionId: active.sectionId, index: active.index + 1 });
               });
-            },
-            onRemoveItem: () => {
-              void runMutation(active.sectionId, (tree) => removeMediaStripItem(tree, active.index)).then(
-                (applied) => {
-                  if (applied) setActive(null);
-                }
-              );
-            },
-            onMoveLeft: () => {
-              void runMutation(active.sectionId, (tree) => reorderMediaStripItem(tree, active.index, -1)).then(
-                (applied) => {
-                  if (applied) setActive({ sectionId: active.sectionId, index: active.index - 1 });
-                }
-              );
-            },
-            onMoveRight: () => {
-              void runMutation(active.sectionId, (tree) => reorderMediaStripItem(tree, active.index, 1)).then(
-                (applied) => {
-                  if (applied) setActive({ sectionId: active.sectionId, index: active.index + 1 });
-                }
+            });
+          },
+          onChangeImage: () => {
+            void requestAssetPick(postToParent2).then((picked) => {
+              if (!picked) return;
+              void runMutation(
+                active.sectionId,
+                (tree) => setMediaStripItemAsset(tree, active.index, picked.assetId),
+                { [picked.assetId]: picked.url }
               );
-            }
+            });
+          },
+          onRemoveItem: () => {
+            void runMutation(active.sectionId, (tree) => removeMediaStripItem(tree, active.index)).then(
+              (applied) => {
+                if (applied) setActive(null);
+              }
+            );
+          },
+          onMoveLeft: () => {
+            void runMutation(active.sectionId, (tree) => reorderMediaStripItem(tree, active.index, -1)).then(
+              (applied) => {
+                if (applied) setActive({ sectionId: active.sectionId, index: active.index - 1 });
+              }
+            );
+          },
+          onMoveRight: () => {
+            void runMutation(active.sectionId, (tree) => reorderMediaStripItem(tree, active.index, 1)).then(
+              (applied) => {
+                if (applied) setActive({ sectionId: active.sectionId, index: active.index + 1 });
+              }
+            );
           }
-        )
-      }
-    )
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        "div",
+        {
+          "data-ohw-bridge": "",
+          "data-ohw-item-interaction": "",
+          "aria-hidden": true,
+          className: "pointer-events-none fixed rounded-[4px] px-[7px] py-[3px] font-sans text-[11px] font-medium leading-none text-primary-foreground whitespace-nowrap",
+          style: {
+            top: activeItemRect.top + activeItemRect.height + 10,
+            left: activeItemRect.left - 5,
+            background: PRIMARY3,
+            zIndex: 2147483644
+          },
+          children: "Media item"
+        }
+      ),
+      linkOpen && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        LinkModal,
+        {
+          href: activeHref,
+          linkTarget: activeTarget,
+          onClose: () => setLinkOpen(false),
+          onSave: (href, linkTarget) => {
+            void runMutation(
+              active.sectionId,
+              (tree) => setMediaStripItemLink(tree, active.index, href ? { href, linkTarget } : {})
+            );
+          }
+        }
+      )
+    ] })
   ] });
 }
 
 // src/ui/ai-section/AiPricingCardOverlay.tsx
 var import_react11 = require("react");
-var import_lucide_react9 = require("lucide-react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_lucide_react10 = require("lucide-react");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var PRIMARY4 = "var(--ohw-primary, #0885FE)";
-var CHROME_SELECTOR = "[data-ohw-toolbar], [data-ohw-edit-chrome], [data-ohw-item-interaction], [data-ohw-link-modal-root], [data-ohw-section-picker], [data-ohw-ai-review], [data-ohw-more-menu]";
+var CHROME_SELECTOR2 = "[data-ohw-toolbar], [data-ohw-edit-chrome], [data-ohw-item-interaction], [data-ohw-link-modal-root], [data-ohw-section-picker], [data-ohw-ai-review], [data-ohw-more-menu]";
 function findPricingCardElement(sectionId, index) {
   const sectionEl = findByInstanceId(sectionId);
   if (!sectionEl) return null;
@@ -19068,7 +19526,7 @@ function findPricingCardElement(sectionId, index) {
 }
 function cardRefFromTarget(target) {
   if (!(target instanceof Element)) return null;
-  if (target.closest(CHROME_SELECTOR)) return null;
+  if (target.closest(CHROME_SELECTOR2)) return null;
   const cardEl = target.closest("[data-ohw-pricing-card]");
   if (!cardEl) return null;
   const sectionEl = cardEl.closest("[data-ohw-section]");
@@ -19078,21 +19536,21 @@ function cardRefFromTarget(target) {
   if (!sectionId || Number.isNaN(index)) return null;
   return { sectionId, index };
 }
-function sameRef(a, b) {
+function sameRef2(a, b) {
   return a?.sectionId === b?.sectionId && a?.index === b?.index;
 }
-function rectOf(el) {
+function rectOf2(el) {
   if (!el) return null;
   const r2 = el.getBoundingClientRect();
   if (r2.width <= 0 || r2.height <= 0) return null;
   return { top: r2.top, left: r2.left, width: r2.width, height: r2.height };
 }
 function readRect3(ref) {
-  return rectOf(ref && findPricingCardElement(ref.sectionId, ref.index));
+  return rectOf2(ref && findPricingCardElement(ref.sectionId, ref.index));
 }
 function readGridRect(ref) {
   const card = ref && findPricingCardElement(ref.sectionId, ref.index);
-  return rectOf(card?.closest("[data-ohw-pricing-collection]") ?? card);
+  return rectOf2(card?.closest("[data-ohw-pricing-collection]") ?? card);
 }
 function useLiveCardRect(ref, grid = false) {
   const [rect, setRect] = (0, import_react11.useState)(null);
@@ -19122,7 +19580,7 @@ function useLiveCardRect(ref, grid = false) {
 }
 var TOOLBAR_GRID_GAP = 52;
 var TOOLBAR_GRID_GAP_MOBILE = 42;
-var TOOLBAR_EDGE_MARGIN2 = 4;
+var TOOLBAR_EDGE_MARGIN3 = 4;
 function GridToolbarSlot({ gridRect, children }) {
   const slotRef = (0, import_react11.useRef)(null);
   const [shift, setShift] = (0, import_react11.useState)(0);
@@ -19134,7 +19592,7 @@ function GridToolbarSlot({ gridRect, children }) {
       const w = slot.offsetWidth;
       if (w <= 0) return;
       const half = w / 2;
-      const clamped = Math.max(TOOLBAR_EDGE_MARGIN2 + half, Math.min(centerX, window.innerWidth - TOOLBAR_EDGE_MARGIN2 - half));
+      const clamped = Math.max(TOOLBAR_EDGE_MARGIN3 + half, Math.min(centerX, window.innerWidth - TOOLBAR_EDGE_MARGIN3 - half));
       setShift((prev) => Math.abs(prev - (clamped - centerX)) < 0.5 ? prev : clamped - centerX);
     };
     clamp();
@@ -19143,7 +19601,7 @@ function GridToolbarSlot({ gridRect, children }) {
     return () => ro.disconnect();
   }, [centerX, children]);
   const mobile = window.innerWidth <= 480;
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "div",
     {
       ref: slotRef,
@@ -19178,7 +19636,7 @@ function requestValidateTree2(postToParent2, tree) {
   });
 }
 function StyleSwatch({ style }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "span",
     {
       "aria-hidden": true,
@@ -19192,35 +19650,35 @@ function StyleSwatch({ style }) {
   );
 }
 function ButtonGlyph() {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("svg", { width: "18", height: "12", viewBox: "0 0 18 12", fill: "none", "aria-hidden": true, style: { pointerEvents: "none" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("rect", { x: "0.75", y: "0.75", width: "16.5", height: "10.5", rx: "3", stroke: "currentColor", strokeWidth: "1.5" }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { d: "M5.5 6H12.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("svg", { width: "18", height: "12", viewBox: "0 0 18 12", fill: "none", "aria-hidden": true, style: { pointerEvents: "none" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("rect", { x: "0.75", y: "0.75", width: "16.5", height: "10.5", rx: "3", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("path", { d: "M5.5 6H12.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
   ] });
 }
 function FeatureGlyph({ mode }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", "aria-hidden": true, style: { pointerEvents: "none" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("circle", { cx: "8", cy: "8", r: "7.25", stroke: "currentColor", strokeWidth: "1.5" }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { d: "M5 8.2L7.2 10.3L11 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("circle", { cx: "13.5", cy: "13.5", r: "4.25", fill: "var(--ohw-background, #ffffff)", stroke: "var(--ohw-background, #ffffff)", strokeWidth: "1" }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("circle", { cx: "13.5", cy: "13.5", r: "3.75", fill: "var(--ohw-background, #ffffff)", stroke: PRIMARY4, strokeWidth: "1" }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { d: "M11.5 13.5H15.5", stroke: PRIMARY4, strokeWidth: "1.5", strokeLinecap: "round" }),
-    mode === "add" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { d: "M13.5 11.5V15.5", stroke: PRIMARY4, strokeWidth: "1.5", strokeLinecap: "round" })
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", "aria-hidden": true, style: { pointerEvents: "none" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("circle", { cx: "8", cy: "8", r: "7.25", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("path", { d: "M5 8.2L7.2 10.3L11 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("circle", { cx: "13.5", cy: "13.5", r: "4.25", fill: "var(--ohw-background, #ffffff)", stroke: "var(--ohw-background, #ffffff)", strokeWidth: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("circle", { cx: "13.5", cy: "13.5", r: "3.75", fill: "var(--ohw-background, #ffffff)", stroke: PRIMARY4, strokeWidth: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("path", { d: "M11.5 13.5H15.5", stroke: PRIMARY4, strokeWidth: "1.5", strokeLinecap: "round" }),
+    mode === "add" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("path", { d: "M13.5 11.5V15.5", stroke: PRIMARY4, strokeWidth: "1.5", strokeLinecap: "round" })
   ] });
 }
-function ToolbarAction({
+function ToolbarAction2({
   label,
   onClick,
   disabled = false,
   children
 }) {
-  const button = /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CustomToolbarButton, { type: "button", "aria-label": label, disabled, onClick, className: "size-8", children });
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Tooltip, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TooltipTrigger, { asChild: true, children: disabled ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "inline-flex", children: button }) : button }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TooltipContent, { side: "bottom", sideOffset: 8, children: label })
+  const button = /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(CustomToolbarButton, { type: "button", "aria-label": label, disabled, onClick, className: "size-8", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Tooltip, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TooltipTrigger, { asChild: true, children: disabled ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "inline-flex", children: button }) : button }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TooltipContent, { side: "bottom", sideOffset: 8, children: label })
   ] });
 }
-function ToolbarSeparator() {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { "aria-hidden": true, className: "mx-0.5 block h-6 w-px shrink-0 bg-border" });
+function ToolbarSeparator2() {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { "aria-hidden": true, className: "mx-0.5 block h-6 w-px shrink-0 bg-border" });
 }
 function CardStyleMenu({
   value,
@@ -19228,7 +19686,7 @@ function CardStyleMenu({
   disabled = false
 }) {
   const current = PRICING_CARD_STYLES.find((s) => s.value === value) ?? PRICING_CARD_STYLES[0];
-  const trigger = /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+  const trigger = /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
     "button",
     {
       type: "button",
@@ -19239,28 +19697,28 @@ function CardStyleMenu({
         disabled && "cursor-not-allowed opacity-40 hover:bg-transparent"
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(StyleSwatch, { style: current.value }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "flex-1 text-left", children: current.label }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react9.ChevronDown, { size: 16, style: { pointerEvents: "none" } })
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(StyleSwatch, { style: current.value }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "flex-1 text-left", children: current.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react10.ChevronDown, { size: 16, style: { pointerEvents: "none" } })
       ]
     }
   );
   if (disabled) {
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center gap-1.5 pl-1.5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-xs text-muted-foreground opacity-50", children: "Card style" }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Tooltip, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "inline-flex", children: trigger }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TooltipContent, { side: "bottom", sideOffset: 8, children: "Mark as featured to edit card style" })
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center gap-1.5 pl-1.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-xs text-muted-foreground opacity-50", children: "Card style" }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Tooltip, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "inline-flex", children: trigger }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TooltipContent, { side: "bottom", sideOffset: 8, children: "Mark as featured to edit card style" })
       ] })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center gap-1.5 pl-1.5", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-xs text-muted-foreground", children: "Card style" }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(DropdownMenu, { modal: false, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DropdownMenuTrigger, { asChild: true, children: trigger }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DropdownMenuContent, { align: "end", sideOffset: 8, className: "w-[152px] min-w-[152px] p-1", children: PRICING_CARD_STYLES.map((style) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center gap-1.5 pl-1.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-xs text-muted-foreground", children: "Card style" }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(DropdownMenu, { modal: false, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DropdownMenuTrigger, { asChild: true, children: trigger }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DropdownMenuContent, { align: "end", sideOffset: 8, className: "w-[152px] min-w-[152px] p-1", children: PRICING_CARD_STYLES.map((style) => {
         const selected = style.value === value;
-        return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
           DropdownMenuItem,
           {
             role: "menuitemradio",
@@ -19268,9 +19726,9 @@ function CardStyleMenu({
             onSelect: () => onChange(style.value),
             className: cn("grid grid-cols-[18px_1fr_16px] gap-2 py-2 pl-2 pr-2 text-[13px]", selected && "bg-muted"),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(StyleSwatch, { style: style.value }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: style.label }),
-              selected && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react9.Check, { size: 16, className: "text-bridge-primary" })
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(StyleSwatch, { style: style.value }),
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: style.label }),
+              selected && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react10.Check, { size: 16, className: "text-bridge-primary" })
             ]
           },
           style.value
@@ -19300,7 +19758,7 @@ function PricingCardToolbar({
   const style = pricingCardStyle(entry.tree, index);
   const featuredTag = pricingCardFeaturedTag(entry.tree, index);
   const mobile = window.innerWidth <= 480;
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
     "div",
     {
       "data-ohw-bridge": "",
@@ -19312,7 +19770,7 @@ function PricingCardToolbar({
       ),
       style: { maxWidth: mobile ? "calc(100vw - 24px)" : void 0 },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
           "div",
           {
             className: cn(
@@ -19321,8 +19779,8 @@ function PricingCardToolbar({
               mobile ? "flex-wrap justify-center" : "flex-nowrap"
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Tooltip, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Tooltip, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                   CustomToolbarButton,
                   {
                     type: "button",
@@ -19330,8 +19788,8 @@ function PricingCardToolbar({
                     "aria-pressed": featuredTag,
                     onClick: () => onSetFeaturedTag(!featuredTag),
                     className: "group size-8",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-                      import_lucide_react9.Star,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                      import_lucide_react10.Star,
                       {
                         size: 16,
                         fill: "currentColor",
@@ -19345,25 +19803,25 @@ function PricingCardToolbar({
                     )
                   }
                 ) }),
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TooltipContent, { side: "bottom", sideOffset: 8, children: featuredTag ? "Unmark featured" : "Mark as featured" })
+                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TooltipContent, { side: "bottom", sideOffset: 8, children: featuredTag ? "Unmark featured" : "Mark as featured" })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ToolbarSeparator, {}),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CardStyleMenu, { value: style, onChange: onSetStyle, disabled: !featuredTag }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ToolbarSeparator, {}),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ToolbarAction, { label: "Add button", onClick: onAddButton, disabled: buttonCount >= 2, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ButtonGlyph, {}) }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ToolbarAction, { label: "Remove button", onClick: onRemoveButton, disabled: buttonCount === 0, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: "relative inline-flex", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ButtonGlyph, {}),
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react9.Minus, { size: 10, strokeWidth: 2.5, className: "absolute -right-1.5 -top-1.5 rounded-full bg-background text-bridge-primary" })
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ToolbarSeparator2, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(CardStyleMenu, { value: style, onChange: onSetStyle, disabled: !featuredTag }),
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ToolbarSeparator2, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ToolbarAction2, { label: "Add button", onClick: onAddButton, disabled: buttonCount >= 2, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ButtonGlyph, {}) }),
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ToolbarAction2, { label: "Remove button", onClick: onRemoveButton, disabled: buttonCount === 0, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("span", { className: "relative inline-flex", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ButtonGlyph, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react10.Minus, { size: 10, strokeWidth: 2.5, className: "absolute -right-1.5 -top-1.5 rounded-full bg-background text-bridge-primary" })
               ] }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ToolbarAction, { label: "Add feature", onClick: onAddFeature, disabled: featureCount >= 10, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(FeatureGlyph, { mode: "add" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ToolbarAction, { label: "Remove feature", onClick: onRemoveFeature, disabled: featureCount <= 1, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(FeatureGlyph, { mode: "remove" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ToolbarSeparator, {}),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ToolbarAction, { label: "Add tier", onClick: onAddTier, disabled: collectionCount >= 4, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react9.Plus, { size: 16, style: { pointerEvents: "none" } }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ToolbarAction, { label: "Remove tier", onClick: onRemoveTier, disabled: collectionCount <= 1, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react9.Minus, { size: 16, style: { pointerEvents: "none" } }) })
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ToolbarAction2, { label: "Add feature", onClick: onAddFeature, disabled: featureCount >= 10, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(FeatureGlyph, { mode: "add" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ToolbarAction2, { label: "Remove feature", onClick: onRemoveFeature, disabled: featureCount <= 1, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(FeatureGlyph, { mode: "remove" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ToolbarSeparator2, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ToolbarAction2, { label: "Add tier", onClick: onAddTier, disabled: collectionCount >= 4, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react10.Plus, { size: 16, style: { pointerEvents: "none" } }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ToolbarAction2, { label: "Remove tier", onClick: onRemoveTier, disabled: collectionCount <= 1, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react10.Minus, { size: 16, style: { pointerEvents: "none" } }) })
             ]
           }
         ),
-        error && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "max-w-[260px] rounded-md bg-background px-2 py-1 text-center text-[11px] text-destructive shadow-sm", children: error })
+        error && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "max-w-[260px] rounded-md bg-background px-2 py-1 text-center text-[11px] text-destructive shadow-sm", children: error })
       ]
     }
   ) });
@@ -19397,7 +19855,7 @@ function AiPricingCardOverlay({
       const overEditable = Boolean(t?.closest?.("[data-ohw-editable], [data-ohw-role], a, button"));
       setHover((prev) => {
         const next = ref && !overEditable ? ref : null;
-        return sameRef(prev, next) ? prev : next;
+        return sameRef2(prev, next) ? prev : next;
       });
     };
     const onLeave = () => setHover(null);
@@ -19412,10 +19870,10 @@ function AiPricingCardOverlay({
     const onClick = (e) => {
       const t = e.target;
       if (!(t instanceof Element)) return;
-      if (t.closest(CHROME_SELECTOR)) return;
+      if (t.closest(CHROME_SELECTOR2)) return;
       const ref = cardRefFromTarget(t);
-      setActive((prev) => sameRef(prev, ref) ? prev : ref);
-      if (!ref || !sameRef(activeRef.current, ref)) setError(null);
+      setActive((prev) => sameRef2(prev, ref) ? prev : ref);
+      if (!ref || !sameRef2(activeRef.current, ref)) setError(null);
     };
     document.addEventListener("click", onClick, true);
     return () => document.removeEventListener("click", onClick, true);
@@ -19480,12 +19938,12 @@ function AiPricingCardOverlay({
   const activeEntry = active ? findEntry(active.sectionId) : null;
   const activeCardRect = useLiveCardRect(active);
   const activeGridRect = useLiveCardRect(active, true);
-  const hoverRect = useLiveCardRect(hover && !sameRef(hover, active) ? hover : null);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
-    hoverRect && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ItemInteractionLayer, { rect: hoverRect, state: "hover" }),
-    activeCardRect && activeGridRect && active && activeEntry && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ItemInteractionLayer, { rect: activeCardRect, state: "active-top" }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(GridToolbarSlot, { gridRect: activeGridRect, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  const hoverRect = useLiveCardRect(hover && !sameRef2(hover, active) ? hover : null);
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+    hoverRect && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ItemInteractionLayer, { rect: hoverRect, state: "hover" }),
+    activeCardRect && activeGridRect && active && activeEntry && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ItemInteractionLayer, { rect: activeCardRect, state: "active-top" }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(GridToolbarSlot, { gridRect: activeGridRect, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         PricingCardToolbar,
         {
           entry: activeEntry,
@@ -19513,7 +19971,7 @@ function AiPricingCardOverlay({
           onRemoveFeature: () => runMutation(active.sectionId, (tree) => removePricingCardFeature(tree, active.index))
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         "div",
         {
           "data-ohw-bridge": "",
@@ -19535,7 +19993,7 @@ function AiPricingCardOverlay({
 
 // src/ui/ai-section/AiVideoOverlay.tsx
 var import_react12 = require("react");
-var import_lucide_react10 = require("lucide-react");
+var import_lucide_react11 = require("lucide-react");
 
 // src/lib/ai-video-tree.ts
 function resolveVideoBlock(tree, path) {
@@ -19606,10 +20064,10 @@ function extractYouTubeId(input) {
 }
 
 // src/ui/ai-section/AiVideoOverlay.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var PRIMARY5 = "#0885FE";
-var OHW_BLUE2 = `var(--ohw-primary, ${PRIMARY5})`;
-var OHW_BLUE_DARK2 = `color-mix(in srgb, var(--ohw-primary, ${PRIMARY5}) 60%, #000000)`;
+var OHW_BLUE = `var(--ohw-primary, ${PRIMARY5})`;
+var OHW_BLUE_DARK = `color-mix(in srgb, var(--ohw-primary, ${PRIMARY5}) 60%, #000000)`;
 function findVideoBlockElement(sectionId, path) {
   const sectionEl = findByInstanceId(sectionId);
   if (!sectionEl) return null;
@@ -19669,12 +20127,12 @@ function requestValidateTree3(postToParent2, tree) {
     postToParent2({ type: "ow:ai-validate-tree-request", id, tree });
   });
 }
-function Pill2({
+function Pill({
   label,
   onClick,
   disabled
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     "button",
     {
       type: "button",
@@ -19690,7 +20148,7 @@ function Pill2({
         border: "none",
         cursor: disabled ? "default" : "pointer",
         background: "#ffffff",
-        color: OHW_BLUE_DARK2,
+        color: OHW_BLUE_DARK,
         opacity: disabled ? 0.4 : 1,
         fontSize: 12,
         lineHeight: "16px",
@@ -19733,8 +20191,8 @@ function VideoUrlInput({ value, onCommit }) {
       onCommit(id);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 4, width: "100%", maxWidth: 280 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 4, width: "100%", maxWidth: 280 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
       "div",
       {
         style: {
@@ -19750,12 +20208,12 @@ function VideoUrlInput({ value, onCommit }) {
           boxShadow: invalid ? "inset 0 0 0 1.5px #EF4444" : "none"
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
             "span",
             {
               style: {
                 flex: "0 0 auto",
-                color: OHW_BLUE_DARK2,
+                color: OHW_BLUE_DARK,
                 fontSize: 10,
                 lineHeight: "16px",
                 fontWeight: 700,
@@ -19765,7 +20223,7 @@ function VideoUrlInput({ value, onCommit }) {
               children: "Video"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
             "input",
             {
               type: "text",
@@ -19802,7 +20260,7 @@ function VideoUrlInput({ value, onCommit }) {
         ]
       }
     ),
-    invalid && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { color: "#FCA5A5", fontSize: 11, textAlign: "center" }, children: "That doesn't look like a YouTube link \u2014 try pasting the video URL again." })
+    invalid && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { style: { color: "#FCA5A5", fontSize: 11, textAlign: "center" }, children: "That doesn't look like a YouTube link \u2014 try pasting the video URL again." })
   ] });
 }
 function VideoToolbar({
@@ -19812,7 +20270,7 @@ function VideoToolbar({
   onSetVideoId,
   onRemove
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
     "div",
     {
       "data-ohw-bridge": "",
@@ -19824,7 +20282,7 @@ function VideoToolbar({
         gap: 6,
         alignItems: "center",
         width: 280,
-        background: OHW_BLUE2,
+        background: OHW_BLUE,
         padding: 8,
         borderRadius: 12,
         boxShadow: "0 8px 24px rgba(0,0,0,0.25)",
@@ -19832,9 +20290,9 @@ function VideoToolbar({
         opacity: pending ? 0.6 : 1
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(VideoUrlInput, { value: videoId, onCommit: onSetVideoId }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Pill2, { label: "Remove video", onClick: onRemove, disabled: !videoId }),
-        error && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { color: "#FCA5A5", fontSize: 11, maxWidth: 220, textAlign: "center" }, children: error })
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(VideoUrlInput, { value: videoId, onCommit: onSetVideoId }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Pill, { label: "Remove video", onClick: onRemove, disabled: !videoId }),
+        error && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { style: { color: "#FCA5A5", fontSize: 11, maxWidth: 220, textAlign: "center" }, children: error })
       ]
     }
   );
@@ -19954,8 +20412,8 @@ function AiVideoOverlay({
   const activeBlockRect = useLiveBlockRect(active);
   const TOOLBAR_APPROX_H = 90;
   const toolbarState = activeBlockRect && activeBlockRect.top < TOOLBAR_APPROX_H ? "active-bottom" : "active-top";
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
-    hoverHandleRect && hover && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+    hoverHandleRect && hover && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       "button",
       {
         type: "button",
@@ -19983,15 +20441,15 @@ function AiVideoOverlay({
           fontSize: 14,
           fontWeight: 700
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react10.Star, { size: 14, style: { pointerEvents: "none" } })
+        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react11.Star, { size: 14, style: { pointerEvents: "none" } })
       }
     ),
-    activeBlockRect && active && activeEntry && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    activeBlockRect && active && activeEntry && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       ItemInteractionLayer,
       {
         rect: activeBlockRect,
         state: toolbarState,
-        toolbar: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        toolbar: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           VideoToolbar,
           {
             videoId: videoIdAt(activeEntry.tree, active.path),
@@ -20015,7 +20473,7 @@ function AiVideoOverlay({
 
 // src/ui/ai-section/AiFadeCarouselOverlay.tsx
 var import_react13 = require("react");
-var import_lucide_react11 = require("lucide-react");
+var import_lucide_react12 = require("lucide-react");
 
 // src/lib/ai-carousel-tree.ts
 function isCarouselBlock(node) {
@@ -20066,10 +20524,10 @@ function setCarouselAutoplay(tree, on) {
 }
 
 // src/ui/ai-section/AiFadeCarouselOverlay.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var PRIMARY6 = "#0885FE";
-var OHW_BLUE3 = `var(--ohw-primary, ${PRIMARY6})`;
-var OHW_BLUE_DARK3 = `color-mix(in srgb, var(--ohw-primary, ${PRIMARY6}) 60%, #000000)`;
+var OHW_BLUE2 = `var(--ohw-primary, ${PRIMARY6})`;
+var OHW_BLUE_DARK2 = `color-mix(in srgb, var(--ohw-primary, ${PRIMARY6}) 60%, #000000)`;
 function findCarouselItemElement(sectionId, index) {
   const sectionEl = findByInstanceId(sectionId);
   if (!sectionEl) return null;
@@ -20148,8 +20606,8 @@ function requestAssetPick2(postToParent2) {
     postToParent2({ type: "ow:asset-pick", id });
   });
 }
-function Pill3({ label, onClick, disabled }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+function Pill2({ label, onClick, disabled }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     "button",
     {
       type: "button",
@@ -20165,7 +20623,7 @@ function Pill3({ label, onClick, disabled }) {
         border: "none",
         cursor: disabled ? "default" : "pointer",
         background: "#ffffff",
-        color: OHW_BLUE_DARK3,
+        color: OHW_BLUE_DARK2,
         opacity: disabled ? 0.4 : 1,
         fontSize: 12,
         lineHeight: "16px",
@@ -20183,7 +20641,7 @@ function TogglePill({
   onToggle,
   disabled
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
     "button",
     {
       type: "button",
@@ -20202,7 +20660,7 @@ function TogglePill({
         border: "none",
         cursor: disabled ? "default" : "pointer",
         background: "#ffffff",
-        color: OHW_BLUE_DARK3,
+        color: OHW_BLUE_DARK2,
         opacity: disabled ? 0.4 : 1,
         fontSize: 12,
         lineHeight: "16px",
@@ -20212,7 +20670,7 @@ function TogglePill({
       },
       children: [
         label,
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           "span",
           {
             "aria-hidden": true,
@@ -20225,10 +20683,10 @@ function TogglePill({
               // Off is a grey track, not a washed-out blue: the pill's own white background already
               // carries the brand colour in the text, and a pale blue track next to it read as
               // "disabled control" rather than "switch that is off".
-              background: on ? OHW_BLUE_DARK3 : "#CBD5E1",
+              background: on ? OHW_BLUE_DARK2 : "#CBD5E1",
               transition: "background 120ms ease"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
               "span",
               {
                 style: {
@@ -20257,7 +20715,7 @@ function CarouselSlideToolbar({
   onChangeImage,
   onToggleAutoplay
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
     "div",
     {
       "data-ohw-bridge": "",
@@ -20268,7 +20726,7 @@ function CarouselSlideToolbar({
         flexDirection: "column",
         gap: 6,
         alignItems: "center",
-        background: OHW_BLUE3,
+        background: OHW_BLUE2,
         padding: 8,
         borderRadius: 12,
         boxShadow: "0 8px 24px rgba(0,0,0,0.25)",
@@ -20280,11 +20738,11 @@ function CarouselSlideToolbar({
         pointerEvents: pending ? "none" : "auto"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { display: "flex", gap: 6, alignItems: "center" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Pill3, { label: "Change Image", onClick: onChangeImage }),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TogglePill, { label: "Autoplay", on: autoplay, onToggle: onToggleAutoplay })
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { style: { display: "flex", gap: 6, alignItems: "center" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Pill2, { label: "Change Image", onClick: onChangeImage }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TogglePill, { label: "Autoplay", on: autoplay, onToggle: onToggleAutoplay })
         ] }),
-        error && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { style: { color: "#FCA5A5", fontSize: 11, maxWidth: 220, textAlign: "center" }, children: error })
+        error && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { style: { color: "#FCA5A5", fontSize: 11, maxWidth: 220, textAlign: "center" }, children: error })
       ]
     }
   );
@@ -20424,8 +20882,8 @@ function AiFadeCarouselOverlay({
   const activeItemRect = useLiveItemRect2(active);
   const TOOLBAR_APPROX_H = 90;
   const toolbarState = activeItemRect && activeItemRect.top < TOOLBAR_APPROX_H ? "active-bottom" : "active-top";
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
-    hoverHandleRect && hover && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
+    hoverHandleRect && hover && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       "button",
       {
         type: "button",
@@ -20454,10 +20912,10 @@ function AiFadeCarouselOverlay({
           fontSize: 14,
           fontWeight: 700
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react11.Star, { size: 14, style: { pointerEvents: "none" } })
+        children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react12.Star, { size: 14, style: { pointerEvents: "none" } })
       }
     ),
-    swapping && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    swapping && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       "div",
       {
         ref: skeletonRef,
@@ -20475,15 +20933,15 @@ function AiFadeCarouselOverlay({
           zIndex: 2147483646,
           pointerEvents: "none"
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("style", { children: MEDIA_SKELETON_CSS })
+        children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("style", { children: MEDIA_SKELETON_CSS })
       }
     ),
-    activeItemRect && active && activeEntry && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    activeItemRect && active && activeEntry && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       ItemInteractionLayer,
       {
         rect: activeItemRect,
         state: toolbarState,
-        toolbar: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        toolbar: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           CarouselSlideToolbar,
           {
             pending,
@@ -20576,165 +21034,30 @@ 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";
-function readPreservedSearch() {
-  if (typeof window === "undefined") return "";
-  const fromUrl = window.location.search;
-  if (fromUrl && fromUrl !== "?") {
-    sessionStorage.setItem(STORAGE_KEY, fromUrl);
-    return fromUrl;
-  }
-  return sessionStorage.getItem(STORAGE_KEY) ?? "";
-}
-function isEditSessionActive() {
-  const search = readPreservedSearch();
-  if (!search || search === "?") return false;
-  const q = search.startsWith("?") ? search.slice(1) : search;
-  return new URLSearchParams(q).get("mode") === "edit";
-}
-
-// src/ui/link-modal/linkModal.utils.ts
-function parseTarget(target) {
-  if (!target) return { pageRoute: "", sectionId: null };
-  const hashIndex = target.indexOf("#");
-  if (hashIndex === -1) return { pageRoute: target, sectionId: null };
-  return {
-    pageRoute: target.slice(0, hashIndex),
-    sectionId: target.slice(hashIndex + 1) || null
-  };
-}
-function normalizePath(path) {
-  const trimmed = path.trim();
-  if (!trimmed) return "/";
-  try {
-    if (/^https?:\/\//i.test(trimmed)) {
-      return new URL(trimmed).pathname || "/";
-    }
-  } catch {
-  }
-  const withSlash = trimmed.startsWith("/") ? trimmed : `/${trimmed}`;
-  if (withSlash.length > 1 && withSlash.endsWith("/")) return withSlash.slice(0, -1);
-  return withSlash;
-}
-function findPageByPath(pages, path) {
-  const normalized = normalizePath(path);
-  return pages.find((p) => normalizePath(p.path) === normalized);
-}
-function inferPageTitleFromPath(path) {
-  const normalized = normalizePath(path);
-  if (normalized === "/") return "Home";
-  const segment = normalized.split("/").filter(Boolean).pop() ?? "";
-  if (!segment) return "Home";
-  return segment.split("-").filter(Boolean).map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
-}
-function isInternalPath(route) {
-  const trimmed = route.trim();
-  if (!trimmed) return false;
-  if (/^https?:\/\//i.test(trimmed)) return false;
-  if (trimmed.startsWith("/")) return true;
-  if (trimmed.includes(" ") || trimmed.includes(".")) return false;
-  return true;
-}
-function resolvePage(route, pages) {
-  const found = findPageByPath(pages, route);
-  if (found) return { path: found.path, title: found.title };
-  return { path: normalizePath(route), title: inferPageTitleFromPath(route) };
-}
-function getSectionsForPath(sectionsByPath, pageRoute) {
-  if (!sectionsByPath) return [];
-  const normalized = normalizePath(pageRoute);
-  return sectionsByPath[normalized] ?? sectionsByPath[pageRoute] ?? [];
-}
-function buildTarget(page, section) {
-  if (section) return `${page.path}#${section.id}`;
-  return page.path;
-}
-function isValidUrl(urlString) {
-  try {
-    const url = new URL(urlString);
-    if (url.protocol !== "http:" && url.protocol !== "https:") return false;
-    const hostname = url.hostname;
-    if (!hostname || hostname.length === 0) return false;
-    if (hostname.includes(" ")) return false;
-    if (hostname === "localhost") return true;
-    if (!hostname.includes(".")) return false;
-    if (!/[a-z]/i.test(hostname)) return false;
-    return true;
-  } catch {
-    return false;
-  }
-}
-function normalizeUrl(value) {
-  const trimmed = value.trim();
-  if (trimmed.startsWith("http://") || trimmed.startsWith("https://")) return trimmed;
-  return `https://${trimmed}`;
-}
-function validateUrlInput(value, pages, allPages) {
-  const trimmed = value.trim();
-  if (!trimmed) return "";
-  const exactPage = allPages.find((p) => p.title.toLowerCase() === trimmed.toLowerCase());
-  if (exactPage) return "";
-  const hasPrefixMatch = pages.some((p) => p.title.toLowerCase().startsWith(trimmed.toLowerCase()));
-  if (hasPrefixMatch) {
-    return "Select a page from the list or enter a valid URL";
-  }
-  const hasScheme = /^https?:\/\//i.test(trimmed);
-  if (!hasScheme && !trimmed.includes(".")) {
-    return "Please enter a valid URL (e.g., https://example.com)";
-  }
-  if (!isValidUrl(normalizeUrl(trimmed))) {
-    return "Please enter a valid URL (e.g., https://example.com)";
-  }
-  return "";
-}
-function getEditModeInitialState(target, pages, sections) {
-  const empty = {
-    searchValue: "",
-    selectedPage: null,
-    selectedSection: null,
-    step: "input"
-  };
-  if (!target) return empty;
-  if (isValidUrl(normalizeUrl(target))) {
-    return { searchValue: target, selectedPage: null, selectedSection: null, step: "input" };
-  }
-  const { pageRoute, sectionId } = parseTarget(target);
-  if (sectionId) {
-    if (isInternalPath(pageRoute)) {
-      const page = resolvePage(pageRoute, pages);
-      const sec = sections.find((s) => s.id === sectionId);
-      return {
-        searchValue: page.title,
-        selectedPage: page,
-        selectedSection: sec ? { id: sec.id, label: sec.label } : null,
-        step: "input"
-      };
-    }
-    return { searchValue: pageRoute || target, selectedPage: null, selectedSection: null, step: "input" };
-  }
-  if (isInternalPath(pageRoute)) {
-    const page = resolvePage(pageRoute, pages);
-    return {
-      searchValue: page.title,
-      selectedPage: page,
-      selectedSection: null,
-      step: "input"
-    };
+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";
+function readPreservedSearch() {
+  if (typeof window === "undefined") return "";
+  const fromUrl = window.location.search;
+  if (fromUrl && fromUrl !== "?") {
+    sessionStorage.setItem(STORAGE_KEY, fromUrl);
+    return fromUrl;
   }
-  return { searchValue: target, selectedPage: null, selectedSection: null, step: "input" };
+  return sessionStorage.getItem(STORAGE_KEY) ?? "";
 }
-function filterAvailablePages(pages, existingTargets) {
-  const taken = new Set(existingTargets);
-  return pages.filter((p) => !taken.has(p.path));
+function isEditSessionActive() {
+  const search = readPreservedSearch();
+  if (!search || search === "?") return false;
+  const q = search.startsWith("?") ? search.slice(1) : search;
+  return new URLSearchParams(q).get("mode") === "edit";
 }
 
 // src/lib/prefetch-sections.ts
@@ -20836,113 +21159,6 @@ function scrollToHashSectionWhenReady(behavior = "smooth") {
 // src/ui/link-modal/LinkPopover.tsx
 var import_react17 = require("react");
 
-// src/ui/dialog.tsx
-var React9 = __toESM(require("react"), 1);
-var import_radix_ui6 = require("radix-ui");
-var import_lucide_react12 = require("lucide-react");
-var import_jsx_runtime24 = require("react/jsx-runtime");
-function Dialog2({
-  ...props
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_radix_ui6.Dialog.Root, { "data-slot": "dialog", ...props });
-}
-function DialogPortal({
-  ...props
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_radix_ui6.Dialog.Portal, { ...props });
-}
-function DialogOverlay({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-    import_radix_ui6.Dialog.Overlay,
-    {
-      "data-slot": "dialog-overlay",
-      "data-ohw-link-modal-root": "",
-      className: cn("fixed inset-0 z-[2147483646] bg-black/50", className),
-      ...props
-    }
-  );
-}
-var DialogContent = React9.forwardRef(
-  ({ className, children, showCloseButton = true, container, ...props }, ref) => {
-    const positionMode = container ? "absolute" : "fixed";
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(DialogPortal, { container: container ?? void 0, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(DialogOverlay, { className: cn(positionMode, "inset-0") }),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
-        import_radix_ui6.Dialog.Content,
-        {
-          ref,
-          "data-slot": "dialog-content",
-          className: cn(
-            positionMode,
-            "left-1/2 top-1/2 z-[2147483647] flex w-full max-w-[448px] -translate-x-1/2 -translate-y-1/2 flex-col overflow-visible",
-            "rounded-xl border border-border bg-background font-sans shadow-lg outline-none",
-            container ? "max-h-[calc(100%-32px)]" : "max-h-[calc(100vh-32px)]",
-            className
-          ),
-          onMouseDown: (e) => e.stopPropagation(),
-          ...props,
-          children: [
-            children,
-            showCloseButton ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-              import_radix_ui6.Dialog.Close,
-              {
-                type: "button",
-                className: "absolute right-[9px] top-[9px] rounded-sm p-1.5 text-foreground hover:bg-muted/50",
-                "aria-label": "Close",
-                children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react12.X, { size: 16, "aria-hidden": true })
-              }
-            ) : null
-          ]
-        }
-      )
-    ] });
-  }
-);
-DialogContent.displayName = import_radix_ui6.Dialog.Content.displayName;
-function DialogHeader({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: cn("flex flex-col gap-1.5", className), ...props });
-}
-function DialogFooter({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-    "div",
-    {
-      className: cn("flex items-center justify-end gap-2", className),
-      ...props
-    }
-  );
-}
-var DialogTitle = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-  import_radix_ui6.Dialog.Title,
-  {
-    ref,
-    className: cn(
-      "text-lg font-semibold leading-none tracking-tight text-card-foreground",
-      className
-    ),
-    ...props
-  }
-));
-DialogTitle.displayName = import_radix_ui6.Dialog.Title.displayName;
-var DialogDescription = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-  import_radix_ui6.Dialog.Description,
-  {
-    ref,
-    className: cn("text-sm text-muted-foreground", className),
-    ...props
-  }
-));
-DialogDescription.displayName = import_radix_ui6.Dialog.Description.displayName;
-var DialogClose = import_radix_ui6.Dialog.Close;
-
 // src/ui/link-modal/LinkEditorPanel.tsx
 var import_lucide_react16 = require("lucide-react");
 
@@ -22046,6 +22262,7 @@ function shouldUseDevFixtures() {
 function getLogoElement(el) {
   const marked = el.closest('[data-ohw-role="logo"], [data-ohw-logo]');
   if (marked) return marked;
+  if (el.closest('[data-ohw-editable="icon"]')) return null;
   const root = el.closest("nav, [data-ohw-nav-root], footer");
   if (!root) return null;
   const anchor = el.closest("a");
@@ -24626,7 +24843,7 @@ function getNavigationSelectionParent(el) {
   if (!isFooterLinksContainer(el) && (el.hasAttribute("data-ohw-footer-col") || el.hasAttribute("data-ohw-footer-column") || isInferredFooterGroup2(el))) {
     return resolveFooterLinksContainerFrom(el);
   }
-  if (el.hasAttribute("data-ohw-nav-container") || el.hasAttribute("data-ohw-nav-drawer") || isFooterLinksContainer(el)) {
+  if (el.hasAttribute("data-ohw-nav-container") || el.hasAttribute("data-ohw-nav-drawer") || el.hasAttribute("data-ohw-footer-col") || el.hasAttribute("data-ohw-footer-column") || isFooterLinksContainer(el) || isInferredFooterGroup2(el)) {
     return getNavigationRoot(el);
   }
   return null;
@@ -24848,7 +25065,6 @@ var ICONS = {
   insertUnorderedList: '<line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/>',
   insertOrderedList: '<line x1="10" y1="6" x2="21" y2="6"/><line x1="10" y1="12" x2="21" y2="12"/><line x1="10" y1="18" x2="21" y2="18"/><path d="M4 6h1v4"/><path d="M4 10h2"/><path d="M6 18H4c0-1 2-2 2-3s-1-1.5-2-1"/>'
 };
-var HEIGHT_SETTLE_DELAYS = [150, 400, 800];
 var SELECTION_CHROME_GAP2 = 4;
 var TOOLBAR_STROKE_GAP2 = 4;
 var TOOLBAR_OFFSET_FROM_ELEMENT = SELECTION_CHROME_GAP2 + TOOLBAR_STROKE_GAP2;
@@ -24946,7 +25162,7 @@ function applyVisibleViewport(el, parentScroll) {
   el.style.top = `${top}px`;
   el.style.height = `${height}px`;
 }
-var TOOLBAR_EDGE_MARGIN3 = 4;
+var TOOLBAR_EDGE_MARGIN4 = 4;
 function clampToolbarToClip(top, transform, rect, clip, approxH, gap) {
   const isAbove = transform.includes("translateY(-100%)");
   let visualTop = isAbove ? top - approxH : top;
@@ -24973,8 +25189,8 @@ function clampToolbarToClip(top, transform, rect, clip, approxH, gap) {
 function clampToolbarLeft(centerX, toolbarWidth) {
   const half = toolbarWidth / 2;
   return Math.max(
-    TOOLBAR_EDGE_MARGIN3 + half,
-    Math.min(centerX, window.innerWidth - TOOLBAR_EDGE_MARGIN3 - half)
+    TOOLBAR_EDGE_MARGIN4 + half,
+    Math.min(centerX, window.innerWidth - TOOLBAR_EDGE_MARGIN4 - half)
   );
 }
 function calcToolbarPos(rect, parentScroll, toolbarW = 306) {
@@ -25405,6 +25621,34 @@ function OhhwellsBridge() {
   const [fetchState, setFetchState] = (0, import_react21.useState)("idle");
   const [showBranding, setShowBranding] = (0, import_react21.useState)(false);
   const autoSaveTimers = (0, import_react21.useRef)(/* @__PURE__ */ new Map());
+  (0, import_react21.useEffect)(() => {
+    stampBridgeVersionOnDocument();
+  }, []);
+  (0, import_react21.useEffect)(() => {
+    if (isEditMode) return;
+    return armLoaderHangBeacon(subdomain, fetchState);
+  }, [isEditMode, subdomain, fetchState]);
+  (0, import_react21.useEffect)(() => {
+    if (isEditMode || !subdomain) return;
+    const onError = (event) => {
+      reportOutageBeacon({
+        subdomain,
+        reason: "page_error",
+        detail: event.message || "window error"
+      });
+    };
+    const onRejection = (event) => {
+      const reason = event.reason;
+      const detail = reason instanceof Error ? reason.message : typeof reason === "string" ? reason : "unhandledrejection";
+      reportOutageBeacon({ subdomain, reason: "page_error", detail });
+    };
+    window.addEventListener("error", onError);
+    window.addEventListener("unhandledrejection", onRejection);
+    return () => {
+      window.removeEventListener("error", onError);
+      window.removeEventListener("unhandledrejection", onRejection);
+    };
+  }, [isEditMode, subdomain]);
   const activeElRef = (0, import_react21.useRef)(null);
   const pointerHeldRef = (0, import_react21.useRef)(false);
   const selectedElRef = (0, import_react21.useRef)(null);
@@ -25826,21 +26070,6 @@ function OhhwellsBridge() {
   const [isItemDragging, setIsItemDragging] = (0, import_react21.useState)(false);
   const [isFooterFrameSelection, setIsFooterFrameSelection] = (0, import_react21.useState)(false);
   isFooterFrameSelectionRef.current = isFooterFrameSelection;
-  const [floatingPanel, setFloatingPanel] = (0, import_react21.useState)(null);
-  const floatingPanelOpenRef = (0, import_react21.useRef)(false);
-  floatingPanelOpenRef.current = floatingPanel !== null;
-  const floatingPanelRef = (0, import_react21.useRef)(null);
-  floatingPanelRef.current = floatingPanel;
-  const [floatingPanelPos, setFloatingPanelPos] = (0, import_react21.useState)(null);
-  const buttonCollectionDragRef = (0, import_react21.useRef)(null);
-  const buttonDropInsertIndexRef = (0, import_react21.useRef)(null);
-  const [buttonDropSlots, setButtonDropSlots] = (0, import_react21.useState)([]);
-  const [activeButtonDropIndex, setActiveButtonDropIndex] = (0, import_react21.useState)(null);
-  const buttonPointerDragRef = (0, import_react21.useRef)(null);
-  const [buttonStyleTick, setButtonStyleTick] = (0, import_react21.useState)(0);
-  const [logoSizeDraft, setLogoSizeDraft] = (0, import_react21.useState)(null);
-  const [editorViewport, setEditorViewport] = (0, import_react21.useState)("desktop");
-  const [parentScrollSnap, setParentScrollSnap] = (0, import_react21.useState)(null);
   const [navDropdownPreviewOpen, setNavDropdownPreviewOpen] = (0, import_react21.useState)(null);
   const [footerHeadingVisible, setFooterHeadingVisible] = (0, import_react21.useState)(null);
   const footerDragRef = (0, import_react21.useRef)(null);
@@ -25866,7 +26095,23 @@ function OhhwellsBridge() {
   const stylesRef = (0, import_react21.useRef)("");
   const appliedDrawerRef = (0, import_react21.useRef)(null);
   const pendingDeleteUndoRef = (0, import_react21.useRef)(null);
+  const [floatingPanel, setFloatingPanel] = (0, import_react21.useState)(null);
+  const floatingPanelOpenRef = (0, import_react21.useRef)(false);
+  const floatingPanelRef = (0, import_react21.useRef)(null);
+  floatingPanelRef.current = floatingPanel;
+  const setFloatingPanelRef = (0, import_react21.useRef)(setFloatingPanel);
+  const [floatingPanelPos, setFloatingPanelPos] = (0, import_react21.useState)(null);
+  const buttonCollectionDragRef = (0, import_react21.useRef)(null);
+  const buttonDropInsertIndexRef = (0, import_react21.useRef)(null);
+  const [buttonDropSlots, setButtonDropSlots] = (0, import_react21.useState)([]);
+  const [activeButtonDropIndex, setActiveButtonDropIndex] = (0, import_react21.useState)(null);
+  const buttonPointerDragRef = (0, import_react21.useRef)(null);
+  const [buttonStyleTick, setButtonStyleTick] = (0, import_react21.useState)(0);
+  const [logoSizeDraft, setLogoSizeDraft] = (0, import_react21.useState)(null);
+  const [editorViewport, setEditorViewport] = (0, import_react21.useState)("desktop");
+  const [parentScrollSnap, setParentScrollSnap] = (0, import_react21.useState)(null);
   const [sitePages, setSitePages] = (0, import_react21.useState)([]);
+  const collectionItemsRef = (0, import_react21.useRef)(/* @__PURE__ */ new Map());
   const [sectionsByPath, setSectionsByPath] = (0, import_react21.useState)({});
   const sectionsPrefetchGenRef = (0, import_react21.useRef)(0);
   const setLinkPopoverRef = (0, import_react21.useRef)(setLinkPopover);
@@ -25874,7 +26119,18 @@ function OhhwellsBridge() {
   const linkPopoverOpenRef = (0, import_react21.useRef)(false);
   const linkPopoverGraceUntilRef = (0, import_react21.useRef)(0);
   setLinkPopoverRef.current = setLinkPopover;
+  setFloatingPanelRef.current = setFloatingPanel;
   linkPopoverSessionRef.current = linkPopover;
+  floatingPanelOpenRef.current = Boolean(floatingPanel);
+  (0, import_react21.useEffect)(() => {
+    const syncViewport = () => {
+      const next = window.innerWidth <= 480 ? "mobile" : "desktop";
+      setEditorViewport((prev) => prev === next ? prev : next);
+    };
+    syncViewport();
+    window.addEventListener("resize", syncViewport);
+    return () => window.removeEventListener("resize", syncViewport);
+  }, []);
   (0, import_react21.useEffect)(() => {
     setSectionOrderPersistHandler((entries) => {
       const currentPath = window.location.pathname;
@@ -26010,10 +26266,12 @@ function OhhwellsBridge() {
     const onSitePages = (e) => {
       if (e.data?.type !== "ow:site-pages" || !Array.isArray(e.data.pages)) return;
       if (useFixtures) return;
-      const mapped = e.data.pages.map((p) => ({
+      const incoming = e.data.pages;
+      const mapped = incoming.map((p) => ({
         path: p.path,
         title: p.title
       }));
+      collectionItemsRef.current = indexCollectionItems(incoming);
       setSitePages(mapped);
       runSectionsPrefetchRef.current(mapped);
     };
@@ -27569,6 +27827,7 @@ function OhhwellsBridge() {
       applyAiFooterFromContent(content);
       if (typeof content[STYLE_STORE_KEY] === "string") {
         stylesRef.current = content[STYLE_STORE_KEY];
+        document.querySelectorAll('[data-ohw-editable="form"]').forEach((f) => markFormFields(f));
         applyStylesToDom(parseStyleStore(content[STYLE_STORE_KEY]));
       }
       applyBrandChrome(content);
@@ -27579,12 +27838,12 @@ function OhhwellsBridge() {
         if (key === "__ohw_sections") continue;
         if (key === AI_SECTIONS_KEY) continue;
         if (key === AI_FOOTER_KEY) continue;
+        if (key === LOGO_PLACEHOLDER_KEY) continue;
+        if (LOGO_IMAGE_KEYS.includes(key)) continue;
         if (key === BRAND_KIT_KEY) continue;
         if (key === STYLE_STORE_KEY) continue;
         if (BRAND_CHROME_KEYS.has(key)) continue;
-        if (key === LOGO_PLACEHOLDER_KEY) continue;
         if (key === CUSTOM_CODE_AFTER_HEAD_KEY || key === CUSTOM_CODE_BEFORE_HEAD_KEY) continue;
-        if (LOGO_IMAGE_KEYS.includes(key)) continue;
         if (typeof content[AI_FOOTER_KEY] === "string" && content[AI_FOOTER_KEY] && isAiFooterOwnedContentKey(key)) {
           continue;
         }
@@ -27661,7 +27920,17 @@ function OhhwellsBridge() {
     const apiUrl = process.env.NEXT_PUBLIC_FLOWOPS_API_URL ?? "https://flowops-backend-staging-2yfdh7pwpq-as.a.run.app";
     const initialPath = pathname;
     fetchedContentPaths.add(`${subdomain}::${initialPath}`);
-    fetch(`${apiUrl}/api/public/sites/${subdomain}/content?path=${encodeURIComponent(initialPath)}`, { cache: "no-store" }).then((r2) => r2.ok ? r2.json() : null).then((data) => {
+    fetch(`${apiUrl}/api/public/sites/${subdomain}/content?path=${encodeURIComponent(initialPath)}`, { cache: "no-store" }).then((r2) => {
+      if (!r2.ok) {
+        reportOutageBeacon({
+          subdomain,
+          reason: "content_fetch_failed",
+          detail: `HTTP ${r2.status}`
+        });
+        return null;
+      }
+      return r2.json();
+    }).then((data) => {
       if (cancelled) return;
       const content = data?.content ?? {};
       const branding = Boolean(data?.showBranding);
@@ -27670,7 +27939,12 @@ function OhhwellsBridge() {
       recordOverriddenPaths(subdomain, data?.overriddenPaths);
       setShowBranding(branding);
       return applyContent(content);
-    }).catch(() => {
+    }).catch((err) => {
+      reportOutageBeacon({
+        subdomain,
+        reason: "content_fetch_failed",
+        detail: err instanceof Error ? err.message : "fetch failed"
+      });
     }).finally(() => {
       if (!cancelled) setFetchState("done");
     });
@@ -27800,17 +28074,18 @@ function OhhwellsBridge() {
         }
         applyAiFooterFromContent(content);
         if (typeof content[STYLE_STORE_KEY] === "string") {
+          document.querySelectorAll('[data-ohw-editable="form"]').forEach((f) => markFormFields(f));
           applyStylesToDom(parseStyleStore(content[STYLE_STORE_KEY]));
         }
         for (const [key, val] of Object.entries(content)) {
           if (key === "__ohw_sections") continue;
           if (key === AI_SECTIONS_KEY) continue;
           if (key === AI_FOOTER_KEY) continue;
+          if (key === LOGO_PLACEHOLDER_KEY) continue;
+          if (LOGO_IMAGE_KEYS.includes(key)) continue;
           if (key === BRAND_KIT_KEY) continue;
           if (key === STYLE_STORE_KEY) continue;
           if (BRAND_CHROME_KEYS.has(key)) continue;
-          if (key === LOGO_PLACEHOLDER_KEY) continue;
-          if (LOGO_IMAGE_KEYS.includes(key)) continue;
           if (typeof content[AI_FOOTER_KEY] === "string" && content[AI_FOOTER_KEY] && isAiFooterOwnedContentKey(key)) {
             continue;
           }
@@ -28077,26 +28352,11 @@ function OhhwellsBridge() {
     const t2 = setTimeout(measure, 500);
     const ro = new ResizeObserver(schedule);
     ro.observe(document.body);
-    let lastWidth = window.innerWidth;
-    let resizeTimers = [];
-    const clearResizeTimers = () => {
-      resizeTimers.forEach(clearTimeout);
-      resizeTimers = [];
-    };
-    const handleResize = () => {
-      if (window.innerWidth === lastWidth) return;
-      lastWidth = window.innerWidth;
-      clearResizeTimers();
-      resizeTimers = HEIGHT_SETTLE_DELAYS.map((delay) => setTimeout(measure, delay));
-    };
-    window.addEventListener("resize", handleResize);
     return () => {
       clearTimeout(t1);
       clearTimeout(t2);
       if (raf != null) cancelAnimationFrame(raf);
       ro.disconnect();
-      clearResizeTimers();
-      window.removeEventListener("resize", handleResize);
     };
   }, [pathname, isEditMode, postToParent2]);
   (0, import_react21.useEffect)(() => {
@@ -28393,6 +28653,13 @@ function OhhwellsBridge() {
       if (target.closest("[data-ohw-state-toggle]")) return;
       if (target.closest("[data-ohw-max-badge]")) return;
       if (isInsideLinkEditor(target)) return;
+      if (isInsideFloatingPanel(target)) return;
+      if (target.closest("[data-ohw-form-toolbar]")) return;
+      if (target.closest(
+        '[data-ohw-field-toolbar], [data-ohw-field-type-picker], [data-radix-popper-content-wrapper], [role="menu"], [data-slot="dropdown-menu-content"]'
+      )) {
+        return;
+      }
       if (selectedMediaElRef.current && !selectedMediaElRef.current.contains(target) && !target.closest("[data-ohw-media-overlay], [data-ohw-edit-chrome], [data-ohw-item-interaction]")) {
         clearMediaSelectionRef.current();
       }
@@ -28416,11 +28683,15 @@ function OhhwellsBridge() {
           return;
         }
       }
-      if (isInsideFloatingPanel(target)) return;
-      if (target.closest("[data-ohw-form-toolbar]")) return;
-      if (target.closest(
-        '[data-ohw-field-toolbar], [data-ohw-field-type-picker], [data-radix-popper-content-wrapper], [role="menu"], [data-slot="dropdown-menu-content"]'
-      )) {
+      const collectionItem = matchCollectionItemClick(target, collectionItemsRef.current);
+      if (collectionItem) {
+        e.preventDefault();
+        e.stopPropagation();
+        postToParentRef.current({
+          type: "ow:collection-item-selected",
+          path: collectionItem.path,
+          collection: collectionItem.collection
+        });
         return;
       }
       {
@@ -28576,9 +28847,13 @@ function OhhwellsBridge() {
         if (isIconEditable(editable) && !getSocialItem(editable)) {
           e.preventDefault();
           e.stopPropagation();
-          selectIconElementRef.current(editable);
           const aiIcon = editable.hasAttribute("data-ai-icon");
           const featureIcon = aiIcon && /\.features\.\d+\.icon$/.test(editable.dataset.ohwKey ?? "");
+          if (aiIcon) {
+            aiSectionApiRef.current?.selectFromElement(editable);
+          } else {
+            selectIconElementRef.current(editable);
+          }
           postToParentRef.current({
             type: "ow:icon-pick",
             key: editable.dataset.ohwKey ?? "",
@@ -28806,6 +29081,9 @@ function OhhwellsBridge() {
         setHoveredItemRect(null);
         hoveredNavContainerRef.current = null;
         setHoveredNavContainerRect(null);
+        siblingHintElRef.current = null;
+        setSiblingHintRect(null);
+        setSiblingHintRects([]);
         return;
       }
       {
@@ -28926,7 +29204,6 @@ function OhhwellsBridge() {
             hoveredNavContainerRef.current = null;
             setHoveredNavContainerRect(null);
             hoveredItemElRef.current = editable;
-            setHoveredItemRect(isSelectedForHoverRef.current(editable) ? null : editable.getBoundingClientRect());
           }
         }
       }
@@ -29636,7 +29913,11 @@ function OhhwellsBridge() {
     };
     const handleMouseMove = (e) => {
       const { clientX, clientY } = e;
-      if (pointOwnedByFloatingPanel(clientX, clientY)) return;
+      if (pointOwnedByFloatingPanel(clientX, clientY)) {
+        dismissImageHover();
+        clearImageHover();
+        return;
+      }
       if (isNavDrawerOpen() && isPointOutsideOpenDrawer(clientX, clientY)) {
         document.querySelectorAll("[data-ohw-hovered]").forEach((el) => el.removeAttribute("data-ohw-hovered"));
         formHoverElRef.current = null;
@@ -29665,7 +29946,12 @@ function OhhwellsBridge() {
         setHoveredItemRect(null);
         hoveredNavContainerRef.current = null;
         setHoveredNavContainerRect(null);
+        siblingHintElRef.current = null;
+        setSiblingHintRect(null);
+        setSiblingHintRects([]);
         dismissImageHover();
+        clearImageHover();
+        setSectionGap(null);
         return;
       }
       if (probeSocialsRowAt(clientX, clientY)) return;
@@ -29677,7 +29963,11 @@ function OhhwellsBridge() {
       if (e.data?.type !== "ow:pointer-sync") return;
       const { clientX, clientY } = e.data;
       if (typeof clientX !== "number" || typeof clientY !== "number") return;
-      if (pointOwnedByFloatingPanel(clientX, clientY)) return;
+      if (pointOwnedByFloatingPanel(clientX, clientY)) {
+        dismissImageHover();
+        clearImageHover();
+        return;
+      }
       if (isNavDrawerOpen() && isPointOutsideOpenDrawer(clientX, clientY)) return;
       if (probeSocialsRowAt(clientX, clientY)) return;
       probeSectionGapAt(clientX, clientY);
@@ -30057,6 +30347,7 @@ function OhhwellsBridge() {
       applyAiFooterFromContent(content);
       if (typeof content[STYLE_STORE_KEY] === "string") {
         stylesRef.current = content[STYLE_STORE_KEY];
+        document.querySelectorAll('[data-ohw-editable="form"]').forEach((f) => markFormFields(f));
         applyStylesToDom(parseStyleStore(content[STYLE_STORE_KEY]));
       }
       applyBrandChrome(content);
@@ -30071,12 +30362,12 @@ function OhhwellsBridge() {
         }
         if (key === AI_SECTIONS_KEY) continue;
         if (key === AI_FOOTER_KEY) continue;
+        if (key === LOGO_PLACEHOLDER_KEY) continue;
+        if (LOGO_IMAGE_KEYS.includes(key) && !String(val ?? "").trim()) continue;
         if (key === BRAND_KIT_KEY) continue;
         if (key === STYLE_STORE_KEY) continue;
         if (BRAND_CHROME_KEYS.has(key)) continue;
-        if (key === LOGO_PLACEHOLDER_KEY) continue;
         if (key === CUSTOM_CODE_AFTER_HEAD_KEY || key === CUSTOM_CODE_BEFORE_HEAD_KEY) continue;
-        if (LOGO_IMAGE_KEYS.includes(key) && !String(val ?? "").trim()) continue;
         if (typeof content[AI_FOOTER_KEY] === "string" && content[AI_FOOTER_KEY] && isAiFooterOwnedContentKey(key)) {
           continue;
         }
@@ -30712,12 +31003,24 @@ function OhhwellsBridge() {
         closeLinkPopoverRef.current();
         return;
       }
+      if (floatingPanelOpenRef.current) {
+        setFloatingPanelRef.current(null);
+        deselectRef.current();
+        deactivateRef.current();
+        return;
+      }
       deselectRef.current();
       deactivateRef.current();
       clearMediaSelectionRef.current();
       clearIconSelectionRef.current();
     };
     window.addEventListener("message", handleDeactivate);
+    const handleSelectNav = (e) => {
+      if (e.data?.type !== "ow:select-nav") return;
+      const navContainer = findSelectableNavContainer();
+      if (navContainer) selectFrameRef.current(navContainer);
+    };
+    window.addEventListener("message", handleSelectNav);
     const handleToastAction = (e) => {
       if (e.data?.type !== "ow:toast-action") return;
       const actionId = typeof e.data.actionId === "string" ? e.data.actionId : null;
@@ -31534,10 +31837,11 @@ function OhhwellsBridge() {
       window.removeEventListener("message", handleDeleteSection);
       window.removeEventListener("message", handleDuplicateSection);
       window.removeEventListener("message", handleDeactivate);
-      document.documentElement.removeAttribute("data-ohw-panel-dragging");
+      window.removeEventListener("message", handleSelectNav);
       window.removeEventListener("message", handleToastAction);
       window.removeEventListener("message", handleFormCount);
       window.removeEventListener("message", handleUiEscape);
+      document.documentElement.removeAttribute("data-ohw-panel-dragging");
       autoSaveTimers.current.forEach(clearTimeout);
       autoSaveTimers.current.clear();
       if (imageUnhoverTimerRef.current) clearTimeout(imageUnhoverTimerRef.current);
@@ -31831,7 +32135,7 @@ function OhhwellsBridge() {
       postToParent2({
         type: "ow:ready",
         version: "1",
-        bridgeVersion: "0.1.152",
+        bridgeVersion: "0.1.153-next.417",
         path: pathname,
         nodes: collectEditableNodes(editContentRef.current),
         sections
@@ -33057,6 +33361,7 @@ function EmptySection({ title, homeHref = "/", eyebrowKey, titleKey, subtitleKey
   foldAlignIntoTrees,
   getEditModeInitialState,
   hasMountedContentNodes,
+  indexCollectionItems,
   insertFooterHours,
   isEditSessionActive,
   isPlainLeftClick,
@@ -33064,6 +33369,7 @@ function EmptySection({ title, homeHref = "/", eyebrowKey, titleKey, subtitleKey
   isRenderableTree,
   isStickySearchParam,
   isValidUrl,
+  matchCollectionItemClick,
   nextViableSlide,
   parseAiFooterState,
   parseAiSectionsState,