@ogxjs/core 0.1.0

package/README.md

@@ -0,0 +1,102 @@
+# @ogxjs/core
+
+> Tailwind-first OG image generator powered by Satori
+
+Generate beautiful Open Graph images using Tailwind CSS classes and an ergonomic builder API. Built for Node.js, also compatible with Bun and Deno.
+
+## Installation
+
+```bash
+npm install @ogxjs/core
+# or
+bun add @ogxjs/core
+```
+
+## Quick Start
+
+```typescript
+import { ogx } from "@ogxjs/core";
+import { writeFile } from "node:fs/promises";
+
+// Generate a PNG using a preset
+const image = await ogx({
+  preset: "minimal",
+  title: "Hello, World!",
+  subtitle: "This is my OG image",
+});
+
+// Save to file
+await writeFile("og.png", image);
+```
+
+## Builder API
+
+Create custom layouts with an ergonomic builder:
+
+```typescript
+import { stack, div, span, render } from "@ogxjs/core";
+
+const element = stack("w-full h-full bg-gradient-to-br from-blue-500 to-purple-600 p-20", [
+  div("bg-white rounded-2xl p-12 shadow-2xl", [
+    span("text-6xl font-bold text-gray-900", "Custom Layout"),
+    span("text-2xl text-gray-600 mt-4", "Built with Tailwind classes"),
+  ]),
+]);
+
+const image = await render(element);
+```
+
+## Presets
+
+Built-in presets for common use cases:
+
+- `minimal` - Clean and simple
+- `blog` - Blog post headers
+- `docs` - Documentation pages
+- `social` - Social media cards
+
+```typescript
+await ogx({
+  preset: "blog",
+  title: "Building with OGX",
+  description: "Learn how to create dynamic OG images",
+  author: "John Doe",
+  date: "Dec 28, 2024",
+});
+```
+
+## Custom Fonts
+
+```typescript
+import { loadInterFont, fontRegistry } from "@ogxjs/core";
+
+// Load and register fonts
+const inter = await loadInterFont(400);
+fontRegistry.register(inter);
+
+// Use in your images
+await ogx({
+  preset: "minimal",
+  title: "Custom Font",
+  fonts: fontRegistry.getFonts(),
+});
+```
+
+## Browser-safe SVG Rendering
+
+```typescript
+import { renderToSVG } from "@ogxjs/core/svg";
+
+// Render to SVG (no Node.js dependencies)
+const svg = await renderToSVG(element);
+```
+
+## Exports
+
+- `@ogxjs/core` - Main package (PNG rendering, presets, builder)
+- `@ogxjs/core/svg` - Browser-safe SVG rendering
+- `@ogxjs/core/png` - Node.js PNG rendering
+
+## License
+
+MIT

package/dist/builder.d.ts

