@avocadostudio-ai/blocks 0.3.2 → 0.4.0

package/dist/blocks/_base.css

@@ -106,3 +106,15 @@ section {
     padding: 20px 16px;
   }
 }
+
+/* The wrapper `renderBlockIcon` puts around an icon that is an image URL rather
+   than a glyph. It exists so the editable marker has an element that can hold
+   the image Change button — an `<img>` cannot contain anything. Sized entirely
+   by the icon inside it, so every block's own icon rules still decide the
+   layout. */
+.block-icon-wrap {
+  display: block;
+  position: relative;
+  width: fit-content;
+  line-height: 0;
+}

package/dist/blocks/_shared.d.ts

@@ -8,19 +8,35 @@ export { normalizeRichTextBody };
  * image URL. Anything else (a bare icon-library name, descriptive text, an
  * invented/relative URL) renders nothing instead of leaking raw text or a
  * broken <img> into the page. Returns null when there's nothing safe to show.
+ *
+ * `editablePath` marks the icon for the overlay. Both branches end up on a
+ * `<span>`, including the image one — a marker on the `<img>` would be found by
+ * the editor and could never hold the Change button, which is appended *into*
+ * the marked element. The span also carries `data-editable-kind`, because the
+ * one thing the overlay cannot work out on its own is that a field named `icon`
+ * sometimes holds a picture: its fallback guesses from the prop name, and
+ * nothing about "icon" says image.
  */
 export declare function renderBlockIcon(rawValue: unknown, opts: {
     className: string;
     size: number;
+    editablePath?: string;
 }): JSX.Element | null;
 export declare function decodeSoftHyphenEntities(input: string): string;
 export declare function normalizeSoftHyphenEntities<T>(value: T, seen?: WeakSet<object>): T;
 type ButtonProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
     href: string;
     children: ReactNode;
+    /**
+     * Open the link in a new tab. Off unless the editor turned it on, so no
+     * already-published link changes behaviour on its own, and honoured only for
+     * an external destination — `linkAttrs` decides, and pairs `target="_blank"`
+     * with the `rel="noopener noreferrer"` that makes it safe.
+     */
+    newTab?: boolean;
 };
