@ohhwells/bridge 0.1.71-next.218 → 0.1.72-next.225

package/dist/index.cjs

@@ -533,6 +533,24 @@ var featureLines = (value) => value.split(/\n|<br\s*\/?>/i).map((line) => line.t
 var CHECK_MASK = `data:image/svg+xml,${encodeURIComponent(
   '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>'
 )}`;
+var AI_MOBILE_CSS = [
+  "@media (max-width: 768px){",
+  "[data-ai-section]{overflow-x:hidden}",
+  "[data-ai-container]{padding:0 20px !important}",
+  "[data-ai-row]{display:flex !important;flex-direction:column !important;align-items:stretch !important}",
+  "[data-ai-cell]{width:100%;min-width:0}",
+  "[data-ai-grid]{grid-template-columns:1fr !important}",
+  // 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){",
+  "[data-ai-grid]{grid-template-columns:repeat(2, 1fr) !important}",
+  "}"
+].join("");
 var FEATURE_LINE_CSS = [
   "[data-ai-features]>div{position:relative;padding-left:40px;min-height:24px}",
   '[data-ai-features]>div::before{content:"";position:absolute;left:0;top:1px;width:24px;height:24px;',
@@ -1651,63 +1669,84 @@ function renderNode(node, ctx, path) {
         outline: "none",
         ...typeStyle(AI_TREE_TOKENS.type.bodyM, ctx.brand.fonts.body)
       };
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("form", { ...formAttrs, style: { display: "flex", flexDirection: "column", gap: 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}`;
-          return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "label",
+      const labelStyle = {
+        ...typeStyle(AI_TREE_TOKENS.type.bodyMBold, ctx.brand.fonts.body),
+        color: ctx.brand.palette.dark
+      };
+      return /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: 8,
+                    ...isTextarea ? { gridColumn: "1 / -1", maxWidth: 780 } : {}
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { ...textAttrs(ctx, `${path}.c${i}.label`), style: labelStyle, children: label }),
+                    isTextarea ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "textarea",
+                      {
+                        name,
+                        placeholder,
+                        style: { ...fieldStyle, height: 140, resize: "vertical" }
+                      }
+                    ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "input",
+                      {
+                        name,
+                        type: kind === "email" ? "email" : "text",
+                        placeholder,
+                        style: { ...fieldStyle, height: 48 }
+                      }
+                    )
+                  ]
+                },
+                i
+              );
+            }
+            const cs = child.slots ?? {};
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
               {
-                ...textAttrs(ctx, `${path}.c${i}.label`),
+                type: "submit",
                 style: {
-                  ...typeStyle(AI_TREE_TOKENS.type.bodyMBold, ctx.brand.fonts.body),
-                  color: ctx.brand.palette.dark
+                  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: label
-              }
-            ),
-            kind === "textarea" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "textarea",
-              {
-                name,
-                placeholder,
-                style: { ...fieldStyle, height: 140, resize: "vertical" }
-              }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "input",
-              {
-                name,
-                type: kind === "email" ? "email" : "text",
-                placeholder,
-                style: { ...fieldStyle, height: 48 }
-              }
-            )
-          ] }, i);
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { ...textAttrs(ctx, `${path}.c${i}.label`), children: str(cs.label) })
+              },
+              i
+            );
+          })
         }
-        const cs = child.slots ?? {};
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "button",
-          {
-            type: "submit",
-            style: {
-              alignSelf: "flex-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__ */ (0, import_jsx_runtime.jsx)("span", { ...textAttrs(ctx, `${path}.c${i}.label`), children: str(cs.label) })
-          },
-          i
-        );
-      }) });
+      );
     }
     case "schedule-widget":
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -1780,6 +1819,7 @@ function AiTreeRenderer({ tree, brand, resolveMedia, editKeyPrefix }) {
       },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: AI_RESPONSIVE_CSS }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: AI_MOBILE_CSS }),
         isOverlay && backgroundUrl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { position: "absolute", inset: 0, background: `rgba(255,255,255,${overlayAlpha})` } }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "div",
@@ -17755,6 +17795,9 @@ function OhhwellsBridge() {
       if (typeof content[BRAND_KIT_KEY] === "string") {
         brandKitRef.current = content[BRAND_KIT_KEY];
         applyBrandToDom(parseBrandKit(content[BRAND_KIT_KEY]));
+      } else {
+        brandKitRef.current = "";
+        applyBrandToDom(null);
       }
       if (typeof content[AI_SECTIONS_KEY] === "string") {
         aiSectionsRef.current = content[AI_SECTIONS_KEY];
@@ -17958,6 +18001,8 @@ function OhhwellsBridge() {
         applyBrandChrome(content);
         if (typeof content[BRAND_KIT_KEY] === "string") {
           applyBrandToDom(parseBrandKit(content[BRAND_KIT_KEY]));
+        } else {
+          applyBrandToDom(null);
         }
         if (typeof content[AI_SECTIONS_KEY] === "string") {
           applyAiSectionsToDom(parseAiSectionsState(content[AI_SECTIONS_KEY]));
@@ -19848,6 +19893,9 @@ function OhhwellsBridge() {
       if (typeof content[BRAND_KIT_KEY] === "string") {
         brandKitRef.current = content[BRAND_KIT_KEY];
         applyBrandToDom(parseBrandKit(content[BRAND_KIT_KEY]));
+      } else {
+        brandKitRef.current = "";
+        applyBrandToDom(null);
       }
       if (typeof content[AI_SECTIONS_KEY] === "string") {
         aiSectionsRef.current = content[AI_SECTIONS_KEY];
@@ -21023,7 +21071,7 @@ function OhhwellsBridge() {
       postToParent2({
         type: "ow:ready",
         version: "1",
-        bridgeVersion: "0.1.71-next.218",
+        bridgeVersion: "0.1.72",
         path: pathname,
         nodes: collectEditableNodes(editContentRef.current),
         sections