@@ -0,0 +1,75 @@
+import type { OGXChildren, OGXElement, OGXElementProps, TailwindSpacing, TailwindUtility } from "./types";
+/**
+ * Universal element factory (h/createElement style)
+ */
+export declare function h(type: string, props?: OGXElementProps | string | TailwindUtility[], children?: OGXChildren): OGXElement;
+/** Create a div element */
+export declare const div: (tw?: TailwindUtility | TailwindUtility[], children?: OGXChildren, props?: Omit<OGXElementProps, "tw" | "children">) => OGXElement;
+/** Create a span element */
+export declare const span: (tw?: TailwindUtility | TailwindUtility[], children?: OGXChildren, props?: Omit<OGXElementProps, "tw" | "children">) => OGXElement;
+/** Create an img element */
+export declare const img: (src: string, tw?: TailwindUtility | TailwindUtility[], props?: Omit<OGXElementProps, "tw" | "src">) => OGXElement;
+/** Create a vertical stack (flex-col) */
+export declare const stack: (tw?: TailwindUtility | TailwindUtility[], children?: OGXChildren, props?: Omit<OGXElementProps, "tw" | "children">) => OGXElement;
+/** Create a horizontal row (flex-row) */
+export declare const row: (tw?: TailwindUtility | TailwindUtility[], children?: OGXChildren, props?: Omit<OGXElementProps, "tw" | "children">) => OGXElement;
+/** Create an absolute positioned overlay */
+export declare const absolute: (tw?: TailwindUtility | TailwindUtility[], children?: OGXChildren, props?: Omit<OGXElementProps, "tw" | "children">) => OGXElement;
+/** Create a grid-like layout (flex-row with wrap) */
+export declare const grid: (tw?: TailwindUtility | TailwindUtility[], children?: OGXChildren, props?: Omit<OGXElementProps, "tw" | "children">) => OGXElement;
+/** Create a semantic header */
+export declare const header: (tw?: TailwindUtility | TailwindUtility[], children?: OGXChildren, props?: Omit<OGXElementProps, "tw" | "children">) => OGXElement;
+/** Create a semantic footer */
+export declare const footer: (tw?: TailwindUtility | TailwindUtility[], children?: OGXChildren, props?: Omit<OGXElementProps, "tw" | "children">) => OGXElement;
+/** Create a semantic main content area */
+export declare const main: (tw?: TailwindUtility | TailwindUtility[], children?: OGXChildren, props?: Omit<OGXElementProps, "tw" | "children">) => OGXElement;
+/** Create a spacer (flex-1 or custom size) */
+export declare const spacer: (size?: TailwindSpacing | number, tw?: TailwindUtility | TailwindUtility[]) => OGXElement;
+/**
+ * Semantic Typography
+ */
+export declare const h1: (tw?: TailwindUtility | TailwindUtility[], children?: OGXChildren) => OGXElement;
+export declare const h2: (tw?: TailwindUtility | TailwindUtility[], children?: OGXChildren) => OGXElement;
+export declare const p: (tw?: TailwindUtility | TailwindUtility[], children?: OGXChildren) => OGXElement;
+/**
+ * Fluent Builder API (Chainable)
+ */
+export declare class FluentBuilder {
+    private _element;
+    constructor(element: OGXElement);
+    get element(): OGXElement;
+    gap(val: TailwindSpacing): this;
+    padding(val: TailwindSpacing): this;
+    px(val: TailwindSpacing): this;
+    py(val: TailwindSpacing): this;
+    margin(val: TailwindSpacing): this;
+    mt(val: TailwindSpacing): this;
+    rounded(val?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full"): this;
+    center(): this;
+    itemsCenter(): this;
+    justifyCenter(): this;
+    justifyBetween(): this;
+    bg(color: string): this;
+    text(color: string): this;
+    border(color?: string): this;
+    shadow(val?: "sm" | "md" | "lg" | "xl" | "2xl"): this;
+    opacity(val: string): this;
+    private _add;
+}
+/** Wrap an element for fluent chaining */
+export declare const fluent: (el: OGXElement) => FluentBuilder;
+/**
+ * High-level Primitives
+ */
+/** Create a card container */
+export declare const card: (tw?: TailwindUtility | TailwindUtility[], children?: OGXChildren) => OGXElement;
+/** Create a badge/pill */
+export declare const badge: (text: string, color?: "blue" | "green" | "purple" | "slate") => OGXElement;
+/**
+ * External Asset Helpers
+ */
+/** Helper to use a raw SVG string directly in img */
+export declare function svgFromContent(svg: string): string;
+/** Proxy/Alias for URLs */
+export declare function imgFromUrl(url: string): string;
+//# sourceMappingURL=builder.d.ts.map

package/dist/builder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"builder.d.ts","sourceRoot":"","sources":["../src/builder.ts"],"names":[],"mappings":"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"}

package/dist/builder.js

