@ohhwells/bridge 0.1.79 → 0.1.80

package/dist/index.d.cts

@@ -139,6 +139,8 @@ declare function isRenderableTree(value: unknown): value is AiLayoutTree;
 interface AiTreeRendererProps {
     tree: AiLayoutTree;
     brand?: AiBrandKit;
+    /** The host template's button corner radius (e.g. "0px", "8px"); a form's submit adopts it. */
+    buttonRadius?: string | null;
     /** Resolves a media ref to a URL; null renders a placeholder. */
     resolveMedia?: (ref: string) => string | null;
     /**
@@ -148,7 +150,7 @@ interface AiTreeRendererProps {
      */
     editKeyPrefix?: string;
 }
-declare function AiTreeRenderer({ tree, brand, resolveMedia, editKeyPrefix }: AiTreeRendererProps): react_jsx_runtime.JSX.Element | null;
+declare function AiTreeRenderer({ tree, brand, buttonRadius, resolveMedia, editKeyPrefix, }: AiTreeRendererProps): react_jsx_runtime.JSX.Element | null;
 
 type LinkPage = {
     path: string;

package/dist/index.d.ts

@@ -139,6 +139,8 @@ declare function isRenderableTree(value: unknown): value is AiLayoutTree;
 interface AiTreeRendererProps {
     tree: AiLayoutTree;
     brand?: AiBrandKit;
+    /** The host template's button corner radius (e.g. "0px", "8px"); a form's submit adopts it. */
+    buttonRadius?: string | null;
     /** Resolves a media ref to a URL; null renders a placeholder. */
     resolveMedia?: (ref: string) => string | null;
     /**
@@ -148,7 +150,7 @@ interface AiTreeRendererProps {
      */
     editKeyPrefix?: string;
 }
-declare function AiTreeRenderer({ tree, brand, resolveMedia, editKeyPrefix }: AiTreeRendererProps): react_jsx_runtime.JSX.Element | null;
+declare function AiTreeRenderer({ tree, brand, buttonRadius, resolveMedia, editKeyPrefix, }: AiTreeRendererProps): react_jsx_runtime.JSX.Element | null;
 
 type LinkPage = {
     path: string;

package/dist/index.js

@@ -469,8 +469,6 @@ var AI_MOBILE_CSS = [
   // Group containers flatten to a column on phones; span placements come along for free.
   "[data-ai-group]{display:flex !important;flex-direction:column !important}",
   "[data-ai-group] > *{grid-column:auto !important}",
-  // The 50:50 form collapses to a single stacked column on phones.
-  "[data-ai-form]{grid-template-columns:1fr !important}",
   "[data-ai-section] img{max-width:100%}",
   "}",
   "@media (min-width: 769px) and (max-width: 1024px){",
@@ -1567,9 +1565,9 @@ function renderNode(node, ctx, path) {
       const fieldStyle = {
         width: "100%",
         boxSizing: "border-box",
-        border: `1px solid ${ctx.brand.palette.accent}`,
-        borderRadius: AI_TREE_TOKENS.radiusButton,
-        padding: "12px 14px",
+        border: `1px solid color-mix(in srgb, ${ctx.brand.palette.dark} 45%, #ffffff)`,
+        borderRadius: 0,
+        padding: 12,
         background: "#fff",
         color: ctx.brand.palette.dark,
         outline: "none",
@@ -1577,81 +1575,90 @@ function renderNode(node, ctx, path) {
       };
       const labelStyle = {
         ...typeStyle(AI_TREE_TOKENS.type.bodyMBold, ctx.brand.fonts.body),
-        color: ctx.brand.palette.dark
+        color: ctx.brand.palette.dark,
+        textAlign: "left",
+        width: "100%"
       };
-      return /* @__PURE__ */ jsx(
-        "form",
-        {
-          ...formAttrs,
-          "data-ai-form": "",
-          style: {
-            display: "grid",
-            gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
-            columnGap: 64,
-            rowGap: AI_TREE_TOKENS.spacing4
-          },
-          children: (node.children ?? []).map((child, i) => {
-            if (child.type === "input") {
-              const cs2 = child.slots ?? {};
-              const kind = str(cs2.kind);
-              const label = str(cs2.label);
-              const placeholder = str(cs2.placeholder);
-              const name = label.toLowerCase().replace(/[^a-z0-9]+/gu, "-").replace(/^-+|-+$/gu, "") || `field-${i}`;
-              const isTextarea = kind === "textarea";
-              return /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  style: {
-                    display: "flex",
-                    flexDirection: "column",
-                    gap: 8,
-                    ...isTextarea ? { gridColumn: "1 / -1", maxWidth: 780 } : {}
+      const centered = ctx.sectionAlignment === "center";
+      const submitAlign = centered ? "center" : "flex-start";
+      const children = node.children ?? [];
+      return (
+        // 32px between the field group and the submit. In a stacked (centered) section the form is
+        // capped at 780px and centered — the section's 12-col grid would otherwise leave it hugging
+        // the left edge; a split section lets it fill its own column.
+        /* @__PURE__ */ jsxs(
+          "form",
+          {
+            ...formAttrs,
+            "data-ai-form": "",
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              gap: 32,
+              width: "100%",
+              ...centered ? { maxWidth: 780, marginLeft: "auto", marginRight: "auto" } : {}
+            },
+            children: [
+              /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: 24, width: "100%", alignItems: "flex-start" }, children: children.map((child, i) => {
+                if (child.type !== "input") return null;
+                const cs = child.slots ?? {};
+                const kind = str(cs.kind);
+                const label = str(cs.label);
+                const placeholder = str(cs.placeholder);
+                const required = cs.required === true;
+                const name = label.toLowerCase().replace(/[^a-z0-9]+/gu, "-").replace(/^-+|-+$/gu, "") || `field-${i}`;
+                const isTextarea = kind === "textarea";
+                return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8, width: "100%" }, children: [
+                  /* @__PURE__ */ jsx("label", { ...textAttrs(ctx, `${path}.c${i}.label`), style: labelStyle, children: label }),
+                  isTextarea ? /* @__PURE__ */ jsx(
+                    "textarea",
+                    {
+                      name,
+                      placeholder,
+                      required,
+                      style: { ...fieldStyle, height: 180, resize: "vertical" }
+                    }
+                  ) : /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      name,
+                      type: kind === "email" ? "email" : "text",
+                      placeholder,
+                      required,
+                      style: { ...fieldStyle, height: 48 }
+                    }
+                  )
+                ] }, i);
+              }) }),
+              children.map((child, i) => {
+                if (child.type === "input") return null;
+                const cs = child.slots ?? {};
+                return /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "submit",
+                    style: {
+                      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,
+                      // 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)
+                    },
+                    children: /* @__PURE__ */ jsx("span", { ...textAttrs(ctx, `${path}.c${i}.label`), children: str(cs.label) })
                   },
-                  children: [
-                    /* @__PURE__ */ jsx("label", { ...textAttrs(ctx, `${path}.c${i}.label`), style: labelStyle, children: label }),
-                    isTextarea ? /* @__PURE__ */ jsx(
-                      "textarea",
-                      {
-                        name,
-                        placeholder,
-                        style: { ...fieldStyle, height: 140, resize: "vertical" }
-                      }
-                    ) : /* @__PURE__ */ jsx(
-                      "input",
-                      {
-                        name,
-                        type: kind === "email" ? "email" : "text",
-                        placeholder,
-                        style: { ...fieldStyle, height: 48 }
-                      }
-                    )
-                  ]
-                },
-                i
-              );
-            }
-            const cs = child.slots ?? {};
-            return /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "submit",
-                style: {
-                  gridColumn: "1 / -1",
-                  justifySelf: "start",
-                  border: "none",
-                  cursor: "pointer",
-                  padding: `${AI_TREE_TOKENS.spacing3}px ${AI_TREE_TOKENS.spacing6}px`,
-                  borderRadius: AI_TREE_TOKENS.radiusButton,
-                  background: ctx.brand.palette.primary,
-                  color: AI_TREE_TOKENS.textPrimaryForeground,
-                  ...typeStyle(AI_TREE_TOKENS.type.button, ctx.brand.fonts.body)
-                },
-                children: /* @__PURE__ */ jsx("span", { ...textAttrs(ctx, `${path}.c${i}.label`), children: str(cs.label) })
-              },
-              i
-            );
-          })
-        }
+                  i
+                );
+              })
+            ]
+          }
+        )
       );
     }
     case "schedule-widget":
