@avocadostudio-ai/blocks 0.1.0

package/dist/blocks/tabs/styles.css

@@ -0,0 +1,147 @@
+.tabs-block {
+  padding: 40px 20px;
+  background: var(--section-bg);
+}
+
+.tabs-block__title {
+  margin: 0 0 20px;
+}
+
+/* Tab bar wrapper — provides fade gradient overflow hints */
+.tabs-block__bar-wrap {
+  position: relative;
+  margin-bottom: 24px;
+}
+
+.tabs-block__bar-wrap::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 2px; /* above the border-bottom */
+  width: 48px;
+  pointer-events: none;
+  background: linear-gradient(to right, transparent, var(--section-bg, var(--bg-0)));
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+
+/* Show fade when bar is scrollable — JS adds this class */
+.tabs-block__bar-wrap--overflow::after {
+  opacity: 1;
+}
+
+/* Hide fade when scrolled to the end */
+.tabs-block__bar-wrap--at-end::after {
+  opacity: 0;
+}
+
+/* Tab bar */
+.tabs-block__bar {
+  display: flex;
+  gap: 0;
+  border-bottom: 2px solid var(--border);
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.tabs-block__bar::-webkit-scrollbar {
+  display: none;
+}
+
+.tabs-block__tab {
+  padding: 10px 20px;
+  border: none;
+  background: none;
+  font-size: 1rem;
+  font-weight: 500;
+  color: var(--text-200);
+  cursor: pointer;
+  white-space: nowrap;
+  transition: color 0.15s, box-shadow 0.15s;
+}
+
+.tabs-block__tab:hover {
+  color: var(--heading);
+}
+
+.tabs-block__tab--active {
+  color: var(--brand);
+  box-shadow: inset 0 -2px 0 var(--brand);
+}
+
+/* Panel content */
+.tabs-block__content {
+  font-size: 1rem;
+  line-height: 1.6;
+  color: var(--text-100);
+}
+
+.tabs-block__content p {
+  margin: 0 0 12px;
+}
+
+.tabs-block__content p:last-child {
+  margin-bottom: 0;
+}
+
+.tabs-block__content h3 {
+  margin: 0 0 8px;
+  font-size: 1.15rem;
+  font-weight: 600;
+  color: var(--heading);
+}
+
+.tabs-block__content ul {
+  margin: 0 0 12px;
+  padding-left: 24px;
+  list-style: none;
+}
+
+.tabs-block__content ol {
+  margin: 0 0 12px;
+  padding-left: 24px;
+  list-style: none;
+  counter-reset: ol-counter;
+}
+
+.tabs-block__content ul li::before {
+  content: "•";
+  color: var(--brand);
+  font-weight: 700;
+  display: inline-block;
+  width: 1em;
+  margin-left: -1em;
+}
+
+.tabs-block__content ol li {
+  counter-increment: ol-counter;
+}
+
+.tabs-block__content ol li::before {
+  content: counter(ol-counter) ".";
+  color: var(--brand);
+  font-weight: 600;
+  display: inline-block;
+  width: 1.5em;
+  margin-left: -1.5em;
+}
+
+.tabs-block__content li {
+  margin-bottom: 4px;
+}
+
+@media (max-width: 600px) {
+  .tabs-block {
+    padding: 24px 12px;
+  }
+
+  .tabs-block__tab {
+    padding: 8px 14px;
+    font-size: 0.95rem;
+  }
+
+  .tabs-block__bar {
+    margin-bottom: 16px;
+  }
+}

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

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

package/dist/blocks/testimonials/renderer.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { resolveHeadingTag } from "@avocadostudio-ai/shared";
+import { BlockImage, renderBlockIcon } from "../_shared.js";
+export function Testimonials(props) {
+    const items = Array.isArray(props.items) ? props.items : [];
+    const HeadingTag = resolveHeadingTag("Testimonials", 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("div", { className: "testimonials-grid", children: items.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 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));
+                    }) })] }) }));
+}

package/dist/blocks/testimonials/styles.css

