@bettercms-ai/astro 0.23.0 → 0.24.0

package/components/BcmsImage.astro

@@ -1,112 +1,112 @@
----
-/**
- * <BcmsImage> — renders an optimized image via the BetterCMS media transform
- * endpoint, with a 1x/2x srcset. Accepts an asset id, a MediaAsset, a URL, or an image
- * VALUE (`{ url, altText, focal?, crop? }`) — whose per-placement crop and focal point are
- * applied by image-url itself (`rect`, and fx/fy inside the crop), the same as on every lane.
- */
-import config from "bettercms:config";
-import imageUrlBuilder, {
-  focalInCrop,
-  normalizeImageCrop,
-  normalizeImageFocal,
-  objectPosition,
-  type ImageSource,
-  type ImageFormat,
-  type ImageFit,
-} from "@bettercms-ai/image-url";
-
-interface Props {
-  src: ImageSource;
-  alt?: string;
-  width?: number;
-  height?: number;
-  format?: ImageFormat;
-  quality?: number;
-  fit?: ImageFit;
-  sizes?: string;
-  loading?: "lazy" | "eager";
-  class?: string;
-  /**
-   * Focal point override, 0–1. Normally omitted — the asset carries its own and the
-   * server applies it. Pass a MediaAsset with focalX/focalY as `src` and it is picked
-   * up automatically.
-   */
-  focalX?: number | null;
-  focalY?: number | null;
-  /** Any other attribute (e.g. `data-bcms-field`) is forwarded to the <img>. */
-  [attr: string]: unknown;
-}
-
-const {
-  src,
-  alt = "",
-  width,
-  height,
-  format = "webp",
-  quality,
-  fit,
-  sizes,
-  loading = "lazy",
-  class: className,
-  focalX,
-  focalY,
-  style,
-  ...rest
-} = Astro.props;
-
-// An explicit prop wins; then the value's own `focal`; then the asset's focalX/focalY. The
-// explicit prop is taken as given (window-relative when the value is cropped); the other two are
-// SOURCE-relative, so with a crop they are re-expressed inside it — image-url's focalInCrop.
-const asset = (typeof src === "object" && src !== null ? src : {}) as Record<string, unknown>;
-const explicit = focalX != null || focalY != null;
-const num = (v: unknown) => (typeof v === "number" && Number.isFinite(v) ? v : undefined);
-const stored =
-  normalizeImageFocal(asset.focal) ??
-  (num(asset.focalX) != null || num(asset.focalY) != null
-    ? { x: num(asset.focalX) ?? 0.5, y: num(asset.focalY) ?? 0.5 }
-    : null);
-const inWindow = stored ? focalInCrop(stored, normalizeImageCrop(asset.crop)) : null;
-const fx = explicit ? focalX : inWindow?.x;
-const fy = explicit ? focalY : inWindow?.y;
-const hasFocal = fx != null || fy != null;
-
-const builder = imageUrlBuilder({ baseUrl: config.mediaUrl });
-const make = () => {
-  let b = builder(src);
-  if (width) b = b.width(width);
-  if (height) b = b.height(height);
-  if (format) b = b.format(format);
-  if (quality) b = b.quality(quality);
-  if (fit) b = b.fit(fit);
-  if (hasFocal) b = b.focal(fx ?? 0.5, fy ?? 0.5);
-  return b;
-};
-
-const src1x = make().url();
-// A pixel width is the author's size for THIS image, so it goes on as a style (a site rule like
-// `img { width: 100% }` beats a bare attribute) — paired with max-width so it never overflows a
-// narrower column, and height:auto so shrinking keeps the aspect ratio.
-const widthStyle = width ? `width:${width}px;max-width:100%;height:auto` : "";
-const src2x = make().dpr(2).url();
-
-// The CSS half of the same idea, and it is free. When only one dimension is pinned the
-// server does not crop, so the browser does — and `object-position` keeps the subject in
-// frame there too, but only if the stylesheet actually set `object-fit: cover`. Emitting
-// it unconditionally is harmless: `object-position` is inert without `object-fit`.
-const focalStyle = hasFocal ? `object-position:${objectPosition({ x: fx, y: fy })}` : "";
-const mergedStyle = [widthStyle, focalStyle, typeof style === "string" ? style : ""].filter(Boolean).join(";");
----
-
-<img
-  src={src1x}
-  srcset={`${src1x} 1x, ${src2x} 2x`}
-  alt={alt}
-  width={width}
-  height={height}
-  sizes={sizes}
-  loading={loading}
-  class={className}
-  style={mergedStyle || undefined}
-  {...rest}
-/>
+---
+/**
+ * <BcmsImage> — renders an optimized image via the BetterCMS media transform
+ * endpoint, with a 1x/2x srcset. Accepts an asset id, a MediaAsset, a URL, or an image
+ * VALUE (`{ url, altText, focal?, crop? }`) — whose per-placement crop and focal point are
+ * applied by image-url itself (`rect`, and fx/fy inside the crop), the same as on every lane.
+ */
+import config from "bettercms:config";
+import imageUrlBuilder, {
+  focalInCrop,
+  normalizeImageCrop,
+  normalizeImageFocal,
+  objectPosition,
+  type ImageSource,
+  type ImageFormat,
+  type ImageFit,
+} from "@bettercms-ai/image-url";
+
+interface Props {
+  src: ImageSource;
+  alt?: string;
+  width?: number;
+  height?: number;
+  format?: ImageFormat;
+  quality?: number;
+  fit?: ImageFit;
+  sizes?: string;
+  loading?: "lazy" | "eager";
+  class?: string;
+  /**
+   * Focal point override, 0–1. Normally omitted — the asset carries its own and the
+   * server applies it. Pass a MediaAsset with focalX/focalY as `src` and it is picked
+   * up automatically.
+   */
+  focalX?: number | null;
+  focalY?: number | null;
+  /** Any other attribute (e.g. `data-bcms-field`) is forwarded to the <img>. */
+  [attr: string]: unknown;
+}
+
+const {
+  src,
+  alt = "",
+  width,
+  height,
+  format = "webp",
+  quality,
+  fit,
+  sizes,
+  loading = "lazy",
+  class: className,
+  focalX,
+  focalY,
+  style,
+  ...rest
+} = Astro.props;
+
+// An explicit prop wins; then the value's own `focal`; then the asset's focalX/focalY. The
+// explicit prop is taken as given (window-relative when the value is cropped); the other two are
+// SOURCE-relative, so with a crop they are re-expressed inside it — image-url's focalInCrop.
+const asset = (typeof src === "object" && src !== null ? src : {}) as Record<string, unknown>;
+const explicit = focalX != null || focalY != null;
+const num = (v: unknown) => (typeof v === "number" && Number.isFinite(v) ? v : undefined);
+const stored =
+  normalizeImageFocal(asset.focal) ??
+  (num(asset.focalX) != null || num(asset.focalY) != null
+    ? { x: num(asset.focalX) ?? 0.5, y: num(asset.focalY) ?? 0.5 }
+    : null);
+const inWindow = stored ? focalInCrop(stored, normalizeImageCrop(asset.crop)) : null;
+const fx = explicit ? focalX : inWindow?.x;
+const fy = explicit ? focalY : inWindow?.y;
+const hasFocal = fx != null || fy != null;
+
+const builder = imageUrlBuilder({ baseUrl: config.mediaUrl });
+const make = () => {
+  let b = builder(src);
+  if (width) b = b.width(width);
+  if (height) b = b.height(height);
+  if (format) b = b.format(format);
+  if (quality) b = b.quality(quality);
+  if (fit) b = b.fit(fit);
+  if (hasFocal) b = b.focal(fx ?? 0.5, fy ?? 0.5);
+  return b;
+};
+
+const src1x = make().url();
+// A pixel width is the author's size for THIS image, so it goes on as a style (a site rule like
+// `img { width: 100% }` beats a bare attribute) — paired with max-width so it never overflows a
+// narrower column, and height:auto so shrinking keeps the aspect ratio.
+const widthStyle = width ? `width:${width}px;max-width:100%;height:auto` : "";
+const src2x = make().dpr(2).url();
+
+// The CSS half of the same idea, and it is free. When only one dimension is pinned the
+// server does not crop, so the browser does — and `object-position` keeps the subject in
+// frame there too, but only if the stylesheet actually set `object-fit: cover`. Emitting
+// it unconditionally is harmless: `object-position` is inert without `object-fit`.
+const focalStyle = hasFocal ? `object-position:${objectPosition({ x: fx, y: fy })}` : "";
+const mergedStyle = [widthStyle, focalStyle, typeof style === "string" ? style : ""].filter(Boolean).join(";");
+---
+
+<img
+  src={src1x}
+  srcset={`${src1x} 1x, ${src2x} 2x`}
+  alt={alt}
+  width={width}
+  height={height}
+  sizes={sizes}
+  loading={loading}
+  class={className}
+  style={mergedStyle || undefined}
+  {...rest}
+/>

