@bluepic/embed 0.4.0-next.99 → 0.5.0

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

@@ -0,0 +1,86 @@
+import type { BluepicField } from '@bluepic/types';
+import type { FieldHitbox } from '../../util/fieldHints';
+import type { CanvasTextState, SelectionHandle } from '../../util/fieldHints/useCanvasTextEditing';
+type __VLS_Props = {
+    hitboxes: FieldHitbox[];
+    /**
+     * zoompinch's slot function. Takes CANVAS-pixel coordinates — and since the
+     * live template is sized to `serial.width × serial.height` (exactly as
+     * bx-studio sizes its SerialWrapper), those are serial coordinates. The
+     * canvas dimensions are still threaded through below rather than assumed,
+     * because the `serialWidth`/`serialHeight` prop path can render without a
+     * serial at all.
+     */
+    composePoint: (x: number, y: number) => [number, number];
+    canvasWidth: number;
+    canvasHeight: number;
+    serialWidth: number;
+    serialHeight: number;
+    /**
+     * Not read — a reactivity dependency. `composePoint` is a plain function
+     * closing over zoompinch's engine state, so nothing about calling it tells
+     * Vue to recompute when the user pans. Naming the live transform as a prop
+     * is what re-runs `placed` on every gesture frame.
+     */
+    transform: unknown;
+    /** On multi-frame templates, only the focused frame's hints are shown. */
+    activeFrameIndex?: number;
+    /** Paint only. The hitboxes stay clickable either way — see the stylesheet. */
+    revealed: boolean;
+    /** Live caret + selection in SERIAL coordinates, or absent when not editing. */
+    textState?: CanvasTextState;
+    /** Element whose text is being edited — its hitbox becomes a selection surface. */
+    editingElementId?: string;
+    /** zoompinch's inverse projection, for turning a pointer position into serial coords. */
+    normalizeClientCoords: (clientX: number, clientY: number) => [number, number];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "activate-field": (args_0: BluepicField) => any;
+    "focus-field": (args_0: BluepicField) => any;
+    "hover-field": (args_0: BluepicField | undefined) => any;
+    "select-start": (args_0: {
+        x: number;
+        y: number;
+    }) => any;
+    "select-move": (args_0: {
+        x: number;
+        y: number;
+    }) => any;
+    "select-end": () => any;
+    "handle-grab": (args_0: {
+        handle: SelectionHandle;
+        point: {
+            x: number;
+            y: number;
+        };
+    }) => any;
+    "select-word": (args_0: {
+        x: number;
+        y: number;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onActivate-field"?: ((args_0: BluepicField) => any) | undefined;
+    "onFocus-field"?: ((args_0: BluepicField) => any) | undefined;
+    "onHover-field"?: ((args_0: BluepicField | undefined) => any) | undefined;
+    "onSelect-start"?: ((args_0: {
+        x: number;
+        y: number;
+    }) => any) | undefined;
+    "onSelect-move"?: ((args_0: {
+        x: number;
+        y: number;
+    }) => any) | undefined;
+    "onSelect-end"?: (() => any) | undefined;
+    "onHandle-grab"?: ((args_0: {
+        handle: SelectionHandle;
+        point: {
+            x: number;
+            y: number;
+        };
+    }) => any) | undefined;
+    "onSelect-word"?: ((args_0: {
+        x: number;
+        y: number;
+    }) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -1,6 +1,8 @@
 import { Transform } from '@zoompinch/vue';
 import { Ref } from 'vue';
-import { Template } from '@bluepic/types';
+import { BluepicField, Template } from '@bluepic/types';
+import type { FieldHitbox } from '../../util/fieldHints';
+import type { CanvasTextState, SelectionHandle } from '../../util/fieldHints/useCanvasTextEditing';
 import type { AssetProxyConfig } from '../../util/assetProxy';
 type __VLS_Props = {
     bxCoreVersion?: string;
@@ -12,6 +14,8 @@ type __VLS_Props = {
     serialWidth?: number;
     serialHeight?: number;
     preview?: string;
+    /** Passed straight through to BxLiveTemplate's skeleton — see its own doc. */
+    personalizedPreviewSrc?: string | null;
     offset: {
         top: number;
         right: number;
@@ -27,6 +31,17 @@ type __VLS_Props = {
      * reflects the currently rendered graphic.
      */
     accessibilityDescription?: string;
+    /** Derived field-hint targets in serial coordinates. Empty = no overlay. */
+    fieldHitboxes?: FieldHitbox[];
+    /**
+     * Whether the hint overlay is PAINTED (hover on desktop, tap on mobile). The
+     * hitboxes stay clickable regardless — see `FieldHintsLayer`.
+     */
+    hintsRevealed?: boolean;
+    /** Live caret + selection in serial coordinates while a hint-focused field is edited. */
+    textState?: CanvasTextState;
+    /** Element whose text is being edited. */
+    editingElementId?: string;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {
     currentlyFocusedFrame: import("vue").ComputedRef<{
@@ -47,6 +62,7 @@ declare const _default: import("vue").DefineComponent<__VLS_Props, {
         serialWidth?: number;
         serialHeight?: number;
         preview?: string;
+        personalizedPreviewSrc?: string | null;
         data?: {
             [k: string]: unknown;
         };
@@ -73,6 +89,7 @@ declare const _default: import("vue").DefineComponent<__VLS_Props, {
                 watermark: boolean;
                 resultType: "blob";
                 externalCanvas: HTMLCanvasElement | null;
+                svgLoadWaitDelay?: number;
             }): Promise<Blob>;
             (options: {
                 type: "image/png" | "image/jpeg" | "image/jpge" | "image/webp";
@@ -87,6 +104,7 @@ declare const _default: import("vue").DefineComponent<__VLS_Props, {
                 watermark: boolean;
                 resultType: "canvas";
                 externalCanvas: HTMLCanvasElement | null;
+                svgLoadWaitDelay?: number;
             }): Promise<HTMLCanvasElement>;
         };
         aspectRatio: import("vue").ComputedRef<number>;
@@ -118,6 +136,7 @@ declare const _default: import("vue").DefineComponent<__VLS_Props, {
         serialWidth?: number;
         serialHeight?: number;
         preview?: string;
+        personalizedPreviewSrc?: string | null;
         data?: {
             [k: string]: unknown;
         };
@@ -144,6 +163,7 @@ declare const _default: import("vue").DefineComponent<__VLS_Props, {
                 watermark: boolean;
                 resultType: "blob";
                 externalCanvas: HTMLCanvasElement | null;
+                svgLoadWaitDelay?: number;
             }): Promise<Blob>;
             (options: {
                 type: "image/png" | "image/jpeg" | "image/jpge" | "image/webp";
@@ -158,6 +178,7 @@ declare const _default: import("vue").DefineComponent<__VLS_Props, {
                 watermark: boolean;
                 resultType: "canvas";
                 externalCanvas: HTMLCanvasElement | null;
+                svgLoadWaitDelay?: number;
             }): Promise<HTMLCanvasElement>;
         };
         aspectRatio: import("vue").ComputedRef<number>;
@@ -174,6 +195,7 @@ declare const _default: import("vue").DefineComponent<__VLS_Props, {
         serialWidth?: number;
         serialHeight?: number;
         preview?: string;
+        personalizedPreviewSrc?: string | null;
         data?: {
             [k: string]: unknown;
         };
@@ -200,6 +222,7 @@ declare const _default: import("vue").DefineComponent<__VLS_Props, {
                 watermark: boolean;
                 resultType: "blob";
                 externalCanvas: HTMLCanvasElement | null;
+                svgLoadWaitDelay?: number;
             }): Promise<Blob>;
             (options: {
                 type: "image/png" | "image/jpeg" | "image/jpge" | "image/webp";
@@ -214,6 +237,7 @@ declare const _default: import("vue").DefineComponent<__VLS_Props, {
                 watermark: boolean;
                 resultType: "canvas";
                 externalCanvas: HTMLCanvasElement | null;
+                svgLoadWaitDelay?: number;
             }): Promise<HTMLCanvasElement>;
         };
         aspectRatio: import("vue").ComputedRef<number>;
@@ -245,6 +269,7 @@ declare const _default: import("vue").DefineComponent<__VLS_Props, {
         serialWidth?: number;
         serialHeight?: number;
         preview?: string;
+        personalizedPreviewSrc?: string | null;
         data?: {
             [k: string]: unknown;
         };
@@ -271,6 +296,7 @@ declare const _default: import("vue").DefineComponent<__VLS_Props, {
                 watermark: boolean;
                 resultType: "blob";
                 externalCanvas: HTMLCanvasElement | null;
+                svgLoadWaitDelay?: number;
             }): Promise<Blob>;
             (options: {
                 type: "image/png" | "image/jpeg" | "image/jpge" | "image/webp";
@@ -285,6 +311,7 @@ declare const _default: import("vue").DefineComponent<__VLS_Props, {
                 watermark: boolean;
                 resultType: "canvas";
                 externalCanvas: HTMLCanvasElement | null;
+                svgLoadWaitDelay?: number;
             }): Promise<HTMLCanvasElement>;
         };
         aspectRatio: import("vue").ComputedRef<number>;
@@ -678,5 +705,53 @@ declare const _default: import("vue").DefineComponent<__VLS_Props, {
         };
     }) | undefined>;
     isMultiFrame: import("vue").ComputedRef<boolean>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "activate-field": (args_0: BluepicField) => any;
+    "focus-field": (args_0: BluepicField) => any;
+    "hover-field": (args_0: BluepicField | undefined) => any;
+    "select-start": (args_0: {
+        x: number;
+        y: number;
+    }) => any;
+    "select-move": (args_0: {
+        x: number;
+        y: number;
+    }) => any;
+    "select-end": () => any;
+    "handle-grab": (args_0: {
+        handle: SelectionHandle;
+        point: {
+            x: number;
+            y: number;
+        };
+    }) => any;
+    "select-word": (args_0: {
+        x: number;
+        y: number;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onActivate-field"?: ((args_0: BluepicField) => any) | undefined;
+    "onFocus-field"?: ((args_0: BluepicField) => any) | undefined;
+    "onHover-field"?: ((args_0: BluepicField | undefined) => any) | undefined;
+    "onSelect-start"?: ((args_0: {
+        x: number;
+        y: number;
+    }) => any) | undefined;
+    "onSelect-move"?: ((args_0: {
+        x: number;
+        y: number;
+    }) => any) | undefined;
+    "onSelect-end"?: (() => any) | undefined;
+    "onHandle-grab"?: ((args_0: {
+        handle: SelectionHandle;
+        point: {
+            x: number;
+            y: number;
+        };
+    }) => any) | undefined;
+    "onSelect-word"?: ((args_0: {
+        x: number;
+        y: number;
+    }) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/components/User/UserInfo.vue.d.ts

@@ -1,11 +1,16 @@
 import { z } from '@hono/zod-openapi';
 import { Studio } from '@bluepic/types';
 import type { User } from '@auth0/auth0-vue';
+import type { VNode } from 'vue';
 type __VLS_Props = {
     user: z.infer<typeof Studio.auth0UserViaManagementAPISchema> | User;
     showSettings?: boolean;
 };
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+type __VLS_Slots = {
+    /** Host content between the identity block and the Settings / Logout actions. */
+    default?: () => VNode[] | VNode;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     logout: () => any;
     settings: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
@@ -14,4 +19,10 @@ declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {
 }>, {
     showSettings: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/directives/usePopup.d.ts

@@ -91,6 +91,11 @@ export type PopoverCreationOptions = {
     capturedContext?: Record<string | symbol, any>;
     content: () => VNode[] | VNode;
     noPointerEvents?: boolean;
+    /**
+     * Override scroll pass-through. Defaults to `!darkenBackground`: a popover
+     * without a scrim lets wheel/touch gestures beside it scroll the app.
+     */
+    scrollPassthrough?: boolean;
     closeOnClickOutside?: boolean;
     transitionDuration?: number;
 };

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

@@ -10,6 +10,9 @@ declare const _default: <T extends {
         description?: string;
         detailedDescription?: string;
         bridge: FieldsBridge;
+        /** Authored per-entry defaults — this is the `defaultObject` key of the Collection field type. */
+        defaultObject?: T;
+        /** @deprecated old prop name for `defaultObject`; kept so existing direct consumers stay valid. */
         defaultValue?: T;
         mobile?: boolean;
         min?: number;

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

@@ -1,4 +1,4 @@
-import { BluepicField, FieldsBridge, ImageLibrary, ImageMime } from '@bluepic/types';
+import { BluepicField, FieldsBridge, ImageLibrary, ImageMime, Template } from '@bluepic/types';
 type __VLS_Props = {
     layout: 'compact' | 'normal';
     allowUploadFromDevice: boolean;
@@ -8,7 +8,6 @@ type __VLS_Props = {
     convertTo?: ImageMime;
     quality: number;
     imageLibraries: ImageLibrary[];
-    removeBackground: boolean;
     uploadLabel?: string;
     actionsLabel?: string;
     maxSize?: number;
@@ -17,12 +16,27 @@ type __VLS_Props = {
     field?: BluepicField;
 };
 type __VLS_PublicProps = __VLS_Props & {
-    'modelValue': string;
+    /**
+     * The bound value.
+     *
+     * Typed as `ImageValue | string` because BOTH shapes occur in the wild: a
+     * template whose image element is bound straight to a src holds a plain string,
+     * while one where the element's image value carries settings of its own (crop,
+     * mirror flags, `removeBackground`) holds the whole object — `setPropertyValue`
+     * in bx-studio writes the object INTO the binding whenever the element's
+     * property expression is a simple binding key.
+     *
+     * Reading is via `imageSource`; writing MUST go through `handleImageSelection`,
+     * which preserves the object. Assigning a bare string here would silently drop
+     * every other key on the value — that is exactly how background removal was
+     * lost on the first upload.
+     */
+    'modelValue': Template.ImageValue | string;
 };
 declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: string) => any;
+    "update:modelValue": (value: string | Template.ImageValue) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | Template.ImageValue) => any) | undefined;
 }>, {
     maxSize: number;
     uploadLabel: string;

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

@@ -7,13 +7,17 @@ type __VLS_Props = {
     convertTo?: ImageMime;
     quality: number;
     imageLibraries: ImageLibrary[];
-    removeBackground: boolean;
     uploadLabel?: string;
     editLabel?: string;
     actionsLabel?: string;
     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 +49,7 @@ declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {},
     uploadLabel: string;
     actionsLabel: string;
     mobile: boolean;
+    compact: boolean;
     resetCropOnChange: boolean;
     allowPadding: boolean;
     autoCrop: boolean;

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

@@ -17,7 +17,7 @@ type __VLS_Props = {
         mixedStyleLabel: Localized<string>;
     };
     bridge: FieldsBridge;
-    maxHeight: string | null;
+    maxHeight?: string | null;
     labelId?: string;
     minWidth: string;
     maxWidth: string;