@ogxjs/core 0.1.0

package/dist/font-registry.js

@@ -0,0 +1,59 @@
+/**
+ * Global registry for fonts to avoid reloading and simplify configuration
+ */
+export class FontRegistry {
+    static instance;
+    fonts = [];
+    constructor() { }
+    static getInstance() {
+        if (!FontRegistry.instance) {
+            FontRegistry.instance = new FontRegistry();
+        }
+        return FontRegistry.instance;
+    }
+    /**
+     * Register one or more fonts to be available globally
+     */
+    register(font) {
+        const fontList = Array.isArray(font) ? font : [font];
+        for (const f of fontList) {
+            const exists = this.fonts.some((ext) => ext.name === f.name &&
+                ext.weight === f.weight &&
+                ext.style === f.style);
+            if (!exists) {
+                this.fonts.push(f);
+            }
+        }
+    }
+    /**
+     * Helper to register Inter fonts with specified weights (local files)
+     * Only works in Bun/Node without bundlers
+     */
+    async registerInter(weights = [400, 700]) {
+        const { loadInterFont } = await import("./fonts");
+        const fonts = await Promise.all(weights.map((w) => loadInterFont(w)));
+        this.register(fonts);
+    }
+    /**
+     * Helper to register Inter fonts from Google Fonts CDN
+     * Works with all bundlers (Next.js, Vite, etc.)
+     */
+    async registerInterFromUrl(weights = [400, 700]) {
+        const { loadInterFromUrl } = await import("./fonts");
+        const fonts = await Promise.all(weights.map((w) => loadInterFromUrl(w)));
+        this.register(fonts);
+    }
+    /**
+     * Get all registered fonts
+     */
+    getFonts() {
+        return [...this.fonts];
+    }
+    /**
+     * Clear the registry
+     */
+    clear() {
+        this.fonts = [];
+    }
+}
+export const fontRegistry = FontRegistry.getInstance();

package/dist/fonts.d.ts

@@ -0,0 +1,29 @@
+import type { FontConfig } from "./types";
+/**
+ * Load a font from a file path (Node.js/Bun)
+ */
+export declare function loadFont(path: string): Promise<ArrayBuffer>;
+/**
+ * Load a font from a URL
+ */
+export declare function loadFontFromUrl(url: string): Promise<ArrayBuffer>;
+/**
+ * Create a FontConfig from an ArrayBuffer
+ */
+export declare function createFont(name: string, data: ArrayBuffer, options?: {
+    weight?: FontConfig["weight"];
+    style?: FontConfig["style"];
+}): FontConfig;
+/**
+ * Load Inter font from Google Fonts CDN
+ * Works with all bundlers (Next.js, Vite, etc.)
+ * Supports weights: 300 (Light), 400 (Regular), 500 (Medium), 600 (SemiBold), 700 (Bold)
+ */
+export declare function loadInterFromUrl(weight?: 300 | 400 | 500 | 600 | 700): Promise<FontConfig>;
+/**
+ * Load Inter font from local file
+ * Only works in Bun/Node without bundlers
+ * Supports weights: 300 (Light), 400 (Regular), 500 (Medium), 600 (SemiBold), 700 (Bold)
+ */
+export declare function loadInterFont(weight?: 300 | 400 | 500 | 600 | 700): Promise<FontConfig>;
+//# sourceMappingURL=fonts.d.ts.map

package/dist/fonts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fonts.d.ts","sourceRoot":"","sources":["../src/fonts.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAI1C;;GAEG;AACH,wBAAsB,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,WAAW,CAAC,CAajE;AAED;;GAEG;AACH,wBAAsB,eAAe,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,WAAW,CAAC,CAYvE;AAED;;GAEG;AACH,wBAAgB,UAAU,CACzB,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,WAAW,EACjB,OAAO,GAAE;IAAE,MAAM,CAAC,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;IAAC,KAAK,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAA;CAAO,GAC1E,UAAU,CAOZ;AAWD;;;;GAIG;AACH,wBAAsB,gBAAgB,CACrC,MAAM,GAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAS,GACvC,OAAO,CAAC,UAAU,CAAC,CAIrB;AAED;;;;GAIG;AACH,wBAAsB,aAAa,CAClC,MAAM,GAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAS,GACvC,OAAO,CAAC,UAAU,CAAC,CAkCrB"}