package/components/BcmsLive.astro

@@ -1,66 +1,66 @@
----
-/**
- * <BcmsLive> — opens the BetterCMS delivery live SSE stream in the browser and
- * keeps the page current. Drop it once, e.g. in your layout. Build `src` with
- * `liveSrc({ apiUrl, workspace, apiKey })` from `@bettercms-ai/astro` (use a
- * content:read key — it is browser-exposed).
- *
- * Every change frame is dispatched on `window` as a cancelable `bcms:change`
- * CustomEvent whose `detail` is the frame — including `detail.doc`, the finished
- * delivery document the server already hydrated for you. Patch the DOM from it
- * and call `preventDefault()` to keep the page as it is:
- *
- *   window.addEventListener("bcms:change", (e) => {
- *     if (e.detail.slug !== "home") return;
- *     document.querySelector("h1").textContent = e.detail.doc.data.title;
- *     e.preventDefault();          // handled — skip the reload
- *   });
- *
- * Nothing handles it → the page reloads, as it always did. That fallback is why
- * this is safe to drop into an existing site unchanged.
- *
- * `tags` narrows which changes count at all. Without it a publish anywhere in the
- * workspace reloads every open tab, including pages that render none of it.
- */
-interface Props {
-  src: string;
-  /** Only react to changes carrying one of these tags. Omit = react to all. */
-  tags?: string[];
-}
-const { src, tags } = Astro.props;
----
-
-<script is:inline define:vars={{ src, tags }}>
-  try {
-    const es = new EventSource(src);
-    es.addEventListener("change", (e) => {
-      let detail;
-      try {
-        detail = JSON.parse(e.data);
-      } catch {
-        return;
-      }
-      if (tags?.length && !detail.tags?.some((t) => tags.includes(t))) return;
-      const handled = !window.dispatchEvent(
-        new CustomEvent("bcms:change", { detail, cancelable: true }),
-      );
-      if (!handled) window.location.reload();
-    });
-  } catch (e) {
-    /* EventSource unsupported — no live refresh */
-  }
-
-  // Soft refresh for the BetterCMS canvas. The editor knows which of its writes are
-  // STRUCTURAL and asks for a re-render only for those; the ack is what tells it this page
-  // answered, so it does not remount the iframe (which throws away an inline text session).
-  // Same acceptance predicate as the Next draft bridge: own origin, and the parent frame.
-  if (window.parent !== window) {
-    window.addEventListener("message", (e) => {
-      if (e.origin !== location.origin || e.source !== window.parent) return;
-      if (e.data?.type !== "bcms:refresh") return;
-      // Ack BEFORE reloading — after it, this frame is gone and the editor has timed out.
-      window.parent.postMessage({ type: "bcms:refreshed" }, location.origin);
-      window.location.reload();
-    });
-  }
-</script>
+---
+/**
+ * <BcmsLive> — opens the BetterCMS delivery live SSE stream in the browser and
+ * keeps the page current. Drop it once, e.g. in your layout. Build `src` with
+ * `liveSrc({ apiUrl, workspace, apiKey })` from `@bettercms-ai/astro` (use a
+ * content:read key — it is browser-exposed).
+ *
+ * Every change frame is dispatched on `window` as a cancelable `bcms:change`
+ * CustomEvent whose `detail` is the frame — including `detail.doc`, the finished
+ * delivery document the server already hydrated for you. Patch the DOM from it
+ * and call `preventDefault()` to keep the page as it is:
+ *
+ *   window.addEventListener("bcms:change", (e) => {
+ *     if (e.detail.slug !== "home") return;
+ *     document.querySelector("h1").textContent = e.detail.doc.data.title;
+ *     e.preventDefault();          // handled — skip the reload
+ *   });
+ *
+ * Nothing handles it → the page reloads, as it always did. That fallback is why
+ * this is safe to drop into an existing site unchanged.
+ *
+ * `tags` narrows which changes count at all. Without it a publish anywhere in the
+ * workspace reloads every open tab, including pages that render none of it.
+ */
+interface Props {
+  src: string;
+  /** Only react to changes carrying one of these tags. Omit = react to all. */
+  tags?: string[];
+}
+const { src, tags } = Astro.props;
+---
+
+<script is:inline define:vars={{ src, tags }}>
+  try {
+    const es = new EventSource(src);
+    es.addEventListener("change", (e) => {
+      let detail;
+      try {
+        detail = JSON.parse(e.data);
+      } catch {
+        return;
+      }
+      if (tags?.length && !detail.tags?.some((t) => tags.includes(t))) return;
+      const handled = !window.dispatchEvent(
+        new CustomEvent("bcms:change", { detail, cancelable: true }),
+      );
+      if (!handled) window.location.reload();
+    });
+  } catch (e) {
+    /* EventSource unsupported — no live refresh */
+  }
+
+  // Soft refresh for the BetterCMS canvas. The editor knows which of its writes are
+  // STRUCTURAL and asks for a re-render only for those; the ack is what tells it this page
+  // answered, so it does not remount the iframe (which throws away an inline text session).
+  // Same acceptance predicate as the Next draft bridge: own origin, and the parent frame.
+  if (window.parent !== window) {
+    window.addEventListener("message", (e) => {
+      if (e.origin !== location.origin || e.source !== window.parent) return;
+      if (e.data?.type !== "bcms:refresh") return;
+      // Ack BEFORE reloading — after it, this frame is gone and the editor has timed out.
+      window.parent.postMessage({ type: "bcms:refreshed" }, location.origin);
+      window.location.reload();
+    });
+  }
+</script>

