@ohhwells/bridge 0.1.114-next.307 → 0.1.114-next.309

package/dist/index.cjs

@@ -15346,6 +15346,30 @@ function relativeLuminance(color) {
   };
   return 0.2126 * channel(color.r) + 0.7152 * channel(color.g) + 0.0722 * channel(color.b);
 }
+function contrastRatio(a, b) {
+  const lighter = Math.max(relativeLuminance(a), relativeLuminance(b));
+  const darker = Math.min(relativeLuminance(a), relativeLuminance(b));
+  return (lighter + 0.05) / (darker + 0.05);
+}
+function compositeOver(fg, bg) {
+  const a = fg.a + bg.a * (1 - fg.a);
+  if (a < 1e-3) return { ...bg, a: 0 };
+  return {
+    r: (fg.r * fg.a + bg.r * bg.a * (1 - fg.a)) / a,
+    g: (fg.g * fg.a + bg.g * bg.a * (1 - fg.a)) / a,
+    b: (fg.b * fg.a + bg.b * bg.a * (1 - fg.a)) / a,
+    a
+  };
+}
+function previewSlotForChrome(chrome, slotBackground) {
+  const text = parseColor(chrome.color);
+  if (!text || text.a < 0.2) return slotBackground;
+  const slot = parseColor(slotBackground) ?? { r: 250, g: 250, b: 249, a: 1 };
+  const fill = parseColor(chrome.background);
+  const effective = fill && !isTransparent(fill) ? compositeOver(fill, slot) : slot;
+  if (contrastRatio(text, effective) >= 3) return slotBackground;
+  return relativeLuminance(text) > 0.55 ? "#2c2c2c" : "#f4f4f5";
+}
 function parseColor(input) {
   if (!input) return null;
   const value = input.trim().toLowerCase();
@@ -15422,10 +15446,10 @@ function declaredVariant(className) {
   return match && isButtonVariantId(match[1]) ? match[1] : null;
 }
 function fillSlot(sample) {
-  if (hasOpaqueBackground(sample.background)) return "primary";
   const width = parseFloat(sample.borderWidth);
   const border = parseColor(sample.borderColor);
   if (width > 0 && !isTransparent(border)) return "secondary";
+  if (hasOpaqueBackground(sample.background)) return "primary";
   return "ghost";
 }
 function sampleSlot(sample) {
@@ -15449,6 +15473,15 @@ function paintColor(chrome) {
   const text = parseColor(chrome.color);
   return text ? toCss({ ...text, a: 1 }) : chrome.color;
 }
+function accentColor(chrome) {
+  const bg = parseColor(chrome.background);
+  if (bg && !isTransparent(bg) && relativeLuminance(bg) < 0.55) {
+    return toCss({ ...bg, a: 1 });
+  }
+  const text = parseColor(chrome.color);
+  if (text && !isTransparent(text)) return toCss({ ...text, a: 1 });
+  return paintColor(chrome);
+}
 function chromeFrom(sample) {
   return {
     background: sample.background || TRANSPARENT,
@@ -15468,7 +15501,7 @@ function filledPrimary(seed) {
   };
 }
 function generatedSecondary(primary) {
-  const paint = paintColor(primary);
+  const paint = accentColor(primary);
   return {
     background: TRANSPARENT,
     color: paint,
@@ -15479,13 +15512,13 @@ function generatedSecondary(primary) {
 function generatedGhost(primary) {
   return {
     background: TRANSPARENT,
-    color: paintColor(primary),
+    color: accentColor(primary),
     borderColor: TRANSPARENT,
     borderWidth: "0px"
   };
 }
 function normalizeOutlineChrome(outline, primary) {
-  const paint = paintColor(primary);
+  const paint = accentColor(primary);
   const text = parseColor(outline.color);
   const paintRgb = parseColor(paint);
   const primaryLabel = parseColor(primary.color);
@@ -15721,36 +15754,49 @@ function readSizeSample(el) {
     gap: parsePx(style.columnGap || style.gap, rootFont)
   };
 }
+function readTypography(el) {
+  const style = getComputedStyle(el);
+  return {
+    fontFamily: style.fontFamily,
+    fontWeight: style.fontWeight,
+    letterSpacing: style.letterSpacing,
+    textTransform: style.textTransform,
+    textDecoration: style.textDecorationLine || style.textDecoration || "none"
+  };
+}
 var buttonOriginByEl = /* @__PURE__ */ new WeakMap();
-function hasEditorPaint(el) {
-  return el.hasAttribute("data-ohw-btn-variant") || el.hasAttribute("data-ohw-btn-size") || Boolean(el.style.background || el.style.padding || el.style.height);
+var ORIGIN_ATTR = "data-ohw-btn-origin";
+function parseOriginAttr(raw) {
+  if (!raw) return null;
+  try {
+    const value = JSON.parse(raw);
+    if (!value?.variant || !value.size || !value.typography) return null;
+    return value;
+  } catch {
+    return null;
+  }
 }
-function measureSourceOrigin(el) {
-  const parent = el.parentElement;
-  if (!parent) {
-    return { variant: readVariantSample(el), size: readSizeSample(el) };
-  }
-  const probe = el.cloneNode(true);
-  probe.removeAttribute("style");
-  probe.removeAttribute("data-ohw-btn-variant");
-  probe.removeAttribute("data-ohw-btn-size");
-  probe.removeAttribute("data-ohw-selected");
-  probe.setAttribute("data-ohw-btn-probe", "");
-  for (const node of probe.querySelectorAll("[style]")) {
-    node.removeAttribute("style");
-  }
-  probe.style.cssText = "position:absolute;left:-99999px;top:0;visibility:hidden;pointer-events:none;display:inline-flex;";
-  parent.insertBefore(probe, el);
-  void probe.offsetHeight;
-  const origin = { variant: readVariantSample(probe), size: readSizeSample(probe) };
-  probe.remove();
-  return origin;
+function measureLiveOrigin(el) {
+  return {
+    variant: readVariantSample(el),
+    size: readSizeSample(el),
+    typography: readTypography(el)
+  };
 }
 function captureButtonOrigin(el) {
   const cached = buttonOriginByEl.get(el);
   if (cached) return cached;
-  const origin = hasEditorPaint(el) ? measureSourceOrigin(el) : { variant: readVariantSample(el), size: readSizeSample(el) };
+  const fromAttr = parseOriginAttr(el.getAttribute(ORIGIN_ATTR));
+  if (fromAttr) {
+    buttonOriginByEl.set(el, fromAttr);
+    return fromAttr;
+  }
+  const origin = measureLiveOrigin(el);
   buttonOriginByEl.set(el, origin);
+  try {
+    el.setAttribute(ORIGIN_ATTR, JSON.stringify(origin));
+  } catch {
+  }
   return origin;
 }
 function listStyleButtons(doc) {
@@ -15846,9 +15892,11 @@ function labelElement(el) {
   return el.querySelector('[data-ohw-editable="text"], [data-ohw-editable="plain"]') ?? (el.matches('[data-ohw-editable="text"], [data-ohw-editable="plain"]') ? el : null);
 }
 function applyButtonStyle(el, assignment, tokens) {
-  captureButtonOrigin(el);
+  const origin = captureButtonOrigin(el);
   const chrome = tokens.variants[assignment.variant];
-  const geometry = tokens.sizes[assignment.size];
+  const originSlot = classifyHeight(origin.size.height);
+  const geometry = assignment.size === originSlot ? geometryFromSample({ ...origin.size, borderRadius: origin.size.borderRadius, gap: origin.size.gap }) : tokens.sizes[assignment.size];
+  const { typography } = origin;
   el.setAttribute("data-ohw-btn-variant", assignment.variant);
   el.setAttribute("data-ohw-btn-size", assignment.size);
   el.style.boxSizing = "border-box";
@@ -15862,9 +15910,18 @@ function applyButtonStyle(el, assignment, tokens) {
   el.style.borderWidth = chrome.borderWidth;
   el.style.padding = `${geometry.paddingTop} ${geometry.paddingRight} ${geometry.paddingBottom} ${geometry.paddingLeft}`;
   el.style.fontSize = geometry.fontSize;
-  el.style.borderRadius = geometry.borderRadius;
+  el.style.borderRadius = px(origin.size.borderRadius);
   el.style.gap = geometry.gap;
   el.style.height = px(geometry.height);
+  el.style.fontFamily = typography.fontFamily;
+  el.style.fontWeight = typography.fontWeight;
+  el.style.letterSpacing = typography.letterSpacing;
+  el.style.textTransform = typography.textTransform;
+  if (typography.textDecoration && typography.textDecoration !== "none") {
+    el.style.textDecoration = typography.textDecoration;
+  } else {
+    el.style.textDecoration = "none";
+  }
   const label = labelElement(el);
   if (label && label !== el) label.style.color = chrome.color;
 }
@@ -15902,6 +15959,7 @@ function ButtonStylePanel({
         const chrome = variants[id];
         const selected = id === variant;
         const hasBorder = parseFloat(chrome.borderWidth) > 0;
+        const cardSlot = previewSlotForChrome(chrome, slotBackground);
         return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
           "button",
           {
@@ -15922,7 +15980,7 @@ function ButtonStylePanel({
                 "div",
                 {
                   className: "flex w-full items-center justify-center py-5",
-                  style: { background: slotBackground },
+                  style: { background: cardSlot },
                   children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                     "span",
                     {
@@ -17621,7 +17679,14 @@ function collectEditableNodes(extraContent, root = document) {
       // so collecting the DOM alone left them behind: the draft knew the row was showing icons and
       // had gained an item, and the published page went back to the template's own (OHH-736).
       SOCIALS_ORDER_KEY,
-      SOCIALS_DISPLAY_KEY
+      SOCIALS_DISPLAY_KEY,
+      // Button variant/size tokens and per-CTA assignments — JSON in editContent, applied on hydrate.
+      BUTTON_VARIANTS_KEY,
+      BUTTON_SIZES_KEY,
+      BUTTON_ASSIGNMENTS_KEY,
+      BUTTON_COLLECTIONS_KEY,
+      BUTTON_SNAPSHOTS_KEY,
+      BUTTON_HIDDEN_KEY
     ]) {
       const text = extraContent[key];
       if (typeof text === "string" && text.length > 0) {