@cosmicdrift/kumiko-document-designer 0.388.0 → 0.390.0

package/dist/web/use-layout-editor-state.d.ts

@@ -0,0 +1,62 @@
+import { type EditorTab, type Region, type Translate } from "./layout-editor-logic.ts";
+import type { BrandingView, LayoutKind, LayoutSourceView, LayoutValidation, TenantOverrideCounts } from "./layout-types.ts";
+import type { OverviewRowView } from "./overview-row.ts";
+export type LayoutEditorBodyProps = {
+    readonly kind: LayoutKind;
+    readonly slug: string;
+    readonly isSystemAdmin: boolean;
+    readonly source: LayoutSourceView;
+    readonly overviewRows: readonly OverviewRowView[];
+    readonly usedByCount: number;
+    readonly overrides: TenantOverrideCounts | null;
+    readonly onKindChange: (kind: LayoutKind) => void;
+    readonly onReload: () => Promise<void>;
+};
+export declare function useLayoutEditorState(props: LayoutEditorBodyProps, t: Translate): {
+    isMail: boolean;
+    showMjmlTab: boolean;
+    tab: EditorTab;
+    setTab: import("react").Dispatch<import("react").SetStateAction<EditorTab>>;
+    header: string;
+    setHeader: import("react").Dispatch<import("react").SetStateAction<string>>;
+    signature: string;
+    setSignature: import("react").Dispatch<import("react").SetStateAction<string>>;
+    footer: string;
+    setFooter: import("react").Dispatch<import("react").SetStateAction<string>>;
+    mjml: string;
+    setMjml: import("react").Dispatch<import("react").SetStateAction<string>>;
+    appearance: import("./layout-meta.ts").LayoutAppearance;
+    setAppearance: import("react").Dispatch<import("react").SetStateAction<import("./layout-meta.ts").LayoutAppearance>>;
+    activeRegion: Region;
+    setActiveRegion: import("react").Dispatch<import("react").SetStateAction<Region>>;
+    toolbarHost: HTMLElement | null;
+    setToolbarHost: import("react").Dispatch<import("react").SetStateAction<HTMLElement | null>>;
+    pendingKind: LayoutKind | null;
+    setPendingKind: import("react").Dispatch<import("react").SetStateAction<LayoutKind | null>>;
+    saveError: string | null;
+    setSaveError: import("react").Dispatch<import("react").SetStateAction<string | null>>;
+    branding: import("@cosmicdrift/kumiko-renderer").UseQueryResult<BrandingView>;
+    mjmlMode: boolean;
+    appearanceFromMjml: boolean;
+    dirty: boolean;
+    checked: LayoutValidation | null;
+    shownRow: import("./layout-types.ts").LayoutSourceRow | null;
+    userCount: number;
+    placeholders: readonly string[];
+    placeholderLabels: Readonly<Record<string, string>>;
+    requestKind: (next: LayoutKind) => void;
+    save: (publish: boolean) => Promise<void>;
+    busy: boolean;
+    canSave: boolean;
+    canPublish: boolean;
+    footerMessage: import("./layout-editor-logic.ts").FooterMessage;
+    accentColor: string;
+    showAccentLine: boolean;
+    blocks: ("align" | "button" | "divider" | "image" | "pageBreak" | "repeat" | "table")[];
+    resourcePreviews: Readonly<Record<string, {
+        readonly src: string;
+        readonly caption: string;
+    }>> | undefined;
+    discard: () => void;
+};
+export type LayoutEditorModel = ReturnType<typeof useLayoutEditorState>;

package/dist/web/use-layout-editor-state.js