package/components/BcmsLiveBlocks.astro

@@ -1,72 +1,72 @@
----
-/**
- * <BcmsLiveBlocks> — <BcmsBlocks>, but as a hydrated island that speaks the visual editor's
- * draft bridge (E5 / FLO-1178).
- *
- * WHY IT IS NOT A .astro RENDERER. An .astro component is server-only: once the page is built
- * there is nothing on the client to hand a new document to, so an Astro site can only show the
- * editor a STATIC build and the canvas falls back to the platform's approximate renderer for
- * every draft. The bridge needs a live component tree, and the only one that already exists,
- * is at parity with this package, and speaks the protocol is <BcmsDraftBridge> from
- * @bettercms-ai/next — which imports nothing from `next/*` (React and @bettercms-ai/* only),
- * so it mounts here unchanged. Reused rather than reimplemented: one protocol, one twin to
- * keep in step instead of two.
- *
- * RUNTIME: Preact + `compat`, verified by the P2-1 spike (see ../SPIKE.md — SSR and hydration
- * of a heading + PortableText richtext + BcmsForm tree, both clean). The cost is real and worth
- * naming: preact plus its compat aliases on the island (~10 kB of runtime, so `react` itself is
- * never bundled even though @bettercms-ai/ui declares React peers), and `@bettercms-ai/next` as a
- * dependency of this package.
- *
- * 🔴 THE CLASS NAMES ARE THE REACT GRAMMAR, NOT THIS PACKAGE'S. <BcmsBlocks> in @bettercms-ai/next
- * emits `bcms-block bcms-block--text`, `bcms-button--primary`, `bcms-column`; BcmsBlocks.astro
- * emits `bcms-text`, `bcms-btn-primary`, `bcms-cols`. Same markup shape, different hooks — a
- * stylesheet written against the .astro grammar styles NOTHING here, and swapping a page from
- * <BcmsBlocks> to <BcmsLiveBlocks> unstyles it. Either cover both spellings (the starters use
- * `:is()` for exactly this) or read the React classes off @bettercms-ai/next's src/blocks.tsx.
- *
- * The consumer supplies the renderer, because an integration cannot be added from a component:
- *
- *   // astro.config.mjs
- *   import preact from "@astrojs/preact";
- *   export default defineConfig({ integrations: [bettercms(), preact({ compat: true })] });
- *
- *   ---
- *   import BcmsLiveBlocks from "@bettercms-ai/astro/components/BcmsLiveBlocks.astro";
- *   const page = await getPage(Astro.params.slug);
- *   ---
- *   <BcmsLiveBlocks slug={page.slug} blocks={page.blocks} forms={forms} />
- *
- * Standalone the island renders exactly what <BcmsBlocks> renders (inside the
- * `data-bcms-canvas="bridge"` marker <div> that <BcmsDraftBridge> emits); the bridge only
- * wakes when the editor frames the page and pushes a draft. This only helps pages whose body
- * IS a block tree — a hand-written .astro layout is unreachable from here by construction.
- */
-import { BcmsDraftBridge } from "@bettercms-ai/next/draft-bridge";
-import type { ContentBlock } from "@bettercms-ai/types";
-import type { DeliveryComponent, DeliveryForm } from "@bettercms-ai/sdk";
-
-interface Props {
-  /** The page's slug. A pushed draft is applied only when its slug matches. */
-  slug: string;
-  blocks: ContentBlock[];
-  forms?: DeliveryForm[];
-  components?: DeliveryComponent[];
-  turnstileSiteKey?: string;
-  apiBase?: string;
-  class?: string;
-}
-
-const { slug, blocks, forms, components, turnstileSiteKey, apiBase, class: className } = Astro.props;
----
-
-<BcmsDraftBridge
-  client:load
-  slug={slug}
-  blocks={blocks}
-  forms={forms}
-  components={components}
-  turnstileSiteKey={turnstileSiteKey}
-  apiBase={apiBase}
-  className={className}
-/>
+---
+/**
+ * <BcmsLiveBlocks> — <BcmsBlocks>, but as a hydrated island that speaks the visual editor's
+ * draft bridge (E5 / FLO-1178).
+ *
+ * WHY IT IS NOT A .astro RENDERER. An .astro component is server-only: once the page is built
+ * there is nothing on the client to hand a new document to, so an Astro site can only show the
+ * editor a STATIC build and the canvas falls back to the platform's approximate renderer for
+ * every draft. The bridge needs a live component tree, and the only one that already exists,
+ * is at parity with this package, and speaks the protocol is <BcmsDraftBridge> from
+ * @bettercms-ai/next — which imports nothing from `next/*` (React and @bettercms-ai/* only),
+ * so it mounts here unchanged. Reused rather than reimplemented: one protocol, one twin to
+ * keep in step instead of two.
+ *
+ * RUNTIME: Preact + `compat`, verified by the P2-1 spike (see ../SPIKE.md — SSR and hydration
+ * of a heading + PortableText richtext + BcmsForm tree, both clean). The cost is real and worth
+ * naming: preact plus its compat aliases on the island (~10 kB of runtime, so `react` itself is
+ * never bundled even though @bettercms-ai/ui declares React peers), and `@bettercms-ai/next` as a
+ * dependency of this package.
+ *
+ * 🔴 THE CLASS NAMES ARE THE REACT GRAMMAR, NOT THIS PACKAGE'S. <BcmsBlocks> in @bettercms-ai/next
+ * emits `bcms-block bcms-block--text`, `bcms-button--primary`, `bcms-column`; BcmsBlocks.astro
+ * emits `bcms-text`, `bcms-btn-primary`, `bcms-cols`. Same markup shape, different hooks — a
+ * stylesheet written against the .astro grammar styles NOTHING here, and swapping a page from
+ * <BcmsBlocks> to <BcmsLiveBlocks> unstyles it. Either cover both spellings (the starters use
+ * `:is()` for exactly this) or read the React classes off @bettercms-ai/next's src/blocks.tsx.
+ *
+ * The consumer supplies the renderer, because an integration cannot be added from a component:
+ *
+ *   // astro.config.mjs
+ *   import preact from "@astrojs/preact";
+ *   export default defineConfig({ integrations: [bettercms(), preact({ compat: true })] });
+ *
+ *   ---
+ *   import BcmsLiveBlocks from "@bettercms-ai/astro/components/BcmsLiveBlocks.astro";
+ *   const page = await getPage(Astro.params.slug);
+ *   ---
+ *   <BcmsLiveBlocks slug={page.slug} blocks={page.blocks} forms={forms} />
+ *
+ * Standalone the island renders exactly what <BcmsBlocks> renders (inside the
+ * `data-bcms-canvas="bridge"` marker <div> that <BcmsDraftBridge> emits); the bridge only
+ * wakes when the editor frames the page and pushes a draft. This only helps pages whose body
+ * IS a block tree — a hand-written .astro layout is unreachable from here by construction.
+ */
+import { BcmsDraftBridge } from "@bettercms-ai/next/draft-bridge";
+import type { ContentBlock } from "@bettercms-ai/types";
+import type { DeliveryComponent, DeliveryForm } from "@bettercms-ai/sdk";
+
+interface Props {
+  /** The page's slug. A pushed draft is applied only when its slug matches. */
+  slug: string;
+  blocks: ContentBlock[];
+  forms?: DeliveryForm[];
+  components?: DeliveryComponent[];
+  turnstileSiteKey?: string;
+  apiBase?: string;
+  class?: string;
+}
+
+const { slug, blocks, forms, components, turnstileSiteKey, apiBase, class: className } = Astro.props;
+---
+
+<BcmsDraftBridge
+  client:load
+  slug={slug}
+  blocks={blocks}
+  forms={forms}
+  components={components}
+  turnstileSiteKey={turnstileSiteKey}
+  apiBase={apiBase}
+  className={className}
+/>

