@avocadostudio-ai/blocks 0.1.0

package/dist/blocks/_tokens.css

@@ -0,0 +1,127 @@
+/* Design tokens consumed by block renderers and the BlockCatalogue UI.
+   Ship with the package so consumers don't need to redeclare them. */
+
+:root {
+  color-scheme: light;
+  --bg-0: #faf9f5;
+  --bg-000: #faf9f5;
+  --bg-100: #ffffff;
+  --bg-200: #f0eee6;
+  --bg-300: #dddddd;
+  --text-100: #1f1e1d;
+  --text-200: #3d3d3a;
+  --text-300: #73726c;
+  --text-400: #888888;
+  --text-500: #999999;
+  --accent: #d97757;
+  --accent-hover: #c6613f;
+  --radius: 0.5rem;
+  --ease-silk: cubic-bezier(0.2, 0, 0, 1);
+
+  --brand: #0f766e;
+  --brand-hover: #10958a;
+  --brand-subtle: #ecfdf5;
+  --brand-fg: #fff;
+
+  --surface: #f8fafc;
+  --surface-border: #e2e8f0;
+
+  --heading: #0f172a;
+  --body: #1e293b;
+  --body-secondary: #334155;
+  --caption: #64748b;
+  --link: #0f766e;
+
+  --nav-border: #99d6d0;
+  --nav-bg: rgb(240 253 250 / 0.95);
+
+  --footer-bg: #0f172a;
+  --footer-text: #cbd5e1;
+  --footer-heading: #f1f5f9;
+  --footer-link: #94a3b8;
+  --footer-link-hover: #e2e8f0;
+  --footer-border: #1e293b;
+
+  --placeholder-img: #e2e8f0;
+
+  --font-body: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --font-heading: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+
+  --radius-btn: 6px;
+  --radius-card: 0;
+  --radius-feature: 8px;
+  --radius-logo: 8px;
+  --radius-input: 10px;
+  --radius-dropdown: 12px;
+
+  --bg-1: #ffffff;
+  --border: #e2e8f0;
+  --stripe-bg: #f5f5f0;
+  --table-header-bg: #eceee6;
+
+  --card-bg: #f8fafc;
+  --card-shadow: none;
+  --hero-bg: linear-gradient(120deg, #eef6ff 0%, #f0fdf4 55%, #fff7ed 100%);
+  --cta-bg:
+    radial-gradient(circle at 12% 18%, rgb(20 184 166 / 0.18), transparent 36%),
+    radial-gradient(circle at 82% 74%, rgb(59 130 246 / 0.14), transparent 40%),
+    linear-gradient(120deg, #f0fdfa 0%, #eff6ff 52%, #fefce8 100%);
+  --section-bg: var(--bg-100);
+}
+
+.dark {
+  color-scheme: dark;
+  --bg-0: #212121;
+  --bg-000: #212121;
+  --bg-100: #262624;
+  --bg-200: #30302e;
+  --bg-300: #454540;
+  --text-100: #ececec;
+  --text-200: #e1e1e0;
+  --text-300: #b4b4b4;
+  --text-400: #8a8a88;
+  --text-500: #6b6b65;
+  --accent: #d2996e;
+  --accent-hover: #e5aa7f;
+
+  --brand: #0f766e;
+  --brand-hover: #10958a;
+  --brand-subtle: rgb(20 184 166 / 0.08);
+  --brand-fg: #fff;
+
+  --surface: #111827;
+  --surface-border: #2b3b53;
+
+  --heading: #f8fafc;
+  --body: #cbd5e1;
+  --body-secondary: #cbd5e1;
+  --caption: #93c5fd;
+  --link: #7dd3fc;
+
+  --nav-border: #334155;
+  --nav-bg: rgb(15 23 42 / 0.92);
+
+  --footer-bg: #0f172a;
+  --footer-text: #cbd5e1;
+  --footer-heading: #f1f5f9;
+  --footer-link: #94a3b8;
+  --footer-link-hover: #e2e8f0;
+  --footer-border: #1e293b;
+
+  --placeholder-img: #e2e8f0;
+
+  --bg-1: #1e293b;
+  --border: #334155;
+  --stripe-bg: #1c1c1a;
+  --table-header-bg: #2a2a27;
+
+  --card-bg: linear-gradient(160deg, #172033 0%, #111827 100%);
+  --card-shadow: 0 8px 22px rgb(2 6 23 / 0.35);
+  --hero-bg: linear-gradient(120deg, #172033 0%, #13272b 55%, #352817 100%);
+  --cta-bg:
+    radial-gradient(circle at 12% 18%, rgb(20 184 166 / 0.22), transparent 36%),
+    radial-gradient(circle at 82% 74%, rgb(59 130 246 / 0.2), transparent 40%),
+    linear-gradient(120deg, #0f172a 0%, #111827 52%, #1f2937 100%);
+  --section-bg: #111827;
+}

package/dist/blocks/banner/renderer.d.ts

@@ -0,0 +1,2 @@
+import type { JSX } from "react";
+export declare function Banner(props: Record<string, unknown>): JSX.Element;

package/dist/blocks/banner/renderer.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { renderInline, PrimaryButton } from "../_shared.js";
+const variantClass = {
+    info: "banner--info",
+    success: "banner--success",
+    warning: "banner--warning",
+};
+export function Banner(props) {
+    const text = String(props.text ?? "");
+    const variant = String(props.variant ?? "info");
+    const ctaText = String(props.ctaText ?? "");
+    const ctaHref = String(props.ctaHref ?? "");
+    const backgroundColor = typeof props.backgroundColor === "string" ? props.backgroundColor.trim() : "";
+    const textColor = typeof props.textColor === "string" ? props.textColor.trim() : "";
+    const customStyle = {};
+    if (backgroundColor.length > 0)
+        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 }))] }) }));
+}