@@ -0,0 +1,243 @@
+/**
+ * Universal element factory (h/createElement style)
+ */
+export function h(type, props = {}, children) {
+    // Shorthand: h('div', 'bg-blue-500', 'Hello')
+    if (typeof props === "string" || Array.isArray(props)) {
+        return {
+            type,
+            props: {
+                tw: normalizeTW(props),
+                children,
+            },
+        };
+    }
+    return {
+        type,
+        props: {
+            ...props,
+            children: children ?? props.children,
+        },
+    };
+}
+/** Internal helper to normalize tailwind utilities into a flat array of single classes */
+function normalizeTW(tw) {
+    if (!tw)
+        return [];
+    if (Array.isArray(tw)) {
+        // Even if it is an array, some elements might be strings with spaces
+        return tw.flatMap((item) => typeof item === "string" ? item.split(/\s+/).filter(Boolean) : [item]);
+    }
+    return tw.split(/\s+/).filter(Boolean);
+}
+/** Create a div element */
+export const div = (tw, children, props) => h("div", {
+    tw: ["flex", ...normalizeTW(tw)],
+    children,
+    ...props,
+});
+/** Create a span element */
+export const span = (tw, children, props) => h("span", { tw: normalizeTW(tw), children, ...props });
+/** Create an img element */
+export const img = (src, tw, props) => h("img", { src, tw: normalizeTW(tw), ...props });
+/** Create a vertical stack (flex-col) */
+export const stack = (tw, children, props) => h("div", {
+    tw: ["flex", "flex-col", ...normalizeTW(tw)],
+    children,
+    ...props,
+});
+/** Create a horizontal row (flex-row) */
+export const row = (tw, children, props) => h("div", {
+    tw: ["flex", "flex-row", ...normalizeTW(tw)],
+    children,
+    ...props,
+});
+/** Create an absolute positioned overlay */
+export const absolute = (tw, children, props) => h("div", {
+    tw: ["absolute", "inset-0", "flex", ...normalizeTW(tw)],
+    children,
+    ...props,
+});
+/** Create a grid-like layout (flex-row with wrap) */
+export const grid = (tw, children, props) => h("div", {
+    tw: ["flex", "flex-row", "flex-wrap", ...normalizeTW(tw)],
+    children,
+    ...props,
+});
+/** Create a semantic header */
+export const header = (tw, children, props) => h("div", {
+    tw: ["flex", ...normalizeTW(tw)],
+    children,
+    ...props,
+});
+/** Create a semantic footer */
+export const footer = (tw, children, props) => h("div", {
+    tw: ["flex", ...normalizeTW(tw)],
+    children,
+    ...props,
+});
+/** Create a semantic main content area */
+export const main = (tw, children, props) => h("div", {
+    tw: ["flex", ...normalizeTW(tw)],
+    children,
+    ...props,
+});
+/** Create a spacer (flex-1 or custom size) */
+export const spacer = (size, tw) => {
+    const style = {};
+    if (typeof size === "number") {
+        style.flex = `0 0 ${size}px`;
+    }
+    else if (size) {
+        // If it's a tailwind spacing string, it will be handled by the parser in tw
+    }
+    else {
+        style.flex = 1;
+    }
+    return h("div", {
+        tw: [
+            size && typeof size === "string" ? `w-${size}` : "flex-1",
+            ...normalizeTW(tw),
+        ],
+        style,
+    });
+};
+/**
+ * Semantic Typography
+ */
+export const h1 = (tw, children) => h("div", {
+    tw: ["flex", "text-6xl", "font-bold", ...normalizeTW(tw)],
+    children,
+});
+export const h2 = (tw, children) => h("div", {
+    tw: ["flex", "text-4xl", "font-semibold", ...normalizeTW(tw)],
+    children,
+});
+export const p = (tw, children) => h("div", {
+    tw: ["flex", "text-lg", "text-slate-400", ...normalizeTW(tw)],
+    children,
+});
+/**
+ * Fluent Builder API (Chainable)
+ */
+export class FluentBuilder {
+    _element;
+    constructor(element) {
+        this._element = element;
+    }
+    get element() {
+        return this._element;
+    }
+    // Layout
+    gap(val) {
+        this._add(`gap-${val}`);
+        return this;
+    }
+    padding(val) {
+        this._add(`p-${val}`);
+        return this;
+    }
+    px(val) {
+        this._add(`px-${val}`);
+        return this;
+    }
+    py(val) {
+        this._add(`py-${val}`);
+        return this;
+    }
+    margin(val) {
+        this._add(`m-${val}`);
+        return this;
+    }
+    mt(val) {
+        this._add(`mt-${val}`);
+        return this;
+    }
+    rounded(val = "md") {
+        this._add(`rounded-${val}`);
+        return this;
+    }
+    // Flex
+    center() {
+        this._add("items-center justify-center");
+        return this;
+    }
+    itemsCenter() {
+        this._add("items-center");
+        return this;
+    }
+    justifyCenter() {
+        this._add("justify-center");
+        return this;
+    }
+    justifyBetween() {
+        this._add("justify-between");
+        return this;
+    }
+    // Style
+    bg(color) {
+        this._add(`bg-${color}`);
+        return this;
+    }
+    text(color) {
+        this._add(`text-${color}`);
+        return this;
+    }
+    border(color) {
+        this._add("border");
+        if (color)
+            this._add(`border-${color}`);
+        return this;
+    }
+    shadow(val = "md") {
+        this._add(`shadow-${val}`);
+        return this;
+    }
+    opacity(val) {
+        this._add(`opacity-${val}`);
+        return this;
+    }
+    _add(tw) {
+        const current = this._element.props.tw || [];
+        const next = Array.isArray(current) ? [...current] : [current];
+        next.push(...tw.split(/\s+/));
+        this._element.props.tw = next;
+    }
+}
+/** Wrap an element for fluent chaining */
+export const fluent = (el) => new FluentBuilder(el);
+/**
+ * High-level Primitives
+ */
+/** Create a card container */
+export const card = (tw, children) => stack([
+    "bg-white",
+    "shadow-lg",
+    "rounded-2xl",
+    "p-8",
+    "border",
+    "border-slate-100",
+    ...normalizeTW(tw),
+], children);
+/** Create a badge/pill */
+export const badge = (text, color = "blue") => {
+    const variants = {
+        blue: "bg-blue-500/10 text-blue-500 border-blue-500/20",
+        green: "bg-green-500/10 text-green-500 border-green-500/20",
+        purple: "bg-purple-500/10 text-purple-500 border-purple-500/20",
+        slate: "bg-slate-500/10 text-slate-500 border-slate-500/20",
+    };
+    const [bg, tx, border] = variants[color].split(" ");
+    return div([bg, border, "px-3", "py-1", "rounded-full", "border"], [span([tx, "text-sm", "font-bold"], text)]);
+};
+/**
+ * External Asset Helpers
+ */
+/** Helper to use a raw SVG string directly in img */
+export function svgFromContent(svg) {
+    return `data:image/svg+xml;base64,${Buffer.from(svg).toString("base64")}`;
+}
+/** Proxy/Alias for URLs */
+export function imgFromUrl(url) {
+    return url;
+}