package/components/BcmsSearch.astro

@@ -1,23 +1,23 @@
----
-/**
- * <BcmsSearch> — an instant, typo-tolerant site-search box for Astro.
- *
- * Renders the search container and loads the hosted widget bundle, so the markup
- * and behaviour are identical to the universal HTML embed (DRY — one widget, one
- * place). No API key — `project` (from the dashboard's Site Search settings) is
- * the only scope. Styling is class-driven (`bcms-search-*`); the host can override.
- */
-import config from "bettercms:config";
-
-interface Props {
-  project: string;
-  placeholder?: string;
-  class?: string;
-}
-
-const { project, placeholder = "Search…", class: className } = Astro.props;
-const widgetSrc = `${config.apiUrl}/widgets/search.js`;
----
-
-<div data-bcms-search data-project={project} data-placeholder={placeholder} class={className}></div>
-<script is:inline src={widgetSrc} async></script>
+---
+/**
+ * <BcmsSearch> — an instant, typo-tolerant site-search box for Astro.
+ *
+ * Renders the search container and loads the hosted widget bundle, so the markup
+ * and behaviour are identical to the universal HTML embed (DRY — one widget, one
+ * place). No API key — `project` (from the dashboard's Site Search settings) is
+ * the only scope. Styling is class-driven (`bcms-search-*`); the host can override.
+ */
+import config from "bettercms:config";
+
+interface Props {
+  project: string;
+  placeholder?: string;
+  class?: string;
+}
+
+const { project, placeholder = "Search…", class: className } = Astro.props;
+const widgetSrc = `${config.apiUrl}/widgets/search.js`;
+---
+
+<div data-bcms-search data-project={project} data-placeholder={placeholder} class={className}></div>
+<script is:inline src={widgetSrc} async></script>

