@bluepic/embed 0.4.0-next.166 → 0.4.0-next.168

package/dist/components/BxTable.vue.d.ts

@@ -7,10 +7,17 @@ export interface BxTableColumn {
     width?: string;
     /** Header text for assistive tech only, e.g. an actions column. */
     srOnlyLabel?: boolean;
+    /** Class(es) put on the header cell — the caller puts the same on its `<td>`s. */
+    class?: string;
+    /**
+     * Pin the column while the table scrolls sideways. Pinned columns must be
+     * the outermost ones (the first N / the last N); anything else is ignored.
+     */
+    sticky?: 'left' | 'right';
 }
 /**
- * A table's chrome: the scroll container, the border, the header, row hover and
- * per-column alignment.
+ * A table's chrome: the scroll container, the border, the header, row hover,
+ * per-column alignment, pinned header/columns and row states.
  *
  * The BODY is a slot rather than a `rows` prop on purpose. Real tables wrap
  * their rows — the studio's org list puts every `<tr>` inside a
@@ -19,10 +26,15 @@ export interface BxTableColumn {
  * keeps its `<tr>`s and this owns everything around them, which is the part
  * that was being re-written per app.
  *
- * Alignment reaches app-authored cells through custom properties rather than
- * classes the caller would have to remember: each column publishes
- * `--col-N-align`, and the static rules below read it. Eight columns is the
- * supported width; past that, a table is a different problem.
+ * Alignment and pinning reach app-authored cells through custom properties
+ * rather than classes the caller would have to remember: each column publishes
+ * `--col-N-align` (and, when pinned, `--col-N-position/left/right/z`), and the
+ * static rules below read them. Twenty-four columns is the supported width.
+ *
+ * Row states are read off ATTRIBUTES on the caller's `<tr>`, so a table stays
+ * a table for assistive tech:
+ *   - `aria-current="true"`  → the ACTIVE row (themed inset ring)
+ *   - `aria-selected="true"` → a SELECTED row (soft primary background)
  */
 type __VLS_Props = {
     columns?: BxTableColumn[];
@@ -41,17 +53,50 @@ type __VLS_Props = {
     /** Row highlight on hover. Off unless rows actually do something. */
     hoverable?: boolean;
     dense?: boolean;
+    /** Keep the header row visible while the body scrolls vertically. */
+    stickyHeader?: boolean;
+    /**
+     * Fill the parent (a flex column) and scroll INSIDE the wrapper in both
+     * axes, instead of growing with the rows. Momentum scrolling and contained
+     * overscroll come with it, so the page never scrolls sideways.
+     */
+    fill?: boolean;
+    /** Cap the wrapper's height; the body scrolls beyond it. */
+    maxHeight?: string;
+    /**
+     * Pin the first `left` / last `right` columns while scrolling sideways.
+     * The per-column `sticky` field is the other way to say the same thing.
+     */
+    stickyColumns?: {
+        left?: number;
+        right?: number;
+    };
 };
 type __VLS_Slots = {
     default?: () => VNode[] | VNode;
+    /** Replaces a header cell's label; the column def and its index come along. */
+    'header-cell'?: (scope: {
+        column: BxTableColumn;
+        index: number;
+    }) => VNode[] | VNode;
 };
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
+    /** The scroll container, for `scrollIntoView` on a row or programmatic scrolling. */
+    wrapperRef: import("vue").Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    fill: boolean;
     bordered: boolean;
     hoverable: boolean;
     radius: "none" | "sm" | "md" | "lg";
+    maxHeight: string;
     variant: "plain" | "card";
     columns: BxTableColumn[];
     dense: boolean;
+    stickyHeader: boolean;
+    stickyColumns: {
+        left?: number;
+        right?: number;
+    };
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/components/TemplateEditor/BatchCell.vue.d.ts

@@ -0,0 +1,18 @@
+import type { BluepicField } from '@bluepic/types';
+type __VLS_Props = {
+    field: BluepicField;
+    /** The row's data object — mutated in place. */
+    data: Record<string, unknown>;
+    labelId?: string;
+    /** Header bulk control: route every write through `onBulkUpdate` instead. */
+    bulk?: boolean;
+    onBulkUpdate?: (bindingKey: string, value: unknown) => void;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (bindingKey: string, value: unknown) => any;
+    activate: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onChange?: ((bindingKey: string, value: unknown) => any) | undefined;
+    onActivate?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/TemplateEditor/BatchEditor.vue.d.ts

@@ -0,0 +1,258 @@
+import { nextTick } from 'vue';
+import type { Template } from '@bluepic/types';
+import { type BxTableColumn } from '../BxTable.vue';
+import type { BatchRowsModel } from '../../util/batch/useBatchRows';
+/**
+ * The batch editor: a BxTable with one row per dataset and one column per
+ * field. Owns nothing but the table chrome — the rows live in `batch`
+ * (`useBatchRows`, created by BxTemplateEditor so the live preview and the
+ * export share the same model).
+ */
+type __VLS_Props = {
+    serial?: Template.Serial;
+    batch: BatchRowsModel;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {
+    tableRef: import("vue").Ref<({
+        $: import("vue").ComponentInternalInstance;
+        $data: {};
+        $props: {
+            readonly columns?: BxTableColumn[] | undefined;
+            readonly bordered?: boolean | undefined;
+            readonly radius?: "none" | "sm" | "md" | "lg" | undefined;
+            readonly variant?: "plain" | "card" | undefined;
+            readonly hoverable?: boolean | undefined;
+            readonly dense?: boolean | undefined;
+            readonly stickyHeader?: boolean | undefined;
+            readonly fill?: boolean | undefined;
+            readonly maxHeight?: string | undefined;
+            readonly stickyColumns?: {
+                left?: number;
+                right?: number;
+            } | undefined;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
+        $attrs: import("vue").Attrs;
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import("vue").Slot<any> | undefined;
+        }>;
+        $root: import("vue").ComponentPublicInstance | null;
+        $parent: import("vue").ComponentPublicInstance | null;
+        $host: Element | null;
+        $emit: (event: string, ...args: any[]) => void;
+        $el: any;
+        $options: import("vue").ComponentOptionsBase<Readonly<{
+            columns?: BxTableColumn[];
+            bordered?: boolean;
+            radius?: "none" | "sm" | "md" | "lg";
+            variant?: "plain" | "card";
+            hoverable?: boolean;
+            dense?: boolean;
+            stickyHeader?: boolean;
+            fill?: boolean;
+            maxHeight?: string;
+            stickyColumns?: {
+                left?: number;
+                right?: number;
+            };
+        }> & Readonly<{}>, {
+            wrapperRef: import("vue").Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
+        }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+            fill: boolean;
+            bordered: boolean;
+            hoverable: boolean;
+            radius: "none" | "sm" | "md" | "lg";
+            maxHeight: string;
+            variant: "plain" | "card";
+            columns: BxTableColumn[];
+            dense: boolean;
+            stickyHeader: boolean;
+            stickyColumns: {
+                left?: number;
+                right?: number;
+            };
+        }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & {
+            beforeCreate?: (() => void) | (() => void)[];
+            created?: (() => void) | (() => void)[];
+            beforeMount?: (() => void) | (() => void)[];
+            mounted?: (() => void) | (() => void)[];
+            beforeUpdate?: (() => void) | (() => void)[];
+            updated?: (() => void) | (() => void)[];
+            activated?: (() => void) | (() => void)[];
+            deactivated?: (() => void) | (() => void)[];
+            beforeDestroy?: (() => void) | (() => void)[];
+            beforeUnmount?: (() => void) | (() => void)[];
+            destroyed?: (() => void) | (() => void)[];
+            unmounted?: (() => void) | (() => void)[];
+            renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void)[];
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof nextTick;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
+    } & Readonly<{
+        fill: boolean;
+        bordered: boolean;
+        hoverable: boolean;
+        radius: "none" | "sm" | "md" | "lg";
+        maxHeight: string;
+        variant: "plain" | "card";
+        columns: BxTableColumn[];
+        dense: boolean;
+        stickyHeader: boolean;
+        stickyColumns: {
+            left?: number;
+            right?: number;
+        };
+    }> & Omit<Readonly<{
+        columns?: BxTableColumn[];
+        bordered?: boolean;
+        radius?: "none" | "sm" | "md" | "lg";
+        variant?: "plain" | "card";
+        hoverable?: boolean;
+        dense?: boolean;
+        stickyHeader?: boolean;
+        fill?: boolean;
+        maxHeight?: string;
+        stickyColumns?: {
+            left?: number;
+            right?: number;
+        };
+    }> & Readonly<{}>, "wrapperRef" | ("fill" | "bordered" | "hoverable" | "radius" | "maxHeight" | "variant" | "columns" | "dense" | "stickyHeader" | "stickyColumns")> & {
+        wrapperRef: HTMLDivElement | undefined;
+    } & {} & import("vue").ComponentCustomProperties & {} & {
+        $slots: {
+            default?: () => import("vue").VNode[] | import("vue").VNode;
+            'header-cell'?: (scope: {
+                column: BxTableColumn;
+                index: number;
+            }) => import("vue").VNode[] | import("vue").VNode;
+        };
+    }) | undefined, ({
+        $: import("vue").ComponentInternalInstance;
+        $data: {};
+        $props: {
+            readonly columns?: BxTableColumn[] | undefined;
+            readonly bordered?: boolean | undefined;
+            readonly radius?: "none" | "sm" | "md" | "lg" | undefined;
+            readonly variant?: "plain" | "card" | undefined;
+            readonly hoverable?: boolean | undefined;
+            readonly dense?: boolean | undefined;
+            readonly stickyHeader?: boolean | undefined;
+            readonly fill?: boolean | undefined;
+            readonly maxHeight?: string | undefined;
+            readonly stickyColumns?: {
+                left?: number;
+                right?: number;
+            } | undefined;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
+        $attrs: import("vue").Attrs;
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import("vue").Slot<any> | undefined;
+        }>;
+        $root: import("vue").ComponentPublicInstance | null;
+        $parent: import("vue").ComponentPublicInstance | null;
+        $host: Element | null;
+        $emit: (event: string, ...args: any[]) => void;
+        $el: any;
+        $options: import("vue").ComponentOptionsBase<Readonly<{
+            columns?: BxTableColumn[];
+            bordered?: boolean;
+            radius?: "none" | "sm" | "md" | "lg";
+            variant?: "plain" | "card";
+            hoverable?: boolean;
+            dense?: boolean;
+            stickyHeader?: boolean;
+            fill?: boolean;
+            maxHeight?: string;
+            stickyColumns?: {
+                left?: number;
+                right?: number;
+            };
+        }> & Readonly<{}>, {
+            wrapperRef: import("vue").Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
+        }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+            fill: boolean;
+            bordered: boolean;
+            hoverable: boolean;
+            radius: "none" | "sm" | "md" | "lg";
+            maxHeight: string;
+            variant: "plain" | "card";
+            columns: BxTableColumn[];
+            dense: boolean;
+            stickyHeader: boolean;
+            stickyColumns: {
+                left?: number;
+                right?: number;
+            };
+        }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & {
+            beforeCreate?: (() => void) | (() => void)[];
+            created?: (() => void) | (() => void)[];
+            beforeMount?: (() => void) | (() => void)[];
+            mounted?: (() => void) | (() => void)[];
+            beforeUpdate?: (() => void) | (() => void)[];
+            updated?: (() => void) | (() => void)[];
+            activated?: (() => void) | (() => void)[];
+            deactivated?: (() => void) | (() => void)[];
+            beforeDestroy?: (() => void) | (() => void)[];
+            beforeUnmount?: (() => void) | (() => void)[];
+            destroyed?: (() => void) | (() => void)[];
+            unmounted?: (() => void) | (() => void)[];
+            renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void)[];
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof nextTick;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
+    } & Readonly<{
+        fill: boolean;
+        bordered: boolean;
+        hoverable: boolean;
+        radius: "none" | "sm" | "md" | "lg";
+        maxHeight: string;
+        variant: "plain" | "card";
+        columns: BxTableColumn[];
+        dense: boolean;
+        stickyHeader: boolean;
+        stickyColumns: {
+            left?: number;
+            right?: number;
+        };
+    }> & Omit<Readonly<{
+        columns?: BxTableColumn[];
+        bordered?: boolean;
+        radius?: "none" | "sm" | "md" | "lg";
+        variant?: "plain" | "card";
+        hoverable?: boolean;
+        dense?: boolean;
+        stickyHeader?: boolean;
+        fill?: boolean;
+        maxHeight?: string;
+        stickyColumns?: {
+            left?: number;
+            right?: number;
+        };
+    }> & Readonly<{}>, "wrapperRef" | ("fill" | "bordered" | "hoverable" | "radius" | "maxHeight" | "variant" | "columns" | "dense" | "stickyHeader" | "stickyColumns")> & {
+        wrapperRef: HTMLDivElement | undefined;
+    } & {} & import("vue").ComponentCustomProperties & {} & {
+        $slots: {
+            default?: () => import("vue").VNode[] | import("vue").VNode;
+            'header-cell'?: (scope: {
+                column: BxTableColumn;
+                index: number;
+            }) => import("vue").VNode[] | import("vue").VNode;
+        };
+    }) | undefined>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    import: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onImport?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/TemplateEditor/BatchExportPopup.vue.d.ts

@@ -0,0 +1,66 @@
+import type { BatchFileFormat, BatchNaming } from '../../util/batch/export';
+import type { BatchCsvFormat } from '../../util/batch/csv';
+export type BatchExportKind = 'files' | 'csv';
+export interface BatchExportRunOptions {
+    kind: BatchExportKind;
+    format: BatchFileFormat | BatchCsvFormat;
+    naming: BatchNaming;
+    delimiter: ',' | ';';
+    prewarm: boolean;
+    signal: AbortSignal;
+    onProgress: (progress: {
+        done: number;
+        total: number;
+        failed?: number;
+        current?: number;
+    }) => void;
+}
+export interface BatchExportRunResult {
+    /** What to hand out: the zip / single file, or the CSV. */
+    output?: {
+        blob: Blob;
+        fileName: string;
+    };
+    /** Files count (files export) — for the wording. */
+    fileCount?: number;
+    /** CSV rows whose render URL is over budget (1-based). */
+    overBudget?: number[];
+    /** Pre-warm outcome (CSV). */
+    prewarmed?: {
+        done: number;
+        failed: number;
+    };
+    cancelled?: boolean;
+}
+/**
+ * The batch export dialog: choose format + naming, see what it costs, run,
+ * download. The parent supplies `run` — this component only knows the shape
+ * of the choices and the progress, not how rendering works.
+ */
+type __VLS_Props = {
+    kind: BatchExportKind;
+    rowCount: number;
+    templateName: string;
+    isVideoTemplate: boolean;
+    /** Rows a video batch may contain (tier). */
+    videoBatchMaxSize: number;
+    /** Whether outputs are charged in this context (false = preview / trusted). */
+    consumesCredits: boolean;
+    /** Text bindings usable as file names: label → binding key. */
+    namingBindings: {
+        label: string;
+        key: string;
+    }[];
+    run: (opts: BatchExportRunOptions) => Promise<BatchExportRunResult>;
+};
+declare function cancelRun(): void;
+declare const _default: import("vue").DefineComponent<__VLS_Props, {
+    cancelRun: typeof cancelRun;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    cancel: () => any;
+    done: (result: BatchExportRunResult) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onCancel?: (() => any) | undefined;
+    onDone?: ((result: BatchExportRunResult) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/TemplateEditor/BatchImportPopup.vue.d.ts

@@ -0,0 +1,25 @@
+import { type BatchColumnField } from '../../util/batch/fields';
+/**
+ * Import rows into the batch: parse (delimiter + per-cell type inference from
+ * the studio's parseCSV), match columns to fields, convert per field type.
+ * Columns whose header IS a binding key are matched up front — that is what
+ * "Export as CSV" writes, so a round trip needs no clicking.
+ */
+type __VLS_Props = {
+    columns: BatchColumnField[];
+    currentRowCount: number;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    cancel: () => any;
+    confirm: (payload: {
+        datasets: Record<string, unknown>[];
+        mode: "append" | "replace";
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onCancel?: (() => any) | undefined;
+    onConfirm?: ((payload: {
+        datasets: Record<string, unknown>[];
+        mode: "append" | "replace";
+    }) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/TemplateEditor/BxTemplateEditor.vue.d.ts

@@ -2,6 +2,7 @@ import { BluepicField, FieldsBridge, Studio, Template } from '@bluepic/types';
 import { VNode } from 'vue';
 import { type AssetProxyConfig } from '../../util/assetProxy';
 import { z } from '@hono/zod-openapi';
+import { type BatchRow } from '../../util/batch/useBatchRows';
 import 'swiper/css';
 import 'swiper/css/navigation';
 import 'swiper/css/pagination';
@@ -98,6 +99,29 @@ type __VLS_Props = {
      * (bx-template → PostHog `template_render_*`). Omit to disable analytics.
      */
     analytics?: ExportAnalyticsSink;
+    /**
+     * Batch editor (campaign `config.editMode`): `single` is the classic editor,
+     * `batch` a table of rows with the live preview following the active row,
+     * `all` both behind a Single | Batch switch in the header. Absent = single.
+     */
+    editMode?: 'single' | 'batch' | 'all';
+    /**
+     * Rows a VIDEO batch export may contain, from the paying team's tier
+     * (public campaign `videoBatchMaxSize`). Absent = 1.
+     */
+    videoBatchMaxSize?: number;
+    /** URL render API scope (`image.bluepic.io/<orgSlug>/<alias>.png`) for CSV links. */
+    orgSlug?: string;
+    /** This template's URL-render alias, if published under one. */
+    templateAlias?: string | null;
+    /**
+     * Origin of the URL render API this editor should link to in CSV exports
+     * (`https://image.bluepic.io`, staging `https://image-staging.bluepic.io`).
+     * Absent = derived from `apiBaseUrl` / production.
+     */
+    urlRenderBaseUrl?: string;
+    /** Host-owned batch rows (`v-model:batchRows`). Absent = session storage only. */
+    batchRows?: BatchRow[];
 };
 type __VLS_Slots = {
     legal: () => VNode[] | VNode;
@@ -2946,13 +2970,17 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
         [k: string]: unknown;
     }) => any;
     back: () => any;
+    "update:batchRows": (args_0: BatchRow[]) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:data"?: ((args_0: {
         [k: string]: unknown;
     }) => any) | undefined;
     onBack?: (() => any) | undefined;
+    "onUpdate:batchRows"?: ((args_0: BatchRow[]) => any) | undefined;
 }>, {
     zoomAndPan: boolean;
+    editMode: "single" | "batch" | "all";
+    videoBatchMaxSize: number;
     preCacheLocalRendering: boolean;
     liveViewOffsetDesktop: {
         top: number;

package/dist/components/fields/ImageEdit.vue.d.ts

@@ -14,6 +14,11 @@ type __VLS_Props = {
     maxSize?: number;
     bridge: FieldsBridge;
     mobile?: boolean;
+    /**
+     * Table-cell layout (batch editor): a small thumbnail with icon-only
+     * actions in a row, instead of the card layout with labelled buttons.
+     */
+    compact?: boolean;
     field?: BluepicField;
     allowCropImage: boolean;
     aspectRatio: number;
@@ -45,6 +50,7 @@ declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {},
     uploadLabel: string;
     actionsLabel: string;
     mobile: boolean;
+    compact: boolean;
     resetCropOnChange: boolean;
     allowPadding: boolean;
     autoCrop: boolean;