package/dist/blocks/banner/styles.css

@@ -0,0 +1,72 @@
+.banner {
+  padding: 16px 20px;
+}
+
+.banner__inner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+.banner__text {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 500;
+  line-height: 1.4;
+  text-align: center;
+}
+
+.banner__cta.btn-primary {
+  padding: 8px 20px;
+  font-size: 0.9rem;
+  white-space: nowrap;
+}
+
+/* Variants — light mode */
+.banner--info {
+  background: var(--brand-subtle, #e0f2fe);
+  color: var(--heading);
+}
+
+.banner--success {
+  background: var(--banner-success-bg, #d1fae5);
+  color: var(--banner-success-text, #065f46);
+}
+
+.banner--warning {
+  background: var(--banner-warning-bg, #fef3c7);
+  color: var(--banner-warning-text, #92400e);
+}
+
+/* Dark mode */
+.dark .banner--info {
+  background: color-mix(in srgb, var(--brand) 15%, var(--bg-1));
+  color: var(--text-100);
+}
+
+.dark .banner--success {
+  background: var(--banner-success-bg, color-mix(in srgb, #10b981 15%, var(--bg-1)));
+  color: var(--banner-success-text, #6ee7b7);
+}
+
+.dark .banner--warning {
+  background: var(--banner-warning-bg, color-mix(in srgb, #f59e0b 15%, var(--bg-1)));
+  color: var(--banner-warning-text, #fcd34d);
+}
+
+@media (max-width: 900px) {
+  .banner {
+    padding: 12px 12px;
+  }
+
+  .banner__inner {
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .banner__text {
+    font-size: 0.95rem;
+  }
+}

package/dist/blocks/block-image.d.ts

@@ -0,0 +1,14 @@
+export type BlockImageProps = {
+    src: string;
+    alt: string;
+    width?: number;
+    height?: number;
+    fill?: boolean;
+    sizes?: string;
+    loading?: "lazy" | "eager";
+    priority?: boolean;
+    className?: string;
+    "data-editable-label"?: string;
+    [key: string]: unknown;
+};
+export declare function BlockImage({ fill, sizes, priority, loading, ...rest }: BlockImageProps): import("react/jsx-runtime").JSX.Element;

package/dist/blocks/block-image.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import NextImage from "next/image";
+export function BlockImage({ fill, sizes, priority, loading, ...rest }) {
+    if (fill) {
+        const { width, height, ...fillRest } = rest;
+        return _jsx(NextImage, { fill: true, sizes: sizes, priority: priority, loading: priority ? undefined : loading, ...fillRest });
+    }
+    return (_jsx(NextImage, { width: rest.width ?? 0, height: rest.height ?? 0, sizes: sizes, priority: priority, loading: priority ? undefined : loading, ...rest }));
+}

package/dist/blocks/block-types.d.ts

@@ -0,0 +1,2 @@
+export declare const rendererBlockTypes: readonly ["Hero", "FeatureGrid", "Testimonials", "FAQAccordion", "CTA", "Card", "CardGrid", "RichText", "Stats", "TwoColumn", "Footer", "SiteHeader", "Embed", "Banner", "Carousel", "Gallery", "Tabs", "Table", "Quote", "Video"];
+export type RendererBlockType = (typeof rendererBlockTypes)[number];

package/dist/blocks/block-types.js

@@ -0,0 +1,22 @@
+export const rendererBlockTypes = [
+    "Hero",
+    "FeatureGrid",
+    "Testimonials",
+    "FAQAccordion",
+    "CTA",
+    "Card",
+    "CardGrid",
+    "RichText",
+    "Stats",
+    "TwoColumn",
+    "Footer",
+    "SiteHeader",
+    "Embed",
+    "Banner",
+    "Carousel",
+    "Gallery",
+    "Tabs",
+    "Table",
+    "Quote",
+    "Video"
+];

package/dist/blocks/card/renderer.d.ts

@@ -0,0 +1 @@
+export declare function Card(props: Record<string, unknown>): import("react/jsx-runtime").JSX.Element;

package/dist/blocks/card/renderer.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { resolveHeadingTag } from "@avocadostudio-ai/shared";
+import { PrimaryButton, BlockImage } from "../_shared.js";
+export function Card(props) {
+    const imageUrl = typeof props.imageUrl === "string" ? props.imageUrl.trim() : "";
+    const imageAlt = typeof props.imageAlt === "string" ? props.imageAlt.trim() : "";
+    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 ?? "") })] })] }) }) }));
+}