@@ -0,0 +1,155 @@
+import { TemplateResolverHandlers, TemplateResolverQueries, } from "@cosmicdrift/kumiko-bundled-features/template-resolver/web";
+import { useMutation, useQuery } from "@cosmicdrift/kumiko-renderer";
+import { useState } from "react";
+import { BRANDING_QUERY_QN } from "./constants.js";
+import { accentLineShown, appearanceFlags, footerMessageOf, initialTab, layoutBlocks, layoutContent, layoutDirty, layoutSaveFlags, resourcePreviewsOf, saveLayout, shownRowOf, } from "./layout-editor-logic.js";
+import { appearanceOf } from "./layout-meta.js";
+import { systemLabelMap } from "./mail-draft.js";
+import { useDebouncedValue } from "./use-debounced-value.js";
+// Server-side validation compiles the whole layout (mjml), so wait for a pause in typing.
+const VALIDATE_DEBOUNCE_MS = 400;
+export function useLayoutEditorState(props, t) {
+    const { kind, slug, isSystemAdmin, source, usedByCount, onKindChange, onReload } = props;
+    const isMail = kind === "mail-layout";
+    const showMjmlTab = isSystemAdmin && source.mjmlSource !== null;
+    const [tab, setTab] = useState(initialTab(showMjmlTab, source));
+    const [header, setHeader] = useState(source.regions.header);
+    const [signature, setSignature] = useState(source.regions.signature);
+    const [footer, setFooter] = useState(source.regions.footer);
+    const [mjml, setMjml] = useState(source.mjmlSource ?? "");
+    const storedAppearance = appearanceOf(source.meta);
+    const [appearance, setAppearance] = useState(storedAppearance);
+    const [activeRegion, setActiveRegion] = useState("header");
+    const [toolbarHost, setToolbarHost] = useState(null);
+    const [pendingKind, setPendingKind] = useState(null);
+    const [saveError, setSaveError] = useState(null);
+    const upsertTenant = useMutation(TemplateResolverHandlers.upsertTenant);
+    const upsertSystem = useMutation(TemplateResolverHandlers.upsertSystem);
+    const publishSystem = useMutation(TemplateResolverHandlers.publishSystem);
+    const branding = useQuery(BRANDING_QUERY_QN, {});
+    const mjmlMode = tab === "mjml";
+    const { appearanceFromMjml, appearanceEditable, appearanceValid } = appearanceFlags({
+        isMail,
+        mjmlMode,
+        source,
+        appearance,
+    });
+    const dirty = layoutDirty({
+        mjmlMode,
+        mjml,
+        header,
+        signature,
+        footer,
+        appearance,
+        storedAppearance,
+        appearanceEditable,
+        source,
+    });
+    const content = layoutContent({ mjmlMode, mjml, header, signature, footer, isMail });
+    const debouncedContent = useDebouncedValue(content, VALIDATE_DEBOUNCE_MS);
+    const validation = useQuery(TemplateResolverQueries.validate, {
+        slug,
+        kind,
+        contentFormat: mjmlMode ? "mjml" : "html",
+        content: debouncedContent,
+        locale: source.locale,
+        scope: isSystemAdmin ? "system" : "tenant",
+    });
+    const checked = validation.data;
+    const shownRow = shownRowOf(isSystemAdmin, source);
+    const userCount = usedByCount;
+    const placeholders = checked?.systemPlaceholders ?? [];
+    const placeholderLabels = systemLabelMap(t, placeholders);
+    const requestKind = (next) => {
+        // skip: the requested kind is already open
+        if (next === kind)
+            return;
+        if (dirty)
+            setPendingKind(next);
+        else
+            onKindChange(next);
+    };
+    const save = (publish) => saveLayout({
+        publish,
+        kind,
+        slug,
+        source,
+        content,
+        mjmlMode,
+        isMail,
+        isSystemAdmin,
+        appearanceEditable,
+        appearance,
+        t,
+        upsertTenant,
+        upsertSystem,
+        publishSystem,
+        setSaveError,
+        onReload,
+    });
+    const busy = upsertTenant.pending || upsertSystem.pending || publishSystem.pending;
+    const { canSave, canPublish } = layoutSaveFlags({
+        dirty,
+        checked,
+        appearanceValid,
+        busy,
+        shownRow,
+    });
+    const footerMessage = footerMessageOf({ t, checked, appearanceValid, isMail, userCount });
+    const accentColor = branding.data?.accentColor ?? "";
+    const showAccentLine = accentLineShown({ isMail, appearanceEditable, appearance, accentColor });
+    const blocks = layoutBlocks(isMail);
+    const resourcePreviews = resourcePreviewsOf(branding.data, isMail, t);
+    const discard = () => {
+        setHeader(source.regions.header);
+        setSignature(source.regions.signature);
+        setFooter(source.regions.footer);
+        setMjml(source.mjmlSource ?? "");
+        setAppearance(storedAppearance);
+        setSaveError(null);
+    };
+    return {
+        isMail,
+        showMjmlTab,
+        tab,
+        setTab,
+        header,
+        setHeader,
+        signature,
+        setSignature,
+        footer,
+        setFooter,
+        mjml,
+        setMjml,
+        appearance,
+        setAppearance,
+        activeRegion,
+        setActiveRegion,
+        toolbarHost,
+        setToolbarHost,
+        pendingKind,
+        setPendingKind,
+        saveError,
+        setSaveError,
+        branding,
+        mjmlMode,
+        appearanceFromMjml,
+        dirty,
+        checked,
+        shownRow,
+        userCount,
+        placeholders,
+        placeholderLabels,
+        requestKind,
+        save,
+        busy,
+        canSave,
+        canPublish,
+        footerMessage,
+        accentColor,
+        showAccentLine,
+        blocks,
+        resourcePreviews,
+        discard,
+    };
+}

