@usezanin/blog 0.1.0 → 0.2.0

package/README.md

@@ -57,6 +57,32 @@ import { createRevalidateHandler } from "@usezanin/blog";
 export const POST = createRevalidateHandler();
 ```
 
+## Theming — fully customizable
+
+Blogs are themable end to end: colors, fonts, sizes, spacing, radius, content width, and index layout.
+
+1. **Dashboard / agents (recommended)** — set the theme per site in the Zanin dashboard ("Customize theme") or let agents call the `update_site_theme` MCP tool. The SDK fetches it with the content and re-renders instantly via the revalidation webhook. No deploy.
+2. **Host code overrides** — pass `theme` in the config (wins over the dashboard theme):
+
+```ts
+const config = {
+  theme: {
+    accent: "#0a7d54",
+    fontHeading: "'Playfair Display', Georgia, serif", // load the font in your layout
+    fontBody: "Inter, sans-serif",
+    measure: "680px",
+    radius: "16px",
+    spacing: "relaxed",     // compact | comfortable | relaxed
+    indexLayout: "grid",    // list | grid
+  },
+} satisfies ZaninBlogConfig;
+```
+
+3. **Plain CSS** — every value is a `--zanin-*` CSS variable on `.zanin-blog`; override any of them (or restyle `.zanin-*` component classes) in your own stylesheet.
+4. **Fully headless** — build your own layouts with the exported data helpers and pieces: `getBlogPosts()`, `getBlogPost(slug)`, `getBlogSite()` (includes the theme), `PostCard`, `renderMdx`, `builtinComponents`, `themeToStyle`.
+
+Custom fonts: load them however you like (`next/font`, `<link>` tags) and reference the family name in `fontHeading` / `fontBody` / `fontMono`.
+
 ## What you get
 
 - Server-rendered MDX with built-in components: `Callout`, `Figure`, `Chart` (bar/line/area/pie from inline data), `CTA`, `YouTube`, `Tweet`, `ComparisonTable`, `FAQ` (with FAQPage JSON-LD), styled code blocks

package/dist/BlogIndex.d.ts

@@ -1,9 +1,17 @@
+import type { Post } from "@usezanin/client";
 import { type ZaninBlogConfig } from "./config.js";
+/** One entry in the blog index; exported for fully custom index layouts. */
+export declare function PostCard({ post, basePath }: {
+    post: Post;
+    basePath?: string;
+}): import("react").JSX.Element;
 export interface BlogIndexProps {
     config?: ZaninBlogConfig;
     title?: string;
     description?: string;
+    /** Overrides the themed index layout for this page only. */
+    layout?: "list" | "grid";
 }
 /** Server component: renders the list of published posts. */
-export declare function BlogIndex({ config, title, description }: BlogIndexProps): Promise<import("react").JSX.Element>;
+export declare function BlogIndex({ config, title, description, layout }: BlogIndexProps): Promise<import("react").JSX.Element>;
 //# sourceMappingURL=BlogIndex.d.ts.map

package/dist/BlogIndex.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BlogIndex.d.ts","sourceRoot":"","sources":["../src/BlogIndex.tsx"],"names":[],"mappings":"AACA,OAAO,EAAiB,KAAK,eAAe,EAAE,MAAM,aAAa,CAAC;AAiClE,MAAM,WAAW,cAAc;IAC7B,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,6DAA6D;AAC7D,wBAAsB,SAAS,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,cAAc,wCAqB7E"}
+{"version":3,"file":"BlogIndex.d.ts","sourceRoot":"","sources":["../src/BlogIndex.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAiB,KAAK,eAAe,EAAE,MAAM,aAAa,CAAC;AAYlE,4EAA4E;AAC5E,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAkB,EAAE,EAAE;IAAE,IAAI,EAAE,IAAI,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAE,+BAuBvF;AAED,MAAM,WAAW,cAAc;IAC7B,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4DAA4D;IAC5D,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AAED,6DAA6D;AAC7D,wBAAsB,SAAS,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,EAAE,cAAc,wCA2BrF"}

package/dist/BlogIndex.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { resolveConfig } from "./config.js";
-import { fetchPublishedPosts } from "./data.js";
+import { fetchPublishedPosts, fetchSite } from "./data.js";
+import { indexLayoutClass, mergeThemes, themeToStyle } from "./theme.js";
 function formatDate(iso) {
     return new Date(iso).toLocaleDateString("en-US", {
         year: "numeric",
@@ -8,14 +9,21 @@ function formatDate(iso) {
         day: "numeric",
     });
 }
-function PostCard({ post, basePath }) {
+/** One entry in the blog index; exported for fully custom index layouts. */
+export function PostCard({ post, basePath = "/blog" }) {
     const href = `${basePath}/${post.slug}`.replace(/\/{2,}/g, "/");
-    return (_jsx("article", { className: "zanin-index-item", children: _jsxs("a", { href: href, children: [_jsxs("div", { className: "zanin-index-meta", children: [_jsx("time", { dateTime: post.publishedAt ?? undefined, children: formatDate(post.publishedAt ?? post.createdAt) }), post.tags.slice(0, 3).map((tag) => (_jsx("span", { className: "zanin-tag", children: tag }, tag)))] }), _jsx("h2", { children: post.title }), post.description && _jsx("p", { children: post.description })] }) }));
+    return (_jsx("article", { className: "zanin-index-item", children: _jsxs("a", { href: href, children: [_jsxs("div", { className: "zanin-index-meta", children: [_jsx("time", { dateTime: post.publishedAt ?? undefined, children: formatDate(post.publishedAt ?? post.createdAt) }), post.tags.slice(0, 3).map((tag) => (_jsx("span", { className: "zanin-tag", children: tag }, tag)))] }), _jsx("h2", { children: post.title }), post.description && _jsx("p", { children: post.description }), _jsx("span", { className: "zanin-index-more", "aria-hidden": true, children: "Read more \u2192" })] }) }));
 }
 /** Server component: renders the list of published posts. */
-export async function BlogIndex({ config, title, description }) {
+export async function BlogIndex({ config, title, description, layout }) {
     const resolved = resolveConfig(config);
-    const posts = await fetchPublishedPosts(resolved);
-    return (_jsxs("div", { className: "zanin-blog zanin-index", children: [_jsxs("header", { className: "zanin-index-header", children: [_jsx("h1", { children: title ?? "Blog" }), description && _jsx("p", { children: description })] }), posts.length === 0 ? (_jsx("p", { className: "zanin-index-empty", children: "No posts yet." })) : (_jsx("div", { className: "zanin-index-list", children: posts.map((post) => (_jsx(PostCard, { post: post, basePath: resolved.basePath }, post.id))) }))] }));
+    const [posts, site] = await Promise.all([
+        fetchPublishedPosts(resolved),
+        fetchSite(resolved),
+    ]);
+    const theme = mergeThemes(site?.theme, resolved.theme);
+    if (layout)
+        theme.indexLayout = layout;
+    return (_jsxs("div", { className: `zanin-blog zanin-index ${indexLayoutClass(theme)}`, style: themeToStyle(theme), children: [_jsxs("header", { className: "zanin-index-header", children: [_jsx("h1", { children: title ?? "Blog" }), description && _jsx("p", { children: description })] }), posts.length === 0 ? (_jsx("p", { className: "zanin-index-empty", children: "No posts yet." })) : (_jsx("div", { className: "zanin-index-list", children: posts.map((post) => (_jsx(PostCard, { post: post, basePath: resolved.basePath }, post.id))) }))] }));
 }
 //# sourceMappingURL=BlogIndex.js.map

package/dist/BlogIndex.js.map

@@ -1 +1 @@
-{"version":3,"file":"BlogIndex.js","sourceRoot":"","sources":["../src/BlogIndex.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAwB,MAAM,aAAa,CAAC;AAClE,OAAO,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAEhD,SAAS,UAAU,CAAC,GAAW;IAC7B,OAAO,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC,kBAAkB,CAAC,OAAO,EAAE;QAC/C,IAAI,EAAE,SAAS;QACf,KAAK,EAAE,MAAM;QACb,GAAG,EAAE,SAAS;KACf,CAAC,CAAC;AACL,CAAC;AAED,SAAS,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAoC;IACpE,MAAM,IAAI,GAAG,GAAG,QAAQ,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,OAAO,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC;IAChE,OAAO,CACL,kBAAS,SAAS,EAAC,kBAAkB,YACnC,aAAG,IAAI,EAAE,IAAI,aACX,eAAK,SAAS,EAAC,kBAAkB,aAC/B,eAAM,QAAQ,EAAE,IAAI,CAAC,WAAW,IAAI,SAAS,YAC1C,UAAU,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,SAAS,CAAC,GAC1C,EACN,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAClC,eAAgB,SAAS,EAAC,WAAW,YAClC,GAAG,IADK,GAAG,CAEP,CACR,CAAC,IACE,EACN,uBAAK,IAAI,CAAC,KAAK,GAAM,EACpB,IAAI,CAAC,WAAW,IAAI,sBAAI,IAAI,CAAC,WAAW,GAAK,IAC5C,GACI,CACX,CAAC;AACJ,CAAC;AAQD,6DAA6D;AAC7D,MAAM,CAAC,KAAK,UAAU,SAAS,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,EAAkB;IAC5E,MAAM,QAAQ,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC;IACvC,MAAM,KAAK,GAAG,MAAM,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IAElD,OAAO,CACL,eAAK,SAAS,EAAC,wBAAwB,aACrC,kBAAQ,SAAS,EAAC,oBAAoB,aACpC,uBAAK,KAAK,IAAI,MAAM,GAAM,EACzB,WAAW,IAAI,sBAAI,WAAW,GAAK,IAC7B,EACR,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,CACpB,YAAG,SAAS,EAAC,mBAAmB,8BAAkB,CACnD,CAAC,CAAC,CAAC,CACF,cAAK,SAAS,EAAC,kBAAkB,YAC9B,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,KAAC,QAAQ,IAAe,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,CAAC,QAAQ,IAAhD,IAAI,CAAC,EAAE,CAA6C,CACpE,CAAC,GACE,CACP,IACG,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"BlogIndex.js","sourceRoot":"","sources":["../src/BlogIndex.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAwB,MAAM,aAAa,CAAC;AAClE,OAAO,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAC3D,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAEzE,SAAS,UAAU,CAAC,GAAW;IAC7B,OAAO,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC,kBAAkB,CAAC,OAAO,EAAE;QAC/C,IAAI,EAAE,SAAS;QACf,KAAK,EAAE,MAAM;QACb,GAAG,EAAE,SAAS;KACf,CAAC,CAAC;AACL,CAAC;AAED,4EAA4E;AAC5E,MAAM,UAAU,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,GAAG,OAAO,EAAqC;IACtF,MAAM,IAAI,GAAG,GAAG,QAAQ,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,OAAO,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC;IAChE,OAAO,CACL,kBAAS,SAAS,EAAC,kBAAkB,YACnC,aAAG,IAAI,EAAE,IAAI,aACX,eAAK,SAAS,EAAC,kBAAkB,aAC/B,eAAM,QAAQ,EAAE,IAAI,CAAC,WAAW,IAAI,SAAS,YAC1C,UAAU,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,SAAS,CAAC,GAC1C,EACN,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAClC,eAAgB,SAAS,EAAC,WAAW,YAClC,GAAG,IADK,GAAG,CAEP,CACR,CAAC,IACE,EACN,uBAAK,IAAI,CAAC,KAAK,GAAM,EACpB,IAAI,CAAC,WAAW,IAAI,sBAAI,IAAI,CAAC,WAAW,GAAK,EAC9C,eAAM,SAAS,EAAC,kBAAkB,sDAE3B,IACL,GACI,CACX,CAAC;AACJ,CAAC;AAUD,6DAA6D;AAC7D,MAAM,CAAC,KAAK,UAAU,SAAS,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAkB;IACpF,MAAM,QAAQ,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC;IACvC,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,MAAM,OAAO,CAAC,GAAG,CAAC;QACtC,mBAAmB,CAAC,QAAQ,CAAC;QAC7B,SAAS,CAAC,QAAQ,CAAC;KACpB,CAAC,CAAC;IAEH,MAAM,KAAK,GAAG,WAAW,CAAC,IAAI,EAAE,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAC;IACvD,IAAI,MAAM;QAAE,KAAK,CAAC,WAAW,GAAG,MAAM,CAAC;IAEvC,OAAO,CACL,eAAK,SAAS,EAAE,0BAA0B,gBAAgB,CAAC,KAAK,CAAC,EAAE,EAAE,KAAK,EAAE,YAAY,CAAC,KAAK,CAAC,aAC7F,kBAAQ,SAAS,EAAC,oBAAoB,aACpC,uBAAK,KAAK,IAAI,MAAM,GAAM,EACzB,WAAW,IAAI,sBAAI,WAAW,GAAK,IAC7B,EACR,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,CACpB,YAAG,SAAS,EAAC,mBAAmB,8BAAkB,CACnD,CAAC,CAAC,CAAC,CACF,cAAK,SAAS,EAAC,kBAAkB,YAC9B,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,KAAC,QAAQ,IAAe,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,CAAC,QAAQ,IAAhD,IAAI,CAAC,EAAE,CAA6C,CACpE,CAAC,GACE,CACP,IACG,CACP,CAAC;AACJ,CAAC"}

package/dist/BlogPost.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BlogPost.d.ts","sourceRoot":"","sources":["../src/BlogPost.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAE/C,OAAO,EAAiB,KAAK,eAAe,EAAE,MAAM,aAAa,CAAC;AAiBlE,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,+DAA+D;IAC/D,UAAU,CAAC,EAAE,aAAa,CAAC;CAC5B;AAED;;;GAGG;AACH,wBAAsB,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,EAAE,aAAa,wCAyDzE"}
+{"version":3,"file":"BlogPost.d.ts","sourceRoot":"","sources":["../src/BlogPost.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAE/C,OAAO,EAAiB,KAAK,eAAe,EAAE,MAAM,aAAa,CAAC;AAkBlE,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,+DAA+D;IAC/D,UAAU,CAAC,EAAE,aAAa,CAAC;CAC5B;AAED;;;GAGG;AACH,wBAAsB,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,EAAE,aAAa,wCA4DzE"}

package/dist/BlogPost.js

@@ -2,8 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { notFound } from "next/navigation";
 import { resolveConfig } from "./config.js";
 import { fetchCustomComponents } from "./custom-components.js";
-import { fetchPublishedPost, postUrl } from "./data.js";
+import { fetchPublishedPost, fetchSite, postUrl } from "./data.js";
 import { renderMdx } from "./mdx.js";
+import { mergeThemes, themeToStyle } from "./theme.js";
 function formatDate(iso) {
     return new Date(iso).toLocaleDateString("en-US", {
         year: "numeric",
@@ -20,12 +21,14 @@ function readingTime(body) {
  */
 export async function BlogPost({ slug, config, components }) {
     const resolved = resolveConfig(config);
-    const [post, customComponents] = await Promise.all([
+    const [post, customComponents, site] = await Promise.all([
         fetchPublishedPost(resolved, slug),
         fetchCustomComponents(resolved),
+        fetchSite(resolved),
     ]);
     if (!post)
         notFound();
+    const theme = mergeThemes(site?.theme, resolved.theme);
     // Precedence: built-ins < site custom components < host overrides.
     const content = await renderMdx(post.body ?? "", {
         ...customComponents,
@@ -48,6 +51,6 @@ export async function BlogPost({ slug, config, components }) {
             }
             : {}),
     };
-    return (_jsxs("article", { className: "zanin-blog zanin-post", children: [_jsx("script", { type: "application/ld+json", dangerouslySetInnerHTML: { __html: JSON.stringify(jsonLd) } }), _jsxs("header", { className: "zanin-post-header", children: [_jsxs("div", { className: "zanin-post-meta", children: [_jsx("time", { dateTime: post.publishedAt ?? undefined, children: formatDate(post.publishedAt ?? post.createdAt) }), _jsx("span", { "aria-hidden": true, children: "\u00B7" }), _jsxs("span", { children: [readingTime(post.body ?? ""), " min read"] }), post.tags.slice(0, 3).map((tag) => (_jsx("span", { className: "zanin-tag", children: tag }, tag)))] }), _jsx("h1", { children: post.title }), post.description && _jsx("p", { className: "zanin-post-lede", children: post.description })] }), _jsx("div", { className: "zanin-prose", children: content })] }));
+    return (_jsxs("article", { className: "zanin-blog zanin-post", style: themeToStyle(theme), children: [_jsx("script", { type: "application/ld+json", dangerouslySetInnerHTML: { __html: JSON.stringify(jsonLd) } }), _jsxs("header", { className: "zanin-post-header", children: [_jsxs("div", { className: "zanin-post-meta", children: [_jsx("time", { dateTime: post.publishedAt ?? undefined, children: formatDate(post.publishedAt ?? post.createdAt) }), _jsx("span", { "aria-hidden": true, children: "\u00B7" }), _jsxs("span", { children: [readingTime(post.body ?? ""), " min read"] }), post.tags.slice(0, 3).map((tag) => (_jsx("span", { className: "zanin-tag", children: tag }, tag)))] }), _jsx("h1", { children: post.title }), post.description && _jsx("p", { className: "zanin-post-lede", children: post.description })] }), _jsx("div", { className: "zanin-prose", children: content })] }));
 }
 //# sourceMappingURL=BlogPost.js.map

package/dist/BlogPost.js.map

@@ -1 +1 @@
-{"version":3,"file":"BlogPost.js","sourceRoot":"","sources":["../src/BlogPost.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAwB,MAAM,aAAa,CAAC;AAClE,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,EAAE,kBAAkB,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAErC,SAAS,UAAU,CAAC,GAAW;IAC7B,OAAO,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC,kBAAkB,CAAC,OAAO,EAAE;QAC/C,IAAI,EAAE,SAAS;QACf,KAAK,EAAE,MAAM;QACb,GAAG,EAAE,SAAS;KACf,CAAC,CAAC;AACL,CAAC;AAED,SAAS,WAAW,CAAC,IAAY;IAC/B,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,MAAM,GAAG,GAAG,CAAC,CAAC,CAAC;AACjE,CAAC;AASD;;;GAGG;AACH,MAAM,CAAC,KAAK,UAAU,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,EAAiB;IACxE,MAAM,QAAQ,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC;IACvC,MAAM,CAAC,IAAI,EAAE,gBAAgB,CAAC,GAAG,MAAM,OAAO,CAAC,GAAG,CAAC;QACjD,kBAAkB,CAAC,QAAQ,EAAE,IAAI,CAAC;QAClC,qBAAqB,CAAC,QAAQ,CAAC;KAChC,CAAC,CAAC;IACH,IAAI,CAAC,IAAI;QAAE,QAAQ,EAAE,CAAC;IAEtB,mEAAmE;IACnE,MAAM,OAAO,GAAG,MAAM,SAAS,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,EAAE;QAC/C,GAAG,gBAAgB;QACnB,GAAG,UAAU;KACd,CAAC,CAAC;IAEH,MAAM,MAAM,GAAG;QACb,UAAU,EAAE,oBAAoB;QAChC,OAAO,EAAE,SAAS;QAClB,QAAQ,EAAE,IAAI,CAAC,KAAK;QACpB,WAAW,EAAE,IAAI,CAAC,WAAW,IAAI,SAAS;QAC1C,aAAa,EAAE,IAAI,CAAC,WAAW,IAAI,SAAS;QAC5C,YAAY,EAAE,IAAI,CAAC,SAAS;QAC5B,KAAK,EAAE,IAAI,CAAC,UAAU,IAAI,SAAS;QACnC,GAAG,CAAC,QAAQ,CAAC,OAAO;YAClB,CAAC,CAAC;gBACE,gBAAgB,EAAE;oBAChB,OAAO,EAAE,SAAS;oBAClB,KAAK,EAAE,OAAO,CAAC,QAAQ,EAAE,IAAI,CAAC,IAAI,CAAC;iBACpC;aACF;YACH,CAAC,CAAC,EAAE,CAAC;KACR,CAAC;IAEF,OAAO,CACL,mBAAS,SAAS,EAAC,uBAAuB,aACxC,iBACE,IAAI,EAAC,qBAAqB,EAC1B,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,GAC3D,EACF,kBAAQ,SAAS,EAAC,mBAAmB,aACnC,eAAK,SAAS,EAAC,iBAAiB,aAC9B,eAAM,QAAQ,EAAE,IAAI,CAAC,WAAW,IAAI,SAAS,YAC1C,UAAU,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,SAAS,CAAC,GAC1C,EACP,yDAA0B,EAC1B,2BAAO,WAAW,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC,iBAAiB,EACnD,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAClC,eAAgB,SAAS,EAAC,WAAW,YAClC,GAAG,IADK,GAAG,CAEP,CACR,CAAC,IACE,EACN,uBAAK,IAAI,CAAC,KAAK,GAAM,EACpB,IAAI,CAAC,WAAW,IAAI,YAAG,SAAS,EAAC,iBAAiB,YAAE,IAAI,CAAC,WAAW,GAAK,IACnE,EACT,cAAK,SAAS,EAAC,aAAa,YAAE,OAAO,GAAO,IACpC,CACX,CAAC;AACJ,CAAC"}
+{"version":3,"file":"BlogPost.js","sourceRoot":"","sources":["../src/BlogPost.tsx"],"names":[],"mappings":"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"}

package/dist/components/Chart.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Area, AreaChart, Bar, BarChart, CartesianGrid, Cell, Legend, Line, LineChart, Pie, PieChart, ResponsiveContainer, Tooltip, XAxis, YAxis, } from "recharts";
 const DEFAULT_COLORS = [
-    "var(--zanin-accent, #2563eb)",
+    "var(--zanin-accent, #005bd3)",
     "#0ea5e9",
     "#8b5cf6",
     "#f59e0b",

package/dist/config.d.ts

@@ -1,4 +1,10 @@
+import type { ZaninTheme } from "@usezanin/client";
 export interface ZaninBlogConfig {
+    /**
+     * Theme overrides applied on top of the theme configured in the Zanin
+     * dashboard (colors, fonts, layout). Highest precedence.
+     */
+    theme?: ZaninTheme;
     /** Base URL of the Zanin CMS deployment. Falls back to ZANIN_BASE_URL. */
     baseUrl?: string;
     /** Site id from the Zanin dashboard. Falls back to ZANIN_SITE_ID. */
@@ -25,6 +31,7 @@ export interface ResolvedZaninBlogConfig {
     siteName?: string;
     revalidate: number | false;
     revalidateSecret?: string;
+    theme?: ZaninTheme;
 }
 export declare function resolveConfig(config?: ZaninBlogConfig): ResolvedZaninBlogConfig;
 //# sourceMappingURL=config.d.ts.map

package/dist/config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../src/config.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,eAAe;IAC9B,0EAA0E;IAC1E,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qEAAqE;IACrE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kFAAkF;IAClF,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wIAAwI;IACxI,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,mEAAmE;IACnE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2EAA2E;IAC3E,UAAU,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAC5B,kHAAkH;IAClH,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,MAAM,WAAW,uBAAuB;IACtC,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,GAAG,KAAK,CAAC;IAC3B,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,wBAAgB,aAAa,CAAC,MAAM,GAAE,eAAoB,GAAG,uBAAuB,CAsBnF"}
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../src/config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEnD,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,0EAA0E;IAC1E,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qEAAqE;IACrE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kFAAkF;IAClF,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wIAAwI;IACxI,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,mEAAmE;IACnE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2EAA2E;IAC3E,UAAU,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAC5B,kHAAkH;IAClH,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,MAAM,WAAW,uBAAuB;IACtC,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,GAAG,KAAK,CAAC;IAC3B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,UAAU,CAAC;CACpB;AAED,wBAAgB,aAAa,CAAC,MAAM,GAAE,eAAoB,GAAG,uBAAuB,CAuBnF"}

package/dist/config.js

@@ -18,6 +18,7 @@ export function resolveConfig(config = {}) {
         siteName: config.siteName,
         revalidate: config.revalidate ?? 300,
         revalidateSecret: config.revalidateSecret ?? process.env.ZANIN_REVALIDATE_SECRET,
+        theme: config.theme,
     };
 }
 function normalizeBasePath(path) {

package/dist/config.js.map

@@ -1 +1 @@
-{"version":3,"file":"config.js","sourceRoot":"","sources":["../src/config.ts"],"names":[],"mappings":"AA8BA,MAAM,UAAU,aAAa,CAAC,SAA0B,EAAE;IACxD,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,IAAI,OAAO,CAAC,GAAG,CAAC,cAAc,CAAC;IAC7D,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,IAAI,OAAO,CAAC,GAAG,CAAC,aAAa,CAAC;IAC1D,MAAM,MAAM,GACV,MAAM,CAAC,MAAM,IAAI,OAAO,CAAC,GAAG,CAAC,cAAc,IAAI,OAAO,CAAC,GAAG,CAAC,aAAa,CAAC;IAE3E,IAAI,CAAC,OAAO;QAAE,MAAM,IAAI,KAAK,CAAC,yDAAyD,CAAC,CAAC;IACzF,IAAI,CAAC,MAAM;QAAE,MAAM,IAAI,KAAK,CAAC,uDAAuD,CAAC,CAAC;IACtF,IAAI,CAAC,MAAM,EAAE,CAAC;QACZ,MAAM,IAAI,KAAK,CAAC,wDAAwD,CAAC,CAAC;IAC5E,CAAC;IAED,OAAO;QACL,OAAO,EAAE,OAAO,CAAC,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC;QACpC,MAAM;QACN,MAAM;QACN,QAAQ,EAAE,iBAAiB,CAAC,MAAM,CAAC,QAAQ,IAAI,OAAO,CAAC;QACvD,OAAO,EAAE,CAAC,MAAM,CAAC,OAAO,IAAI,OAAO,CAAC,GAAG,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC;QAC5E,QAAQ,EAAE,MAAM,CAAC,QAAQ;QACzB,UAAU,EAAE,MAAM,CAAC,UAAU,IAAI,GAAG;QACpC,gBAAgB,EAAE,MAAM,CAAC,gBAAgB,IAAI,OAAO,CAAC,GAAG,CAAC,uBAAuB;KACjF,CAAC;AACJ,CAAC;AAED,SAAS,iBAAiB,CAAC,IAAY;IACrC,MAAM,WAAW,GAAG,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC;IAC7D,OAAO,WAAW,CAAC,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,IAAI,GAAG,CAAC;AAChD,CAAC"}
+{"version":3,"file":"config.js","sourceRoot":"","sources":["../src/config.ts"],"names":[],"mappings":"AAsCA,MAAM,UAAU,aAAa,CAAC,SAA0B,EAAE;IACxD,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,IAAI,OAAO,CAAC,GAAG,CAAC,cAAc,CAAC;IAC7D,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,IAAI,OAAO,CAAC,GAAG,CAAC,aAAa,CAAC;IAC1D,MAAM,MAAM,GACV,MAAM,CAAC,MAAM,IAAI,OAAO,CAAC,GAAG,CAAC,cAAc,IAAI,OAAO,CAAC,GAAG,CAAC,aAAa,CAAC;IAE3E,IAAI,CAAC,OAAO;QAAE,MAAM,IAAI,KAAK,CAAC,yDAAyD,CAAC,CAAC;IACzF,IAAI,CAAC,MAAM;QAAE,MAAM,IAAI,KAAK,CAAC,uDAAuD,CAAC,CAAC;IACtF,IAAI,CAAC,MAAM,EAAE,CAAC;QACZ,MAAM,IAAI,KAAK,CAAC,wDAAwD,CAAC,CAAC;IAC5E,CAAC;IAED,OAAO;QACL,OAAO,EAAE,OAAO,CAAC,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC;QACpC,MAAM;QACN,MAAM;QACN,QAAQ,EAAE,iBAAiB,CAAC,MAAM,CAAC,QAAQ,IAAI,OAAO,CAAC;QACvD,OAAO,EAAE,CAAC,MAAM,CAAC,OAAO,IAAI,OAAO,CAAC,GAAG,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC;QAC5E,QAAQ,EAAE,MAAM,CAAC,QAAQ;QACzB,UAAU,EAAE,MAAM,CAAC,UAAU,IAAI,GAAG;QACpC,gBAAgB,EAAE,MAAM,CAAC,gBAAgB,IAAI,OAAO,CAAC,GAAG,CAAC,uBAAuB;QAChF,KAAK,EAAE,MAAM,CAAC,KAAK;KACpB,CAAC;AACJ,CAAC;AAED,SAAS,iBAAiB,CAAC,IAAY;IACrC,MAAM,WAAW,GAAG,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC;IAC7D,OAAO,WAAW,CAAC,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,IAAI,GAAG,CAAC;AAChD,CAAC"}

package/dist/data.d.ts

@@ -5,5 +5,7 @@ export declare const ZANIN_CACHE_TAG = "zanin-blog";
 export declare function createClient(config: ResolvedZaninBlogConfig): ZaninClient;
 export declare function fetchPublishedPosts(config: ResolvedZaninBlogConfig): Promise<Post[]>;
 export declare function fetchPublishedPost(config: ResolvedZaninBlogConfig, slug: string): Promise<Post | null>;
+/** The site record carries the dashboard-configured theme. */
+export declare function fetchSite(config: ResolvedZaninBlogConfig): Promise<import("@usezanin/client").Site | null>;
 export declare function postUrl(config: ResolvedZaninBlogConfig, slug: string): string;
 //# sourceMappingURL=data.d.ts.map

package/dist/data.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data.d.ts","sourceRoot":"","sources":["../src/data.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,KAAK,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAE3D,qFAAqF;AACrF,eAAO,MAAM,eAAe,eAAe,CAAC;AAY5C,wBAAgB,YAAY,CAAC,MAAM,EAAE,uBAAuB,GAAG,WAAW,CAMzE;AAED,wBAAsB,mBAAmB,CACvC,MAAM,EAAE,uBAAuB,GAC9B,OAAO,CAAC,IAAI,EAAE,CAAC,CAUjB;AAED,wBAAsB,kBAAkB,CACtC,MAAM,EAAE,uBAAuB,EAC/B,IAAI,EAAE,MAAM,GACX,OAAO,CAAC,IAAI,GAAG,IAAI,CAAC,CAItB;AAED,wBAAgB,OAAO,CAAC,MAAM,EAAE,uBAAuB,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAG7E"}
+{"version":3,"file":"data.d.ts","sourceRoot":"","sources":["../src/data.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,KAAK,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAE3D,qFAAqF;AACrF,eAAO,MAAM,eAAe,eAAe,CAAC;AAY5C,wBAAgB,YAAY,CAAC,MAAM,EAAE,uBAAuB,GAAG,WAAW,CAMzE;AAED,wBAAsB,mBAAmB,CACvC,MAAM,EAAE,uBAAuB,GAC9B,OAAO,CAAC,IAAI,EAAE,CAAC,CAUjB;AAED,wBAAsB,kBAAkB,CACtC,MAAM,EAAE,uBAAuB,EAC/B,IAAI,EAAE,MAAM,GACX,OAAO,CAAC,IAAI,GAAG,IAAI,CAAC,CAItB;AAED,8DAA8D;AAC9D,wBAAsB,SAAS,CAAC,MAAM,EAAE,uBAAuB,mDAO9D;AAED,wBAAgB,OAAO,CAAC,MAAM,EAAE,uBAAuB,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAG7E"}

package/dist/data.js

@@ -29,6 +29,16 @@ export async function fetchPublishedPost(config, slug) {
         status: "published",
     });
 }
+/** The site record carries the dashboard-configured theme. */
+export async function fetchSite(config) {
+    try {
+        return await createClient(config).getSite(config.siteId);
+    }
+    catch (err) {
+        console.error("[@usezanin/blog] Failed to fetch site (theme falls back to defaults):", err);
+        return null;
+    }
+}
 export function postUrl(config, slug) {
     const path = `${config.basePath}/${slug}`.replace(/\/{2,}/g, "/");
     return config.siteUrl ? `${config.siteUrl}${path}` : path;

package/dist/data.js.map

@@ -1 +1 @@
-{"version":3,"file":"data.js","sourceRoot":"","sources":["../src/data.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAa,MAAM,kBAAkB,CAAC;AAG1D,qFAAqF;AACrF,MAAM,CAAC,MAAM,eAAe,GAAG,YAAY,CAAC;AAE5C,SAAS,WAAW,CAAC,MAA+B;IAClD,yEAAyE;IACzE,qEAAqE;IACrE,OAAO,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,CACrB,KAAK,CAAC,KAAK,EAAE;QACX,GAAG,IAAI;QACP,IAAI,EAAE,EAAE,UAAU,EAAE,MAAM,CAAC,UAAU,EAAE,IAAI,EAAE,CAAC,eAAe,CAAC,EAAE;KAClD,CAAC,CAAC;AACtB,CAAC;AAED,MAAM,UAAU,YAAY,CAAC,MAA+B;IAC1D,OAAO,IAAI,WAAW,CAAC;QACrB,OAAO,EAAE,MAAM,CAAC,OAAO;QACvB,MAAM,EAAE,MAAM,CAAC,MAAM;QACrB,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC;KAC3B,CAAC,CAAC;AACL,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,mBAAmB,CACvC,MAA+B;IAE/B,MAAM,KAAK,GAAG,MAAM,YAAY,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,EAAE;QAChE,MAAM,EAAE,WAAW;QACnB,KAAK,EAAE,GAAG;KACX,CAAC,CAAC;IACH,OAAO,CAAC,GAAG,KAAK,CAAC,CAAC,IAAI,CACpB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CACP,IAAI,IAAI,CAAC,CAAC,CAAC,WAAW,IAAI,CAAC,CAAC,SAAS,CAAC,CAAC,OAAO,EAAE;QAChD,IAAI,IAAI,CAAC,CAAC,CAAC,WAAW,IAAI,CAAC,CAAC,SAAS,CAAC,CAAC,OAAO,EAAE,CACnD,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,kBAAkB,CACtC,MAA+B,EAC/B,IAAY;IAEZ,OAAO,YAAY,CAAC,MAAM,CAAC,CAAC,aAAa,CAAC,MAAM,CAAC,MAAM,EAAE,IAAI,EAAE;QAC7D,MAAM,EAAE,WAAW;KACpB,CAAC,CAAC;AACL,CAAC;AAED,MAAM,UAAU,OAAO,CAAC,MAA+B,EAAE,IAAY;IACnE,MAAM,IAAI,GAAG,GAAG,MAAM,CAAC,QAAQ,IAAI,IAAI,EAAE,CAAC,OAAO,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC;IAClE,OAAO,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,OAAO,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;AAC5D,CAAC"}
+{"version":3,"file":"data.js","sourceRoot":"","sources":["../src/data.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAa,MAAM,kBAAkB,CAAC;AAG1D,qFAAqF;AACrF,MAAM,CAAC,MAAM,eAAe,GAAG,YAAY,CAAC;AAE5C,SAAS,WAAW,CAAC,MAA+B;IAClD,yEAAyE;IACzE,qEAAqE;IACrE,OAAO,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,CACrB,KAAK,CAAC,KAAK,EAAE;QACX,GAAG,IAAI;QACP,IAAI,EAAE,EAAE,UAAU,EAAE,MAAM,CAAC,UAAU,EAAE,IAAI,EAAE,CAAC,eAAe,CAAC,EAAE;KAClD,CAAC,CAAC;AACtB,CAAC;AAED,MAAM,UAAU,YAAY,CAAC,MAA+B;IAC1D,OAAO,IAAI,WAAW,CAAC;QACrB,OAAO,EAAE,MAAM,CAAC,OAAO;QACvB,MAAM,EAAE,MAAM,CAAC,MAAM;QACrB,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC;KAC3B,CAAC,CAAC;AACL,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,mBAAmB,CACvC,MAA+B;IAE/B,MAAM,KAAK,GAAG,MAAM,YAAY,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,EAAE;QAChE,MAAM,EAAE,WAAW;QACnB,KAAK,EAAE,GAAG;KACX,CAAC,CAAC;IACH,OAAO,CAAC,GAAG,KAAK,CAAC,CAAC,IAAI,CACpB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CACP,IAAI,IAAI,CAAC,CAAC,CAAC,WAAW,IAAI,CAAC,CAAC,SAAS,CAAC,CAAC,OAAO,EAAE;QAChD,IAAI,IAAI,CAAC,CAAC,CAAC,WAAW,IAAI,CAAC,CAAC,SAAS,CAAC,CAAC,OAAO,EAAE,CACnD,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,kBAAkB,CACtC,MAA+B,EAC/B,IAAY;IAEZ,OAAO,YAAY,CAAC,MAAM,CAAC,CAAC,aAAa,CAAC,MAAM,CAAC,MAAM,EAAE,IAAI,EAAE;QAC7D,MAAM,EAAE,WAAW;KACpB,CAAC,CAAC;AACL,CAAC;AAED,8DAA8D;AAC9D,MAAM,CAAC,KAAK,UAAU,SAAS,CAAC,MAA+B;IAC7D,IAAI,CAAC;QACH,OAAO,MAAM,YAAY,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;IAC3D,CAAC;IAAC,OAAO,GAAG,EAAE,CAAC;QACb,OAAO,CAAC,KAAK,CAAC,uEAAuE,EAAE,GAAG,CAAC,CAAC;QAC5F,OAAO,IAAI,CAAC;IACd,CAAC;AACH,CAAC;AAED,MAAM,UAAU,OAAO,CAAC,MAA+B,EAAE,IAAY;IACnE,MAAM,IAAI,GAAG,GAAG,MAAM,CAAC,QAAQ,IAAI,IAAI,EAAE,CAAC,OAAO,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC;IAClE,OAAO,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,OAAO,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;AAC5D,CAAC"}

package/dist/headless.d.ts

@@ -0,0 +1,14 @@
+import type { Post, Site } from "@usezanin/client";
+import { type ZaninBlogConfig } from "./config.js";
+/**
+ * Headless data helpers for fully custom blog UIs: fetch the content with
+ * these, render however you like (renderMdx + builtinComponents are exported
+ * too). All requests share the SDK's ISR caching and revalidation webhook.
+ */
+/** All published posts (sorted newest first, bodies excluded). */
+export declare function getBlogPosts(config?: ZaninBlogConfig): Promise<Post[]>;
+/** One published post by slug, including its MDX body; null when not found. */
+export declare function getBlogPost(slug: string, config?: ZaninBlogConfig): Promise<Post | null>;
+/** The site record, including the dashboard-configured theme. */
+export declare function getBlogSite(config?: ZaninBlogConfig): Promise<Site | null>;
+//# sourceMappingURL=headless.d.ts.map

package/dist/headless.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"headless.d.ts","sourceRoot":"","sources":["../src/headless.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAiB,KAAK,eAAe,EAAE,MAAM,aAAa,CAAC;AAGlE;;;;GAIG;AAEH,kEAAkE;AAClE,wBAAsB,YAAY,CAAC,MAAM,CAAC,EAAE,eAAe,GAAG,OAAO,CAAC,IAAI,EAAE,CAAC,CAE5E;AAED,+EAA+E;AAC/E,wBAAsB,WAAW,CAC/B,IAAI,EAAE,MAAM,EACZ,MAAM,CAAC,EAAE,eAAe,GACvB,OAAO,CAAC,IAAI,GAAG,IAAI,CAAC,CAEtB;AAED,iEAAiE;AACjE,wBAAsB,WAAW,CAAC,MAAM,CAAC,EAAE,eAAe,GAAG,OAAO,CAAC,IAAI,GAAG,IAAI,CAAC,CAEhF"}

package/dist/headless.js

@@ -0,0 +1,20 @@
+import { resolveConfig } from "./config.js";
+import { fetchPublishedPost, fetchPublishedPosts, fetchSite } from "./data.js";
+/**
+ * Headless data helpers for fully custom blog UIs: fetch the content with
+ * these, render however you like (renderMdx + builtinComponents are exported
+ * too). All requests share the SDK's ISR caching and revalidation webhook.
+ */
+/** All published posts (sorted newest first, bodies excluded). */
+export async function getBlogPosts(config) {
+    return fetchPublishedPosts(resolveConfig(config));
+}
+/** One published post by slug, including its MDX body; null when not found. */
+export async function getBlogPost(slug, config) {
+    return fetchPublishedPost(resolveConfig(config), slug);
+}
+/** The site record, including the dashboard-configured theme. */
+export async function getBlogSite(config) {
+    return fetchSite(resolveConfig(config));
+}
+//# sourceMappingURL=headless.js.map

package/dist/headless.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"headless.js","sourceRoot":"","sources":["../src/headless.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAwB,MAAM,aAAa,CAAC;AAClE,OAAO,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAE/E;;;;GAIG;AAEH,kEAAkE;AAClE,MAAM,CAAC,KAAK,UAAU,YAAY,CAAC,MAAwB;IACzD,OAAO,mBAAmB,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC;AACpD,CAAC;AAED,+EAA+E;AAC/E,MAAM,CAAC,KAAK,UAAU,WAAW,CAC/B,IAAY,EACZ,MAAwB;IAExB,OAAO,kBAAkB,CAAC,aAAa,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,CAAC;AACzD,CAAC;AAED,iEAAiE;AACjE,MAAM,CAAC,KAAK,UAAU,WAAW,CAAC,MAAwB;IACxD,OAAO,SAAS,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC;AAC1C,CAAC"}

package/dist/index.d.ts

@@ -1,7 +1,9 @@
-export { BlogIndex, type BlogIndexProps } from "./BlogIndex.js";
+export { BlogIndex, PostCard, type BlogIndexProps } from "./BlogIndex.js";
 export { BlogPost, type BlogPostProps } from "./BlogPost.js";
 export { resolveConfig, type ZaninBlogConfig } from "./config.js";
 export { ZANIN_CACHE_TAG } from "./data.js";
+export { getBlogPost, getBlogPosts, getBlogSite } from "./headless.js";
+export { indexLayoutClass, mergeThemes, themeToStyle, type ZaninTheme } from "./theme.js";
 export { createRevalidateHandler, createRssHandler, createSitemapHandler, } from "./handlers.js";
 export { fetchCustomComponents } from "./custom-components.js";
 export { builtinComponents, renderMdx } from "./mdx.js";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAO,EAAE,aAAa,EAAE,KAAK,eAAe,EAAE,MAAM,aAAa,CAAC;AAClE,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAC5C,OAAO,EACL,uBAAuB,EACvB,gBAAgB,EAChB,oBAAoB,GACrB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AACxD,OAAO,EAAE,oBAAoB,EAAE,wBAAwB,EAAE,MAAM,UAAU,CAAC;AAC1E,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAC/D,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAClE,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,GAAG,EAAE,KAAK,OAAO,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,YAAY,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAC1E,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAO,EAAE,aAAa,EAAE,KAAK,eAAe,EAAE,MAAM,aAAa,CAAC;AAClE,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AACvE,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,YAAY,EAAE,KAAK,UAAU,EAAE,MAAM,YAAY,CAAC;AAC1F,OAAO,EACL,uBAAuB,EACvB,gBAAgB,EAChB,oBAAoB,GACrB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AACxD,OAAO,EAAE,oBAAoB,EAAE,wBAAwB,EAAE,MAAM,UAAU,CAAC;AAC1E,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAC/D,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAClE,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,GAAG,EAAE,KAAK,OAAO,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,YAAY,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/index.js

@@ -1,7 +1,9 @@
-export { BlogIndex } from "./BlogIndex.js";
+export { BlogIndex, PostCard } from "./BlogIndex.js";
 export { BlogPost } from "./BlogPost.js";
 export { resolveConfig } from "./config.js";
 export { ZANIN_CACHE_TAG } from "./data.js";
+export { getBlogPost, getBlogPosts, getBlogSite } from "./headless.js";
+export { indexLayoutClass, mergeThemes, themeToStyle } from "./theme.js";
 export { createRevalidateHandler, createRssHandler, createSitemapHandler, } from "./handlers.js";
 export { fetchCustomComponents } from "./custom-components.js";
 export { builtinComponents, renderMdx } from "./mdx.js";

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAuB,MAAM,gBAAgB,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAsB,MAAM,eAAe,CAAC;AAC7D,OAAO,EAAE,aAAa,EAAwB,MAAM,aAAa,CAAC;AAClE,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAC5C,OAAO,EACL,uBAAuB,EACvB,gBAAgB,EAChB,oBAAoB,GACrB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AACxD,OAAO,EAAE,oBAAoB,EAAE,wBAAwB,EAAE,MAAM,UAAU,CAAC;AAC1E,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClD,OAAO,EAAE,KAAK,EAAmB,MAAM,uBAAuB,CAAC;AAC/D,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAClE,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,GAAG,EAAgB,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAuB,MAAM,gBAAgB,CAAC;AAC1E,OAAO,EAAE,QAAQ,EAAsB,MAAM,eAAe,CAAC;AAC7D,OAAO,EAAE,aAAa,EAAwB,MAAM,aAAa,CAAC;AAClE,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AACvE,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,YAAY,EAAmB,MAAM,YAAY,CAAC;AAC1F,OAAO,EACL,uBAAuB,EACvB,gBAAgB,EAChB,oBAAoB,GACrB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AACxD,OAAO,EAAE,oBAAoB,EAAE,wBAAwB,EAAE,MAAM,UAAU,CAAC;AAC1E,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClD,OAAO,EAAE,KAAK,EAAmB,MAAM,uBAAuB,CAAC;AAC/D,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAClE,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,GAAG,EAAgB,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/theme.d.ts

@@ -0,0 +1,12 @@
+import type { ZaninTheme } from "@usezanin/client";
+export type { ZaninTheme };
+/** Host theme wins over the CMS theme; both win over stylesheet defaults. */
+export declare function mergeThemes(cmsTheme: ZaninTheme | null | undefined, hostTheme: ZaninTheme | undefined): ZaninTheme;
+/**
+ * Converts a theme to inline CSS-variable overrides for the .zanin-blog
+ * wrapper. Every value lands in a CSS custom property (never a property),
+ * so arbitrary values cannot escape the declaration.
+ */
+export declare function themeToStyle(theme: ZaninTheme): Record<string, string>;
+export declare function indexLayoutClass(theme: ZaninTheme): string;
+//# sourceMappingURL=theme.d.ts.map

package/dist/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEnD,YAAY,EAAE,UAAU,EAAE,CAAC;AA0B3B,6EAA6E;AAC7E,wBAAgB,WAAW,CACzB,QAAQ,EAAE,UAAU,GAAG,IAAI,GAAG,SAAS,EACvC,SAAS,EAAE,UAAU,GAAG,SAAS,GAChC,UAAU,CAEZ;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAYtE;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,UAAU,GAAG,MAAM,CAE1D"}

package/dist/theme.js

@@ -0,0 +1,48 @@
+/** Direct theme-field → CSS-variable mappings. */
+const VAR_MAP = {
+    "--zanin-accent": "accent",
+    "--zanin-canvas": "background",
+    "--zanin-surface": "surface",
+    "--zanin-ink": "text",
+    "--zanin-ink-muted": "textMuted",
+    "--zanin-ink-faint": "textFaint",
+    "--zanin-hairline": "border",
+    "--zanin-font-body": "fontBody",
+    "--zanin-font-heading": "fontHeading",
+    "--zanin-font-mono": "fontMono",
+    "--zanin-base-size": "baseFontSize",
+    "--zanin-heading-weight": "headingWeight",
+    "--zanin-measure": "measure",
+    "--zanin-radius": "radius",
+};
+const SPACING_SCALE = {
+    compact: "0.8",
+    comfortable: "1",
+    relaxed: "1.3",
+};
+/** Host theme wins over the CMS theme; both win over stylesheet defaults. */
+export function mergeThemes(cmsTheme, hostTheme) {
+    return { ...(cmsTheme ?? {}), ...(hostTheme ?? {}) };
+}
+/**
+ * Converts a theme to inline CSS-variable overrides for the .zanin-blog
+ * wrapper. Every value lands in a CSS custom property (never a property),
+ * so arbitrary values cannot escape the declaration.
+ */
+export function themeToStyle(theme) {
+    const style = {};
+    for (const [cssVar, field] of Object.entries(VAR_MAP)) {
+        const value = theme[field];
+        if (typeof value === "string" && value.trim()) {
+            style[cssVar] = value.trim().replace(/[{};]/g, "");
+        }
+    }
+    if (theme.spacing) {
+        style["--zanin-space"] = SPACING_SCALE[theme.spacing];
+    }
+    return style;
+}
+export function indexLayoutClass(theme) {
+    return theme.indexLayout === "grid" ? "zanin-index--grid" : "zanin-index--list";
+}
+//# sourceMappingURL=theme.js.map

package/dist/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAIA,kDAAkD;AAClD,MAAM,OAAO,GAAqC;IAChD,gBAAgB,EAAE,QAAQ;IAC1B,gBAAgB,EAAE,YAAY;IAC9B,iBAAiB,EAAE,SAAS;IAC5B,aAAa,EAAE,MAAM;IACrB,mBAAmB,EAAE,WAAW;IAChC,mBAAmB,EAAE,WAAW;IAChC,kBAAkB,EAAE,QAAQ;IAC5B,mBAAmB,EAAE,UAAU;IAC/B,sBAAsB,EAAE,aAAa;IACrC,mBAAmB,EAAE,UAAU;IAC/B,mBAAmB,EAAE,cAAc;IACnC,wBAAwB,EAAE,eAAe;IACzC,iBAAiB,EAAE,SAAS;IAC5B,gBAAgB,EAAE,QAAQ;CAC3B,CAAC;AAEF,MAAM,aAAa,GAAuD;IACxE,OAAO,EAAE,KAAK;IACd,WAAW,EAAE,GAAG;IAChB,OAAO,EAAE,KAAK;CACf,CAAC;AAEF,6EAA6E;AAC7E,MAAM,UAAU,WAAW,CACzB,QAAuC,EACvC,SAAiC;IAEjC,OAAO,EAAE,GAAG,CAAC,QAAQ,IAAI,EAAE,CAAC,EAAE,GAAG,CAAC,SAAS,IAAI,EAAE,CAAC,EAAE,CAAC;AACvD,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,YAAY,CAAC,KAAiB;IAC5C,MAAM,KAAK,GAA2B,EAAE,CAAC;IACzC,KAAK,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC;QACtD,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC;QAC3B,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,CAAC,IAAI,EAAE,EAAE,CAAC;YAC9C,KAAK,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC,IAAI,EAAE,CAAC,OAAO,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;QACrD,CAAC;IACH,CAAC;IACD,IAAI,KAAK,CAAC,OAAO,EAAE,CAAC;QAClB,KAAK,CAAC,eAAe,CAAC,GAAG,aAAa,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IACxD,CAAC;IACD,OAAO,KAAK,CAAC;AACf,CAAC;AAED,MAAM,UAAU,gBAAgB,CAAC,KAAiB;IAChD,OAAO,KAAK,CAAC,WAAW,KAAK,MAAM,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,mBAAmB,CAAC;AAClF,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@usezanin/blog",
-  "version": "0.1.0",
-  "description": "React SDK for rendering Zanin blogs in Next.js sites — index/post components, built-in MDX components, SEO, RSS and sitemap",
+  "version": "0.2.0",
+  "description": "React SDK for rendering Zanin blogs in Next.js sites \u2014 index/post components, built-in MDX components, SEO, RSS and sitemap",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",
@@ -41,7 +41,7 @@
   },
   "dependencies": {
     "@mdx-js/mdx": "^3.1.0",
-    "@usezanin/client": "^0.1.0",
+    "@usezanin/client": "^0.2.0",
     "recharts": "^2.15.0",
     "remark-gfm": "^4.0.0"
   },

package/styles.css

@@ -1,33 +1,41 @@
 /**
  * @usezanin/blog — themable reading styles.
  *
- * Every color and face routes through a CSS variable so host sites can
- * re-brand by overriding the --zanin-* tokens; the defaults follow the Zanin
- * design system: warm light canvas, ink (never pure black), one brand accent,
- * serif for the content's voice, sans for chrome, pill-shaped tags.
+ * Design language matches the Zanin admin: clean neutral surfaces, hairline
+ * borders, subtle shadows, one accent color. Every value routes through a
+ * --zanin-* CSS variable; override them via the site theme in the Zanin
+ * dashboard, the SDK `theme` config, or plain CSS.
  */
 .zanin-blog {
-  --zanin-accent: #2563eb;
-  --zanin-accent-pressed: #1d4ed8;
-  --zanin-canvas: #fafaf9;
-  --zanin-surface: #ffffff;
-  --zanin-ink: #1c1917;
-  --zanin-ink-muted: #57534e;
-  --zanin-ink-faint: #a8a29e;
-  --zanin-hairline: #e7e5e4;
-  --zanin-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
-  --zanin-font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
+  --zanin-accent: #005bd3;
+  --zanin-canvas: #ffffff;
+  --zanin-surface: #fafafa;
+  --zanin-ink: #1a1a1a;
+  --zanin-ink-muted: #616161;
+  --zanin-ink-faint: #8a8a8a;
+  --zanin-hairline: #e3e3e3;
+  --zanin-font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --zanin-font-heading: var(--zanin-font-body);
   --zanin-font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
+  --zanin-base-size: 16.5px;
+  --zanin-heading-weight: 650;
   --zanin-measure: 720px;
-  --zanin-radius-card: 22px;
+  --zanin-radius: 12px;
+  /* Vertical rhythm multiplier (theme spacing: compact 0.8 / relaxed 1.3) */
+  --zanin-space: 1;
+
+  /* Derived */
+  --zanin-accent-strong: color-mix(in srgb, var(--zanin-accent) 82%, var(--zanin-ink));
+  --zanin-shadow: 0 1px 2px color-mix(in srgb, var(--zanin-ink) 7%, transparent);
 
   margin: 0 auto;
   max-width: var(--zanin-measure);
-  padding: 48px 24px 96px;
+  padding: calc(48px * var(--zanin-space)) 24px calc(96px * var(--zanin-space));
+  background: var(--zanin-canvas);
   color: var(--zanin-ink);
-  font-family: var(--zanin-font-sans);
-  font-size: 16px;
-  line-height: 1.6;
+  font-family: var(--zanin-font-body);
+  font-size: var(--zanin-base-size);
+  line-height: 1.65;
 }
 
 .zanin-blog a {
@@ -35,119 +43,164 @@
   text-decoration: none;
 }
 .zanin-blog a:hover {
-  color: var(--zanin-accent-pressed);
+  color: var(--zanin-accent-strong);
+  text-decoration: underline;
 }
 
 .zanin-tag {
   display: inline-block;
-  border-radius: 999px;
-  background: color-mix(in srgb, var(--zanin-accent) 10%, transparent);
-  color: var(--zanin-accent);
-  font-size: 12px;
-  font-weight: 600;
-  letter-spacing: 0.02em;
-  padding: 2px 12px;
+  border: 1px solid var(--zanin-hairline);
+  border-radius: calc(var(--zanin-radius) / 1.5);
+  background: var(--zanin-surface);
+  color: var(--zanin-ink-muted);
+  font-size: 0.72em;
+  font-weight: 550;
+  letter-spacing: 0.01em;
+  padding: 2px 9px;
 }
 
 /* ---- Index ---------------------------------------------------------- */
 
 .zanin-index-header {
-  margin-bottom: 48px;
+  margin-bottom: calc(40px * var(--zanin-space));
 }
 .zanin-index-header h1 {
-  font-family: var(--zanin-font-serif);
-  font-size: 44px;
-  font-weight: 500;
-  letter-spacing: -0.015em;
-  line-height: 1.1;
+  font-family: var(--zanin-font-heading);
+  font-size: 2.5em;
+  font-weight: var(--zanin-heading-weight);
+  letter-spacing: -0.02em;
+  line-height: 1.12;
   margin: 0 0 8px;
   text-wrap: balance;
 }
 .zanin-index-header p {
   color: var(--zanin-ink-muted);
-  font-size: 18px;
+  font-size: 1.06em;
   margin: 0;
   max-width: 52ch;
 }
 
-.zanin-index-list {
-  display: flex;
-  flex-direction: column;
-}
-.zanin-index-item {
-  border-top: 1px solid var(--zanin-hairline);
-}
-.zanin-index-item:last-child {
-  border-bottom: 1px solid var(--zanin-hairline);
-}
 .zanin-index-item > a {
   color: inherit;
   display: block;
-  padding: 28px 4px;
-  transition: opacity 0.15s ease;
-}
-.zanin-index-item > a:hover {
-  color: inherit;
-  opacity: 0.72;
+  text-decoration: none;
 }
 .zanin-index-item h2 {
-  font-family: var(--zanin-font-serif);
-  font-size: 26px;
-  font-weight: 500;
-  letter-spacing: -0.01em;
-  line-height: 1.25;
+  font-family: var(--zanin-font-heading);
+  font-size: 1.45em;
+  font-weight: var(--zanin-heading-weight);
+  letter-spacing: -0.012em;
+  line-height: 1.28;
   margin: 0 0 6px;
   text-wrap: balance;
 }
+.zanin-index-item > a:hover h2 {
+  color: var(--zanin-accent);
+}
+.zanin-index-item > a:hover {
+  text-decoration: none;
+  color: inherit;
+}
 .zanin-index-item p {
   color: var(--zanin-ink-muted);
+  font-size: 0.94em;
   margin: 0;
-  max-width: 62ch;
+  max-width: 66ch;
 }
 .zanin-index-meta {
   align-items: center;
   color: var(--zanin-ink-faint);
   display: flex;
-  font-size: 12px;
-  font-weight: 600;
-  gap: 10px;
-  letter-spacing: 0.09em;
+  flex-wrap: wrap;
+  font-size: 0.78em;
+  font-weight: 500;
+  gap: 8px;
   margin-bottom: 10px;
-  text-transform: uppercase;
+}
+.zanin-index-more {
+  color: var(--zanin-accent);
+  display: inline-block;
+  font-size: 0.85em;
+  font-weight: 550;
+  margin-top: 12px;
 }
 .zanin-index-empty {
   color: var(--zanin-ink-faint);
 }
 
+/* List layout (default): divided rows */
+.zanin-index--list .zanin-index-list {
+  display: flex;
+  flex-direction: column;
+}
+.zanin-index--list .zanin-index-item {
+  border-top: 1px solid var(--zanin-hairline);
+}
+.zanin-index--list .zanin-index-item:last-child {
+  border-bottom: 1px solid var(--zanin-hairline);
+}
+.zanin-index--list .zanin-index-item > a {
+  padding: calc(26px * var(--zanin-space)) 2px;
+}
+
+/* Grid layout: cards */
+.zanin-index--grid {
+  max-width: calc(var(--zanin-measure) * 1.5);
+}
+.zanin-index--grid .zanin-index-list {
+  display: grid;
+  gap: calc(20px * var(--zanin-space));
+  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
+}
+.zanin-index--grid .zanin-index-item {
+  background: var(--zanin-surface);
+  border: 1px solid var(--zanin-hairline);
+  border-radius: var(--zanin-radius);
+  box-shadow: var(--zanin-shadow);
+  transition: box-shadow 0.15s ease, transform 0.15s ease;
+}
+.zanin-index--grid .zanin-index-item:hover {
+  box-shadow: 0 4px 14px color-mix(in srgb, var(--zanin-ink) 10%, transparent);
+  transform: translateY(-1px);
+}
+.zanin-index--grid .zanin-index-item > a {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: calc(22px * var(--zanin-space));
+}
+.zanin-index--grid .zanin-index-more {
+  margin-top: auto;
+  padding-top: 14px;
+}
+
 /* ---- Post header ----------------------------------------------------- */
 
 .zanin-post-header {
-  margin-bottom: 44px;
+  margin-bottom: calc(40px * var(--zanin-space));
 }
 .zanin-post-meta {
   align-items: center;
   color: var(--zanin-ink-faint);
   display: flex;
   flex-wrap: wrap;
-  font-size: 12px;
-  font-weight: 600;
-  gap: 10px;
-  letter-spacing: 0.09em;
-  margin-bottom: 16px;
-  text-transform: uppercase;
+  font-size: 0.8em;
+  font-weight: 500;
+  gap: 8px;
+  margin-bottom: 14px;
 }
 .zanin-post-header h1 {
-  font-family: var(--zanin-font-serif);
-  font-size: 44px;
-  font-weight: 500;
-  letter-spacing: -0.015em;
+  font-family: var(--zanin-font-heading);
+  font-size: 2.5em;
+  font-weight: var(--zanin-heading-weight);
+  letter-spacing: -0.02em;
   line-height: 1.12;
-  margin: 0 0 14px;
+  margin: 0 0 12px;
   text-wrap: balance;
 }
 .zanin-post-lede {
   color: var(--zanin-ink-muted);
-  font-size: 19px;
+  font-size: 1.12em;
   line-height: 1.55;
   margin: 0;
   text-wrap: pretty;
@@ -156,92 +209,90 @@
 /* ---- Prose ----------------------------------------------------------- */
 
 .zanin-prose {
-  font-size: 17px;
-  line-height: 1.65;
+  line-height: 1.68;
 }
 .zanin-prose > * + * {
-  margin-top: 1.15em;
+  margin-top: calc(1.1em * var(--zanin-space));
 }
 .zanin-prose p {
   margin: 0;
   text-wrap: pretty;
 }
 .zanin-prose h2 {
-  font-family: var(--zanin-font-serif);
-  font-size: 28px;
-  font-weight: 500;
-  letter-spacing: -0.01em;
+  font-family: var(--zanin-font-heading);
+  font-size: 1.6em;
+  font-weight: var(--zanin-heading-weight);
+  letter-spacing: -0.015em;
   line-height: 1.25;
-  margin-top: 2em;
-  text-wrap: balance;
+  margin-top: calc(1.9em * var(--zanin-space));
 }
 .zanin-prose h3 {
-  font-size: 20px;
-  font-weight: 650;
+  font-family: var(--zanin-font-heading);
+  font-size: 1.2em;
+  font-weight: var(--zanin-heading-weight);
   line-height: 1.3;
-  margin-top: 1.8em;
+  margin-top: calc(1.7em * var(--zanin-space));
 }
 .zanin-prose ul,
 .zanin-prose ol {
   padding-left: 1.4em;
 }
 .zanin-prose li + li {
-  margin-top: 0.4em;
+  margin-top: calc(0.4em * var(--zanin-space));
 }
 .zanin-prose blockquote {
   border-left: 3px solid var(--zanin-accent);
   color: var(--zanin-ink-muted);
-  font-family: var(--zanin-font-serif);
-  font-size: 20px;
-  font-style: italic;
-  margin: 1.6em 0;
-  padding: 0.2em 0 0.2em 1.2em;
+  font-size: 1.05em;
+  margin: calc(1.5em * var(--zanin-space)) 0;
+  padding: 0.15em 0 0.15em 1.2em;
 }
 .zanin-prose code {
-  background: color-mix(in srgb, var(--zanin-ink) 6%, transparent);
+  background: var(--zanin-surface);
+  border: 1px solid var(--zanin-hairline);
   border-radius: 6px;
   font-family: var(--zanin-font-mono);
-  font-size: 0.88em;
-  padding: 0.15em 0.4em;
+  font-size: 0.86em;
+  padding: 0.1em 0.35em;
 }
 .zanin-prose img {
-  border-radius: var(--zanin-radius-card);
+  border: 1px solid var(--zanin-hairline);
+  border-radius: var(--zanin-radius);
   height: auto;
   max-width: 100%;
 }
 .zanin-prose hr {
   border: none;
   border-top: 1px solid var(--zanin-hairline);
-  margin: 2.5em 0;
+  margin: calc(2.4em * var(--zanin-space)) 0;
 }
 .zanin-prose table {
   border-collapse: collapse;
-  font-size: 15px;
+  font-size: 0.9em;
   width: 100%;
 }
 .zanin-prose th,
 .zanin-prose td {
   border-bottom: 1px solid var(--zanin-hairline);
-  padding: 10px 12px;
+  padding: 9px 12px;
   text-align: left;
 }
 .zanin-prose th {
-  color: var(--zanin-ink-faint);
-  font-size: 12px;
-  font-weight: 650;
-  letter-spacing: 0.09em;
-  text-transform: uppercase;
+  color: var(--zanin-ink-muted);
+  font-size: 0.82em;
+  font-weight: 600;
 }
 
 /* ---- Built-in components --------------------------------------------- */
 
 .zanin-callout {
   background: var(--zanin-surface);
-  border-radius: var(--zanin-radius-card);
-  box-shadow: 0 4px 12px color-mix(in srgb, var(--zanin-accent) 10%, transparent);
+  border: 1px solid var(--zanin-hairline);
+  border-radius: var(--zanin-radius);
+  box-shadow: var(--zanin-shadow);
   display: flex;
-  gap: 14px;
-  padding: 18px 22px;
+  gap: 12px;
+  padding: calc(16px * var(--zanin-space)) 18px;
 }
 .zanin-callout-icon {
   align-items: center;
@@ -250,23 +301,23 @@
   color: var(--zanin-accent);
   display: flex;
   flex-shrink: 0;
-  font-size: 13px;
+  font-size: 0.78em;
   font-weight: 700;
-  height: 26px;
+  height: 24px;
   justify-content: center;
   margin-top: 2px;
-  width: 26px;
+  width: 24px;
 }
 .zanin-callout-warning .zanin-callout-icon {
-  background: rgba(217, 119, 6, 0.14);
-  color: #b45309;
+  background: #ffef9d;
+  color: #4f4700;
 }
 .zanin-callout-success .zanin-callout-icon {
-  background: rgba(22, 163, 74, 0.13);
-  color: #15803d;
+  background: #cdfee1;
+  color: #0c5132;
 }
 .zanin-callout-body {
-  font-size: 15.5px;
+  font-size: 0.94em;
 }
 .zanin-callout-body > * + * {
   margin-top: 0.5em;
@@ -282,31 +333,31 @@
   margin: 0;
 }
 .zanin-figure img {
-  border-radius: var(--zanin-radius-card);
+  border: 1px solid var(--zanin-hairline);
+  border-radius: var(--zanin-radius);
   height: auto;
   max-width: 100%;
   width: 100%;
 }
 .zanin-figure figcaption {
   color: var(--zanin-ink-faint);
-  font-size: 13.5px;
+  font-size: 0.82em;
   margin-top: 10px;
   text-align: center;
 }
 
 .zanin-chart {
   background: var(--zanin-surface);
-  border-radius: var(--zanin-radius-card);
-  box-shadow: 0 4px 12px color-mix(in srgb, var(--zanin-accent) 8%, transparent);
-  padding: 22px;
+  border: 1px solid var(--zanin-hairline);
+  border-radius: var(--zanin-radius);
+  box-shadow: var(--zanin-shadow);
+  padding: calc(18px * var(--zanin-space));
 }
 .zanin-chart-title {
-  color: var(--zanin-ink-faint);
-  font-size: 12px;
-  font-weight: 650;
-  letter-spacing: 0.09em;
+  color: var(--zanin-ink-muted);
+  font-size: 0.82em;
+  font-weight: 600;
   margin: 0 0 14px;
-  text-transform: uppercase;
 }
 .zanin-chart .recharts-text {
   fill: var(--zanin-ink-faint);
@@ -314,47 +365,50 @@
 
 .zanin-cta {
   align-items: center;
-  background: color-mix(in srgb, var(--zanin-accent) 7%, var(--zanin-surface));
-  border-radius: var(--zanin-radius-card);
+  background: var(--zanin-surface);
+  border: 1px solid var(--zanin-hairline);
+  border-radius: var(--zanin-radius);
+  box-shadow: var(--zanin-shadow);
   display: flex;
   flex-wrap: wrap;
-  gap: 18px;
+  gap: 16px;
   justify-content: space-between;
-  padding: 26px 30px;
+  padding: calc(22px * var(--zanin-space)) 24px;
 }
 .zanin-cta-title {
-  font-family: var(--zanin-font-serif);
-  font-size: 22px;
-  font-weight: 500;
+  font-family: var(--zanin-font-heading);
+  font-size: 1.15em;
+  font-weight: var(--zanin-heading-weight);
   margin: 0;
 }
 .zanin-cta-description {
   color: var(--zanin-ink-muted);
-  font-size: 15px;
+  font-size: 0.9em;
   margin: 4px 0 0;
 }
 .zanin-cta-button {
   background: var(--zanin-accent);
-  border-radius: 999px;
-  box-shadow: 0 4px 14px color-mix(in srgb, var(--zanin-accent) 35%, transparent);
+  border-radius: calc(var(--zanin-radius) / 1.5);
   color: #fff !important;
   display: inline-block;
-  font-size: 15px;
-  font-weight: 650;
-  padding: 12px 26px;
-  transition: transform 0.12s ease, background 0.15s ease;
+  font-size: 0.9em;
+  font-weight: 600;
+  padding: 10px 20px;
+  text-decoration: none !important;
+  transition: background 0.15s ease, transform 0.1s ease;
   white-space: nowrap;
 }
 .zanin-cta-button:hover {
-  background: var(--zanin-accent-pressed);
+  background: var(--zanin-accent-strong);
 }
 .zanin-cta-button:active {
-  transform: scale(0.97);
+  transform: scale(0.98);
 }
 
 .zanin-embed-youtube {
   aspect-ratio: 16 / 9;
-  border-radius: var(--zanin-radius-card);
+  border: 1px solid var(--zanin-hairline);
+  border-radius: var(--zanin-radius);
   overflow: hidden;
 }
 .zanin-embed-youtube iframe {
@@ -365,84 +419,101 @@
 
 .zanin-tweet {
   background: var(--zanin-surface);
-  border-radius: var(--zanin-radius-card);
-  box-shadow: 0 4px 12px color-mix(in srgb, var(--zanin-accent) 8%, transparent);
+  border: 1px solid var(--zanin-hairline);
+  border-radius: var(--zanin-radius);
+  box-shadow: var(--zanin-shadow);
   margin: 0;
-  padding: 22px 26px;
+  padding: calc(18px * var(--zanin-space)) 22px;
 }
 .zanin-tweet-text {
-  font-family: var(--zanin-font-serif);
-  font-size: 19px;
-  font-style: italic;
-  line-height: 1.5;
+  font-size: 1.02em;
+  line-height: 1.55;
 }
 .zanin-tweet footer {
   align-items: center;
   color: var(--zanin-ink-faint);
   display: flex;
-  font-size: 13.5px;
+  font-size: 0.82em;
   gap: 8px;
-  margin-top: 14px;
+  margin-top: 12px;
 }
 .zanin-tweet-author {
   color: var(--zanin-ink);
-  font-weight: 650;
+  font-weight: 600;
 }
 
 .zanin-codeblock {
-  background: #1c1917;
-  border-radius: var(--zanin-radius-card);
-  color: #e7e5e4;
+  background: #1a1a1a;
+  border-radius: var(--zanin-radius);
+  color: #e3e3e3;
   overflow: hidden;
   position: relative;
 }
 .zanin-codeblock-lang {
-  color: #a8a29e;
+  color: #8a8a8a;
   font-family: var(--zanin-font-mono);
-  font-size: 11px;
-  letter-spacing: 0.09em;
+  font-size: 0.68em;
+  letter-spacing: 0.08em;
   position: absolute;
-  right: 16px;
+  right: 14px;
   text-transform: uppercase;
-  top: 12px;
+  top: 11px;
 }
 .zanin-codeblock pre {
   font-family: var(--zanin-font-mono);
-  font-size: 13.5px;
+  font-size: 0.82em;
   line-height: 1.6;
   margin: 0;
   overflow-x: auto;
-  padding: 20px 24px;
+  padding: calc(18px * var(--zanin-space)) 20px;
 }
 .zanin-codeblock code {
   background: none;
+  border: none;
   padding: 0;
 }
 
 .zanin-comparison {
+  border: 1px solid var(--zanin-hairline);
+  border-radius: var(--zanin-radius);
   overflow-x: auto;
 }
+.zanin-comparison table {
+  margin: 0;
+}
+.zanin-comparison th,
+.zanin-comparison td {
+  padding: 10px 14px;
+}
+.zanin-comparison tr:last-child td {
+  border-bottom: none;
+}
 .zanin-comparison .zanin-highlight {
-  background: color-mix(in srgb, var(--zanin-accent) 7%, transparent);
+  background: color-mix(in srgb, var(--zanin-accent) 6%, transparent);
 }
 .zanin-check {
-  color: #15803d;
+  color: #0c5132;
   font-weight: 700;
 }
 .zanin-cross {
   color: var(--zanin-ink-faint);
 }
 
+.zanin-faq {
+  border: 1px solid var(--zanin-hairline);
+  border-radius: var(--zanin-radius);
+  overflow: hidden;
+}
 .zanin-faq details {
-  border-top: 1px solid var(--zanin-hairline);
-  padding: 16px 4px;
+  border-bottom: 1px solid var(--zanin-hairline);
+  padding: calc(14px * var(--zanin-space)) 18px;
 }
 .zanin-faq details:last-child {
-  border-bottom: 1px solid var(--zanin-hairline);
+  border-bottom: none;
 }
 .zanin-faq summary {
   cursor: pointer;
-  font-weight: 650;
+  font-weight: 600;
   list-style: none;
 }
 .zanin-faq summary::-webkit-details-marker {
@@ -452,13 +523,15 @@
   color: var(--zanin-ink-faint);
   content: "+";
   float: right;
-  font-size: 18px;
+  font-size: 1.1em;
+  line-height: 1;
 }
 .zanin-faq details[open] summary::after {
   content: "–";
 }
 .zanin-faq details p {
   color: var(--zanin-ink-muted);
+  font-size: 0.94em;
   margin: 10px 0 0;
 }
 
@@ -466,11 +539,11 @@
 
 @media (max-width: 640px) {
   .zanin-blog {
-    padding: 32px 18px 64px;
+    padding: calc(32px * var(--zanin-space)) 18px calc(64px * var(--zanin-space));
   }
   .zanin-index-header h1,
   .zanin-post-header h1 {
-    font-size: 34px;
+    font-size: 1.9em;
   }
 }