@bettercms-ai/astro 0.8.2 → 0.9.0

package/components/BcmsBlocks.astro

@@ -26,7 +26,8 @@
  * actually contains that block (mirrors render-page.ts's `ctx.flags` gating).
  */
 import type { ContentBlock } from "@bettercms-ai/types";
-import { blockStyleToCss } from "@bettercms-ai/types";
+import { blockStyleToCss, componentInstanceAddresses } from "@bettercms-ai/types";
+import { bind, bindProps } from "../src/bindings.js";
 import type { DeliveryComponent, DeliveryForm } from "@bettercms-ai/sdk";
 import { applyOverrides } from "@bettercms-ai/ui/resolve";
 import BcmsImage from "./BcmsImage.astro";
@@ -46,6 +47,15 @@ interface Props {
   /** 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>;
   class?: string;
 }
 
@@ -60,8 +70,12 @@ const {
   depth = 0,
   seen = [],
   nested = false,
+  containerAttrs = {},
+  fieldAddresses,
   class: className,
 } = Astro.props;
+/** 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]));
 
@@ -91,7 +105,9 @@ function styleAttr(block: ContentBlock): string | undefined {
  * 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 {
+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;
@@ -100,7 +116,9 @@ function resolveComponent(p: Record<string, any>): { id: string; blocks: Content
     def.props ?? [],
     (p.overrides as Record<string, unknown>) ?? {},
   );
-  return { id: def.id, blocks: resolved };
+  // `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 ?? [] };
 }
 
 /**
@@ -134,7 +152,10 @@ 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 };
+// `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 };
 ---
 
 {/*
@@ -150,46 +171,96 @@ const pass = { forms, components, turnstileSiteKey, nested: true };
   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 : ""}>
+<div class={className} data-bcms-page={nested ? undefined : ""} {...containerAttrs}>
   {blocks.map((block) => {
     const p = anyProps(block);
     const style = styleAttr(block);
+    /**
+     * 🔴 `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).
+     */
+    const blockAttrs = nested || style ? {} : { "data-bcms-block": block.id };
     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>;
+        return <Tag {...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":
-        return <div class="bcms-text" data-bcms-field={`${block.id}__html`} data-bcms-kind="richtext" set:html={p.html ?? ""} />;
+        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.
-        const bind = { "data-bcms-field": `${block.id}__src`, "data-bcms-kind": "image" };
+        // `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>
-            <BcmsImage src={p.src} alt={p.alt ?? ""} width={p.width} height={p.height} {...bind} />
-            <figcaption>{p.caption}</figcaption>
+          <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} {...bind} />
+          <BcmsImage src={p.src} alt={p.alt ?? ""} width={p.width} height={p.height} {...imgBind} {...blockAttrs} />
         );
       }
       case "button":
         return (
-          <a class={`bcms-btn bcms-btn-${p.variant === "secondary" ? "secondary" : "primary"}`} href={p.href ?? "#"} data-bcms-field={`${block.id}__text`}>
+          <a
+            class={`bcms-btn bcms-btn-${p.variant === "secondary" ? "secondary" : "primary"}`}
+            href={p.href ?? "#"}
+            {...bind(block.id, "text", "text", bctx)}
+            {...bindProps(block.id, [{ prop: "href", kind: "url", attr: "href", present: p.href != null }], bctx)}
+            {...blockAttrs}
+          >
             {p.text}
           </a>
         );
       case "spacer":
-        return <div class="bcms-spacer" style={`height:${Number(p.height) || 0}px`} />;
+        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 />
+          <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 : [];
@@ -197,6 +268,7 @@ const pass = { forms, components, turnstileSiteKey, nested: true };
           <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">