package/dist/cache.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Simple in-memory cache for generated images
+ */
+export declare class SnapshotCache {
+    private static instance;
+    private cache;
+    private ttl;
+    private constructor();
+    static getInstance(): SnapshotCache;
+    /**
+     * Set cache TTL
+     */
+    setTTL(milliseconds: number): void;
+    /**
+     * Calculate a hash for a configuration object
+     */
+    getHash(config: any): string;
+    /**
+     * Get an item from cache
+     */
+    get(hash: string): any | null;
+    /**
+     * Store an item in cache
+     */
+    set(hash: string, data: any): void;
+    /**
+     * Clear the cache
+     */
+    clear(): void;
+}
+export declare const snapshotCache: SnapshotCache;
+//# sourceMappingURL=cache.d.ts.map

package/dist/cache.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cache.d.ts","sourceRoot":"","sources":["../src/cache.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,qBAAa,aAAa;IACxB,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAgB;IACvC,OAAO,CAAC,KAAK,CAAuD;IACpE,OAAO,CAAC,GAAG,CAAa;IAExB,OAAO;IAEP,MAAM,CAAC,WAAW,IAAI,aAAa;IAOnC;;OAEG;IACH,MAAM,CAAC,YAAY,EAAE,MAAM,GAAG,IAAI;IAIlC;;OAEG;IACH,OAAO,CAAC,MAAM,EAAE,GAAG,GAAG,MAAM;IAkB5B;;OAEG;IACH,GAAG,CAAC,IAAI,EAAE,MAAM,GAAG,GAAG,GAAG,IAAI;IAY7B;;OAEG;IACH,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,GAAG,IAAI;IAOlC;;OAEG;IACH,KAAK,IAAI,IAAI;CAGd;AAED,eAAO,MAAM,aAAa,eAA8B,CAAC"}