@@ -0,0 +1,92 @@
+.testimonials-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 16px;
+  margin-top: 16px;
+}
+
+.testimonial-card {
+  margin: 0;
+  padding: 20px 24px 20px;
+  border-radius: var(--radius-card);
+  background: var(--surface);
+  border-left: 3px solid var(--brand);
+  position: relative;
+}
+
+.testimonial-card__mark {
+  font-size: 3rem;
+  line-height: 1;
+  color: var(--brand);
+  opacity: 0.25;
+  display: block;
+  margin-bottom: 6px;
+  font-family: Georgia, serif;
+}
+
+.testimonial-card__icon {
+  display: block;
+  font-size: 1.75rem;
+  line-height: 1;
+  margin-bottom: 10px;
+  width: 36px;
+  height: 36px;
+  object-fit: contain;
+}
+
+img.testimonial-card__icon {
+  border-radius: 8px;
+}
+
+.testimonial-card__quote {
+  margin: 0 0 14px;
+  font-style: italic;
+  color: var(--body);
+  font-size: 1rem;
+  line-height: 1.62;
+}
+
+.testimonial-card__footer {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.testimonial-card__avatar {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+.testimonial-card__attribution {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.testimonial-card__author {
+  font-size: 0.9375rem;
+  font-weight: 700;
+  letter-spacing: 0.005em;
+  color: var(--caption);
+}
+
+.testimonial-card__role {
+  font-size: 0.8125rem;
+  color: var(--body-secondary);
+  font-weight: 400;
+}
+
+/* Dark */
+.dark .testimonial-card__mark {
+  color: #22d3ee;
+  opacity: 0.35;
+}
+
+@media (max-width: 900px) {
+  .testimonials-grid {
+    grid-template-columns: 1fr;
+  }
+}

package/dist/blocks/two-column/renderer.d.ts

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

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

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { resolveHeadingTag } from "@avocadostudio-ai/shared";
+import { PrimaryButton, renderRichTextContent, BlockImage } from "../_shared.js";
+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 === "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 }));
+    }
+    if (childType === "cta") {
+        const label = String(item.label ?? "");
+        if (!label)
+            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 }) }));
+    }
+    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" }) }) }));
+    }
+    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 null;
+}
+export function TwoColumn(props) {
+    const leftItems = Array.isArray(props.left) ? props.left : [];
+    const rightItems = Array.isArray(props.right) ? props.right : [];
+    const variant = String(props.variant ?? "default");
+    const HeadingTag = resolveHeadingTag("TwoColumn", props);
+    const allItems = [...leftItems, ...rightItems];
+    const hasVideo = allItems.some((item) => String(item.type ?? "") === "video");
+    const accentClass = variant === "accent" || hasVideo ? " two-column--accent" : "";
+    return (_jsx("section", { className: `two-column${accentClass}`, children: _jsxs("div", { className: "section__inner two-column__inner layout-grid layout-grid--balanced", children: [_jsx("div", { className: "two-column__text layout-grid__col", children: leftItems.map((item, i) => (_jsx(TwoColumnChild, { item: item, headingTag: HeadingTag, pathPrefix: `left[${i}]` }, `l-${i}`))) }), _jsx("div", { className: "two-column__text layout-grid__col", children: rightItems.map((item, i) => (_jsx(TwoColumnChild, { item: item, headingTag: HeadingTag, pathPrefix: `right[${i}]` }, `r-${i}`))) })] }) }));
+}

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

@@ -0,0 +1,83 @@
+.two-column {
+  padding: 40px 20px;
+}
+
+.two-column__inner {
+  gap: 32px;
+}
+
+.two-column__text h2 {
+  margin: 0 0 12px;
+  font-size: clamp(1.75rem, 2.3vw, 2.15rem);
+  line-height: 1.15;
+  letter-spacing: -0.015em;
+  font-weight: 800;
+  color: var(--heading);
+}
+
+.two-column__body {
+  font-size: 1rem;
+  line-height: 1.65;
+  color: var(--body-secondary);
+  margin-bottom: 16px;
+}
+
+.two-column__body p {
+  font-size: 1rem;
+  line-height: 1.75;
+  color: var(--body-secondary);
+  margin-bottom: 1em;
+}
+
+.two-column__body p:last-child {
+  margin-bottom: 0;
+}
+
+.two-column__body ul,
+.two-column__body ol {
+  margin: 0 0 1em;
+  padding-left: 1.4em;
+  color: var(--body-secondary);
+  line-height: 1.75;
+}
+
+.two-column__body ul {
+  list-style: disc;
+}
+
+.two-column__body ol {
+  list-style: decimal;
+}
+
+.two-column__body li {
+  display: list-item;
+}
+
+.two-column__body li + li {
+  margin-top: 0.3em;
+}
+
+.two-column__body h3 {
+  margin-top: 1.25em;
+  margin-bottom: 0.45em;
+  font-size: 1.25rem;
+  line-height: 1.3;
+  letter-spacing: -0.01em;
+  font-weight: 700;
+  color: var(--heading);
+}
+
+.two-column__cta {
+  margin-top: 8px;
+}
+
+.two-column__media img {
+  border-radius: var(--radius-btn);
+  background: var(--placeholder-img);
+}
+
+@media (max-width: 900px) {
+  .two-column--image-left .two-column__media {
+    order: 0;
+  }
+}

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

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

