@ohhwells/bridge 0.1.115 → 0.1.117

package/dist/index.js

@@ -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
@@ -2650,14 +2712,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: {
@@ -2666,22 +2766,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(
@@ -7179,12 +7312,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",
@@ -7277,10 +7410,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
         ),
@@ -7302,7 +7435,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) => {
@@ -7331,7 +7464,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
@@ -8595,13 +8728,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
@@ -8618,7 +8751,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 }),
@@ -8638,7 +8771,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"
@@ -8666,7 +8799,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
@@ -8692,7 +8825,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"
       },
@@ -8765,6 +8898,7 @@ function MediaOverlay({
   fadingOut = false,
   selected = false,
   hovered = false,
+  cueOnly = false,
   onFadeOutComplete,
   onReplace,
   onSelect,
@@ -8773,7 +8907,7 @@ function MediaOverlay({
   const { rect } = hover;
   const skeletonRef = React8.useRef(null);
   const isVideo = hover.elementType === "video";
-  const showChrome = !selected || hovered;
+  const showChrome = (!selected || hovered) && !cueOnly;
   const autoplay = hover.videoAutoplay ?? true;
   const muted = hover.videoMuted ?? true;
   const probeRef = React8.useRef(null);
@@ -8889,11 +9023,11 @@ function MediaOverlay({
           // 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 ? "none" : "auto",
+          pointerEvents: hover.hasTextOverlap || cueOnly ? "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: [
@@ -8920,7 +9054,7 @@ function MediaOverlay({
               ]
             }
           ),
-          replaceMode === "none" ? null : /* @__PURE__ */ jsxs7(
+          replaceMode === "none" || cueOnly ? null : /* @__PURE__ */ jsxs7(
             Button,
             {
               "data-ohw-media-overlay": "",
@@ -8940,7 +9074,7 @@ function MediaOverlay({
                   justifyContent: "center"
                 } : null,
                 // Don't let Replace steal clicks when text (e.g. nav) sits on top of this media.
-                pointerEvents: hover.hasTextOverlap ? "none" : "auto"
+                pointerEvents: hover.hasTextOverlap || cueOnly ? "none" : "auto"
               },
               onMouseDown: (e) => e.preventDefault(),
               onClick: (e) => {
@@ -8970,7 +9104,8 @@ var OVERLAY_BUTTON_STYLE2 = {
 };
 function CarouselOverlay({
   hover,
-  onEdit
+  onEdit,
+  cueOnly = false
 }) {
   const { rect } = hover;
   return /* @__PURE__ */ jsx16(
@@ -8986,12 +9121,12 @@ function CarouselOverlay({
         width: rect.width,
         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)"
+        pointerEvents: cueOnly ? "none" : "auto",
+        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(
+      children: cueOnly ? null : /* @__PURE__ */ jsxs8(
         Button,
         {
           "data-ohw-carousel-overlay": "",
@@ -9182,7 +9317,8 @@ function ReviewButton({
 }
 function AiSectionOverlay({
   postToParent: postToParent2,
-  apiRef
+  apiRef,
+  onSelectionChange
 }) {
   const [selectedId, setSelectedId] = useState6(null);
   const [reviewId, setReviewId] = useState6(null);
@@ -9191,6 +9327,9 @@ function AiSectionOverlay({
   reviewIdRef.current = reviewId;
   const selectedIdRef = useRef4(null);
   selectedIdRef.current = selectedId;
+  useEffect4(() => {
+    onSelectionChange?.(selectedId);
+  }, [selectedId, onSelectionChange]);
   const report = useCallback2(
     (el) => {
       const labelSrc = el ? sectionElementOf(el) : null;
@@ -9208,6 +9347,7 @@ function AiSectionOverlay({
       const sectionEl = inner ? movableUnit(inner) : null;
       const id = sectionEl ? instanceIdOf(sectionEl) || null : null;
       if (id === selectedIdRef.current) return;
+      selectedIdRef.current = id;
       setSelectedId(id);
       if (options?.report !== false) report(sectionEl);
     },
@@ -9228,9 +9368,11 @@ function AiSectionOverlay({
         return sectionEl != null;
       },
       clear: () => {
+        selectedIdRef.current = null;
         setSelectedId(null);
         report(null);
-      }
+      },
+      getSelectedId: () => selectedIdRef.current
     };
     return () => {
       apiRef.current = null;
@@ -9239,6 +9381,7 @@ function AiSectionOverlay({
   useEffect4(() => {
     const onMessage = (e) => {
       if (e.data?.type === "ow:ai-select" && e.data.sectionId === null) {
+        selectedIdRef.current = null;
         setSelectedId(null);
         return;
       }
@@ -9289,6 +9432,7 @@ function AiSectionOverlay({
       if (reviewIdRef.current) return;
       if (document.querySelector("[data-ohw-editing]")) return;
       if (selectedIdRef.current) {
+        selectedIdRef.current = null;
         setSelectedId(null);
         report(null);
       }
@@ -9910,7 +10054,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
       }
     ),
@@ -9929,7 +10073,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(
@@ -10059,7 +10203,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" }),
@@ -14268,7 +14412,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(
@@ -14276,7 +14420,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"
             )
           }
         )
@@ -15911,7 +16055,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"
@@ -16303,6 +16447,19 @@ function isMediaEditable(el) {
   const t = el.dataset.ohwEditable;
   return t === "image" || t === "bg-image" || t === "video";
 }
+var FULL_BLEED_MIN_COVERAGE = 0.98;
+function fullBleedSectionIdOf(media) {
+  const section = media.closest("[data-ohw-section]");
+  if (!section) return null;
+  const s = section.getBoundingClientRect();
+  if (s.width <= 0 || s.height <= 0) return null;
+  const m = media.getBoundingClientRect();
+  const overlapX = Math.min(m.right, s.right) - Math.max(m.left, s.left);
+  const overlapY = Math.min(m.bottom, s.bottom) - Math.max(m.top, s.top);
+  if (overlapX <= 0 || overlapY <= 0) return null;
+  if (overlapX * overlapY / (s.width * s.height) < FULL_BLEED_MIN_COVERAGE) return null;
+  return instanceIdOf(movableUnit(section)) || null;
+}
 function isIconMarkupValue(value) {
   return /^\s*<(svg|img)\b/i.test(value);
 }
@@ -17476,20 +17633,38 @@ function OhhwellsBridge() {
   const hoveredImageHasTextOverlapRef = useRef10(false);
   const dragOverElRef = useRef10(null);
   const [mediaHover, setMediaHover] = useState14(null);
+  const [selectedAiSectionId, setSelectedAiSectionId] = useState14(null);
+  const selectedAiSectionIdRef = useRef10(null);
+  const handleAiSectionSelectionChange = useCallback8((id) => {
+    selectedAiSectionIdRef.current = id;
+    setSelectedAiSectionId(id);
+  }, []);
   const [selectedMedia, setSelectedMedia] = useState14(null);
   const selectedMediaElRef = useRef10(null);
+  const mediaKeyDropTokenRef = useRef10(0);
   const clearMediaSelection = useCallback8(() => {
     const prev = selectedMediaElRef.current;
     selectedMediaElRef.current = null;
     setSelectedMedia(null);
     const sectionEl = prev?.closest("[data-ohw-section]") ?? null;
     if (sectionEl) {
-      postToParentRef.current({
-        type: "ow:section-selected",
-        sectionId: sectionEl.dataset.ohwSection ?? null,
-        sectionLabel: sectionEl.dataset.ohwSectionLabel ?? titleCaseSectionId(sectionEl.dataset.ohwSection ?? ""),
-        key: null
-      });
+      const sectionInstanceId = instanceIdOf(movableUnit(sectionEl)) || null;
+      if (!sectionInstanceId) return;
+      const token = ++mediaKeyDropTokenRef.current;
+      const onQueueDrained = (e) => {
+        if (e.source !== window || e.data?.type !== "ow:media-key-drop" || e.data.token !== token) return;
+        window.removeEventListener("message", onQueueDrained);
+        if (aiSectionApiRef.current?.getSelectedId() !== sectionInstanceId) return;
+        if (selectedMediaElRef.current) return;
+        postToParentRef.current({
+          type: "ow:section-selected",
+          sectionId: sectionEl.dataset.ohwSection ?? null,
+          sectionLabel: sectionEl.dataset.ohwSectionLabel ?? titleCaseSectionId(sectionEl.dataset.ohwSection ?? ""),
+          key: null
+        });
+      };
+      window.addEventListener("message", onQueueDrained);
+      window.postMessage({ type: "ow:media-key-drop", token }, "*");
     }
   }, []);
   const clearMediaSelectionRef = useRef10(clearMediaSelection);
@@ -19381,7 +19556,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(() => {
@@ -19929,6 +20106,23 @@ function OhhwellsBridge() {
       if (selectedMediaElRef.current && !selectedMediaElRef.current.contains(target) && !target.closest("[data-ohw-media-overlay], [data-ohw-edit-chrome], [data-ohw-item-interaction]")) {
         clearMediaSelectionRef.current();
       }
+      if (selectedMediaElRef.current && target.closest("[data-ohw-media-overlay]") && !findClosestButtonLike(target)) {
+        const hit = findImageAtPoint(e.clientX, e.clientY, false);
+        if (hit && hit !== selectedMediaElRef.current) {
+          e.preventDefault();
+          e.stopPropagation();
+          const fullBleedSectionId = fullBleedSectionIdOf(hit);
+          if (fullBleedSectionId && fullBleedSectionId !== selectedAiSectionIdRef.current) {
+            clearMediaSelectionRef.current();
+            deselectRef.current();
+            deactivateRef.current();
+            aiSectionApiRef.current?.selectFromElement(hit);
+            return;
+          }
+          selectMediaElementRef.current(hit);
+          return;
+        }
+      }
       if (isInsideFloatingPanel(target)) return;
       if (target.closest("[data-ohw-form-toolbar]")) return;
       if (target.closest(
@@ -20110,6 +20304,14 @@ function OhhwellsBridge() {
         if (isMediaEditable(editable) && !buttonOnMedia) {
           e.preventDefault();
           e.stopPropagation();
+          const fullBleedSectionId = fullBleedSectionIdOf(editable);
+          if (fullBleedSectionId && fullBleedSectionId !== selectedAiSectionIdRef.current) {
+            clearMediaSelectionRef.current();
+            deselectRef.current();
+            deactivateRef.current();
+            aiSectionApiRef.current?.selectFromElement(editable);
+            return;
+          }
           if (selectedMediaElRef.current === editable) {
             postToParentRef.current({ type: "ow:image-pick", key: editable.dataset.ohwKey ?? "", elementType: editable.dataset.ohwEditable ?? "image" });
           } else {
@@ -20564,6 +20766,7 @@ function OhhwellsBridge() {
         elementType: imgEl.dataset.ohwEditable ?? "image",
         hasTextOverlap,
         isDragOver,
+        fullBleedSectionId: fullBleedSectionIdOf(imgEl),
         ...video ? { videoAutoplay: video.autoplay, videoMuted: video.muted } : {}
       });
       const track = imgEl.closest("[data-ohw-hover-pause]");
@@ -20736,7 +20939,13 @@ function OhhwellsBridge() {
         setHoveredItemRect(null);
       }
     };
+    const syncSelectedMediaPointerRelease = (released) => {
+      setSelectedMedia(
+        (prev) => prev && prev.hasTextOverlap !== released ? { ...prev, hasTextOverlap: released } : prev
+      );
+    };
     const probeImageAt = (clientX, clientY, isDragOver = false, fromParentViewport = false) => {
+      syncSelectedMediaPointerRelease(true);
       if (linkPopoverOpenRef.current) {
         if (hoveredImageRef.current) {
           hoveredImageRef.current = null;
@@ -20931,6 +21140,7 @@ function OhhwellsBridge() {
           return;
         }
         document.querySelectorAll("[data-ohw-hovered]").forEach((el) => el.removeAttribute("data-ohw-hovered"));
+        syncSelectedMediaPointerRelease(false);
         if (imgEl !== hoveredImageRef.current || hoveredImageHasTextOverlapRef.current) {
           hoveredImageRef.current = imgEl;
           showImageHover(imgEl, isDragOver);
@@ -21731,10 +21941,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 : "";
@@ -22388,7 +22614,11 @@ function OhhwellsBridge() {
       if (!key) return;
       const r2 = getVisibleRect(container);
       setCarouselHover(
-        (prev) => prev && prev.key === key && prev.rect.top === r2.top && prev.rect.left === r2.left && prev.rect.width === r2.width && prev.rect.height === r2.height ? prev : { key, rect: { top: r2.top, left: r2.left, width: r2.width, height: r2.height } }
+        (prev) => prev && prev.key === key && prev.rect.top === r2.top && prev.rect.left === r2.left && prev.rect.width === r2.width && prev.rect.height === r2.height ? prev : {
+          key,
+          rect: { top: r2.top, left: r2.left, width: r2.width, height: r2.height },
+          fullBleedSectionId: fullBleedSectionIdOf(container)
+        }
       );
     };
     const applyToolbarPos = (rect) => {
@@ -22637,6 +22867,8 @@ 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);
@@ -22848,7 +23080,7 @@ function OhhwellsBridge() {
       postToParent2({
         type: "ow:ready",
         version: "1",
-        bridgeVersion: "0.1.114",
+        bridgeVersion: "0.1.116",
         path: pathname,
         nodes: collectEditableNodes(editContentRef.current),
         sections
@@ -23315,7 +23547,14 @@ function OhhwellsBridge() {
     bridgeRoot ? createPortal3(
       /* @__PURE__ */ jsxs20(Fragment8, { children: [
         /* @__PURE__ */ jsx33("div", { ref: attachVisibleViewport, "data-ohw-visible-viewport": "", "aria-hidden": true }),
-        isEditMode && /* @__PURE__ */ jsx33(AiSectionOverlay, { postToParent: postToParent2, apiRef: aiSectionApiRef }),
+        isEditMode && /* @__PURE__ */ jsx33(
+          AiSectionOverlay,
+          {
+            postToParent: postToParent2,
+            apiRef: aiSectionApiRef,
+            onSelectionChange: handleAiSectionSelectionChange
+          }
+        ),
         isSectionDragging && sectionDropSlots.map((slot, i) => /* @__PURE__ */ jsx33(
           "div",
           {
@@ -23348,6 +23587,7 @@ function OhhwellsBridge() {
           {
             hover: mediaHover,
             isUploading: false,
+            cueOnly: !mediaHover.isDragOver && !!mediaHover.fullBleedSectionId && mediaHover.fullBleedSectionId !== selectedAiSectionId,
             onReplace: handleMediaReplace,
             onSelect: handleMediaSelect,
             onVideoSettingsChange: handleVideoSettingsChange
@@ -23365,7 +23605,14 @@ function OhhwellsBridge() {
             onVideoSettingsChange: handleVideoSettingsChange
           }
         ),
-        carouselHover && !linkPopover && !isItemDragging && /* @__PURE__ */ jsx33(CarouselOverlay, { hover: carouselHover, onEdit: handleEditCarousel }),
+        carouselHover && !linkPopover && !isItemDragging && /* @__PURE__ */ jsx33(
+          CarouselOverlay,
+          {
+            hover: carouselHover,
+            onEdit: handleEditCarousel,
+            cueOnly: !!carouselHover.fullBleedSectionId && carouselHover.fullBleedSectionId !== selectedAiSectionId
+          }
+        ),
         siblingHintRect && !linkPopover && !isItemDragging && siblingHintRects.length === 0 && /* @__PURE__ */ jsx33(ItemInteractionLayer, { rect: siblingHintRect, state: "sibling-hint" }),
         siblingHintRects.length > 0 && !linkPopover && !isItemDragging && siblingHintRects.map((rect, i) => /* @__PURE__ */ jsx33(ItemInteractionLayer, { rect, state: "sibling-hint" }, `sibling-hint-${i}`)),
         isItemDragging && draggedItemRect && selectedElRef.current !== footerDragRef.current?.draggedEl && selectedElRef.current !== navDragRef.current?.draggedEl && /* @__PURE__ */ jsx33(ItemInteractionLayer, { rect: draggedItemRect, state: "dragging" }),
@@ -23464,7 +23711,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
                             }
                           )
@@ -23702,11 +23949,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(
                       {
@@ -23720,7 +23967,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 } })
             ]
           }
         ),