package/dist/fonts.js

@@ -0,0 +1,90 @@
+const fontCache = new Map();
+/**
+ * Load a font from a file path (Node.js/Bun)
+ */
+export async function loadFont(path) {
+    if (fontCache.has(path)) {
+        return fontCache.get(path);
+    }
+    const fs = await import("node:fs/promises");
+    const buffer = await fs.readFile(path);
+    const data = buffer.buffer.slice(buffer.byteOffset, buffer.byteOffset + buffer.byteLength);
+    fontCache.set(path, data);
+    return data;
+}
+/**
+ * Load a font from a URL
+ */
+export async function loadFontFromUrl(url) {
+    if (fontCache.has(url)) {
+        return fontCache.get(url);
+    }
+    const response = await fetch(url);
+    if (!response.ok) {
+        throw new Error(`Failed to load font from ${url}: ${response.statusText}`);
+    }
+    const data = await response.arrayBuffer();
+    fontCache.set(url, data);
+    return data;
+}
+/**
+ * Create a FontConfig from an ArrayBuffer
+ */
+export function createFont(name, data, options = {}) {
+    return {
+        name,
+        data,
+        weight: options.weight ?? 400,
+        style: options.style ?? "normal",
+    };
+}
+// Google Fonts CDN URLs for Inter
+const INTER_URLS = {
+    300: "https://fonts.bunny.net/inter/files/inter-latin-300-normal.woff",
+    400: "https://fonts.bunny.net/inter/files/inter-latin-400-normal.woff",
+    500: "https://fonts.bunny.net/inter/files/inter-latin-500-normal.woff",
+    600: "https://fonts.bunny.net/inter/files/inter-latin-600-normal.woff",
+    700: "https://fonts.bunny.net/inter/files/inter-latin-700-normal.woff",
+};
+/**
+ * Load Inter font from Google Fonts CDN
+ * Works with all bundlers (Next.js, Vite, etc.)
+ * Supports weights: 300 (Light), 400 (Regular), 500 (Medium), 600 (SemiBold), 700 (Bold)
+ */
+export async function loadInterFromUrl(weight = 400) {
+    const url = INTER_URLS[weight] ?? INTER_URLS[400];
+    const data = await loadFontFromUrl(url);
+    return createFont("Inter", data, { weight });
+}
+/**
+ * Load Inter font from local file
+ * Only works in Bun/Node without bundlers
+ * Supports weights: 300 (Light), 400 (Regular), 500 (Medium), 600 (SemiBold), 700 (Bold)
+ */
+export async function loadInterFont(weight = 400) {
+    if (typeof globalThis !== "undefined" &&
+        globalThis.window !== undefined) {
+        throw new Error("loadInterFont is only available in Node.js/Bun environments.");
+    }
+    const base = "./fonts/inter";
+    const file = `inter-${weight}.ttf`;
+    const fontFile = [base, file].join("/");
+    // Hide import.meta.url from bundlers like Webpack/Next.js using a dynamic check
+    // this prevents the "Can't resolve <dynamic>" error during build
+    let metaUrl;
+    try {
+        const meta = import.meta;
+        if (meta?.url) {
+            metaUrl = String(meta.url);
+        }
+    }
+    catch {
+        // Fallback
+    }
+    if (!metaUrl) {
+        throw new Error("Could not determine base URL for local font loading.");
+    }
+    const path = new URL(fontFile, metaUrl).pathname;
+    const data = await loadFont(path);
+    return createFont("Inter", data, { weight });
+}

package/dist/index.d.ts

