@ogxjs/core 0.1.0

package/dist/presets/minimal.d.ts

@@ -0,0 +1,20 @@
+import type { OGXElement, Preset } from "../types";
+export interface MinimalPresetProps {
+    /** Main text */
+    title: string;
+    /** Secondary text */
+    subtitle?: string;
+    /** Background color (Tailwind class or hex) */
+    background?: string;
+    /** Text color (Tailwind class or hex) */
+    textColor?: string;
+    /** Custom slot overrides */
+    slots?: {
+        content?: OGXElement;
+    };
+}
+/**
+ * Minimal preset - ultra clean, just text
+ */
+export declare const minimalPreset: Preset<MinimalPresetProps>;
+//# sourceMappingURL=minimal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"minimal.d.ts","sourceRoot":"","sources":["../../src/presets/minimal.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAEnD,MAAM,WAAW,kBAAkB;IACjC,gBAAgB;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,qBAAqB;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+CAA+C;IAC/C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4BAA4B;IAC5B,KAAK,CAAC,EAAE;QACN,OAAO,CAAC,EAAE,UAAU,CAAC;KACtB,CAAC;CACH;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,kBAAkB,CAqEpD,CAAC"}

package/dist/presets/minimal.js

@@ -0,0 +1,53 @@
+import { absolute, h1, p, stack } from "../builder";
+/**
+ * Minimal preset - ultra clean, just text
+ */
+export const minimalPreset = (props) => {
+    const { title, subtitle, background = "bg-zinc-950", textColor = "text-white", slots = {}, } = props;
+    const bgClass = background.startsWith("bg-")
+        ? background
+        : `bg-[${background}]`;
+    const textClass = textColor.startsWith("text-")
+        ? textColor
+        : `text-[${textColor}]`;
+    return stack([
+        "w-full",
+        "h-full",
+        "items-center",
+        "justify-center",
+        "p-24",
+        "relative",
+        bgClass,
+    ], [
+        // Subtle Background Texture
+        absolute([
+            "inset-0 opacity-[0.03]",
+            background.includes("light") || background === "bg-white"
+                ? "bg-grid-black-32"
+                : "bg-grid-white-32",
+        ]),
+        absolute(["bg-grain/5"]), // Quality Boost: Dithering
+        // Content
+        stack("items-center justify-center relative", slots.content ?? [
+            h1([
+                "text-9xl",
+                "font-black",
+                "text-center",
+                "tracking-tightest", // Quality Boost
+                "leading-none",
+                textClass,
+            ], title),
+            subtitle
+                ? p([
+                    "text-3xl",
+                    "text-center",
+                    "mt-10",
+                    "opacity-40",
+                    "font-medium",
+                    "tracking-wide",
+                    textClass,
+                ], subtitle.toUpperCase())
+                : null,
+        ]),
+    ]);
+};

package/dist/presets/social.d.ts

@@ -0,0 +1,29 @@
+import type { OGXElement, Preset } from "../types";
+export interface SocialPresetProps {
+    /** Main title or headline */
+    title: string;
+    /** Handle or username */
+    handle?: string;
+    /** Avatar URL */
+    avatar?: string;
+    /** Brand/app name */
+    brand?: string;
+    /** Brand logo URL */
+    logo?: string;
+    /** Gradient direction for background */
+    gradient?: "to-r" | "to-br" | "to-b" | "to-bl";
+    /** From color (hex) */
+    fromColor?: string;
+    /** To color (hex) */
+    toColor?: string;
+    /** Custom slot overrides */
+    slots?: {
+        header?: OGXElement;
+        footer?: OGXElement;
+    };
+}
+/**
+ * Social preset - card-style for social media
+ */
+export declare const socialPreset: Preset<SocialPresetProps>;
+//# sourceMappingURL=social.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"social.d.ts","sourceRoot":"","sources":["../../src/presets/social.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAEnD,MAAM,WAAW,iBAAiB;IAChC,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,yBAAyB;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iBAAiB;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wCAAwC;IACxC,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;IAC/C,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,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,YAAY,EAAE,MAAM,CAAC,iBAAiB,CAkGlD,CAAC"}

package/dist/presets/social.js