package/dist/blocks/card/styles.css

@@ -0,0 +1,94 @@
+.card {
+  background: var(--card-bg);
+  box-shadow: var(--card-shadow);
+  border-radius: var(--radius-card);
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.card__image-wrap {
+  margin: -16px -16px 12px;
+  border-bottom: 1px solid var(--surface-border);
+}
+
+.card__image {
+  width: 100%;
+  height: 180px;
+  object-fit: cover;
+  display: block;
+  background: var(--placeholder-img);
+}
+
+.card h3 {
+  margin: 0 0 10px;
+  font-size: 1.25rem;
+  line-height: 1.25;
+  letter-spacing: -0.01em;
+  font-weight: 700;
+  color: var(--heading);
+}
+
+.card p {
+  margin: 0 0 14px;
+  font-size: 1rem;
+  line-height: 1.6;
+  color: var(--body);
+}
+
+.card .btn-primary,
+.card .btn-secondary {
+  margin-top: auto;
+  align-self: flex-start;
+}
+
+/* ── Full-bleed variant ─────────────────────────────── */
+.card--full-bleed {
+  position: relative;
+  overflow: hidden;
+  min-height: 280px;
+  justify-content: flex-end;
+  padding: 0;
+  border: none;
+}
+
+.card--full-bleed .card__bg-image {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  z-index: 0;
+}
+
+.card--full-bleed::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.15) 100%);
+  z-index: 1;
+}
+
+.card__overlay-content {
+  position: relative;
+  z-index: 2;
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content: flex-end;
+}
+
+.card--full-bleed h1,
+.card--full-bleed h2,
+.card--full-bleed h3,
+.card--full-bleed h4,
+.card--full-bleed h5,
+.card--full-bleed h6 {
+  color: #fff;
+}
+
+.card--full-bleed p {
+  color: rgba(255, 255, 255, 0.9);
+}