package/dist/web/use-mail-editor-parts.d.ts

@@ -0,0 +1,42 @@
+import type { EditorMode } from "./editor-header.tsx";
+import type { ConfirmDialog } from "./mail-dialogs.tsx";
+import type { MailEditorBodyProps } from "./mail-editor-logic.ts";
+export declare function useMailUiState(row: MailEditorBodyProps["row"]): {
+    baseline: import("./mail-types.ts").MailDraft;
+    draft: import("./mail-types.ts").MailDraft;
+    setDraft: import("react").Dispatch<import("react").SetStateAction<import("./mail-types.ts").MailDraft>>;
+    settled: import("./mail-types.ts").MailDraft;
+    settle: (next: import("./mail-types.ts").MailDraft) => void;
+    mode: EditorMode;
+    setMode: import("react").Dispatch<import("react").SetStateAction<EditorMode>>;
+    creating: boolean;
+    setCreating: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    dialog: ConfirmDialog;
+    setDialog: import("react").Dispatch<import("react").SetStateAction<ConfirmDialog>>;
+    uploadOpen: boolean;
+    setUploadOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    pdfOpen: boolean;
+    setPdfOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    resourceError: string | null;
+    setResourceError: import("react").Dispatch<import("react").SetStateAction<string | null>>;
+    resetError: string | null;
+    setResetError: import("react").Dispatch<import("react").SetStateAction<string | null>>;
+    editorEpoch: number;
+    setEditorEpoch: import("react").Dispatch<import("react").SetStateAction<number>>;
+    includeAttachments: boolean;
+    setIncludeAttachments: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    prefixSubject: boolean;
+    setPrefixSubject: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+};
+export type MailUiState = ReturnType<typeof useMailUiState>;
+export type MailServices = ReturnType<typeof useMailServices>;
+export declare function useMailServices(props: MailEditorBodyProps): {
+    insert: import("./use-insert-targets.ts").InsertTargets;
+    persistence: import("./use-mail-persistence.ts").MailPersistence;
+    testMail: import("./use-test-mail.ts").TestMail;
+    own: import("./use-own-address.ts").OwnAddress;
+    filesAvailable: boolean;
+    resourceRemove: import("@cosmicdrift/kumiko-renderer").UseMutationResult<unknown>;
+    layouts: import("./use-overview-rows.ts").OverviewRows;
+    pdfTemplates: import("./use-overview-rows.ts").OverviewRows;
+};

package/dist/web/use-mail-editor-parts.js