package/dist/cache.js

@@ -0,0 +1,71 @@
+/**
+ * Simple in-memory cache for generated images
+ */
+export class SnapshotCache {
+    static instance;
+    cache = new Map();
+    ttl = 0; // Cache TTL in milliseconds, 0 means no expiration
+    constructor() { }
+    static getInstance() {
+        if (!SnapshotCache.instance) {
+            SnapshotCache.instance = new SnapshotCache();
+        }
+        return SnapshotCache.instance;
+    }
+    /**
+     * Set cache TTL
+     */
+    setTTL(milliseconds) {
+        this.ttl = milliseconds;
+    }
+    /**
+     * Calculate a hash for a configuration object
+     */
+    getHash(config) {
+        // Stringify config
+        const str = JSON.stringify(config, (key, value) => {
+            if (typeof value === "function")
+                return undefined;
+            if (key === "debug")
+                return undefined;
+            return value;
+        });
+        // Basic hash for browser/fallback
+        let hash = 0;
+        for (let i = 0; i < str.length; i++) {
+            const char = str.charCodeAt(i);
+            hash = (hash << 5) - hash + char;
+            hash |= 0; // Convert to 32bit integer
+        }
+        return `hash-${hash}`;
+    }
+    /**
+     * Get an item from cache
+     */
+    get(hash) {
+        const item = this.cache.get(hash);
+        if (!item)
+            return null;
+        if (this.ttl > 0 && Date.now() - item.timestamp > this.ttl) {
+            this.cache.delete(hash);
+            return null;
+        }
+        return item.data;
+    }
+    /**
+     * Store an item in cache
+     */
+    set(hash, data) {
+        this.cache.set(hash, {
+            data,
+            timestamp: Date.now(),
+        });
+    }
+    /**
+     * Clear the cache
+     */
+    clear() {
+        this.cache.clear();
+    }
+}
+export const snapshotCache = SnapshotCache.getInstance();

package/dist/css.d.ts

@@ -0,0 +1,83 @@
+/**
+ * CSS properties supported by Satori
+ * This is a subset of React.CSSProperties optimized for OG image generation
+ */
+export interface CSSProperties {
+    display?: "flex" | "none";
+    position?: "relative" | "absolute";
+    flexDirection?: "row" | "row-reverse" | "column" | "column-reverse";
+    flexWrap?: "nowrap" | "wrap" | "wrap-reverse";
+    flexGrow?: number;
+    flexShrink?: number;
+    flexBasis?: number | string;
+    alignItems?: "flex-start" | "flex-end" | "center" | "baseline" | "stretch";
+    alignContent?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "stretch";
+    alignSelf?: "auto" | "flex-start" | "flex-end" | "center" | "baseline" | "stretch";
+    justifyContent?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly";
+    gap?: number | string;
+    columnGap?: number | string;
+    rowGap?: number | string;
+    width?: number | string;
+    height?: number | string;
+    minWidth?: number | string;
+    minHeight?: number | string;
+    maxWidth?: number | string;
+    maxHeight?: number | string;
+    margin?: number | string;
+    marginTop?: number | string;
+    marginRight?: number | string;
+    marginBottom?: number | string;
+    marginLeft?: number | string;
+    padding?: number | string;
+    paddingTop?: number | string;
+    paddingRight?: number | string;
+    paddingBottom?: number | string;
+    paddingLeft?: number | string;
+    top?: number | string;
+    right?: number | string;
+    bottom?: number | string;
+    left?: number | string;
+    border?: string;
+    borderWidth?: number | string;
+    borderStyle?: "solid" | "dashed";
+    borderColor?: string;
+    borderTop?: string;
+    borderRight?: string;
+    borderBottom?: string;
+    borderLeft?: string;
+    borderRadius?: number | string;
+    borderTopLeftRadius?: number | string;
+    borderTopRightRadius?: number | string;
+    borderBottomLeftRadius?: number | string;
+    borderBottomRightRadius?: number | string;
+    backgroundColor?: string;
+    backgroundImage?: string;
+    backgroundPosition?: string;
+    backgroundSize?: string;
+    backgroundClip?: "border-box" | "text";
+    backgroundRepeat?: "repeat" | "repeat-x" | "repeat-y" | "no-repeat";
+    color?: string;
+    fontFamily?: string;
+    fontSize?: number | string;
+    fontWeight?: number | string;
+    fontStyle?: "normal" | "italic";
+    lineHeight?: number | string;
+    letterSpacing?: number | string;
+    textAlign?: "left" | "right" | "center" | "justify";
+    textTransform?: "none" | "uppercase" | "lowercase" | "capitalize";
+    textDecoration?: string;
+    textOverflow?: "clip" | "ellipsis";
+    textShadow?: string;
+    whiteSpace?: "normal" | "pre" | "pre-wrap" | "pre-line" | "nowrap";
+    wordBreak?: "normal" | "break-all" | "break-word" | "keep-all";
+    opacity?: number;
+    overflow?: "visible" | "hidden";
+    boxShadow?: string;
+    transform?: string;
+    transformOrigin?: string;
+    objectFit?: "contain" | "cover" | "none";
+    objectPosition?: string;
+    filter?: string;
+    clipPath?: string;
+}
+//# sourceMappingURL=css.d.ts.map

