@bettercms-ai/astro 0.24.0 → 0.26.0

package/components/BcmsButton.astro

@@ -1,44 +1,44 @@
----
-/**
- * <BcmsButton> — render a `button` field ({ label, href, variant?, size?, arrow?, icon?,
- * newTab? }) as one editable button, the way the BetterCMS visual editor and in-place publishing
- * expect to find it:
- *
- *   <a data-bcms-button="<path>" data-variant data-size href [target rel] data-bcms-props="<path>.href|url|href">
- *     [<svg class="bcms-btn-icon">]<span data-bcms-field="<path>.label">Label</span>[<svg class="bcms-btn-arrow">]
- *   </a>
- *
- * Style it by `data-variant` (primary · secondary · tertiary · brand · dark · light · outline ·
- * link) and `data-size` (sm · md · lg) in your own CSS: the editor repaints those attributes as the
- * author picks, and publishing writes them into the live page, so your stylesheet decides what a
- * look looks like. `class` is passed through untouched.
- *
- *   <BcmsButton path="hero.cta" value={page.hero.cta} class="btn" />
- */
-import { formatPropsAttribute, readButtonValue, buttonIconSvg } from "@bettercms-ai/types";
-
-interface Props {
-  /** The field path in the editor grammar, e.g. `cta` or `hero.cta`. */
-  path: string;
-  /** The stored value. Missing keys render as the defaults (Primary, medium, no arrow, no icon). */
-  value: unknown;
-  class?: string;
-}
-const { path, value, class: className } = Astro.props;
-const b = readButtonValue(value);
----
-{b.label && (
-  <a
-    class={className}
-    href={b.href || "#"}
-    data-bcms-button={path}
-    data-variant={b.variant}
-    data-size={b.size}
-    data-bcms-props={formatPropsAttribute([{ address: `${path}.href`, kind: "url", attr: "href" }])}
-    {...(b.newTab ? { target: "_blank", rel: "noopener noreferrer" } : {})}
-  >
-    {b.icon && <Fragment set:html={buttonIconSvg(b.icon, "bcms-btn-icon")} />}
-    <span data-bcms-field={`${path}.label`} data-bcms-kind="text">{b.label}</span>
-    {b.arrow && <Fragment set:html={buttonIconSvg("arrow-right", "bcms-btn-arrow")} />}
-  </a>
-)}
+---
+/**
+ * <BcmsButton> — render a `button` field ({ label, href, variant?, size?, arrow?, icon?,
+ * newTab? }) as one editable button, the way the BetterCMS visual editor and in-place publishing
+ * expect to find it:
+ *
+ *   <a data-bcms-button="<path>" data-variant data-size href [target rel] data-bcms-props="<path>.href|url|href">
+ *     [<svg class="bcms-btn-icon">]<span data-bcms-field="<path>.label">Label</span>[<svg class="bcms-btn-arrow">]
+ *   </a>
+ *
+ * Style it by `data-variant` (primary · secondary · tertiary · brand · dark · light · outline ·
+ * link) and `data-size` (sm · md · lg) in your own CSS: the editor repaints those attributes as the
+ * author picks, and publishing writes them into the live page, so your stylesheet decides what a
+ * look looks like. `class` is passed through untouched.
+ *
+ *   <BcmsButton path="hero.cta" value={page.hero.cta} class="btn" />
+ */
+import { formatPropsAttribute, readButtonValue, buttonIconSvg } from "@bettercms-ai/types";
+
+interface Props {
+  /** The field path in the editor grammar, e.g. `cta` or `hero.cta`. */
+  path: string;
+  /** The stored value. Missing keys render as the defaults (Primary, medium, no arrow, no icon). */
+  value: unknown;
+  class?: string;
+}
+const { path, value, class: className } = Astro.props;
+const b = readButtonValue(value);
+---
+{b.label && (
+  <a
+    class={className}
+    href={b.href || "#"}
+    data-bcms-button={path}
+    data-variant={b.variant}
+    data-size={b.size}
+    data-bcms-props={formatPropsAttribute([{ address: `${path}.href`, kind: "url", attr: "href" }])}
+    {...(b.newTab ? { target: "_blank", rel: "noopener noreferrer" } : {})}
+  >
+    {b.icon && <Fragment set:html={buttonIconSvg(b.icon, "bcms-btn-icon")} />}
+    <span data-bcms-field={`${path}.label`} data-bcms-kind="text">{b.label}</span>
+    {b.arrow && <Fragment set:html={buttonIconSvg("arrow-right", "bcms-btn-arrow")} />}
+  </a>
+)}

package/components/BcmsField.astro

@@ -1,30 +1,39 @@
----
-/**
- * <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` · `columns[0].links[2].href`
- * (dotted keys and any number of `[n]` indices). 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>
+---
+/**
+ * <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.
+ *
+ * When the slot is ONE element, the attributes go on that element and nothing is added to
+ * the page: `.hero > h1` and every animation target stay what the author wrote. Text, or
+ * several elements, are wrapped in a `display:contents` span as before; pass `as` to carry
+ * the attributes on a real wrapper instead.
+ *
+ * `path` follows the editor grammar: `title` · `hero.title` · `columns[0].links[2].href`
+ * (dotted keys and any number of `[n]` indices). 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. Without it: no wrapper around a single element, a `display:contents` span around anything else. */
+  as?: string;
+}
+import { stampSoleElement } from "../dist/bindings.js";
+
+const { path, kind, as } = Astro.props;
+const Tag = (as ?? "span") as keyof HTMLElementTagNameMap;
+// Rendered once, here: the same markup is either stamped or wrapped below.
+const slot = await Astro.slots.render("default");
+const sole = as ? null : stampSoleElement(slot, { "data-bcms-field": path, "data-bcms-kind": kind });
+---
+{sole !== null ? <Fragment set:html={sole} /> : (
+<Tag data-bcms-field={path} data-bcms-kind={kind} style={as ? undefined : "display:contents"}>
+  <Fragment set:html={slot} />
+</Tag>
+)}