@avocadostudio-ai/blocks 0.1.0

package/dist/blocks/site-header/styles.css

@@ -0,0 +1,345 @@
+.site-top-nav {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.75rem 20px;
+  background: var(--bg-100, #fff);
+  border-bottom: 1px solid var(--border, #e4e4e7);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  container-type: inline-size;
+  container-name: site-nav;
+}
+
+.site-top-nav-inner {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  width: 100%;
+  margin: 0 auto;
+}
+
+.site-brand {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  text-decoration: none;
+  color: var(--text-100, #18181b);
+  font-weight: 600;
+  font-size: 1.125rem;
+  flex-shrink: 0;
+  margin-right: 0.75rem;
+}
+
+.site-logo {
+  width: 38px;
+  height: 38px;
+  border-radius: var(--radius-logo, 8px);
+  object-fit: contain;
+}
+
+.site-brand-text {
+  white-space: nowrap;
+}
+
+/* Desktop nav */
+.site-nav-links-desktop {
+  display: flex;
+  align-items: center;
+  gap: 0.125rem;
+}
+
+.site-nav-links-desktop > a {
+  padding: 0.375rem 0.75rem;
+  border-radius: var(--radius-btn, 6px);
+  text-decoration: none;
+  color: var(--text-300, #52525b);
+  font-size: 0.875rem;
+  font-weight: 500;
+  transition: color 0.15s, background 0.15s;
+}
+
+.site-nav-links-desktop > a:hover {
+  color: var(--text-100, #18181b);
+}
+
+.site-nav-links-desktop > a.is-active {
+  color: var(--text-100, #18181b);
+  font-weight: 600;
+}
+
+/* Desktop dropdown */
+.site-nav-dropdown {
+  position: relative;
+}
+
+.site-nav-links .site-nav-dropdown-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding: 2px 0;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  color: var(--brand);
+  font-size: 0.9375rem;
+  font-weight: 700;
+  font-family: inherit;
+  cursor: pointer;
+  transition: color 0.15s;
+}
+
+.site-nav-links .site-nav-dropdown-trigger:hover,
+.site-nav-links .site-nav-dropdown-trigger.is-active {
+  color: var(--brand-hover, var(--brand));
+}
+
+.dark .site-nav-links .site-nav-dropdown-trigger {
+  color: #e2e8f0;
+}
+
+.site-nav-chevron {
+  transition: transform 0.2s;
+  flex-shrink: 0;
+}
+
+.site-nav-dropdown:hover .site-nav-chevron,
+.site-nav-dropdown:focus-within .site-nav-chevron {
+  transform: rotate(180deg);
+}
+
+.site-nav-dropdown-menu {
+  display: none;
+  flex-direction: column;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  min-width: 180px;
+  padding: 8px;
+  padding-top: 12px;
+  gap: 2px;
+  background: var(--bg-100, #fff);
+  border: 1px solid var(--border, #e4e4e7);
+  border-radius: var(--radius-dropdown, 8px);
+  box-shadow: 0 4px 12px rgb(0 0 0 / 0.06);
+  z-index: 200;
+}
+
+.site-nav-dropdown:hover .site-nav-dropdown-menu,
+.site-nav-dropdown:focus-within .site-nav-dropdown-menu {
+  display: flex;
+}
+
+.site-nav-dropdown-menu a {
+  display: block;
+  padding: 10px 14px;
+  border-radius: var(--radius-btn, 6px);
+  text-decoration: none !important;
+  color: var(--text-300, #52525b);
+  font-size: 0.875rem;
+  font-weight: 500;
+  white-space: nowrap;
+  transition: background 0.12s, color 0.12s;
+}
+
+.site-nav-dropdown-menu a:hover {
+  background: var(--bg-200, #f4f4f5);
+  color: var(--text-100, #18181b);
+}
+
+.site-nav-dropdown-menu a.is-active {
+  background: var(--bg-200, #f4f4f5);
+  font-weight: 600;
+}
+
+/* Theme toggle */
+.site-theme-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  border: none;
+  border-radius: var(--radius-btn, 6px);
+  background: transparent;
+  color: var(--text-300, #52525b);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: color 0.15s, background 0.15s;
+}
+
+.site-theme-toggle:hover {
+  color: var(--text-100, #18181b);
+  background: var(--bg-200, #f4f4f5);
+}
+
+.site-theme-toggle-icon {
+  width: 1.125rem;
+  height: 1.125rem;
+}
+
+/* Mobile menu */
+.site-mobile-menu {
+  display: none;
+}
+
+.site-mobile-menu-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  padding: 0;
+  border: none;
+  border-radius: var(--radius-btn, 6px);
+  background: transparent;
+  color: var(--text-300, #52525b);
+  cursor: pointer;
+}
+
+.site-mobile-menu-button:hover {
+  background: var(--bg-200, #f4f4f5);
+}
+
+.burger-icon {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 18px;
+}
+
+.burger-icon i {
+  display: block;
+  height: 2px;
+  background: currentColor;
+  border-radius: 1px;
+  transition: transform 0.2s, opacity 0.2s;
+}
+
+.site-mobile-menu.is-open .burger-icon i:nth-child(1) {
+  transform: translateY(6px) rotate(45deg);
+}
+
+.site-mobile-menu.is-open .burger-icon i:nth-child(2) {
+  opacity: 0;
+}
+
+.site-mobile-menu.is-open .burger-icon i:nth-child(3) {
+  transform: translateY(-6px) rotate(-45deg);
+}
+
+.site-nav-links-mobile {
+  position: absolute;
+  top: 100%;
+  right: 1rem;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  min-width: 200px;
+  padding: 0.5rem;
+  background: var(--bg-100, #fff);
+  border: 1px solid var(--border, #e4e4e7);
+  border-radius: var(--radius-dropdown, 10px);
+  box-shadow: 0 4px 12px rgb(0 0 0 / 0.08);
+  z-index: 200;
+}
+
+.site-nav-links-mobile > a {
+  display: block;
+  padding: 0.5rem 0.75rem;
+  border-radius: var(--radius-btn, 6px);
+  text-decoration: none;
+  color: var(--text-200, #27272a);
+  font-size: 0.875rem;
+  font-weight: 500;
+  text-align: left;
+}
+
+.site-nav-links-mobile > a:hover,
+.site-nav-links-mobile > a.is-active {
+  background: var(--bg-200, #f4f4f5);
+}
+
+/* Mobile dropdown group */
+.site-nav-mobile-group {
+  display: flex;
+  flex-direction: column;
+}
+
+.site-nav-mobile-group-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  border: none;
+  border-radius: var(--radius-btn, 6px);
+  background: transparent;
+  color: var(--text-200, #27272a);
+  font-size: 0.875rem;
+  font-weight: 500;
+  font-family: inherit;
+  cursor: pointer;
+  text-align: left;
+}
+
+.site-nav-mobile-group-trigger:hover,
+.site-nav-mobile-group-trigger.is-active {
+  background: var(--bg-200, #f4f4f5);
+}
+
+.site-nav-chevron.is-expanded {
+  transform: rotate(180deg);
+}
+
+.site-nav-mobile-group-children {
+  display: flex;
+  flex-direction: column;
+  margin-left: 1rem;
+  padding-left: 0.75rem;
+  border-left: 2px solid var(--border, #e4e4e7);
+  gap: 2px;
+  margin-top: 4px;
+  margin-bottom: 4px;
+}
+
+.site-nav-mobile-group-children a {
+  display: block;
+  padding: 8px 12px;
+  border-radius: var(--radius-btn, 6px);
+  text-decoration: none;
+  color: var(--text-300, #52525b);
+  font-size: 0.875rem;
+  font-weight: 500;
+  transition: background 0.12s, color 0.12s;
+}
+
+.site-nav-mobile-group-children a:hover,
+.site-nav-mobile-group-children a.is-active {
+  background: var(--bg-200, #f4f4f5);
+  color: var(--text-100, #18181b);
+}
+
+.site-mobile-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 99;
+}
+
+/* Responsive: hide desktop nav, show mobile menu when the header itself is
+   narrow. Uses a container query so the breakpoint tracks the header's own
+   width (e.g. inside the editor iframe) rather than the viewport. */
+@container site-nav (max-width: 768px) {
+  .site-nav-links-desktop {
+    display: none;
+  }
+  .site-mobile-menu {
+    display: block;
+    margin-left: auto;
+  }
+  .site-theme-toggle {
+    margin-left: 0;
+  }
+}

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

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

package/dist/blocks/stats/renderer.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { resolveHeadingTag } from "@avocadostudio-ai/shared";
+import { renderBlockIcon } from "../_shared.js";
+export function Stats(props) {
+    const title = String(props.title ?? "");
+    const items = Array.isArray(props.stats) ? props.stats : [];
+    const HeadingTag = resolveHeadingTag("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));
+                    }) })] }) }));
+}

package/dist/blocks/stats/styles.css

@@ -0,0 +1,64 @@
+.stats-section {
+  text-align: center;
+  padding: 40px 20px;
+}
+
+.stats-section .section__inner > h2 {
+  margin-bottom: 24px;
+}
+
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: 24px;
+}
+
+.stat-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+
+.stat-item__icon {
+  display: block;
+  font-size: 1.75rem;
+  line-height: 1;
+  margin-bottom: 4px;
+  width: 32px;
+  height: 32px;
+  object-fit: contain;
+}
+
+img.stat-item__icon {
+  border-radius: 4px;
+}
+
+.stat-item__description {
+  font-size: 0.875rem;
+  color: var(--body-secondary);
+  max-width: 24ch;
+  text-align: center;
+  line-height: 1.45;
+  margin-top: 2px;
+}
+
+.stat-item__value {
+  font-size: clamp(2rem, 4vw, 3rem);
+  font-weight: 800;
+  line-height: 1.1;
+  letter-spacing: -0.02em;
+  color: var(--brand);
+}
+
+.stat-item__label {
+  font-size: 0.9375rem;
+  color: var(--caption);
+  font-weight: 500;
+}
+
+@media (max-width: 900px) {
+  .stats-grid {
+    grid-template-columns: 1fr;
+  }
+}

package/dist/blocks/styles.css

@@ -0,0 +1,23 @@
+@import "./_tokens.css";
+@import "./_base.css";
+@import "./_layout.css";
+@import "./hero/styles.css";
+@import "./feature-grid/styles.css";
+@import "./testimonials/styles.css";
+@import "./faq-accordion/styles.css";
+@import "./cta/styles.css";
+@import "./card/styles.css";
+@import "./card-grid/styles.css";
+@import "./rich-text/styles.css";
+@import "./stats/styles.css";
+@import "./two-column/styles.css";
+@import "./site-header/styles.css";
+@import "./footer/styles.css";
+@import "./embed/styles.css";
+@import "./banner/styles.css";
+@import "./carousel/styles.css";
+@import "./gallery/styles.css";
+@import "./tabs/styles.css";
+@import "./table/styles.css";
+@import "./quote/styles.css";
+@import "./video/styles.css";

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

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

package/dist/blocks/table/renderer.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { resolveHeadingTag } from "@avocadostudio-ai/shared";
+import { renderInline } from "../_shared.js";
+export function Table(props) {
+    const HeadingTag = resolveHeadingTag("Table", props);
+    const title = String(props.title ?? "");
+    const headers = Array.isArray(props.headers) ? props.headers.map(h => String(h ?? "")) : [];
+    const rows = Array.isArray(props.rows) ? props.rows : [];
+    const striped = String(props.striped) === "true";
+    return (_jsx("section", { className: "table-block", 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: renderInline(title) })), _jsx("div", { className: "table-block__scroll", children: _jsxs("table", { className: `table-block__table${striped ? " table-block__table--striped" : ""}`, children: [headers.length > 0 && (_jsx("thead", { children: _jsx("tr", { children: headers.map((header, idx) => (_jsx("th", { "data-editable-target": `headers[${idx}]`, children: renderInline(header) }, idx))) }) })), _jsx("tbody", { children: rows.map((rawRow, rowIdx) => {
+                                    const row = Array.isArray(rawRow) ? rawRow : [];
+                                    return (_jsx("tr", { children: row.map((rawCell, cellIdx) => (_jsx("td", { "data-editable-target": `rows[${rowIdx}][${cellIdx}]`, children: renderInline(String(rawCell ?? "")) }, cellIdx))) }, rowIdx));
+                                }) })] }) })] }) }));
+}

package/dist/blocks/table/styles.css

@@ -0,0 +1,87 @@
+.table-block {
+  padding: 40px 20px;
+  background: var(--section-bg);
+}
+
+.table-block__scroll {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  border-radius: var(--radius-card, 12px);
+  border: 1px solid var(--border);
+}
+
+.table-block__table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.95rem;
+  line-height: 1.5;
+}
+
+.table-block__table th,
+.table-block__table td {
+  padding: 12px 16px;
+  text-align: left;
+  border-bottom: 1px solid var(--border);
+  white-space: nowrap;
+}
+
+.table-block__table th {
+  font-weight: 600;
+  color: var(--heading);
+  background: var(--table-header-bg, color-mix(in srgb, var(--heading) 8%, var(--section-bg)));
+  font-size: 0.85rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.table-block__table td {
+  color: var(--text-100);
+}
+
+.table-block__table tbody tr:last-child td {
+  border-bottom: none;
+}
+
+/* Striped variant */
+.table-block__table--striped tbody tr:nth-child(odd) {
+  background: var(--section-bg);
+}
+
+.table-block__table--striped tbody tr:nth-child(even) {
+  background: var(--stripe-bg, color-mix(in srgb, var(--heading) 4%, var(--section-bg)));
+}
+
+/* First column — sticky + emphasis */
+.table-block__table th:first-child {
+  position: sticky;
+  left: 0;
+  z-index: 1;
+  background: var(--table-header-bg, color-mix(in srgb, var(--heading) 8%, var(--section-bg)));
+}
+
+.table-block__table td:first-child {
+  position: sticky;
+  left: 0;
+  z-index: 1;
+  font-weight: 500;
+  color: var(--heading);
+  background: inherit;
+}
+
+@media (max-width: 600px) {
+  .table-block {
+    padding: 24px 12px;
+  }
+
+  .table-block__scroll {
+    margin-right: -12px;
+    border-right: none;
+    border-radius: var(--radius-card, 12px) 0 0 var(--radius-card, 12px);
+  }
+
+  .table-block__table th,
+  .table-block__table td {
+    padding: 10px 12px;
+    font-size: 0.9rem;
+  }
+}

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

@@ -0,0 +1,5 @@
+/**
+ * Wire up tab switching, and overflow fade gradient for the tab bar.
+ * Safe to call multiple times — uses a data-ready guard.
+ */
+export declare function initTabs(root?: Document | HTMLElement): void;

package/dist/blocks/tabs/init.js

@@ -0,0 +1,38 @@
+/**
+ * Wire up tab switching, and overflow fade gradient for the tab bar.
+ * Safe to call multiple times — uses a data-ready guard.
+ */
+export function initTabs(root = document) {
+    root.querySelectorAll(".tabs-block:not([data-ready])").forEach((el) => {
+        el.setAttribute("data-ready", "1");
+        const tabButtons = el.querySelectorAll(".tabs-block__tab");
+        const panels = el.querySelectorAll(".tabs-block__panel");
+        const barWrap = el.querySelector(".tabs-block__bar-wrap");
+        const bar = el.querySelector(".tabs-block__bar");
+        // Tab switching
+        tabButtons.forEach((btn, i) => {
+            btn.onclick = () => {
+                tabButtons.forEach((b, j) => {
+                    b.classList.toggle("tabs-block__tab--active", i === j);
+                    b.setAttribute("aria-selected", i === j ? "true" : "false");
+                });
+                panels.forEach((p, j) => {
+                    p.style.display = i === j ? "" : "none";
+                });
+            };
+        });
+        // Overflow fade gradient
+        if (barWrap && bar) {
+            const syncOverflow = () => {
+                const overflows = bar.scrollWidth > bar.clientWidth;
+                barWrap.classList.toggle("tabs-block__bar-wrap--overflow", overflows);
+                const atEnd = bar.scrollLeft + bar.clientWidth >= bar.scrollWidth - 2;
+                barWrap.classList.toggle("tabs-block__bar-wrap--at-end", atEnd);
+            };
+            syncOverflow();
+            bar.addEventListener("scroll", syncOverflow, { passive: true });
+            // Re-check on resize (e.g. viewport toggle in catalogue)
+            new ResizeObserver(syncOverflow).observe(bar);
+        }
+    });
+}

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

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

package/dist/blocks/tabs/renderer.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { resolveHeadingTag } from "@avocadostudio-ai/shared";
+import { renderRichTextContent } from "../_shared.js";
+// Deterministic, SSR-stable instance id for the tab/panel aria wiring. We can't
+// use useId() here: under the live-preview store the client re-renders blocks
+// from a client-authoritative store, which shifts React's useId tree counter and
+// trips a hydration mismatch (Tabs is the only block that needs per-instance
+// ids). A pure hash of the tab content is identical on server and client, so the
+// ids line up. Distinct Tabs blocks hash differently; the only collision is two
+// blocks with identical titles + labels, which at worst duplicates aria ids.
+function stableTabsUid(seed) {
+    let h = 5381;
+    for (let i = 0; i < seed.length; i += 1)
+        h = ((h << 5) + h + seed.charCodeAt(i)) | 0;
+    return (h >>> 0).toString(36);
+}
+export function Tabs(props) {
+    const title = String(props.title ?? "");
+    const tabs = Array.isArray(props.tabs) ? props.tabs : [];
+    const uid = `-${stableTabsUid(`${title}|${tabs.map((t) => String(t?.label ?? "")).join("|")}`)}`;
+    const HeadingTag = resolveHeadingTag("Tabs", props);
+    return (_jsx("section", { className: "tabs-block", children: _jsxs("div", { className: "section__inner", children: [title.length > 0 && (_jsx(HeadingTag, { className: "tabs-block__title", "data-editable-target": "title", "data-editable-target-label": "title", "data-editable-label": "title", children: title })), _jsx("div", { className: "tabs-block__bar-wrap", children: _jsx("div", { className: "tabs-block__bar", role: "tablist", children: tabs.map((raw, idx) => {
+                            const tab = (raw ?? {});
+                            return (_jsx("button", { id: `tabs-tab${uid}-${idx}`, className: `tabs-block__tab${idx === 0 ? " tabs-block__tab--active" : ""}`, role: "tab", type: "button", "aria-selected": idx === 0 ? "true" : "false", "aria-controls": `tabs-panel${uid}-${idx}`, "data-editable-target": `tabs[${idx}].label`, "data-editable-target-label": `tabs[${idx}].label`, "data-editable-label": `tabs[${idx}].label`, children: String(tab.label ?? "") }, idx));
+                        }) }) }), tabs.map((raw, idx) => {
+                    const tab = (raw ?? {});
+                    const content = String(tab.content ?? "");
+                    return (_jsx("div", { className: "tabs-block__panel", id: `tabs-panel${uid}-${idx}`, role: "tabpanel", "aria-labelledby": `tabs-tab${uid}-${idx}`, tabIndex: 0, style: idx === 0 ? undefined : { display: "none" }, "data-editable-target": `tabs[${idx}].content`, "data-editable-target-label": `tabs[${idx}].content`, "data-editable-label": `tabs[${idx}].content`, children: content.length > 0 && (_jsx("div", { className: "tabs-block__content", children: renderRichTextContent(content) })) }, idx));
+                })] }) }));
+}