@@ -0,0 +1,18 @@
+export { absolute, badge, card, div, fluent, footer, grid, h, h1, h2, header, img, imgFromUrl, main, p, row, spacer, span, stack, svgFromContent, } from "./builder";
+export { fontRegistry } from "./font-registry";
+export { createFont, loadFont, loadFontFromUrl, loadInterFont, loadInterFromUrl, } from "./fonts";
+export { ogx, ogxToSVG } from "./ogx";
+export { render } from "./render-png";
+export { renderToSVG } from "./render-svg";
+export { parseTailwind } from "./tailwind";
+export { blogPreset, docsPreset, minimalPreset, presets, socialPreset, } from "./presets";
+export type { BlogPresetProps, DocsPresetProps, MinimalPresetProps, SocialPresetProps, } from "./presets";
+export { getPlatformDimensions } from "./targets";
+export type { Platform } from "./targets";
+export { snapshotCache } from "./cache";
+export { loadAsset, toDataUri } from "./utils/assets";
+export { calculateFittingFontSize } from "./utils/text";
+export type { FitTextOptions } from "./utils/text";
+export type { CSSProperties } from "./css";
+export type { FontConfig, OGXBaseConfig, OGXChildren, OGXConfig, OGXElement, OGXElementProps, Preset, PresetName, PresetProps, RenderOptions, } from "./types";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,OAAO,EACN,QAAQ,EACR,KAAK,EACL,IAAI,EACJ,GAAG,EACH,MAAM,EACN,MAAM,EACN,IAAI,EACJ,CAAC,EACD,EAAE,EACF,EAAE,EACF,MAAM,EACN,GAAG,EACH,UAAU,EACV,IAAI,EACJ,CAAC,EACD,GAAG,EACH,MAAM,EACN,IAAI,EACJ,KAAK,EACL,cAAc,GACd,MAAM,WAAW,CAAC;AAGnB,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EACN,UAAU,EACV,QAAQ,EACR,eAAe,EACf,aAAa,EACb,gBAAgB,GAChB,MAAM,SAAS,CAAC;AAGjB,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAG3C,OAAO,EACN,UAAU,EACV,UAAU,EACV,aAAa,EACb,OAAO,EACP,YAAY,GACZ,MAAM,WAAW,CAAC;AACnB,YAAY,EACX,eAAe,EACf,eAAe,EACf,kBAAkB,EAClB,iBAAiB,GACjB,MAAM,WAAW,CAAC;AAGnB,OAAO,EAAE,qBAAqB,EAAE,MAAM,WAAW,CAAC;AAClD,YAAY,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAG1C,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AACtD,OAAO,EAAE,wBAAwB,EAAE,MAAM,cAAc,CAAC;AACxD,YAAY,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAGnD,YAAY,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,YAAY,EACX,UAAU,EACV,aAAa,EACb,WAAW,EACX,SAAS,EACT,UAAU,EACV,eAAe,EACf,MAAM,EACN,UAAU,EACV,WAAW,EACX,aAAa,GACb,MAAM,SAAS,CAAC"}

package/dist/index.js

@@ -0,0 +1,19 @@
+// @ogxjs/core - Main exports
+// Builder - Element construction
+export { absolute, badge, card, div, fluent, footer, grid, h, h1, h2, header, img, imgFromUrl, main, p, row, spacer, span, stack, svgFromContent, } from "./builder";
+// Fonts - Loading and registration
+export { fontRegistry } from "./font-registry";
+export { createFont, loadFont, loadFontFromUrl, loadInterFont, loadInterFromUrl, } from "./fonts";
+// Rendering - SVG and PNG generation
+export { ogx, ogxToSVG } from "./ogx";
+export { render } from "./render-png";
+export { renderToSVG } from "./render-svg";
+export { parseTailwind } from "./tailwind";
+// Presets - Ready-to-use templates
+export { blogPreset, docsPreset, minimalPreset, presets, socialPreset, } from "./presets";
+// Platform - Target dimensions
+export { getPlatformDimensions } from "./targets";
+// Utilities
+export { snapshotCache } from "./cache";
+export { loadAsset, toDataUri } from "./utils/assets";
+export { calculateFittingFontSize } from "./utils/text";

package/dist/ogx.d.ts

@@ -0,0 +1,16 @@
+import type { OGXConfig, Platform, PresetName } from "./types";
+/**
+ * Generate an OG image using a preset
+ */
+export declare function ogx<T extends PresetName>(config: OGXConfig<T> & {
+    platform: Platform[];
+}): Promise<Record<Platform, Uint8Array>>;
+export declare function ogx<T extends PresetName>(config: OGXConfig<T>): Promise<Uint8Array>;
+/**
+ * Generate an OG image as SVG using a preset
+ */
+export declare function ogxToSVG<T extends PresetName>(config: OGXConfig<T> & {
+    platform: Platform[];
+}): Promise<Record<Platform, string>>;
+export declare function ogxToSVG<T extends PresetName>(config: OGXConfig<T>): Promise<string>;
+//# sourceMappingURL=ogx.d.ts.map