@@ -0,0 +1,66 @@
+import { absolute, h1, img, row, span, stack } from "../builder";
+/**
+ * Social preset - card-style for social media
+ */
+export const socialPreset = (props) => {
+    const { title, handle, avatar, brand, logo, gradient = "to-br", fromColor = "oklch(65% 0.25 260)", // Vibrant Indigo-ish
+    toColor = "oklch(60% 0.3 300)", // Vibrant Purple-ish
+    slots = {}, } = props;
+    const gradientStyle = `linear-gradient(${gradient === "to-r"
+        ? "90deg"
+        : gradient === "to-br"
+            ? "135deg"
+            : gradient === "to-b"
+                ? "180deg"
+                : "225deg"}, ${fromColor}, ${toColor})`;
+    return stack(["w-full", "h-full", "p-20", "relative", "overflow-hidden"], [
+        // Background Gradient
+        absolute("", null, { style: { backgroundImage: gradientStyle } }),
+        // Subtle Background Texture (Grain/Noise-like mesh)
+        absolute(["inset-0 opacity-20", "bg-grid-white/5-32"]),
+        absolute(["bg-grain/15"]), // Quality Boost: Dithering
+        // Content Layout
+        stack("flex-1 justify-between relative", [
+            // Header
+            slots.header ??
+                row("items-center justify-between", [
+                    row("items-center gap-4", [
+                        logo ? img(logo, "w-12 h-12 rounded-xl bg-zinc-950") : null,
+                        brand
+                            ? span(["text-2xl font-black text-white tracking-tighter"], brand.toUpperCase())
+                            : null,
+                    ]),
+                    // Subtle platform indicator
+                    span(["text-white/30 text-xs font-bold tracking-widest"], "SOCIAL CARD"),
+                ]),
+            // Main content
+            stack("gap-6 overflow-hidden", [
+                h1([
+                    "text-7xl",
+                    "font-black",
+                    "text-white",
+                    "leading-[1.05]",
+                    "tracking-tight", // Quality Boost
+                ], title),
+            ]),
+            // Footer with user info (Clean Glass Badge)
+            slots.footer ??
+                (handle || avatar
+                    ? row([
+                        "items-center gap-4 p-3 pr-6 rounded-full self-start shadow-premium",
+                        "bg-black/10 border border-white/10 backdrop-blur-md",
+                    ], [
+                        avatar
+                            ? img(avatar, "w-10 h-10 rounded-full border border-white/20 shadow-sm")
+                            : null,
+                        handle
+                            ? span([
+                                "text-xl font-bold text-white/90 tracking-tight",
+                                "w-fit truncate shrink-0",
+                            ], handle)
+                            : null,
+                    ])
+                    : null),
+        ]),
+    ]);
+};

package/dist/render-png.d.ts

@@ -0,0 +1,7 @@
+import type { OGXElement, RenderOptions } from "./types";
+/**
+ * Render an OGX element to PNG image
+ * Node.js only: uses @resvg/resvg-js for SVG → PNG conversion
+ */
+export declare function render(element: OGXElement, options?: RenderOptions): Promise<Uint8Array>;
+//# sourceMappingURL=render-png.d.ts.map

package/dist/render-png.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"render-png.d.ts","sourceRoot":"","sources":["../src/render-png.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAGzD;;;GAGG;AACH,wBAAsB,MAAM,CAC3B,OAAO,EAAE,UAAU,EACnB,OAAO,GAAE,aAAkB,GACzB,OAAO,CAAC,UAAU,CAAC,CAiBrB"}

package/dist/render-png.js

@@ -0,0 +1,19 @@
+import { renderToSVG } from "./render-svg";
+/**
+ * Render an OGX element to PNG image
+ * Node.js only: uses @resvg/resvg-js for SVG → PNG conversion
+ */
+export async function render(element, options = {}) {
+    const svg = await renderToSVG(element, options);
+    const width = options.width ?? 1200;
+    const resvgPkg = "@resvg/resvg-js";
+    const { Resvg } = await import(resvgPkg);
+    const resvg = new Resvg(svg, {
+        fitTo: {
+            mode: "width",
+            value: width,
+        },
+    });
+    const pngData = resvg.render();
+    return pngData.asPng();
+}

package/dist/render-svg.d.ts

