@ohhwells/bridge 0.1.54-next.146 → 0.1.54-next.147

package/dist/index.cjs

@@ -409,36 +409,53 @@ function RatingEl({ value, ctx }) {
     }
   );
 }
-function PersonEl({
+function AvatarDisc({
   person,
   ctx,
-  path
+  path,
+  size
 }) {
   const avatarUrl = person.avatar ? ctx.resolveMedia(person.avatar) : null;
   const avatarAttrs = ctx.keyFor ? { "data-ohw-key": ctx.keyFor(`${path}.person.avatar`), "data-ohw-editable": "image" } : {};
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "span",
+    {
+      ...avatarAttrs,
+      style: {
+        width: size,
+        height: size,
+        borderRadius: "50%",
+        background: "#DBEAFE",
+        overflow: "hidden",
+        flexShrink: 0,
+        display: "block"
+      },
+      children: (avatarUrl || ctx.keyFor) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "img",
+        {
+          src: avatarUrl ?? TRANSPARENT_PX,
+          alt: "",
+          style: { width: "100%", height: "100%", objectFit: "cover", display: "block" }
+        }
+      )
+    }
+  );
+}
+function avatarPosition(slots) {
+  const person = slots.person;
+  if (typeof person?.avatar !== "string" || !person.avatar) return null;
+  if (slots.mediaPosition === "left") return "left";
+  if (slots.mediaPosition === "bottom") return "bottom";
+  return "top";
+}
+function PersonEl({
+  person,
+  ctx,
+  path,
+  showAvatar = true
+}) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", gap: 10, alignItems: "center" }, children: [
-    person.avatar && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "span",
-      {
-        ...avatarAttrs,
-        style: {
-          width: 56,
-          height: 56,
-          borderRadius: "50%",
-          background: "#DBEAFE",
-          overflow: "hidden",
-          flexShrink: 0
-        },
-        children: (avatarUrl || ctx.keyFor) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "img",
-          {
-            src: avatarUrl ?? TRANSPARENT_PX,
-            alt: "",
-            style: { width: "100%", height: "100%", objectFit: "cover" }
-          }
-        )
-      }
-    ),
+    person.avatar && showAvatar && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AvatarDisc, { person, ctx, path, size: 56 }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: { flex: 1, minWidth: 0 }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "span",
@@ -549,9 +566,35 @@ function TestimonialCard({ node, ctx, path }) {
   const slots = node.slots ?? {};
   const hasBg = slots.background === true;
   const person = slots.person;
+  const avatarPos = avatarPosition(slots);
+  const content = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: AI_TREE_TOKENS.spacing6,
+        minWidth: 0,
+        flex: avatarPos === "left" ? 1 : void 0
+      },
+      children: [
+        typeof slots.rating === "number" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RatingEl, { value: slots.rating, ctx }),
+        str(slots.quote) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            ...textAttrs(ctx, `${path}.quote`),
+            style: { ...typeStyle(AI_TREE_TOKENS.type.bodyM, ctx.brand.fonts.body), color: ctx.brand.palette.dark },
+            dangerouslySetInnerHTML: { __html: `"${str(slots.quote)}"` }
+          }
+        ),
+        person && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PersonEl, { person, ctx, path, showAvatar: avatarPos === "bottom" })
+      ]
+    }
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
+      "data-ai-avatar-pos": avatarPos ?? void 0,
       style: {
         background: hasBg ? ctx.cardSurface : "transparent",
         borderRadius: hasBg ? AI_TREE_TOKENS.radiusCard : 0,
@@ -564,22 +607,15 @@ function TestimonialCard({ node, ctx, path }) {
         {
           style: {
             display: "flex",
-            flexDirection: "column",
+            flexDirection: avatarPos === "left" ? "row" : "column",
+            alignItems: avatarPos === "left" ? "flex-start" : void 0,
             gap: AI_TREE_TOKENS.spacing6,
             padding: hasBg ? AI_TREE_TOKENS.paddingBlock : 0,
             minWidth: 0
           },
           children: [
-            typeof slots.rating === "number" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RatingEl, { value: slots.rating, ctx }),
-            str(slots.quote) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "div",
-              {
-                ...textAttrs(ctx, `${path}.quote`),
-                style: { ...typeStyle(AI_TREE_TOKENS.type.bodyM, ctx.brand.fonts.body), color: ctx.brand.palette.dark },
-                dangerouslySetInnerHTML: { __html: `"${str(slots.quote)}"` }
-              }
-            ),
-            person && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PersonEl, { person, ctx, path })
+            person && (avatarPos === "top" || avatarPos === "left") && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AvatarDisc, { person, ctx, path, size: 72 }),
+            content
           ]
         }
       )
