@avocadostudio-ai/blocks 0.1.0

package/dist/blocks/hero/styles.css

@@ -0,0 +1,137 @@
+.hero {
+  border-radius: 0;
+  padding: 56px 20px;
+  background: var(--hero-bg);
+  position: relative;
+  overflow: hidden;
+}
+
+.hero__inner {
+  position: relative;
+  gap: 24px;
+}
+
+.hero__content h1 {
+  margin: 0 0 14px;
+  font-size: clamp(2rem, 4.2vw, 3.35rem);
+  line-height: 1.08;
+  letter-spacing: -0.02em;
+  font-weight: 800;
+  color: var(--heading);
+}
+
+.hero__content p {
+  margin: 0;
+  font-size: clamp(1rem, 1.65vw, 1.05rem);
+  line-height: 1.55;
+  color: var(--text-200);
+  max-width: 36ch;
+}
+
+.hero__media img {
+  background: var(--placeholder-img);
+}
+
+.hero__eyebrow {
+  display: inline-block;
+  font-size: 0.8125rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--brand);
+  margin-bottom: 8px;
+}
+
+.hero__content--center {
+  text-align: center;
+  align-items: center;
+}
+
+.hero__content--center p {
+  max-width: 52ch;
+}
+
+.hero__content--center .hero__actions {
+  justify-content: center;
+}
+
+.hero__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-top: 24px;
+}
+
+/* ── Full-width image variant ─────────────────────────────── */
+.hero--full-width {
+  position: relative;
+  min-height: 420px;
+  display: flex;
+  align-items: center;
+}
+
+.hero--full-width .hero__bg-image {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  z-index: 0;
+}
+
+.hero--full-width::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.45);
+  z-index: 0;
+}
+
+.hero--full-width .hero__inner {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  width: 100%;
+}
+
+.hero--full-width .hero__content {
+  max-width: 720px;
+}
+
+.hero--full-width .hero__eyebrow {
+  color: rgba(255, 255, 255, 0.85);
+}
+
+.hero--full-width .hero__content h1,
+.hero--full-width .hero__content h2,
+.hero--full-width .hero__content h3 {
+  color: #fff;
+}
+
+.hero--full-width .hero__content p {
+  color: rgba(255, 255, 255, 0.9);
+  max-width: 52ch;
+}
+
+.hero--full-width .hero__actions {
+  justify-content: center;
+}
+
+/* Dark */
+.dark .hero__content p {
+  color: var(--body);
+}
+
+@media (max-width: 900px) {
+  .hero__content h1 {
+    font-size: clamp(1.75rem, 8vw, 2.5rem);
+    line-height: 1.12;
+  }
+
+  .hero {
+    padding: 40px 16px;
+  }
+}

package/dist/blocks/index.d.ts

@@ -0,0 +1,5 @@
+import type { JSX } from "react";
+import { type RendererBlockType } from "./block-types.ts";
+export declare const renderers: Record<RendererBlockType, (props: Record<string, unknown>) => JSX.Element | null>;
+export declare const rendererTypes: ("Hero" | "FeatureGrid" | "Testimonials" | "FAQAccordion" | "CTA" | "Card" | "CardGrid" | "RichText" | "Stats" | "TwoColumn" | "Footer" | "Gallery" | "Carousel" | "Tabs" | "Quote" | "SiteHeader" | "Embed" | "Banner" | "Table" | "Video")[];
+export declare function isRendererBlockType(value: string): value is RendererBlockType;

package/dist/blocks/index.js

