@skylivellc/lienzo-editor 0.0.0-stage → 0.2.0

package/dist/types/state/editor.d.ts

@@ -0,0 +1,1010 @@
+import { type Catalog, type Document, type Element, type Issue, type Modal, type Parsed, type Section, type SiteSettings, type Theme } from '@skylivellc/lienzo-core';
+import type { Asset, PageVersion, SiteUpdate, Workspace } from '@skylivellc/lienzo-core/protocol';
+import { type InjectionKey, type WritableComputedRef } from 'vue';
+import type { Client, Failure } from '../client.ts';
+import type { Translator } from '../i18n/index.ts';
+import { type Canvas, type Device } from '../model/document.ts';
+import { type Insertable } from '../model/elements.ts';
+import { type Alignment } from '../model/geometry.ts';
+import { type PageTemplateKey } from '../model/templates.ts';
+/** What the canvas shows: the page's sections, or one modal's content. */
+export type View = {
+    kind: 'page';
+} | {
+    kind: 'modal';
+    id: string;
+};
+/**
+ * What is selected. Elements always belong to one canvas; the active one is
+ * the element the settings panel edits (the last one clicked).
+ */
+export type Selection = {
+    kind: 'none';
+} | {
+    kind: 'canvas';
+    canvas: string;
+} | {
+    kind: 'elements';
+    canvas: string;
+    ids: string[];
+    active: string;
+};
+export type Dialog = 'newPage' | 'versions' | 'theme' | 'site' | 'submissions' | 'conflict' | null;
+export type Toast = {
+    id: number;
+    tone: 'info' | 'error';
+    text: string;
+};
+/** The page being edited, minus its draft. */
+export type OpenPage = {
+    id: number;
+    slug: string;
+    title: string;
+    publishedAt: string | null;
+    seo: {
+        title: string;
+        description: string;
+    };
+    versions: PageVersion[];
+};
+export type Load = {
+    kind: 'loading';
+} | {
+    kind: 'failed';
+    message: string;
+} | {
+    kind: 'empty';
+} | {
+    kind: 'ready';
+};
+export type EditorDeps = {
+    client: Client;
+    i18n: Translator;
+};
+export type Editor = ReturnType<typeof createEditor>;
+export declare const editorKey: InjectionKey<Editor>;
+export declare function useEditor(): Editor;
+export type EditorState = {
+    load: Load;
+    workspace: Workspace;
+    page: OpenPage | null;
+    draft: Document;
+    revision: number;
+    device: Device;
+    view: View;
+    selection: Selection;
+    previewing: boolean;
+    dialog: Dialog;
+    /** The media library, open on top of anything else; picking calls `onPick`. */
+    library: {
+        onPick: ((ref: string) => void) | null;
+    } | null;
+    /** Theme being edited in the theme dialog: the canvas shows it live until saved or cancelled. */
+    themeDraft: Theme | null;
+    /** Visible panel per tab or step group on the canvas. */
+    panels: Record<string, number>;
+    /** Canvas zoom, or null to fit the stage width. */
+    zoom: number | null;
+    /** Issues of a draft that does not parse, so the canvas shows the last good render. */
+    renderIssues: Issue[];
+    publishing: boolean;
+    toasts: Toast[];
+};
+/**
+ * All editor state and the operations on it. Panels and canvas gestures
+ * edit the draft in place and call `commit` to record an undo step;
+ * structural changes (adding, removing, moving things) go through these methods.
+ */
+export declare function createEditor({ client, i18n }: EditorDeps): {
+    state: {
+        load: {
+            kind: "loading";
+        } | {
+            kind: "failed";
+            message: string;
+        } | {
+            kind: "empty";
+        } | {
+            kind: "ready";
+        };
+        workspace: {
+            site: {
+                name: string;
+                locale: string;
+                theme: {
+                    primary: string;
+                    secondary: string;
+                    background: string;
+                    surface: string;
+                    text: string;
+                    muted: string;
+                    heading_font: string;
+                    body_font: string;
+                    radius: number;
+                    max_width: number;
+                };
+                seo: {
+                    title?: string | null | undefined;
+                    description?: string | null | undefined;
+                };
+                favicon: string | null;
+                og_image: string | null;
+            };
+            meta: import("@skylivellc/lienzo-core/protocol").SiteMeta;
+            publicUrl: string | null;
+            pages: {
+                id: number;
+                slug: string;
+                title: string;
+                publishedAt: string | null;
+            }[];
+            catalog: {
+                elements: {
+                    type: string;
+                    label: {
+                        readonly [x: string]: string;
+                        readonly en: string;
+                    };
+                    icon: string;
+                    fields: ({
+                        kind: "text";
+                        key: string;
+                        label: {
+                            readonly [x: string]: string;
+                            readonly en: string;
+                        };
+                        max: number;
+                        multiline?: boolean | undefined;
+                        default?: string | undefined;
+                    } | {
+                        kind: "number";
+                        key: string;
+                        label: {
+                            readonly [x: string]: string;
+                            readonly en: string;
+                        };
+                        min: number;
+                        max: number;
+                        step?: number | undefined;
+                        default: number;
+                    } | {
+                        kind: "toggle";
+                        key: string;
+                        label: {
+                            readonly [x: string]: string;
+                            readonly en: string;
+                        };
+                        default: boolean;
+                    } | {
+                        kind: "choice";
+                        key: string;
+                        label: {
+                            readonly [x: string]: string;
+                            readonly en: string;
+                        };
+                        options: {
+                            value: string;
+                            label: {
+                                readonly [x: string]: string;
+                                readonly en: string;
+                            };
+                        }[];
+                        default: string | string[];
+                        multiple?: boolean | undefined;
+                    } | {
+                        kind: "image";
+                        key: string;
+                        label: {
+                            readonly [x: string]: string;
+                            readonly en: string;
+                        };
+                    } | {
+                        kind: "action";
+                        key: string;
+                        label: {
+                            readonly [x: string]: string;
+                            readonly en: string;
+                        };
+                    })[];
+                    styles: import("@skylivellc/lienzo-core").StyleGroup[];
+                    size: {
+                        w: number;
+                        h: number;
+                    };
+                    css?: string | undefined;
+                }[];
+                actions: {
+                    type: string;
+                    label: {
+                        readonly [x: string]: string;
+                        readonly en: string;
+                    };
+                    value: {
+                        kind: "text";
+                        key: string;
+                        label: {
+                            readonly [x: string]: string;
+                            readonly en: string;
+                        };
+                        max: number;
+                        multiline?: boolean | undefined;
+                        default?: string | undefined;
+                    } | {
+                        kind: "number";
+                        key: string;
+                        label: {
+                            readonly [x: string]: string;
+                            readonly en: string;
+                        };
+                        min: number;
+                        max: number;
+                        step?: number | undefined;
+                        default: number;
+                    } | {
+                        kind: "toggle";
+                        key: string;
+                        label: {
+                            readonly [x: string]: string;
+                            readonly en: string;
+                        };
+                        default: boolean;
+                    } | {
+                        kind: "choice";
+                        key: string;
+                        label: {
+                            readonly [x: string]: string;
+                            readonly en: string;
+                        };
+                        options: {
+                            value: string;
+                            label: {
+                                readonly [x: string]: string;
+                                readonly en: string;
+                            };
+                        }[];
+                        default: string | string[];
+                        multiple?: boolean | undefined;
+                    } | {
+                        kind: "image";
+                        key: string;
+                        label: {
+                            readonly [x: string]: string;
+                            readonly en: string;
+                        };
+                    } | null;
+                }[];
+                siteFields?: ({
+                    kind: "text";
+                    key: string;
+                    label: {
+                        readonly [x: string]: string;
+                        readonly en: string;
+                    };
+                    max: number;
+                    multiline?: boolean | undefined;
+                    default?: string | undefined;
+                } | {
+                    kind: "number";
+                    key: string;
+                    label: {
+                        readonly [x: string]: string;
+                        readonly en: string;
+                    };
+                    min: number;
+                    max: number;
+                    step?: number | undefined;
+                    default: number;
+                } | {
+                    kind: "toggle";
+                    key: string;
+                    label: {
+                        readonly [x: string]: string;
+                        readonly en: string;
+                    };
+                    default: boolean;
+                } | {
+                    kind: "choice";
+                    key: string;
+                    label: {
+                        readonly [x: string]: string;
+                        readonly en: string;
+                    };
+                    options: {
+                        value: string;
+                        label: {
+                            readonly [x: string]: string;
+                            readonly en: string;
+                        };
+                    }[];
+                    default: string | string[];
+                    multiple?: boolean | undefined;
+                } | {
+                    kind: "image";
+                    key: string;
+                    label: {
+                        readonly [x: string]: string;
+                        readonly en: string;
+                    };
+                } | {
+                    kind: "action";
+                    key: string;
+                    label: {
+                        readonly [x: string]: string;
+                        readonly en: string;
+                    };
+                })[] | undefined;
+            };
+            assets: {
+                id: number;
+                ref: string;
+                name: string;
+                url: string;
+                thumb: string;
+                width: number | null;
+                height: number | null;
+            }[];
+            quota: {
+                used: number;
+                limit: number;
+            };
+        };
+        page: {
+            id: number;
+            slug: string;
+            title: string;
+            publishedAt: string | null;
+            seo: {
+                title: string;
+                description: string;
+            };
+            versions: {
+                id: number;
+                createdAt: string;
+                by: string | null;
+            }[];
+        } | null;
+        draft: {
+            sections: {
+                id: string;
+                group?: {
+                    id?: string | null | undefined;
+                    type?: "tabs" | "steps" | null | undefined;
+                    label?: string | null | undefined;
+                } | null | undefined;
+                height: {
+                    desktop: number;
+                    mobile: number;
+                };
+                background: {
+                    type: "color" | "gradient" | "image";
+                    color?: string | null | undefined;
+                    gradient?: {
+                        type?: "linear" | "radial" | null | undefined;
+                        from?: string | null | undefined;
+                        to?: string | null | undefined;
+                        angle?: number | null | undefined;
+                    } | null | undefined;
+                    image?: string | null | undefined;
+                    overlay?: number | null | undefined;
+                    parallax?: boolean | null | undefined;
+                };
+                elements: ({
+                    id: string;
+                    group?: string | null | undefined;
+                    z: number;
+                    locked?: boolean | null | undefined;
+                    layout: {
+                        desktop: {
+                            x: number;
+                            y: number;
+                            w: number;
+                            h: number;
+                        };
+                        mobile?: {
+                            x: number;
+                            y: number;
+                            w: number;
+                            h: number;
+                        } | null | undefined;
+                    };
+                    style: {
+                        color?: string | null | undefined;
+                        background?: string | null | undefined;
+                        font?: "heading" | "body" | null | undefined;
+                        size?: number | null | undefined;
+                        weight?: 500 | 300 | 400 | 600 | 700 | 800 | null | undefined;
+                        align?: "left" | "center" | "right" | null | undefined;
+                        line_height?: number | null | undefined;
+                        radius?: number | null | undefined;
+                        border_width?: number | null | undefined;
+                        border_color?: string | null | undefined;
+                        padding?: number | null | undefined;
+                        opacity?: number | null | undefined;
+                        shadow?: "none" | "custom" | "sm" | "md" | "lg" | null | undefined;
+                        shadow_custom?: {
+                            x?: number | null | undefined;
+                            y?: number | null | undefined;
+                            blur?: number | null | undefined;
+                            spread?: number | null | undefined;
+                            color?: string | null | undefined;
+                            opacity?: number | null | undefined;
+                        } | null | undefined;
+                        object_fit?: "cover" | "contain" | null | undefined;
+                        gradient?: {
+                            type?: "linear" | "radial" | null | undefined;
+                            from?: string | null | undefined;
+                            to?: string | null | undefined;
+                            angle?: number | null | undefined;
+                        } | null | undefined;
+                        background_opacity?: number | null | undefined;
+                        blur?: number | null | undefined;
+                        rotate?: number | null | undefined;
+                        flip_x?: boolean | null | undefined;
+                        flip_y?: boolean | null | undefined;
+                        clip?: boolean | null | undefined;
+                        pinned?: boolean | null | undefined;
+                        overflow?: "visible" | "hidden" | "scroll-x" | "scroll-y" | null | undefined;
+                        visible_on?: "desktop" | "mobile" | "all" | null | undefined;
+                        accent_color?: string | null | undefined;
+                        hover?: "none" | "lift" | "grow" | "fade" | null | undefined;
+                        animation?: {
+                            type?: "left" | "right" | "none" | "fade" | "up" | "down" | "zoom" | null | undefined;
+                            delay?: number | null | undefined;
+                            duration?: number | null | undefined;
+                        } | null | undefined;
+                    };
+                    type: import("@skylivellc/lienzo-core").CoreElementType;
+                    props: {
+                        text?: string | null | undefined;
+                        level?: number | null | undefined;
+                        src?: string | null | undefined;
+                        alt?: string | null | undefined;
+                        label?: string | null | undefined;
+                        url?: string | null | undefined;
+                        icon?: string | null | undefined;
+                        sticky?: boolean | null | undefined;
+                        scroll_style?: "shadow" | "same" | "solid" | "compact" | null | undefined;
+                        stroke?: number | null | undefined;
+                        accent?: string | null | undefined;
+                        shape?: "rectangle" | "ellipse" | "triangle" | "blob" | "arch" | "diagonal" | "dots" | "grid" | null | undefined;
+                        placeholder?: string | null | undefined;
+                        required?: boolean | null | undefined;
+                        input_type?: "number" | "text" | "email" | "date" | "tel" | null | undefined;
+                        options?: string[] | null | undefined;
+                        multiple?: boolean | null | undefined;
+                        brand?: string | null | undefined;
+                        layout?: "left" | "center" | "split" | null | undefined;
+                        template?: "plain" | "pill" | "card" | "underline" | "divided" | null | undefined;
+                        links?: {
+                            label: string;
+                            action: {
+                                type: string;
+                                value?: string | null | undefined;
+                            };
+                        }[] | null | undefined;
+                        action?: {
+                            type?: string | null | undefined;
+                            value?: string | null | undefined;
+                        } | null | undefined;
+                    };
+                } | {
+                    id: string;
+                    group?: string | null | undefined;
+                    z: number;
+                    locked?: boolean | null | undefined;
+                    layout: {
+                        desktop: {
+                            x: number;
+                            y: number;
+                            w: number;
+                            h: number;
+                        };
+                        mobile?: {
+                            x: number;
+                            y: number;
+                            w: number;
+                            h: number;
+                        } | null | undefined;
+                    };
+                    style: {
+                        color?: string | null | undefined;
+                        background?: string | null | undefined;
+                        font?: "heading" | "body" | null | undefined;
+                        size?: number | null | undefined;
+                        weight?: 500 | 300 | 400 | 600 | 700 | 800 | null | undefined;
+                        align?: "left" | "center" | "right" | null | undefined;
+                        line_height?: number | null | undefined;
+                        radius?: number | null | undefined;
+                        border_width?: number | null | undefined;
+                        border_color?: string | null | undefined;
+                        padding?: number | null | undefined;
+                        opacity?: number | null | undefined;
+                        shadow?: "none" | "custom" | "sm" | "md" | "lg" | null | undefined;
+                        shadow_custom?: {
+                            x?: number | null | undefined;
+                            y?: number | null | undefined;
+                            blur?: number | null | undefined;
+                            spread?: number | null | undefined;
+                            color?: string | null | undefined;
+                            opacity?: number | null | undefined;
+                        } | null | undefined;
+                        object_fit?: "cover" | "contain" | null | undefined;
+                        gradient?: {
+                            type?: "linear" | "radial" | null | undefined;
+                            from?: string | null | undefined;
+                            to?: string | null | undefined;
+                            angle?: number | null | undefined;
+                        } | null | undefined;
+                        background_opacity?: number | null | undefined;
+                        blur?: number | null | undefined;
+                        rotate?: number | null | undefined;
+                        flip_x?: boolean | null | undefined;
+                        flip_y?: boolean | null | undefined;
+                        clip?: boolean | null | undefined;
+                        pinned?: boolean | null | undefined;
+                        overflow?: "visible" | "hidden" | "scroll-x" | "scroll-y" | null | undefined;
+                        visible_on?: "desktop" | "mobile" | "all" | null | undefined;
+                        accent_color?: string | null | undefined;
+                        hover?: "none" | "lift" | "grow" | "fade" | null | undefined;
+                        animation?: {
+                            type?: "left" | "right" | "none" | "fade" | "up" | "down" | "zoom" | null | undefined;
+                            delay?: number | null | undefined;
+                            duration?: number | null | undefined;
+                        } | null | undefined;
+                    };
+                    type: string;
+                    props: Readonly<Record<string, import("@skylivellc/lienzo-core").FieldValue | undefined>>;
+                } | {
+                    id: string;
+                    group?: string | null | undefined;
+                    z: number;
+                    locked?: boolean | null | undefined;
+                    layout: {
+                        desktop: {
+                            x: number;
+                            y: number;
+                            w: number;
+                            h: number;
+                        };
+                        mobile?: {
+                            x: number;
+                            y: number;
+                            w: number;
+                            h: number;
+                        } | null | undefined;
+                    };
+                    style: {
+                        color?: string | null | undefined;
+                        background?: string | null | undefined;
+                        font?: "heading" | "body" | null | undefined;
+                        size?: number | null | undefined;
+                        weight?: 500 | 300 | 400 | 600 | 700 | 800 | null | undefined;
+                        align?: "left" | "center" | "right" | null | undefined;
+                        line_height?: number | null | undefined;
+                        radius?: number | null | undefined;
+                        border_width?: number | null | undefined;
+                        border_color?: string | null | undefined;
+                        padding?: number | null | undefined;
+                        opacity?: number | null | undefined;
+                        shadow?: "none" | "custom" | "sm" | "md" | "lg" | null | undefined;
+                        shadow_custom?: {
+                            x?: number | null | undefined;
+                            y?: number | null | undefined;
+                            blur?: number | null | undefined;
+                            spread?: number | null | undefined;
+                            color?: string | null | undefined;
+                            opacity?: number | null | undefined;
+                        } | null | undefined;
+                        object_fit?: "cover" | "contain" | null | undefined;
+                        gradient?: {
+                            type?: "linear" | "radial" | null | undefined;
+                            from?: string | null | undefined;
+                            to?: string | null | undefined;
+                            angle?: number | null | undefined;
+                        } | null | undefined;
+                        background_opacity?: number | null | undefined;
+                        blur?: number | null | undefined;
+                        rotate?: number | null | undefined;
+                        flip_x?: boolean | null | undefined;
+                        flip_y?: boolean | null | undefined;
+                        clip?: boolean | null | undefined;
+                        pinned?: boolean | null | undefined;
+                        overflow?: "visible" | "hidden" | "scroll-x" | "scroll-y" | null | undefined;
+                        visible_on?: "desktop" | "mobile" | "all" | null | undefined;
+                        accent_color?: string | null | undefined;
+                        hover?: "none" | "lift" | "grow" | "fade" | null | undefined;
+                        animation?: {
+                            type?: "left" | "right" | "none" | "fade" | "up" | "down" | "zoom" | null | undefined;
+                            delay?: number | null | undefined;
+                            duration?: number | null | undefined;
+                        } | null | undefined;
+                    };
+                    type: string;
+                    props: Readonly<Record<string, unknown>>;
+                })[];
+            }[];
+            modals?: {
+                id: string;
+                height: {
+                    desktop: number;
+                    mobile: number;
+                };
+                background: {
+                    type: "color";
+                    color?: string | null | undefined;
+                };
+                size?: "custom" | "sm" | "md" | "lg" | "xl" | "full" | null | undefined;
+                title: string;
+                show_title?: boolean | null | undefined;
+                width: number;
+                elements: ({
+                    id: string;
+                    group?: string | null | undefined;
+                    z: number;
+                    locked?: boolean | null | undefined;
+                    layout: {
+                        desktop: {
+                            x: number;
+                            y: number;
+                            w: number;
+                            h: number;
+                        };
+                        mobile?: {
+                            x: number;
+                            y: number;
+                            w: number;
+                            h: number;
+                        } | null | undefined;
+                    };
+                    style: {
+                        color?: string | null | undefined;
+                        background?: string | null | undefined;
+                        font?: "heading" | "body" | null | undefined;
+                        size?: number | null | undefined;
+                        weight?: 500 | 300 | 400 | 600 | 700 | 800 | null | undefined;
+                        align?: "left" | "center" | "right" | null | undefined;
+                        line_height?: number | null | undefined;
+                        radius?: number | null | undefined;
+                        border_width?: number | null | undefined;
+                        border_color?: string | null | undefined;
+                        padding?: number | null | undefined;
+                        opacity?: number | null | undefined;
+                        shadow?: "none" | "custom" | "sm" | "md" | "lg" | null | undefined;
+                        shadow_custom?: {
+                            x?: number | null | undefined;
+                            y?: number | null | undefined;
+                            blur?: number | null | undefined;
+                            spread?: number | null | undefined;
+                            color?: string | null | undefined;
+                            opacity?: number | null | undefined;
+                        } | null | undefined;
+                        object_fit?: "cover" | "contain" | null | undefined;
+                        gradient?: {
+                            type?: "linear" | "radial" | null | undefined;
+                            from?: string | null | undefined;
+                            to?: string | null | undefined;
+                            angle?: number | null | undefined;
+                        } | null | undefined;
+                        background_opacity?: number | null | undefined;
+                        blur?: number | null | undefined;
+                        rotate?: number | null | undefined;
+                        flip_x?: boolean | null | undefined;
+                        flip_y?: boolean | null | undefined;
+                        clip?: boolean | null | undefined;
+                        pinned?: boolean | null | undefined;
+                        overflow?: "visible" | "hidden" | "scroll-x" | "scroll-y" | null | undefined;
+                        visible_on?: "desktop" | "mobile" | "all" | null | undefined;
+                        accent_color?: string | null | undefined;
+                        hover?: "none" | "lift" | "grow" | "fade" | null | undefined;
+                        animation?: {
+                            type?: "left" | "right" | "none" | "fade" | "up" | "down" | "zoom" | null | undefined;
+                            delay?: number | null | undefined;
+                            duration?: number | null | undefined;
+                        } | null | undefined;
+                    };
+                    type: import("@skylivellc/lienzo-core").CoreElementType;
+                    props: {
+                        text?: string | null | undefined;
+                        level?: number | null | undefined;
+                        src?: string | null | undefined;
+                        alt?: string | null | undefined;
+                        label?: string | null | undefined;
+                        url?: string | null | undefined;
+                        icon?: string | null | undefined;
+                        sticky?: boolean | null | undefined;
+                        scroll_style?: "shadow" | "same" | "solid" | "compact" | null | undefined;
+                        stroke?: number | null | undefined;
+                        accent?: string | null | undefined;
+                        shape?: "rectangle" | "ellipse" | "triangle" | "blob" | "arch" | "diagonal" | "dots" | "grid" | null | undefined;
+                        placeholder?: string | null | undefined;
+                        required?: boolean | null | undefined;
+                        input_type?: "number" | "text" | "email" | "date" | "tel" | null | undefined;
+                        options?: string[] | null | undefined;
+                        multiple?: boolean | null | undefined;
+                        brand?: string | null | undefined;
+                        layout?: "left" | "center" | "split" | null | undefined;
+                        template?: "plain" | "pill" | "card" | "underline" | "divided" | null | undefined;
+                        links?: {
+                            label: string;
+                            action: {
+                                type: string;
+                                value?: string | null | undefined;
+                            };
+                        }[] | null | undefined;
+                        action?: {
+                            type?: string | null | undefined;
+                            value?: string | null | undefined;
+                        } | null | undefined;
+                    };
+                } | {
+                    id: string;
+                    group?: string | null | undefined;
+                    z: number;
+                    locked?: boolean | null | undefined;
+                    layout: {
+                        desktop: {
+                            x: number;
+                            y: number;
+                            w: number;
+                            h: number;
+                        };
+                        mobile?: {
+                            x: number;
+                            y: number;
+                            w: number;
+                            h: number;
+                        } | null | undefined;
+                    };
+                    style: {
+                        color?: string | null | undefined;
+                        background?: string | null | undefined;
+                        font?: "heading" | "body" | null | undefined;
+                        size?: number | null | undefined;
+                        weight?: 500 | 300 | 400 | 600 | 700 | 800 | null | undefined;
+                        align?: "left" | "center" | "right" | null | undefined;
+                        line_height?: number | null | undefined;
+                        radius?: number | null | undefined;
+                        border_width?: number | null | undefined;
+                        border_color?: string | null | undefined;
+                        padding?: number | null | undefined;
+                        opacity?: number | null | undefined;
+                        shadow?: "none" | "custom" | "sm" | "md" | "lg" | null | undefined;
+                        shadow_custom?: {
+                            x?: number | null | undefined;
+                            y?: number | null | undefined;
+                            blur?: number | null | undefined;
+                            spread?: number | null | undefined;
+                            color?: string | null | undefined;
+                            opacity?: number | null | undefined;
+                        } | null | undefined;
+                        object_fit?: "cover" | "contain" | null | undefined;
+                        gradient?: {
+                            type?: "linear" | "radial" | null | undefined;
+                            from?: string | null | undefined;
+                            to?: string | null | undefined;
+                            angle?: number | null | undefined;
+                        } | null | undefined;
+                        background_opacity?: number | null | undefined;
+                        blur?: number | null | undefined;
+                        rotate?: number | null | undefined;
+                        flip_x?: boolean | null | undefined;
+                        flip_y?: boolean | null | undefined;
+                        clip?: boolean | null | undefined;
+                        pinned?: boolean | null | undefined;
+                        overflow?: "visible" | "hidden" | "scroll-x" | "scroll-y" | null | undefined;
+                        visible_on?: "desktop" | "mobile" | "all" | null | undefined;
+                        accent_color?: string | null | undefined;
+                        hover?: "none" | "lift" | "grow" | "fade" | null | undefined;
+                        animation?: {
+                            type?: "left" | "right" | "none" | "fade" | "up" | "down" | "zoom" | null | undefined;
+                            delay?: number | null | undefined;
+                            duration?: number | null | undefined;
+                        } | null | undefined;
+                    };
+                    type: string;
+                    props: Readonly<Record<string, import("@skylivellc/lienzo-core").FieldValue | undefined>>;
+                } | {
+                    id: string;
+                    group?: string | null | undefined;
+                    z: number;
+                    locked?: boolean | null | undefined;
+                    layout: {
+                        desktop: {
+                            x: number;
+                            y: number;
+                            w: number;
+                            h: number;
+                        };
+                        mobile?: {
+                            x: number;
+                            y: number;
+                            w: number;
+                            h: number;
+                        } | null | undefined;
+                    };
+                    style: {
+                        color?: string | null | undefined;
+                        background?: string | null | undefined;
+                        font?: "heading" | "body" | null | undefined;
+                        size?: number | null | undefined;
+                        weight?: 500 | 300 | 400 | 600 | 700 | 800 | null | undefined;
+                        align?: "left" | "center" | "right" | null | undefined;
+                        line_height?: number | null | undefined;
+                        radius?: number | null | undefined;
+                        border_width?: number | null | undefined;
+                        border_color?: string | null | undefined;
+                        padding?: number | null | undefined;
+                        opacity?: number | null | undefined;
+                        shadow?: "none" | "custom" | "sm" | "md" | "lg" | null | undefined;
+                        shadow_custom?: {
+                            x?: number | null | undefined;
+                            y?: number | null | undefined;
+                            blur?: number | null | undefined;
+                            spread?: number | null | undefined;
+                            color?: string | null | undefined;
+                            opacity?: number | null | undefined;
+                        } | null | undefined;
+                        object_fit?: "cover" | "contain" | null | undefined;
+                        gradient?: {
+                            type?: "linear" | "radial" | null | undefined;
+                            from?: string | null | undefined;
+                            to?: string | null | undefined;
+                            angle?: number | null | undefined;
+                        } | null | undefined;
+                        background_opacity?: number | null | undefined;
+                        blur?: number | null | undefined;
+                        rotate?: number | null | undefined;
+                        flip_x?: boolean | null | undefined;
+                        flip_y?: boolean | null | undefined;
+                        clip?: boolean | null | undefined;
+                        pinned?: boolean | null | undefined;
+                        overflow?: "visible" | "hidden" | "scroll-x" | "scroll-y" | null | undefined;
+                        visible_on?: "desktop" | "mobile" | "all" | null | undefined;
+                        accent_color?: string | null | undefined;
+                        hover?: "none" | "lift" | "grow" | "fade" | null | undefined;
+                        animation?: {
+                            type?: "left" | "right" | "none" | "fade" | "up" | "down" | "zoom" | null | undefined;
+                            delay?: number | null | undefined;
+                            duration?: number | null | undefined;
+                        } | null | undefined;
+                    };
+                    type: string;
+                    props: Readonly<Record<string, unknown>>;
+                })[];
+            }[] | null | undefined;
+        };
+        revision: number;
+        device: Device;
+        view: {
+            kind: "page";
+        } | {
+            kind: "modal";
+            id: string;
+        };
+        selection: {
+            kind: "none";
+        } | {
+            kind: "canvas";
+            canvas: string;
+        } | {
+            kind: "elements";
+            canvas: string;
+            ids: string[];
+            active: string;
+        };
+        previewing: boolean;
+        dialog: Dialog;
+        library: {
+            onPick: ((ref: string) => void) | null;
+        } | null;
+        themeDraft: {
+            primary: string;
+            secondary: string;
+            background: string;
+            surface: string;
+            text: string;
+            muted: string;
+            heading_font: string;
+            body_font: string;
+            radius: number;
+            max_width: number;
+        } | null;
+        panels: Record<string, number>;
+        zoom: number | null;
+        renderIssues: {
+            path: string;
+            code: "type" | "range" | "pattern" | "enum" | "size" | "required" | "unique";
+            message: string;
+        }[];
+        publishing: boolean;
+        toasts: {
+            id: number;
+            tone: "info" | "error";
+            text: string;
+        }[];
+    };
+    i18n: Translator;
+    t: (key: import("../index.ts").MessageKey, params?: Readonly<Record<string, string | number>>) => string;
+    client: Client;
+    previews: import("./previews.ts").Previews;
+    saveState: import("vue").ShallowRef<import("./autosave.ts").SaveState>;
+    catalog: import("vue").ComputedRef<Catalog>;
+    site: import("vue").ComputedRef<Parsed<SiteSettings>>;
+    theme: import("vue").ComputedRef<{
+        primary: string;
+        secondary: string;
+        background: string;
+        surface: string;
+        text: string;
+        muted: string;
+        heading_font: string;
+        body_font: string;
+        radius: number;
+        max_width: number;
+    }>;
+    canvases: import("vue").ComputedRef<Canvas[]>;
+    activeModal: import("vue").ComputedRef<Modal | null>;
+    currentCanvas: import("vue").ComputedRef<Canvas | null>;
+    selectedElements: import("vue").ComputedRef<Element[]>;
+    activeElement: import("vue").ComputedRef<Element | null>;
+    frameWidth: import("vue").ComputedRef<number>;
+    canUndo: import("vue").ComputedRef<boolean>;
+    canRedo: import("vue").ComputedRef<boolean>;
+    kindOf: (element: Element) => import("../model/elements.ts").ElementKind;
+    notify: (text: string, tone?: Toast["tone"]) => void;
+    failureText: (failure: Failure) => string;
+    dismiss: (id: number) => void;
+    load: () => Promise<void>;
+    openPage: (id: number) => Promise<void>;
+    reloadPage: () => Promise<void>;
+    commit: () => void;
+    undo: () => void;
+    redo: () => void;
+    select: (canvasId: string, elementId: string, additive?: boolean) => void;
+    selectCanvas: (canvasId: string) => void;
+    clearSelection: () => void;
+    addElement: (insertable: Insertable, at?: {
+        canvas: string;
+        x: number;
+        y: number;
+    }, src?: string) => void;
+    removeSelected: () => void;
+    duplicateSelected: () => void;
+    copySelected: () => void;
+    paste: () => void;
+    layer: (step: "front" | "back") => void;
+    align: (where: Alignment) => void;
+    distributeSelected: (axis: "x" | "y") => void;
+    sharedTarget: () => Element | null;
+    groupSelected: () => void;
+    ungroupSelected: () => void;
+    toggleLock: () => void;
+    nudge: (dx: number, dy: number) => void;
+    placeElements: (boxes: readonly {
+        id: string;
+        box: Element["layout"]["desktop"];
+    }[]) => void;
+    addSection: (section?: Section) => void;
+    applyPageTemplate: (key: PageTemplateKey) => void;
+    removeSection: (id: string) => void;
+    moveSection: (index: number, step: -1 | 1) => void;
+    setSectionGroup: (section: Section, mode: "alone" | "tabs" | "steps") => void;
+    fitCanvas: (canvas: Canvas) => void;
+    generateMobile: (canvas: Canvas) => void;
+    addModal: () => void;
+    openModal: (id: string | null) => void;
+    removeModal: (id: string) => void;
+    saveNow: () => Promise<void>;
+    publish: () => Promise<void>;
+    restoreVersion: (version: number) => Promise<void>;
+    createPage: (title: string, slug: string) => Promise<Issue[]>;
+    renamePage: (slug: string) => Promise<Issue[]>;
+    deletePage: () => Promise<void>;
+    updateSite: (update: SiteUpdate) => Promise<Issue[]>;
+    uploadAsset: (file: File) => Promise<Asset | null>;
+    deleteAsset: (asset: Asset) => Promise<void>;
+    openLibrary: (onPick?: ((ref: string) => void) | null) => void;
+    dialogModel: (name: Exclude<Dialog, null>) => WritableComputedRef<boolean>;
+    dispose: () => void;
+};
+export declare const issueText: (issue: Issue | undefined) => string;