package/components/BcmsVisualEditing.astro

@@ -1,26 +1,26 @@
----
-/**
- * <BcmsVisualEditing> — click-to-edit overlay for draft preview. Alt+Click any value
- * that carries stega provenance to open the matching dashboard editor on that field.
- * Render it only in draft mode.
- *
- *   import config from "bettercms:config";
- *   {Astro.locals.bcms?.draft && <BcmsVisualEditing studioUrl={config.studioUrl} />}
- *
- * The decoder is NOT inlined here. It is one script served from the dashboard origin
- * (`/bcms-visual-editing.js`), shared with @bettercms-ai/next and with plain-HTML sites
- * that install it by hand — a customer build is un-upgradable, so a copy baked into one
- * could never be fixed. Requires the read client to be in draft perspective with
- * `stega: true`; on a published build there is no provenance and the script is inert.
- */
-interface Props {
-  studioUrl?: string;
-}
-// `bettercms.ai` is the studio origin — the one the dashboard's integration snippets hand out
-// as `PUBLIC_BCMS_STUDIO_URL`, and the default of @bettercms-ai/next's <VisualEditing>.
-// `demo.bettercms.ai` is a stale alias; `dashboard.bettercms.ai` resolves but 404s.
-const { studioUrl = "https://bettercms.ai" } = Astro.props;
-const src = `${studioUrl.replace(/\/+$/, "")}/bcms-visual-editing.js`;
----
-
-<script is:inline src={src} data-bcms-studio={studioUrl} defer></script>
+---
+/**
+ * <BcmsVisualEditing> — click-to-edit overlay for draft preview. Alt+Click any value
+ * that carries stega provenance to open the matching dashboard editor on that field.
+ * Render it only in draft mode.
+ *
+ *   import config from "bettercms:config";
+ *   {Astro.locals.bcms?.draft && <BcmsVisualEditing studioUrl={config.studioUrl} />}
+ *
+ * The decoder is NOT inlined here. It is one script served from the dashboard origin
+ * (`/bcms-visual-editing.js`), shared with @bettercms-ai/next and with plain-HTML sites
+ * that install it by hand — a customer build is un-upgradable, so a copy baked into one
+ * could never be fixed. Requires the read client to be in draft perspective with
+ * `stega: true`; on a published build there is no provenance and the script is inert.
+ */
+interface Props {
+  studioUrl?: string;
+}
+// `bettercms.ai` is the studio origin — the one the dashboard's integration snippets hand out
+// as `PUBLIC_BCMS_STUDIO_URL`, and the default of @bettercms-ai/next's <VisualEditing>.
+// `demo.bettercms.ai` is a stale alias; `dashboard.bettercms.ai` resolves but 404s.
+const { studioUrl = "https://bettercms.ai" } = Astro.props;
+const src = `${studioUrl.replace(/\/+$/, "")}/bcms-visual-editing.js`;
+---
+
+<script is:inline src={src} data-bcms-studio={studioUrl} defer></script>