package/dist/css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../src/css.ts"],"names":[],"mappings":"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"}

package/dist/css.js

@@ -0,0 +1 @@
+export {};

package/dist/font-registry.d.ts

@@ -0,0 +1,34 @@
+import type { FontConfig } from "./types";
+/**
+ * Global registry for fonts to avoid reloading and simplify configuration
+ */
+export declare class FontRegistry {
+    private static instance;
+    private fonts;
+    private constructor();
+    static getInstance(): FontRegistry;
+    /**
+     * Register one or more fonts to be available globally
+     */
+    register(font: FontConfig | FontConfig[]): void;
+    /**
+     * Helper to register Inter fonts with specified weights (local files)
+     * Only works in Bun/Node without bundlers
+     */
+    registerInter(weights?: (300 | 400 | 500 | 600 | 700)[]): Promise<void>;
+    /**
+     * Helper to register Inter fonts from Google Fonts CDN
+     * Works with all bundlers (Next.js, Vite, etc.)
+     */
+    registerInterFromUrl(weights?: (300 | 400 | 500 | 600 | 700)[]): Promise<void>;
+    /**
+     * Get all registered fonts
+     */
+    getFonts(): FontConfig[];
+    /**
+     * Clear the registry
+     */
+    clear(): void;
+}
+export declare const fontRegistry: FontRegistry;
+//# sourceMappingURL=font-registry.d.ts.map

package/dist/font-registry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"font-registry.d.ts","sourceRoot":"","sources":["../src/font-registry.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C;;GAEG;AACH,qBAAa,YAAY;IACvB,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAe;IACtC,OAAO,CAAC,KAAK,CAAoB;IAEjC,OAAO;IAEP,MAAM,CAAC,WAAW,IAAI,YAAY;IAOlC;;OAEG;IACH,QAAQ,CAAC,IAAI,EAAE,UAAU,GAAG,UAAU,EAAE,GAAG,IAAI;IAgB/C;;;OAGG;IACG,aAAa,CACjB,OAAO,GAAE,CAAC,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC,EAAe,GACpD,OAAO,CAAC,IAAI,CAAC;IAMhB;;;OAGG;IACG,oBAAoB,CACxB,OAAO,GAAE,CAAC,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC,EAAe,GACpD,OAAO,CAAC,IAAI,CAAC;IAMhB;;OAEG;IACH,QAAQ,IAAI,UAAU,EAAE;IAIxB;;OAEG;IACH,KAAK,IAAI,IAAI;CAGd;AAED,eAAO,MAAM,YAAY,cAA6B,CAAC"}