package/dist/ogx.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ogx.d.ts","sourceRoot":"","sources":["../src/ogx.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAc,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAG3E;;GAEG;AACH,wBAAsB,GAAG,CAAC,CAAC,SAAS,UAAU,EAC7C,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG;IAAE,QAAQ,EAAE,QAAQ,EAAE,CAAA;CAAE,GAC7C,OAAO,CAAC,MAAM,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC;AACzC,wBAAsB,GAAG,CAAC,CAAC,SAAS,UAAU,EAC7C,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC,GAClB,OAAO,CAAC,UAAU,CAAC,CAAC;AA4EvB;;GAEG;AACH,wBAAsB,QAAQ,CAAC,CAAC,SAAS,UAAU,EAClD,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG;IAAE,QAAQ,EAAE,QAAQ,EAAE,CAAA;CAAE,GAC7C,OAAO,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC;AACrC,wBAAsB,QAAQ,CAAC,CAAC,SAAS,UAAU,EAClD,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC,GAClB,OAAO,CAAC,MAAM,CAAC,CAAC"}

package/dist/ogx.js

@@ -0,0 +1,104 @@
+import { snapshotCache } from "./cache";
+import { fontRegistry } from "./font-registry";
+import { loadInterFont } from "./fonts";
+import { render } from "./render-png";
+import { renderToSVG } from "./render-svg";
+import { presets } from "./types";
+export async function ogx(config) {
+    const { preset, slots, options = {}, platform, fonts, theme, colorScheme, cache = true, ...props } = config;
+    // Handle batch rendering
+    if (Array.isArray(platform)) {
+        const results = await Promise.all(platform.map((p) => ogx({ ...config, platform: p })));
+        return platform.reduce((acc, p, i) => {
+            acc[p] = results[i];
+            return acc;
+        }, {});
+    }
+    // Check cache
+    const hash = cache ? snapshotCache.getHash(config) : null;
+    if (hash) {
+        const cached = snapshotCache.get(hash);
+        if (cached)
+            return cached;
+    }
+    const presetFn = presets[preset];
+    if (!presetFn) {
+        throw new Error(`Unknown preset: ${preset}`);
+    }
+    const element = presetFn({ ...props, slots });
+    // Resolve fonts (Registry > Explicit > Default Inter)
+    let resolvedFonts = fonts ?? [];
+    if (resolvedFonts.length === 0) {
+        resolvedFonts = fontRegistry.getFonts();
+    }
+    if (resolvedFonts.length === 0) {
+        resolvedFonts = [
+            await loadInterFont(300),
+            await loadInterFont(400),
+            await loadInterFont(500),
+            await loadInterFont(600),
+            await loadInterFont(700),
+        ];
+    }
+    const result = await render(element, {
+        ...options,
+        platform: platform ?? options.platform,
+        fonts: resolvedFonts,
+        theme: theme ?? options.theme,
+        colorScheme: colorScheme ?? options.colorScheme,
+    });
+    if (hash) {
+        snapshotCache.set(hash, result);
+    }
+    return result;
+}
+export async function ogxToSVG(config) {
+    const { preset, slots, options = {}, platform, fonts, theme, colorScheme, cache = true, ...props } = config;
+    if (Array.isArray(platform)) {
+        const results = await Promise.all(platform.map((p) => ogxToSVG({ ...config, platform: p })));
+        return platform.reduce((acc, p, i) => {
+            acc[p] = results[i];
+            return acc;
+        }, {});
+    }
+    // Check cache
+    const hash = cache
+        ? snapshotCache.getHash({ ...config, format: "svg" })
+        : null;
+    if (hash) {
+        const cached = snapshotCache.get(hash);
+        if (cached)
+            return cached;
+    }
+    const presetFn = presets[preset];
+    if (!presetFn) {
+        throw new Error(`Unknown preset: ${preset}`);
+    }
+    const element = presetFn({ ...props, slots });
+    // Resolve fonts
+    let resolvedFonts = fonts ?? [];
+    if (resolvedFonts.length === 0) {
+        resolvedFonts = fontRegistry.getFonts();
+    }
+    if (resolvedFonts.length === 0) {
+        resolvedFonts = [
+            await loadInterFont(300),
+            await loadInterFont(400),
+            await loadInterFont(500),
+            await loadInterFont(600),
+            await loadInterFont(700),
+        ];
+    }
+    const result = await renderToSVG(element, {
+        ...options,
+        platform: platform ?? options.platform,
+        fonts: resolvedFonts,
+        theme: theme ?? options.theme,
+        colorScheme: colorScheme ?? options.colorScheme,
+    });
+    // Store in cache
+    if (hash) {
+        snapshotCache.set(hash, result);
+    }
+    return result;
+}