-export declare function PrimaryButton({ href, children, className, ...rest }: ButtonProps): import("react/jsx-runtime").JSX.Element;
-export declare function SecondaryButton({ href, children, className, ...rest }: ButtonProps): import("react/jsx-runtime").JSX.Element;
-export declare function TertiaryButton({ href, children, className, ...rest }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare const PrimaryButton: ({ href, newTab, children, className, ...rest }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SecondaryButton: ({ href, newTab, children, className, ...rest }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TertiaryButton: ({ href, newTab, children, className, ...rest }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
 export declare function renderInline(text: string): (string | JSX.Element)[];
 export declare function renderRichTextContent(input: string): (import("react/jsx-runtime").JSX.Element | import("react/jsx-runtime").JSX.Element[])[];

package/dist/blocks/_shared.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { parseInline, parseRichText, normalizeRichTextBody, resolveRichTextHeadingLevel } from "@avocadostudio-ai/shared";
+import { linkAttrs, parseInline, parseRichText, normalizeRichTextBody, resolveRichTextHeadingLevel } from "@avocadostudio-ai/shared";
 export { BlockImage } from "./block-image.js";
 export { RichTextDocument, renderRichTextDocument } from "./_richtext-document.js";
 // The grammar itself lives in @avocadostudio-ai/shared so that this renderer,
@@ -21,16 +21,34 @@ function isIconGlyph(value) {
  * image URL. Anything else (a bare icon-library name, descriptive text, an
  * invented/relative URL) renders nothing instead of leaking raw text or a
  * broken <img> into the page. Returns null when there's nothing safe to show.
+ *
+ * `editablePath` marks the icon for the overlay. Both branches end up on a
+ * `<span>`, including the image one — a marker on the `<img>` would be found by
+ * the editor and could never hold the Change button, which is appended *into*
+ * the marked element. The span also carries `data-editable-kind`, because the
+ * one thing the overlay cannot work out on its own is that a field named `icon`
+ * sometimes holds a picture: its fallback guesses from the prop name, and
+ * nothing about "icon" says image.
  */
 export function renderBlockIcon(rawValue, opts) {
     const value = typeof rawValue === "string" ? rawValue.trim() : "";
     if (value.length === 0)
         return null;
+    const marker = opts.editablePath
+        ? {
+            "data-editable-target": opts.editablePath,
+            "data-editable-target-label": opts.editablePath,
+            "data-editable-label": opts.editablePath,
+            // Selectable and, when it holds a URL, changeable — but never typed
+            // into. See `isInlineEditable` in preview-adapter, and `f.icon`.
+            "data-editable-inline": "false"
+        }
+        : {};
     if (isIconUrl(value)) {
-        return (_jsx("img", { className: opts.className, src: value, alt: "", width: opts.size, height: opts.size, loading: "lazy" }));
+        return (_jsx("span", { className: `block-icon-wrap ${opts.className}-wrap`, ...marker, "data-editable-kind": "image", children: _jsx("img", { className: opts.className, src: value, alt: "", width: opts.size, height: opts.size, loading: "lazy" }) }));
     }
     if (isIconGlyph(value)) {
-        return (_jsx("span", { className: opts.className, "aria-hidden": "true", children: value }));
+        return (_jsx("span", { className: opts.className, "aria-hidden": "true", ...marker, children: value }));
     }
     return null;
 }
@@ -76,15 +94,14 @@ export function normalizeSoftHyphenEntities(value, seen) {
     }
     return value;
 }
-export function PrimaryButton({ href, children, className, ...rest }) {
-    return (_jsx("a", { href: href, className: ["btn-primary", className].filter(Boolean).join(" "), ...rest, children: children }));
-}
-export function SecondaryButton({ href, children, className, ...rest }) {
-    return (_jsx("a", { href: href, className: ["btn-secondary", className].filter(Boolean).join(" "), ...rest, children: children }));
-}
-export function TertiaryButton({ href, children, className, ...rest }) {
-    return (_jsx("a", { href: href, className: ["btn-tertiary", className].filter(Boolean).join(" "), ...rest, children: children }));
+function button(variant) {
+    return function Button({ href, newTab, children, className, ...rest }) {
+        return (_jsx("a", { ...linkAttrs(href, newTab), className: [variant, className].filter(Boolean).join(" "), ...rest, children: children }));
+    };
 }
+export const PrimaryButton = button("btn-primary");
+export const SecondaryButton = button("btn-secondary");
+export const TertiaryButton = button("btn-tertiary");
 function renderInlineToken(token) {
     switch (token.type) {
         case "strong":

package/dist/blocks/banner/renderer.js

@@ -17,5 +17,5 @@ export function Banner(props) {
         customStyle.backgroundColor = backgroundColor;
     if (textColor.length > 0)
         customStyle.color = textColor;
-    return (_jsx("section", { className: `banner ${variantClass[variant] ?? variantClass.info}`, style: Object.keys(customStyle).length > 0 ? customStyle : undefined, children: _jsxs("div", { className: "banner__inner section__inner", children: [_jsx("p", { className: "banner__text", "data-editable-target": "text", "data-editable-target-label": "text", "data-editable-label": "text", children: renderInline(text) }), ctaText.length > 0 && ctaHref.length > 0 && (_jsx(PrimaryButton, { href: ctaHref, className: "banner__cta", "data-editable-target": "ctaText", "data-editable-target-label": "ctaText", "data-editable-label": "ctaText", children: ctaText }))] }) }));
+    return (_jsx("section", { className: `banner ${variantClass[variant] ?? variantClass.info}`, style: Object.keys(customStyle).length > 0 ? customStyle : undefined, children: _jsxs("div", { className: "banner__inner section__inner", children: [_jsx("p", { className: "banner__text", "data-editable-target": "text", "data-editable-target-label": "text", "data-editable-label": "text", children: renderInline(text) }), ctaText.length > 0 && ctaHref.length > 0 && (_jsx(PrimaryButton, { href: ctaHref, newTab: props.ctaNewTab === true, className: "banner__cta", "data-editable-target": "ctaText", "data-editable-target-label": "ctaText", "data-editable-label": "ctaText", children: ctaText }))] }) }));
 }

package/dist/blocks/card/renderer.js

@@ -7,5 +7,11 @@ export function Card(props) {
     const variant = String(props.variant ?? "default");
     const isFullBleed = variant === "full-bleed" && imageUrl.length > 0;
     const HeadingTag = resolveHeadingTag("Card", props);
-    return (_jsx("section", { children: _jsx("div", { className: "section__inner", children: _jsxs("article", { className: `card${isFullBleed ? " card--full-bleed" : ""}`, children: [isFullBleed ? (_jsx(BlockImage, { src: imageUrl, alt: imageAlt.length > 0 ? imageAlt : "Card image", className: "card__bg-image", width: 768, height: 512, sizes: "(max-width: 768px) 100vw, 50vw", loading: "lazy", "data-editable-target": "imageUrl", "data-editable-target-label": "image", "data-editable-label": "image" })) : (imageUrl.length > 0 && (_jsx("div", { className: "card__image-wrap", "data-editable-target": "imageUrl", "data-editable-target-label": "image", children: _jsx(BlockImage, { src: imageUrl, alt: imageAlt.length > 0 ? imageAlt : "Card image", className: "card__image", width: 768, height: 512, sizes: "(max-width: 768px) 100vw, 50vw", loading: "lazy" }) }))), _jsxs("div", { className: isFullBleed ? "card__overlay-content" : undefined, children: [_jsx(HeadingTag, { "data-editable-target": "title", "data-editable-target-label": "title", "data-editable-label": "title", children: String(props.title ?? "") }), _jsx("p", { "data-editable-target": "description", "data-editable-target-label": "description", "data-editable-label": "description", children: String(props.description ?? "") }), _jsx(PrimaryButton, { href: String(props.ctaHref ?? "#"), "data-editable-target": "ctaText", "data-editable-target-label": "ctaText", "data-editable-label": "ctaText", children: String(props.ctaText ?? "") })] })] }) }) }));
+    return (_jsx("section", { children: _jsx("div", { className: "section__inner", children: _jsxs("article", { className: `card${isFullBleed ? " card--full-bleed" : ""}`, children: [isFullBleed ? (
+                    // The marker belongs on a wrapper here too. It sat on the
+                    // `<BlockImage>` — an `<img>` — where the editor finds the field and
+                    // the Change button, which is appended into the marked element, can
+                    // never mount. The default variant below already got this right,
+                    // which is why only the full-bleed card was missing its button.
+                    _jsx("div", { className: "card__bg-image-wrap", "data-editable-target": "imageUrl", "data-editable-target-label": "image", "data-editable-label": "image", children: _jsx(BlockImage, { src: imageUrl, alt: imageAlt.length > 0 ? imageAlt : "Card image", className: "card__bg-image", width: 768, height: 512, sizes: "(max-width: 768px) 100vw, 50vw", loading: "lazy" }) })) : (imageUrl.length > 0 && (_jsx("div", { className: "card__image-wrap", "data-editable-target": "imageUrl", "data-editable-target-label": "image", children: _jsx(BlockImage, { src: imageUrl, alt: imageAlt.length > 0 ? imageAlt : "Card image", className: "card__image", width: 768, height: 512, sizes: "(max-width: 768px) 100vw, 50vw", loading: "lazy" }) }))), _jsxs("div", { className: isFullBleed ? "card__overlay-content" : undefined, children: [_jsx(HeadingTag, { "data-editable-target": "title", "data-editable-target-label": "title", "data-editable-label": "title", children: String(props.title ?? "") }), _jsx("p", { "data-editable-target": "description", "data-editable-target-label": "description", "data-editable-label": "description", children: String(props.description ?? "") }), _jsx(PrimaryButton, { href: String(props.ctaHref ?? "#"), newTab: props.ctaNewTab === true, "data-editable-target": "ctaText", "data-editable-target-label": "ctaText", "data-editable-label": "ctaText", children: String(props.ctaText ?? "") })] })] }) }) }));
 }

package/dist/blocks/card/styles.css

@@ -53,6 +53,17 @@
   border: none;
 }
 
+/* The element the full-bleed image marker sits on, and therefore the element
+   the editor's Change button mounts into. Deliberately no `z-index`: with
+   `z-index: auto` it does not open a stacking context, so the button's own
+   z-index competes with the gradient (`::after`, 1) and the overlay content (2)
+   in the card's context and wins. Give this rule a z-index and the button is
+   trapped underneath the gradient — present, hoverable, and invisible. */
+.card--full-bleed .card__bg-image-wrap {
+  position: absolute;
+  inset: 0;
+}
+
 .card--full-bleed .card__bg-image {
   position: absolute;
   inset: 0;

package/dist/blocks/card-grid/renderer.js

@@ -5,13 +5,16 @@ export function CardGrid(props) {
     const cards = Array.isArray(props.cards) ? props.cards : [];
     const columns = String(props.columns ?? "3");
     const cardVariant = String(props.cardVariant ?? "default");
+    const subtitle = typeof props.subtitle === "string" ? props.subtitle.trim() : "";
     const HeadingTag = resolveHeadingTag("CardGrid", props);
     const ItemHeadingTag = resolveItemHeadingTag("CardGrid", props);
-    return (_jsx("section", { className: "card-grid-section", children: _jsxs("div", { className: "section__inner", children: [_jsx(HeadingTag, { "data-editable-target": "title", "data-editable-target-label": "title", "data-editable-label": "title", children: String(props.title ?? "") }), _jsx("div", { className: `card-grid${columns !== "3" ? ` card-grid--${columns}-col` : ""}`, children: cards.map((item, idx) => {
+    return (_jsx("section", { className: "card-grid-section", children: _jsxs("div", { className: "section__inner", children: [_jsx(HeadingTag, { "data-editable-target": "title", "data-editable-target-label": "title", "data-editable-label": "title", children: String(props.title ?? "") }), subtitle.length > 0 && (_jsx("p", { className: "card-grid-section__subtitle", "data-editable-target": "subtitle", "data-editable-target-label": "subtitle", "data-editable-label": "subtitle", children: subtitle })), _jsx("div", { className: `card-grid${columns !== "3" ? ` card-grid--${columns}-col` : ""}`, children: cards.map((item, idx) => {
                         const row = (item ?? {});
                         const imageUrl = typeof row.imageUrl === "string" ? row.imageUrl.trim() : "";
                         const imageAlt = typeof row.imageAlt === "string" ? row.imageAlt.trim() : "";
                         const isFullBleed = cardVariant === "full-bleed" && imageUrl.length > 0;
-                        return (_jsxs("article", { className: `card${isFullBleed ? " card--full-bleed" : ""}`, "data-editable-target": `cards[${idx}]`, "data-editable-target-label": `cards[${idx}]`, "data-editable-label": `cards[${idx}]`, children: [isFullBleed ? (_jsx(BlockImage, { src: imageUrl, alt: imageAlt.length > 0 ? imageAlt : "Card image", className: "card__bg-image", width: 768, height: 512, sizes: "(max-width: 768px) 100vw, 33vw", loading: "lazy", "data-editable-target": `cards[${idx}].imageUrl`, "data-editable-target-label": `cards[${idx}].imageUrl`, "data-editable-label": `cards[${idx}].imageUrl` })) : (imageUrl.length > 0 && (_jsx("div", { className: "card__image-wrap", "data-editable-target": `cards[${idx}].imageUrl`, "data-editable-target-label": `cards[${idx}].imageUrl`, "data-editable-label": `cards[${idx}].imageUrl`, children: _jsx(BlockImage, { src: imageUrl, alt: imageAlt.length > 0 ? imageAlt : "Card image", className: "card__image", width: 768, height: 512, sizes: "(max-width: 768px) 100vw, 33vw", loading: "lazy" }) }))), _jsxs("div", { className: isFullBleed ? "card__overlay-content" : undefined, children: [_jsx(ItemHeadingTag, { "data-editable-target": `cards[${idx}].title`, "data-editable-target-label": `cards[${idx}].title`, "data-editable-label": `cards[${idx}].title`, children: String(row.title ?? "") }), _jsx("p", { "data-editable-target": `cards[${idx}].description`, "data-editable-target-label": `cards[${idx}].description`, "data-editable-label": `cards[${idx}].description`, children: String(row.description ?? "") }), _jsx(PrimaryButton, { href: String(row.ctaHref ?? "#"), "data-editable-target": `cards[${idx}].ctaText`, "data-editable-target-label": `cards[${idx}].ctaText`, "data-editable-label": `cards[${idx}].ctaText`, children: String(row.ctaText ?? "") })] })] }, idx));
+                        return (_jsxs("article", { className: `card${isFullBleed ? " card--full-bleed" : ""}`, "data-editable-target": `cards[${idx}]`, "data-editable-target-label": `cards[${idx}]`, "data-editable-label": `cards[${idx}]`, children: [isFullBleed ? (
+                                // On a wrapper, not the `<img>` — see the note in Card.
+                                _jsx("div", { className: "card__bg-image-wrap", "data-editable-target": `cards[${idx}].imageUrl`, "data-editable-target-label": `cards[${idx}].imageUrl`, "data-editable-label": `cards[${idx}].imageUrl`, children: _jsx(BlockImage, { src: imageUrl, alt: imageAlt.length > 0 ? imageAlt : "Card image", className: "card__bg-image", width: 768, height: 512, sizes: "(max-width: 768px) 100vw, 33vw", loading: "lazy" }) })) : (imageUrl.length > 0 && (_jsx("div", { className: "card__image-wrap", "data-editable-target": `cards[${idx}].imageUrl`, "data-editable-target-label": `cards[${idx}].imageUrl`, "data-editable-label": `cards[${idx}].imageUrl`, children: _jsx(BlockImage, { src: imageUrl, alt: imageAlt.length > 0 ? imageAlt : "Card image", className: "card__image", width: 768, height: 512, sizes: "(max-width: 768px) 100vw, 33vw", loading: "lazy" }) }))), _jsxs("div", { className: isFullBleed ? "card__overlay-content" : undefined, children: [_jsx(ItemHeadingTag, { "data-editable-target": `cards[${idx}].title`, "data-editable-target-label": `cards[${idx}].title`, "data-editable-label": `cards[${idx}].title`, children: String(row.title ?? "") }), _jsx("p", { "data-editable-target": `cards[${idx}].description`, "data-editable-target-label": `cards[${idx}].description`, "data-editable-label": `cards[${idx}].description`, children: String(row.description ?? "") }), _jsx(PrimaryButton, { href: String(row.ctaHref ?? "#"), newTab: row.ctaNewTab === true, "data-editable-target": `cards[${idx}].ctaText`, "data-editable-target-label": `cards[${idx}].ctaText`, "data-editable-label": `cards[${idx}].ctaText`, children: String(row.ctaText ?? "") })] })] }, idx));
                     }) })] }) }));
 }

package/dist/blocks/card-grid/styles.css

@@ -16,6 +16,21 @@
   margin-bottom: 16px;
 }
 
+/* With a subtitle the heading sits tighter against it, and the subtitle carries
+   the gap to the grid — otherwise the two stack with 16px between them and read
+   as unrelated. */
+.card-grid-section:has(.card-grid-section__subtitle) :is(h1, h2, h3, h4, h5, h6) {
+  margin-bottom: 6px;
+}
+
+.card-grid-section__subtitle {
+  margin: 0 0 16px;
+  max-width: 62ch;
+  font-size: 1.0625rem;
+  line-height: 1.6;
+  color: var(--body-secondary);
+}
+
 .card-grid .card {
   background-color: var(--surface);
   background-image:

package/dist/blocks/carousel/renderer.js

@@ -14,6 +14,9 @@ export function Carousel(props) {
                         const description = String(item.description ?? "");
                         const ctaText = String(item.ctaText ?? "");
                         const ctaHref = String(item.ctaHref ?? "");
-                        return (_jsxs("div", { className: "carousel__slide", children: [imageUrl.length > 0 && (_jsx(BlockImage, { className: "carousel__image", src: imageUrl, alt: imageAlt, width: 1200, height: 600, sizes: "(max-width: 900px) 100vw, 80vw", priority: idx === 0, loading: idx === 0 ? "eager" : "lazy" })), (heading.length > 0 || description.length > 0 || ctaText.length > 0) && (_jsxs("div", { className: "carousel__caption", children: [heading.length > 0 && (_jsx(ItemHeadingTag, { "data-editable-target": `items[${idx}].heading`, "data-editable-target-label": `items[${idx}].heading`, "data-editable-label": `items[${idx}].heading`, children: renderInline(heading) })), description.length > 0 && (_jsx("p", { "data-editable-target": `items[${idx}].description`, "data-editable-target-label": `items[${idx}].description`, "data-editable-label": `items[${idx}].description`, children: renderInline(description) })), ctaText.length > 0 && ctaHref.length > 0 && (_jsx(PrimaryButton, { href: ctaHref, className: "carousel__cta", "data-editable-target": `items[${idx}].ctaText`, "data-editable-target-label": `items[${idx}].ctaText`, "data-editable-label": `items[${idx}].ctaText`, children: ctaText }))] }))] }, idx));
+                        return (_jsxs("div", { className: "carousel__slide", children: [imageUrl.length > 0 && (
+                                // Marked on the wrapper: the Change button is appended into
+                                // the marked element, and an `<img>` holds no children.
+                                _jsx("div", { className: "carousel__media", "data-editable-target": `items[${idx}].imageUrl`, "data-editable-target-label": `items[${idx}].imageUrl`, "data-editable-label": `items[${idx}].imageUrl`, children: _jsx(BlockImage, { className: "carousel__image", src: imageUrl, alt: imageAlt, width: 1200, height: 600, sizes: "(max-width: 900px) 100vw, 80vw", priority: idx === 0, loading: idx === 0 ? "eager" : "lazy" }) })), (heading.length > 0 || description.length > 0 || ctaText.length > 0) && (_jsxs("div", { className: "carousel__caption", children: [heading.length > 0 && (_jsx(ItemHeadingTag, { "data-editable-target": `items[${idx}].heading`, "data-editable-target-label": `items[${idx}].heading`, "data-editable-label": `items[${idx}].heading`, children: renderInline(heading) })), description.length > 0 && (_jsx("p", { "data-editable-target": `items[${idx}].description`, "data-editable-target-label": `items[${idx}].description`, "data-editable-label": `items[${idx}].description`, children: renderInline(description) })), ctaText.length > 0 && ctaHref.length > 0 && (_jsx(PrimaryButton, { href: ctaHref, newTab: item.ctaNewTab === true, className: "carousel__cta", "data-editable-target": `items[${idx}].ctaText`, "data-editable-target-label": `items[${idx}].ctaText`, "data-editable-label": `items[${idx}].ctaText`, children: ctaText }))] }))] }, idx));
                     }) }), items.length > 1 && (_jsxs(_Fragment, { children: [_jsx("button", { className: "carousel__btn carousel__btn--prev", "aria-label": "Previous slide", type: "button", children: _jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polyline", { points: "15 18 9 12 15 6" }) }) }), _jsx("button", { className: "carousel__btn carousel__btn--next", "aria-label": "Next slide", type: "button", children: _jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polyline", { points: "9 18 15 12 9 6" }) }) }), _jsx("div", { className: "carousel__dots", children: items.map((_, idx) => (_jsx("button", { className: `carousel__dot${idx === 0 ? " carousel__dot--active" : ""}`, "aria-label": `Go to slide ${idx + 1}`, type: "button" }, idx))) })] }))] }) }));
 }

package/dist/blocks/carousel/styles.css

@@ -33,6 +33,13 @@
   border: 1px solid var(--border);
 }
 
+/* Wrapper the image marker sits on. `position: relative` only so the Change
+   button, which the overlay absolutely positions, lands on the image. */
+.carousel__media {
+  display: block;
+  position: relative;
+}
+
 .carousel__image {
   width: 100%;
   aspect-ratio: 16 / 9;

package/dist/blocks/cta/renderer.js

@@ -3,5 +3,5 @@ import { resolveHeadingTag } from "@avocadostudio-ai/shared";
 import { PrimaryButton, SecondaryButton } from "../_shared.js";
 export function CTA(props) {
     const HeadingTag = resolveHeadingTag("CTA", props);
-    return (_jsx("section", { className: "cta-section", children: _jsxs("div", { className: "section__inner", children: [_jsx(HeadingTag, { "data-editable-target": "title", "data-editable-target-label": "title", "data-editable-label": "title", children: String(props.title ?? "") }), _jsx("p", { "data-editable-target": "description", "data-editable-target-label": "description", "data-editable-label": "description", children: String(props.description ?? "") }), _jsxs("div", { className: "cta__buttons", children: [_jsx(PrimaryButton, { href: String(props.ctaHref ?? "#"), "data-editable-target": "ctaText", "data-editable-target-label": "ctaText", "data-editable-label": "ctaText", children: String(props.ctaText ?? "") }), typeof props.secondaryCtaText === "string" && props.secondaryCtaText.length > 0 && (_jsx(SecondaryButton, { href: String(props.secondaryCtaHref ?? "#"), "data-editable-target": "secondaryCtaText", "data-editable-target-label": "secondaryCtaText", "data-editable-label": "secondaryCtaText", children: props.secondaryCtaText }))] })] }) }));
+    return (_jsx("section", { className: "cta-section", children: _jsxs("div", { className: "section__inner", children: [_jsx(HeadingTag, { "data-editable-target": "title", "data-editable-target-label": "title", "data-editable-label": "title", children: String(props.title ?? "") }), _jsx("p", { "data-editable-target": "description", "data-editable-target-label": "description", "data-editable-label": "description", children: String(props.description ?? "") }), _jsxs("div", { className: "cta__buttons", children: [_jsx(PrimaryButton, { href: String(props.ctaHref ?? "#"), newTab: props.ctaNewTab === true, "data-editable-target": "ctaText", "data-editable-target-label": "ctaText", "data-editable-label": "ctaText", children: String(props.ctaText ?? "") }), typeof props.secondaryCtaText === "string" && props.secondaryCtaText.length > 0 && (_jsx(SecondaryButton, { href: String(props.secondaryCtaHref ?? "#"), newTab: props.secondaryCtaNewTab === true, "data-editable-target": "secondaryCtaText", "data-editable-target-label": "secondaryCtaText", "data-editable-label": "secondaryCtaText", children: props.secondaryCtaText }))] })] }) }));
 }

package/dist/blocks/feature-grid/renderer.js

@@ -7,6 +7,6 @@ export function FeatureGrid(props) {
     const HeadingTag = resolveHeadingTag("FeatureGrid", props);
     return (_jsx("section", { children: _jsxs("div", { className: "section__inner", children: [_jsx(HeadingTag, { "data-editable-target": "title", "data-editable-target-label": "title", "data-editable-label": "title", children: String(props.title ?? "") }), _jsx("ul", { className: `feature-grid${columns !== "3" ? ` feature-grid--${columns}-col` : ""}`, children: items.map((item, idx) => {
                         const row = (item ?? {});
-                        return (_jsxs("li", { className: "feature-card", children: [renderBlockIcon(row.icon, { className: "feature-card__icon", size: 40 }), _jsx("strong", { "data-editable-target": `features[${idx}].title`, "data-editable-target-label": `features[${idx}].title`, "data-editable-label": `features[${idx}].title`, children: String(row.title ?? "") }), _jsx("p", { "data-editable-target": `features[${idx}].description`, "data-editable-target-label": `features[${idx}].description`, "data-editable-label": `features[${idx}].description`, children: String(row.description ?? "") })] }, idx));
+                        return (_jsxs("li", { className: "feature-card", children: [renderBlockIcon(row.icon, { className: "feature-card__icon", size: 40, editablePath: `features[${idx}].icon` }), _jsx("strong", { "data-editable-target": `features[${idx}].title`, "data-editable-target-label": `features[${idx}].title`, "data-editable-label": `features[${idx}].title`, children: String(row.title ?? "") }), _jsx("p", { "data-editable-target": `features[${idx}].description`, "data-editable-target-label": `features[${idx}].description`, "data-editable-label": `features[${idx}].description`, children: String(row.description ?? "") })] }, idx));
                     }) })] }) }));
 }

package/dist/blocks/gallery/renderer.js

@@ -16,6 +16,14 @@ export function Gallery(props) {
                         const imageUrl = String(img.imageUrl ?? "");
                         const alt = String(img.alt ?? "");
                         const caption = String(img.caption ?? "");
-                        return (_jsxs("figure", { className: "gallery__item", children: [imageUrl.length > 0 && (_jsx(BlockImage, { className: "gallery__image", src: imageUrl, alt: alt, width: 800, height: 600, sizes: "(max-width: 768px) 100vw, 33vw", loading: idx < 4 ? "eager" : "lazy" })), caption.length > 0 && (_jsx("figcaption", { className: "gallery__caption", "data-editable-target": `images[${idx}].caption`, "data-editable-target-label": `images[${idx}].caption`, "data-editable-label": `images[${idx}].caption`, children: renderInline(caption) }))] }, idx));
+                        return (_jsxs("figure", { className: "gallery__item", children: [imageUrl.length > 0 && (
+                                /*
+                                 * The marker goes on this wrapper, not on the image. The
+                                 * overlay mounts its Change button by appending it into the
+                                 * marked element, and an `<img>` cannot contain anything — so
+                                 * a marker there is found by the editor, counts as
+                                 * instrumented, and can never produce a button.
+                                 */
+                                _jsx("div", { className: "gallery__media", "data-editable-target": `images[${idx}].imageUrl`, "data-editable-target-label": `images[${idx}].imageUrl`, "data-editable-label": `images[${idx}].imageUrl`, children: _jsx(BlockImage, { className: "gallery__image", src: imageUrl, alt: alt, width: 800, height: 600, sizes: "(max-width: 768px) 100vw, 33vw", loading: idx < 4 ? "eager" : "lazy" }) })), caption.length > 0 && (_jsx("figcaption", { className: "gallery__caption", "data-editable-target": `images[${idx}].caption`, "data-editable-target-label": `images[${idx}].caption`, "data-editable-label": `images[${idx}].caption`, children: renderInline(caption) }))] }, idx));
                     }) })] }) }));
 }

