@bettercms-ai/astro 0.4.0 → 0.6.0

package/README.md

@@ -109,7 +109,7 @@ or on-demand-revalidation hook.
 
 | Component | Purpose |
 | --- | --- |
-| `@bettercms-ai/astro/components/BcmsBlocks.astro` | Render a page's `blockJson` (all 8 block types). |
+| `@bettercms-ai/astro/components/BcmsBlocks.astro` | Render a page's `blockJson` — every block type the builder can author (heading, text/richtext, image, button, spacer, video, columns, form, section, navbar, footer, slider, tabs, component), with block style tokens applied. |
 | `@bettercms-ai/astro/components/BcmsForm.astro` | Render + submit a form (conditional fields, honeypot, Turnstile). |
 | `@bettercms-ai/astro/components/BcmsImage.astro` | Optimized image with a 1x/2x srcset via the media transform endpoint. |
 

package/components/BcmsBlocks.astro

@@ -1,38 +1,156 @@
 ---
 /**
- * <BcmsBlocks> — renders a page's blockJson tree natively in Astro. Covers all
- * 8 block types (heading, text, image, button, spacer, video, columns, form),
- * with `columns` recursing via Astro.self and `form` resolving from the `forms`
- * prop. Class names mirror the server-side renderer.
+ * <BcmsBlocks> — renders a page's blockJson tree natively in Astro, at parity with
+ * the React twin in @bettercms-ai/next and with the hosted renderer
+ * (src/lib/sites/render-page.ts). Every block type the Visual Editor can produce is
+ * covered: heading, text/richtext, image, button, spacer, video, columns, form,
+ * section, navbar, footer, slider, tabs and component.
+ *
+ * Anything NOT in the switch fell through to `default: null` — a silently blank
+ * region on an Astro site for a page that looked correct on the builder canvas and
+ * on a Next site. `section`, `navbar`, `footer`, `slider`, `tabs` and `richtext`
+ * were all in that hole.
+ *
+ * Style tokens (FLO-264) are applied through the SAME `blockStyleToCss` the Next
+ * adapter and the builder canvas use, so a block's padding/colour/alignment lands
+ * identically on all three surfaces instead of being dropped on Astro only.
+ *
+ * Class names mirror the hosted renderer (`bcms-text`, `bcms-btn-*`, `bcms-cols`,
+ * `bcms-section`, `bcms-slider`, …) — that has been this component's convention
+ * since it was written, and the starters' CSS is keyed off it (it `:is()`-covers
+ * both the Astro and the Next spellings).
+ *
+ * `slider` and `tabs` carry runtime behaviour. Astro has no client component model
+ * to lean on here, so they ship the same vanilla, zero-dependency scripts the hosted
+ * renderer ships — inlined once per top-level <BcmsBlocks>, and only when the tree
+ * actually contains that block (mirrors render-page.ts's `ctx.flags` gating).
  */
 import type { ContentBlock } from "@bettercms-ai/types";
-import type { DeliveryForm } from "@bettercms-ai/sdk";
+import { blockStyleToCss } from "@bettercms-ai/types";
+import type { DeliveryComponent, DeliveryForm } from "@bettercms-ai/sdk";
+import { applyOverrides } from "@bettercms-ai/ui/resolve";
 import BcmsImage from "./BcmsImage.astro";
 import BcmsForm from "./BcmsForm.astro";
 
 interface Props {
   blocks: ContentBlock[];
   forms?: DeliveryForm[];
+  /** Definitions for `component` blocks — pass `readComponents()` from @bettercms-ai/next
+   *  or fetch `/delivery/:workspace/components`. Absent ⇒ instances render nothing. */
+  components?: DeliveryComponent[];
   turnstileSiteKey?: string | null;
+  /** Recursion depth for nested components. Internal; do not pass. */
+  depth?: number;
+  /** Component ids already on this branch — cycle guard. Internal; do not pass. */
+  seen?: string[];
+  /** Set on every self-recursion so only the outermost instance emits the runtime
+   *  scripts. Internal; do not pass. */
+  nested?: boolean;
   class?: string;
 }
 