package/dist/blocks/card-grid/renderer.d.ts

@@ -0,0 +1 @@
+export declare function CardGrid(props: Record<string, unknown>): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { resolveHeadingTag, resolveItemHeadingTag } from "@avocadostudio-ai/shared";
+import { PrimaryButton, BlockImage } from "../_shared.js";
+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 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) => {
+                        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));
+                    }) })] }) }));
+}

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

@@ -0,0 +1,38 @@
+.card-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 14px;
+}
+
+.card-grid--2-col {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.card-grid--4-col {
+  grid-template-columns: repeat(4, 1fr);
+}
+
+.card-grid-section h2 {
+  margin-bottom: 16px;
+}
+
+.card-grid .card {
+  background-color: var(--surface);
+  background-image:
+    radial-gradient(circle at 100% 0, rgba(15, 118, 110, 0.1) 0, rgba(15, 118, 110, 0) 42%),
+    linear-gradient(145deg, rgba(148, 163, 184, 0.12), rgba(148, 163, 184, 0) 38%);
+  border: 1px solid var(--surface-border);
+}
+
+/* Dark */
+.dark .card-grid .card {
+  background-image: none;
+}
+
+@media (max-width: 900px) {
+  .card-grid,
+  .card-grid--2-col,
+  .card-grid--4-col {
+    grid-template-columns: 1fr;
+  }
+}

package/dist/blocks/carousel/init.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Wire up carousel interactivity: prev/next buttons, dot navigation,
+ * scroll-based active dot tracking, and optional autoplay.
+ *
+ * Safe to call multiple times — uses a data-ready guard to skip
+ * already-initialized carousels.
+ */
+export declare function initCarousels(root?: Document | HTMLElement): void;

package/dist/blocks/carousel/init.js

@@ -0,0 +1,35 @@
+/**
+ * Wire up carousel interactivity: prev/next buttons, dot navigation,
+ * scroll-based active dot tracking, and optional autoplay.
+ *
+ * Safe to call multiple times — uses a data-ready guard to skip
+ * already-initialized carousels.
+ */
+export function initCarousels(root = document) {
+    root.querySelectorAll(".carousel:not([data-ready])").forEach((el) => {
+        el.setAttribute("data-ready", "1");
+        const track = el.querySelector(".carousel__track");
+        if (!track)
+            return;
+        const dots = el.querySelectorAll(".carousel__dot");
+        const prev = el.querySelector(".carousel__btn--prev");
+        const next = el.querySelector(".carousel__btn--next");
+        const currentIndex = () => Math.round(track.scrollLeft / track.offsetWidth);
+        const goTo = (i) => track.scrollTo({ left: i * track.offsetWidth, behavior: "smooth" });
+        const syncDots = () => {
+            const c = currentIndex();
+            dots.forEach((d, i) => d.classList.toggle("carousel__dot--active", i === c));
+        };
+        if (prev)
+            prev.onclick = () => { const i = currentIndex(); goTo(i > 0 ? i - 1 : dots.length - 1); };
+        if (next)
+            next.onclick = () => { const i = currentIndex(); goTo(i < dots.length - 1 ? i + 1 : 0); };
+        dots.forEach((d, i) => { d.onclick = () => goTo(i); });
+        track.addEventListener("scroll", syncDots, { passive: true });
+        if (el.dataset.autoplay === "true") {
+            const ms = parseInt(el.dataset.interval ?? "5000") || 5000;
+            const timer = setInterval(() => { const i = currentIndex(); goTo(i < dots.length - 1 ? i + 1 : 0); }, ms);
+            el.addEventListener("pointerdown", () => clearInterval(timer), { once: true });
+        }
+    });
+}

package/dist/blocks/carousel/renderer.d.ts

@@ -0,0 +1,2 @@
+import type { JSX } from "react";
+export declare function Carousel(props: Record<string, unknown>): JSX.Element;

package/dist/blocks/carousel/renderer.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { resolveItemHeadingTag } from "@avocadostudio-ai/shared";
+import { renderInline, PrimaryButton, BlockImage } from "../_shared.js";
+export function Carousel(props) {
+    const items = Array.isArray(props.items) ? props.items : [];
+    const autoplay = String(props.autoplay) === "true";
+    const interval = Number(props.interval) || 5000;
+    const ItemHeadingTag = resolveItemHeadingTag("Carousel", props);
+    return (_jsx("section", { className: "carousel", "data-autoplay": autoplay ? "true" : undefined, "data-interval": String(interval), children: _jsxs("div", { className: "carousel__inner section__inner", children: [_jsx("div", { className: "carousel__track", children: items.map((raw, idx) => {
+                        const item = (raw ?? {});
+                        const imageUrl = String(item.imageUrl ?? "");
+                        const imageAlt = String(item.imageAlt ?? "");
+                        const heading = String(item.heading ?? "");
+                        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));
+                    }) }), 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

@@ -0,0 +1,136 @@
+.carousel {
+  padding: 40px 20px;
+  background: var(--section-bg);
+}
+
+.carousel__inner {
+  position: relative;
+}
+
+/* Track — scroll-snap container */
+.carousel__track {
+  display: flex;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  scroll-behavior: smooth;
+  -webkit-overflow-scrolling: touch;
+  gap: 0;
+  scrollbar-width: none;
+}
+
+.carousel__track::-webkit-scrollbar {
+  display: none;
+}
+
+/* Slide */
+.carousel__slide {
+  flex: 0 0 100%;
+  scroll-snap-align: start;
+  position: relative;
+  border-radius: var(--radius-card, 12px);
+  overflow: hidden;
+  background: var(--bg-1);
+  border: 1px solid var(--border);
+}
+
+.carousel__image {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  object-fit: cover;
+  display: block;
+}
+
+/* Caption area */
+.carousel__caption {
+  padding: 20px 24px;
+  border-top: 1px solid var(--border);
+}
+
+.carousel__caption :is(h2, h3, h4, h5, h6) {
+  margin: 0 0 6px;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--heading);
+}
+
+.carousel__caption p {
+  margin: 0;
+  font-size: 1rem;
+  line-height: 1.5;
+  color: var(--text-200);
+}
+
+.carousel__cta.btn-primary {
+  margin-top: 12px;
+  display: inline-block;
+}
+
+/* Prev / Next buttons */
+.carousel__btn {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 2;
+  width: 40px;
+  height: 40px;
+  border: none;
+  border-radius: 50%;
+  background: color-mix(in srgb, var(--bg-1) 85%, transparent);
+  color: var(--text-100);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+  transition: background 0.15s, opacity 0.15s;
+}
+
+.carousel__btn:hover {
+  background: var(--bg-1);
+}
+
+.carousel__btn--prev { left: 12px; }
+.carousel__btn--next { right: 12px; }
+
+/* Dot indicators */
+.carousel__dots {
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+  margin-top: 16px;
+}
+
+.carousel__dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  border: 2px solid var(--text-200);
+  background: transparent;
+  cursor: pointer;
+  padding: 0;
+  transition: background 0.15s, border-color 0.15s;
+}
+
+.carousel__dot--active {
+  background: var(--brand);
+  border-color: var(--brand);
+}
+
+/* Mobile */
+@media (max-width: 900px) {
+  .carousel {
+    padding: 24px 12px;
+  }
+
+  .carousel__btn {
+    width: 32px;
+    height: 32px;
+  }
+
+  .carousel__btn--prev { left: 6px; }
+  .carousel__btn--next { right: 6px; }
+
+  .carousel__caption {
+    padding: 14px 16px;
+  }
+}

package/dist/blocks/cta/renderer.d.ts

@@ -0,0 +1 @@
+export declare function CTA(props: Record<string, unknown>): import("react/jsx-runtime").JSX.Element;