package/dist/bindings.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/bindings.ts"],"sourcesContent":["/**\n * Visual Editor addresses for the Astro renderer.\n *\n * Identical contract to `@bettercms-ai/next`'s `bindings.ts`, and the SAME reason for existing:\n * inside a component instance the definition's block ids address nothing, because they are\n * shared by every instance of it. Stamping them produces an orphan on one placement and a\n * duplicate that drops BOTH on two.\n *\n * Kept as a `.ts` module rather than inlined in the `.astro` frontmatter so the logic is\n * testable without an Astro compiler, and so the two SDKs cannot drift from each other by\n * having one file edited and not the other.\n */\nimport type { BindingKind } from \"@bettercms-ai/types\";\nimport { formatPropsAttribute } from \"@bettercms-ai/types\";\n\nexport interface BindingCtx {\n  /** Present only inside a component instance, where it is AUTHORITATIVE. */\n  fieldAddresses?: Map<string, string>;\n}\n\n/** The address a write lands on, or null when none exists. */\nexport function addressFor(id: string | undefined, prop: string, ctx: BindingCtx): string | null {\n  if (!id) return null;\n  const key = `${id}__${prop}`;\n  if (ctx.fieldAddresses) return ctx.fieldAddresses.get(key) ?? null;\n  return key;\n}\n\n/**\n * Attributes for a value rendered as this element's own content. Astro omits `undefined`\n * attributes, so an empty object spreads to nothing.\n */\nexport function bind(\n  id: string | undefined,\n  prop: string,\n  kind: BindingKind,\n  ctx: BindingCtx,\n): Record<string, string> {\n  const address = addressFor(id, prop, ctx);\n  return address ? { \"data-bcms-field\": address, \"data-bcms-kind\": kind } : {};\n}\n\n/**\n * Attributes for values that live in an ATTRIBUTE of this element. `data-bcms-field` addresses\n * one element and an element cannot hold two, so these ride `data-bcms-props`:\n * `<address>|<kind>|<domAttribute>`, semicolon separated.\n *\n * An entry whose value is absent is dropped — `setFieldPath` refuses to create a final key, so\n * the address would be a write the editor rejects.\n */\nexport function bindProps(\n  id: string | undefined,\n  entries: readonly { prop: string; kind: BindingKind; attr: string; present: boolean }[],\n  ctx: BindingCtx,\n): Record<string, string> {\n  const resolved = entries.flatMap(({ prop, kind, attr, present }) => {\n    if (!present) return [];\n    const address = addressFor(id, prop, ctx);\n    return address ? [{ address, kind, attr }] : [];\n  });\n  return resolved.length ? { \"data-bcms-props\": formatPropsAttribute(resolved) } : {};\n}\n"],"mappings":";AAaA,SAAS,4BAA4B;AAQ9B,SAAS,WAAW,IAAwB,MAAc,KAAgC;AAC/F,MAAI,CAAC,GAAI,QAAO;AAChB,QAAM,MAAM,GAAG,EAAE,KAAK,IAAI;AAC1B,MAAI,IAAI,eAAgB,QAAO,IAAI,eAAe,IAAI,GAAG,KAAK;AAC9D,SAAO;AACT;AAMO,SAAS,KACd,IACA,MACA,MACA,KACwB;AACxB,QAAM,UAAU,WAAW,IAAI,MAAM,GAAG;AACxC,SAAO,UAAU,EAAE,mBAAmB,SAAS,kBAAkB,KAAK,IAAI,CAAC;AAC7E;AAUO,SAAS,UACd,IACA,SACA,KACwB;AACxB,QAAM,WAAW,QAAQ,QAAQ,CAAC,EAAE,MAAM,MAAM,MAAM,QAAQ,MAAM;AAClE,QAAI,CAAC,QAAS,QAAO,CAAC;AACtB,UAAM,UAAU,WAAW,IAAI,MAAM,GAAG;AACxC,WAAO,UAAU,CAAC,EAAE,SAAS,MAAM,KAAK,CAAC,IAAI,CAAC;AAAA,EAChD,CAAC;AACD,SAAO,SAAS,SAAS,EAAE,mBAAmB,qBAAqB,QAAQ,EAAE,IAAI,CAAC;AACpF;","names":[]}
+{"version":3,"sources":["../src/bindings.ts"],"sourcesContent":["/**\r\n * Visual Editor addresses for the Astro renderer.\r\n *\r\n * Identical contract to `@bettercms-ai/next`'s `bindings.ts`, and the SAME reason for existing:\r\n * inside a component instance the definition's block ids address nothing, because they are\r\n * shared by every instance of it. Stamping them produces an orphan on one placement and a\r\n * duplicate that drops BOTH on two.\r\n *\r\n * Kept as a `.ts` module rather than inlined in the `.astro` frontmatter so the logic is\r\n * testable without an Astro compiler, and so the two SDKs cannot drift from each other by\r\n * having one file edited and not the other.\r\n */\r\nimport type { BindingKind } from \"@bettercms-ai/types\";\r\nimport { formatPropsAttribute } from \"@bettercms-ai/types\";\r\n\r\nexport interface BindingCtx {\r\n  /** Present only inside a component instance, where it is AUTHORITATIVE. */\r\n  fieldAddresses?: Map<string, string>;\r\n}\r\n\r\n/** The address a write lands on, or null when none exists. */\r\nexport function addressFor(id: string | undefined, prop: string, ctx: BindingCtx): string | null {\r\n  if (!id) return null;\r\n  const key = `${id}__${prop}`;\r\n  if (ctx.fieldAddresses) return ctx.fieldAddresses.get(key) ?? null;\r\n  return key;\r\n}\r\n\r\n/**\r\n * Attributes for a value rendered as this element's own content. Astro omits `undefined`\r\n * attributes, so an empty object spreads to nothing.\r\n */\r\nexport function bind(\r\n  id: string | undefined,\r\n  prop: string,\r\n  kind: BindingKind,\r\n  ctx: BindingCtx,\r\n): Record<string, string> {\r\n  const address = addressFor(id, prop, ctx);\r\n  return address ? { \"data-bcms-field\": address, \"data-bcms-kind\": kind } : {};\r\n}\r\n\r\n/**\r\n * Attributes for values that live in an ATTRIBUTE of this element. `data-bcms-field` addresses\r\n * one element and an element cannot hold two, so these ride `data-bcms-props`:\r\n * `<address>|<kind>|<domAttribute>`, semicolon separated.\r\n *\r\n * An entry whose value is absent is dropped — `setFieldPath` refuses to create a final key, so\r\n * the address would be a write the editor rejects.\r\n */\r\nexport function bindProps(\r\n  id: string | undefined,\r\n  entries: readonly { prop: string; kind: BindingKind; attr: string; present: boolean }[],\r\n  ctx: BindingCtx,\r\n): Record<string, string> {\r\n  const resolved = entries.flatMap(({ prop, kind, attr, present }) => {\r\n    if (!present) return [];\r\n    const address = addressFor(id, prop, ctx);\r\n    return address ? [{ address, kind, attr }] : [];\r\n  });\r\n  return resolved.length ? { \"data-bcms-props\": formatPropsAttribute(resolved) } : {};\r\n}\r\n"],"mappings":";AAaA,SAAS,4BAA4B;AAQ9B,SAAS,WAAW,IAAwB,MAAc,KAAgC;AAC/F,MAAI,CAAC,GAAI,QAAO;AAChB,QAAM,MAAM,GAAG,EAAE,KAAK,IAAI;AAC1B,MAAI,IAAI,eAAgB,QAAO,IAAI,eAAe,IAAI,GAAG,KAAK;AAC9D,SAAO;AACT;AAMO,SAAS,KACd,IACA,MACA,MACA,KACwB;AACxB,QAAM,UAAU,WAAW,IAAI,MAAM,GAAG;AACxC,SAAO,UAAU,EAAE,mBAAmB,SAAS,kBAAkB,KAAK,IAAI,CAAC;AAC7E;AAUO,SAAS,UACd,IACA,SACA,KACwB;AACxB,QAAM,WAAW,QAAQ,QAAQ,CAAC,EAAE,MAAM,MAAM,MAAM,QAAQ,MAAM;AAClE,QAAI,CAAC,QAAS,QAAO,CAAC;AACtB,UAAM,UAAU,WAAW,IAAI,MAAM,GAAG;AACxC,WAAO,UAAU,CAAC,EAAE,SAAS,MAAM,KAAK,CAAC,IAAI,CAAC;AAAA,EAChD,CAAC;AACD,SAAO,SAAS,SAAS,EAAE,mBAAmB,qBAAqB,QAAQ,EAAE,IAAI,CAAC;AACpF;","names":[]}

package/dist/index.d.ts

@@ -129,7 +129,8 @@ declare function sectionColumnAttrs(block: SectionRootBlock | null | undefined):
 
 interface FieldAttrs {
     "data-bcms-field": string;
-    "data-bcms-style": "";
+    /** The marker's revision: "2" promises `size` (zoom) too. Section roots keep "". */
+    "data-bcms-style": "2";
     /** `fieldStyleToCss(fieldStyles[path])` as a CSS string; absent when the field has no style. */
     style?: string;
 }

package/dist/index.js

@@ -214,7 +214,7 @@ function fieldStyleOf(path, fieldStyles) {
 }
 function fieldAttrs(path, fieldStyles) {
   const style = fieldStyleCssText(fieldStyleOf(path, fieldStyles));
-  return { "data-bcms-field": path, "data-bcms-style": "", ...style ? { style } : {} };
+  return { "data-bcms-field": path, "data-bcms-style": "2", ...style ? { style } : {} };
 }
 
 // src/index.ts