@@ -0,0 +1,47 @@
+import { rendererBlockTypes } from "./block-types.js";
+import { Hero } from "./hero/renderer.js";
+import { FeatureGrid } from "./feature-grid/renderer.js";
+import { Testimonials } from "./testimonials/renderer.js";
+import { FAQAccordion } from "./faq-accordion/renderer.js";
+import { CTA } from "./cta/renderer.js";
+import { Card } from "./card/renderer.js";
+import { CardGrid } from "./card-grid/renderer.js";
+import { RichText } from "./rich-text/renderer.js";
+import { Stats } from "./stats/renderer.js";
+import { TwoColumn } from "./two-column/renderer.js";
+import { Footer } from "./footer/renderer.js";
+import { SiteHeader } from "./site-header/renderer.js";
+import { Embed } from "./embed/renderer.js";
+import { Banner } from "./banner/renderer.js";
+import { Carousel } from "./carousel/renderer.js";
+import { Gallery } from "./gallery/renderer.js";
+import { Tabs } from "./tabs/renderer.js";
+import { Table } from "./table/renderer.js";
+import { Quote } from "./quote/renderer.js";
+import { Video } from "./video/renderer.js";
+export const renderers = {
+    Hero,
+    FeatureGrid,
+    Testimonials,
+    FAQAccordion,
+    CTA,
+    Card,
+    CardGrid,
+    RichText,
+    Stats,
+    TwoColumn,
+    Footer,
+    SiteHeader,
+    Embed,
+    Banner,
+    Carousel,
+    Gallery,
+    Tabs,
+    Table,
+    Quote,
+    Video
+};
+export const rendererTypes = [...rendererBlockTypes];
+export function isRendererBlockType(value) {
+    return rendererBlockTypes.includes(value);
+}

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

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

package/dist/blocks/quote/renderer.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { renderRichTextContent, BlockImage } from "../_shared.js";
+export function Quote(props) {
+    const quote = String(props.quote ?? "");
+    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 }))] })] }))] }) }));
+}

package/dist/blocks/quote/styles.css

@@ -0,0 +1,97 @@
+.quote-block {
+  padding: 40px 20px;
+  background: var(--section-bg);
+}
+
+.quote-block .section__inner {
+  max-width: 720px;
+  text-align: center;
+}
+
+.quote-block__quote {
+  margin: 0;
+  padding: 0;
+  position: relative;
+}
+
+.quote-block__mark {
+  display: block;
+  font-size: 4rem;
+  line-height: 0.8;
+  color: var(--brand);
+  font-family: Georgia, "Times New Roman", serif;
+  user-select: none;
+}
+
+.quote-block__text {
+  font-size: 1.25rem;
+  line-height: 1.6;
+  color: var(--heading);
+  font-style: italic;
+  margin-top: 4px;
+}
+
+.quote-block__text p {
+  margin: 0 0 8px;
+}
+
+.quote-block__text p:last-child {
+  margin-bottom: 0;
+}
+
+/* Attribution row */
+.quote-block__attribution {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 12px;
+  margin-top: 20px;
+  padding-top: 16px;
+  border-top: 1px solid var(--border);
+  text-align: left;
+}
+
+.quote-block__avatar {
+  width: 48px;
+  height: 48px;
+  min-width: 48px;
+  min-height: 48px;
+  max-width: 48px;
+  max-height: 48px;
+  border-radius: 50%;
+  object-fit: cover;
+  display: block;
+}
+
+.quote-block__author-info {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.quote-block__author {
+  display: block;
+  font-weight: 600;
+  font-size: 0.95rem;
+  color: var(--heading);
+}
+
+.quote-block__role {
+  display: block;
+  font-size: 0.85rem;
+  color: var(--text-200);
+}
+
+@media (max-width: 600px) {
+  .quote-block {
+    padding: 24px 12px;
+  }
+
+  .quote-block__mark {
+    font-size: 3rem;
+  }
+
+  .quote-block__text {
+    font-size: 1.1rem;
+  }
+}

package/dist/blocks/rich-text/renderer.d.ts

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

package/dist/blocks/rich-text/renderer.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isValidElement } from "react";
+import { resolveHeadingTag } from "@avocadostudio-ai/shared";
+import { renderRichTextContent } from "../_shared.js";
+export function RichText(props) {
+    const title = String(props.title ?? "");
+    // Puck's richtext transform passes React elements; plain strings come from
+    // the orchestrator/preview. Handle both.
+    const body = props.body;
+    const renderedBody = isValidElement(body)
+        ? body
+        : renderRichTextContent(String(body ?? ""));
+    const HeadingTag = resolveHeadingTag("RichText", props);
+    return (_jsx("section", { className: "rich-text", 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: "rich-text__body", "data-editable-target": "body", "data-editable-target-label": "body", "data-editable-label": "body", children: renderedBody })] }) }));
+}

