@ohhwells/bridge 0.1.70-next.215 → 0.1.71-next.216

package/dist/index.cjs

@@ -1293,13 +1293,44 @@ function AccordionBlock({ node, ctx, path }) {
     ) })
   ] }, i)) });
 }
+function useIsMobile() {
+  const [mobile, setMobile] = import_react.default.useState(
+    () => typeof window !== "undefined" && window.matchMedia("(max-width: 768px)").matches
+  );
+  import_react.default.useEffect(() => {
+    const mq = window.matchMedia("(max-width: 768px)");
+    const update = () => setMobile(mq.matches);
+    update();
+    mq.addEventListener("change", update);
+    return () => mq.removeEventListener("change", update);
+  }, []);
+  return mobile;
+}
 function Carousel({ items, itemsPerRow, ctx }) {
+  const isMobile = useIsMobile();
+  const perPage = isMobile ? 1 : itemsPerRow;
+  const pages = Math.max(1, Math.ceil(items.length / perPage));
   const [page, setPage] = import_react.default.useState(0);
-  const pages = Math.max(1, Math.ceil(items.length / itemsPerRow));
   const current = Math.min(page, pages - 1);
+  if (pages <= 1) {
+    const cols = Math.max(1, Math.min(items.length, itemsPerRow));
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        "data-ai-grid": String(cols),
+        style: {
+          display: "grid",
+          gridTemplateColumns: `repeat(${cols}, 1fr)`,
+          gap: AI_TREE_TOKENS.spacing8,
+          alignItems: "start"
+        },
+        children: items
+      }
+    );
+  }
   const pageGroups = Array.from(
     { length: pages },
-    (_, p) => items.slice(p * itemsPerRow, (p + 1) * itemsPerRow)
+    (_, p) => items.slice(p * perPage, (p + 1) * perPage)
   );
   const chrome = (enabled) => ({
     border: `1px solid ${ctx.brand.palette.dark}`,
@@ -1324,55 +1355,69 @@ function Carousel({ items, itemsPerRow, ctx }) {
     cursor: "pointer",
     padding: 0
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { "data-ai-carousel": "", style: { display: "flex", flexDirection: "column", gap: AI_TREE_TOKENS.spacing8, alignItems: "center" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: AI_TREE_TOKENS.spacing6, width: "100%" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "button",
-        {
-          type: "button",
-          "aria-label": "Previous",
-          onClick: () => setPage((p) => Math.max(0, p - 1)),
-          style: chrome(current > 0),
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ArrowLeft, { size: 24, strokeWidth: 1.5, "aria-hidden": true })
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { flex: 1, minWidth: 0, overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  const viewport = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { flex: isMobile ? "0 0 auto" : 1, minWidth: 0, width: "100%", overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      style: {
+        display: "flex",
+        transform: `translateX(-${current * 100}%)`,
+        transition: "transform 0.4s ease"
+      },
+      children: pageGroups.map((group, p) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "div",
         {
+          "data-ai-grid": String(perPage),
           style: {
-            display: "flex",
-            transform: `translateX(-${current * 100}%)`,
-            transition: "transform 0.4s ease"
+            flex: "0 0 100%",
+            display: "grid",
+            gridTemplateColumns: `repeat(${perPage}, 1fr)`,
+            gap: AI_TREE_TOKENS.spacing8,
+            alignItems: "start"
           },
-          children: pageGroups.map((group, p) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "div",
-            {
-              "data-ai-grid": String(itemsPerRow),
-              style: {
-                flex: "0 0 100%",
-                display: "grid",
-                gridTemplateColumns: `repeat(${itemsPerRow}, 1fr)`,
-                gap: AI_TREE_TOKENS.spacing8,
-                alignItems: "start"
-              },
-              children: group
-            },
-            p
-          ))
-        }
-      ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "button",
-        {
-          type: "button",
-          "aria-label": "Next",
-          onClick: () => setPage((p) => Math.min(pages - 1, p + 1)),
-          style: chrome(current < pages - 1),
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ArrowRight, { size: 24, strokeWidth: 1.5, "aria-hidden": true })
-        }
-      )
+          children: group
+        },
+        p
+      ))
+    }
+  ) });
+  const prevBtn = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "button",
+    {
+      type: "button",
+      "aria-label": "Previous",
+      onClick: () => setPage((p) => Math.max(0, p - 1)),
+      style: chrome(current > 0),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ArrowLeft, { size: 24, strokeWidth: 1.5, "aria-hidden": true })
+    }
+  );
+  const nextBtn = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "button",
+    {
+      type: "button",
+      "aria-label": "Next",
+      onClick: () => setPage((p) => Math.min(pages - 1, p + 1)),
+      style: chrome(current < pages - 1),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ArrowRight, { size: 24, strokeWidth: 1.5, "aria-hidden": true })
+    }
+  );
+  const dots = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { display: "flex", gap: 9, justifyContent: "center" }, children: pageGroups.map((_, p) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", "aria-label": `Page ${p + 1}`, onClick: () => setPage(p), style: dot(p === current) }, p)) });
+  if (isMobile) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { "data-ai-carousel": "", style: { display: "flex", flexDirection: "column", gap: AI_TREE_TOKENS.spacing6, alignItems: "center" }, children: [
+      viewport,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", gap: AI_TREE_TOKENS.spacing6, justifyContent: "center" }, children: [
+        prevBtn,
+        nextBtn
+      ] }),
+      dots
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { "data-ai-carousel": "", style: { display: "flex", flexDirection: "column", gap: AI_TREE_TOKENS.spacing8, alignItems: "center" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: AI_TREE_TOKENS.spacing6, width: "100%" }, children: [
+      prevBtn,
+      viewport,
+      nextBtn
     ] }),