package/dist/presets/blog.d.ts

@@ -0,0 +1,31 @@
+import type { OGXElement, Preset } from "../types";
+export interface BlogPresetProps {
+    /** Blog post title */
+    title: string;
+    /** Author name */
+    author?: string;
+    /** Author avatar URL */
+    authorAvatar?: string;
+    /** Publication date */
+    date?: string;
+    /** Category or tag */
+    category?: string;
+    /** Reading time */
+    readingTime?: string;
+    /** Cover image URL */
+    coverImage?: string;
+    /** Logo URL or base64 */
+    logo?: string;
+    /** Color scheme */
+    colorScheme?: "dark" | "light";
+    /** Custom slot overrides */
+    slots?: {
+        header?: OGXElement;
+        footer?: OGXElement;
+    };
+}
+/**
+ * Blog preset - ideal for blog posts
+ */
+export declare const blogPreset: Preset<BlogPresetProps>;
+//# sourceMappingURL=blog.d.ts.map

package/dist/presets/blog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"blog.d.ts","sourceRoot":"","sources":["../../src/presets/blog.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAEnD,MAAM,WAAW,eAAe;IAC9B,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,kBAAkB;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,wBAAwB;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uBAAuB;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sBAAsB;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sBAAsB;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yBAAyB;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC/B,4BAA4B;IAC5B,KAAK,CAAC,EAAE;QACN,MAAM,CAAC,EAAE,UAAU,CAAC;QACpB,MAAM,CAAC,EAAE,UAAU,CAAC;KACrB,CAAC;CACH;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,eAAe,CAqI9C,CAAC"}

package/dist/presets/blog.js

@@ -0,0 +1,98 @@
+import { absolute, div, h1, img, row, span, stack } from "../builder";
+/**
+ * Blog preset - ideal for blog posts
+ */
+export const blogPreset = (props) => {
+    const { title, author, authorAvatar, date, category, readingTime, coverImage, colorScheme = "dark", slots = {}, } = props;
+    const isDark = colorScheme === "dark";
+    return row([
+        "w-full",
+        "h-full",
+        isDark ? "bg-zinc-950" : "bg-zinc-50",
+        "overflow-hidden",
+        "relative",
+    ], [
+        // Background Accent
+        absolute([
+            isDark ? "bg-grid-white/5-64" : "bg-grid-zinc-900/5-64",
+            "inset-0",
+        ]),
+        absolute(["bg-grain/5"]), // Quality Boost: Dithering
+        // Left content
+        stack("flex-[3.5] p-20 justify-between gap-12 relative", [
+            // Header
+            slots.header ??
+                row("items-center justify-between", [
+                    category
+                        ? div([
+                            "px-4 py-1.5 rounded-full text-xs font-bold tracking-widest",
+                            isDark
+                                ? "bg-indigo-500/10 text-indigo-400 border border-indigo-500/20"
+                                : "bg-indigo-600/5 text-indigo-600 border border-indigo-600/10",
+                        ], category.toUpperCase())
+                        : span(""),
+                ]),
+            // Main content
+            stack("gap-6", [
+                h1([
+                    "text-7xl",
+                    "font-black",
+                    isDark ? "text-white" : "text-zinc-950",
+                    "leading-[1.12]",
+                    "tracking-tight", // Quality Boost
+                ], title),
+            ]),
+            // Footer with author info (Glass Card effect)
+            slots.footer ??
+                row(["items-center gap-5"], [
+                    authorAvatar
+                        ? img(authorAvatar, "w-16 h-16 rounded-full border-2 border-white/20 shadow-md")
+                        : null,
+                    stack("gap-1.5", [
+                        author
+                            ? span([
+                                "text-2xl",
+                                "font-bold",
+                                isDark ? "text-white" : "text-zinc-950",
+                                "tracking-tight",
+                            ], author)
+                            : null,
+                        span([
+                            "text-lg",
+                            "font-medium",
+                            isDark ? "text-zinc-400" : "text-zinc-500",
+                        ], [date, readingTime].filter(Boolean).join(" · ")),
+                    ]),
+                ]),
+        ]),
+        // Right side cover image
+        coverImage
+            ? row("flex-[2] h-full overflow-hidden relative", [
+                // Gradient transition from content to image
+                absolute([
+                    "inset-0 z-10",
+                    isDark
+                        ? "bg-gradient-to-r from-zinc-950 via-zinc-950/20 to-transparent"
+                        : "bg-gradient-to-r from-zinc-50 via-zinc-50/20 to-transparent",
+                ]),
+                img(coverImage, "w-full h-full object-cover"),
+            ])
+            : // Decorative background for no-image blogs
+                row([
+                    "flex-[2]",
+                    "h-full",
+                    isDark ? "bg-zinc-900" : "bg-zinc-100",
+                    "items-center",
+                    "justify-center",
+                    "bg-grid-zinc-500/5-24",
+                    "relative",
+                ], [
+                    absolute([
+                        isDark
+                            ? "bg-gradient-to-r from-zinc-950 to-transparent"
+                            : "bg-gradient-to-r from-zinc-50 to-transparent",
+                        "inset-0",
+                    ]),
+                ]),
+    ]);
+};

