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

package/dist/index.cjs

@@ -837,6 +837,22 @@ function getPageSectionOrderEntries(raw, currentPath) {
     return [];
   }
 }
+function mergePageSectionOrder(raw, currentPath, pageEntries) {
+  let all = [];
+  if (raw) {
+    try {
+      const parsed = JSON.parse(raw);
+      if (Array.isArray(parsed)) all = parsed;
+    } catch {
+    }
+  }
+  const otherPages = all.filter((e) => e && e.pagePath && e.pagePath !== currentPath);
+  const pageIds = new Set(pageEntries.map((e) => e.instanceId));
+  const removedHere = all.filter(
+    (e) => e && (!e.pagePath || e.pagePath === currentPath) && e.removed && !pageIds.has(e.instanceId)
+  );
+  return [...otherPages, ...removedHere, ...pageEntries];
+}
 function rekeySectionSubtree(root, instanceId) {
   const suffix = `::${instanceId}`;
   const pairs = [];
@@ -1195,6 +1211,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 +1246,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 +1371,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 +2444,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 +2484,7 @@ function renderNode(node, ctx, path) {
 function AiTreeRenderer({
   tree,
   brand,
-  buttonRadius,
+  buttonStyle,
   resolveMedia,
   editKeyPrefix
 }) {
@@ -2469,7 +2505,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 +2637,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 +2652,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 +2847,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 +2887,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}`
           }
@@ -14597,7 +14653,9 @@ function useSectionDrag({
       clearSectionDragVisuals();
       return;
     }
-    const orderJson = JSON.stringify(entries);
+    const orderJson = JSON.stringify(
+      mergePageSectionOrder(editContentRef.current[SECTION_ORDER_KEY], window.location.pathname, entries)
+    );
     editContentRef.current = { ...editContentRef.current, [SECTION_ORDER_KEY]: orderJson };
     setAiSectionOrder(orderJson, window.location.pathname);
     postToParentRef.current({ type: "ow:change", nodes: [{ key: SECTION_ORDER_KEY, text: orderJson }] });
@@ -20899,7 +20957,9 @@ function OhhwellsBridge() {
       if (!instanceId || !direction) return;
       const entries = moveSectionInstance(instanceId, direction, window.location.pathname);
       if (!entries) return;
-      const orderJson = JSON.stringify(entries);
+      const orderJson = JSON.stringify(
+        mergePageSectionOrder(editContentRef.current[SECTION_ORDER_KEY], window.location.pathname, entries)
+      );
       editContentRef.current = { ...editContentRef.current, [SECTION_ORDER_KEY]: orderJson };
       setAiSectionOrder(orderJson, window.location.pathname);
       postToParentRef.current({ type: "ow:change", nodes: [{ key: SECTION_ORDER_KEY, text: orderJson }] });
@@ -20919,7 +20979,9 @@ function OhhwellsBridge() {
       const currentEntries = getPageSectionOrderEntries(editContentRef.current[SECTION_ORDER_KEY], window.location.pathname);
       const entries = deleteSectionInstance(instanceId, window.location.pathname, currentEntries);
       if (!entries) return;
-      const orderJson = JSON.stringify(entries);
+      const orderJson = JSON.stringify(
+        mergePageSectionOrder(editContentRef.current[SECTION_ORDER_KEY], window.location.pathname, entries)
+      );
       editContentRef.current = { ...editContentRef.current, [SECTION_ORDER_KEY]: orderJson };
       setAiSectionOrder(orderJson, window.location.pathname);
       postToParentRef.current({ type: "ow:change", nodes: [{ key: SECTION_ORDER_KEY, text: orderJson }] });
@@ -20938,7 +21000,9 @@ function OhhwellsBridge() {
           );
           const restored = restoreSectionInstance(instanceId, window.location.pathname, restoredEntries);
           if (!restored) return;
-          const restoredJson = JSON.stringify(restored);
+          const restoredJson = JSON.stringify(
+            mergePageSectionOrder(editContentRef.current[SECTION_ORDER_KEY], window.location.pathname, restored)
+          );
           editContentRef.current = { ...editContentRef.current, [SECTION_ORDER_KEY]: restoredJson };
           setAiSectionOrder(restoredJson, window.location.pathname);
           postToParentRef.current({ type: "ow:change", nodes: [{ key: SECTION_ORDER_KEY, text: restoredJson }] });
@@ -20966,7 +21030,9 @@ function OhhwellsBridge() {
       const result = duplicateSectionInstance(instanceId, newId, window.location.pathname, currentEntries);
       if (!result) return;
       const { entries, keyRekeys } = result;
-      const orderJson = JSON.stringify(entries);
+      const orderJson = JSON.stringify(
+        mergePageSectionOrder(editContentRef.current[SECTION_ORDER_KEY], window.location.pathname, entries)
+      );
       const nodes = [{ key: SECTION_ORDER_KEY, text: orderJson }];
       for (const { from, to } of keyRekeys) {
         const inherited = editContentRef.current[from];