@pixldocs/canvas-renderer 0.3.3

package/dist/index.d.ts

@@ -0,0 +1,281 @@
+import { InferredSection } from '../../../src/lib/inferFormSchemaFromTemplate';
+import { JSX as JSX_2 } from 'react/jsx-runtime';
+import { SectionFormState } from '../../../src/lib/inferFormSchemaFromTemplate';
+import { SmartElementProps } from '../../../shared/smart-elements/types';
+import { SmartElementType } from '../../../shared/smart-elements/types';
+
+/**
+ * Apply theme variable overrides to a template config.
+ * Walks the tree and replaces any property value that matches a theme variable reference.
+ *
+ * Theme variables in config look like: {{theme.variableName}}
+ * Or are stored in themeConfig.variables as { [name]: { value, label } }
+ */
+export declare function applyThemeToConfig(config: TemplateConfig, themeOverrides: ThemeVariables): TemplateConfig;
+
+export declare interface CanvasNode {
+    id: string;
+    name?: string;
+    type?: string;
+    left?: number;
+    top?: number;
+    width?: number;
+    height?: number;
+    visible?: boolean;
+    children?: CanvasNode[];
+    [key: string]: any;
+}
+
+/**
+ * Minimal type definitions for template configs.
+ * These are the subset of types needed by the renderer,
+ * extracted from the main app's types/editor.ts to avoid coupling.
+ */
+export declare interface CanvasSize {
+    width: number;
+    height: number;
+}
+
+/**
+ * Collect all font families used in a template config.
+ */
+export declare function collectFontsFromConfig(config: TemplateConfig): Set<string>;
+
+export declare interface DynamicField {
+    id: string;
+    label: string;
+    type: string;
+    mappings: Array<{
+        elementId: string;
+        targetProperty: string;
+    }>;
+    [key: string]: any;
+}
+
+export { InferredSection }
+
+/**
+ * Load a Google Font by injecting a <link> stylesheet.
+ * Resolves when the font is ready for use.
+ */
+export declare function loadGoogleFontCSS(fontFamily: string): Promise<void>;
+
+export declare interface PageSettings {
+    backgroundColor?: string;
+    backgroundGradient?: any;
+    contentTop?: number;
+    contentBottom?: number;
+}
+
+export declare function PixldocsPreview(props: PixldocsPreviewProps): JSX_2.Element;
+
+declare interface PixldocsPreviewBaseProps {
+    /** Page index to render (default: 0) */
+    pageIndex?: number;
+    /** Zoom / scale factor (default: 1) */
+    zoom?: number;
+    /** When true, zoom is used as-is without auto-fit calculation */
+    absoluteZoom?: boolean;
+    /** Image proxy URL for CORS-safe external image loading */
+    imageProxyUrl?: string;
+    /** CSS class name for the outer container */
+    className?: string;
+    /** Inline styles for the outer container */
+    style?: Record<string, string | number>;
+    /** Optional dynamic field click callback */
+    onDynamicFieldClick?: (elementId: string, fieldId: string) => void;
+    /** Called when the canvas has fully loaded fonts and is ready to display */
+    onReady?: () => void;
+    /** Called when resolution or rendering fails */
+    onError?: (error: Error) => void;
+}
+
+/** Mode 1: Pre-resolved config */
+export declare interface PixldocsPreviewConfigProps extends PixldocsPreviewBaseProps {
+    /** Template configuration object (pre-resolved) */
+    config: TemplateConfig;
+    templateId?: never;
+    formSchemaId?: never;
+    sectionState?: never;
+    themeId?: never;
+    supabaseUrl?: never;
+    supabaseAnonKey?: never;
+}
+
+export declare type PixldocsPreviewProps = PixldocsPreviewConfigProps | PixldocsPreviewResolveProps;
+
+/** Mode 2: Auto-resolve from database */
+export declare interface PixldocsPreviewResolveProps extends PixldocsPreviewBaseProps {
+    config?: never;
+    /** Template UUID to fetch and resolve */
+    templateId: string;
+    /** Form schema UUID */
+    formSchemaId: string;
+    /** V2 section state data */
+    sectionState: SectionFormState;
+    /** Optional theme variant ID */
+    themeId?: string;
+    /** Supabase project URL */
+    supabaseUrl: string;
+    /** Supabase anon key */
+    supabaseAnonKey: string;
+}
+
+export declare class PixldocsRenderer {
+    private config;
+    constructor(config: RendererConfig);
+    /**
+     * Render a pre-resolved template config to an image using the full PageCanvas engine.
+     * Mounts a hidden PreviewCanvas component and captures the Fabric canvas output.
+     */
+    render(templateConfig: TemplateConfig, options?: RenderOptions): Promise<RenderResult>;
+    /**
+     * Render all pages and return array of results.
+     */
+    renderAllPages(templateConfig: TemplateConfig, options?: Omit<RenderOptions, 'pageIndex'>): Promise<RenderResult[]>;
+    /**
+     * Resolve from V2 sectionState (like the server API) and render all pages.
+     * This is the primary external API for the package.
+     */
+    renderFromForm(options: RenderFromFormOptions): Promise<RenderResult[]>;
+    /**
+     * Convenience: fetch by ID with simple flat data and render.
+     */
+    renderById(templateId: string, formData?: Record<string, any>, options?: RenderOptions): Promise<RenderResult>;
+    /**
+     * Wait until every image on the Fabric canvas inside the container has loaded.
+     * Polls img elements since we can't hook into Fabric's internal load events.
+     */
+    private waitForCanvasImages;
+    private getNormalizedGradientStops;
+    private paintPageBackground;
+    private renderPageViaPreviewCanvas;
+}
+
+export declare interface RendererConfig {
+    /** Supabase project URL for fetching templates */
+    supabaseUrl: string;
+    /** Supabase anon key */
+    supabaseAnonKey: string;
+    /** Optional: image proxy URL for CORS-safe image loading */
+    imageProxyUrl?: string;
+    /** Optional: pixel ratio for high-DPI rendering (default: 2) */
+    pixelRatio?: number;
+}
+
+/** Options for renderFromForm — matches the server API payload */
+export declare interface RenderFromFormOptions extends Omit<RenderOptions, 'pageIndex'> {
+    templateId: string;
+    formSchemaId: string;
+    sectionState: SectionFormState;
+    themeId?: string;
+}
+
+export declare interface RenderOptions {
+    /** Page index to render (default: 0) */
+    pageIndex?: number;
+    /** Output format (default: 'png') */
+    format?: 'png' | 'jpeg' | 'webp';
+    /** Quality for jpeg/webp (0-1, default: 0.92) */
+    quality?: number;
+    /** Scale multiplier (default: 1) */
+    scale?: number;
+    /** Custom pixel ratio override */
+    pixelRatio?: number;
+}
+
+export declare interface RenderResult {
+    /** Data URL of the rendered image */
+    dataUrl: string;
+    /** Width of the rendered image in CSS pixels */
+    width: number;
+    /** Height of the rendered image in CSS pixels */
+    height: number;
+    /** Actual pixel width (width * pixelRatio) */
+    pixelWidth: number;
+    /** Actual pixel height (height * pixelRatio) */
+    pixelHeight: number;
+}
+
+export declare interface ResolvedTemplate {
+    config: TemplateConfig;
+    templateName: string;
+    templateId: string;
+}
+
+/**
+ * Resolve a template using the V2 sectionState format.
+ * This is the primary API for external consumers and matches the server's /render-from-form pipeline.
+ */
+export declare function resolveFromForm(options: ResolveFromFormOptions): Promise<ResolvedTemplate>;
+
+/** V2 resolution options — matches the server API payload */
+export declare interface ResolveFromFormOptions {
+    /** Template UUID */
+    templateId: string;
+    /** Form schema UUID */
+    formSchemaId: string;
+    /** V2 section state (same shape sent to /render-from-form) */
+    sectionState: SectionFormState;
+    /** Optional theme variant ID (default: 'default') */
+    themeId?: string;
+    /** Supabase project URL */
+    supabaseUrl: string;
+    /** Supabase anon key */
+    supabaseAnonKey: string;
+}
+
+export declare interface ResolveOptions {
+    /** Template UUID */
+    templateId: string;
+    /** Optional flat formData (legacy, simple fields only) */
+    formData?: Record<string, any>;
+    /** Supabase project URL */
+    supabaseUrl: string;
+    /** Supabase anon key */
+    supabaseAnonKey: string;
+}
+
+export declare function resolveTemplateData(options: ResolveOptions): Promise<ResolvedTemplate>;
+
+export { SectionFormState }
+
+export { SmartElementProps }
+
+export { SmartElementType }
+
+export declare interface TemplateConfig {
+    version?: string;
+    name?: string;
+    description?: string;
+    canvas: CanvasSize;
+    pages: TemplateConfigPage[];
+    dynamicFields?: DynamicField[];
+    fieldGroups?: any[];
+    themeConfig?: ThemeConfig;
+    formBindingMode?: string;
+    boundFormDefId?: string;
+    boundFormDefName?: string;
+    [key: string]: any;
+}
+
+export declare interface TemplateConfigPage {
+    id: string;
+    name: string;
+    children: CanvasNode[];
+    settings?: PageSettings;
+}
+
+export declare interface ThemeConfig {
+    variables?: Record<string, {
+        value: string;
+        label?: string;
+    }>;
+    [key: string]: any;
+}
+
+export declare interface ThemeVariables {
+    [variableName: string]: string;
+}
+
+export { }