@@ -0,0 +1,74 @@
+import { TemplateResolverHandlers } from "@cosmicdrift/kumiko-bundled-features/template-resolver/web";
+import { useMutation } from "@cosmicdrift/kumiko-renderer";
+import { useState } from "react";
+import { loadedMailOf } from "./mail-draft.js";
+import { useFilesCapability } from "./use-files-capability.js";
+import { useInsertTargets } from "./use-insert-targets.js";
+import { useMailPersistence } from "./use-mail-persistence.js";
+import { useOverviewRows } from "./use-overview-rows.js";
+import { useOwnAddress } from "./use-own-address.js";
+import { useSettledValue } from "./use-settled-value.js";
+import { useTestMail } from "./use-test-mail.js";
+export function useMailUiState(row) {
+    const [baseline] = useState(() => loadedMailOf(row));
+    const [draft, setDraft] = useState(baseline);
+    const [settled, settle] = useSettledValue(baseline);
+    const [mode, setMode] = useState("edit");
+    const [creating, setCreating] = useState(false);
+    const [dialog, setDialog] = useState({ kind: "none" });
+    const [uploadOpen, setUploadOpen] = useState(false);
+    const [pdfOpen, setPdfOpen] = useState(false);
+    const [resourceError, setResourceError] = useState(null);
+    const [resetError, setResetError] = useState(null);
+    const [editorEpoch, setEditorEpoch] = useState(0);
+    const [includeAttachments, setIncludeAttachments] = useState(true);
+    const [prefixSubject, setPrefixSubject] = useState(true);
+    return {
+        baseline,
+        draft,
+        setDraft,
+        settled,
+        settle,
+        mode,
+        setMode,
+        creating,
+        setCreating,
+        dialog,
+        setDialog,
+        uploadOpen,
+        setUploadOpen,
+        pdfOpen,
+        setPdfOpen,
+        resourceError,
+        setResourceError,
+        resetError,
+        setResetError,
+        editorEpoch,
+        setEditorEpoch,
+        includeAttachments,
+        setIncludeAttachments,
+        prefixSubject,
+        setPrefixSubject,
+    };
+}
+export function useMailServices(props) {
+    const { slug, locale, title, isSystemAdmin, row } = props;
+    const insert = useInsertTargets();
+    const persistence = useMailPersistence({ slug, locale, title, isSystemAdmin, row });
+    const testMail = useTestMail();
+    const own = useOwnAddress();
+    const filesAvailable = useFilesCapability();
+    const resourceRemove = useMutation(TemplateResolverHandlers.resourceRemove);
+    const layouts = useOverviewRows("mail-layout");
+    const pdfTemplates = useOverviewRows("document-pdf");
+    return {
+        insert,
+        persistence,
+        testMail,
+        own,
+        filesAvailable,
+        resourceRemove,
+        layouts,
+        pdfTemplates,
+    };
+}

package/dist/web/use-mail-editor-state.d.ts

