@ohhwells/bridge 0.1.113-next.294 → 0.1.113-next.296

package/dist/index.cjs

@@ -105,6 +105,10 @@ function enforceLinkHrefs() {
 
 // src/lib/ai-tree.ts
 var AI_TREE_SCHEMA_VERSIONS = [1];
+var BUTTON_FILL_TOKENS = ["dark", "primary", "accent", "light"];
+var BUTTON_STYLES = ["solid", "outline", "ghost"];
+var BUTTON_RADII = ["square", "rounded", "pill"];
+var BUTTON_SIZES = ["s", "m", "l"];
 var AI_DEFAULT_BRAND = {
   palette: { dark: "#0C0A09", primary: "#0078E5", accent: "#747271", light: "#ECECEB" },
   fonts: {
@@ -362,6 +366,59 @@ var FONT_VARS = {
 var BRAND_FONT_LINK_ID = "ohw-brand-fonts";
 var CUSTOM_FONT_STYLE_ID = "ohw-brand-custom-fonts";
 var CUSTOM_FONT_FORMATS = /* @__PURE__ */ new Set(["woff2", "woff", "truetype", "opentype"]);
+var BUTTON_FILL_VAR = {
+  dark: "var(--brand-text)",
+  primary: "var(--brand-primary)",
+  accent: "var(--brand-accent)",
+  light: "var(--brand-background)"
+};
+var BUTTON_RADIUS_PX = {
+  square: 0,
+  rounded: AI_TREE_TOKENS.radiusButton,
+  pill: 999
+};
+var BUTTON_SIZE_SPEC = {
+  s: {
+    paddingX: `${AI_TREE_TOKENS.spacing4}px`,
+    paddingY: `${AI_TREE_TOKENS.spacing2}px`,
+    fontSize: "14px"
+  },
+  m: {
+    paddingX: `${AI_TREE_TOKENS.spacing6}px`,
+    paddingY: `${AI_TREE_TOKENS.spacing3}px`,
+    fontSize: `${AI_TREE_TOKENS.type.button.size}px`
+  },
+  l: {
+    paddingX: `${AI_TREE_TOKENS.spacing8}px`,
+    paddingY: `${AI_TREE_TOKENS.spacing4}px`,
+    fontSize: "18px"
+  }
+};
+var BUTTON_VAR_ROLES = ["bg", "text", "border", "radius", "padding-x", "padding-y", "font-size"];
+var BUTTON_VAR_NAMES = ["primary", "secondary"].flatMap(
+  (variant) => BUTTON_VAR_ROLES.map((role) => `--brand-button-${variant}-${role}`)
+);
+function buttonVariantVars(variant, style) {
+  const fill = BUTTON_FILL_VAR[style.fill];
+  const text = BUTTON_FILL_VAR[style.textColor];
+  const size = BUTTON_SIZE_SPEC[style.size];
+  const { bg, border } = style.style === "outline" ? { bg: "transparent", border: fill } : style.style === "ghost" ? { bg: "transparent", border: "transparent" } : { bg: fill, border: "transparent" };
+  return {
+    [`--brand-button-${variant}-bg`]: bg,
+    [`--brand-button-${variant}-text`]: text,
+    [`--brand-button-${variant}-border`]: border,
+    [`--brand-button-${variant}-radius`]: `${BUTTON_RADIUS_PX[style.radius]}px`,
+    [`--brand-button-${variant}-padding-x`]: size.paddingX,
+    [`--brand-button-${variant}-padding-y`]: size.paddingY,
+    [`--brand-button-${variant}-font-size`]: size.fontSize
+  };
+}
+function buttonStyleVars(buttons) {
+  return {
+    ...buttonVariantVars("primary", buttons.primary),
+    ...buttonVariantVars("secondary", buttons.secondary)
+  };
+}
 function brandColorVars(palette) {
   const { dark, primary, accent, light } = palette;
   const mix = (a, aPct, b) => `color-mix(in srgb, ${a} ${aPct}%, ${b})`;
@@ -389,6 +446,11 @@ function brandColorVars(palette) {
     "--brand-on-primary": light
   };
 }
+function isButtonStyle(value) {
+  if (!value || typeof value !== "object") return false;
+  const v = value;
+  return BUTTON_FILL_TOKENS.includes(v.fill) && BUTTON_FILL_TOKENS.includes(v.textColor) && BUTTON_STYLES.includes(v.style) && BUTTON_RADII.includes(v.radius) && BUTTON_SIZES.includes(v.size);
+}
 function parseCustomFontWeight(raw) {
   if (typeof raw !== "object" || raw === null) return null;
   const w = raw;
@@ -417,11 +479,14 @@ function parseBrandKit(raw) {
     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;
+    const b = parsed?.buttons;
+    const buttons = b && isButtonStyle(b.primary) && isButtonStyle(b.secondary) ? { primary: b.primary, secondary: b.secondary } : void 0;
+    if (!palette && !fonts && !customFonts && !buttons) return null;
     return {
       ...palette ? { palette } : {},
       ...fonts ? { fonts } : {},
-      ...customFonts ? { customFonts } : {}
+      ...customFonts ? { customFonts } : {},
+      ...buttons ? { buttons } : {}
     };
   } catch {
     return null;
@@ -475,7 +540,9 @@ function loadCustomFonts(fonts) {
 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 [...BRAND_VAR_NAMES, ...LEGACY_BRAND_VAR_NAMES, ...BUTTON_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();
@@ -484,6 +551,9 @@ function applyBrandToDom(kit) {
   if (kit.palette) {
     for (const [name, value] of Object.entries(brandColorVars(kit.palette))) root.style.setProperty(name, value);
   }
+  if (kit.buttons) {
+    for (const [name, value] of Object.entries(buttonStyleVars(kit.buttons))) root.style.setProperty(name, value);
+  }
   if (kit.customFonts) {
     loadCustomFonts(kit.customFonts);
   }
@@ -612,7 +682,6 @@ var NODE_PROPS = [
   "color",
   "font-family",
   "font-size",
-  "background",
   "text-align",
   "justify-content",
   "align-items"
@@ -662,9 +731,6 @@ function clearNodeProps(root) {
     h.removeAttribute(NODE_WROTE_ATTR);
   }
 }
-function buttonSurfaceOf(el) {
-  return el.closest("a, button") ?? el;
-}
 function alignSubjectOf(el) {
   const button = el.closest('[data-ohw-role="button"]');
   if (button?.parentElement) return button.parentElement;
@@ -780,18 +846,6 @@ function applyStylesToDom(store) {
         );
         subject.setAttribute(NODE_WROTE_ATTR, "");
       }
-      if (override.buttonBackground !== void 0 || override.buttonText !== void 0) {
-        const surface = buttonSurfaceOf(el);
-        if (override.buttonBackground !== void 0) {
-          saveInline(surface, "background");
-          surface.style.setProperty("background", override.buttonBackground, "important");
-        }
-        if (override.buttonText !== void 0) {
-          saveInline(surface, "color");
-          surface.style.setProperty("color", override.buttonText, "important");
-        }
-        surface.setAttribute(NODE_WROTE_ATTR, "");
-      }
     }
   }
   for (const [sectionId, override] of Object.entries(store.sections)) {
@@ -1386,7 +1440,59 @@ var FEATURE_LINE_CSS = [
   `background-color:currentColor;-webkit-mask:url("${CHECK_MASK}") no-repeat 0 0/24px 24px;`,
   `mask:url("${CHECK_MASK}") no-repeat 0 0/24px 24px}`
 ].join("");
-function buttonShellStyle(ctx, fullWidth) {
+function buttonSizeSpec(size) {
+  switch (size) {
+    case "s":
+      return { padding: `${AI_TREE_TOKENS.spacing2}px ${AI_TREE_TOKENS.spacing4}px`, fontSize: 14 };
+    case "l":
+      return { padding: `${AI_TREE_TOKENS.spacing4}px ${AI_TREE_TOKENS.spacing8}px`, fontSize: 18 };
+    case "m":
+    default:
+      return { padding: `${AI_TREE_TOKENS.spacing3}px ${AI_TREE_TOKENS.spacing6}px`, fontSize: AI_TREE_TOKENS.type.button.size };
+  }
+}
+function buttonRadiusPx(radius) {
+  switch (radius) {
+    case "square":
+      return 0;
+    case "pill":
+      return 999;
+    case "rounded":
+    default:
+      return AI_TREE_TOKENS.radiusButton;
+  }
+}
+function resolveButtonToken(brand, token) {
+  return brand.palette[token];
+}
+function buttonColorStyle(ctx, variant) {
+  const token = ctx.brand.buttons?.[variant];
+  if (!token) return null;
+  const fill = resolveButtonToken(ctx.brand, token.fill);
+  const text = resolveButtonToken(ctx.brand, token.textColor);
+  switch (token.style) {
+    case "outline":
+      return { background: "transparent", border: `1px solid ${fill}`, color: text };
+    case "ghost":
+      return { background: "transparent", border: "1px solid transparent", color: text };
+    case "solid":
+    default:
+      return { background: fill, color: text };
+  }
+}
+function buttonShellStyle(ctx, variant, fullWidth) {
+  const buttonToken = ctx.brand.buttons?.[variant];
+  if (buttonToken) {
+    const { padding, fontSize } = buttonSizeSpec(buttonToken.size);
+    return {
+      borderRadius: buttonRadiusPx(buttonToken.radius),
+      padding,
+      fontFamily: ctx.brand.fonts.body,
+      fontSize,
+      lineHeight: AI_TREE_TOKENS.type.button.line,
+      fontWeight: AI_TREE_TOKENS.type.button.weight
+    };
+  }
   const bs = ctx.buttonStyle;
   if (bs) {
     return {
@@ -1534,6 +1640,8 @@ function ButtonEl({
   fullWidth
 }) {
   const secondary = slots.variant === "secondary";
+  const variant = secondary ? "secondary" : "primary";
+  const tokenColorStyle = buttonColorStyle(ctx, variant);
   const href = str(slots.href);
   const linkAttrs = ctx.keyFor && path ? { "data-ohw-href-key": ctx.keyFor(`${path}.href`), "data-ohw-role": "button" } : {};
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -1548,13 +1656,13 @@ function ButtonEl({
         justifyContent: "center",
         textDecoration: "none",
         cursor: "pointer",
-        ...buttonShellStyle(ctx, fullWidth),
-        ...secondary ? { border: `1px solid ${ctx.brand.palette.dark}`, color: ctx.brand.palette.dark } : (
+        ...buttonShellStyle(ctx, variant, fullWidth),
+        ...tokenColorStyle ?? (secondary ? { border: `1px solid ${ctx.brand.palette.dark}`, color: ctx.brand.palette.dark } : (
           // Off-band, prefer the template button's measured fill/label pair — a template may
           // fill its CTAs with any token (hvac: accent bg, primary text). On an accent band
           // the flipped palette keeps contrast, so the brand-driven colours stay.
           !ctx.buttonLabel && ctx.buttonStyle?.background ? { background: ctx.buttonStyle.background, color: ctx.buttonStyle.color } : { background: ctx.brand.palette.primary, color: ctx.buttonLabel ?? primaryButtonLabel(ctx.brand) }
-        )
+        ))
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { ...path ? textAttrs(ctx, `${path}.label`) : {}, children: str(slots.label) })
     }
@@ -2625,13 +2733,13 @@ function renderNode(node, ctx, path) {
                       border: "none",
                       cursor: "pointer",
                       // Shape/padding/typography follow the host template's own buttons.
-                      ...buttonShellStyle(ctx),
+                      ...buttonShellStyle(ctx, "primary"),
                       // Brand-styled: the template button's measured fill/label pair off-band, else
                       // primary fill with a brand-derived label so it reads on custom palettes.
-                      ...!ctx.buttonLabel && ctx.buttonStyle?.background ? { background: ctx.buttonStyle.background, color: ctx.buttonStyle.color } : {
+                      ...buttonColorStyle(ctx, "primary") ?? (!ctx.buttonLabel && ctx.buttonStyle?.background ? { background: ctx.buttonStyle.background, color: ctx.buttonStyle.color } : {
                         background: ctx.brand.palette.primary,
                         color: ctx.buttonLabel ?? primaryButtonLabel(ctx.brand)
-                      }
+                      })
                     },
                     children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { ...textAttrs(ctx, `${path}.c${i}.label`), children: str(cs.label) })
                   },
@@ -8992,6 +9100,7 @@ function MediaOverlay({
   fadingOut = false,
   selected = false,
   hovered = false,
+  cueOnly = false,
   onFadeOutComplete,
   onReplace,
   onSelect,
@@ -9000,7 +9109,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);
@@ -9117,7 +9226,7 @@ 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-bridge-primary)" : "inset 0 0 0 1.5px var(--color-bridge-primary)",
@@ -9168,7 +9277,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) => {
@@ -9198,7 +9307,8 @@ var OVERLAY_BUTTON_STYLE2 = {
 };
 function CarouselOverlay({
   hover,
-  onEdit
+  onEdit,
+  cueOnly = false
 }) {
   const { rect } = hover;
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
@@ -9214,12 +9324,12 @@ function CarouselOverlay({
         width: rect.width,
         height: rect.height,
         zIndex: 2147483646,
-        pointerEvents: "auto",
+        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__ */ (0, import_jsx_runtime16.jsxs)(
+      children: cueOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
         Button,
         {
           "data-ohw-carousel-overlay": "",
@@ -9410,7 +9520,8 @@ function ReviewButton({
 }
 function AiSectionOverlay({
   postToParent: postToParent2,
-  apiRef
+  apiRef,
+  onSelectionChange
 }) {
   const [selectedId, setSelectedId] = (0, import_react8.useState)(null);
   const [reviewId, setReviewId] = (0, import_react8.useState)(null);
@@ -9419,6 +9530,9 @@ function AiSectionOverlay({
   reviewIdRef.current = reviewId;
   const selectedIdRef = (0, import_react8.useRef)(null);
   selectedIdRef.current = selectedId;
+  (0, import_react8.useEffect)(() => {
+    onSelectionChange?.(selectedId);
+  }, [selectedId, onSelectionChange]);
   const report = (0, import_react8.useCallback)(
     (el) => {
       const labelSrc = el ? sectionElementOf(el) : null;
@@ -16524,6 +16638,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);
 }
@@ -17734,6 +17861,12 @@ function OhhwellsBridge() {
   const hoveredImageHasTextOverlapRef = (0, import_react17.useRef)(false);
   const dragOverElRef = (0, import_react17.useRef)(null);
   const [mediaHover, setMediaHover] = (0, import_react17.useState)(null);
+  const [selectedAiSectionId, setSelectedAiSectionId] = (0, import_react17.useState)(null);
+  const selectedAiSectionIdRef = (0, import_react17.useRef)(null);
+  const handleAiSectionSelectionChange = (0, import_react17.useCallback)((id) => {
+    selectedAiSectionIdRef.current = id;
+    setSelectedAiSectionId(id);
+  }, []);
   const [selectedMedia, setSelectedMedia] = (0, import_react17.useState)(null);
   const selectedMediaElRef = (0, import_react17.useRef)(null);
   const clearMediaSelection = (0, import_react17.useCallback)(() => {
@@ -20373,6 +20506,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 {
@@ -20824,6 +20965,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]");
@@ -22688,7 +22830,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) => {
@@ -23617,7 +23763,14 @@ function OhhwellsBridge() {
     bridgeRoot ? (0, import_react_dom5.createPortal)(
       /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { ref: attachVisibleViewport, "data-ohw-visible-viewport": "", "aria-hidden": true }),
-        isEditMode && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(AiSectionOverlay, { postToParent: postToParent2, apiRef: aiSectionApiRef }),
+        isEditMode && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          AiSectionOverlay,
+          {
+            postToParent: postToParent2,
+            apiRef: aiSectionApiRef,
+            onSelectionChange: handleAiSectionSelectionChange
+          }
+        ),
         isSectionDragging && sectionDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           "div",
           {
@@ -23650,6 +23803,7 @@ function OhhwellsBridge() {
           {
             hover: mediaHover,
             isUploading: false,
+            cueOnly: !mediaHover.isDragOver && !!mediaHover.fullBleedSectionId && mediaHover.fullBleedSectionId !== selectedAiSectionId,
             onReplace: handleMediaReplace,
             onSelect: handleMediaSelect,
             onVideoSettingsChange: handleVideoSettingsChange
@@ -23667,7 +23821,14 @@ function OhhwellsBridge() {
             onVideoSettingsChange: handleVideoSettingsChange
           }
         ),
-        carouselHover && !linkPopover && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CarouselOverlay, { hover: carouselHover, onEdit: handleEditCarousel }),
+        carouselHover && !linkPopover && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          CarouselOverlay,
+          {
+            hover: carouselHover,
+            onEdit: handleEditCarousel,
+            cueOnly: !!carouselHover.fullBleedSectionId && carouselHover.fullBleedSectionId !== selectedAiSectionId
+          }
+        ),
         siblingHintRect && !linkPopover && !isItemDragging && siblingHintRects.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ItemInteractionLayer, { rect: siblingHintRect, state: "sibling-hint" }),
         siblingHintRects.length > 0 && !linkPopover && !isItemDragging && siblingHintRects.map((rect, i) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ItemInteractionLayer, { rect, state: "sibling-hint" }, `sibling-hint-${i}`)),
         isItemDragging && draggedItemRect && selectedElRef.current !== footerDragRef.current?.draggedEl && selectedElRef.current !== navDragRef.current?.draggedEl && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ItemInteractionLayer, { rect: draggedItemRect, state: "dragging" }),