@@ -590,37 +626,26 @@ function TeamCard({ node, ctx, path }) {
   const slots = node.slots ?? {};
   const hasBg = slots.background === true;
   const person = slots.person ?? {};
-  const avatarUrl = person.avatar ? ctx.resolveMedia(person.avatar) : null;
-  const avatarAttrs = ctx.keyFor ? { "data-ohw-key": ctx.keyFor(`${path}.person.avatar`), "data-ohw-editable": "image" } : {};
+  const avatarPos = avatarPosition(slots);
   const buttonIdx = (node.children ?? []).findIndex((c) => c.type === "button");
   const button = buttonIdx >= 0 ? (node.children ?? [])[buttonIdx] : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
     {
+      "data-ai-avatar-pos": avatarPos ?? void 0,
       style: {
         background: hasBg ? ctx.cardSurface : "transparent",
         borderRadius: hasBg ? AI_TREE_TOKENS.radiusCard : 0,
         overflow: "hidden",
         outline: slots.featured === true ? `2px solid ${ctx.brand.palette.primary}` : void 0,
-        minWidth: 0
+        minWidth: 0,
+        display: avatarPos === "left" ? "flex" : "block",
+        alignItems: avatarPos === "left" ? "flex-start" : void 0
       },
       children: [
-        person.avatar && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { padding: `${AI_TREE_TOKENS.paddingBlock}px ${AI_TREE_TOKENS.paddingBlock}px 0` }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "span",
-          {
-            ...avatarAttrs,
-            style: { width: 80, height: 80, borderRadius: "50%", overflow: "hidden", display: "block" },
-            children: (avatarUrl || ctx.keyFor) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "img",
-              {
-                src: avatarUrl ?? TRANSPARENT_PX,
-                alt: "",
-                style: { width: "100%", height: "100%", objectFit: "cover", display: "block" }
-              }
-            )
-          }
-        ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: AI_TREE_TOKENS.spacing4, padding: AI_TREE_TOKENS.paddingBlock }, children: [
+        avatarPos === "top" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { padding: `${AI_TREE_TOKENS.paddingBlock}px ${AI_TREE_TOKENS.paddingBlock}px 0` }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AvatarDisc, { person, ctx, path, size: 80 }) }),
+        avatarPos === "left" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { padding: `${AI_TREE_TOKENS.paddingBlock}px 0 ${AI_TREE_TOKENS.paddingBlock}px ${AI_TREE_TOKENS.paddingBlock}px`, flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AvatarDisc, { person, ctx, path, size: 80 }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: AI_TREE_TOKENS.spacing4, padding: AI_TREE_TOKENS.paddingBlock, minWidth: 0, flex: avatarPos === "left" ? 1 : void 0 }, children: [
           person.name && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             "div",
             {
@@ -653,7 +678,8 @@ function TeamCard({ node, ctx, path }) {
             },
             i
           )) }),
-          button && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { display: "flex", justifyContent: "center", width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonEl, { slots: button.slots ?? {}, ctx, path: `${path}.c${buttonIdx}` }) })
+          button && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { display: "flex", justifyContent: "center", width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonEl, { slots: button.slots ?? {}, ctx, path: `${path}.c${buttonIdx}` }) }),
+          avatarPos === "bottom" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AvatarDisc, { person, ctx, path, size: 80 })
         ] })
       ]
     }
@@ -808,56 +834,78 @@ function CardBlock({ node, ctx, path }) {
     }
   );
 }