@@ -0,0 +1,89 @@
+import type { MailEditorBodyProps } from "./mail-editor-logic.ts";
+import type { MailValidation, PickedValues } from "./mail-types.ts";
+type Translate = (key: string, params?: Readonly<Record<string, unknown>>) => string;
+export declare function useMailEditorState(props: MailEditorBodyProps, t: Translate): {
+    update: (patch: Partial<import("./mail-types.ts").MailDraft>) => void;
+    reset: () => void;
+    saveAndReload: (publish: boolean) => Promise<void>;
+    perform: (target: import("./mail-dialogs.tsx").LeaveTarget) => void;
+    leave: (target: import("./mail-dialogs.tsx").LeaveTarget) => void;
+    leaveSave: (target: import("./mail-dialogs.tsx").LeaveTarget) => Promise<void>;
+    removeResource: (key: string) => Promise<void>;
+    sendTestMail: () => void;
+    ui: {
+        baseline: import("./mail-types.ts").MailDraft;
+        draft: import("./mail-types.ts").MailDraft;
+        setDraft: import("react").Dispatch<import("react").SetStateAction<import("./mail-types.ts").MailDraft>>;
+        settled: import("./mail-types.ts").MailDraft;
+        settle: (next: import("./mail-types.ts").MailDraft) => void;
+        mode: import("./editor-header.tsx").EditorMode;
+        setMode: import("react").Dispatch<import("react").SetStateAction<import("./editor-header.tsx").EditorMode>>;
+        creating: boolean;
+        setCreating: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+        dialog: import("./mail-dialogs.tsx").ConfirmDialog;
+        setDialog: import("react").Dispatch<import("react").SetStateAction<import("./mail-dialogs.tsx").ConfirmDialog>>;
+        uploadOpen: boolean;
+        setUploadOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+        pdfOpen: boolean;
+        setPdfOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+        resourceError: string | null;
+        setResourceError: import("react").Dispatch<import("react").SetStateAction<string | null>>;
+        resetError: string | null;
+        setResetError: import("react").Dispatch<import("react").SetStateAction<string | null>>;
+        editorEpoch: number;
+        setEditorEpoch: import("react").Dispatch<import("react").SetStateAction<number>>;
+        includeAttachments: boolean;
+        setIncludeAttachments: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+        prefixSubject: boolean;
+        setPrefixSubject: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    };
+    services: {
+        insert: import("./use-insert-targets.ts").InsertTargets;
+        persistence: import("./use-mail-persistence.ts").MailPersistence;
+        testMail: import("./use-test-mail.ts").TestMail;
+        own: import("./use-own-address.ts").OwnAddress;
+        filesAvailable: boolean;
+        resourceRemove: import("@cosmicdrift/kumiko-renderer").UseMutationResult<unknown>;
+        layouts: import("./use-overview-rows.ts").OverviewRows;
+        pdfTemplates: import("./use-overview-rows.ts").OverviewRows;
+    };
+    validation: MailValidation | null;
+    picked: Readonly<Record<string, unknown>> | null;
+    setPicked: (next: PickedValues | null) => void;
+    pickedVariables: Readonly<Record<string, unknown>> | null;
+    variableSchema: Readonly<Record<string, unknown>>;
+    locked: boolean;
+    dirty: boolean;
+    busy: boolean;
+    canSave: boolean;
+    canPublish: boolean;
+    resources: readonly import("./mail-types.ts").LinkedResourceView[];
+    pdfTitles: Map<string, string>;
+    uploadTemplateId: string | null;
+    takenKeys: string[];
+    attachments: ({
+        readonly kind: "file";
+        readonly key: string;
+        readonly fileRefId: string;
+        readonly fileName: string;
+    } | {
+        readonly kind: "pdf";
+        readonly key: string;
+        readonly templateSlug: string;
+        readonly fileName: string;
+    })[];
+    resourcePreviews: {
+        [k: string]: {
+            src: string;
+            caption: string;
+        };
+    };
+    railValidation: MailValidation | null;
+    vocabulary: import("./mail-edit-center.tsx").EditorVocabulary;
+    footer: {
+        readonly tone: "bad" | "warn" | "ok";
+        readonly text: string;
+    } | null;
+    fieldErrors: Partial<Record<"previewText" | "subject", string>>;
+};
+export {};

package/dist/web/use-mail-editor-state.js

@@ -0,0 +1,55 @@
+import { TemplateResolverQueries } from "@cosmicdrift/kumiko-bundled-features/template-resolver/web";
+import { useQuery, useUnsavedInputSource } from "@cosmicdrift/kumiko-renderer";
+import { useEffect, useRef, useState } from "react";
+import { buildMeta, isDraftDirty, parseJsonRecord, pickDeclaredVariables } from "./mail-draft.js";
+import { buildMailModel } from "./mail-editor-model.js";
+import { useMailServices, useMailUiState } from "./use-mail-editor-parts.js";
+export function useMailEditorState(props, t) {
+    const { slug, locale, isSystemAdmin, row } = props;
+    const ui = useMailUiState(row);
+    const [picked, setPicked] = useState(null);
+    const services = useMailServices(props);
+    const locked = row === null && !ui.creating;
+    const variableSchema = parseJsonRecord(row?.variableSchema);
+    const validation = useQuery(TemplateResolverQueries.validate, {
+        slug,
+        kind: "mail",
+        contentFormat: "html",
+        content: ui.settled.body,
+        meta: buildMeta(ui.settled),
+        variableSchema,
+        locale,
+        scope: isSystemAdmin ? "system" : "tenant",
+    }).data;
+    const pickedVariables = pickDeclaredVariables(picked, validation?.variables);
+    // A pick belongs to the variables it was made for: after the declared set changes it is dropped,
+    // so a re-added variable does not revive an old record value.
+    const declaredVariables = validation?.variables;
+    const declaredVariableNames = declaredVariables === undefined ? null : Object.keys(declaredVariables).sort().join("|");
+    const previousDeclaredNames = useRef(declaredVariableNames);
+    useEffect(() => {
+        // skip: validation has not loaded, so there is no declared set to compare
+        if (declaredVariableNames === null)
+            return;
+        if (previousDeclaredNames.current !== null &&
+            previousDeclaredNames.current !== declaredVariableNames) {
+            setPicked(null);
+        }
+        previousDeclaredNames.current = declaredVariableNames;
+    }, [declaredVariableNames]);
+    const dirty = isDraftDirty(ui.draft, ui.baseline);
+    useUnsavedInputSource(() => dirty);
+    return buildMailModel({
+        props,
+        t,
+        ui,
+        picked,
+        setPicked,
+        services,
+        validation,
+        variableSchema,
+        pickedVariables,
+        locked,
+        dirty,
+    });
+}