@@ -208,7 +280,7 @@ const pass = { forms, components, turnstileSiteKey, nested: true };
       }
       case "form": {
         const form = formMap.get(p.formId);
-        return form ? <BcmsForm form={form} turnstileSiteKey={turnstileSiteKey} /> : null;
+        return form ? <BcmsForm form={form} turnstileSiteKey={turnstileSiteKey} {...blockAttrs} /> : null;
       }
       case "section": {
         const inner = <Astro.self blocks={arr(p.children)} depth={depth} seen={seen} {...pass} />;
@@ -220,6 +292,7 @@ const pass = { forms, components, turnstileSiteKey, nested: true };
               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>
@@ -228,33 +301,68 @@ const pass = { forms, components, turnstileSiteKey, nested: true };
       case "navbar": {
         const logo = p.logo && typeof p.logo === "object" ? p.logo : null;
         return (
-          <nav class="bcms-navbar">
+          <nav class="bcms-navbar" {...blockAttrs}>
             {logo?.src ? (
               <a class="bcms-navbar-logo" href={logo.href ?? "/"}>
-                <img src={logo.src} alt={logo.alt ?? ""} />
+                <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">
-              {arr(p.links).map((l: any) => <a href={l?.href ?? "#"}>{l?.label ?? ""}</a>)}
+              {/* 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 ?? "#"}>{p.cta.text}</a> : null}
+            {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">
+          <footer class="bcms-footer" {...blockAttrs}>
             <div class="bcms-footer-cols">
-              {arr(p.columns).map((col: any) => (
+              {arr(p.columns).map((col: any, i: number) => (
                 <div class="bcms-footer-col">
-                  {col?.heading ? <h4>{col.heading}</h4> : null}
+                  {col?.heading ? <h4 {...bind(block.id, `columns[${i}].heading`, "text", bctx)}>{col.heading}</h4> : null}
                   <ul>
-                    {arr(col?.links).map((l: any) => <li><a href={l?.href ?? "#"}>{l?.label ?? ""}</a></li>)}
+                    {/* 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">{p.copyright}</p> : null}
+            {p.copyright ? <p class="bcms-footer-copy" {...bind(block.id, "copyright", "text", bctx)}>{p.copyright}</p> : null}
           </footer>
         );
       case "slider":
@@ -268,6 +376,7 @@ const pass = { forms, components, turnstileSiteKey, nested: true };
             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) => (
@@ -282,10 +391,16 @@ const pass = { forms, components, turnstileSiteKey, nested: true };
         );
       case "tabs":
         return (
-          <div class="bcms-tabs" data-bcms-tabs>
+          <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)}>
+                <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>
               ))}
@@ -300,7 +415,20 @@ const pass = { forms, components, turnstileSiteKey, nested: true };
       case "component": {
         const resolved = resolveComponent(p);
         if (!resolved) return null;
-        return <Astro.self blocks={resolved.blocks} depth={depth + 1} seen={[...seen, resolved.id]} {...pass} />;
+        // 🔴 `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={resolved.blocks}
+            depth={depth + 1}
+            seen={[...seen, resolved.id]}
+            containerAttrs={blockAttrs}
+            {...pass}
+            fieldAddresses={componentInstanceAddresses(block.id, resolved.props)}
+          />
+        );
       }
       default:
         return null;
@@ -310,25 +438,14 @@ const pass = { forms, components, turnstileSiteKey, nested: true };
     // the builder canvas, the Next adapter and the hosted site.
     if (node == null) return null;
     /**
-     * 🔴 `data-bcms-block` — the Visual Editor hit-tests this to find sections. Without it the
-     * editor renders every block and recognises none of them, so move / duplicate / delete /
-     * reorder and per-section presence never appear on an Astro site. Field bindings alone
-     * (`data-bcms-field`) make text editable and tell the editor nothing about structure.
-     *
-     * TOP LEVEL ONLY (`!nested`): a section IS a top-level block, and tagging nested ones would
-     * make a column's child look like a section you could drag out of its parent.
-     *
-     * A wrapper element rather than an attribute on `node`, because Astro renders to HTML and has
-     * no `cloneElement` — the same constraint that made the hosted renderer wrap
-     * (`render-page.ts`), and the same reasoning applies: a plain block-level div, so a full-bleed
-     * section background still reaches the edges. The Next adapter clones instead, precisely
-     * because React lets it and a wrapper there would land inside the customer's own layout.
+     * 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>.
      *
-     * When a style wrapper already exists the attribute rides it, so this never adds a SECOND div.
+     * Everything else now carries `data-bcms-block` on its own root (see `blockAttrs` above).
      */
-    const blockId = nested ? undefined : block.id;
-    if (style) return <div style={style} data-bcms-block={blockId}>{node}</div>;
-    if (blockId) return <div data-bcms-block={blockId}>{node}</div>;
+    if (style) return <div style={style} data-bcms-block={nested ? undefined : block.id}>{node}</div>;
     return node;
   })}
 </div>

package/components/BcmsForm.astro

@@ -14,9 +14,14 @@ interface Props {
   form: DeliveryForm;
   turnstileSiteKey?: string | null;
   class?: string;
+  /** Anything else lands on the <form> itself. <BcmsBlocks> uses this to put a form block's
+   *  `data-bcms-block` marker on its own root — without it the attribute is passed as a prop
+   *  nothing reads, the marker silently vanishes, and a top-level form becomes a section the
+   *  Visual Editor cannot see. Caught by the marker canary in blocks.test.ts. */
+  [key: `data-${string}`]: unknown;
 }
 
-const { form, turnstileSiteKey, class: className } = Astro.props;
+const { form, turnstileSiteKey, class: className, ...rest } = Astro.props;
 const action = `${config.apiUrl}/api/v1/forms/public/${encodeURIComponent(form.id)}/submissions`;
 
 const INPUT_TYPE: Partial<Record<DeliveryFormField["type"], string>> = {
@@ -37,6 +42,7 @@ const showTurnstile = Boolean(form.turnstileEnabled && turnstileSiteKey);
   data-bcms-form={form.id}
   data-bcms-form-success={form.successMessage ?? "Thanks!"}
   data-bcms-form-redirect={form.redirectUrl ?? ""}
+  {...rest}
 >
   {form.fields?.map((f) => {
     const wrapAttrs = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bettercms-ai/astro",
-  "version": "0.8.2",
+  "version": "0.9.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,9 +48,9 @@
   },
   "dependencies": {
     "@bettercms-ai/image-url": "^0.2.0",
-    "@bettercms-ai/sdk": "^1.12.1",
-    "@bettercms-ai/types": "^1.8.0",
-    "@bettercms-ai/ui": "^0.4.0"
+    "@bettercms-ai/sdk": "^1.13.0",
+    "@bettercms-ai/types": "^1.11.0",
+    "@bettercms-ai/ui": "^0.6.0"
   },
   "peerDependencies": {
     "astro": ">=4"