package/dist/blocks/video/renderer.js

@@ -0,0 +1,52 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { renderInline } from "../_shared.js";
+function extractYouTubeId(url) {
+    const match = url.match(/(?:youtube\.com\/(?:watch\?.*v=|embed\/|shorts\/)|youtu\.be\/)([\w-]{11})/);
+    return match?.[1] ?? null;
+}
+function extractVimeoId(url) {
+    const match = url.match(/vimeo\.com\/(\d+)/);
+    return match?.[1] ?? null;
+}
+function detectSourceType(src) {
+    if (extractYouTubeId(src))
+        return "youtube";
+    if (extractVimeoId(src))
+        return "vimeo";
+    return "direct";
+}
+function buildEmbedUrl(type, id, autoplay, loop) {
+    if (type === "youtube") {
+        const params = new URLSearchParams();
+        params.set("autoplay", "1");
+        if (loop)
+            params.set("loop", "1");
+        return `https://www.youtube.com/embed/${id}?${params.toString()}`;
+    }
+    const params = new URLSearchParams();
+    params.set("autoplay", "1");
+    if (loop)
+        params.set("loop", "1");
+    return `https://player.vimeo.com/video/${id}?${params.toString()}`;
+}
+function EmbedFacade({ type, videoId, title, autoplay, loop }) {
+    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;
+    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) {
+    const src = String(props.src ?? "");
+    const title = String(props.title ?? "");
+    const posterUrl = String(props.posterUrl ?? "");
+    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) }))] }) }));
+}

package/dist/blocks/video/styles.css

@@ -0,0 +1,84 @@
+.video-block {
+  padding: 40px 20px;
+  background: var(--section-bg);
+}
+
+.video-block .section__inner {
+  max-width: 960px;
+  display: grid;
+  row-gap: 12px;
+  justify-items: center;
+}
+
+.video-block__frame {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  position: relative;
+  overflow: hidden;
+  border-radius: var(--radius-card, 12px);
+  background: #000;
+}
+
+.video-block__frame iframe,
+.video-block__frame video {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  display: block;
+}
+
+.video-block__facade {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  padding: 0;
+  cursor: pointer;
+  background: #000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.video-block__facade-thumb {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.video-block__facade-play {
+  position: relative;
+  z-index: 1;
+  width: 68px;
+  height: 48px;
+  color: var(--brand, #e00);
+  opacity: 0.85;
+  transition: opacity 0.15s;
+}
+
+.video-block__facade:hover .video-block__facade-play {
+  opacity: 1;
+}
+
+.video-block__caption {
+  margin: 0;
+  font-size: 0.95rem;
+  color: var(--text-200);
+  text-align: center;
+  text-wrap: pretty;
+}
+
+@media (max-width: 600px) {
+  .video-block {
+    padding: 24px 12px;
+  }
+
+  .video-block__frame {
+    border-radius: var(--radius-card, 8px);
+  }
+}

package/dist/blocks-hydrator.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Client component that hydrates interactive blocks (carousel, tabs, etc.)
+ * after the page renders. Drop this anywhere in the component tree.
+ */
+export declare function BlocksHydrator(): null;

package/dist/blocks-hydrator.js

@@ -0,0 +1,15 @@
+"use client";
+import { useEffect } from "react";
+import { initCarousels } from "./blocks/carousel/init.js";
+import { initTabs } from "./blocks/tabs/init.js";
+/**
+ * Client component that hydrates interactive blocks (carousel, tabs, etc.)
+ * after the page renders. Drop this anywhere in the component tree.
+ */
+export function BlocksHydrator() {
+    useEffect(() => {
+        initCarousels();
+        initTabs();
+    });
+    return null;
+}

package/dist/catalogue.d.ts

@@ -0,0 +1 @@
+export declare function BlockCatalogue(): import("react/jsx-runtime").JSX.Element;