package/dist/web/use-pdf-editor-state.d.ts

@@ -0,0 +1,77 @@
+import type { EditorMode } from "./editor-header.tsx";
+import { type EditorState, type GeneratedPdf } from "./pdf-editor-draft.ts";
+import { type PuppeteerStatus, type TemplateDetail, type TemplateListRow, type TemplateScope, type TenantOverrides, type ValidationResult } from "./types.ts";
+type Translate = (key: string, params?: Readonly<Record<string, unknown>>) => string;
+export declare function usePdfEditorState(input: {
+    readonly slug: string;
+    readonly requestedLocale: string | undefined;
+}, t: Translate): {
+    host: {
+        insert: import("./use-insert-targets.ts").InsertTargets;
+        filesAvailable: boolean;
+        overview: import("./use-overview-rows.ts").OverviewRows;
+        scope: TemplateScope;
+    };
+    doc: {
+        rowsQuery: import("@cosmicdrift/kumiko-renderer").UseQueryResult<readonly TemplateListRow[]>;
+        locales: readonly string[];
+        locale: string;
+        row: TemplateListRow | undefined;
+        detailQuery: import("@cosmicdrift/kumiko-renderer").UseQueryResult<TemplateDetail | null>;
+        detail: TemplateDetail | null;
+        setState: import("react").Dispatch<import("react").SetStateAction<EditorState | null>>;
+        current: EditorState | null;
+    };
+    settleTimer: import("react").RefObject<NodeJS.Timeout | null>;
+    ui: {
+        overridesOpen: boolean;
+        setOverridesOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+        draftEpoch: number;
+        setDraftEpoch: import("react").Dispatch<import("react").SetStateAction<number>>;
+        mode: EditorMode;
+        setMode: import("react").Dispatch<import("react").SetStateAction<EditorMode>>;
+        busy: "pdf" | "publish" | "save" | null;
+        setBusy: import("react").Dispatch<import("react").SetStateAction<"pdf" | "publish" | "save" | null>>;
+        actionError: string | null;
+        setActionError: import("react").Dispatch<import("react").SetStateAction<string | null>>;
+        generated: GeneratedPdf | null;
+        setGenerated: import("react").Dispatch<import("react").SetStateAction<GeneratedPdf | null>>;
+        autoPrintedFor: import("react").RefObject<string | null>;
+        pendingLocale: string | null;
+        setPendingLocale: import("react").Dispatch<import("react").SetStateAction<string | null>>;
+    };
+    server: {
+        variableSchema: Record<string, unknown>;
+        validationQuery: import("@cosmicdrift/kumiko-renderer").UseQueryResult<ValidationResult>;
+        validation: ValidationResult | null;
+        layout: {
+            readonly slug: string;
+            readonly scope: TemplateScope;
+            readonly html: string;
+            readonly regions: import("./types.ts").LayoutRegionsHtml;
+        } | null;
+        layouts: import("./use-overview-rows.ts").OverviewRows;
+        brandingLogoFile: string;
+        statusQuery: import("@cosmicdrift/kumiko-renderer").UseQueryResult<PuppeteerStatus>;
+        showOrigin: boolean;
+        overridesQuery: import("@cosmicdrift/kumiko-renderer").UseQueryResult<TenantOverrides>;
+    };
+    vocabulary: {
+        variables: Readonly<Record<string, import("./mail-types.ts").MailVariable>>;
+        imageVariables: string[];
+        systemVariables: readonly string[];
+        systemLabels: Readonly<Record<string, string>>;
+        variableLabels: {
+            [x: string]: string;
+        };
+        variableNames: string[];
+        resourcePreviews: {
+            [k: string]: {
+                src: string;
+                caption: string;
+            };
+        };
+    };
+};
+export type PdfEditorState = ReturnType<typeof usePdfEditorState>;
+export {};