-    pages > 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { display: "flex", gap: 9, justifyContent: "center" }, children: pageGroups.map((_, p) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", "aria-label": `Page ${p + 1}`, onClick: () => setPage(p), style: dot(p === current) }, p)) })
+    dots
   ] });
 }
 function CollectionBlock({ node, ctx, path }) {
@@ -1589,33 +1634,81 @@ function renderNode(node, ctx, path) {
         }
       );
     }
-    case "form":
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: AI_TREE_TOKENS.spacing4 }, children: (node.children ?? []).map((child, i) => {
+    case "form": {
+      const formAttrs = ctx.keyFor ? {
+        "data-ohw-editable": "form",
+        "data-ohw-key": ctx.keyFor(`${path}.form`),
+        "data-ohw-success-text": "Thanks \u2014 we'll be in touch shortly."
+      } : {};
+      const fieldStyle = {
+        width: "100%",
+        boxSizing: "border-box",
+        border: `1px solid ${ctx.brand.palette.accent}`,
+        borderRadius: AI_TREE_TOKENS.radiusButton,
+        padding: "12px 14px",
+        background: "#fff",
+        color: ctx.brand.palette.dark,
+        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 cs = child.slots ?? {};
-          return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+          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)(
-              "div",
+              "label",
               {
                 ...textAttrs(ctx, `${path}.c${i}.label`),
-                style: { ...typeStyle(AI_TREE_TOKENS.type.bodyMBold, ctx.brand.fonts.body), color: ctx.brand.palette.dark, marginBottom: 6 },
-                children: str(cs.label)
+                style: {
+                  ...typeStyle(AI_TREE_TOKENS.type.bodyMBold, ctx.brand.fonts.body),
+                  color: ctx.brand.palette.dark
+                },
+                children: label
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "div",
+            kind === "textarea" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "textarea",
               {
-                style: {
-                  border: `1px solid ${ctx.brand.palette.accent}`,
-                  borderRadius: AI_TREE_TOKENS.radiusButton,
-                  height: cs.kind === "textarea" ? 96 : 42
-                }
+                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);
         }
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonEl, { slots: child.slots ?? {}, ctx, path: `${path}.c${i}` }) }, 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)(
         "div",
@@ -1877,6 +1970,31 @@ function syncReplacedOriginals(state) {
     }
   }
 }
+function orderByChain(sections) {
+  const ids = new Set(sections.map((entry) => entry.id));
+  const after = /* @__PURE__ */ new Map();
+  const roots = [];
+  for (const entry of sections) {
+    const anchor = entry.replaces ?? entry.beforeSection ?? entry.afterSection ?? null;
+    if (anchor && ids.has(anchor)) {
+      const bucket = after.get(anchor);
+      if (bucket) bucket.push(entry);
+      else after.set(anchor, [entry]);
+    } else {
+      roots.push(entry);
+    }
+  }
+  const out = [];
+  const seen = /* @__PURE__ */ new Set();
+  const visit = (entry) => {
+    if (seen.has(entry.id)) return;
+    seen.add(entry.id);
+    out.push(entry);
+    for (const child of after.get(entry.id) ?? []) visit(child);
+  };
+  for (const root of roots) visit(root);
+  return out.length === sections.length ? out : sections;
+}
 function applyAiSectionsToDom(state, options) {
   if (typeof document === "undefined") return;
   const brandOverride = deriveBrandOverride();
@@ -1885,6 +2003,7 @@ function applyAiSectionsToDom(state, options) {
   const pagePath = window.location.pathname;
   const pageSections = state.sections.filter((entry) => (entry.path ?? "/") === pagePath);
   const activeIds = new Set(pageSections.map((entry) => entry.id));
+  const ordered = state.hideTemplate === true ? orderByChain(pageSections) : pageSections;
   for (const [id, section] of mounted) {
     if (!activeIds.has(id)) {
       section.root.unmount();
@@ -1892,7 +2011,7 @@ function applyAiSectionsToDom(state, options) {
       mounted.delete(id);
     }
   }
-  for (const entry of pageSections) {
+  for (const entry of ordered) {
     const serialized = JSON.stringify(entry) + brandKey;
     const existing = mounted.get(entry.id);
     if (existing && existing.serialized === serialized && existing.container.isConnected) {
@@ -1929,7 +2048,7 @@ function applyAiSectionsToDom(state, options) {
   }
   if (state.hideTemplate === true) {
     let prev = null;
-    for (const entry of pageSections) {
+    for (const entry of ordered) {
       const el = mounted.get(entry.id)?.container;
       if (!el) continue;
       if (prev && !(prev.compareDocumentPosition(el) & Node.DOCUMENT_POSITION_FOLLOWING)) {
@@ -20804,7 +20923,7 @@ function OhhwellsBridge() {
       postToParent2({
         type: "ow:ready",
         version: "1",
-        bridgeVersion: "0.1.70",
+        bridgeVersion: "0.1.71",
         path: pathname,
         nodes: collectEditableNodes(editContentRef.current),
         sections