@@ -0,0 +1,7 @@
+import type { OGXElement, RenderOptions } from "./types";
+/**
+ * Render an OGX element to SVG string
+ * Browser-safe: uses only Satori (no Node.js dependencies)
+ */
+export declare function renderToSVG(element: OGXElement, options?: RenderOptions): Promise<string>;
+//# sourceMappingURL=render-svg.d.ts.map

package/dist/render-svg.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"render-svg.d.ts","sourceRoot":"","sources":["../src/render-svg.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAEX,UAAU,EACV,aAAa,EAEb,MAAM,SAAS,CAAC;AAKjB;;;GAGG;AACH,wBAAsB,WAAW,CAChC,OAAO,EAAE,UAAU,EACnB,OAAO,GAAE,aAAkB,GACzB,OAAO,CAAC,MAAM,CAAC,CA2CjB"}

package/dist/render-svg.js

@@ -0,0 +1,123 @@
+import satori from "satori";
+import { fontRegistry } from "./font-registry";
+import { parseTailwind } from "./tailwind";
+import { getPlatformDimensions } from "./targets";
+const DEFAULT_WIDTH = 1200;
+const DEFAULT_HEIGHT = 630;
+/**
+ * Render an OGX element to SVG string
+ * Browser-safe: uses only Satori (no Node.js dependencies)
+ */
+export async function renderToSVG(element, options = {}) {
+    const platformDims = options.platform
+        ? getPlatformDimensions(options.platform)
+        : null;
+    const { width = platformDims?.width ?? DEFAULT_WIDTH, height = platformDims?.height ?? DEFAULT_HEIGHT, debug = false, } = options;
+    let resolvedFonts = options.fonts ?? [];
+    if (resolvedFonts.length === 0) {
+        resolvedFonts = fontRegistry.getFonts();
+    }
+    if (resolvedFonts.length === 0) {
+        const { loadInterFromUrl } = await import("./fonts");
+        resolvedFonts = [
+            await loadInterFromUrl(300),
+            await loadInterFromUrl(400),
+            await loadInterFromUrl(500),
+            await loadInterFromUrl(600),
+            await loadInterFromUrl(700),
+        ];
+    }
+    const fullOptions = {
+        width,
+        height,
+        fonts: resolvedFonts,
+        debug,
+        theme: options.theme,
+        colorScheme: options.colorScheme,
+    };
+    const transformedElement = transformElement(element, debug, fullOptions);
+    return await satori(transformedElement, {
+        width,
+        height,
+        fonts: resolvedFonts.map(fontToSatoriFont),
+        debug,
+    });
+}
+/**
+ * Transform OGX element tree to Satori-compatible format
+ * Processes `tw` props into inline styles
+ */
+function transformElement(element, debug, options) {
+    if (element === null || element === undefined) {
+        return null;
+    }
+    if (typeof element === "string" || typeof element === "number") {
+        return element;
+    }
+    const { tw, style, children, ...restProps } = element.props;
+    let mergedStyle;
+    if (tw) {
+        const twStyles = parseTailwind(tw, options.theme, options.colorScheme);
+        mergedStyle = style ? { ...twStyles, ...style } : twStyles;
+    }
+    else {
+        mergedStyle = style ? { ...style } : {};
+    }
+    // Default resets for Satori (only if not already set by Tailwind)
+    if (mergedStyle.margin === undefined)
+        mergedStyle.margin = 0;
+    if (mergedStyle.padding === undefined &&
+        mergedStyle.paddingTop === undefined &&
+        mergedStyle.paddingBottom === undefined &&
+        mergedStyle.paddingLeft === undefined &&
+        mergedStyle.paddingRight === undefined) {
+        mergedStyle.padding = 0;
+    }
+    // Apply default fontFamily if not specified
+    if (!mergedStyle.fontFamily) {
+        mergedStyle.fontFamily = "Inter";
+    }
+    // h1/p tags have default margins in many browsers, reset them
+    if (element.type === "h1" || element.type === "p") {
+        mergedStyle.margin = 0;
+    }
+    // Add debug border if enabled
+    if (debug) {
+        mergedStyle.border = "1px solid rgba(255, 0, 0, 0.3)";
+    }
+    // Transform children recursively
+    let transformedChildren = null;
+    if (children !== null && children !== undefined) {
+        if (Array.isArray(children)) {
+            const filtered = children.filter((c) => c !== null && c !== undefined);
+            if (filtered.length === 1) {
+                transformedChildren = transformElement(filtered[0], debug, options);
+            }
+            else {
+                transformedChildren = filtered.map((c) => transformElement(c, debug, options));
+            }
+        }
+        else {
+            transformedChildren = transformElement(children, debug, options);
+        }
+    }
+    return {
+        type: element.type,
+        props: {
+            ...restProps,
+            style: mergedStyle,
+            children: transformedChildren,
+        },
+    };
+}
+/**
+ * Convert OGX FontConfig to Satori font format
+ */
+function fontToSatoriFont(font) {
+    return {
+        name: font.name,
+        data: font.data,
+        weight: font.weight ?? 400,
+        style: font.style ?? "normal",
+    };
+}

