@bettercms-ai/astro 0.26.0 → 0.27.1

package/components/BcmsBlocks.astro

@@ -26,13 +26,13 @@
  * actually contains that block (mirrors render-page.ts's `ctx.flags` gating).
  */
 import type { ContentBlock } from "@bettercms-ai/types";
-import { RESPONSIVE_CSS, blockStyleToCss, hideOnAttr, usesHideOn, visibleBlocks, windowState, blockStyleToInnerCss, splitButtonStyle, buttonIconOf, buttonIconSvg, buttonVariantOf, componentInstanceAddresses, headingPaintCss, withButtonLookProps } from "@bettercms-ai/types";
+import { RESPONSIVE_CSS, imageFrameCss, blockStyleToCss, hiddenEverywhere, hideOnAttr, usesHideOn, visibleBlocks, windowState, blockStyleToInnerCss, splitButtonStyle, buttonIconOf, buttonIconSvg, buttonVariantOf, componentInstanceAddresses, headingPaintCss, withButtonLookProps } from "@bettercms-ai/types";
 import { bind, bindProps } from "../dist/bindings.js";
 import type { DeliveryComponent, DeliveryForm } from "@bettercms-ai/sdk";
 import { applyOverrides } from "@bettercms-ai/ui/resolve";
 import { addressFor } from "../dist/bindings.js";
 import { portableTextToHtml } from "@bettercms-ai/richtext/html";
-import { embeddedComponentBlock, readStructuredContent } from "@bettercms-ai/richtext";
+import { embeddedComponentRender, readStructuredContent } from "@bettercms-ai/richtext";
 import { headingParts, richtextHeadingLevel } from "@bettercms-ai/richtext/heading";
 import BcmsImage from "./BcmsImage.astro";
 import BcmsForm from "./BcmsForm.astro";
@@ -69,8 +69,9 @@ interface Props {
   /** The instant block windows (`block.window`) are read against. Defaults to the render time:
    *  the build for a static page, the request for a server-rendered one. */
   now?: Date;
-  /** Draw the blocks outside their window too, marked `data-bcms-window="pending|expired"`, for
-   *  a draft preview. Off, a block outside its window is not rendered, at any depth. */
+  /** Draw the blocks outside their window too, marked `data-bcms-window="pending|expired"`, and the
+   *  blocks hidden on every breakpoint, marked `data-bcms-hidden="all"`, for a draft preview. Off,
+   *  neither is rendered, at any depth. */
   showScheduled?: boolean;
 }
 
@@ -174,13 +175,18 @@ const EMBED_SLOT = "<!--bcms-embed-->";
  * `chunks` has one more entry than `embeds`.
  */
 function richTextParts(structured: NonNullable<ReturnType<typeof readStructuredContent>>, base: string | null) {
-  const embeds: ContentBlock[] = [];
+  /** A linked embed is its `component` block; a separate copy, its own frozen blocks (it never looks the component up). */
+  const embeds: ({ kind: "linked"; block: ContentBlock } | { kind: "copy"; componentId: string; id: string; blocks: ContentBlock[] })[] = [];
   const html = portableTextToHtml(structured, {
     ...(base ? { bindingBase: base } : {}),
     renderBlock: (v) => {
-      const block = embeddedComponentBlock(v);
-      if (!block) return undefined;
-      embeds.push(block as ContentBlock);
+      const embed = embeddedComponentRender(v);
+      if (!embed) return undefined;
+      embeds.push(
+        embed.kind === "linked"
+          ? { kind: "linked", block: embed.block as ContentBlock }
+          : { kind: "copy", componentId: embed.copy.componentId, id: embed.copy.id, blocks: embed.copy.blocks as ContentBlock[] },
+      );
       return EMBED_SLOT;
     },
   });
@@ -270,7 +276,9 @@ const pass = { forms, components, turnstileSiteKey, nested: true, fieldAddresses
      */
     /** `showScheduled` only: which side of its window a drawn block is on. Rides the block's root, like the id. */
     const scheduled = showScheduled && windowState(block, at) !== "live" ? windowState(block, at) : undefined;
-    const blockAttrs = style || inner || hide ? {} : nested ? { "data-bcms-window": scheduled } : { "data-bcms-block": block.id, "data-bcms-window": scheduled };
+    /** `showScheduled` only: hidden on every breakpoint ("Hide on this page"), drawn so its author can find it. */
+    const hiddenAll = showScheduled && hiddenEverywhere(block) ? "all" : undefined;
+    const blockAttrs = style || inner || hide ? {} : nested ? { "data-bcms-window": scheduled, "data-bcms-hidden": hiddenAll } : { "data-bcms-block": block.id, "data-bcms-window": scheduled, "data-bcms-hidden": hiddenAll };
     const node = (() => {
     switch (block.type) {
       case "heading": {
@@ -321,24 +329,37 @@ const pass = { forms, components, turnstileSiteKey, nested: true, fieldAddresses
           const { chunks, embeds } = richTextParts(structured, base);
           return (
             <div class="bcms-text" {...blockAttrs}>
-              {chunks.map((html, i) => (
-                <Fragment>
-                  <Fragment set:html={html} />
-                  {embeds[i] && <Astro.self blocks={[embeds[i]]} depth={depth} seen={seen} {...pass} owner={base} />}
-                </Fragment>
-              ))}
+              {chunks.map((html, i) => {
+                const e = embeds[i];
+                return (
+                  <Fragment>
+                    <Fragment set:html={html} />
+                    {e?.kind === "linked" && <Astro.self blocks={[e.block]} depth={depth} seen={seen} {...pass} owner={base} />}
+                    {e?.kind === "copy" && (
+                      <div class="bcms-block bcms-block--component" data-bcms-component-copy={e.componentId} data-bcms-instance={e.id}>
+                        <Astro.self blocks={e.blocks} depth={depth + 1} seen={seen} {...pass} fieldAddresses={new Map()} />
+                      </div>
+                    )}
+                  </Fragment>
+                );
+              })}
             </div>
           );
         }
         return <div class="bcms-text" {...bind(block.id, "html", "richtext", bctx)} {...blockAttrs} set:html={p.html ?? ""} />;
       }
       case "image": {
+        // An unset src renders nothing, wrapper included, as on the hosted lane (render-page D3).
+        if (!String(p.src ?? "").trim()) return null;
         // 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.
         // `alt` rides the props lane: this element already carries the src binding and one
         // element cannot hold two addresses.
+        // V2's media frame (`style.aspect`), drawn as the hosted lane draws it.
+        const frame = imageFrameCss(block.style);
         const imgBind = {
+          ...(frame ? { style: [`width:${frame.width}`, `aspect-ratio:${frame.aspectRatio}`, `object-fit:${frame.objectFit}`, frame.borderRadius ? `border-radius:${frame.borderRadius}` : ""].filter(Boolean).join(";") } : {}),
           ...bind(block.id, "src", "image", bctx),
           ...bindProps(block.id, [{ prop: "alt", kind: "text", attr: "alt", present: p.alt != null }], bctx),
         };
@@ -352,6 +373,20 @@ const pass = { forms, components, turnstileSiteKey, nested: true, fieldAddresses
         );
       }
       case "button":
+        // The site's script owns the click: a `<button type="button">`, never an anchor with an invented href.
+        if (p.action === "code") return (
+          <button
+            type="button"
+            class={`bcms-btn bcms-btn-${buttonVariantOf(p.variant)}${p.size === "sm" || p.size === "lg" ? ` bcms-btn-${p.size}` : ""}${p.fullWidth === true ? " bcms-btn-full" : ""}`}
+            style={buttonPaintAttr(block)}
+            {...bind(block.id, "text", "text", bctx)}
+            {...blockAttrs}
+          >
+            {buttonIconOf(p.icon) && <Fragment set:html={buttonIconSvg(buttonIconOf(p.icon)!, "bcms-btn-icon")} />}
+            {p.text}
+            {p.arrow === true && <Fragment set:html={buttonIconSvg("arrow-right", "bcms-btn-arrow")} />}
+          </button>
+        );
         return (
           <a
             class={`bcms-btn bcms-btn-${buttonVariantOf(p.variant)}${p.size === "sm" || p.size === "lg" ? ` bcms-btn-${p.size}` : ""}${p.fullWidth === true ? " bcms-btn-full" : ""}`}
@@ -585,10 +620,10 @@ const pass = { forms, components, turnstileSiteKey, nested: true, fieldAddresses
      * box is the root and carries the marker instead.
      */
     const stamp = nested ? undefined : block.id;
-    if (style && inner) return <div style={style} data-bcms-hide={hide} data-bcms-block={stamp} data-bcms-window={scheduled}><div class="bcms-block-inner" style={inner}>{node}</div></div>;
-    if (hide) return <div style={style} data-bcms-hide={hide} data-bcms-block={stamp} data-bcms-window={scheduled}>{inner ? <div class="bcms-block-inner" style={inner}>{node}</div> : node}</div>;
-    if (inner) return <div class="bcms-block-inner" style={inner} data-bcms-block={stamp} data-bcms-window={scheduled}>{node}</div>;
-    if (style) return <div style={style} data-bcms-block={stamp} data-bcms-window={scheduled}>{node}</div>;
+    if (style && inner) return <div style={style} data-bcms-hide={hide} data-bcms-block={stamp} data-bcms-window={scheduled} data-bcms-hidden={hiddenAll}><div class="bcms-block-inner" style={inner}>{node}</div></div>;
+    if (hide) return <div style={style} data-bcms-hide={hide} data-bcms-block={stamp} data-bcms-window={scheduled} data-bcms-hidden={hiddenAll}>{inner ? <div class="bcms-block-inner" style={inner}>{node}</div> : node}</div>;
+    if (inner) return <div class="bcms-block-inner" style={inner} data-bcms-block={stamp} data-bcms-window={scheduled} data-bcms-hidden={hiddenAll}>{node}</div>;
+    if (style) return <div style={style} data-bcms-block={stamp} data-bcms-window={scheduled} data-bcms-hidden={hiddenAll}>{node}</div>;
     return node;
   })}
 </div>

package/components/BcmsButton.astro

@@ -1,17 +1,21 @@
 ---
 /**
  * <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
+ * newTab?, fullWidth? }) 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">
+ *   <a data-bcms-button="<path>" data-variant data-size [data-full-width] 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>
  *
+ * A value with `action: "code"` (no href: the site's script handles the click) renders the same
+ * children in `<button type="button" data-bcms-button="<path>" data-variant data-size>`.
+ *
  * 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.
+ * look looks like. A full-width button also carries `display:flex;width:100%;justify-content:center`
+ * inline, so it stretches across its column with no rule of yours. `class` is passed through untouched.
  *
  *   <BcmsButton path="hero.cta" value={page.hero.cta} class="btn" />
  */
@@ -27,13 +31,21 @@ interface Props {
 const { path, value, class: className } = Astro.props;
 const b = readButtonValue(value);
 ---
-{b.label && (
+{b.label && b.action === "code" && (
+  <button type="button" class={className} data-bcms-button={path} data-variant={b.variant} data-size={b.size} {...(b.fullWidth ? { "data-full-width": "", style: "display:flex;width:100%;justify-content:center" } : {})}>
+    {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")} />}
+  </button>
+)}
+{b.label && b.action !== "code" && (
   <a
     class={className}
     href={b.href || "#"}
     data-bcms-button={path}
     data-variant={b.variant}
     data-size={b.size}
+    {...(b.fullWidth ? { "data-full-width": "", style: "display:flex;width:100%;justify-content:center" } : {})}
     data-bcms-props={formatPropsAttribute([{ address: `${path}.href`, kind: "url", attr: "href" }])}
     {...(b.newTab ? { target: "_blank", rel: "noopener noreferrer" } : {})}
   >

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bettercms-ai/astro",
-  "version": "0.26.0",
+  "version": "0.27.1",
   "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",
@@ -61,11 +61,11 @@
   },
   "dependencies": {
     "@bettercms-ai/image-url": "^0.4.0",
-    "@bettercms-ai/next": "^0.25.0",
-    "@bettercms-ai/richtext": "^0.8.2",
+    "@bettercms-ai/next": "^0.26.1",
+    "@bettercms-ai/richtext": "^0.9.0",
     "@bettercms-ai/sdk": "^1.29.0",
-    "@bettercms-ai/types": "^1.42.0",
-    "@bettercms-ai/ui": "^0.15.1",
+    "@bettercms-ai/types": "^1.44.0",
+    "@bettercms-ai/ui": "^0.17.0",
     "libphonenumber-js": "^1.13.13"
   },
   "peerDependencies": {