@bettercms-ai/astro 0.27.0 → 0.27.2

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),
         };
@@ -599,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bettercms-ai/astro",
-  "version": "0.27.0",
+  "version": "0.27.2",
   "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.26.0",
-    "@bettercms-ai/richtext": "^0.8.2",
-    "@bettercms-ai/sdk": "^1.29.0",
-    "@bettercms-ai/types": "^1.43.0",
-    "@bettercms-ai/ui": "^0.16.0",
+    "@bettercms-ai/next": "^0.26.2",
+    "@bettercms-ai/richtext": "^0.10.0",
+    "@bettercms-ai/sdk": "^1.31.0",
+    "@bettercms-ai/types": "^1.47.0",
+    "@bettercms-ai/ui": "^0.18.0",
     "libphonenumber-js": "^1.13.13"
   },
   "peerDependencies": {