@ohhwells/bridge 0.1.122 → 0.1.123

package/dist/index.cjs

@@ -104,6 +104,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: {
@@ -363,6 +367,118 @@ 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_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_SIZE_SCALE = { s: 0.85, m: 1, l: 1.25 };
+var roundHalf = (n) => Math.round(n * 2) / 2;
+function measureTemplateButton(variant) {
+  const root = document.documentElement;
+  const el = document.querySelector(`.btn--${variant}, .btn-${variant}`);
+  if (!el) return null;
+  const sheet = document.getElementById(BUTTON_RULES_STYLE_ID);
+  const rules = sheet?.textContent ?? "";
+  const saved = BUTTON_VAR_NAMES.map((name) => [name, root.style.getPropertyValue(name)]);
+  if (sheet) sheet.textContent = "";
+  for (const [name] of saved) root.style.removeProperty(name);
+  const cs = getComputedStyle(el);
+  const base = {
+    fontSize: parseFloat(cs.fontSize),
+    top: parseFloat(cs.paddingTop),
+    right: parseFloat(cs.paddingRight),
+    bottom: parseFloat(cs.paddingBottom),
+    left: parseFloat(cs.paddingLeft)
+  };
+  if (sheet) sheet.textContent = rules;
+  for (const [name, value] of saved) if (value) root.style.setProperty(name, value);
+  return Object.values(base).every(Number.isFinite) && base.fontSize > 0 ? base : null;
+}
+function scaledButtonSize(size, base) {
+  if (!base) return BUTTON_SIZE_SPEC[size];
+  const k = BUTTON_SIZE_SCALE[size];
+  const px2 = (n) => `${roundHalf(n * k)}px`;
+  return {
+    // Each side scaled on its own, so a button with uneven padding (say, room for an icon on one
+    // side) keeps its shape; the x/y vars are the averages for templates that read those instead.
+    padding: `${px2(base.top)} ${px2(base.right)} ${px2(base.bottom)} ${px2(base.left)}`,
+    paddingX: px2((base.left + base.right) / 2),
+    paddingY: px2((base.top + base.bottom) / 2),
+    fontSize: `${roundHalf(base.fontSize * k)}px`
+  };
+}
+var BUTTON_VAR_ROLES = ["bg", "text", "border", "radius", "padding-x", "padding-y", "padding", "font-size"];
+var BUTTON_VAR_NAMES = ["primary", "secondary"].flatMap(
+  (variant) => BUTTON_VAR_ROLES.map((role) => `--brand-button-${variant}-${role}`)
+);
+var ROLES_BY_FIELD = {
+  fill: ["bg"],
+  style: ["bg", "border"],
+  textColor: ["text"],
+  radius: ["radius"],
+  size: ["padding-x", "padding-y", "padding", "font-size"]
+};
+function touchedButtonRoles(variant, kit) {
+  if (!kit.touched) return new Set(BUTTON_VAR_ROLES);
+  const fields = kit.touched.buttons?.[variant] ?? [];
+  const outline = fields.includes("style") && kit.buttons?.[variant]?.style === "outline";
+  return new Set(
+    fields.flatMap((f) => {
+      if (outline && (f === "fill" || f === "style")) return ["border"];
+      return ROLES_BY_FIELD[f] ?? [];
+    })
+  );
+}
+function buttonPalette(kit) {
+  return kit.palette ?? {
+    dark: "var(--brand-text)",
+    primary: "var(--brand-primary)",
+    accent: "var(--brand-accent)",
+    light: "var(--brand-background)"
+  };
+}
+function buttonVariantVars(variant, style, roles, palette) {
+  const fill = palette[style.fill];
+  const text = palette[style.textColor];
+  const size = scaledButtonSize(style.size, roles.has("font-size") ? measureTemplateButton(variant) : null);
+  const { bg, border } = !roles.has("border") ? { bg: fill, border: "transparent" } : style.style === "outline" ? { bg: "transparent", border: fill } : style.style === "ghost" ? { bg: "transparent", border: "transparent" } : { bg: fill, border: "transparent" };
+  const all = {
+    [`--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,
+    ...size.padding ? { [`--brand-button-${variant}-padding`]: size.padding } : {},
+    [`--brand-button-${variant}-font-size`]: size.fontSize
+  };
+  const prefix = `--brand-button-${variant}-`;
+  return Object.fromEntries(Object.entries(all).filter(([name]) => roles.has(name.slice(prefix.length))));
+}
+function buttonStyleVars(kit) {
+  return {
+    ...buttonVariantVars("primary", kit.buttons.primary, touchedButtonRoles("primary", kit), buttonPalette(kit)),
+    ...buttonVariantVars("secondary", kit.buttons.secondary, touchedButtonRoles("secondary", kit), buttonPalette(kit))
+  };
+}
 function brandColorVars(palette) {
   const { dark, primary, accent, light } = palette;
   const mix = (a, aPct, b) => `color-mix(in srgb, ${a} ${aPct}%, ${b})`;
@@ -390,6 +506,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;
@@ -409,6 +530,15 @@ function parseCustomFont(raw) {
   if (weights.length === 0) return null;
   return { family: f.family, label: f.label, weights };
 }
+var BUTTON_FIELDS = Object.keys(ROLES_BY_FIELD);
+function parseTouchedButtons(raw) {
+  const out = {};
+  for (const variant of ["primary", "secondary"]) {
+    const list = raw?.[variant];
+    if (Array.isArray(list)) out[variant] = BUTTON_FIELDS.filter((f) => list.includes(f));
+  }
+  return out;
+}
 function parseBrandKit(raw) {
   if (!raw) return null;
   try {
@@ -418,11 +548,21 @@ 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 } : {},
+      ...parsed.touched && typeof parsed.touched === "object" ? {
+        touched: {
+          palette: parsed.touched.palette === true,
+          fonts: parsed.touched.fonts === true,
+          buttons: parseTouchedButtons(parsed.touched.buttons)
+        }
+      } : {}
     };
   } catch {
     return null;
@@ -451,6 +591,39 @@ function loadBrandFonts(families) {
   }
   if (link.href !== href) link.href = href;
 }
+var BUTTON_RULES_STYLE_ID = "ohw-brand-button-rules";
+function buttonRulesCss(kit) {
+  const rule = (variant) => {
+    const roles = touchedButtonRoles(variant, kit);
+    const v = (role) => `var(--brand-button-${variant}-${role})`;
+    const decls = [];
+    if (roles.has("bg")) decls.push(`background:${v("bg")} !important`);
+    if (roles.has("text")) decls.push(`color:${v("text")} !important`);
+    if (roles.has("border")) decls.push(`border:1.5px solid ${v("border")} !important`);
+    if (roles.has("radius")) decls.push(`border-radius:${v("radius")} !important`);
+    if (roles.has("padding-x")) decls.push(`padding:var(--brand-button-${variant}-padding, ${v("padding-y")} ${v("padding-x")}) !important`);
+    if (roles.has("font-size")) decls.push(`font-size:${v("font-size")} !important`);
+    if (decls.length === 0) return "";
+    const selectors = [`html .btn--${variant}`, `html .btn-${variant}`];
+    const labelRule = roles.has("text") ? `${selectors.map((x) => `${x} *`).join(",")}{color:inherit !important}` : "";
+    return `${selectors.join(",")}{${decls.join(";")}}` + labelRule + (roles.has("bg") ? `${selectors.map((x) => `${x}:hover`).join(",")}{opacity:0.88}` : "");
+  };
+  return rule("primary") + rule("secondary");
+}
+function syncButtonRules(kit) {
+  let el = document.getElementById(BUTTON_RULES_STYLE_ID);
+  const css = kit ? buttonRulesCss(kit) : "";
+  if (!css) {
+    el?.remove();
+    return;
+  }
+  if (!el) {
+    el = document.createElement("style");
+    el.id = BUTTON_RULES_STYLE_ID;
+    document.head.appendChild(el);
+  }
+  if (el.textContent !== css) el.textContent = css;
+}
 function escapeCssString(value) {
   return value.replace(/\\/g, "\\\\").replace(/'/g, "\\'");
 }
@@ -476,28 +649,47 @@ 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();
+    syncButtonRules(null);
     return;
   }
+  const applyPalette = kit.touched ? kit.touched.palette === true : true;
+  const applyFonts = kit.touched ? kit.touched.fonts === true : true;
   if (kit.palette) {
-    for (const [name, value] of Object.entries(brandColorVars(kit.palette))) root.style.setProperty(name, value);
+    if (applyPalette) {
+      for (const [name, value] of Object.entries(brandColorVars(kit.palette))) root.style.setProperty(name, value);
+    } else {
+      for (const name of [...BRAND_VAR_NAMES, ...LEGACY_BRAND_VAR_NAMES]) root.style.removeProperty(name);
+    }
   }
+  if (kit.buttons) {
+    for (const name of BUTTON_VAR_NAMES) root.style.removeProperty(name);
+    for (const [name, value] of Object.entries(buttonStyleVars({ ...kit, buttons: kit.buttons }))) root.style.setProperty(name, value);
+  }
+  syncButtonRules(kit.buttons ? kit : null);
   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);
+    if (applyFonts) {
+      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);
+    } else {
+      for (const name of [...FONT_VARS.heading, ...FONT_VARS.body]) root.style.removeProperty(name);
+      document.getElementById(BRAND_FONT_LINK_ID)?.remove();
+    }
   }
 }
 
@@ -647,7 +839,6 @@ var NODE_PROPS = [
   "color",
   "font-family",
   "font-size",
-  "background",
   "text-align",
   "justify-content",
   "align-items"
@@ -697,9 +888,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;
@@ -817,18 +1005,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)) {
@@ -1414,7 +1590,59 @@ var AI_MOBILE_CSS = [
   "[data-ai-grid]{grid-template-columns:repeat(2, 1fr) !important}",
   "}"
 ].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 {
@@ -1610,12 +1838,16 @@ function ButtonEl({
   secondaryColor
 }) {
   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)(
     "a",
     {
       href: href || void 0,
+      className: `btn btn--${variant}`,
+      "data-ohw-btn-variant": variant,
       ...linkAttrs,
       style: {
         display: fullWidth ? "flex" : "inline-flex",
@@ -1625,13 +1857,13 @@ function ButtonEl({
         textDecoration: "none",
         cursor: "pointer",
         whiteSpace: "nowrap",
-        ...buttonShellStyle(ctx, fullWidth),
-        ...secondary ? { border: `1px solid ${secondaryColor ?? ctx.brand.palette.dark}`, color: secondaryColor ?? ctx.brand.palette.dark } : (
+        ...buttonShellStyle(ctx, variant, fullWidth),
+        ...tokenColorStyle ?? (secondary ? { border: `1px solid ${secondaryColor ?? ctx.brand.palette.dark}`, color: secondaryColor ?? 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) })
     }
@@ -2853,18 +3085,21 @@ function renderNode(node, ctx, path) {
                   "button",
                   {
                     type: "submit",
+                    className: "btn btn--primary",
+                    "data-ohw-btn-variant": "primary",
+                    "data-ohw-role": "button",
                     style: {
                       alignSelf: submitAlign,
                       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) })
                   },
@@ -16842,6 +17077,9 @@ function guardTemplateHover(el) {
   observer.observe(el, { attributes: true, attributeFilter: ["style", "class"] });
   paintObserverByEl.set(el, observer);
 }
+function paintedTokensOf(el) {
+  return paintLockByEl.get(el)?.tokens ?? null;
+}
 function applyButtonStyle(el, assignment, tokens) {
   paintLockByEl.set(el, { assignment, tokens });
   paintingButton = true;
@@ -17180,12 +17418,9 @@ function duplicateButton(source, content) {
   const label = buttonLabel(source);
   if (href) copy.setAttribute("href", href);
   const sourceAssignment = readAssignments(content)[sourceId] ?? assignmentFor(source, content, tokens);
-  const copyAssignment = {
-    variant: "secondary",
-    size: sourceAssignment.size
-  };
-  stampVariantClass(copy, "secondary");
-  applyButtonStyle(copy, copyAssignment, tokens);
+  const copyAssignment = { ...sourceAssignment };
+  stampVariantClass(copy, copyAssignment.variant);
+  applyButtonStyle(copy, copyAssignment, paintedTokensOf(source) ?? tokens);
   const copyLabelEl = labelElement2(copy);
   if (copyLabelEl) copyLabelEl.textContent = label;
   let collection = buttonCollectionOf(source);
@@ -26636,7 +26871,7 @@ function OhhwellsBridge() {
       postToParent2({
         type: "ow:ready",
         version: "1",
-        bridgeVersion: "0.1.121",
+        bridgeVersion: "0.1.122",
         path: pathname,
         nodes: collectEditableNodes(editContentRef.current),
         sections