package/dist/presets/docs.d.ts

@@ -0,0 +1,23 @@
+import type { OGXElement, Preset } from "../types";
+export interface DocsPresetProps {
+    /** Page title */
+    title: string;
+    /** Page description */
+    description?: string;
+    /** Logo URL or base64 */
+    logo?: string;
+    /** Site name */
+    siteName?: string;
+    /** Color scheme */
+    colorScheme?: "dark" | "light";
+    /** Custom slot overrides */
+    slots?: {
+        header?: OGXElement;
+        footer?: OGXElement;
+    };
+}
+/**
+ * Docs preset - ideal for documentation sites
+ */
+export declare const docsPreset: Preset<DocsPresetProps>;
+//# sourceMappingURL=docs.d.ts.map

package/dist/presets/docs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"docs.d.ts","sourceRoot":"","sources":["../../src/presets/docs.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAEnD,MAAM,WAAW,eAAe;IAC9B,iBAAiB;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yBAAyB;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gBAAgB;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC/B,4BAA4B;IAC5B,KAAK,CAAC,EAAE;QACN,MAAM,CAAC,EAAE,UAAU,CAAC;QACpB,MAAM,CAAC,EAAE,UAAU,CAAC;KACrB,CAAC;CACH;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,eAAe,CAuH9C,CAAC"}

package/dist/presets/docs.js

