@bettercms-ai/astro 0.8.2 → 0.8.3

package/components/BcmsBlocks.astro

@@ -46,6 +46,10 @@ 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>;
   class?: string;
 }
 
@@ -60,6 +64,7 @@ const {
   depth = 0,
   seen = [],
   nested = false,
+  containerAttrs = {},
   class: className,
 } = Astro.props;
 const formMap = new Map(forms.map((f) => [f.id, f]));
@@ -150,46 +155,68 @@ 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 data-bcms-field={`${block.id}__text`} {...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" data-bcms-field={`${block.id}__html`} data-bcms-kind="richtext" {...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" };
         return p.caption ? (
-          <figure>
+          <figure {...blockAttrs}>
             <BcmsImage src={p.src} alt={p.alt ?? ""} width={p.width} height={p.height} {...bind} />
             <figcaption>{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} {...bind} {...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 ?? "#"} data-bcms-field={`${block.id}__text`} {...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 {...blockAttrs} />
         );
       case "columns": {
         const cols: ContentBlock[][] = Array.isArray(p.columns) ? p.columns : [];
@@ -197,6 +224,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 +236,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 +248,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,7 +257,7 @@ 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 ?? ""} />
@@ -243,7 +272,7 @@ const pass = { forms, components, turnstileSiteKey, nested: true };
       }
       case "footer":
         return (
-          <footer class="bcms-footer">
+          <footer class="bcms-footer" {...blockAttrs}>
             <div class="bcms-footer-cols">
               {arr(p.columns).map((col: any) => (
                 <div class="bcms-footer-col">
@@ -268,6 +297,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,7 +312,7 @@ 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)}>
@@ -300,7 +330,7 @@ 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} />;
+        return <Astro.self blocks={resolved.blocks} depth={depth + 1} seen={[...seen, resolved.id]} containerAttrs={blockAttrs} {...pass} />;
       }
       default:
         return null;
@@ -310,25 +340,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.8.3",
   "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.10.0",
+    "@bettercms-ai/ui": "^0.6.0"
   },
   "peerDependencies": {
     "astro": ">=4"