package/dist/blocks/gallery/styles.css

@@ -20,6 +20,13 @@
   background: var(--bg-1);
 }
 
+/* Wrapper the image marker sits on — see the note in the renderer. Sized by the
+   image inside it, so the grid cell is unchanged. */
+.gallery__media {
+  display: block;
+  position: relative;
+}
+
 .gallery__image {
   width: 100%;
   aspect-ratio: 4 / 3;

package/dist/blocks/hero/renderer.js

@@ -9,7 +9,7 @@ export function Hero(props) {
     const eyebrow = typeof props.eyebrow === "string" ? props.eyebrow.trim() : "";
     const HeadingTag = resolveHeadingTag("Hero", props);
     const contentCenterClass = textAlign === "center" ? " hero__content--center" : "";
-    const content = (_jsxs("div", { className: `hero__content layout-grid__col${contentCenterClass}`, children: [eyebrow.length > 0 && (_jsx("span", { className: "hero__eyebrow", "data-editable-target": "eyebrow", "data-editable-target-label": "eyebrow", "data-editable-label": "eyebrow", children: eyebrow })), _jsx(HeadingTag, { "data-editable-target": "heading", "data-editable-target-label": "heading", "data-editable-label": "heading", children: String(props.heading ?? "") }), _jsx("p", { "data-editable-target": "subheading", "data-editable-target-label": "subheading", "data-editable-label": "subheading", children: String(props.subheading ?? "") }), _jsxs("div", { className: "hero__actions", children: [_jsx(PrimaryButton, { href: String(props.ctaHref ?? "#"), "data-editable-target": "ctaText", "data-editable-target-label": "ctaText", "data-editable-label": "ctaText", children: String(props.ctaText ?? "") }), typeof props.secondaryCtaText === "string" && props.secondaryCtaText.length > 0 && (_jsx(SecondaryButton, { href: String(props.secondaryCtaHref ?? "#"), "data-editable-target": "secondaryCtaText", "data-editable-target-label": "secondaryCtaText", "data-editable-label": "secondaryCtaText", children: props.secondaryCtaText }))] })] }));
+    const content = (_jsxs("div", { className: `hero__content layout-grid__col${contentCenterClass}`, children: [eyebrow.length > 0 && (_jsx("span", { className: "hero__eyebrow", "data-editable-target": "eyebrow", "data-editable-target-label": "eyebrow", "data-editable-label": "eyebrow", children: eyebrow })), _jsx(HeadingTag, { "data-editable-target": "heading", "data-editable-target-label": "heading", "data-editable-label": "heading", children: String(props.heading ?? "") }), _jsx("p", { "data-editable-target": "subheading", "data-editable-target-label": "subheading", "data-editable-label": "subheading", children: String(props.subheading ?? "") }), _jsxs("div", { className: "hero__actions", children: [_jsx(PrimaryButton, { href: String(props.ctaHref ?? "#"), newTab: props.ctaNewTab === true, "data-editable-target": "ctaText", "data-editable-target-label": "ctaText", "data-editable-label": "ctaText", children: String(props.ctaText ?? "") }), typeof props.secondaryCtaText === "string" && props.secondaryCtaText.length > 0 && (_jsx(SecondaryButton, { href: String(props.secondaryCtaHref ?? "#"), newTab: props.secondaryCtaNewTab === true, "data-editable-target": "secondaryCtaText", "data-editable-target-label": "secondaryCtaText", "data-editable-label": "secondaryCtaText", children: props.secondaryCtaText }))] })] }));
     if (isFullWidth) {
         return (_jsxs("section", { className: "hero hero--full-width", children: [_jsx(BlockImage, { className: "hero__bg-image", src: String(props.imageUrl ?? IMAGE_PLACEHOLDER), alt: String(props.imageAlt ?? "Hero image"), width: 1536, height: 1024, sizes: "100vw", priority: true, "data-editable-target": "imageUrl", "data-editable-target-label": "Hero block image", "data-editable-label": "Hero block image" }), _jsx("div", { className: "section__inner hero__inner", children: content })] }));
     }

package/dist/blocks/quote/renderer.js

@@ -5,5 +5,8 @@ export function Quote(props) {
     const author = String(props.author ?? "");
     const role = String(props.role ?? "");
     const imageUrl = String(props.imageUrl ?? "");
-    return (_jsx("section", { className: "quote-block", children: _jsxs("div", { className: "section__inner", children: [_jsxs("blockquote", { className: "quote-block__quote", children: [_jsx("span", { className: "quote-block__mark", "aria-hidden": "true", children: "\u201C" }), _jsx("div", { className: "quote-block__text", "data-editable-target": "quote", "data-editable-target-label": "quote", "data-editable-label": "quote", children: renderRichTextContent(quote) })] }), (author.length > 0 || role.length > 0) && (_jsxs("div", { className: "quote-block__attribution", children: [imageUrl.length > 0 && (_jsx(BlockImage, { className: "quote-block__avatar", src: imageUrl, alt: author || "Author", width: 48, height: 48 })), _jsxs("div", { className: "quote-block__author-info", children: [author.length > 0 && (_jsx("span", { className: "quote-block__author", "data-editable-target": "author", "data-editable-target-label": "author", "data-editable-label": "author", children: author })), role.length > 0 && (_jsx("span", { className: "quote-block__role", "data-editable-target": "role", "data-editable-target-label": "role", "data-editable-label": "role", children: role }))] })] }))] }) }));
+    return (_jsx("section", { className: "quote-block", children: _jsxs("div", { className: "section__inner", children: [_jsxs("blockquote", { className: "quote-block__quote", children: [_jsx("span", { className: "quote-block__mark", "aria-hidden": "true", children: "\u201C" }), _jsx("div", { className: "quote-block__text", "data-editable-target": "quote", "data-editable-target-label": "quote", "data-editable-label": "quote", children: renderRichTextContent(quote) })] }), (author.length > 0 || role.length > 0) && (_jsxs("div", { className: "quote-block__attribution", children: [imageUrl.length > 0 && (
+                        // On the wrapper, not the <img>: the Change button is appended
+                        // into the marked element, which a void element cannot hold.
+                        _jsx("span", { className: "quote-block__avatar-wrap", "data-editable-target": "imageUrl", "data-editable-target-label": "imageUrl", "data-editable-label": "imageUrl", children: _jsx(BlockImage, { className: "quote-block__avatar", src: imageUrl, alt: author || "Author", width: 48, height: 48 }) })), _jsxs("div", { className: "quote-block__author-info", children: [author.length > 0 && (_jsx("span", { className: "quote-block__author", "data-editable-target": "author", "data-editable-target-label": "author", "data-editable-label": "author", children: author })), role.length > 0 && (_jsx("span", { className: "quote-block__role", "data-editable-target": "role", "data-editable-target-label": "role", "data-editable-label": "role", children: role }))] })] }))] }) }));
 }

package/dist/blocks/quote/styles.css

@@ -51,6 +51,15 @@
   text-align: left;
 }
 
+/* Wrapper the image marker sits on — see the note in the renderer. A flex item
+   of `.quote-block__attribution`, sized entirely by the avatar inside it. */
+.quote-block__avatar-wrap {
+  display: block;
+  position: relative;
+  flex: 0 0 auto;
+  line-height: 0;
+}
+
 .quote-block__avatar {
   width: 48px;
   height: 48px;

package/dist/blocks/site-header/renderer.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useRef, useEffect, useCallback } from "react";
+import { linkAttrs } from "@avocadostudio-ai/shared";
 import { BlockImage } from "../_shared.js";
 function ChevronDown({ className }) {
     return (_jsx("svg", { className: className, width: "14", height: "14", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M3 4.5L6 7.5L9 4.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
@@ -60,5 +61,5 @@ export function SiteHeader(props) {
         return clean === activePath;
     };
     const hasActiveChild = (link) => link.children?.some((c) => isActive(c.href)) ?? false;
-    return (_jsxs(_Fragment, { children: [_jsx("header", { className: "site-top-nav", "data-block-chrome": "true", children: _jsxs("div", { className: "site-top-nav-inner", children: [_jsxs("a", { className: "site-brand", href: links[0]?.href ?? "/", "data-editable-target": "siteName", children: [logoUrl ? _jsx(BlockImage, { className: "site-logo", src: logoUrl, alt: `${siteName} logo`, width: 38, height: 38, "data-editable-target": "logoUrl" }) : null, _jsx("span", { className: "site-brand-text", children: siteName })] }), _jsx("nav", { className: "site-nav-links site-nav-links-desktop", "aria-label": "Primary", children: links.map((link, i) => link.children?.length ? (_jsxs("div", { className: "site-nav-dropdown", children: [_jsxs("button", { type: "button", className: `site-nav-dropdown-trigger${hasActiveChild(link) ? " is-active" : ""}`, "data-editable-target": `links[${i}].label`, "data-editable-target-label": `links[${i}].label`, children: [link.label, _jsx(ChevronDown, { className: "site-nav-chevron" })] }), _jsx("div", { className: "site-nav-dropdown-menu", children: link.children.map((child, j) => (_jsx("a", { href: child.href ?? "#", className: isActive(child.href) ? "is-active" : undefined, "data-editable-target": `links[${i}].children[${j}].label`, "data-editable-target-label": `links[${i}].children[${j}].label`, onClick: (e) => e.currentTarget.blur(), children: child.label }, child.href))) })] }, `group-${i}`)) : (_jsx("a", { href: link.href ?? "#", className: isActive(link.href) ? "is-active" : undefined, "data-editable-target": `links[${i}].label`, "data-editable-target-label": `links[${i}].label`, children: link.label }, link.href))) }), _jsxs("div", { ref: menuRef, className: `site-mobile-menu${isOpen ? " is-open" : ""}`, children: [_jsx("button", { ref: toggleRef, type: "button", className: "site-mobile-menu-button", "aria-expanded": isOpen, "aria-controls": menuId, "aria-label": "Toggle navigation menu", onClick: toggle, children: _jsxs("span", { className: "burger-icon", "aria-hidden": "true", children: [_jsx("i", {}), _jsx("i", {}), _jsx("i", {})] }) }), isOpen ? (_jsx("nav", { id: menuId, className: "site-nav-links site-nav-links-mobile", "aria-label": "Mobile primary", children: links.map((link, i) => link.children?.length ? (_jsxs("div", { className: "site-nav-mobile-group", children: [_jsxs("button", { type: "button", className: `site-nav-mobile-group-trigger${hasActiveChild(link) ? " is-active" : ""}`, "aria-expanded": expandedGroup === i, onClick: () => setExpandedGroup(expandedGroup === i ? null : i), "data-editable-target": `links[${i}].label`, children: [link.label, _jsx(ChevronDown, { className: `site-nav-chevron${expandedGroup === i ? " is-expanded" : ""}` })] }), expandedGroup === i ? (_jsx("div", { className: "site-nav-mobile-group-children", children: link.children.map((child, j) => (_jsx("a", { href: child.href ?? "#", className: isActive(child.href) ? "is-active" : undefined, "data-editable-target": `links[${i}].children[${j}].label`, onClick: close, children: child.label }, `mobile-${child.href}`))) })) : null] }, `mobile-group-${i}`)) : (_jsx("a", { href: link.href ?? "#", className: isActive(link.href) ? "is-active" : undefined, "data-editable-target": `links[${i}].label`, onClick: close, children: link.label }, `mobile-${link.href}`))) })) : null] })] }) }), isOpen ? (_jsx("div", { className: "site-mobile-backdrop", onClick: close })) : null] }));
+    return (_jsxs(_Fragment, { children: [_jsx("header", { className: "site-top-nav", "data-block-chrome": "true", children: _jsxs("div", { className: "site-top-nav-inner", children: [_jsxs("a", { className: "site-brand", href: links[0]?.href ?? "/", "data-editable-target": "siteName", children: [logoUrl ? _jsx(BlockImage, { className: "site-logo", src: logoUrl, alt: `${siteName} logo`, width: 38, height: 38, "data-editable-target": "logoUrl" }) : null, _jsx("span", { className: "site-brand-text", children: siteName })] }), _jsx("nav", { className: "site-nav-links site-nav-links-desktop", "aria-label": "Primary", children: links.map((link, i) => link.children?.length ? (_jsxs("div", { className: "site-nav-dropdown", children: [_jsxs("button", { type: "button", className: `site-nav-dropdown-trigger${hasActiveChild(link) ? " is-active" : ""}`, "data-editable-target": `links[${i}].label`, "data-editable-target-label": `links[${i}].label`, children: [link.label, _jsx(ChevronDown, { className: "site-nav-chevron" })] }), _jsx("div", { className: "site-nav-dropdown-menu", children: link.children.map((child, j) => (_jsx("a", { ...linkAttrs(child.href, child.newTab), className: isActive(child.href) ? "is-active" : undefined, "data-editable-target": `links[${i}].children[${j}].label`, "data-editable-target-label": `links[${i}].children[${j}].label`, onClick: (e) => e.currentTarget.blur(), children: child.label }, child.href))) })] }, `group-${i}`)) : (_jsx("a", { ...linkAttrs(link.href, link.newTab), className: isActive(link.href) ? "is-active" : undefined, "data-editable-target": `links[${i}].label`, "data-editable-target-label": `links[${i}].label`, children: link.label }, link.href))) }), _jsxs("div", { ref: menuRef, className: `site-mobile-menu${isOpen ? " is-open" : ""}`, children: [_jsx("button", { ref: toggleRef, type: "button", className: "site-mobile-menu-button", "aria-expanded": isOpen, "aria-controls": menuId, "aria-label": "Toggle navigation menu", onClick: toggle, children: _jsxs("span", { className: "burger-icon", "aria-hidden": "true", children: [_jsx("i", {}), _jsx("i", {}), _jsx("i", {})] }) }), isOpen ? (_jsx("nav", { id: menuId, className: "site-nav-links site-nav-links-mobile", "aria-label": "Mobile primary", children: links.map((link, i) => link.children?.length ? (_jsxs("div", { className: "site-nav-mobile-group", children: [_jsxs("button", { type: "button", className: `site-nav-mobile-group-trigger${hasActiveChild(link) ? " is-active" : ""}`, "aria-expanded": expandedGroup === i, onClick: () => setExpandedGroup(expandedGroup === i ? null : i), "data-editable-target": `links[${i}].label`, children: [link.label, _jsx(ChevronDown, { className: `site-nav-chevron${expandedGroup === i ? " is-expanded" : ""}` })] }), expandedGroup === i ? (_jsx("div", { className: "site-nav-mobile-group-children", children: link.children.map((child, j) => (_jsx("a", { ...linkAttrs(child.href, child.newTab), className: isActive(child.href) ? "is-active" : undefined, "data-editable-target": `links[${i}].children[${j}].label`, onClick: close, children: child.label }, `mobile-${child.href}`))) })) : null] }, `mobile-group-${i}`)) : (_jsx("a", { ...linkAttrs(link.href, link.newTab), className: isActive(link.href) ? "is-active" : undefined, "data-editable-target": `links[${i}].label`, onClick: close, children: link.label }, `mobile-${link.href}`))) })) : null] })] }) }), isOpen ? (_jsx("div", { className: "site-mobile-backdrop", onClick: close })) : null] }));
 }

package/dist/blocks/stats/renderer.js

@@ -8,6 +8,6 @@ export function Stats(props) {
     return (_jsx("section", { className: "stats-section", children: _jsxs("div", { className: "section__inner", children: [title.length > 0 && (_jsx(HeadingTag, { "data-editable-target": "title", "data-editable-target-label": "title", "data-editable-label": "title", children: title })), _jsx("div", { className: "stats-grid", children: items.map((item, idx) => {
                         const row = (item ?? {});
                         const description = typeof row.description === "string" ? row.description.trim() : "";
-                        return (_jsxs("div", { className: "stat-item", children: [renderBlockIcon(row.icon, { className: "stat-item__icon", size: 32 }), _jsx("span", { className: "stat-item__value", "data-editable-target": `stats[${idx}].value`, "data-editable-target-label": `stats[${idx}].value`, "data-editable-label": `stats[${idx}].value`, children: String(row.value ?? "") }), _jsx("span", { className: "stat-item__label", "data-editable-target": `stats[${idx}].label`, "data-editable-target-label": `stats[${idx}].label`, "data-editable-label": `stats[${idx}].label`, children: String(row.label ?? "") }), description.length > 0 && (_jsx("span", { className: "stat-item__description", "data-editable-target": `stats[${idx}].description`, "data-editable-target-label": `stats[${idx}].description`, "data-editable-label": `stats[${idx}].description`, children: description }))] }, idx));
+                        return (_jsxs("div", { className: "stat-item", children: [renderBlockIcon(row.icon, { className: "stat-item__icon", size: 32, editablePath: `stats[${idx}].icon` }), _jsx("span", { className: "stat-item__value", "data-editable-target": `stats[${idx}].value`, "data-editable-target-label": `stats[${idx}].value`, "data-editable-label": `stats[${idx}].value`, children: String(row.value ?? "") }), _jsx("span", { className: "stat-item__label", "data-editable-target": `stats[${idx}].label`, "data-editable-target-label": `stats[${idx}].label`, "data-editable-label": `stats[${idx}].label`, children: String(row.label ?? "") }), description.length > 0 && (_jsx("span", { className: "stat-item__description", "data-editable-target": `stats[${idx}].description`, "data-editable-target-label": `stats[${idx}].description`, "data-editable-label": `stats[${idx}].description`, children: description }))] }, idx));
                     }) })] }) }));
 }

package/dist/blocks/testimonials/renderer.js

@@ -9,7 +9,16 @@ export function Testimonials(props) {
                         const imageUrl = typeof row.imageUrl === "string" ? row.imageUrl.trim() : "";
                         const imageAlt = typeof row.imageAlt === "string" ? row.imageAlt.trim() : "";
                         const role = typeof row.role === "string" ? row.role.trim() : "";
-                        const iconNode = renderBlockIcon(row.icon, { className: "testimonial-card__icon", size: 32 });
-                        return (_jsxs("blockquote", { className: "testimonial-card", children: [iconNode ?? (_jsx("span", { className: "testimonial-card__mark", "aria-hidden": "true", children: "\u201C" })), _jsx("p", { className: "testimonial-card__quote", "data-editable-target": `items[${idx}].quote`, "data-editable-target-label": `items[${idx}].quote`, "data-editable-label": `items[${idx}].quote`, children: String(row.quote ?? "") }), _jsxs("footer", { className: "testimonial-card__footer", children: [imageUrl.length > 0 && (_jsx(BlockImage, { className: "testimonial-card__avatar", src: imageUrl, alt: imageAlt.length > 0 ? imageAlt : String(row.author ?? ""), width: 48, height: 48, loading: "lazy", "data-editable-target": `items[${idx}].imageUrl`, "data-editable-target-label": `items[${idx}].imageUrl`, "data-editable-label": `items[${idx}].imageUrl` })), _jsxs("div", { className: "testimonial-card__attribution", children: [_jsxs("span", { className: "testimonial-card__author", "data-editable-target": `items[${idx}].author`, "data-editable-target-label": `items[${idx}].author`, "data-editable-label": `items[${idx}].author`, children: ["\u2014 ", String(row.author ?? "")] }), role.length > 0 && (_jsx("span", { className: "testimonial-card__role", "data-editable-target": `items[${idx}].role`, "data-editable-target-label": `items[${idx}].role`, "data-editable-label": `items[${idx}].role`, children: role }))] })] })] }, idx));
+                        const iconNode = renderBlockIcon(row.icon, { className: "testimonial-card__icon", size: 32, editablePath: `items[${idx}].icon` });
+                        return (_jsxs("blockquote", { className: "testimonial-card", children: [iconNode ?? (_jsx("span", { className: "testimonial-card__mark", "aria-hidden": "true", children: "\u201C" })), _jsx("p", { className: "testimonial-card__quote", "data-editable-target": `items[${idx}].quote`, "data-editable-target-label": `items[${idx}].quote`, "data-editable-label": `items[${idx}].quote`, children: String(row.quote ?? "") }), _jsxs("footer", { className: "testimonial-card__footer", children: [imageUrl.length > 0 && (
+                                        /*
+                                         * The marker used to sit on the `<img>` itself, which reads
+                                         * as instrumented everywhere it is checked and is not: the
+                                         * overlay mounts the Change button by appending it into the
+                                         * marked element, and an `<img>` has no children. The
+                                         * attribute was in the HTML, the editor found the field, and
+                                         * no button could ever appear on an avatar.
+                                         */
+                                        _jsx("span", { className: "testimonial-card__avatar-wrap", "data-editable-target": `items[${idx}].imageUrl`, "data-editable-target-label": `items[${idx}].imageUrl`, "data-editable-label": `items[${idx}].imageUrl`, children: _jsx(BlockImage, { className: "testimonial-card__avatar", src: imageUrl, alt: imageAlt.length > 0 ? imageAlt : String(row.author ?? ""), width: 48, height: 48, loading: "lazy" }) })), _jsxs("div", { className: "testimonial-card__attribution", children: [_jsxs("span", { className: "testimonial-card__author", "data-editable-target": `items[${idx}].author`, "data-editable-target-label": `items[${idx}].author`, "data-editable-label": `items[${idx}].author`, children: ["\u2014 ", String(row.author ?? "")] }), role.length > 0 && (_jsx("span", { className: "testimonial-card__role", "data-editable-target": `items[${idx}].role`, "data-editable-target-label": `items[${idx}].role`, "data-editable-label": `items[${idx}].role`, children: role }))] })] })] }, idx));
                     }) })] }) }));
 }

