@bettercms-ai/astro 0.23.0 → 0.24.0

package/components/BcmsBlocks.astro

@@ -1,640 +1,640 @@
----
-/**
- * <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 { RESPONSIVE_CSS, blockStyleToCss, hideOnAttr, usesHideOn, visibleBlocks, windowState, blockStyleToInnerCss, splitButtonStyle, buttonIconOf, buttonIconSvg, buttonVariantOf, componentInstanceAddresses, headingPaintCss, withButtonLookProps } from "@bettercms-ai/types";
-import { bind, bindProps } from "../dist/bindings.js";
-import type { DeliveryComponent, DeliveryForm } from "@bettercms-ai/sdk";
-import { applyOverrides } from "@bettercms-ai/ui/resolve";
-import { addressFor } from "../dist/bindings.js";
-import { portableTextToHtml } from "@bettercms-ai/richtext/html";
-import { embeddedComponentBlock, readStructuredContent } from "@bettercms-ai/richtext";
-import { headingParts, richtextHeadingLevel } from "@bettercms-ai/richtext/heading";
-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;
-  /** Attributes for the container <div> this component always emits. Used only by the
-   *  `component` case, so a component instance's marker rides the container its own
-   *  recursion already produces instead of gaining a second <div>. Internal; do not pass. */
-  containerAttrs?: Record<string, string | undefined>;
-  /** Inside a component instance, the DEFINITION's `<blockId>__<prop>` mapped to this
-   *  instance's `<id>__overrides.<key>`. AUTHORITATIVE where present: a prop the definition
-   *  does not declare gets no address, rather than one that binds to no field.
-   *  Internal; do not pass. */
-  fieldAddresses?: Map<string, string>;
-  /** Set when `blocks` is a component EMBEDDED in rich text: the address of that rich-text field,
-   *  which names the instance (`<owner>#<_key>`), or null when the field has none — so the
-   *  embed gets no addresses rather than a bare `_key` that resolves to nothing.
-   *  Internal; do not pass. */
-  owner?: string | null;
-  class?: string;
-  /** The instant block windows (`block.window`) are read against. Defaults to the render time:
-   *  the build for a static page, the request for a server-rendered one. */
-  now?: Date;
-  /** Draw the blocks outside their window too, marked `data-bcms-window="pending|expired"`, for
-   *  a draft preview. Off, a block outside its window is not rendered, at any depth. */
-  showScheduled?: boolean;
-}
-
-/** Matches render-page.ts and @bettercms-ai/next; a component tree deeper than this is a bug. */
-const MAX_COMPONENT_DEPTH = 10;
-
-const {
-  blocks: all = [],
-  forms = [],
-  components = [],
-  turnstileSiteKey,
-  depth = 0,
-  seen = [],
-  nested = false,
-  containerAttrs = {},
-  fieldAddresses,
-  owner,
-  class: className,
-  now,
-  showScheduled = false,
-} = Astro.props;
-const at = now ?? new Date();
-// The outermost render removes every block outside its window, at any depth, so each
-// self-recursion below is handed children that are already the visible ones.
-const blocks = showScheduled || nested ? all : visibleBlocks(all, at);
-/** What `bind`/`bindProps` read. One object, so every call site cannot disagree. */
-const bctx = { fieldAddresses };
-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 cssString(css: Record<string, string | number> | undefined): string | undefined {
-  if (!css) return undefined;
-  return Object.entries(css)
-    .map(([k, v]) => `${k.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`)}:${v}`)
-    .join(";");
-}
-/** A button's wrapper keeps only its placement keys; the rest paints the `<a>` (`buttonPaintAttr`). */
-function ownStyle(block: ContentBlock): any {
-  const style = (block as { style?: any }).style;
-  return block.type === "button" ? splitButtonStyle(style).placement : style;
-}
-function styleAttr(block: ContentBlock): string | undefined {
-  return cssString(blockStyleToCss(ownStyle(block)));
-}
-/** The content column's box (`contentWidth`), nested inside the style wrapper; undefined ⇒ none. */
-function innerStyleAttr(block: ContentBlock): string | undefined {
-  return cssString(blockStyleToInnerCss(ownStyle(block)));
-}
-/** A button's fill, theme, corners… on the anchor itself, as on the hosted lane and in Next. */
-function buttonPaintAttr(block: ContentBlock): string | undefined {
-  return cssString(splitButtonStyle((block as { style?: any }).style).paint);
-}
-/** HEADING-STYLE-PAINT: size/weight on the <hN> itself; undefined (neither token) ⇒ no attribute. */
-function headingPaintAttr(block: ContentBlock, level: number): string | undefined {
-  return cssString(headingPaintCss((block as { style?: any }).style, { level }));
-}
-
-/**
- * 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[]; props: DeliveryComponent["props"] } | 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,
-    // A Button's instance may override its look too.
-    withButtonLookProps(def),
-    (p.overrides as Record<string, unknown>) ?? {},
-  );
-  // `props` comes back too: the caller needs the DECLARATION (which block each prop drives) to
-  // build this instance's addresses, not just the resolved tree.
-  return { id: def.id, blocks: resolved, props: def.props ?? [] };
-}
-
-/** What an embedded component's slot looks like in the rendered html — content cannot spell a comment. */
-const EMBED_SLOT = "<!--bcms-embed-->";
-
-/**
- * Portable Text → the html around each embedded component, plus those components as ordinary
- * `component` blocks. An Astro component cannot render to a string inside `portableTextToHtml`,
- * so the hook leaves a slot and the template mounts each embed there through `<Astro.self>` —
- * the same `component` case (resolver, cycle guard, identity attributes) a placed instance uses.
- * `chunks` has one more entry than `embeds`.
- */
-function richTextParts(structured: NonNullable<ReturnType<typeof readStructuredContent>>, base: string | null) {
-  const embeds: ContentBlock[] = [];
-  const html = portableTextToHtml(structured, {
-    ...(base ? { bindingBase: base } : {}),
-    renderBlock: (v) => {
-      const block = embeddedComponentBlock(v);
-      if (!block) return undefined;
-      embeds.push(block as ContentBlock);
-      return EMBED_SLOT;
-    },
-  });
-  return { chunks: html.split(EMBED_SLOT), embeds };
-}
-
-/**
- * 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");
-/** `RESPONSIVE_CSS` rides the page only when a block hides somewhere, so other pages are unchanged. */
-const needsHideCss = !nested && usesHideOn([blocks, components]);
-
-/** Props every self-recursion forwards unchanged. */
-// `fieldAddresses` rides along: a slide or tab panel is still inside the SAME component
-// instance, so its children keep that instance's addresses. The `component` case below
-// overrides it with the NEW instance's map.
-const pass = { forms, components, turnstileSiteKey, nested: true, fieldAddresses, now: at, showScheduled };
----
-
-{/*
-  `data-bcms-page` marks this subtree as ours to edit — the Astro equivalent of the hosted
-  renderer's `<main class="bcms-page">` and the Next adapter's container marker. The editor gates
-  the whole section lane on a CONTAINER marker rather than on the presence of blocks, so a page
-  with NO sections yet is still recognised and can be given its first one.
-
-  Only on the outermost render: every self-recursion passes `nested: true`, and a marker on each
-  nested container would claim a column's interior is a page.
-
-  An expression comment, NOT `<!-- -->`: Astro emits HTML comments to the output, and this
-  component recurses into itself for columns/tabs/sliders/components, so an HTML comment here
-  shipped once per nesting level to every visitor (FLO-1161).
-*/}
-<div class={className} data-bcms-page={nested ? undefined : ""} {...containerAttrs}>
-  {needsHideCss && <style set:html={RESPONSIVE_CSS} />}
-  {blocks.map((block) => {
-    const p = anyProps(block);
-    const style = styleAttr(block);
-    const inner = innerStyleAttr(block);
-    /** `data-bcms-hide`, a hook for `RESPONSIVE_CSS`; a block that hides somewhere gets the wrapper below. */
-    const hide = hideOnAttr(ownStyle(block)) || undefined;
-    /**
-     * 🔴 `data-bcms-block` — the Visual Editor hit-tests this to find sections. It rides the
-     * block's OWN root element; it does NOT get a wrapper.
-     *
-     * A wrapper <div> is what used to be emitted here, and it was a block box around every
-     * top-level block. Two consecutive `button` blocks — whose `<a class="bcms-btn">` roots are
-     * `inline-flex` and are meant to sit side by side — were each sealed in their own block box
-     * and stacked. Measured on the live amor site: both wrappers `display:block`, width 1048,
-     * y=462 and y=540. The Next adapter never had this because React lets it `cloneElement`;
-     * Astro has no cloneElement, so the attribute is applied AT CONSTRUCTION instead — the same
-     * spread idiom this file already uses for the image binding below.
-     *
-     * `undefined` values are omitted by Astro, which is why `nested` blocks (an empty object
-     * here) emit nothing — a column's child must never look like a draggable section.
-     *
-     * When the block carries style tokens the wrapper below is its root, so the marker rides
-     * that instead and `bind` stays empty. Style tokens keep their own box: merging them onto
-     * the block's root changes behaviour (a spacer's padding is absorbed under `border-box`, a
-     * section's `padding` collides last-wins instead of adding, and a button's `text-align`
-     * would centre its label instead of the button).
-     */
-    /** `showScheduled` only: which side of its window a drawn block is on. Rides the block's root, like the id. */
-    const scheduled = showScheduled && windowState(block, at) !== "live" ? windowState(block, at) : undefined;
-    const blockAttrs = style || inner || hide ? {} : nested ? { "data-bcms-window": scheduled } : { "data-bcms-block": block.id, "data-bcms-window": scheduled };
-    const node = (() => {
-    switch (block.type) {
-      case "heading": {
-        const hLevel = clamp(Number(p.level) || 2, 1, 6);
-        const Tag = `h${hLevel}` as keyof HTMLElementTagNameMap;
-        return <Tag style={headingPaintAttr(block, hLevel)} {...bind(block.id, "text", "text", bctx)} {...blockAttrs}>{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": {
-        /**
-         * STRUCTURED CONTENT WINS. This lane read `p.html` unconditionally while the hosted
-         * renderer preferred `p.content`, so a block whose structured value had moved past its
-         * derived cache rendered the stale cache on Astro sites only — the same per-lane
-         * divergence that once made `richtext` render nothing here at all.
-         *
-         * Serialised to a STRING rather than mounting React. `@portabletext/react` would drag
-         * `@astrojs/react` into every customer project, which is a breaking install-time change
-         * for a rendering result that is identical. `set:html` is already what this line did;
-         * the difference is that the string is now generated by our own escaping serialiser
-         * instead of coming out of storage, which REDUCES the trust surface.
-         *
-         * The per-block `#<_key>` addresses are stamped by the serialiser, so one paragraph
-         * inside the field is clickable rather than the field being one opaque string.
-         */
-        /**
-         * `props.level` renders the rich copy AS <hN>, with the SAME shared helper the hosted
-         * renderer and @bettercms-ai/next use (src/lib/richtext/heading.ts) — a heading assembled
-         * per lane is the divergence `src/__tests__/parity.test.ts` exists to catch. Absent ⇒ the
-         * ordinary container below, byte-identical to before; a value that is not one line of
-         * inline copy falls through rather than nesting paragraphs inside a heading.
-         */
-        const level = richtextHeadingLevel(p.level);
-        if (level) {
-          const heading = headingParts(p, addressFor(block.id, "html", bctx));
-          if (heading !== null) {
-            const HTag = `h${level}` as keyof HTMLElementTagNameMap;
-            const headingBind = heading.address
-              ? { "data-bcms-field": heading.address, "data-bcms-kind": "richtext" }
-              : {};
-            return <HTag style={headingPaintAttr(block, level)} {...headingBind} {...blockAttrs} set:html={heading.inner} />;
-          }
-        }
-        const structured = readStructuredContent(p);
-        if (structured) {
-          const base = addressFor(block.id, "html", bctx);
-          const { chunks, embeds } = richTextParts(structured, base);
-          return (
-            <div class="bcms-text" {...blockAttrs}>
-              {chunks.map((html, i) => (
-                <Fragment>
-                  <Fragment set:html={html} />
-                  {embeds[i] && <Astro.self blocks={[embeds[i]]} depth={depth} seen={seen} {...pass} owner={base} />}
-                </Fragment>
-              ))}
-            </div>
-          );
-        }
-        return <div class="bcms-text" {...bind(block.id, "html", "richtext", bctx)} {...blockAttrs} set:html={p.html ?? ""} />;
-      }
-      case "image": {
-        // Matches the Next adapter: the image block is click-to-select on the Visual Editor
-        // canvas like heading/text/button, rather than dock-only. `kind="image"` means select
-        // + live src reflection, never contentEditable.
-        // `alt` rides the props lane: this element already carries the src binding and one
-        // element cannot hold two addresses.
-        const imgBind = {
-          ...bind(block.id, "src", "image", bctx),
-          ...bindProps(block.id, [{ prop: "alt", kind: "text", attr: "alt", present: p.alt != null }], bctx),
-        };
-        return p.caption ? (
-          <figure {...blockAttrs}>
-            <BcmsImage src={p.src} alt={p.alt ?? ""} width={p.width} height={p.height} {...imgBind} />
-            <figcaption {...bind(block.id, "caption", "text", bctx)}>{p.caption}</figcaption>
-          </figure>
-        ) : (
-          <BcmsImage src={p.src} alt={p.alt ?? ""} width={p.width} height={p.height} {...imgBind} {...blockAttrs} />
-        );
-      }
-      case "button":
-        return (
-          <a
-            class={`bcms-btn bcms-btn-${buttonVariantOf(p.variant)}${p.size === "sm" || p.size === "lg" ? ` bcms-btn-${p.size}` : ""}${p.fullWidth === true ? " bcms-btn-full" : ""}`}
-            href={p.href ?? "#"}
-            style={buttonPaintAttr(block)}
-            {...(p.newTab === true ? { target: "_blank", rel: "noopener noreferrer" } : {})}
-            {...bind(block.id, "text", "text", bctx)}
-            {...bindProps(block.id, [{ prop: "href", kind: "url", attr: "href", present: p.href != null }], bctx)}
-            {...blockAttrs}
-          >
-            {buttonIconOf(p.icon) && <Fragment set:html={buttonIconSvg(buttonIconOf(p.icon)!, "bcms-btn-icon")} />}
-            {p.text}
-            {p.arrow === true && <Fragment set:html={buttonIconSvg("arrow-right", "bcms-btn-arrow")} />}
-          </a>
-        );
-      case "spacer":
-        return <div class="bcms-spacer" style={`height:${Number(p.height) || 0}px`} {...blockAttrs} />;
-      case "video":
-        return (
-          <video
-            src={p.url}
-            poster={p.poster}
-            controls
-            autoplay={!!p.autoplay}
-            muted={!!p.autoplay}
-            loop={!!p.loop}
-            playsinline
-            {...bindProps(
-              block.id,
-              [
-                { prop: "url", kind: "url", attr: "src", present: p.url != null },
-                { prop: "poster", kind: "url", attr: "poster", present: p.poster != null },
-              ],
-              bctx,
-            )}
-            {...blockAttrs}
-          />
-        );
-      case "columns": {
-        const cols: ContentBlock[][] = Array.isArray(p.columns) ? p.columns : [];
-        return (
-          <div
-            class="bcms-cols"
-            style={`display:grid;grid-template-columns:repeat(${cols.length || 1},1fr);gap:${Number(p.gap) || 0}px`}
-            {...blockAttrs}
-          >
-            {cols.map((col) => (
-              <div class="bcms-col">
-                <Astro.self blocks={col} depth={depth} seen={seen} {...pass} />
-              </div>
-            ))}
-          </div>
-        );
-      }
-      case "form": {
-        const form = formMap.get(p.formId);
-        return form ? <BcmsForm form={form} turnstileSiteKey={turnstileSiteKey} {...blockAttrs} /> : 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}
-            {...blockAttrs}
-          >
-            {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" {...blockAttrs}>
-            {logo?.src ? (
-              <a class="bcms-navbar-logo" href={logo.href ?? "/"}>
-                <img
-                  src={logo.src}
-                  alt={logo.alt ?? ""}
-                  {...bind(block.id, "logo.src", "image", bctx)}
-                  {...bindProps(block.id, [{ prop: "logo.alt", kind: "text", attr: "alt", present: logo.alt != null }], bctx)}
-                />
-              </a>
-            ) : null}
-            <div class="bcms-navbar-links">
-              {/* Each link addressed by index. The old "nested under arrays" exclusion was
-                  about a writer ceiling that no longer exists: setFieldPath walks N indices. */}
-              {arr(p.links).map((l: any, i: number) => (
-                <a
-                  href={l?.href ?? "#"}
-                  {...bind(block.id, `links[${i}].label`, "text", bctx)}
-                  {...bindProps(block.id, [{ prop: `links[${i}].href`, kind: "url", attr: "href", present: l?.href != null }], bctx)}
-                >
-                  {l?.label ?? ""}
-                </a>
-              ))}
-            </div>
-            {p.cta?.text ? (
-              <a
-                class="bcms-btn bcms-btn-primary"
-                href={p.cta.href ?? "#"}
-                {...bind(block.id, "cta.text", "text", bctx)}
-                {...bindProps(block.id, [{ prop: "cta.href", kind: "url", attr: "href", present: p.cta.href != null }], bctx)}
-              >
-                {p.cta.text}
-              </a>
-            ) : null}
-          </nav>
-        );
-      }
-      case "footer":
-        return (
-          <footer class="bcms-footer" {...blockAttrs}>
-            <div class="bcms-footer-cols">
-              {arr(p.columns).map((col: any, i: number) => (
-                <div class="bcms-footer-col">
-                  {col?.heading ? <h4 {...bind(block.id, `columns[${i}].heading`, "text", bctx)}>{col.heading}</h4> : null}
-                  <ul>
-                    {/* Two indices deep — the deepest addressable thing on a page. */}
-                    {arr(col?.links).map((l: any, j: number) => (
-                      <li>
-                        <a
-                          href={l?.href ?? "#"}
-                          {...bind(block.id, `columns[${i}].links[${j}].label`, "text", bctx)}
-                          {...bindProps(block.id, [{ prop: `columns[${i}].links[${j}].href`, kind: "url", attr: "href", present: l?.href != null }], bctx)}
-                        >
-                          {l?.label ?? ""}
-                        </a>
-                      </li>
-                    ))}
-                  </ul>
-                </div>
-              ))}
-            </div>
-            {p.copyright ? <p class="bcms-footer-copy" {...bind(block.id, "copyright", "text", bctx)}>{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}
-            {...blockAttrs}
-          >
-            <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 {...blockAttrs}>
-            <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)}
-                  {...bind(block.id, `tabs[${i}].label`, "text", bctx)}
-                >
-                  {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;
-        // 🔴 `fieldAddresses` AFTER `{...pass}`: the instance's own map must replace the
-        // enclosing one, not inherit it. Every stamp inside this subtree otherwise names a
-        // block belonging to the DEFINITION — shared by every instance of it, so it resolves
-        // to no field on one placement and collides into a dropped duplicate on two.
-        return (
-          <Astro.self
-            blocks={showScheduled ? resolved.blocks : visibleBlocks(resolved.blocks, at)}
-            depth={depth + 1}
-            seen={[...seen, resolved.id]}
-            containerAttrs={{
-              ...blockAttrs,
-              "data-bcms-component": resolved.id,
-              "data-bcms-variant": "base",
-              "data-bcms-instance": block.id,
-            }}
-            {...pass}
-            fieldAddresses={owner === null ? new Map() : componentInstanceAddresses(block.id, resolved.props, owner)}
-          />
-        );
-      }
-      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.
-    if (node == null) return null;
-    /**
-     * The style wrapper is the ONLY wrapper left, and it is unchanged: a style token needs a box
-     * to apply to. When it exists it IS this block's root, so it carries the marker and
-     * `blockAttrs` above is empty — the two are mutually exclusive by construction, so a block
-     * never gets the attribute twice and never gets a second <div>.
-     *
-     * Everything else now carries `data-bcms-block` on its own root (see `blockAttrs` above).
-     */
-    /**
-     * The content column (`contentWidth`) is a SECOND box inside the style wrapper, as on the
-     * hosted lane (`applyBlockStyle`) and the Next adapter: the wrapper keeps the full-bleed
-     * background and only the inner box narrows. With a column and no other style, the column
-     * box is the root and carries the marker instead.
-     */
-    const stamp = nested ? undefined : block.id;
-    if (style && inner) return <div style={style} data-bcms-hide={hide} data-bcms-block={stamp} data-bcms-window={scheduled}><div class="bcms-block-inner" style={inner}>{node}</div></div>;
-    if (hide) return <div style={style} data-bcms-hide={hide} data-bcms-block={stamp} data-bcms-window={scheduled}>{inner ? <div class="bcms-block-inner" style={inner}>{node}</div> : node}</div>;
-    if (inner) return <div class="bcms-block-inner" style={inner} data-bcms-block={stamp} data-bcms-window={scheduled}>{node}</div>;
-    if (style) return <div style={style} data-bcms-block={stamp} data-bcms-window={scheduled}>{node}</div>;
-    return 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>
-)}
+---
+/**
+ * <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 { RESPONSIVE_CSS, blockStyleToCss, hideOnAttr, usesHideOn, visibleBlocks, windowState, blockStyleToInnerCss, splitButtonStyle, buttonIconOf, buttonIconSvg, buttonVariantOf, componentInstanceAddresses, headingPaintCss, withButtonLookProps } from "@bettercms-ai/types";
+import { bind, bindProps } from "../dist/bindings.js";
+import type { DeliveryComponent, DeliveryForm } from "@bettercms-ai/sdk";
+import { applyOverrides } from "@bettercms-ai/ui/resolve";
+import { addressFor } from "../dist/bindings.js";
+import { portableTextToHtml } from "@bettercms-ai/richtext/html";
+import { embeddedComponentBlock, readStructuredContent } from "@bettercms-ai/richtext";
+import { headingParts, richtextHeadingLevel } from "@bettercms-ai/richtext/heading";
+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;
+  /** Attributes for the container <div> this component always emits. Used only by the
+   *  `component` case, so a component instance's marker rides the container its own
+   *  recursion already produces instead of gaining a second <div>. Internal; do not pass. */
+  containerAttrs?: Record<string, string | undefined>;
+  /** Inside a component instance, the DEFINITION's `<blockId>__<prop>` mapped to this
+   *  instance's `<id>__overrides.<key>`. AUTHORITATIVE where present: a prop the definition
+   *  does not declare gets no address, rather than one that binds to no field.
+   *  Internal; do not pass. */
+  fieldAddresses?: Map<string, string>;
+  /** Set when `blocks` is a component EMBEDDED in rich text: the address of that rich-text field,
+   *  which names the instance (`<owner>#<_key>`), or null when the field has none — so the
+   *  embed gets no addresses rather than a bare `_key` that resolves to nothing.
+   *  Internal; do not pass. */
+  owner?: string | null;
+  class?: string;
+  /** The instant block windows (`block.window`) are read against. Defaults to the render time:
+   *  the build for a static page, the request for a server-rendered one. */
+  now?: Date;
+  /** Draw the blocks outside their window too, marked `data-bcms-window="pending|expired"`, for
+   *  a draft preview. Off, a block outside its window is not rendered, at any depth. */
+  showScheduled?: boolean;
+}
+
+/** Matches render-page.ts and @bettercms-ai/next; a component tree deeper than this is a bug. */
+const MAX_COMPONENT_DEPTH = 10;
+
+const {
+  blocks: all = [],
+  forms = [],
+  components = [],
+  turnstileSiteKey,
+  depth = 0,
+  seen = [],
+  nested = false,
+  containerAttrs = {},
+  fieldAddresses,
+  owner,
+  class: className,
+  now,
+  showScheduled = false,
+} = Astro.props;
+const at = now ?? new Date();
+// The outermost render removes every block outside its window, at any depth, so each
+// self-recursion below is handed children that are already the visible ones.
+const blocks = showScheduled || nested ? all : visibleBlocks(all, at);
+/** What `bind`/`bindProps` read. One object, so every call site cannot disagree. */
+const bctx = { fieldAddresses };
+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 cssString(css: Record<string, string | number> | undefined): string | undefined {
+  if (!css) return undefined;
+  return Object.entries(css)
+    .map(([k, v]) => `${k.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`)}:${v}`)
+    .join(";");
+}
+/** A button's wrapper keeps only its placement keys; the rest paints the `<a>` (`buttonPaintAttr`). */
+function ownStyle(block: ContentBlock): any {
+  const style = (block as { style?: any }).style;
+  return block.type === "button" ? splitButtonStyle(style).placement : style;
+}
+function styleAttr(block: ContentBlock): string | undefined {
+  return cssString(blockStyleToCss(ownStyle(block)));
+}
+/** The content column's box (`contentWidth`), nested inside the style wrapper; undefined ⇒ none. */
+function innerStyleAttr(block: ContentBlock): string | undefined {
+  return cssString(blockStyleToInnerCss(ownStyle(block)));
+}
+/** A button's fill, theme, corners… on the anchor itself, as on the hosted lane and in Next. */
+function buttonPaintAttr(block: ContentBlock): string | undefined {
+  return cssString(splitButtonStyle((block as { style?: any }).style).paint);
+}
+/** HEADING-STYLE-PAINT: size/weight on the <hN> itself; undefined (neither token) ⇒ no attribute. */
+function headingPaintAttr(block: ContentBlock, level: number): string | undefined {
+  return cssString(headingPaintCss((block as { style?: any }).style, { level }));
+}
+
+/**
+ * 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[]; props: DeliveryComponent["props"] } | 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,
+    // A Button's instance may override its look too.
+    withButtonLookProps(def),
+    (p.overrides as Record<string, unknown>) ?? {},
+  );
+  // `props` comes back too: the caller needs the DECLARATION (which block each prop drives) to
+  // build this instance's addresses, not just the resolved tree.
+  return { id: def.id, blocks: resolved, props: def.props ?? [] };
+}
+
+/** What an embedded component's slot looks like in the rendered html — content cannot spell a comment. */
+const EMBED_SLOT = "<!--bcms-embed-->";
+
+/**
+ * Portable Text → the html around each embedded component, plus those components as ordinary
+ * `component` blocks. An Astro component cannot render to a string inside `portableTextToHtml`,
+ * so the hook leaves a slot and the template mounts each embed there through `<Astro.self>` —
+ * the same `component` case (resolver, cycle guard, identity attributes) a placed instance uses.
+ * `chunks` has one more entry than `embeds`.
+ */
+function richTextParts(structured: NonNullable<ReturnType<typeof readStructuredContent>>, base: string | null) {
+  const embeds: ContentBlock[] = [];
+  const html = portableTextToHtml(structured, {
+    ...(base ? { bindingBase: base } : {}),
+    renderBlock: (v) => {
+      const block = embeddedComponentBlock(v);
+      if (!block) return undefined;
+      embeds.push(block as ContentBlock);
+      return EMBED_SLOT;
+    },
+  });
+  return { chunks: html.split(EMBED_SLOT), embeds };
+}
+
+/**
+ * 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");
+/** `RESPONSIVE_CSS` rides the page only when a block hides somewhere, so other pages are unchanged. */
+const needsHideCss = !nested && usesHideOn([blocks, components]);
+
+/** Props every self-recursion forwards unchanged. */
+// `fieldAddresses` rides along: a slide or tab panel is still inside the SAME component
+// instance, so its children keep that instance's addresses. The `component` case below
+// overrides it with the NEW instance's map.
+const pass = { forms, components, turnstileSiteKey, nested: true, fieldAddresses, now: at, showScheduled };
+---
+
+{/*
+  `data-bcms-page` marks this subtree as ours to edit — the Astro equivalent of the hosted
+  renderer's `<main class="bcms-page">` and the Next adapter's container marker. The editor gates
+  the whole section lane on a CONTAINER marker rather than on the presence of blocks, so a page
+  with NO sections yet is still recognised and can be given its first one.
+
+  Only on the outermost render: every self-recursion passes `nested: true`, and a marker on each
+  nested container would claim a column's interior is a page.
+
+  An expression comment, NOT `<!-- -->`: Astro emits HTML comments to the output, and this
+  component recurses into itself for columns/tabs/sliders/components, so an HTML comment here
+  shipped once per nesting level to every visitor (FLO-1161).
+*/}
+<div class={className} data-bcms-page={nested ? undefined : ""} {...containerAttrs}>
+  {needsHideCss && <style set:html={RESPONSIVE_CSS} />}
+  {blocks.map((block) => {
+    const p = anyProps(block);
+    const style = styleAttr(block);
+    const inner = innerStyleAttr(block);
+    /** `data-bcms-hide`, a hook for `RESPONSIVE_CSS`; a block that hides somewhere gets the wrapper below. */
+    const hide = hideOnAttr(ownStyle(block)) || undefined;
+    /**
+     * 🔴 `data-bcms-block` — the Visual Editor hit-tests this to find sections. It rides the
+     * block's OWN root element; it does NOT get a wrapper.
+     *
+     * A wrapper <div> is what used to be emitted here, and it was a block box around every
+     * top-level block. Two consecutive `button` blocks — whose `<a class="bcms-btn">` roots are
+     * `inline-flex` and are meant to sit side by side — were each sealed in their own block box
+     * and stacked. Measured on the live amor site: both wrappers `display:block`, width 1048,
+     * y=462 and y=540. The Next adapter never had this because React lets it `cloneElement`;
+     * Astro has no cloneElement, so the attribute is applied AT CONSTRUCTION instead — the same
+     * spread idiom this file already uses for the image binding below.
+     *
+     * `undefined` values are omitted by Astro, which is why `nested` blocks (an empty object
+     * here) emit nothing — a column's child must never look like a draggable section.
+     *
+     * When the block carries style tokens the wrapper below is its root, so the marker rides
+     * that instead and `bind` stays empty. Style tokens keep their own box: merging them onto
+     * the block's root changes behaviour (a spacer's padding is absorbed under `border-box`, a
+     * section's `padding` collides last-wins instead of adding, and a button's `text-align`
+     * would centre its label instead of the button).
+     */
+    /** `showScheduled` only: which side of its window a drawn block is on. Rides the block's root, like the id. */
+    const scheduled = showScheduled && windowState(block, at) !== "live" ? windowState(block, at) : undefined;
+    const blockAttrs = style || inner || hide ? {} : nested ? { "data-bcms-window": scheduled } : { "data-bcms-block": block.id, "data-bcms-window": scheduled };
+    const node = (() => {
+    switch (block.type) {
+      case "heading": {
+        const hLevel = clamp(Number(p.level) || 2, 1, 6);
+        const Tag = `h${hLevel}` as keyof HTMLElementTagNameMap;
+        return <Tag style={headingPaintAttr(block, hLevel)} {...bind(block.id, "text", "text", bctx)} {...blockAttrs}>{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": {
+        /**
+         * STRUCTURED CONTENT WINS. This lane read `p.html` unconditionally while the hosted
+         * renderer preferred `p.content`, so a block whose structured value had moved past its
+         * derived cache rendered the stale cache on Astro sites only — the same per-lane
+         * divergence that once made `richtext` render nothing here at all.
+         *
+         * Serialised to a STRING rather than mounting React. `@portabletext/react` would drag
+         * `@astrojs/react` into every customer project, which is a breaking install-time change
+         * for a rendering result that is identical. `set:html` is already what this line did;
+         * the difference is that the string is now generated by our own escaping serialiser
+         * instead of coming out of storage, which REDUCES the trust surface.
+         *
+         * The per-block `#<_key>` addresses are stamped by the serialiser, so one paragraph
+         * inside the field is clickable rather than the field being one opaque string.
+         */
+        /**
+         * `props.level` renders the rich copy AS <hN>, with the SAME shared helper the hosted
+         * renderer and @bettercms-ai/next use (src/lib/richtext/heading.ts) — a heading assembled
+         * per lane is the divergence `src/__tests__/parity.test.ts` exists to catch. Absent ⇒ the
+         * ordinary container below, byte-identical to before; a value that is not one line of
+         * inline copy falls through rather than nesting paragraphs inside a heading.
+         */
+        const level = richtextHeadingLevel(p.level);
+        if (level) {
+          const heading = headingParts(p, addressFor(block.id, "html", bctx));
+          if (heading !== null) {
+            const HTag = `h${level}` as keyof HTMLElementTagNameMap;
+            const headingBind = heading.address
+              ? { "data-bcms-field": heading.address, "data-bcms-kind": "richtext" }
+              : {};
+            return <HTag style={headingPaintAttr(block, level)} {...headingBind} {...blockAttrs} set:html={heading.inner} />;
+          }
+        }
+        const structured = readStructuredContent(p);
+        if (structured) {
+          const base = addressFor(block.id, "html", bctx);
+          const { chunks, embeds } = richTextParts(structured, base);
+          return (
+            <div class="bcms-text" {...blockAttrs}>
+              {chunks.map((html, i) => (
+                <Fragment>
+                  <Fragment set:html={html} />
+                  {embeds[i] && <Astro.self blocks={[embeds[i]]} depth={depth} seen={seen} {...pass} owner={base} />}
+                </Fragment>
+              ))}
+            </div>
+          );
+        }
+        return <div class="bcms-text" {...bind(block.id, "html", "richtext", bctx)} {...blockAttrs} set:html={p.html ?? ""} />;
+      }
+      case "image": {
+        // Matches the Next adapter: the image block is click-to-select on the Visual Editor
+        // canvas like heading/text/button, rather than dock-only. `kind="image"` means select
+        // + live src reflection, never contentEditable.
+        // `alt` rides the props lane: this element already carries the src binding and one
+        // element cannot hold two addresses.
+        const imgBind = {
+          ...bind(block.id, "src", "image", bctx),
+          ...bindProps(block.id, [{ prop: "alt", kind: "text", attr: "alt", present: p.alt != null }], bctx),
+        };
+        return p.caption ? (
+          <figure {...blockAttrs}>
+            <BcmsImage src={p.src} alt={p.alt ?? ""} width={p.width} height={p.height} {...imgBind} />
+            <figcaption {...bind(block.id, "caption", "text", bctx)}>{p.caption}</figcaption>
+          </figure>
+        ) : (
+          <BcmsImage src={p.src} alt={p.alt ?? ""} width={p.width} height={p.height} {...imgBind} {...blockAttrs} />
+        );
+      }
+      case "button":
+        return (
+          <a
+            class={`bcms-btn bcms-btn-${buttonVariantOf(p.variant)}${p.size === "sm" || p.size === "lg" ? ` bcms-btn-${p.size}` : ""}${p.fullWidth === true ? " bcms-btn-full" : ""}`}
+            href={p.href ?? "#"}
+            style={buttonPaintAttr(block)}
+            {...(p.newTab === true ? { target: "_blank", rel: "noopener noreferrer" } : {})}
+            {...bind(block.id, "text", "text", bctx)}
+            {...bindProps(block.id, [{ prop: "href", kind: "url", attr: "href", present: p.href != null }], bctx)}
+            {...blockAttrs}
+          >
+            {buttonIconOf(p.icon) && <Fragment set:html={buttonIconSvg(buttonIconOf(p.icon)!, "bcms-btn-icon")} />}
+            {p.text}
+            {p.arrow === true && <Fragment set:html={buttonIconSvg("arrow-right", "bcms-btn-arrow")} />}
+          </a>
+        );
+      case "spacer":
+        return <div class="bcms-spacer" style={`height:${Number(p.height) || 0}px`} {...blockAttrs} />;
+      case "video":
+        return (
+          <video
+            src={p.url}
+            poster={p.poster}
+            controls
+            autoplay={!!p.autoplay}
+            muted={!!p.autoplay}
+            loop={!!p.loop}
+            playsinline
+            {...bindProps(
+              block.id,
+              [
+                { prop: "url", kind: "url", attr: "src", present: p.url != null },
+                { prop: "poster", kind: "url", attr: "poster", present: p.poster != null },
+              ],
+              bctx,
+            )}
+            {...blockAttrs}
+          />
+        );
+      case "columns": {
+        const cols: ContentBlock[][] = Array.isArray(p.columns) ? p.columns : [];
+        return (
+          <div
+            class="bcms-cols"
+            style={`display:grid;grid-template-columns:repeat(${cols.length || 1},1fr);gap:${Number(p.gap) || 0}px`}
+            {...blockAttrs}
+          >
+            {cols.map((col) => (
+              <div class="bcms-col">
+                <Astro.self blocks={col} depth={depth} seen={seen} {...pass} />
+              </div>
+            ))}
+          </div>
+        );
+      }
+      case "form": {
+        const form = formMap.get(p.formId);
+        return form ? <BcmsForm form={form} turnstileSiteKey={turnstileSiteKey} {...blockAttrs} /> : 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}
+            {...blockAttrs}
+          >
+            {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" {...blockAttrs}>
+            {logo?.src ? (
+              <a class="bcms-navbar-logo" href={logo.href ?? "/"}>
+                <img
+                  src={logo.src}
+                  alt={logo.alt ?? ""}
+                  {...bind(block.id, "logo.src", "image", bctx)}
+                  {...bindProps(block.id, [{ prop: "logo.alt", kind: "text", attr: "alt", present: logo.alt != null }], bctx)}
+                />
+              </a>
+            ) : null}
+            <div class="bcms-navbar-links">
+              {/* Each link addressed by index. The old "nested under arrays" exclusion was
+                  about a writer ceiling that no longer exists: setFieldPath walks N indices. */}
+              {arr(p.links).map((l: any, i: number) => (
+                <a
+                  href={l?.href ?? "#"}
+                  {...bind(block.id, `links[${i}].label`, "text", bctx)}
+                  {...bindProps(block.id, [{ prop: `links[${i}].href`, kind: "url", attr: "href", present: l?.href != null }], bctx)}
+                >
+                  {l?.label ?? ""}
+                </a>
+              ))}
+            </div>
+            {p.cta?.text ? (
+              <a
+                class="bcms-btn bcms-btn-primary"
+                href={p.cta.href ?? "#"}
+                {...bind(block.id, "cta.text", "text", bctx)}
+                {...bindProps(block.id, [{ prop: "cta.href", kind: "url", attr: "href", present: p.cta.href != null }], bctx)}
+              >
+                {p.cta.text}
+              </a>
+            ) : null}
+          </nav>
+        );
+      }
+      case "footer":
+        return (
+          <footer class="bcms-footer" {...blockAttrs}>
+            <div class="bcms-footer-cols">
+              {arr(p.columns).map((col: any, i: number) => (
+                <div class="bcms-footer-col">
+                  {col?.heading ? <h4 {...bind(block.id, `columns[${i}].heading`, "text", bctx)}>{col.heading}</h4> : null}
+                  <ul>
+                    {/* Two indices deep — the deepest addressable thing on a page. */}
+                    {arr(col?.links).map((l: any, j: number) => (
+                      <li>
+                        <a
+                          href={l?.href ?? "#"}
+                          {...bind(block.id, `columns[${i}].links[${j}].label`, "text", bctx)}
+                          {...bindProps(block.id, [{ prop: `columns[${i}].links[${j}].href`, kind: "url", attr: "href", present: l?.href != null }], bctx)}
+                        >
+                          {l?.label ?? ""}
+                        </a>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              ))}
+            </div>
+            {p.copyright ? <p class="bcms-footer-copy" {...bind(block.id, "copyright", "text", bctx)}>{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}
+            {...blockAttrs}
+          >
+            <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 {...blockAttrs}>
+            <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)}
+                  {...bind(block.id, `tabs[${i}].label`, "text", bctx)}
+                >
+                  {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;
+        // 🔴 `fieldAddresses` AFTER `{...pass}`: the instance's own map must replace the
+        // enclosing one, not inherit it. Every stamp inside this subtree otherwise names a
+        // block belonging to the DEFINITION — shared by every instance of it, so it resolves
+        // to no field on one placement and collides into a dropped duplicate on two.
+        return (
+          <Astro.self
+            blocks={showScheduled ? resolved.blocks : visibleBlocks(resolved.blocks, at)}
+            depth={depth + 1}
+            seen={[...seen, resolved.id]}
+            containerAttrs={{
+              ...blockAttrs,
+              "data-bcms-component": resolved.id,
+              "data-bcms-variant": "base",
+              "data-bcms-instance": block.id,
+            }}
+            {...pass}
+            fieldAddresses={owner === null ? new Map() : componentInstanceAddresses(block.id, resolved.props, owner)}
+          />
+        );
+      }
+      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.
+    if (node == null) return null;
+    /**
+     * The style wrapper is the ONLY wrapper left, and it is unchanged: a style token needs a box
+     * to apply to. When it exists it IS this block's root, so it carries the marker and
+     * `blockAttrs` above is empty — the two are mutually exclusive by construction, so a block
+     * never gets the attribute twice and never gets a second <div>.
+     *
+     * Everything else now carries `data-bcms-block` on its own root (see `blockAttrs` above).
+     */
+    /**
+     * The content column (`contentWidth`) is a SECOND box inside the style wrapper, as on the
+     * hosted lane (`applyBlockStyle`) and the Next adapter: the wrapper keeps the full-bleed
+     * background and only the inner box narrows. With a column and no other style, the column
+     * box is the root and carries the marker instead.
+     */
+    const stamp = nested ? undefined : block.id;
+    if (style && inner) return <div style={style} data-bcms-hide={hide} data-bcms-block={stamp} data-bcms-window={scheduled}><div class="bcms-block-inner" style={inner}>{node}</div></div>;
+    if (hide) return <div style={style} data-bcms-hide={hide} data-bcms-block={stamp} data-bcms-window={scheduled}>{inner ? <div class="bcms-block-inner" style={inner}>{node}</div> : node}</div>;
+    if (inner) return <div class="bcms-block-inner" style={inner} data-bcms-block={stamp} data-bcms-window={scheduled}>{node}</div>;
+    if (style) return <div style={style} data-bcms-block={stamp} data-bcms-window={scheduled}>{node}</div>;
+    return 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>
+)}