@bettercms-ai/astro 0.7.0 → 0.8.0

package/components/BcmsBlocks.astro

@@ -137,7 +137,16 @@ const needsTabs = !nested && containsType(blocks, "tabs");
 const pass = { forms, components, turnstileSiteKey, nested: true };
 ---
 
-<div class={className}>
+<!--
+  `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.
+-->
+<div class={className} data-bcms-page={nested ? undefined : ""}>
   {blocks.map((block) => {
     const p = anyProps(block);
     const style = styleAttr(block);
@@ -295,7 +304,28 @@ const pass = { forms, components, turnstileSiteKey, nested: true };
     })();
     // FLO-264: honour the block's bounded style tokens here too, so Astro output matches
     // the builder canvas, the Next adapter and the hosted site.
-    return style && node != null ? <div style={style}>{node}</div> : node;
+    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.
+     *
+     * When a style wrapper already exists the attribute rides it, so this never adds a SECOND div.
+     */
+    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>;
+    return node;
   })}
 </div>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bettercms-ai/astro",
-  "version": "0.7.0",
+  "version": "0.8.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",