package/dist/blocks/rich-text/styles.css

@@ -0,0 +1,64 @@
+.rich-text {}
+
+.rich-text__body p {
+  font-size: 1rem;
+  line-height: 1.75;
+  color: var(--body);
+  margin-bottom: 1em;
+}
+
+.rich-text__body p:last-child {
+  margin-bottom: 0;
+}
+
+.rich-text__body ul,
+.rich-text__body ol {
+  margin: 0 0 1em;
+  padding-left: 1.4em;
+  color: var(--body);
+  line-height: 1.75;
+}
+
+.rich-text__body ul {
+  list-style: disc;
+}
+
+.rich-text__body ol {
+  list-style: decimal;
+}
+
+.rich-text__body li {
+  display: list-item;
+}
+
+.rich-text__body li + li {
+  margin-top: 0.3em;
+}
+
+.rich-text__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);
+}
+
+/* Dark */
+.dark .rich-text__body,
+.dark .rich-text__body li,
+.dark .rich-text__body strong,
+.dark .rich-text__body em {
+  color: #dbe7f7;
+}
+
+.dark main.editor-mode .rich-text__body p,
+.dark main.editor-mode .rich-text__body li {
+  color: #dbe7f7;
+}
+
+.dark .editor-live-draft-active .rich-text__body[data-editable-target]::after {
+  background: rgba(56, 189, 248, 0.025);
+  animation: none;
+}

package/dist/blocks/site-header/renderer.d.ts

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

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

@@ -0,0 +1,64 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useCallback } from "react";
+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" }) }));
+}
+export function SiteHeader(props) {
+    const siteName = String(props.siteName ?? "Site");
+    const logoUrl = String(props.logoUrl ?? "/logo.svg");
+    const activePath = typeof props.activePath === "string" ? props.activePath : undefined;
+    const links = Array.isArray(props.links)
+        ? props.links.filter((l) => l && typeof l.label === "string" && (typeof l.href === "string" || Array.isArray(l.children)))
+        : [];
+    const [isOpen, setIsOpen] = useState(false);
+    const [expandedGroup, setExpandedGroup] = useState(null);
+    const menuRef = useRef(null);
+    const toggleRef = useRef(null);
+    const menuId = "site-mobile-menu";
+    const close = useCallback(() => { setIsOpen(false); setExpandedGroup(null); }, []);
+    const toggle = useCallback(() => setIsOpen((v) => !v), []);
+    // Close on popstate (SPA navigation)
+    useEffect(() => {
+        const handler = () => setIsOpen(false);
+        window.addEventListener("popstate", handler);
+        return () => window.removeEventListener("popstate", handler);
+    }, []);
+    // Outside click & Escape key
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        function handlePointerDown(event) {
+            if (!menuRef.current?.contains(event.target))
+                setIsOpen(false);
+        }
+        function handleEscape(event) {
+            if (event.key === "Escape") {
+                setIsOpen(false);
+                toggleRef.current?.focus();
+            }
+        }
+        window.addEventListener("pointerdown", handlePointerDown);
+        window.addEventListener("keydown", handleEscape);
+        return () => {
+            window.removeEventListener("pointerdown", handlePointerDown);
+            window.removeEventListener("keydown", handleEscape);
+        };
+    }, [isOpen]);
+    // Focus first link when menu opens
+    useEffect(() => {
+        if (isOpen) {
+            const first = menuRef.current?.querySelector("a, button:not([aria-expanded])");
+            first?.focus();
+        }
+    }, [isOpen]);
+    const isActive = (href) => {
+        if (!activePath || !href)
+            return false;
+        const clean = href.split("?")[0];
+        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] }));
+}