@@ -0,0 +1,87 @@
+import { absolute, div, h1, img, p, row, span, stack } from "../builder";
+/**
+ * Docs preset - ideal for documentation sites
+ */
+export const docsPreset = (props) => {
+    const { title, description, logo, siteName, colorScheme = "dark", slots = {}, } = props;
+    const isDark = colorScheme === "dark";
+    return stack([
+        "w-full",
+        "h-full",
+        isDark ? "bg-zinc-950" : "bg-white",
+        "p-20",
+        "relative",
+    ], [
+        // Background Accent (Subtle Grid + Glow)
+        absolute([
+            isDark ? "bg-grid-white/5-64" : "bg-grid-zinc-900/5-64",
+            "inset-0",
+        ]),
+        absolute([
+            "inset-0",
+            isDark
+                ? "bg-gradient-to-tr from-zinc-950 via-transparent to-indigo-500/10"
+                : "bg-gradient-to-tr from-white via-transparent to-indigo-500/5",
+        ]),
+        absolute(["bg-grain/10"]), // Quality Boost: Dithering
+        // Content Layout
+        stack("flex-1 gap-12 relative", [
+            // Header
+            slots.header ??
+                row("items-center justify-between", [
+                    row("items-center gap-4", [
+                        logo ? img(logo, "w-10 h-10 rounded-lg shadow-sm") : null,
+                        siteName
+                            ? span([
+                                "text-2xl",
+                                "font-bold",
+                                isDark ? "text-white" : "text-zinc-900",
+                                "tracking-tight",
+                            ], siteName)
+                            : null,
+                    ]),
+                    div([
+                        "px-5 py-1 rounded-full border text-xs font-semibold",
+                        isDark
+                            ? "bg-white/5 border-white/10 text-zinc-400"
+                            : "bg-zinc-100 border-zinc-200 text-zinc-600",
+                    ], "DOCUMENTATION"),
+                ]),
+            // Main content
+            stack("flex-1 justify-center gap-8", [
+                h1([
+                    "text-8xl",
+                    "font-black",
+                    isDark ? "text-white" : "text-zinc-950",
+                    "leading-[1.1]",
+                    "tracking-tight", // Quality Boost
+                ], title),
+                description
+                    ? p([
+                        "text-4xl",
+                        isDark ? "text-zinc-400" : "text-zinc-500",
+                        "max-w-[900px]",
+                        "leading-relaxed",
+                        "font-semibold",
+                    ], description)
+                    : null,
+            ]),
+            // Footer / Bottom Indicator
+            slots.footer ??
+                row("items-center gap-2", [
+                    div([
+                        "h-1 w-12 rounded-full",
+                        isDark ? "bg-indigo-500" : "bg-indigo-600",
+                    ], ""),
+                    div([
+                        "h-1 w-1.5 rounded-full",
+                        isDark ? "bg-zinc-800" : "bg-zinc-200",
+                    ], ""),
+                    div([
+                        "h-1 w-1.5 rounded-full",
+                        isDark ? "bg-zinc-800" : "bg-zinc-200",
+                    ], ""),
+                ]),
+        ]),
+    ]);
+};

package/dist/presets/index.d.ts

@@ -0,0 +1,20 @@
+import { type BlogPresetProps, blogPreset } from "./blog";
+import { type DocsPresetProps, docsPreset } from "./docs";
+import { type MinimalPresetProps, minimalPreset } from "./minimal";
+import { type SocialPresetProps, socialPreset } from "./social";
+export declare const presets: {
+    readonly docs: import("..").Preset<DocsPresetProps>;
+    readonly blog: import("..").Preset<BlogPresetProps>;
+    readonly minimal: import("..").Preset<MinimalPresetProps>;
+    readonly social: import("..").Preset<SocialPresetProps>;
+};
+export type PresetName = keyof typeof presets;
+export interface PresetProps {
+    docs: DocsPresetProps;
+    blog: BlogPresetProps;
+    minimal: MinimalPresetProps;
+    social: SocialPresetProps;
+}
+export { docsPreset, blogPreset, minimalPreset, socialPreset };
+export type { DocsPresetProps, BlogPresetProps, MinimalPresetProps, SocialPresetProps, };
+//# sourceMappingURL=index.d.ts.map

package/dist/presets/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/presets/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,eAAe,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAC1D,OAAO,EAAE,KAAK,eAAe,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAC1D,OAAO,EAAE,KAAK,kBAAkB,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AACnE,OAAO,EAAE,KAAK,iBAAiB,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAEhE,eAAO,MAAM,OAAO;;;;;CAKV,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,OAAO,CAAC;AAE9C,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,eAAe,CAAC;IACtB,IAAI,EAAE,eAAe,CAAC;IACtB,OAAO,EAAE,kBAAkB,CAAC;IAC5B,MAAM,EAAE,iBAAiB,CAAC;CAC3B;AAED,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,aAAa,EAAE,YAAY,EAAE,CAAC;AAC/D,YAAY,EACV,eAAe,EACf,eAAe,EACf,kBAAkB,EAClB,iBAAiB,GAClB,CAAC"}

package/dist/presets/index.js

@@ -0,0 +1,11 @@
+import { blogPreset } from "./blog";
+import { docsPreset } from "./docs";
+import { minimalPreset } from "./minimal";
+import { socialPreset } from "./social";
+export const presets = {
+    docs: docsPreset,
+    blog: blogPreset,
+    minimal: minimalPreset,
+    social: socialPreset,
+};
+export { docsPreset, blogPreset, minimalPreset, socialPreset };