-const { blocks = [], forms = [], turnstileSiteKey, class: className } = Astro.props;
+/** Matches render-page.ts and @bettercms-ai/next; a component tree deeper than this is a bug. */
+const MAX_COMPONENT_DEPTH = 10;
+
+const {
+  blocks = [],
+  forms = [],
+  components = [],
+  turnstileSiteKey,
+  depth = 0,
+  seen = [],
+  nested = false,
+  class: className,
+} = Astro.props;
 const formMap = new Map(forms.map((f) => [f.id, f]));
+const componentMap = new Map(components.map((c) => [c.id, c]));
 
 const clamp = (n: number, min: number, max: number) => Math.min(max, Math.max(min, n));
 const anyProps = (b: ContentBlock) => (b as { props?: Record<string, any> }).props ?? {};
+const arr = (v: unknown): any[] => (Array.isArray(v) ? v : []);
+
+/**
+ * `blockStyleToCss` returns a React-style declaration object (camelCase keys); Astro's
+ * `style` attribute wants a string. Same token set in ⇒ same pixels out as Next.
+ */
+function styleAttr(block: ContentBlock): string | undefined {
+  const css = blockStyleToCss((block as { style?: any }).style);
+  if (!css) return undefined;
+  return Object.entries(css)
+    .map(([k, v]) => `${k.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`)}:${v}`)
+    .join(";");
+}
+
+/**
+ * Resolve a `component` block to the blocks it stands for. Returns null to fail soft on a
+ * deleted/unknown definition (exactly like the server renderer — a dangling reference must
+ * never break the build), and on the depth/cycle guard: a component's blockJson can embed
+ * other components and nothing validates against a cycle at write time.
+ *
+ * Lives in the frontmatter, not the template, because the Astro compiler parses `<T>` in a
+ * template expression as JSX — `applyOverrides<ContentBlock>(…)` inline emitted a bogus
+ * `<ContentBlock>` element and the file failed to compile at all.
+ */
+function resolveComponent(p: Record<string, any>): { id: string; blocks: ContentBlock[] } | null {
+  const def = componentMap.get(String(p.componentId ?? ""));
+  if (!def) return null;
+  if (depth >= MAX_COMPONENT_DEPTH || seen.includes(def.id)) return null;
+  const resolved = applyOverrides<ContentBlock>(
+    def.blockJson,
+    def.props ?? [],
+    (p.overrides as Record<string, unknown>) ?? {},
+  );
+  return { id: def.id, blocks: resolved };
+}
+
+/**
+ * Depth-limited scan for a block type anywhere in the tree, components included, so the
+ * slider/tabs runtimes only ship on pages that use them — the same gating render-page.ts
+ * does with `ctx.flags`.
+ */
+function containsType(list: unknown, type: string, d = 0, chain: string[] = []): boolean {
+  if (d > MAX_COMPONENT_DEPTH) return false;
+  for (const b of arr(list)) {
+    if (!b || typeof b !== "object") continue;
+    if (b.type === type) return true;
+    const p = b.props ?? {};
+    if (b.type === "component") {
+      const def = componentMap.get(String(p.componentId ?? ""));
+      if (def && !chain.includes(def.id) && containsType(def.blockJson, type, d + 1, [...chain, def.id])) return true;
+      continue;
+    }
+    const kids = [
+      ...arr(p.children),
+      ...arr(p.columns).flatMap((c: unknown) => arr(c)),
+      ...arr(p.slides).flatMap((s: any) => arr(s?.children)),
+      ...arr(p.tabs).flatMap((t: any) => arr(t?.children)),
+    ];
+    if (containsType(kids, type, d, chain)) return true;
+  }
+  return false;
+}
+
+const needsSlider = !nested && containsType(blocks, "slider");
+const needsTabs = !nested && containsType(blocks, "tabs");
+
+/** Props every self-recursion forwards unchanged. */
+const pass = { forms, components, turnstileSiteKey, nested: true };
 ---
 
 <div class={className}>
   {blocks.map((block) => {
     const p = anyProps(block);
+    const style = styleAttr(block);
+    const node = (() => {
     switch (block.type) {
       case "heading": {
         const Tag = `h${clamp(Number(p.level) || 2, 1, 6)}` as keyof HTMLElementTagNameMap;
         return <Tag data-bcms-field={`${block.id}__text`}>{p.text}</Tag>;
       }
+      // `richtext` and `text` carry the same payload and differ only in the authoring
+      // surface, so delivery renders them identically — the hosted renderer does the same.
       case "text":
+      case "richtext":
         return <div class="bcms-text" data-bcms-field={`${block.id}__html`} data-bcms-kind="richtext" set:html={p.html ?? ""} />;
       case "image": {
         // Matches the Next adapter: the image block is click-to-select on the Visual Editor
@@ -69,7 +187,7 @@ const anyProps = (b: ContentBlock) => (b as { props?: Record<string, any> }).pro
           >
             {cols.map((col) => (
               <div class="bcms-col">
-                <Astro.self blocks={col} forms={forms} turnstileSiteKey={turnstileSiteKey} />
+                <Astro.self blocks={col} depth={depth} seen={seen} {...pass} />
               </div>
             ))}
           </div>
@@ -79,8 +197,150 @@ const anyProps = (b: ContentBlock) => (b as { props?: Record<string, any> }).pro
         const form = formMap.get(p.formId);
         return form ? <BcmsForm form={form} turnstileSiteKey={turnstileSiteKey} /> : null;
       }
+      case "section": {
+        const inner = <Astro.self blocks={arr(p.children)} depth={depth} seen={seen} {...pass} />;
+        const mw = Number(p.maxWidth) || 0;
+        return (
+          <section
+            class="bcms-section"
+            style={[
+              p.background ? `background:${p.background}` : "",
+              p.paddingY != null ? `padding:${Number(p.paddingY) || 0}px 0` : "",
+            ].filter(Boolean).join(";") || undefined}
+          >
+            {mw ? <div class="bcms-section-inner" style={`max-width:${mw}px;margin:0 auto`}>{inner}</div> : inner}
+          </section>
+        );
+      }
+      case "navbar": {
+        const logo = p.logo && typeof p.logo === "object" ? p.logo : null;
+        return (
+          <nav class="bcms-navbar">
+            {logo?.src ? (
+              <a class="bcms-navbar-logo" href={logo.href ?? "/"}>
+                <img src={logo.src} alt={logo.alt ?? ""} />
+              </a>
+            ) : null}
+            <div class="bcms-navbar-links">
+              {arr(p.links).map((l: any) => <a href={l?.href ?? "#"}>{l?.label ?? ""}</a>)}
+            </div>
+            {p.cta?.text ? <a class="bcms-btn bcms-btn-primary" href={p.cta.href ?? "#"}>{p.cta.text}</a> : null}
+          </nav>
+        );
+      }
+      case "footer":
+        return (
+          <footer class="bcms-footer">
+            <div class="bcms-footer-cols">
+              {arr(p.columns).map((col: any) => (
+                <div class="bcms-footer-col">
+                  {col?.heading ? <h4>{col.heading}</h4> : null}
+                  <ul>
+                    {arr(col?.links).map((l: any) => <li><a href={l?.href ?? "#"}>{l?.label ?? ""}</a></li>)}
+                  </ul>
+                </div>
+              ))}
+            </div>
+            {p.copyright ? <p class="bcms-footer-copy">{p.copyright}</p> : null}
+          </footer>
+        );
+      case "slider":
+        // `hidden` on the inactive slides — NOT just the `data-active` hook the hosted
+        // renderer uses — because that renderer ships BASE_CSS with it and this package
+        // ships no CSS at all. Without it every slide would stack on an unstyled host.
+        // The script keeps both in sync so `.bcms-slide[data-active]` CSS still works.
+        return (
+          <div
+            class="bcms-slider"
+            data-bcms-slider
+            data-autoplay={p.autoplay ? String(Number(p.interval) || 5000) : undefined}
+            data-loop={p.loop ? "" : undefined}
+          >
+            <div class="bcms-slides">
+              {arr(p.slides).map((s: any, i: number) => (
+                <div class="bcms-slide" data-active={i === 0 ? "" : undefined} hidden={i !== 0}>
+                  <Astro.self blocks={arr(s?.children)} depth={depth} seen={seen} {...pass} />
+                </div>
+              ))}
+            </div>
+            <button class="bcms-slider-prev" data-prev aria-label="Previous">&#8249;</button>
+            <button class="bcms-slider-next" data-next aria-label="Next">&#8250;</button>
+          </div>
+        );
+      case "tabs":
+        return (
+          <div class="bcms-tabs" data-bcms-tabs>
+            <div class="bcms-tablist" role="tablist">
+              {arr(p.tabs).map((t: any, i: number) => (
+                <button role="tab" class="bcms-tab" aria-selected={i === 0 ? "true" : "false"} data-tab={String(i)}>
+                  {t?.label ?? ""}
+                </button>
+              ))}
+            </div>
+            {arr(p.tabs).map((t: any, i: number) => (
+              <div role="tabpanel" class="bcms-tabpanel" data-panel={String(i)} hidden={i !== 0}>
+                <Astro.self blocks={arr(t?.children)} depth={depth} seen={seen} {...pass} />
+              </div>
+            ))}
+          </div>
+        );
+      case "component": {
+        const resolved = resolveComponent(p);
+        if (!resolved) return null;
+        return <Astro.self blocks={resolved.blocks} depth={depth + 1} seen={[...seen, resolved.id]} {...pass} />;
+      }
       default:
         return null;
     }
+    })();
+    // FLO-264: honour the block's bounded style tokens here too, so Astro output matches
+    // the builder canvas, the Next adapter and the hosted site.
+    return style && node != null ? <div style={style}>{node}</div> : node;
   })}
 </div>
+
+{needsSlider && (
+  <script is:inline>
+    // Vanilla prev/next + optional autoplay, mirroring render-page.ts's SLIDER_SCRIPT.
+    // `bcmsSliderBound` makes binding idempotent: two top-level <BcmsBlocks> on one page
+    // each inline a copy, and every copy sees every slider (the same footgun that had
+    // <BcmsForm> submitting twice).
+    document.querySelectorAll("[data-bcms-slider]").forEach(function (root) {
+      if (root.dataset.bcmsSliderBound) return;
+      root.dataset.bcmsSliderBound = "1";
+      var slides = root.querySelectorAll(".bcms-slide");
+      if (!slides.length) return;
+      var i = 0;
+      function show(n) {
+        i = (n + slides.length) % slides.length;
+        slides.forEach(function (s, k) {
+          if (k === i) { s.setAttribute("data-active", ""); s.removeAttribute("hidden"); }
+          else { s.removeAttribute("data-active"); s.setAttribute("hidden", ""); }
+        });
+      }
+      var prev = root.querySelector("[data-prev]"), next = root.querySelector("[data-next]");
+      if (prev) prev.addEventListener("click", function () { show(i - 1); });
+      if (next) next.addEventListener("click", function () { show(i + 1); });
+      var ms = parseInt(root.getAttribute("data-autoplay") || "0", 10);
+      if (ms > 0) setInterval(function () { show(i + 1); }, ms);
+    });
+  </script>
+)}
+
+{needsTabs && (
+  <script is:inline>
+    // Toggles aria-selected + panel visibility, mirroring render-page.ts's TABS_SCRIPT.
+    // Idempotent for the same reason as the slider runtime above.
+    document.querySelectorAll("[data-bcms-tabs]").forEach(function (root) {
+      if (root.dataset.bcmsTabsBound) return;
+      root.dataset.bcmsTabsBound = "1";
+      var tabs = root.querySelectorAll("[role=tab]"), panels = root.querySelectorAll("[role=tabpanel]");
+      tabs.forEach(function (tab, idx) {
+        tab.addEventListener("click", function () {
+          tabs.forEach(function (t, k) { t.setAttribute("aria-selected", k === idx ? "true" : "false"); });
+          panels.forEach(function (pan, k) { if (k === idx) { pan.removeAttribute("hidden"); } else { pan.setAttribute("hidden", ""); } });
+        });
+      });
+    });
+  </script>
+)}

package/components/BcmsForm.astro

@@ -30,27 +30,67 @@ const INPUT_TYPE: Partial<Record<DeliveryFormField["type"], string>> = {
 const showTurnstile = Boolean(form.turnstileEnabled && turnstileSiteKey);
 ---
 
-<form class={`bcms-form${className ? ` ${className}` : ""}`} method="post" action={action} data-bcms-form>
+<form
+  class={`bcms-form${className ? ` ${className}` : ""}`}
+  method="post"
+  action={action}
+  data-bcms-form={form.id}
+  data-bcms-form-success={form.successMessage ?? "Thanks!"}
+  data-bcms-form-redirect={form.redirectUrl ?? ""}
+>
   {form.fields?.map((f) => {
-    const wrapAttrs = f.showIf ? { "data-bcms-showif": JSON.stringify(f.showIf) } : {};
+    const wrapAttrs = {
+      "data-bcms-form-field": f.key,
+      ...(f.showIf ? { "data-bcms-showif": JSON.stringify(f.showIf) } : {}),
+    };
+    // Every author-editable string carries a `data-bcms-form-part` so the Visual Editor can
+    // repaint it live. A string the dock can edit but cannot mark shows stale on the canvas.
+    const help = f.helpText
+      ? <span class="bcms-field-help" data-bcms-form-part="help">{f.helpText}</span>
+      : null;
     if (f.type === "hidden") return <input type="hidden" name={f.key} value={f.defaultValue ?? ""} />;
     if (f.type === "checkbox" || f.type === "consent")
       return (
         <label class="bcms-check" {...wrapAttrs}>
           <input type="checkbox" name={f.key} required={f.required} />
-          <span>{f.label}</span>
+          {/* The ` *` marker is emitted for EVERY field type, by every renderer — the
+              Visual Editor's live patch rewrites this span as `label + marker`, so a
+              renderer that omitted it would drop the star on edit and grow one back on
+              the next reload. */}
+          <span data-bcms-form-part="label">{f.label}{f.required ? " *" : ""}</span>
+          {help}
         </label>
       );
+    // Pick-one / pick-many are option GROUPS. Without this branch both fell through
+    // to the `<input type={INPUT_TYPE[f.type] ?? "text"}>` below and shipped as a
+    // single-line text box on every Astro site.
+    if (f.type === "radio" || f.type === "checkboxes") {
+      const multi = f.type === "checkboxes";
+      return (
+        <fieldset class={`bcms-field bcms-field--${multi ? "checkboxes" : "radio"}`} {...wrapAttrs}>
+          <legend data-bcms-form-part="label">{f.label}{f.required ? " *" : ""}</legend>
+          {(f.options ?? []).map((o) => (
+            <label class="bcms-option">
+              {/* `required` on each radio is the native "pick one"; on checkboxes it
+                  would demand every box, so the API enforces non-empty instead. */}
+              <input type={multi ? "checkbox" : "radio"} name={f.key} value={o} required={!multi && f.required} />
+              <span data-bcms-form-part="option">{o}</span>
+            </label>
+          ))}
+          {help}
+        </fieldset>
+      );
+    }
     return (
       <div class="bcms-field" {...wrapAttrs}>
-        <label for={`bcms-f-${f.key}`}>{f.label}{f.required ? " *" : ""}</label>
+        <label for={`bcms-f-${f.key}`} data-bcms-form-part="label">{f.label}{f.required ? " *" : ""}</label>
         {f.type === "textarea" ? (
           <textarea id={`bcms-f-${f.key}`} name={f.key} placeholder={f.placeholder} required={f.required}>
             {f.defaultValue ?? ""}
           </textarea>
         ) : f.type === "select" ? (
           <select id={`bcms-f-${f.key}`} name={f.key} required={f.required}>
-            {(f.options ?? []).map((o) => <option value={o}>{o}</option>)}
+            {(f.options ?? []).map((o) => <option value={o} data-bcms-form-part="option">{o}</option>)}
           </select>
         ) : (
           <input
@@ -62,6 +102,7 @@ const showTurnstile = Boolean(form.turnstileEnabled && turnstileSiteKey);
             required={f.required}
           />
         )}
+        {help}
       </div>
     );
   })}
@@ -78,12 +119,19 @@ const showTurnstile = Boolean(form.turnstileEnabled && turnstileSiteKey);
 
 {showTurnstile && <script is:inline src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>}
 
-<script is:inline data-bcms-form-success={form.successMessage ?? "Thanks!"} data-bcms-form-redirect={form.redirectUrl ?? ""}>
+<script is:inline>
+  // One copy of this script ships per <BcmsForm> instance, and each copy sees EVERY
+  // form on the page — so two forms meant four bindings and a double submit. The
+  // `bcmsFormBound` flag makes binding idempotent no matter how many copies run,
+  // and the success/redirect config now lives on the FORM rather than on the script
+  // element, so form A's script can no longer apply form B's success message.
   document.querySelectorAll("form[data-bcms-form]").forEach((form) => {
+    if (form.dataset.bcmsFormBound) return;
+    form.dataset.bcmsFormBound = "1";
+
     const msg = form.querySelector(".bcms-form-msg");
-    const cfg = document.currentScript;
-    const successMsg = cfg?.getAttribute("data-bcms-form-success") || "Thanks!";
-    const redirect = cfg?.getAttribute("data-bcms-form-redirect") || "";
+    const successMsg = form.getAttribute("data-bcms-form-success") || "Thanks!";
+    const redirect = form.getAttribute("data-bcms-form-redirect") || "";
 
     // Conditional fields: show/hide based on another field's value.
     const conds = form.querySelectorAll("[data-bcms-showif]");
@@ -92,7 +140,17 @@ const showTurnstile = Boolean(form.turnstileEnabled && turnstileSiteKey);
         try {
           const { field, equals } = JSON.parse(el.getAttribute("data-bcms-showif"));
           const input = form.elements[field];
-          const val = input && input.type === "checkbox" ? (input.checked ? "true" : "false") : input?.value;
+          // A radio/checkboxes group resolves to a RadioNodeList, which has no `.type`
+          // and whose `.value` is "" for checkbox groups — read the checked members.
+          let val;
+          if (input instanceof RadioNodeList) {
+            const checked = Array.from(input).filter((el) => el.checked).map((el) => el.value);
+            val = checked.includes(equals) ? equals : checked[0];
+          } else if (input && input.type === "checkbox") {
+            val = input.checked ? "true" : "false";
+          } else {
+            val = input?.value;
+          }
           el.style.display = val === equals ? "" : "none";
         } catch {}
       });
@@ -102,8 +160,17 @@ const showTurnstile = Boolean(form.turnstileEnabled && turnstileSiteKey);
 
     form.addEventListener("submit", async (e) => {
       e.preventDefault();
+      // A `checkboxes` group posts one FormData entry PER checked box under the same
+      // name; assigning them one at a time kept only the last. Collect repeats into
+      // an array, which is the shape the API and every other renderer expect.
       const data = {};
-      new FormData(form).forEach((v, k) => { data[k] = v; });
+      new FormData(form).forEach((v, k) => {
+        // Turnstile's token is a protocol field, not a form answer — the API reads it
+        // from the envelope. Leaving it inside `data` stored it as a submission column.
+        if (k === "cf-turnstile-response") return;
+        if (k in data) data[k] = Array.isArray(data[k]) ? [...data[k], v] : [data[k], v];
+        else data[k] = v;
+      });
       const tsEl = form.querySelector('[name="cf-turnstile-response"]');
       const body = { data };
       if (tsEl?.value) body["cf-turnstile-response"] = tsEl.value;
@@ -116,6 +183,7 @@ const showTurnstile = Boolean(form.turnstileEnabled && turnstileSiteKey);
         if (!res.ok) throw new Error(String(res.status));
         if (redirect) { window.location.href = redirect; return; }
         form.reset();
+        applyConds();
         if (msg) { msg.textContent = successMsg; msg.hidden = false; }
       } catch {
         if (msg) { msg.textContent = "Something went wrong. Please try again."; msg.hidden = false; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bettercms-ai/astro",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "type": "module",
   "description": "The BetterCMS adapter for Astro — a `bettercms()` integration, a `bettercms:client` virtual module, typed content loaders, draft preview, and native .astro rendering components.",
   "main": "./dist/index.js",
@@ -48,8 +48,9 @@
   },
   "dependencies": {
     "@bettercms-ai/image-url": "^0.1.0",
-    "@bettercms-ai/sdk": "^1.5.0",
-    "@bettercms-ai/types": "^1.4.0"
+    "@bettercms-ai/sdk": "^1.10.0",
+    "@bettercms-ai/types": "^1.7.0",
+    "@bettercms-ai/ui": "^0.4.0"
   },
   "peerDependencies": {
     "astro": ">=4"