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

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) })
                   },