npm - @ohhwells/bridge - Versions diffs - 0.1.112 → 0.1.113-next.293 - Mend

@ohhwells/bridge 0.1.112 → 0.1.113-next.293

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/dist/index.js CHANGED Viewed

@@ -279,16 +279,17 @@ var LEGACY_BRAND_VAR_NAMES = [
   "text-muted",
   "surface",
   "border",
-  "on-primary",
-  "navbar-background"
+  "on-primary"
 ].map((role) => `--brand-${role}`);
 var FONT_VARS = {
   heading: ["--font-heading", "--font-display", "--brand-font-heading"],
   body: ["--font-body", "--brand-font-body"]
 };
 var BRAND_FONT_LINK_ID = "ohw-brand-fonts";
-function brandColorVars(kit) {
-  const { dark, primary, accent, light } = kit.palette;
+var CUSTOM_FONT_STYLE_ID = "ohw-brand-custom-fonts";
+var CUSTOM_FONT_FORMATS = /* @__PURE__ */ new Set(["woff2", "woff", "truetype", "opentype"]);
+function brandColorVars(palette) {
+  const { dark, primary, accent, light } = palette;
   const mix = (a, aPct, b) => `color-mix(in srgb, ${a} ${aPct}%, ${b})`;
   const surface = mix(light, 95, dark);
   const border = mix(light, 85, dark);
@@ -311,22 +312,42 @@ function brandColorVars(kit) {
     "--brand-border": border,
     // Buttons/bands painted in the primary colour assume it's dark/saturated enough to need
     // light text on top — the same assumption LOGO_IMAGE's light-on-dark navbar mark makes.
-    "--brand-on-primary": light,
-    "--brand-navbar-background": dark
+    "--brand-on-primary": light
   };
 }
+function parseCustomFontWeight(raw) {
+  if (typeof raw !== "object" || raw === null) return null;
+  const w = raw;
+  if (typeof w.weight !== "number" || !Number.isFinite(w.weight)) return null;
+  if (typeof w.url !== "string" || !w.url) return null;
+  if (typeof w.format !== "string" || !CUSTOM_FONT_FORMATS.has(w.format)) return null;
+  const weightEnd = typeof w.weightEnd === "number" && Number.isFinite(w.weightEnd) && w.weightEnd > w.weight ? w.weightEnd : void 0;
+  return { weight: w.weight, ...weightEnd !== void 0 ? { weightEnd } : {}, url: w.url, format: w.format };
+}
+function parseCustomFont(raw) {
+  if (typeof raw !== "object" || raw === null) return null;
+  const f = raw;
+  if (typeof f.family !== "string" || !f.family) return null;
+  if (typeof f.label !== "string" || !f.label) return null;
+  if (!Array.isArray(f.weights)) return null;
+  const weights = f.weights.map(parseCustomFontWeight).filter((w) => w !== null);
+  if (weights.length === 0) return null;
+  return { family: f.family, label: f.label, weights };
+}
 function parseBrandKit(raw) {
   if (!raw) return null;
   try {
     const parsed = JSON.parse(raw);
     const p = parsed?.palette;
     const f = parsed?.fonts;
-    if (!p || !f || typeof p.dark !== "string" || typeof p.primary !== "string" || typeof p.accent !== "string" || typeof p.light !== "string" || typeof f.heading !== "string" || typeof f.body !== "string") {
-      return null;
-    }
+    const palette = p && typeof p.dark === "string" && typeof p.primary === "string" && typeof p.accent === "string" && typeof p.light === "string" ? { dark: p.dark, primary: p.primary, accent: p.accent, light: p.light } : void 0;
+    const fonts = f && typeof f.heading === "string" && typeof f.body === "string" ? { heading: f.heading, body: f.body } : void 0;
+    const customFonts = Array.isArray(parsed?.customFonts) ? parsed.customFonts.map(parseCustomFont).filter((c) => c !== null) : void 0;
+    if (!palette && !fonts && !customFonts) return null;
     return {
-      palette: { dark: p.dark, primary: p.primary, accent: p.accent, light: p.light },
-      fonts: { heading: f.heading, body: f.body }
+      ...palette ? { palette } : {},
+      ...fonts ? { fonts } : {},
+      ...customFonts ? { customFonts } : {}
     };
   } catch {
     return null;
@@ -336,11 +357,16 @@ function familyOf(stack) {
   const first = stack.split(",")[0]?.trim() ?? "";
   return first.replace(/^['"]|['"]$/g, "");
 }
+function quoteFamily(family) {
+  return `'${family.replace(/\\/g, "\\\\").replace(/'/g, "\\'")}'`;
+}
+var WEIGHT_SCALE = [100, 200, 300, 400, 500, 600, 700, 800, 900];
 function loadBrandFonts(families) {
   const unique = [...new Set(families.map((f) => f.trim()).filter(Boolean))];
   if (unique.length === 0) return;
-  const spec = unique.map((f) => `${f.replace(/ /g, "+")}:400,500,600,700`).join("|");
-  const href = `https://fonts.googleapis.com/css?family=${spec}&display=swap`;
+  const weights = WEIGHT_SCALE.join(";");
+  const spec = unique.map((f) => `family=${f.replace(/ /g, "+")}:wght@${weights}`).join("&");
+  const href = `https://fonts.googleapis.com/css2?${spec}&display=swap`;
   let link = document.getElementById(BRAND_FONT_LINK_ID);
   if (!link) {
     link = document.createElement("link");
@@ -350,18 +376,54 @@ function loadBrandFonts(families) {
   }
   if (link.href !== href) link.href = href;
 }
+function escapeCssString(value) {
+  return value.replace(/\\/g, "\\\\").replace(/'/g, "\\'");
+}
+function loadCustomFonts(fonts) {
+  const list = fonts ?? [];
+  let style = document.getElementById(CUSTOM_FONT_STYLE_ID);
+  if (list.length === 0) {
+    style?.remove();
+    return;
+  }
+  if (!style) {
+    style = document.createElement("style");
+    style.id = CUSTOM_FONT_STYLE_ID;
+    document.head.appendChild(style);
+  }
+  style.textContent = list.flatMap(
+    (font) => font.weights.map((w) => {
+      const weightDescriptor = w.weightEnd ? `${w.weight} ${w.weightEnd}` : `${w.weight}`;
+      return `@font-face { font-family: '${escapeCssString(font.family)}'; src: url('${escapeCssString(w.url)}') format('${w.format}'); font-weight: ${weightDescriptor}; font-display: swap; }`;
+    })
+  ).join("\n");
+}
 function applyBrandToDom(kit) {
   const root = document.documentElement;
   if (!kit) {
     for (const name of [...BRAND_VAR_NAMES, ...LEGACY_BRAND_VAR_NAMES]) root.style.removeProperty(name);
     for (const name of [...FONT_VARS.heading, ...FONT_VARS.body]) root.style.removeProperty(name);
     document.getElementById(BRAND_FONT_LINK_ID)?.remove();
+    document.getElementById(CUSTOM_FONT_STYLE_ID)?.remove();
     return;
   }
-  for (const [name, value] of Object.entries(brandColorVars(kit))) root.style.setProperty(name, value);
-  for (const name of FONT_VARS.heading) root.style.setProperty(name, kit.fonts.heading);
-  for (const name of FONT_VARS.body) root.style.setProperty(name, kit.fonts.body);
-  loadBrandFonts([familyOf(kit.fonts.heading), familyOf(kit.fonts.body)]);
+  if (kit.palette) {
+    for (const [name, value] of Object.entries(brandColorVars(kit.palette))) root.style.setProperty(name, value);
+  }
+  if (kit.customFonts) {
+    loadCustomFonts(kit.customFonts);
+  }
+  if (kit.fonts) {
+    const heading = quoteFamily(kit.fonts.heading);
+    const body = quoteFamily(kit.fonts.body);
+    for (const name of FONT_VARS.heading) root.style.setProperty(name, heading);
+    for (const name of FONT_VARS.body) root.style.setProperty(name, body);
+    const customFamilies = new Set((kit.customFonts ?? []).map((f) => f.family));
+    const googleFamilies = [familyOf(kit.fonts.heading), familyOf(kit.fonts.body)].filter(
+      (f) => !customFamilies.has(f)
+    );
+    loadBrandFonts(googleFamilies);
+  }
 }
 // src/lib/section-styles.ts
@@ -386,6 +448,20 @@ var BG_VALUES = {
   accent: "var(--ohw-brand-primary, var(--color-primary, #0078E5))",
   "accent-soft": "color-mix(in srgb, var(--ohw-brand-primary, var(--color-primary, #0078E5)) 12%, var(--ohw-brand-light, var(--color-light, #FFFFFF)))"
 };
+var NAVBAR_COLOR_TOKENS = ["dark", "primary", "accent", "light"];
+function navbarColorVar(token) {
+  const fallback = {
+    dark: "#0C0A09",
+    primary: "#0078E5",
+    accent: "#0078E5",
+    light: "#FFFFFF"
+  };
+  return `var(--ohw-brand-${token}, var(--color-${token}, ${fallback[token]}))`;
+}
+function resolveNavbarValue(value) {
+  if (value === void 0) return void 0;
+  return NAVBAR_COLOR_TOKENS.includes(value) ? navbarColorVar(value) : value;
+}
 var HEADLINE_SIZES = { md: 24, lg: 32, xl: 40, display: 56 };
 function styleSheetCss() {
   const rules = [];
@@ -555,8 +631,16 @@ function applyStylesToDom(store) {
   for (const [sectionId, override] of Object.entries(store.sections)) {
     const escaped = CSS.escape(sectionId);
     const byInstance = document.querySelectorAll(`[data-ohw-instance="${escaped}"]`);
-    const sections = byInstance.length ? byInstance : document.querySelectorAll(`[data-ohw-section="${escaped}"]`);
+    const sections = Array.from(
+      byInstance.length ? byInstance : document.querySelectorAll(`[data-ohw-section="${escaped}"]`)
+    );
+    const isNavbar = sectionId === "navbar";
+    if (isNavbar) {
+      const drawer = document.querySelector("[data-ohw-nav-drawer]");
+      if (drawer && !sections.includes(drawer)) sections.push(drawer);
+    }
     for (const marker of Array.from(sections)) {
+      const isDrawerMarker = isNavbar && marker.hasAttribute("data-ohw-nav-drawer");
       const section = marker.querySelector(":scope > [data-ai-section]") ?? marker;
       for (const [prop, attr] of Object.entries(SECTION_ATTRS)) {
         const value = override[prop];
@@ -564,19 +648,23 @@ function applyStylesToDom(store) {
         if (prop === "sectionBackground" && override.sectionBackgroundColor !== void 0) continue;
         section.setAttribute(attr, String(value).replace(":", "-"));
       }
-      if (override.sectionBackgroundColor !== void 0) {
+      const bgOverride = isDrawerMarker ? override.navbarMobileBackground : override.sectionBackgroundColor;
+      const textOverride = isDrawerMarker ? override.navbarMobileTextColor : override.textColor;
+      const bgValue = isNavbar ? resolveNavbarValue(bgOverride) : bgOverride;
+      const textValue = isNavbar ? resolveNavbarValue(textOverride) : textOverride;
+      if (bgValue !== void 0) {
         saveInline(section, "background");
-        section.style.setProperty("background", override.sectionBackgroundColor, "important");
+        section.style.setProperty("background", bgValue, "important");
         section.setAttribute("data-ohw-style-bgcolor", "");
       }
-      if (override.textColor !== void 0 || override.fontFamily !== void 0) {
+      if (textValue !== void 0 || override.fontFamily !== void 0) {
         const textEls = marker.querySelectorAll(
           '[data-ohw-editable="text"], [data-ohw-editable="plain"], [data-ohw-field-label]'
         );
         for (const el of Array.from(textEls)) {
-          if (override.textColor !== void 0) {
+          if (textValue !== void 0) {
             saveInline(el, "color");
-            el.style.setProperty("color", override.textColor, "important");
+            el.style.setProperty("color", textValue, "important");
             el.setAttribute(NODE_WROTE_ATTR, "");
           }
           if (override.fontFamily !== void 0) {
@@ -1282,6 +1370,22 @@ function accentBandContext(brand) {
 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.
+  "  [data-ai-responsive] [data-ai-group] { display: flex !important; flex-direction: column !important; }",
+  "  [data-ai-responsive] [data-ai-group] > * { grid-column: auto !important; }",
+  "  [data-ai-responsive] [data-ai-section-inner] { 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,
@@ -1294,13 +1398,17 @@ function MediaBox({
   const url = refValue ? ctx.resolveMedia(refValue) : null;
   const isIcon = /^(lucide|simple):/.test(refValue);
   const aspectRatio = aspect && /^\d+:\d+$/.test(aspect) ? aspect.replace(":", " / ") : void 0;
-  const editAttrs = ctx.keyFor && editPath && !isIcon ? { "data-ohw-key": ctx.keyFor(editPath), "data-ohw-editable": "image" } : {};
+  const editAttrs = ctx.keyFor && editPath ? {
+    "data-ohw-key": ctx.keyFor(editPath),
+    "data-ohw-editable": isIcon ? "icon" : "image"
+  } : {};
   if (isIcon) {
     const Icon = refValue.startsWith("lucide:") ? lucideByName(refValue.slice(7)) : null;
     return /* @__PURE__ */ jsx(
       "span",
       {
         "data-ai-icon": refValue,
+        ...editAttrs,
         style: {
           display: "inline-flex",
           width: 48,
@@ -2193,7 +2301,7 @@ function CollectionBlock({ node, ctx, path }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      "data-ai-grid": "",
+      "data-ai-grid": String(itemsPerRow),
       style: {
         display: "grid",
         gridTemplateColumns: `repeat(${itemsPerRow}, 1fr)`,
@@ -2546,6 +2654,7 @@ function AiTreeRenderer({
     {
       "data-ai-section": tree.tag ?? "",
       ...bgAttrs,
+      "data-ai-responsive": "",
       style: {
         position: "relative",
         padding: `${pad}px 0`,
@@ -2556,12 +2665,13 @@ function AiTreeRenderer({
         color: settings.sectionBackground === "accent" ? blockBrand.palette.dark : void 0
       },
       children: [
-        isOverlay && backgroundUrl && /* @__PURE__ */ jsx("div", { style: { position: "absolute", inset: 0, background: `rgba(255,255,255,${overlayAlpha})` } }),
+        /* @__PURE__ */ jsx("style", { children: AI_RESPONSIVE_CSS }),
         /* @__PURE__ */ jsx("style", { children: AI_MOBILE_CSS }),
+        isOverlay && backgroundUrl && /* @__PURE__ */ jsx("div", { style: { position: "absolute", inset: 0, background: `rgba(255,255,255,${overlayAlpha})` } }),
         /* @__PURE__ */ jsx(
           "div",
           {
-            "data-ai-container": "",
+            "data-ai-section-inner": "",
             style: {
               position: "relative",
               maxWidth: AI_TREE_TOKENS.sectionMaxWidth,
@@ -2572,7 +2682,7 @@ function AiTreeRenderer({
             children: tree.rows.map((row, r2) => /* @__PURE__ */ jsx(
               "div",
               {
-                "data-ai-row": "",
+                "data-ai-columns": "",
                 style: {
                   display: "grid",
                   gridTemplateColumns: "repeat(12, 1fr)",
@@ -2622,14 +2732,52 @@ function readRootVar(name) {
   if (typeof document === "undefined") return "";
   return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
 }
+function normalizeColorToHex(value) {
+  if (!value || typeof document === "undefined") return value;
+  const canvas = document.createElement("canvas");
+  canvas.width = 1;
+  canvas.height = 1;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return value;
+  ctx.fillStyle = value;
+  ctx.fillRect(0, 0, 1, 1);
+  const [r2, g, b] = ctx.getImageData(0, 0, 1, 1).data;
+  const toHex = (n) => n.toString(16).padStart(2, "0");
+  return `#${toHex(r2)}${toHex(g)}${toHex(b)}`;
+}
+var GENERIC_FONT_KEYWORDS = /* @__PURE__ */ new Set([
+  "serif",
+  "sans-serif",
+  "monospace",
+  "cursive",
+  "fantasy",
+  "system-ui",
+  "ui-serif",
+  "ui-sans-serif",
+  "ui-monospace",
+  "ui-rounded",
+  "math",
+  "emoji",
+  "fangsong"
+]);
+function primaryFontFamily(stack) {
+  const first = stack.split(",").map((part) => part.trim().replace(/^["']|["']$/g, "")).find((part) => part && !GENERIC_FONT_KEYWORDS.has(part.toLowerCase()));
+  return first ?? "";
+}
+function humanizeFontFamily(name) {
+  return name.replace(/^__/, "").replace(/_[0-9a-f]{6}$/i, "").replace(/_/g, " ").replace(/([a-z0-9])([A-Z])/g, "$1 $2").trim().replace(/\s+/g, " ").replace(/(^|\s)([a-z])/g, (_, sep, c) => sep + c.toUpperCase());
+}
+function readFontVar(name) {
+  return humanizeFontFamily(primaryFontFamily(readRootVar(name)));
+}
 function deriveBrandOverride() {
   const dark = readRootVar("--ohw-brand-dark");
   const primary = readRootVar("--ohw-brand-primary");
   const light = readRootVar("--ohw-brand-light");
   if (!dark || !primary || !light) return null;
   const accent = readRootVar("--ohw-brand-accent");
-  const heading = readRootVar("--font-heading") || readRootVar("--font-display");
-  const body = readRootVar("--font-body");
+  const heading = readFontVar("--font-heading") || readFontVar("--font-display");
+  const body = readFontVar("--font-body");
   return {
     palette: { dark, primary, accent: accent || dark, light },
     fonts: {
@@ -2638,22 +2786,55 @@ function deriveBrandOverride() {
     }
   };
 }
-function deriveTemplateBrand() {
+function deriveTemplateBrandLive() {
   const primary = readRootVar("--brand-primary") || readRootVar("--color-primary");
   const dark = readRootVar("--brand-text") || readRootVar("--color-dark");
   const light = readRootVar("--brand-background") || readRootVar("--color-light");
   if (!dark || !primary || !light) return null;
   const accent = readRootVar("--brand-accent") || readRootVar("--color-accent");
-  const heading = readRootVar("--brand-font-heading") || readRootVar("--font-heading") || readRootVar("--font-display");
-  const body = readRootVar("--brand-font-body") || readRootVar("--font-body");
+  const heading = readFontVar("--brand-font-heading") || readFontVar("--font-heading") || readFontVar("--font-display");
+  const body = readFontVar("--brand-font-body") || readFontVar("--font-body");
   return {
-    palette: { dark, primary, accent: accent || dark, light },
+    palette: {
+      dark: normalizeColorToHex(dark),
+      primary: normalizeColorToHex(primary),
+      accent: normalizeColorToHex(accent || dark),
+      light: normalizeColorToHex(light)
+    },
     fonts: {
       heading: heading || AI_DEFAULT_BRAND.fonts.heading,
       body: body || AI_DEFAULT_BRAND.fonts.body
     }
   };
 }
+function deriveTemplateFontsLive() {
+  const heading = readFontVar("--brand-font-heading") || readFontVar("--font-heading") || readFontVar("--font-display");
+  const body = readFontVar("--brand-font-body") || readFontVar("--font-body");
+  if (!heading && !body) return null;
+  return {
+    heading: heading || AI_DEFAULT_BRAND.fonts.heading,
+    body: body || AI_DEFAULT_BRAND.fonts.body
+  };
+}
+var OVERRIDE_VAR_NAMES = [...BRAND_VAR_NAMES, ...LEGACY_BRAND_VAR_NAMES, ...FONT_VARS.heading, ...FONT_VARS.body];
+function withOverrideStripped(read) {
+  const root = document.documentElement;
+  const restore = OVERRIDE_VAR_NAMES.map((name) => [name, root.style.getPropertyValue(name)]);
+  for (const name of OVERRIDE_VAR_NAMES) root.style.removeProperty(name);
+  try {
+    return read();
+  } finally {
+    for (const [name, value] of restore) if (value) root.style.setProperty(name, value);
+  }
+}
+var TEMPLATE_BRAND_SNAPSHOT = typeof document === "undefined" ? null : withOverrideStripped(deriveTemplateBrandLive);
+var TEMPLATE_FONTS_SNAPSHOT = typeof document === "undefined" ? null : withOverrideStripped(deriveTemplateFontsLive);
+function deriveTemplateBrand() {
+  return TEMPLATE_BRAND_SNAPSHOT;
+}
+function deriveTemplateFonts() {
+  return TEMPLATE_FONTS_SNAPSHOT;
+}
 function deriveTemplateButtonStyle() {
   if (typeof document === "undefined") return null;
   const candidates = Array.from(
@@ -7151,12 +7332,12 @@ var cva = (base, config) => (props) => {
 import { Toggle as TogglePrimitive } from "radix-ui";
 import { jsx as jsx5 } from "react/jsx-runtime";
 var toggleVariants = cva(
-  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-bridge-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
         default: "bg-transparent border-0",
-        outline: "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground"
+        outline: "border border-input bg-transparent shadow-xs hover:bg-bridge-accent hover:text-accent-foreground"
       },
       size: {
         default: "px-2 py-1",
@@ -7249,10 +7430,10 @@ var DragHandle = React4.forwardRef(
         type,
         "data-slot": "drag-handle",
         className: cn(
-          "inline-flex h-7 w-4 shrink-0 items-center justify-center rounded-md transition-all duration-200 max-h-[30px]",
+          "inline-flex h-7 w-4 shrink-0 items-center justify-center rounded-md transition-all duration-200 max-h-7.5",
           "bg-white border border-transparent text-stone-500 shadow-md cursor-grab",
           "enabled:hover:border enabled:hover:border-stone-200 enabled:hover:text-stone-950",
-          "enabled:active:border enabled:active:border-primary enabled:active:bg-primary-50 enabled:active:text-stone-950 enabled:active:shadow enabled:active:cursor-grabbing",
+          "enabled:active:border enabled:active:border-bridge-primary enabled:active:bg-primary-50 enabled:active:text-stone-950 enabled:active:shadow enabled:active:cursor-grabbing",
           "disabled:cursor-not-allowed disabled:opacity-40 disabled:text-stone-950 disabled:pointer-events-none",
           className
         ),
@@ -7274,7 +7455,7 @@ var CustomToolbar = React5.forwardRef(({ className, onMouseDown, ...props }, ref
     "data-ohw-toolbar": "",
     className: cn(
       // Figma: bg background, radius 8, gap-1, p-0.5, shadow-md — no border
-      "inline-flex h-8 items-center gap-1 rounded-[var(--radius,0.5rem)] bg-background p-0.5 font-sans whitespace-nowrap shadow-md",
+      "inline-flex h-8 items-center gap-1 rounded-(--radius,0.5rem) bg-background p-0.5 font-sans whitespace-nowrap shadow-md",
       className
     ),
     onMouseDown: (e) => {
@@ -7303,7 +7484,7 @@ var CustomToolbarButton = React5.forwardRef(
       type,
       className: cn(
         "inline-flex size-7 shrink-0 items-center justify-center rounded-[calc(var(--radius,0.5rem)-2px)] text-foreground transition-colors",
-        active ? "bg-primary text-primary-foreground" : "bg-transparent hover:bg-muted disabled:cursor-not-allowed disabled:text-muted-foreground disabled:opacity-60",
+        active ? "bg-bridge-primary text-primary-foreground" : "bg-transparent hover:bg-muted disabled:cursor-not-allowed disabled:text-muted-foreground disabled:opacity-60",
         className
       ),
       ...props
@@ -8567,13 +8748,13 @@ function FormFieldToolbar({
               ]
             }
           ) }),
-          /* @__PURE__ */ jsx13(DropdownMenuContent, { align: "start", sideOffset: 8, className: "min-w-[190px] p-1", children: FIELD_TYPES.map((entry) => {
+          /* @__PURE__ */ jsx13(DropdownMenuContent, { align: "start", sideOffset: 8, className: "min-w-47.5 p-1", children: FIELD_TYPES.map((entry) => {
             const Icon = TYPE_ICONS[entry.type];
             return /* @__PURE__ */ jsxs6(
               DropdownMenuItem,
               {
                 onSelect: () => onTypeChange(entry.type),
-                className: "rounded-md py-2 text-[13px] " + (entry.type === type ? "bg-primary/10" : ""),
+                className: "rounded-md py-2 text-[13px] " + (entry.type === type ? "bg-bridge-primary/10" : ""),
                 children: [
                   /* @__PURE__ */ jsx13(Icon, { size: 14, strokeWidth: 1.75, className: "shrink-0", "aria-hidden": true }),
                   entry.label
@@ -8590,7 +8771,7 @@ function FormFieldToolbar({
             type: "button",
             "aria-pressed": required,
             onClick: onRequiredToggle,
-            className: "flex h-7 items-center gap-1.5 whitespace-nowrap rounded-md px-2 text-[13px] font-medium transition-colors " + (required ? "bg-primary/10 text-primary" : "text-foreground hover:bg-muted/70"),
+            className: "flex h-7 items-center gap-1.5 whitespace-nowrap rounded-md px-2 text-[13px] font-medium transition-colors " + (required ? "bg-bridge-primary/10 text-bridge-primary" : "text-foreground hover:bg-muted/70"),
             "data-ohw-field-required-toggle": "",
             children: [
               /* @__PURE__ */ jsx13(Asterisk, { size: 14, strokeWidth: 2, "aria-hidden": true }),
@@ -8610,7 +8791,7 @@ function FormFieldToolbar({
               children: /* @__PURE__ */ jsx13(MoreHorizontal2, { size: 15, "aria-hidden": true })
             }
           ) }),
-          /* @__PURE__ */ jsxs6(DropdownMenuContent, { align: "start", sideOffset: 8, className: "min-w-[170px] p-1", children: [
+          /* @__PURE__ */ jsxs6(DropdownMenuContent, { align: "start", sideOffset: 8, className: "min-w-42.5 p-1", children: [
             /* @__PURE__ */ jsxs6(DropdownMenuItem, { onSelect: onDuplicate, className: "rounded-md py-2 text-[13px]", children: [
               /* @__PURE__ */ jsx13(Copy2, { size: 14, strokeWidth: 1.75, className: "shrink-0", "aria-hidden": true }),
               "Duplicate"
@@ -8638,7 +8819,7 @@ function FieldTypePicker({ onPick }) {
           {
             type: "button",
             onClick: () => onPick(entry.type),
-            className: "flex h-[76px] flex-col items-center justify-center gap-2 rounded-xl border border-border text-[15px] font-medium text-foreground transition-colors hover:border-primary hover:bg-primary/5",
+            className: "flex h-[76px] flex-col items-center justify-center gap-2 rounded-xl border border-border text-[15px] font-medium text-foreground transition-colors hover:border-bridge-primary hover:bg-bridge-primary/5",
             children: [
               /* @__PURE__ */ jsx13(Icon, { size: 26, strokeWidth: 1.5, "aria-hidden": true }),
               entry.label
@@ -8664,7 +8845,7 @@ var buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:opacity-90",
+        default: "bg-bridge-primary text-primary-foreground hover:opacity-90",
         outline: "border border-border bg-background text-foreground shadow-sm hover:bg-muted/80",
         ghost: "min-w-0 px-3 py-2 text-foreground hover:bg-muted/50"
       },
@@ -8759,6 +8940,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",
@@ -8864,8 +9046,8 @@ function MediaOverlay({
           pointerEvents: hover.hasTextOverlap ? "none" : "auto",
           // 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-primary)" : "inset 0 0 0 1.5px var(--color-primary)",
-          background: selected ? "transparent" : "color-mix(in srgb, var(--color-primary) 20%, transparent)"
+          boxShadow: selected ? "inset 0 0 0 2px var(--color-bridge-primary)" : "inset 0 0 0 1.5px var(--color-bridge-primary)",
+          background: selected ? "transparent" : "color-mix(in srgb, var(--color-bridge-primary) 20%, transparent)"
         },
         onClick: () => onSelect && !selected ? onSelect(hover.key) : onReplace(hover.key),
         children: [
@@ -8888,17 +9070,17 @@ function MediaOverlay({
               },
               children: [
                 isVideo ? /* @__PURE__ */ jsx15(Film, { size: 14 }) : /* @__PURE__ */ jsx15(ImageIcon, { size: 14 }),
-                isVideo ? "Replace video" : "Replace image"
+                replaceLabel
               ]
             }
           ),
-          replaceMode === "none" ? null : /* @__PURE__ */ jsxs7(
+          showChrome && replaceMode !== "none" && /* @__PURE__ */ jsxs7(
             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,
@@ -8921,7 +9103,7 @@ function MediaOverlay({
               },
               children: [
                 isVideo ? /* @__PURE__ */ jsx15(Film, { size: 14 }) : /* @__PURE__ */ jsx15(ImageIcon, { size: 14 }),
-                replaceMode === "full" ? isVideo ? "Replace video" : hover.elementType === "bg-image" ? "Replace background" : "Replace image" : null
+                replaceMode === "full" ? replaceLabel : null
               ]
             }
           )
@@ -8959,8 +9141,8 @@ function CarouselOverlay({
         height: rect.height,
         zIndex: 2147483646,
         pointerEvents: "auto",
-        boxShadow: "inset 0 0 0 1.5px var(--color-primary)",
-        background: "color-mix(in srgb, var(--color-primary) 20%, transparent)"
+        boxShadow: "inset 0 0 0 1.5px var(--color-bridge-primary)",
+        background: "color-mix(in srgb, var(--color-bridge-primary) 20%, transparent)"
       },
       onClick: () => onEdit(hover.key),
       children: /* @__PURE__ */ jsxs8(
@@ -9028,6 +9210,57 @@ function useLiveSectionRect(sectionId) {
   }, [sectionId]);
   return rect;
 }
+var NAV_TOGGLE_LABEL_RE = /^(toggle menu|open menu|close menu)$/i;
+function readNavToggleRect() {
+  const el = Array.from(document.querySelectorAll("button[aria-label]")).find(
+    (e) => NAV_TOGGLE_LABEL_RE.test(e.getAttribute("aria-label") ?? "")
+  );
+  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 useLiveNavToggleHole(active) {
+  const [rect, setRect] = useState6(null);
+  useEffect4(() => {
+    if (!active) {
+      setRect(null);
+      return;
+    }
+    const update = () => {
+      const next = readNavToggleRect();
+      setRect(
+        (prev) => prev && next && prev.top === next.top && prev.left === next.left && prev.width === next.width && prev.height === next.height ? prev : next
+      );
+    };
+    update();
+    const opts = { capture: true, passive: true };
+    window.addEventListener("scroll", update, opts);
+    window.addEventListener("resize", update);
+    const interval = setInterval(update, 500);
+    return () => {
+      window.removeEventListener("scroll", update, opts);
+      window.removeEventListener("resize", update);
+      clearInterval(interval);
+    };
+  }, [active]);
+  return rect;
+}
+function subtractRect(outer, hole) {
+  if (!hole) return [outer];
+  const l = Math.max(outer.left, hole.left);
+  const t = Math.max(outer.top, hole.top);
+  const r2 = Math.min(outer.left + outer.width, hole.left + hole.width);
+  const b = Math.min(outer.top + outer.height, hole.top + hole.height);
+  if (l >= r2 || t >= b) return [outer];
+  const rects = [];
+  if (t > outer.top) rects.push({ left: outer.left, top: outer.top, width: outer.width, height: t - outer.top });
+  const midHeight = b - t;
+  if (l > outer.left) rects.push({ left: outer.left, top: t, width: l - outer.left, height: midHeight });
+  if (r2 < outer.left + outer.width) rects.push({ left: r2, top: t, width: outer.left + outer.width - r2, height: midHeight });
+  if (b < outer.top + outer.height) rects.push({ left: outer.left, top: b, width: outer.width, height: outer.top + outer.height - b });
+  return rects;
+}
 function computeSectionBoundaryFlags(instanceId) {
   const topLevel = topLevelSections();
   const index = topLevel.findIndex((el) => instanceIdOf(el) === instanceId);
@@ -9243,6 +9476,7 @@ function AiSectionOverlay({
   const activeSelectionId = reviewId ? null : selectedId;
   const selectionRect = useLiveSectionRect(activeSelectionId);
   const reviewRect = useLiveSectionRect(reviewId);
+  const navToggleHole = useLiveNavToggleHole(Boolean(reviewId));
   const hoverRect = useLiveSectionRect(reviewId || hoveredId === selectedId ? null : hoveredId);
   const showSelectionBorder = Boolean(selectionRect) && !navDropdownForceOpen;
   useEffect4(() => {
@@ -9302,48 +9536,65 @@ function AiSectionOverlay({
         }
       }
     ),
-    reviewRect && /* @__PURE__ */ jsx17(
-      "div",
-      {
-        "data-ohw-ai-review": "",
-        style: {
-          position: "fixed",
-          top: reviewRect.top,
-          left: reviewRect.left,
-          width: reviewRect.width,
-          height: reviewRect.height,
-          border: `2px solid ${PRIMARY2}`,
-          borderRadius: edgeAwareRadius(reviewRect),
-          zIndex: 2147483200,
-          // The veil itself: swallows clicks so the section stays locked until decided. This
-          // stopPropagation only guards the bubble phase; the bridge's capture-phase click
-          // handlers additionally bail on `[data-ohw-ai-review]`, without which a click on
-          // Accept/Discard resolves to the media beneath and opens the file picker.
-          background: "rgba(8, 133, 254, 0.04)",
-          pointerEvents: "auto",
-          cursor: "default"
+    reviewRect && /* @__PURE__ */ jsxs9(Fragment5, { children: [
+      subtractRect(reviewRect, navToggleHole).map((r2, i) => /* @__PURE__ */ jsx17(
+        "div",
+        {
+          "data-ohw-ai-review": "",
+          "aria-hidden": true,
+          style: {
+            position: "fixed",
+            top: r2.top,
+            left: r2.left,
+            width: r2.width,
+            height: r2.height,
+            background: "rgba(8, 133, 254, 0.04)",
+            pointerEvents: "auto",
+            cursor: "default",
+            zIndex: 2147483200
+          },
+          onClick: (e) => e.stopPropagation()
         },
-        onClick: (e) => e.stopPropagation(),
-        children: !reviewButtonsHidden && /* @__PURE__ */ jsxs9(
-          "div",
-          {
-            style: {
-              position: "sticky",
-              top: 12,
-              display: "flex",
-              gap: 8,
-              justifyContent: "flex-end",
-              paddingRight: 12,
-              paddingTop: 12
-            },
-            children: [
-              /* @__PURE__ */ jsx17(ReviewButton, { label: "Accept", onClick: () => decide("accept"), background: PRIMARY2, color: "#ffffff", children: /* @__PURE__ */ jsx17(Check, { size: 16, strokeWidth: 2.5, "aria-hidden": true }) }),
-              /* @__PURE__ */ jsx17(ReviewButton, { label: "Discard", onClick: () => decide("discard"), background: "#EFF6FF", color: "#0c0a09", children: /* @__PURE__ */ jsx17(X, { size: 16, strokeWidth: 2, "aria-hidden": true }) })
-            ]
+        i
+      )),
+      /* @__PURE__ */ jsx17(
+        "div",
+        {
+          "aria-hidden": true,
+          style: {
+            position: "fixed",
+            top: reviewRect.top,
+            left: reviewRect.left,
+            width: reviewRect.width,
+            height: reviewRect.height,
+            border: `2px solid ${PRIMARY2}`,
+            borderRadius: edgeAwareRadius(reviewRect),
+            pointerEvents: "none",
+            zIndex: 2147483200
           }
-        )
-      }
-    )
+        }
+      ),
+      !reviewButtonsHidden && /* @__PURE__ */ jsxs9(
+        "div",
+        {
+          style: {
+            position: "fixed",
+            top: reviewRect.top + 12,
+            left: reviewRect.left,
+            width: reviewRect.width,
+            display: "flex",
+            gap: 8,
+            justifyContent: "flex-end",
+            paddingRight: 12,
+            zIndex: 2147483201
+          },
+          children: [
+            /* @__PURE__ */ jsx17(ReviewButton, { label: "Accept", onClick: () => decide("accept"), background: PRIMARY2, color: "#ffffff", children: /* @__PURE__ */ jsx17(Check, { size: 16, strokeWidth: 2.5, "aria-hidden": true }) }),
+            /* @__PURE__ */ jsx17(ReviewButton, { label: "Discard", onClick: () => decide("discard"), background: "#EFF6FF", color: "#0c0a09", children: /* @__PURE__ */ jsx17(X, { size: 16, strokeWidth: 2, "aria-hidden": true }) })
+          ]
+        }
+      )
+    ] })
   ] });
 }
@@ -9813,7 +10064,7 @@ function SectionTreeItem({
     /* @__PURE__ */ jsx20(
       "div",
       {
-        className: "mr-[-1px] h-9 w-2 shrink-0 rounded-bl-sm border-b border-l border-border mb-4",
+        className: "-mr-px h-9 w-2 shrink-0 rounded-bl-sm border-b border-l border-border mb-4",
         "aria-hidden": true
       }
     ),
@@ -9832,7 +10083,7 @@ function SectionTreeItem({
         className: cn(
           "flex h-9 min-w-0 flex-1 items-center gap-2 rounded-md border border-border bg-background p-3",
           interactive && "cursor-pointer hover:bg-muted/30",
-          interactive && selected && "border-primary"
+          interactive && selected && "border-bridge-primary"
         ),
         children: [
           /* @__PURE__ */ jsx20(
@@ -9962,7 +10213,7 @@ function UrlOrPageInput({
   };
   const fieldClassName = cn(
     "data-ohw-link-field flex h-[36px] w-full items-center overflow-hidden rounded-md border bg-background pl-3 pr-3 py-2 outline-none transition-[border-color,box-shadow]",
-    urlError ? "border-destructive shadow-[0_0_0_1px_var(--ohw-destructive)]" : isFocused ? "border-primary shadow-[0_0_0_1px_var(--ohw-primary)]" : "border-input"
+    urlError ? "border-destructive shadow-[0_0_0_1px_var(--ohw-destructive)]" : isFocused ? "border-bridge-primary shadow-[0_0_0_1px_var(--ohw-primary)]" : "border-input"
   );
   return /* @__PURE__ */ jsxs13("div", { className: "flex w-full flex-col gap-2 p-0", children: [
     /* @__PURE__ */ jsx23(Label, { htmlFor: inputId, className: cn(urlError && "text-destructive"), children: "Destination" }),
@@ -11006,6 +11257,15 @@ function getNavbarDesktopContainer() {
 function getNavbarDrawerContainer() {
   return document.querySelector("[data-ohw-nav-drawer]");
 }
+function isNavDrawerOpen() {
+  return document.querySelector('[data-ohw-nav-drawer][data-ohw-section="navbar"]') !== null;
+}
+function isPointOutsideOpenDrawer(clientX, clientY) {
+  const drawer = document.querySelector('[data-ohw-nav-drawer][data-ohw-section="navbar"]');
+  if (!drawer) return false;
+  const r2 = drawer.getBoundingClientRect();
+  return clientX < r2.left || clientX > r2.right || clientY < r2.top || clientY > r2.bottom;
+}
 function isNavbarListContainerVisible(el) {
   if (el.hasAttribute("hidden")) return false;
   if (el.closest("[hidden]")) return false;
@@ -13869,6 +14129,7 @@ function readLogoSizeState(content, placement) {
 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");
@@ -14162,7 +14423,7 @@ function DisplaySwitch({
         onClick: () => onChange(!checked),
         className: cn(
           "relative h-5 w-9 shrink-0 rounded-full transition-colors",
-          checked ? "bg-primary" : "bg-primary-50",
+          checked ? "bg-bridge-primary" : "bg-primary-50",
           disabled ? "cursor-default opacity-50" : "cursor-pointer"
         ),
         children: /* @__PURE__ */ jsx28(
@@ -14170,7 +14431,7 @@ function DisplaySwitch({
           {
             className: cn(
               "absolute top-0.5 h-4 w-4 rounded-full bg-white transition-all",
-              checked ? "left-[1.125rem]" : "left-0.5"
+              checked ? "left-4.5" : "left-0.5"
             )
           }
         )
@@ -15805,7 +16066,7 @@ var badgeVariants = cva(
   {
     variants: {
       variant: {
-        default: "border-transparent bg-primary text-primary-foreground",
+        default: "border-transparent bg-bridge-primary text-primary-foreground",
         secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
         destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
         outline: "text-foreground"
@@ -15987,21 +16248,10 @@ function parseSchedulingInsertAfter(insertAfter) {
     insertBefore: insertAfter.slice(idx + INSERT_BEFORE_MARKER.length)
   };
 }
-function resolveSchedulingInsert(insertAfter, explicitInsertBefore) {
-  const parsed = parseSchedulingInsertAfter(insertAfter);
-  const insertBefore = explicitInsertBefore ?? parsed.insertBefore;
-  const effectiveInsertAfter = insertBefore && parsed.insertBefore === null ? `${insertAfter}${INSERT_BEFORE_MARKER}${insertBefore}` : insertAfter;
-  return { effectiveInsertAfter, insertBefore };
-}
-function getSchedulingMountPoint(insertAfter) {
-  const { anchor } = parseSchedulingInsertAfter(insertAfter);
-  let anchorEl = document.querySelector(`[data-ohw-section="${anchor}"]`);
-  if (!anchorEl && anchor === "scheduling") {
-    const widgets = Array.from(document.querySelectorAll('[data-ohw-section^="scheduling-"]'));
-    anchorEl = widgets.at(-1) ?? null;
-  }
-  if (!anchorEl) return null;
-  return anchorEl.closest('[data-ohw-section-container="scheduling"]') ?? anchorEl;
+function resolveEntryAnchor(entry) {
+  if (entry.anchorId !== void 0) return { anchorId: entry.anchorId, beforeId: entry.beforeId ?? null };
+  const parsed = parseSchedulingInsertAfter(entry.insertAfter);
+  return { anchorId: parsed.anchor, beforeId: parsed.insertBefore };
 }
 function schedulingMountDepth(insertAfter) {
   if (!insertAfter.includes(INSERT_BEFORE_MARKER)) return 0;
@@ -16018,8 +16268,7 @@ function getPageSchedulingEntries(raw) {
   }
 }
 function isSchedulingWidgetMissing(entry) {
-  const { effectiveInsertAfter } = resolveSchedulingInsert(entry.insertAfter);
-  return !document.querySelector(`[data-ohw-section="${schedulingSectionId(effectiveInsertAfter)}"]`);
+  return !document.querySelector(`[data-ohw-section="${schedulingSectionId(entry.insertAfter)}"]`);
 }
 function hasMissingSchedulingWidgets(entries) {
   return entries.some(isSchedulingWidgetMissing);
@@ -16057,17 +16306,18 @@ function initSectionsFromContent(content, removeExisting = false, currentPath =
   } catch {
   }
 }
-function mountSchedulingWidget(insertAfter, notifyOnConnect = false, scheduleId, explicitInsertBefore) {
-  const { effectiveInsertAfter, insertBefore } = resolveSchedulingInsert(insertAfter, explicitInsertBefore);
-  const sectionId = schedulingSectionId(effectiveInsertAfter);
+function mountSchedulingWidget(anchorId, notifyOnConnect = false, scheduleId, beforeId, existingWidgetId) {
+  const widgetId = existingWidgetId ?? (beforeId ? `${anchorId}${INSERT_BEFORE_MARKER}${beforeId}` : anchorId);
+  const sectionId = schedulingSectionId(widgetId);
   if (document.querySelector(`[data-ohw-section="${sectionId}"]`)) return false;
-  const mountPoint = getSchedulingMountPoint(effectiveInsertAfter);
-  if (!mountPoint) return false;
+  const anchorEl = document.querySelector(`[data-ohw-section="${anchorId}"]`);
+  if (!anchorEl) return false;
+  const mountPoint = anchorEl.closest('[data-ohw-section-container="scheduling"]') ?? anchorEl;
   const container = document.createElement("div");
   container.dataset.ohwSectionContainer = "scheduling";
   container.dataset.ohwInstance = sectionId;
-  if (insertBefore) {
-    const beforeAnchor = document.querySelector(`[data-ohw-section="${insertBefore}"]`);
+  if (beforeId) {
+    const beforeAnchor = document.querySelector(`[data-ohw-section="${beforeId}"]`);
     const beforePoint = beforeAnchor?.closest('[data-ohw-section-container="scheduling"]') ?? beforeAnchor;
     if (!beforePoint) return false;
     beforePoint.insertAdjacentElement("beforebegin", container);
@@ -16078,20 +16328,26 @@ function mountSchedulingWidget(insertAfter, notifyOnConnect = false, scheduleId,
     }
     tail.insertAdjacentElement("afterend", container);
   }
-  const root = createRoot2(container);
-  schedulingRoots.set(container, root);
-  flushSync2(() => {
-    root.render(
-      /* @__PURE__ */ jsx33(
-        SchedulingWidget,
-        {
-          notifyOnConnect,
-          initialScheduleId: scheduleId,
-          insertAfter: effectiveInsertAfter
-        }
-      )
-    );
-  });
+  try {
+    const root = createRoot2(container);
+    schedulingRoots.set(container, root);
+    flushSync2(() => {
+      root.render(
+        /* @__PURE__ */ jsx33(
+          SchedulingWidget,
+          {
+            notifyOnConnect,
+            initialScheduleId: scheduleId,
+            insertAfter: widgetId
+          }
+        )
+      );
+    });
+  } catch (err) {
+    console.error("[ow:scheduling] render threw", err);
+    container.remove();
+    return false;
+  }
   const tracker = getSectionsTracker();
   let sections = [];
   try {
@@ -16099,10 +16355,12 @@ function mountSchedulingWidget(insertAfter, notifyOnConnect = false, scheduleId,
   } catch {
   }
   const inEditor = typeof window !== "undefined" && window.self !== window.top;
-  if (inEditor && !sections.find((s) => s.type === "scheduling" && s.insertAfter === effectiveInsertAfter)) {
+  if (inEditor && !sections.find((s) => s.type === "scheduling" && s.insertAfter === widgetId)) {
     sections.push({
       type: "scheduling",
-      insertAfter: effectiveInsertAfter,
+      insertAfter: widgetId,
+      anchorId,
+      beforeId: beforeId ?? null,
       pagePath: window.location.pathname,
       ...scheduleId ? { scheduleId } : {}
     });
@@ -16116,7 +16374,8 @@ function mountSchedulingEntries(entries, notifyOnConnect = false) {
     for (let i = pending.length - 1; i >= 0; i--) {
       const entry = pending[i];
       const shouldNotify = typeof notifyOnConnect === "function" ? notifyOnConnect(entry) : notifyOnConnect;
-      if (mountSchedulingWidget(entry.insertAfter, shouldNotify, entry.scheduleId ?? null)) {
+      const { anchorId, beforeId } = resolveEntryAnchor(entry);
+      if (mountSchedulingWidget(anchorId, shouldNotify, entry.scheduleId ?? null, beforeId, entry.insertAfter)) {
         pending.splice(i, 1);
       }
     }
@@ -16280,6 +16539,11 @@ function applyLinkByKey(key, val) {
     hrefAnchors.forEach((el) => applyLinkHref(el, val));
   }
 }
+function isInsideLinkEditor(target) {
+  return Boolean(
+    target.closest("[data-ohw-link-popover-root]") || target.closest("[data-ohw-link-modal-root]") || target.closest("[data-ohw-link-page-dropdown]") || target.closest("[data-ohw-section-picker]") || target.closest("[data-ohw-navbar-container-chrome]") || target.closest("[data-ohw-navbar-add-button]") || target.closest("[data-ohw-footer-container-chrome]") || target.closest("[data-ohw-footer-add-button]") || target.closest("[data-ohw-more-menu]") || target.closest('[data-slot="dropdown-menu-content"]') || target.closest('[data-slot="popover-content"]') || target.closest('[data-slot="dialog-content"]') || target.closest('[data-slot="dialog-overlay"]')
+  );
+}
 function isInsideFloatingPanel(target) {
   return Boolean(target.closest("[data-ohw-floating-panel]"));
 }
@@ -16287,11 +16551,6 @@ function isPointOverFloatingPanel(clientX, clientY) {
   const el = document.elementFromPoint(clientX, clientY);
   return Boolean(el instanceof Element && el.closest("[data-ohw-floating-panel]"));
 }
-function isInsideLinkEditor(target) {
-  return Boolean(
-    target.closest("[data-ohw-link-popover-root]") || target.closest("[data-ohw-link-modal-root]") || target.closest("[data-ohw-link-page-dropdown]") || target.closest("[data-ohw-section-picker]") || target.closest("[data-ohw-navbar-container-chrome]") || target.closest("[data-ohw-navbar-add-button]") || target.closest("[data-ohw-footer-container-chrome]") || target.closest("[data-ohw-footer-add-button]") || target.closest("[data-ohw-more-menu]") || target.closest('[data-slot="dropdown-menu-content"]') || target.closest('[data-slot="popover-content"]') || target.closest('[data-slot="dialog-content"]') || target.closest('[data-slot="dialog-overlay"]')
-  );
-}
 function getHrefKeyFromElement(el) {
   if (!el) return null;
   const anchor = el.closest("[data-ohw-href-key]");
@@ -16451,6 +16710,7 @@ function isFooterAddItemDisabled(selected) {
 }
 function resolveFooterColumnSelectionTarget(target, clientX, clientY) {
   if (getNavigationItemAnchor(target)) return null;
+  if (target.closest("[data-ohw-editable]")) return null;
   const column = getFooterColumn(target);
   if (!column) return null;
   if (isPointOverNavItem(column, clientX, clientY)) return null;
@@ -16560,7 +16820,7 @@ function getNavigationSelectionParent(el) {
   if (!isFooterLinksContainer(el) && (el.hasAttribute("data-ohw-footer-col") || el.hasAttribute("data-ohw-footer-column") || isInferredFooterGroup2(el))) {
     return getFooterLinksContainer();
   }
-  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;
@@ -16592,6 +16852,12 @@ function collectNavigationItemSiblingHintRects(selected) {
       return [];
     }).filter((el) => isNavigationItem2(el) && el !== selected).map((el) => el.getBoundingClientRect());
   }
+  if (selected.closest('footer, [data-ohw-section="footer"]')) {
+    const group = findFooterItemGroup2(selected);
+    if (group) {
+      return Array.from(group.querySelectorAll("[data-ohw-href-key]")).filter((el) => isNavigationItem2(el) && el !== selected).map((el) => el.getBoundingClientRect());
+    }
+  }
   return listNavigationItems().filter((el) => el !== selected && !el.closest("[data-ohw-nav-children]")).map((el) => el.getBoundingClientRect());
 }
 function placeCaretAtPoint(el, x, y) {
@@ -16776,7 +17042,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;
@@ -17160,6 +17425,7 @@ function StateToggle({
   );
 }
 var contentCache = /* @__PURE__ */ new Map();
+var fetchedContentPaths = /* @__PURE__ */ new Set();
 var brandingCache = /* @__PURE__ */ new Map();
 var OHW_LOADER_STYLE = {
   position: "fixed",
@@ -17281,19 +17547,37 @@ function MadeWithOhhWells() {
     }
   );
 }
-var OHW_LOADER_PREHYDRATE_SCRIPT = `(function(){try{var p=location.hostname.split(".");var fromHost=p.length>=3&&p[0]!=="www"?p[0]:"";var fromQuery=new URLSearchParams(location.search).get("subdomain")||"";if(!fromHost&&!fromQuery)return;var e=document.getElementById("ohw-loader");if(e)e.style.display="flex"}catch(e){}})();`;
+var OHW_LOADER_PREHYDRATE_SCRIPT = `(function(){try{var fromGlobal=typeof window!=="undefined"&&window.__OHW_SUBDOMAIN__?String(window.__OHW_SUBDOMAIN__):"";var p=location.hostname.split(".");var fromHost=location.hostname.endsWith(".ohhwells.site")&&p[0]&&p[0]!=="www"?p[0]:"";var fromQuery=new URLSearchParams(location.search).get("subdomain")||"";var fromCookie=(document.cookie.match(/(?:^|; )ohw-subdomain=([^;]*)/)||[])[1];fromCookie=fromCookie?decodeURIComponent(fromCookie):"";if(!fromGlobal&&!fromHost&&!fromQuery&&!fromCookie)return;var e=document.getElementById("ohw-loader");if(e)e.style.display="flex"}catch(e){}})();`;
+function subdomainFromCookie() {
+  if (typeof document === "undefined") return "";
+  const match = document.cookie.match(/(?:^|; )ohw-subdomain=([^;]*)/);
+  return match ? decodeURIComponent(match[1]) : "";
+}
 function resolveSubdomain(subdomainFromQuery) {
+  if (typeof window !== "undefined") {
+    const fromGlobal = window.__OHW_SUBDOMAIN__;
+    if (fromGlobal) return fromGlobal;
+  }
   if (subdomainFromQuery) return subdomainFromQuery;
   if (typeof window !== "undefined") {
-    const parts = window.location.hostname.split(".");
-    if (parts.length >= 3 && parts[0] !== "www") return parts[0];
+    const host = window.location.hostname.toLowerCase();
+    if (host.endsWith(".ohhwells.site")) {
+      const label = host.slice(0, -".ohhwells.site".length).split(".").pop();
+      if (label && label !== "www") return label;
+    }
+    const fromCookie = subdomainFromCookie();
+    if (fromCookie) return fromCookie;
+    const isPlatformHost = host.endsWith(".ohhwells.site") || host === "localhost" || host.endsWith(".localhost") || host.endsWith(".vercel.app");
+    if (!isPlatformHost) return "";
   }
   const siteUrl = process.env.NEXT_PUBLIC_SITE_URL;
   if (siteUrl) {
     try {
       const host = new URL(siteUrl).hostname;
-      const siteParts = host.split(".");
-      if (siteParts.length >= 3 && siteParts[0] !== "www") return siteParts[0];
+      if (host.endsWith(".ohhwells.site")) {
+        const label = host.slice(0, -".ohhwells.site".length).split(".").pop();
+        if (label && label !== "www") return label;
+      }
     } catch {
     }
   }
@@ -17331,7 +17615,26 @@ function OhhwellsBridge() {
     };
   }, []);
   const subdomainFromQuery = searchParams.get("subdomain");
-  const subdomain = resolveSubdomain(subdomainFromQuery);
+  const [subdomain, setSubdomain] = useState14(() => resolveSubdomain(subdomainFromQuery));
+  useLayoutEffect5(() => {
+    const next = resolveSubdomain(subdomainFromQuery);
+    if (next !== subdomain) setSubdomain(next);
+    if (next) return;
+    const host = window.location.hostname.toLowerCase();
+    if (host.endsWith(".ohhwells.site")) return;
+    const t = window.setTimeout(() => {
+      const retry = resolveSubdomain(subdomainFromQuery);
+      if (retry) setSubdomain(retry);
+    }, 0);
+    return () => window.clearTimeout(t);
+  }, [subdomainFromQuery, subdomain]);
+  useEffect13(() => {
+    if (!subdomainFromQuery || typeof window === "undefined") return;
+    const url = new URL(window.location.href);
+    if (!url.searchParams.has("subdomain")) return;
+    url.searchParams.delete("subdomain");
+    window.history.replaceState(null, "", url.pathname + url.search + url.hash);
+  }, [subdomainFromQuery]);
   useLinkHrefGuardian(pathname, subdomain, isEditMode);
   useSavedLinkNavigation(isEditMode);
   const postToParent2 = useCallback8((data) => {
@@ -17708,13 +18011,6 @@ function OhhwellsBridge() {
   const [isItemDragging, setIsItemDragging] = useState14(false);
   const [isFooterFrameSelection, setIsFooterFrameSelection] = useState14(false);
   isFooterFrameSelectionRef.current = isFooterFrameSelection;
-  const [floatingPanel, setFloatingPanel] = useState14(null);
-  const floatingPanelOpenRef = useRef10(false);
-  floatingPanelOpenRef.current = floatingPanel !== null;
-  const [floatingPanelPos, setFloatingPanelPos] = useState14(null);
-  const [logoSizeDraft, setLogoSizeDraft] = useState14(null);
-  const [editorViewport, setEditorViewport] = useState14("desktop");
-  const [parentScrollSnap, setParentScrollSnap] = useState14(null);
   const [navDropdownPreviewOpen, setNavDropdownPreviewOpen] = useState14(null);
   const [footerHeadingVisible, setFooterHeadingVisible] = useState14(null);
   const footerDragRef = useRef10(null);
@@ -17731,7 +18027,15 @@ function OhhwellsBridge() {
   const aiSectionsRef = useRef10("");
   const brandKitRef = useRef10("");
   const stylesRef = useRef10("");
+  const appliedDrawerRef = useRef10(null);
   const pendingDeleteUndoRef = useRef10(null);
+  const [floatingPanel, setFloatingPanel] = useState14(null);
+  const floatingPanelOpenRef = useRef10(false);
+  const setFloatingPanelRef = useRef10(setFloatingPanel);
+  const [floatingPanelPos, setFloatingPanelPos] = useState14(null);
+  const [logoSizeDraft, setLogoSizeDraft] = useState14(null);
+  const [editorViewport, setEditorViewport] = useState14("desktop");
+  const [parentScrollSnap, setParentScrollSnap] = useState14(null);
   const [sitePages, setSitePages] = useState14([]);
   const [sectionsByPath, setSectionsByPath] = useState14({});
   const sectionsPrefetchGenRef = useRef10(0);
@@ -17740,7 +18044,18 @@ function OhhwellsBridge() {
   const linkPopoverOpenRef = useRef10(false);
   const linkPopoverGraceUntilRef = useRef10(0);
   setLinkPopoverRef.current = setLinkPopover;
+  setFloatingPanelRef.current = setFloatingPanel;
   linkPopoverSessionRef.current = linkPopover;
+  floatingPanelOpenRef.current = Boolean(floatingPanel);
+  useEffect13(() => {
+    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);
+  }, []);
   const {
     navDragRef,
     navPointerDragRef,
@@ -19076,6 +19391,7 @@ function OhhwellsBridge() {
       }
       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);
@@ -19083,11 +19399,11 @@ function OhhwellsBridge() {
       for (const [key, val] of Object.entries(content)) {
         if (key === "__ohw_sections") continue;
         if (key === AI_SECTIONS_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 (applyVideoSettingNode(key, val)) continue;
         if (applyCarouselNode(key, val)) continue;
         document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
@@ -19158,7 +19474,9 @@ function OhhwellsBridge() {
     let cancelled = false;
     setFetchState("loading");
     const apiUrl = process.env.NEXT_PUBLIC_FLOWOPS_API_URL ?? "https://flowops-backend-staging-2yfdh7pwpq-as.a.run.app";
-    fetch(`${apiUrl}/api/public/sites/${subdomain}/content`, { cache: "no-store" }).then((r2) => r2.ok ? r2.json() : null).then((data) => {
+    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) => {
       if (cancelled) return;
       const content = data?.content ?? {};
       const branding = Boolean(data?.showBranding);
@@ -19267,7 +19585,9 @@ function OhhwellsBridge() {
   }, [isEditMode]);
   useEffect13(() => {
     if (isEditMode || fetchState !== "done") return;
+    console.log("env", process.env.NEXT_PUBLIC_FLOWOPS_API_URL);
     const apiUrl = process.env.NEXT_PUBLIC_FLOWOPS_API_URL ?? "https://flowops-backend-staging-2yfdh7pwpq-as.a.run.app";
+    console.log({ apiUrl, subdomain });
     bindPublishedForms(apiUrl, subdomain, contentCache.get(subdomain) ?? {});
   }, [isEditMode, fetchState, subdomain]);
   useEffect13(() => {
@@ -19292,16 +19612,17 @@ function OhhwellsBridge() {
           applyAiSectionsToDom(parseAiSectionsState(content[AI_SECTIONS_KEY]));
         }
         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 === 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 (applyVideoSettingNode(key, val)) continue;
           if (applyCarouselNode(key, val)) continue;
           document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
@@ -19352,6 +19673,17 @@ function OhhwellsBridge() {
       debounceTimer = setTimeout(applyFromCache, 150);
     };
     applyFromCache();
+    const pathCacheKey = `${subdomain}::${pathname}`;
+    if (!fetchedContentPaths.has(pathCacheKey)) {
+      fetchedContentPaths.add(pathCacheKey);
+      const apiUrl = process.env.NEXT_PUBLIC_FLOWOPS_API_URL ?? "https://flowops-backend-staging-2yfdh7pwpq-as.a.run.app";
+      fetch(`${apiUrl}/api/public/sites/${subdomain}/content?path=${encodeURIComponent(pathname)}`, { cache: "no-store" }).then((r2) => r2.ok ? r2.json() : null).then((data) => {
+        if (!data?.content) return;
+        contentCache.set(subdomain, data.content);
+        applyFromCache();
+      }).catch(() => {
+      });
+    }
     observer = new MutationObserver(scheduleApply);
     observer.observe(document.body, { childList: true, subtree: true });
     return () => {
@@ -19396,6 +19728,17 @@ function OhhwellsBridge() {
     if (!isEditMode) return;
     initSectionInstancesFromContent(editContentRef.current, pathname);
   }, [pathname, isEditMode]);
+  useEffect13(() => {
+    if (!isEditMode) return;
+    const observer = new MutationObserver(() => {
+      const drawer = document.querySelector("[data-ohw-nav-drawer]");
+      if (!drawer || drawer === appliedDrawerRef.current) return;
+      appliedDrawerRef.current = drawer;
+      applyStylesToDom(parseStyleStore(stylesRef.current));
+    });
+    observer.observe(document.body, { childList: true, subtree: true });
+    return () => observer.disconnect();
+  }, [isEditMode, pathname]);
   useEffect13(() => {
     const contentForNav = () => {
       if (isEditMode) return editContentRef.current;
@@ -19487,26 +19830,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]);
   useEffect13(() => {
@@ -19801,9 +20129,6 @@ function OhhwellsBridge() {
       if (target.closest("[data-ohw-state-toggle]")) return;
       if (target.closest("[data-ohw-max-badge]")) return;
       if (isInsideLinkEditor(target)) return;
-      if (selectedMediaElRef.current && !selectedMediaElRef.current.contains(target) && !target.closest("[data-ohw-media-overlay], [data-ohw-edit-chrome], [data-ohw-item-interaction]")) {
-        clearMediaSelectionRef.current();
-      }
       if (isInsideFloatingPanel(target)) return;
       if (target.closest("[data-ohw-form-toolbar]")) return;
       if (target.closest(
@@ -19811,6 +20136,9 @@ function OhhwellsBridge() {
       )) {
         return;
       }
+      if (selectedMediaElRef.current && !selectedMediaElRef.current.contains(target) && !target.closest("[data-ohw-media-overlay], [data-ohw-edit-chrome], [data-ohw-item-interaction]")) {
+        clearMediaSelectionRef.current();
+      }
       {
         const formEl = getFormElement(target);
         const onSuccessText = target.closest(`[${SUCCESS_TEXT_ATTR}]`);
@@ -19974,14 +20302,6 @@ function OhhwellsBridge() {
         }
         const clickedButton = findClosestButtonLike(target);
         const buttonOnMedia = Boolean(clickedButton && isMediaEditable(editable) && editable.contains(clickedButton));
-        console.log("[click-debug]", {
-          editableType: editable.dataset.ohwEditable,
-          editableTag: editable.tagName,
-          targetTag: target.tagName,
-          clickedButtonTag: clickedButton?.tagName ?? null,
-          buttonOnMedia,
-          isMediaEditableEditable: isMediaEditable(editable)
-        });
         if (isMediaEditable(editable) && !buttonOnMedia) {
           e.preventDefault();
           e.stopPropagation();
@@ -20008,11 +20328,6 @@ function OhhwellsBridge() {
         const hrefLookupTarget = buttonOnMedia ? clickedButton : editable;
         const hrefCtx = getHrefKeyFromElement(hrefLookupTarget);
         const navAnchor = hrefCtx ? getNavigationItemAnchor(hrefCtx.anchor) : null;
-        console.log("[click-debug 2]", {
-          hrefLookupTargetTag: hrefLookupTarget.tagName,
-          hrefCtx: hrefCtx ? { key: hrefCtx.key } : null,
-          navAnchorTag: navAnchor?.tagName ?? null
-        });
         if (navAnchor) {
           e.preventDefault();
           e.stopPropagation();
@@ -20054,7 +20369,7 @@ function OhhwellsBridge() {
         return;
       }
       const footerColClick = target.closest("[data-ohw-footer-col]");
-      if (footerColClick) {
+      if (footerColClick && !target.closest("[data-ohw-editable]")) {
         e.preventDefault();
         e.stopPropagation();
         selectFrameRef.current(footerColClick);
@@ -20157,6 +20472,19 @@ function OhhwellsBridge() {
     const handleMouseOver = (e) => {
       if (document.documentElement.hasAttribute("data-ohw-section-picking")) return;
       const target = e.target;
+      if (isNavDrawerOpen() && isPointOutsideOpenDrawer(e.clientX, e.clientY)) {
+        document.querySelectorAll("[data-ohw-hovered]").forEach((el) => el.removeAttribute("data-ohw-hovered"));
+        hoveredItemElRef.current = null;
+        setHoveredItemRect(null);
+        hoveredNavContainerRef.current = null;
+        setHoveredNavContainerRect(null);
+        formHoverElRef.current = null;
+        setFormHoverRect(null);
+        siblingHintElRef.current = null;
+        setSiblingHintRect(null);
+        setSiblingHintRects([]);
+        return;
+      }
       if (linkPopoverOpenRef.current) {
         hoveredItemElRef.current = null;
         setHoveredItemRect(null);
@@ -20182,6 +20510,9 @@ function OhhwellsBridge() {
         setHoveredItemRect(null);
         hoveredNavContainerRef.current = null;
         setHoveredNavContainerRect(null);
+        siblingHintElRef.current = null;
+        setSiblingHintRect(null);
+        setSiblingHintRects([]);
         return;
       }
       {
@@ -20213,7 +20544,7 @@ function OhhwellsBridge() {
           const navContainer = target.closest("[data-ohw-nav-container]");
           if (!navContainer) {
             const footerLinks = target.closest("[data-ohw-footer-links], .rb-footer-links") ?? null;
-            if (footerLinks && selected2 !== footerLinks && !getNavigationItemAnchor(target) && !target.closest("[data-ohw-footer-col], [data-ohw-footer-column]")) {
+            if (footerLinks && selected2 !== footerLinks && !getNavigationItemAnchor(target) && !target.closest("[data-ohw-footer-col], [data-ohw-footer-column]") && !target.closest("[data-ohw-editable]")) {
               hoveredNavContainerRef.current = footerLinks;
               setHoveredNavContainerRect(footerLinks.getBoundingClientRect());
               hoveredItemElRef.current = null;
@@ -20251,7 +20582,7 @@ function OhhwellsBridge() {
         return;
       }
       const footerCol = target.closest("[data-ohw-footer-col]") ?? target.closest("[data-ohw-footer-column]");
-      if (footerCol) {
+      if (footerCol && !target.closest("[data-ohw-editable]")) {
         hoveredNavContainerRef.current = null;
         setHoveredNavContainerRect(null);
         if (selectedElRef.current === footerCol) return;
@@ -20302,7 +20633,6 @@ function OhhwellsBridge() {
             hoveredNavContainerRef.current = null;
             setHoveredNavContainerRect(null);
             hoveredItemElRef.current = editable;
-            setHoveredItemRect(isSelectedForHoverRef.current(editable) ? null : editable.getBoundingClientRect());
           }
         }
       }
@@ -20599,7 +20929,7 @@ function OhhwellsBridge() {
       }
     };
     const probeImageAt = (clientX, clientY, isDragOver = false, fromParentViewport = false) => {
-      if (linkPopoverOpenRef.current) {
+      if (linkPopoverOpenRef.current || floatingPanelOpenRef.current && isPointOverFloatingPanel(clientX, clientY)) {
         if (hoveredImageRef.current) {
           hoveredImageRef.current = null;
           hoveredImageHasTextOverlapRef.current = false;
@@ -20972,7 +21302,31 @@ 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;
+        setFormHoverRect(null);
+        hoveredItemElRef.current = null;
+        setHoveredItemRect(null);
+        hoveredNavContainerRef.current = null;
+        setHoveredNavContainerRect(null);
+        dismissImageHover();
+        if (hoveredGapRef.current) {
+          hoveredGapRef.current = null;
+          setSectionGap(null);
+        }
+        if (activeStateElRef.current) {
+          activeStateElRef.current.removeAttribute("data-ohw-state-hovered");
+          activeStateElRef.current = null;
+          setToggleState(null);
+        }
+        return;
+      }
       if (isOverEditorChrome(clientX, clientY)) {
         document.querySelectorAll("[data-ohw-hovered]").forEach((el) => el.removeAttribute("data-ohw-hovered"));
         formHoverElRef.current = null;
@@ -20981,7 +21335,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;
@@ -20993,7 +21352,12 @@ 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);
       probeImageAt(clientX, clientY);
@@ -21332,6 +21696,7 @@ function OhhwellsBridge() {
       }
       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);
@@ -21343,11 +21708,11 @@ function OhhwellsBridge() {
           continue;
         }
         if (key === AI_SECTIONS_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 (LOGO_IMAGE_KEYS.includes(key) && !String(val ?? "").trim()) continue;
         if (applyVideoSettingNode(key, val)) continue;
         if (applyCarouselNode(key, val)) continue;
         document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
@@ -21572,10 +21937,26 @@ function OhhwellsBridge() {
     const handleGetBrand = (e) => {
       if (e.data?.type !== "ow:get-brand") return;
       const template = deriveTemplateBrand();
-      const value = brandKitRef.current || (template ? JSON.stringify(template) : "");
+      const fallback = template ?? (() => {
+        const fonts = deriveTemplateFonts();
+        return fonts ? { palette: AI_DEFAULT_BRAND.palette, fonts } : null;
+      })();
+      const value = brandKitRef.current || (fallback ? JSON.stringify(fallback) : "");
       postToParentRef.current({ type: "ow:brand-value", value });
     };
     window.addEventListener("message", handleGetBrand);
+    const handleGetTemplateFonts = (e) => {
+      if (e.data?.type !== "ow:get-template-fonts") return;
+      const fonts = deriveTemplateFonts();
+      postToParentRef.current({ type: "ow:template-fonts-value", value: fonts ? JSON.stringify(fonts) : "" });
+    };
+    window.addEventListener("message", handleGetTemplateFonts);
+    const handleGetTemplateBrand = (e) => {
+      if (e.data?.type !== "ow:get-template-brand") return;
+      const brand = deriveTemplateBrand();
+      postToParentRef.current({ type: "ow:template-brand-value", value: brand ? JSON.stringify(brand) : "" });
+    };
+    window.addEventListener("message", handleGetTemplateBrand);
     const handleMoveSection = (e) => {
       if (e.data?.type !== "ow:move-section") return;
       const instanceId = typeof e.data.instanceId === "string" ? e.data.instanceId : "";
@@ -21768,6 +22149,12 @@ function OhhwellsBridge() {
         closeLinkPopoverRef.current();
         return;
       }
+      if (floatingPanelOpenRef.current) {
+        setFloatingPanelRef.current(null);
+        deselectRef.current();
+        deactivateRef.current();
+        return;
+      }
       deselectRef.current();
       deactivateRef.current();
       clearMediaSelectionRef.current();
@@ -22056,8 +22443,12 @@ function OhhwellsBridge() {
       if (inserted) {
         const tracker = getSectionsTracker();
         postToParentRef.current({ type: "ow:change", nodes: [{ key: "__ohw_sections", text: tracker.textContent ?? "[]" }] });
-        const h = document.body.scrollHeight;
-        if (h > 50) postToParentRef.current({ type: "ow:height", height: h });
+        const reportHeight = () => {
+          const h = document.body.scrollHeight;
+          if (h > 50) postToParentRef.current({ type: "ow:height", height: h });
+        };
+        reportHeight();
+        setTimeout(reportHeight, 500);
       }
     };
     const handleSwitchSchedule = (e) => {
@@ -22478,15 +22869,17 @@ function OhhwellsBridge() {
       window.removeEventListener("message", handleAiSetBrand);
       window.removeEventListener("message", handleAiSetStyles);
       window.removeEventListener("message", handleGetBrand);
+      window.removeEventListener("message", handleGetTemplateFonts);
+      window.removeEventListener("message", handleGetTemplateBrand);
       window.removeEventListener("message", handleMoveSection);
       window.removeEventListener("message", handlePanelDragging);
       window.removeEventListener("message", handleDeleteSection);
       window.removeEventListener("message", handleDuplicateSection);
       window.removeEventListener("message", handleDeactivate);
-      document.documentElement.removeAttribute("data-ohw-panel-dragging");
       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);
@@ -22689,7 +23082,7 @@ function OhhwellsBridge() {
       postToParent2({
         type: "ow:ready",
         version: "1",
-        bridgeVersion: "0.1.111",
+        bridgeVersion: "0.1.113",
         path: pathname,
         nodes: collectEditableNodes(editContentRef.current),
         sections
@@ -23305,7 +23698,7 @@ function OhhwellsBridge() {
                             "span",
                             {
                               "data-ohw-form-count": "",
-                              className: "ml-0.5 inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-full bg-primary px-1.5 text-[11px] font-semibold text-primary-foreground",
+                              className: "ml-0.5 inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-full bg-bridge-primary px-1.5 text-[11px] font-semibold text-primary-foreground",
                               children: formPickCount
                             }
                           )
@@ -23543,11 +23936,11 @@ function OhhwellsBridge() {
             className: "fixed left-0 w-full z-2147483646 flex items-center pointer-events-none",
             style: { top: sectionGap.y, transform: "translateY(-50%)" },
             children: [
-              /* @__PURE__ */ jsx33("div", { className: "flex-1 bg-primary", style: { height: 3 } }),
+              /* @__PURE__ */ jsx33("div", { className: "flex-1 bg-bridge-primary", style: { height: 3 } }),
               /* @__PURE__ */ jsx33(
                 Badge,
                 {
-                  className: "px-8 py-1 bg-primary hover:bg-primary text-primary-foreground text-xs font-medium shrink-0 rounded-full cursor-pointer pointer-events-auto",
+                  className: "px-8 py-1 bg-bridge-primary hover:bg-bridge-primary text-primary-foreground text-xs font-medium shrink-0 rounded-full cursor-pointer pointer-events-auto",
                   onClick: () => {
                     window.parent.postMessage(
                       {
@@ -23561,7 +23954,7 @@ function OhhwellsBridge() {
                   children: "Add Section"
                 }
               ),
-              /* @__PURE__ */ jsx33("div", { className: "flex-1 bg-primary", style: { height: 3 } })
+              /* @__PURE__ */ jsx33("div", { className: "flex-1 bg-bridge-primary", style: { height: 3 } })
             ]
           }
         ),
@@ -23609,6 +24002,59 @@ function OhhwellsBridge() {
     ) : null
   ] });
 }
+// src/ui/EmptySection.tsx
+import Link3 from "next/link";
+import { Fragment as Fragment9, jsx as jsx34, jsxs as jsxs21 } from "react/jsx-runtime";
+function EmptySection({ title, homeHref = "/", eyebrowKey, titleKey, subtitleKey }) {
+  return /* @__PURE__ */ jsxs21(Fragment9, { children: [
+    /* @__PURE__ */ jsx34(
+      "p",
+      {
+        style: {
+          fontFamily: "var(--brand-font-body)",
+          fontSize: "0.75rem",
+          fontWeight: 500,
+          letterSpacing: "0.15em",
+          textTransform: "uppercase",
+          color: "var(--brand-accent)",
+          marginBottom: "1.5rem"
+        },
+        children: /* @__PURE__ */ jsx34(Link3, { href: homeHref, style: { color: "inherit" }, children: /* @__PURE__ */ jsx34("span", { ...eyebrowKey ? { "data-ohw-editable": "text", "data-ohw-key": eyebrowKey } : {}, children: "Home" }) })
+      }
+    ),
+    /* @__PURE__ */ jsx34(
+      "h1",
+      {
+        style: {
+          fontFamily: "var(--brand-font-heading)",
+          fontSize: "clamp(2rem, 3.5vw, 2.75rem)",
+          lineHeight: 1.1,
+          letterSpacing: "-0.025em",
+          color: "var(--brand-text)",
+          marginBottom: "1rem"
+        },
+        ...titleKey ? { "data-ohw-editable": "text", "data-ohw-key": titleKey, "data-ohw-max-length": 80 } : {},
+        children: title
+      }
+    ),
+    /* @__PURE__ */ jsx34(
+      "p",
+      {
+        style: {
+          fontFamily: "var(--brand-font-body)",
+          fontSize: "1rem",
+          lineHeight: 1.7,
+          fontWeight: 300,
+          color: "var(--brand-text-muted)",
+          maxWidth: "340px"
+        },
+        ...subtitleKey ? { "data-ohw-editable": "text", "data-ohw-key": subtitleKey, "data-ohw-max-length": 160 } : {},
+        children: "This page doesn't have any content yet."
+      }
+    )
+  ] });
+}
 export {
   AI_DEFAULT_BRAND,
   AI_TREE_SCHEMA_VERSIONS,
@@ -23625,6 +24071,7 @@ export {
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
+  EmptySection,
   ItemActionToolbar,
   ItemInteractionLayer,
   LinkEditorPanel,