@bettercms-ai/astro 0.2.1 → 0.4.0

package/components/BcmsBlocks.astro

@@ -5,8 +5,8 @@
  * with `columns` recursing via Astro.self and `form` resolving from the `forms`
  * prop. Class names mirror the server-side renderer.
  */
-import type { ContentBlock } from "@betttercms/types";
-import type { DeliveryForm } from "@betttercms/sdk";
+import type { ContentBlock } from "@bettercms-ai/types";
+import type { DeliveryForm } from "@bettercms-ai/sdk";
 import BcmsImage from "./BcmsImage.astro";
 import BcmsForm from "./BcmsForm.astro";
 
@@ -30,22 +30,27 @@ const anyProps = (b: ContentBlock) => (b as { props?: Record<string, any> }).pro
     switch (block.type) {
       case "heading": {
         const Tag = `h${clamp(Number(p.level) || 2, 1, 6)}` as keyof HTMLElementTagNameMap;
-        return <Tag>{p.text}</Tag>;
+        return <Tag data-bcms-field={`${block.id}__text`}>{p.text}</Tag>;
       }
       case "text":
-        return <div class="bcms-text" set:html={p.html ?? ""} />;
-      case "image":
+        return <div class="bcms-text" data-bcms-field={`${block.id}__html`} data-bcms-kind="richtext" 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>
-            <BcmsImage src={p.src} alt={p.alt ?? ""} width={p.width} height={p.height} />
+            <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} />
+          <BcmsImage src={p.src} alt={p.alt ?? ""} width={p.width} height={p.height} {...bind} />
         );
+      }
       case "button":
         return (
-          <a class={`bcms-btn bcms-btn-${p.variant === "secondary" ? "secondary" : "primary"}`} href={p.href ?? "#"}>
+          <a class={`bcms-btn bcms-btn-${p.variant === "secondary" ? "secondary" : "primary"}`} href={p.href ?? "#"} data-bcms-field={`${block.id}__text`}>
             {p.text}
           </a>
         );

package/components/BcmsField.astro

@@ -0,0 +1,30 @@
+---
+/**
+ * <BcmsField> — tag an entry field's rendered value with its identity so the
+ * BetterCMS visual editor can bind click-to-edit deterministically (mirrors
+ * Sanity's `data-sanity` / BaseHub's `data-basehub`). Entry-backed templates
+ * hand-render field values (`f.title`, `f.body.html`), so the field `path` is
+ * declared here by the author — the delivery payload carries no source-map.
+ *
+ * By default wraps the slot in a `display:contents` span, invisible to
+ * layout/GSAP; pass `as` to carry the attributes on a real element instead.
+ *
+ * `path` follows the editor grammar: `title` · `hero.title` · `facts[2].label`
+ * (dotted keys, at most one array index). For images, put the attributes on the
+ * `<img>` itself (`kind="image"` reflection patches `.src`), not on a wrapper:
+ *   <img src={f.cover.url} data-bcms-field="cover" data-bcms-kind="image" />
+ */
+interface Props {
+  /** Field path in the editor grammar, e.g. `title` or `facts[2].label`. */
+  path: string;
+  /** Kind hint the editor's reflection branches on. Omit for plain text/number. */
+  kind?: "richtext" | "image";
+  /** Wrapper element. Defaults to a `display:contents` span. */
+  as?: string;
+}
+const { path, kind, as } = Astro.props;
+const Tag = (as ?? "span") as keyof HTMLElementTagNameMap;
+---
+<Tag data-bcms-field={path} data-bcms-kind={kind} style={as ? undefined : "display:contents"}>
+  <slot />
+</Tag>

package/components/BcmsImage.astro

@@ -21,6 +21,8 @@ interface Props {
   sizes?: string;
   loading?: "lazy" | "eager";
   class?: string;
+  /** Any other attribute (e.g. `data-bcms-field`) is forwarded to the <img>. */
+  [attr: string]: unknown;
 }
 
 const {
@@ -34,6 +36,7 @@ const {
   sizes,
   loading = "lazy",
   class: className,
+  ...rest
 } = Astro.props;
 
 const builder = imageUrlBuilder({ baseUrl: config.mediaUrl });
@@ -60,4 +63,5 @@ const src2x = make().dpr(2).url();
   sizes={sizes}
   loading={loading}
   class={className}
+  {...rest}
 />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bettercms-ai/astro",
-  "version": "0.2.1",
+  "version": "0.4.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",
@@ -26,6 +26,7 @@
     "./draft-enable": "./dist/routes/draft-enable.js",
     "./draft-disable": "./dist/routes/draft-disable.js",
     "./components/BcmsBlocks.astro": "./components/BcmsBlocks.astro",
+    "./components/BcmsField.astro": "./components/BcmsField.astro",
     "./components/BcmsForm.astro": "./components/BcmsForm.astro",
     "./components/BcmsSearch.astro": "./components/BcmsSearch.astro",
     "./components/BcmsImage.astro": "./components/BcmsImage.astro",