package/dist/blocks/testimonials/styles.css

@@ -52,6 +52,15 @@ img.testimonial-card__icon {
   gap: 12px;
 }
 
+/* Wrapper the image marker sits on — see the note in the renderer. A flex item
+   of `.testimonial-card__footer`, sized by the avatar inside it. */
+.testimonial-card__avatar-wrap {
+  display: block;
+  position: relative;
+  flex: 0 0 auto;
+  line-height: 0;
+}
+
 .testimonial-card__avatar {
   width: 48px;
   height: 48px;

package/dist/blocks/two-column/renderer.js

@@ -1,31 +1,75 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { resolveHeadingTag } from "@avocadostudio-ai/shared";
 import { PrimaryButton, renderRichTextContent, BlockImage } from "../_shared.js";
+/**
+ * Mark an element for the field at `<prefix>.<key>`.
+ *
+ * The prefix matters more than it looks. These children used to be marked with
+ * flat names — `heading`, `body`, `ctaText` — which read like the other blocks'
+ * props and are nothing of the sort: a TwoColumn has no `heading` prop, only
+ * `left[]` and `right[]` of typed children. So every inline edit in this block
+ * committed a field draft addressed to a prop that does not exist, the schema
+ * dropped the unknown key on the way back through, and the edit disappeared on
+ * the next reconcile with no error anywhere. The coverage check saw the other
+ * half of the same fact: both lists reported "no marker for any item".
+ */
+function marker(pathPrefix, key, label) {
+    const path = `${pathPrefix}.${key}`;
+    return {
+        "data-editable-target": path,
+        "data-editable-target-label": label ?? path,
+        "data-editable-label": label ?? path,
+    };
+}
 function TwoColumnChild({ item, headingTag, pathPrefix }) {
     const childType = String(item.type ?? "");
     const HeadingTag = headingTag;
-    if (childType === "heading") {
-        return (_jsx(HeadingTag, { "data-editable-target": "heading", "data-editable-target-label": "heading", "data-editable-label": "heading", children: String(item.text ?? "") }));
+    if (childType === "heading" || childType === "subheading") {
+        const Tag = childType === "heading" ? HeadingTag : "p";
+        return (_jsx(Tag, { className: childType === "subheading" ? "two-column__subheading" : undefined, ...marker(pathPrefix, "text"), children: String(item.text ?? "") }));
     }
     if (childType === "paragraph") {
         const renderedBody = renderRichTextContent(String(item.text ?? ""));
-        return (_jsx("div", { className: "two-column__body", "data-editable-target": "body", "data-editable-target-label": "body", "data-editable-label": "body", children: renderedBody }));
+        return (_jsx("div", { className: "two-column__body", ...marker(pathPrefix, "text"), "data-editable-multiline": "true", children: renderedBody }));
+    }
+    if (childType === "list") {
+        const entries = Array.isArray(item.items) ? item.items : [];
+        const text = String(item.text ?? "");
+        if (entries.length === 0 && text.length === 0)
+            return null;
+        if (entries.length === 0) {
+            return (_jsx("div", { className: "two-column__body", ...marker(pathPrefix, "text"), "data-editable-multiline": "true", children: renderRichTextContent(text) }));
+        }
+        return (_jsx("ul", { className: "two-column__list", children: entries.map((entry, i) => (_jsx("li", { children: String(entry ?? "") }, i))) }));
     }
-    if (childType === "cta") {
-        const label = String(item.label ?? "");
-        if (!label)
+    if (childType === "cta" || childType === "ctas") {
+        /*
+         * `ctas` carries a `buttons` array; `cta` is the single-button spelling.
+         * Only the single one is marked: a button inside the array addresses
+         * `left[0].buttons[1].label`, two levels of nesting, which
+         * `supportsInlineEditablePath` rejects — so a marker there would offer an
+         * inline edit that cannot be committed.
+         */
+        const buttons = childType === "ctas" && Array.isArray(item.buttons)
+            ? item.buttons
+            : [{ label: item.label, href: item.href, newTab: item.newTab }];
+        const drawable = buttons.filter((button) => String(button?.label ?? "").length > 0);
+        if (drawable.length === 0)
             return null;
-        return (_jsx("div", { className: "two-column__cta", children: _jsx(PrimaryButton, { href: String(item.href ?? "#"), "data-editable-target": "ctaText", "data-editable-target-label": "ctaText", "data-editable-label": "ctaText", children: label }) }));
+        return (_jsx("div", { className: "two-column__cta", children: drawable.map((button, i) => (_jsx(PrimaryButton, { href: String(button.href ?? "#"), newTab: button.newTab === true, ...(childType === "cta" ? marker(pathPrefix, "label") : {}), children: String(button.label ?? "") }, i))) }));
     }
     if (childType === "video") {
         const src = String(item.src ?? "");
         const poster = item.poster ? String(item.poster) : undefined;
         if (!src)
             return null;
-        return (_jsx("div", { className: "two-column__media", children: _jsx("video", { className: "two-column__video", controls: true, playsInline: true, preload: "metadata", poster: poster, children: _jsx("source", { src: src, type: "video/mp4" }) }) }));
+        // The marker goes on the wrapper, never the <video>: the overlay mounts the
+        // Change button by appending it into the marked element, and a browser
+        // renders nothing a <video> contains.
+        return (_jsx("div", { className: "two-column__media", ...marker(pathPrefix, "poster", "Video poster"), "data-editable-kind": "image", children: _jsx("video", { className: "two-column__video", controls: true, playsInline: true, preload: "metadata", poster: poster, children: _jsx("source", { src: src, type: "video/mp4" }) }) }));
     }
     if (childType === "image") {
-        return (_jsx("div", { className: "two-column__media", "data-editable-target": `${pathPrefix}.src`, "data-editable-target-label": "Image", children: _jsx(BlockImage, { className: "layout-grid__img", src: String(item.src ?? ""), alt: String(item.alt ?? ""), width: 768, height: 1024, sizes: "(max-width: 768px) 100vw, 50vw", "data-editable-label": "Image" }) }));
+        return (_jsx("div", { className: "two-column__media", ...marker(pathPrefix, "src", "Image"), children: _jsx(BlockImage, { className: "layout-grid__img", src: String(item.src ?? ""), alt: String(item.alt ?? ""), width: 768, height: 1024, sizes: "(max-width: 768px) 100vw, 50vw", "data-editable-label": "Image" }) }));
     }
     return null;
 }

package/dist/blocks/two-column/styles.css

@@ -136,3 +136,39 @@
   margin: 0.3em 0 0;
 }
 
+
+/* A `subheading` child: a lead paragraph under the column title, not a heading
+   element — the block already resolves one heading level for the column and a
+   second one under it would misread as structure. */
+.two-column__subheading {
+  margin: 0 0 12px;
+  font-size: 1.125rem;
+  line-height: 1.5;
+  font-weight: 600;
+  color: var(--body);
+}
+
+/* A `list` child. The same look as a list written inside a `paragraph` child's
+   markdown, so the two spellings of the same content do not render differently. */
+.two-column__list {
+  margin: 0 0 16px;
+  padding-left: 1.4em;
+  list-style: disc;
+  color: var(--body-secondary);
+  line-height: 1.75;
+}
+
+.two-column__list li {
+  display: list-item;
+}
+
+.two-column__list li + li {
+  margin-top: 0.3em;
+}
+
+/* `ctas` draws more than one button; `cta` draws exactly one and is unaffected. */
+.two-column__cta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}

package/dist/blocks/video/renderer.js

@@ -31,14 +31,25 @@ function buildEmbedUrl(type, id, autoplay, loop) {
         params.set("loop", "1");
     return `https://player.vimeo.com/video/${id}?${params.toString()}`;
 }
-function EmbedFacade({ type, videoId, title, autoplay, loop }) {
+function EmbedFacade({ type, videoId, title, autoplay, loop, posterUrl }) {
     const [activated, setActivated] = useState(autoplay);
     if (activated) {
         return (_jsx("iframe", { src: buildEmbedUrl(type, videoId, true, loop), title: title || "Video", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true }));
     }
-    const thumbUrl = type === "youtube"
-        ? `https://i.ytimg.com/vi/${videoId}/hqdefault.jpg`
-        : undefined;
+    /*
+     * The poster the block was given wins over the one the platform derives.
+     *
+     * It used to be read only by the `<video>` branch, so setting a poster on a
+     * YouTube or Vimeo URL — which the property panel happily offers, with a
+     * picker and a Change button — changed nothing anybody could see. Vimeo was
+     * worse than a no-op: it has no `i.ytimg.com` equivalent, so its facade was a
+     * black rectangle with a play triangle whatever the block said.
+     */
+    const thumbUrl = posterUrl.length > 0
+        ? posterUrl
+        : type === "youtube"
+            ? `https://i.ytimg.com/vi/${videoId}/hqdefault.jpg`
+            : undefined;
     return (_jsxs("button", { type: "button", className: "video-block__facade", onClick: () => setActivated(true), "aria-label": `Play ${title || "video"}`, children: [thumbUrl && _jsx("img", { src: thumbUrl, alt: "", className: "video-block__facade-thumb", loading: "lazy" }), _jsxs("svg", { className: "video-block__facade-play", viewBox: "0 0 68 48", "aria-hidden": "true", children: [_jsx("path", { d: "M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55C3.97 2.33 2.27 4.81 1.48 7.74.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z", fill: "currentColor" }), _jsx("path", { d: "M45 24L27 14v20", fill: "#fff" })] })] }));
 }
 export function Video(props) {
@@ -48,5 +59,5 @@ export function Video(props) {
     const autoplay = String(props.autoplay) === "true";
     const loop = String(props.loop) === "true";
     const sourceType = detectSourceType(src);
-    return (_jsx("section", { className: "video-block", children: _jsxs("div", { className: "section__inner", children: [_jsxs("div", { className: "video-block__frame", children: [sourceType === "youtube" && (_jsx(EmbedFacade, { type: "youtube", videoId: extractYouTubeId(src), title: title, autoplay: autoplay, loop: loop })), sourceType === "vimeo" && (_jsx(EmbedFacade, { type: "vimeo", videoId: extractVimeoId(src), title: title, autoplay: autoplay, loop: loop })), sourceType === "direct" && (_jsx("video", { src: src, poster: posterUrl || undefined, controls: true, autoPlay: autoplay, loop: loop, playsInline: true, preload: "metadata" }))] }), title.length > 0 && (_jsx("p", { className: "video-block__caption", "data-editable-target": "title", "data-editable-target-label": "title", "data-editable-label": "title", children: renderInline(title) }))] }) }));
+    return (_jsx("section", { className: "video-block", children: _jsxs("div", { className: "section__inner", children: [_jsxs("div", { className: "video-block__frame", "data-editable-target": "posterUrl", "data-editable-target-label": "Poster image", "data-editable-kind": "image", children: [sourceType === "youtube" && (_jsx(EmbedFacade, { type: "youtube", videoId: extractYouTubeId(src), title: title, autoplay: autoplay, loop: loop, posterUrl: posterUrl })), sourceType === "vimeo" && (_jsx(EmbedFacade, { type: "vimeo", videoId: extractVimeoId(src), title: title, autoplay: autoplay, loop: loop, posterUrl: posterUrl })), sourceType === "direct" && (_jsx("video", { src: src, poster: posterUrl || undefined, controls: true, autoPlay: autoplay, loop: loop, playsInline: true, preload: "metadata" }))] }), title.length > 0 && (_jsx("p", { className: "video-block__caption", "data-editable-target": "title", "data-editable-target-label": "title", "data-editable-label": "title", children: renderInline(title) }))] }) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@avocadostudio-ai/blocks",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -26,8 +26,8 @@
     "dist"
   ],
   "dependencies": {
-    "@avocadostudio-ai/richtext": "^0.3.2",
-    "@avocadostudio-ai/shared": "^0.3.2"
+    "@avocadostudio-ai/shared": "^0.4.0",
+    "@avocadostudio-ai/richtext": "^0.4.0"
   },
   "peerDependencies": {
     "next": ">=15.0.0",