@@ -1674,7 +1681,13 @@ function renderNode(node, ctx, path) {
       return null;
   }
 }
-function AiTreeRenderer({ tree, brand, resolveMedia, editKeyPrefix }) {
+function AiTreeRenderer({
+  tree,
+  brand,
+  buttonRadius,
+  resolveMedia,
+  editKeyPrefix
+}) {
   if (!isRenderableTree(tree)) {
     return null;
   }
@@ -1686,6 +1699,8 @@ function AiTreeRenderer({ tree, brand, resolveMedia, editKeyPrefix }) {
     resolveMedia: resolveMedia ?? (() => null),
     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,
     ...band ? { buttonLabel: band.buttonLabel } : {}
   };
   const settings = tree.settings ?? {};
@@ -1815,6 +1830,13 @@ function deriveTemplateBrand() {
     }
   };
 }
+function deriveTemplateButtonRadius() {
+  if (typeof document === "undefined") return null;
+  const btn = document.querySelector('[data-ohw-role="button"]');
+  if (!btn) return null;
+  const radius = getComputedStyle(btn).borderTopLeftRadius;
+  return radius || null;
+}
 var mounted = /* @__PURE__ */ new Map();
 function findTemplateSection(id) {
   for (const el of document.querySelectorAll(`[data-ohw-section="${CSS.escape(id)}"]`)) {
@@ -1966,6 +1988,7 @@ function applyAiSectionsToDom(state, options) {
   if (typeof document === "undefined") return;
   const brandOverride = deriveBrandOverride();
   const templateBrand = deriveTemplateBrand();
+  const templateButtonRadius = deriveTemplateButtonRadius();
   const brandKey = brandOverride ? JSON.stringify(brandOverride) : "";
   const pagePath = window.location.pathname;
   const pageSections = state.sections.filter((entry) => (entry.path ?? "/") === pagePath);
@@ -2005,6 +2028,7 @@ function applyAiSectionsToDom(state, options) {
           {
             tree: entry.tree,
             brand: brandOverride ?? entry.brand ?? options?.brand ?? templateBrand ?? void 0,
+            buttonRadius: templateButtonRadius,
             resolveMedia,
             editKeyPrefix: `ai.${entry.id}`
           }
@@ -20996,7 +21020,7 @@ function OhhwellsBridge() {
       postToParent2({
         type: "ow:ready",
         version: "1",
-        bridgeVersion: "0.1.78",
+        bridgeVersion: "0.1.79",
         path: pathname,
         nodes: collectEditableNodes(editContentRef.current),
         sections