@ohhwells/bridge 0.1.86-next.255 → 0.1.86-next.256

package/dist/index.cjs

@@ -1195,6 +1195,25 @@ 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) {
+  const bs = ctx.buttonStyle;
+  if (bs) {
+    return {
+      borderRadius: bs.radius,
+      ...bs.padding ? { padding: bs.padding } : {},
+      ...bs.fontFamily ? { fontFamily: bs.fontFamily } : { fontFamily: ctx.brand.fonts.body },
+      ...bs.fontSize ? { fontSize: bs.fontSize } : {},
+      ...bs.fontWeight ? { fontWeight: bs.fontWeight } : {},
+      ...bs.letterSpacing && bs.letterSpacing !== "normal" ? { letterSpacing: bs.letterSpacing } : {},
+      ...bs.textTransform && bs.textTransform !== "none" ? { textTransform: bs.textTransform } : {}
+    };
+  }
+  return {
+    borderRadius: AI_TREE_TOKENS.radiusButton,
+    padding: fullWidth ? `${AI_TREE_TOKENS.spacing2}px ${AI_TREE_TOKENS.spacing4}px` : `${AI_TREE_TOKENS.spacing3}px ${AI_TREE_TOKENS.spacing6}px`,
+    ...typeStyle(AI_TREE_TOKENS.type.button, ctx.brand.fonts.body)
+  };
+}
 function hexLuminance(color) {
   const m = /^#([0-9a-f]{6})$/i.exec(color.trim());
   if (!m) return null;
@@ -1211,6 +1230,12 @@ function hexContrast(a, b) {
   const [hi, lo] = la > lb ? [la, lb] : [lb, la];
   return (hi + 0.05) / (lo + 0.05);
 }
+function primaryButtonLabel(brand) {
+  const darkC = hexContrast(brand.palette.primary, brand.palette.dark);
+  const lightC = hexContrast(brand.palette.primary, AI_TREE_TOKENS.textPrimaryForeground);
+  if (darkC === null || lightC === null) return AI_TREE_TOKENS.textPrimaryForeground;
+  return darkC > lightC ? brand.palette.dark : AI_TREE_TOKENS.textPrimaryForeground;
+}
 function accentBandContext(brand) {
   const p = brand.palette;
   const lightWins = (hexContrast(p.light, p.primary) ?? 99) >= (hexContrast(p.dark, p.primary) ?? 0);
@@ -1330,12 +1355,10 @@ function ButtonEl({
         width: fullWidth ? "100%" : void 0,
         alignItems: "center",
         justifyContent: "center",
-        padding: fullWidth ? `${AI_TREE_TOKENS.spacing2}px ${AI_TREE_TOKENS.spacing4}px` : `${AI_TREE_TOKENS.spacing3}px ${AI_TREE_TOKENS.spacing6}px`,
-        borderRadius: AI_TREE_TOKENS.radiusButton,
         textDecoration: "none",
         cursor: "pointer",
-        ...typeStyle(AI_TREE_TOKENS.type.button, ctx.brand.fonts.body),
-        ...secondary ? { border: `1px solid ${ctx.brand.palette.dark}`, color: ctx.brand.palette.dark } : { background: ctx.brand.palette.primary, color: ctx.buttonLabel ?? AI_TREE_TOKENS.textPrimaryForeground }
+        ...buttonShellStyle(ctx, fullWidth),
+        ...secondary ? { border: `1px solid ${ctx.brand.palette.dark}`, color: ctx.brand.palette.dark } : { 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) })
     }
@@ -2405,15 +2428,12 @@ function renderNode(node, ctx, path) {
                       alignSelf: submitAlign,
                       border: "none",
                       cursor: "pointer",
-                      padding: "12px 24px",
-                      // Corner radius follows the host template's own buttons (measured from a template
-                      // CTA); 8px only when the page has no template button to match.
-                      borderRadius: ctx.buttonRadius ?? 8,
+                      // Shape/padding/typography follow the host template's own buttons.
+                      ...buttonShellStyle(ctx),
                       // Brand-styled: primary fill, brand-derived label colour (not a fixed token) so it
                       // reads correctly on custom palettes.
                       background: ctx.brand.palette.primary,
-                      color: ctx.buttonLabel ?? ctx.brand.palette.light,
-                      ...typeStyle(AI_TREE_TOKENS.type.button, ctx.brand.fonts.body)
+                      color: ctx.buttonLabel ?? primaryButtonLabel(ctx.brand)
                     },
                     children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { ...textAttrs(ctx, `${path}.c${i}.label`), children: str(cs.label) })
                   },
