@bettercms-ai/astro 0.8.3 → 0.9.1

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";
@@ -50,6 +51,11 @@ interface Props {
    *  `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;
 }
 
@@ -65,8 +71,11 @@ const {
   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]));
 
@@ -96,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;
@@ -105,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 ?? [] };
 }
 
 /**
@@ -139,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 };
 ---
 
 {/*
@@ -185,30 +201,41 @@ const pass = { forms, components, turnstileSiteKey, nested: true };
     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`} {...blockAttrs}>{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" {...blockAttrs} 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 {...blockAttrs}>
-            <BcmsImage src={p.src} alt={p.alt ?? ""} width={p.width} height={p.height} {...bind} />
-            <figcaption>{p.caption}</figcaption>
+            <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} {...blockAttrs} />
+          <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`} {...blockAttrs}>
+          <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>
         );
@@ -216,7 +243,24 @@ const pass = { forms, components, turnstileSiteKey, nested: true };
         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 {...blockAttrs} />
+          <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 : [];
@@ -260,13 +304,37 @@ const pass = { forms, components, turnstileSiteKey, nested: true };
           <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>
         );
       }
@@ -274,16 +342,27 @@ const pass = { forms, components, turnstileSiteKey, nested: true };
         return (
           <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":
@@ -315,7 +394,13 @@ const pass = { forms, components, turnstileSiteKey, nested: true };
           <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>
               ))}
@@ -330,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]} containerAttrs={blockAttrs} {...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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bettercms-ai/astro",
-  "version": "0.8.3",
+  "version": "0.9.1",
   "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",
@@ -47,9 +47,9 @@
     "test:watch": "vitest"
   },
   "dependencies": {
-    "@bettercms-ai/image-url": "^0.2.0",
-    "@bettercms-ai/sdk": "^1.13.0",
-    "@bettercms-ai/types": "^1.10.0",
+    "@bettercms-ai/image-url": "^0.3.0",
+    "@bettercms-ai/sdk": "^1.13.1",
+    "@bettercms-ai/types": "^1.11.0",
     "@bettercms-ai/ui": "^0.6.0"
   },
   "peerDependencies": {