+function toggleAccordionItem(button) {
+  const wasOpen = button.getAttribute("aria-expanded") === "true";
+  const list = button.closest("[data-ai-accordion]");
+  for (const other of list?.querySelectorAll("button[aria-expanded]") ?? []) {
+    other.setAttribute("aria-expanded", "false");
+    const panel = other.nextElementSibling;
+    if (panel) panel.style.display = "none";
+    const chevron = other.querySelector("[data-ai-chevron]");
+    if (chevron) chevron.style.transform = "";
+  }
+  if (!wasOpen) {
+    button.setAttribute("aria-expanded", "true");
+    const panel = button.nextElementSibling;
+    if (panel) panel.style.display = "block";
+    const chevron = button.querySelector("[data-ai-chevron]");
+    if (chevron) chevron.style.transform = "rotate(180deg)";
+  }
+}
 function AccordionBlock({ node, ctx, path }) {
-  const [open, setOpen] = import_react.default.useState(null);
   const rule = `1px solid ${ctx.brand.palette.dark}33`;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { borderTop: rule }, children: (node.items ?? []).map((item, i) => {
-    const isOpen = open === i;
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { borderBottom: rule }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-        "button",
-        {
-          type: "button",
-          "aria-expanded": isOpen,
-          onClick: () => setOpen(isOpen ? null : i),
-          style: {
-            ...typeStyle(AI_TREE_TOKENS.type.bodyMBold, ctx.brand.fonts.body),
-            color: ctx.brand.palette.dark,
-            display: "flex",
-            justifyContent: "space-between",
-            alignItems: "center",
-            width: "100%",
-            padding: "14px 0",
-            background: "transparent",
-            border: "none",
-            cursor: "pointer",
-            textAlign: "left",
-            gap: AI_TREE_TOKENS.spacing3
-          },
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { ...textAttrs(ctx, `${path}.items.${i}.question`), children: item.question }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_lucide_react.ChevronDown,
-              {
-                size: 20,
-                strokeWidth: 1.5,
-                "aria-hidden": true,
-                style: { flexShrink: 0, transform: isOpen ? "rotate(180deg)" : void 0, transition: "transform 0.2s" }
-              }
-            )
-          ]
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { display: isOpen ? "block" : "none", paddingBottom: 14 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "div",
-        {
-          ...textAttrs(ctx, `${path}.items.${i}.answer`),
-          style: { ...typeStyle(AI_TREE_TOKENS.type.bodyM, ctx.brand.fonts.body), color: ctx.brand.palette.accent },
-          dangerouslySetInnerHTML: { __html: item.answer }
-        }
-      ) })
-    ] }, i);
-  }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "data-ai-accordion": "", style: { borderTop: rule }, children: (node.items ?? []).map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { borderBottom: rule }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "button",
+      {
+        type: "button",
+        "aria-expanded": false,
+        onClick: (e) => toggleAccordionItem(e.currentTarget),
+        style: {
+          ...typeStyle(AI_TREE_TOKENS.type.bodyMBold, ctx.brand.fonts.body),
+          color: ctx.brand.palette.dark,
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          width: "100%",
+          padding: "14px 0",
+          background: "transparent",
+          border: "none",
+          cursor: "pointer",
+          textAlign: "left",
+          gap: AI_TREE_TOKENS.spacing3
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "span",
+            {
+              ...textAttrs(ctx, `${path}.items.${i}.question`),
+              style: { flex: 1, minWidth: 0 },
+              dangerouslySetInnerHTML: { __html: item.question }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_lucide_react.ChevronDown,
+            {
+              "data-ai-chevron": "",
+              size: 20,
+              strokeWidth: 1.5,
+              "aria-hidden": true,
+              style: { flexShrink: 0, transition: "transform 0.2s" }
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { display: "none", paddingBottom: 14 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        ...textAttrs(ctx, `${path}.items.${i}.answer`),
+        style: { ...typeStyle(AI_TREE_TOKENS.type.bodyM, ctx.brand.fonts.body), color: ctx.brand.palette.accent },
+        dangerouslySetInnerHTML: { __html: item.answer }
+      }
+    ) })
+  ] }, i)) });
 }
 function Carousel({ items, itemsPerRow, ctx }) {
   const [page, setPage] = import_react.default.useState(0);