package/dist/render.d.ts

@@ -0,0 +1,10 @@
+import type { OGXElement, RenderOptions } from "./types";
+/**
+ * Render an OGX element to PNG image
+ */
+export declare function render(element: OGXElement, options?: RenderOptions): Promise<Uint8Array>;
+/**
+ * Render an OGX element to SVG string
+ */
+export declare function renderToSVG(element: OGXElement, options?: RenderOptions): Promise<string>;
+//# sourceMappingURL=render.d.ts.map

package/dist/render.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../src/render.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAEX,UAAU,EACV,aAAa,EAEb,MAAM,SAAS,CAAC;AAKjB;;GAEG;AACH,wBAAsB,MAAM,CAC3B,OAAO,EAAE,UAAU,EACnB,OAAO,GAAE,aAAkB,GACzB,OAAO,CAAC,UAAU,CAAC,CA6DrB;AAED;;GAEG;AACH,wBAAsB,WAAW,CAChC,OAAO,EAAE,UAAU,EACnB,OAAO,GAAE,aAAkB,GACzB,OAAO,CAAC,MAAM,CAAC,CA6CjB"}

package/dist/render.js

@@ -0,0 +1,180 @@
+import satori from "satori";
+import { fontRegistry } from "./font-registry";
+import { parseTailwind } from "./tailwind";
+import { getPlatformDimensions } from "./targets";
+const DEFAULT_WIDTH = 1200;
+const DEFAULT_HEIGHT = 630;
+/**
+ * Render an OGX element to PNG image
+ */
+export async function render(element, options = {}) {
+    // Resolve platform dimensions
+    const platformDims = options.platform
+        ? getPlatformDimensions(options.platform)
+        : null;
+    const { width = platformDims?.width ?? DEFAULT_WIDTH, height = platformDims?.height ?? DEFAULT_HEIGHT, debug = false, } = options;
+    // Resolve fonts
+    let resolvedFonts = options.fonts ?? [];
+    if (resolvedFonts.length === 0) {
+        resolvedFonts = fontRegistry.getFonts();
+    }
+    if (resolvedFonts.length === 0) {
+        const { loadInterFromUrl } = await import("./fonts");
+        resolvedFonts = [
+            await loadInterFromUrl(300),
+            await loadInterFromUrl(400),
+            await loadInterFromUrl(500),
+            await loadInterFromUrl(600),
+            await loadInterFromUrl(700),
+        ];
+    }
+    const fullOptions = {
+        width,
+        height,
+        fonts: resolvedFonts,
+        debug,
+        theme: options.theme,
+        colorScheme: options.colorScheme,
+    };
+    // Transform the element tree to process tw props
+    const transformedElement = transformElement(element, debug, fullOptions);
+    // Generate SVG with Satori
+    const svg = await satori(transformedElement, {
+        width,
+        height,
+        fonts: resolvedFonts.map(fontToSatoriFont),
+        debug,
+    });
+    // Dynamic import resvg to avoid bundler resolution issues with native binaries
+    const resvgPkg = "@resvg/resvg-js";
+    const { Resvg } = await import(resvgPkg);
+    // Convert SVG to PNG with resvg
+    const resvg = new Resvg(svg, {
+        fitTo: {
+            mode: "width",
+            value: width,
+        },
+    });
+    const pngData = resvg.render();
+    return pngData.asPng();
+}
+/**
+ * Render an OGX element to SVG string
+ */
+export async function renderToSVG(element, options = {}) {
+    // Resolve platform dimensions
+    const platformDims = options.platform
+        ? getPlatformDimensions(options.platform)
+        : null;
+    const { width = platformDims?.width ?? DEFAULT_WIDTH, height = platformDims?.height ?? DEFAULT_HEIGHT, debug = false, } = options;
+    // Resolve fonts
+    let resolvedFonts = options.fonts ?? [];
+    if (resolvedFonts.length === 0) {
+        resolvedFonts = fontRegistry.getFonts();
+    }
+    if (resolvedFonts.length === 0) {
+        const { loadInterFromUrl } = await import("./fonts");
+        resolvedFonts = [
+            await loadInterFromUrl(300),
+            await loadInterFromUrl(400),
+            await loadInterFromUrl(500),
+            await loadInterFromUrl(600),
+            await loadInterFromUrl(700),
+        ];
+    }
+    const fullOptions = {
+        width,
+        height,
+        fonts: resolvedFonts,
+        debug,
+        theme: options.theme,
+        colorScheme: options.colorScheme,
+    };
+    const transformedElement = transformElement(element, debug, fullOptions);
+    return await satori(transformedElement, {
+        width,
+        height,
+        fonts: resolvedFonts.map(fontToSatoriFont),
+        debug,
+    });
+}
+/**
+ * Transform OGX element tree to Satori-compatible format
+ * Processes `tw` props into inline styles
+ */
+function transformElement(element, debug, options) {
+    // Handle primitives
+    if (element === null || element === undefined) {
+        return null;
+    }
+    if (typeof element === "string" || typeof element === "number") {
+        return element;
+    }
+    const { tw, style, children, ...restProps } = element.props;
+    // Parse Tailwind classes and merge with inline styles
+    let mergedStyle;
+    if (tw) {
+        const twStyles = parseTailwind(tw, options.theme, options.colorScheme);
+        mergedStyle = style ? { ...twStyles, ...style } : twStyles;
+    }
+    else {
+        mergedStyle = style ? { ...style } : {};
+    }
+    // Default resets for Satori (only if not already set by Tailwind)
+    if (mergedStyle.margin === undefined)
+        mergedStyle.margin = 0;
+    if (mergedStyle.padding === undefined &&
+        mergedStyle.paddingTop === undefined &&
+        mergedStyle.paddingBottom === undefined &&
+        mergedStyle.paddingLeft === undefined &&
+        mergedStyle.paddingRight === undefined) {
+        mergedStyle.padding = 0;
+    }
+    // Apply default fontFamily if not specified
+    if (!mergedStyle.fontFamily) {
+        mergedStyle.fontFamily = "Inter";
+    }
+    // h1/p tags have default margins in many browsers, reset them
+    if (element.type === "h1" || element.type === "p") {
+        mergedStyle.margin = 0;
+    }
+    // Add debug border if enabled
+    if (debug) {
+        mergedStyle.border = "1px solid rgba(255, 0, 0, 0.3)";
+    }
+    // Transform children recursively
+    let transformedChildren = null;
+    if (children !== null && children !== undefined) {
+        if (Array.isArray(children)) {
+            const filtered = children.filter((c) => c !== null && c !== undefined);
+            if (filtered.length === 1) {
+                transformedChildren = transformElement(filtered[0], debug, options);
+            }
+            else {
+                transformedChildren = filtered.map((c) => transformElement(c, debug, options));
+            }
+        }
+        else {
+            transformedChildren = transformElement(children, debug, options);
+        }
+    }
+    return {
+        type: element.type,
+        props: {
+            ...restProps,
+            style: mergedStyle,
+            children: transformedChildren,
+        },
+    };
+}
+/**
+ * Convert OGX FontConfig to Satori font format
+ */
+function fontToSatoriFont(font) {
+    return {
+        name: font.name,
+        data: font.data,
+        weight: font.weight ?? 400,
+        style: font.style ?? "normal",
+    };
+}

package/dist/tailwind/colors.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Tailwind color palette
+ * https://tailwindcss.com/docs/customizing-colors
+ */
+export declare const colors: Record<string, string>;
+//# sourceMappingURL=colors.d.ts.map

package/dist/tailwind/colors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/tailwind/colors.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CA2SzC,CAAC"}