@@ -2448,7 +2468,7 @@ function renderNode(node, ctx, path) {
 function AiTreeRenderer({
   tree,
   brand,
-  buttonRadius,
+  buttonStyle,
   resolveMedia,
   editKeyPrefix
 }) {
@@ -2469,7 +2489,7 @@ function AiTreeRenderer({
     cardSurface: blockBrand.palette.light.toUpperCase() === AI_DEFAULT_BRAND.palette.light.toUpperCase() ? "#ECECEB" : `color-mix(in srgb, ${blockBrand.palette.light} 90%, ${blockBrand.palette.dark})`,
     keyFor: editKeyPrefix ? (path) => `${editKeyPrefix}.${path}` : null,
     sectionAlignment: (tree.settings ?? {}).alignment === "center" ? "center" : "left",
-    buttonRadius,
+    buttonStyle,
     ...band ? { buttonLabel: band.buttonLabel } : {}
   };
   const settings = tree.settings ?? {};
@@ -2601,13 +2621,13 @@ function deriveBrandOverride() {
   };
 }
 function deriveTemplateBrand() {
-  const dark = readRootVar("--color-dark");
-  const primary = readRootVar("--color-primary");
-  const light = readRootVar("--color-light");
+  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("--color-accent");
-  const heading = readRootVar("--font-heading") || readRootVar("--font-display");
-  const body = readRootVar("--font-body");
+  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");
   return {
     palette: { dark, primary, accent: accent || dark, light },
     fonts: {
@@ -2616,12 +2636,32 @@ function deriveTemplateBrand() {
     }
   };
 }
-function deriveTemplateButtonRadius() {
+function deriveTemplateButtonStyle() {
   if (typeof document === "undefined") return null;
-  const btn = document.querySelector('[data-ohw-role="button"]');
+  const btn = Array.from(document.querySelectorAll('[data-ohw-role="button"]')).find(
+    (el) => !el.closest(`[${CONTAINER_ATTR}]`)
+  );
   if (!btn) return null;
-  const radius = getComputedStyle(btn).borderTopLeftRadius;
-  return radius || null;
+  const cs = getComputedStyle(btn);
+  const corners = [
+    cs.borderTopLeftRadius,
+    cs.borderTopRightRadius,
+    cs.borderBottomRightRadius,
+    cs.borderBottomLeftRadius
+  ].map((v) => v || "0px");
+  const radius = corners.every((v) => v === corners[0]) ? corners[0] : corners.join(" ");
+  const px = (v) => parseFloat(v) || 0;
+  const padY = Math.max(px(cs.paddingTop), px(cs.paddingBottom));
+  const padX = Math.max(px(cs.paddingLeft), px(cs.paddingRight));
+  return {
+    radius: radius || "10px",
+    padding: `${padY}px ${padX}px`,
+    fontFamily: cs.fontFamily || "",
+    fontSize: cs.fontSize || "",
+    fontWeight: cs.fontWeight || "",
+    letterSpacing: cs.letterSpacing || "",
+    textTransform: cs.textTransform || ""
+  };
 }
 var mounted = /* @__PURE__ */ new Map();
 function findTemplateSection(id) {
@@ -2791,7 +2831,7 @@ function applyAiSectionsToDom(state, options) {
   if (typeof document === "undefined") return;
   const brandOverride = deriveBrandOverride();
   const templateBrand = deriveTemplateBrand();
-  const templateButtonRadius = deriveTemplateButtonRadius();
+  const templateButtonStyle = deriveTemplateButtonStyle();
   const brandKey = brandOverride ? JSON.stringify(brandOverride) : "";
   const pagePath = window.location.pathname;
   const pageSections = state.sections.filter((entry) => (entry.path ?? "/") === pagePath);
@@ -2831,7 +2871,7 @@ function applyAiSectionsToDom(state, options) {
           {
             tree: entry.tree,
             brand: brandOverride ?? entry.brand ?? options?.brand ?? templateBrand ?? void 0,
-            buttonRadius: templateButtonRadius,
+            buttonStyle: templateButtonStyle,
             resolveMedia,
             editKeyPrefix: `ai.${entry.id}`
           }