@bluepic/embed 0.6.3 → 0.6.6

package/dist/util/analytics.d.ts

@@ -76,6 +76,31 @@ export type ExportSessionContext = {
      * times the underlying data changed.
      */
     tabSessionId: string;
+    /**
+     * Canvases v2: the canvas the editor showed when Export was pressed (the
+     * export's PRIMARY canvas). Absent for single-format templates.
+     */
+    canvasId?: string;
+    /** Pixel size of the primary canvas (= the serial size for single-format templates). */
+    canvasWidth?: number;
+    canvasHeight?: number;
+    /** Formats the template offers. 1 = single-format; >= 2 = true multi-format template. */
+    availableCanvasCount: number;
+};
+/** One canvas (format) an output carried, with the files it produced (segments ⇒ > 1). */
+export type DeliveredCanvas = {
+    id: string;
+    width: number;
+    height: number;
+    fileCount: number;
+};
+/**
+ * What an output (action / social step) actually delivered. One click is still
+ * ONE event — a multi-format export says here how many formats it carried.
+ */
+export type DeliveryContext = {
+    deliveredCanvases?: DeliveredCanvas[];
+    deliveredCanvasCount?: number;
 };
 /**
  * Result of the render. Attached to every event emitted AFTER the render
@@ -105,7 +130,7 @@ export type RenderFailureEvent = ExportSessionContext & RenderOutcome & {
     error: string;
 };
 /** An actional destination ran (download / webhook / redirect). */
-export type ActionEvent = ExportSessionContext & RenderOutcome & {
+export type ActionEvent = ExportSessionContext & RenderOutcome & DeliveryContext & {
     type: 'action';
     kind: ExportActionKind;
     trigger: ExportActionTrigger;
@@ -117,7 +142,7 @@ export type ActionEvent = ExportSessionContext & RenderOutcome & {
     redirectHost?: string;
 };
 /** User picked a social network — usually just opens its share dialog. */
-export type SocialAttemptEvent = ExportSessionContext & RenderOutcome & {
+export type SocialAttemptEvent = ExportSessionContext & RenderOutcome & DeliveryContext & {
     type: 'social_attempt';
     platform: SocialPlatform;
     /** LinkedIn is verifiable (we get a real postUrl back); others aren't. */
@@ -126,7 +151,7 @@ export type SocialAttemptEvent = ExportSessionContext & RenderOutcome & {
     nativeShare: boolean;
 };
 /** The final social step: LinkedIn post confirmed, or platform handed off. */
-export type SocialCheckoutEvent = ExportSessionContext & RenderOutcome & {
+export type SocialCheckoutEvent = ExportSessionContext & RenderOutcome & DeliveryContext & {
     type: 'social_checkout';
     platform: SocialPlatform;
     verifiable: boolean;
@@ -204,9 +229,17 @@ export declare class ExportAnalytics {
     private readonly sink?;
     private readonly session;
     private renderOutcome?;
+    private delivered?;
     constructor(sink: ExportAnalyticsSink | undefined, context: Omit<ExportSessionContext, 'exportId'>, exportId?: string);
     /** Render outcome folded into post-render events (falls back to `unknown`). */
     private outcome;
+    /**
+     * The canvases the NEXT outputs carry. Set by the export flow whenever the
+     * selection changes (the popup's format checkboxes), so every action / social
+     * event reports exactly what left the tab with it.
+     */
+    setDelivered(canvases: DeliveredCanvas[]): void;
+    private delivery;
     private emit;
     attempt(): void;
     renderSuccess(args: RenderSuccessArgs): void;

package/dist/util/canvasSnapshots.d.ts

@@ -0,0 +1,7 @@
+/** What a snapshot depends on besides the canvas itself. */
+export declare function snapshotStamp(data: unknown, watermark: boolean): string;
+/** The cached snapshot when it was rendered from exactly this stamp. */
+export declare function cachedSnapshot(templateId: string, canvasId: string, stamp: string): string | undefined;
+/** The latest snapshot regardless of stamp (a close stand-in while a fresh one renders). */
+export declare function latestSnapshot(templateId: string, canvasId: string): string | undefined;
+export declare function storeSnapshot(templateId: string, canvasId: string, stamp: string, blob: Blob): string;

package/dist/util/canvases.d.ts

@@ -0,0 +1,76 @@
+import type { Template } from '@bluepic/types';
+/**
+ * Multi-format templates (canvases v2) as the editor sees them.
+ *
+ * A canvases-v2 template is ONE template: fields, bindings and therefore the
+ * user's data are shared, only `{ context, fill }` and the size differ per
+ * canvas. That is what makes switching formats inside the editor — and
+ * exporting several formats from one data-state — safe. Legacy name-collision
+ * groups are distinct templates and never arrive here: the host passes
+ * `canvases` only for a true multi-format template (>= 2 canvases).
+ */
+export type EditorCanvas = {
+    /** Opaque storage id (`default`, a nanoid, `legacy-<n>`) — what render requests address. */
+    id: string;
+    width: number;
+    height: number;
+    /** `x * y` separate graphics per render. Absent = `{1,1}`. */
+    segments?: {
+        x: number;
+        y: number;
+    };
+    /**
+     * Stand-in until the live snapshot exists: the canvas's committed server
+     * preview (generic, fast) …
+     */
+    preview?: string | null;
+    /**
+     * … with an already-ISSUED personalized server render on top when the page
+     * was prepopulated (`?p=` / `?data`). Never built from the user's edits —
+     * the live snapshot is the only thing that shows those.
+     */
+    personalizedPreview?: string | null;
+    /**
+     * The render-ready (materialized, root-shape) serial of THIS canvas. Called
+     * lazily (switcher opened / export pressed) and at most once per canvas.
+     */
+    loadSerial: () => Promise<Template.Serial>;
+};
+/** Every format picker labels a canvas by its size ("1080×1350"). */
+export declare function canvasLabel(canvas: {
+    width: number;
+    height: number;
+}): string;
+/** File-name-safe size token ("1080x1350") — same form as the canvas route segment. */
+export declare function canvasSizeToken(canvas: {
+    width: number;
+    height: number;
+}): string;
+/**
+ * Fit a canvas into a `max × max` box: the long side becomes `max`, the short
+ * side follows the aspect ratio (so it is always <= max).
+ */
+export declare function fitCanvasBox(canvas: {
+    width: number;
+    height: number;
+}, max?: number): {
+    width: number;
+    height: number;
+};
+/** What one canvas contributes to an export output. */
+export type CanvasDeliverable = {
+    canvas: Pick<EditorCanvas, 'id' | 'width' | 'height'>;
+    files: Blob[];
+};
+/**
+ * File names for an export output.
+ *
+ * Exactly one canvas delivered → today's names, byte-identical (`<base>.png`,
+ * segments `<base>_1.png`, …): nothing changes for anyone who never ticks a
+ * second format. Several canvases → every file carries its size so the zip is
+ * self-explanatory: `<base>_1080x1350.png`, segments `<base>_1080x1350_1.png`.
+ */
+export declare function deliverableFileNames(deliverables: CanvasDeliverable[], baseName: string): {
+    blob: Blob;
+    name: string;
+}[];

package/dist/util/export.d.ts

@@ -3,6 +3,18 @@ import { Ref } from 'vue';
 import { z } from '@hono/zod-openapi';
 import BxLiveTemplate from '../components/TemplateEditor/BxLiveTemplate.vue';
 import { type ExportAnalyticsSink, type RenderLocation } from './analytics';
+import { type CanvasDeliverable, type EditorCanvas } from './canvases';
+/** What the export pipeline needs from the hidden sibling renderers (CanvasSiblings). */
+export type CanvasSiblingsApi = {
+    activate: () => void;
+    demand: () => () => void;
+    renderer: (id: string) => Promise<{
+        live: InstanceType<typeof BxLiveTemplate>;
+        serial: Template.Serial;
+    }>;
+    snapshots: Record<string, string>;
+    snapshotFailed: Record<string, boolean>;
+};
 export declare const imageFormats: {
     png: "image/png";
     jpeg: "image/jpeg";
@@ -50,7 +62,9 @@ canvasId?: string): Promise<{
     files: string[];
     creditsConsumed: number;
 }>;
-export declare function renderSerialAsImages(bxLiveTemplateComponent: InstanceType<typeof BxLiveTemplate>, serial: Template.Serial, data: {
+export declare function renderSerialAsImages(
+/** Undefined = no local renderer available → server render (addressed by `canvasId`). */
+bxLiveTemplateComponent: InstanceType<typeof BxLiveTemplate> | undefined, serial: Template.Serial, data: {
     [k: string]: unknown;
 }, format: keyof typeof imageFormats, campaignId: number, templateId: string, remoteOptions: RenderRemoteOptions, enforceServerSideRendering: boolean, watermark: boolean, sessionState: string, 
 /** Multi-canvas: the selected canvas — remote render only; the LOCAL path already renders the materialized `serial`. */
@@ -91,7 +105,14 @@ canvasId?: Ref<string | undefined>,
  * fonts/images. Kept host-settable precisely so that trade-off can be measured
  * rather than guessed.
  */
-svgLoadWaitDelay?: Ref<number | undefined>): {
+svgLoadWaitDelay?: Ref<number | undefined>, 
+/**
+ * True multi-format templates (canvases v2, >= 2 canvases): every canvas of
+ * the template. Undefined / < 2 = single-format, today's behaviour exactly.
+ */
+canvases?: Ref<EditorCanvas[] | undefined>, 
+/** Hidden live renderers of the sibling canvases (see CanvasSiblings). */
+siblings?: Ref<CanvasSiblingsApi | undefined>): {
     triggerExport: () => Promise<void>;
     consumeOutputFor: (rowData: {
         [k: string]: unknown;
@@ -114,15 +135,32 @@ usage?: Studio.ConsumeRenderCreditsUsage,
 assets?: BillingV3.BillableUsageAsset[]): Promise<void>;
 export declare function hasMobileShareCapability(files: File[]): boolean;
 export declare function blobsToShareFiles(files: Blob[], baseName: string): File[];
+export declare function namedToShareFiles(named: {
+    blob: Blob;
+    name: string;
+}[]): File[];
 export declare function performDownload(files: Blob[], baseName: string): Promise<void>;
+/** Download what an export delivered — every canvas, named (see `deliverableFileNames`). */
+export declare function performDeliverablesDownload(deliverables: CanvasDeliverable[], baseName: string): Promise<void>;
 export type ActionContext = {
     templateId: string;
     campaignId: number;
     data: {
         [k: string]: unknown;
     };
+    /** Every delivered file, flat (all canvases, in canvas order). */
     assets: string[];
     caption?: string;
+    /**
+     * Multi-format exports only: the same assets grouped by canvas. Absent for a
+     * single-format export, so that payload stays exactly what it was.
+     */
+    canvases?: {
+        canvasId: string;
+        width: number;
+        height: number;
+        assets: string[];
+    }[];
 };
 export declare function performWebhook(webhookUrl: string, context: ActionContext): Promise<void>;
 export declare function performRedirect(redirectUrl: string, context: ActionContext): Promise<void>;

package/dist/util/multiCanvasExport.d.ts

@@ -0,0 +1,58 @@
+import { type ComputedRef } from 'vue';
+import type { EditorCanvas, CanvasDeliverable } from './canvases';
+import type { DeliveredCanvas } from './analytics';
+/**
+ * One export press of a true multi-format template, as the export popup sees it.
+ *
+ * The press renders the ACTIVE canvas (exactly as before); the popup then shows
+ * every other canvas next to it, greyed out until ticked. A ticked sibling is
+ * rendered from the same data-state (local first, server fallback — the same
+ * path as the active one), and every output action (download / share / webhook
+ * / redirect) delivers the ticked set. Billing is per delivered canvas.
+ *
+ * Built by `useTemplateExport`, which owns rendering, uploading and billing;
+ * this object only holds the per-press state and the selection rules.
+ */
+export type CanvasExportItemState = 'idle' | 'rendering' | 'ready' | 'error';
+export type CanvasExportItem = {
+    canvas: EditorCanvas;
+    /** The canvas the editor showed when Export was pressed. Rendered up-front. */
+    primary: boolean;
+    selected: boolean;
+    state: CanvasExportItemState;
+    error?: string;
+    files: Blob[];
+};
+export type MultiCanvasExportDeps = {
+    canvases: EditorCanvas[];
+    primaryCanvasId: string;
+    primaryFiles: Blob[];
+    /** The primary's uploads, if the export already started them. */
+    primaryRemote?: Promise<string>[];
+    /** Full-resolution render of a sibling canvas with the export's data-state. */
+    renderCanvas: (canvas: EditorCanvas) => Promise<Blob[]>;
+    /** Upload a canvas's files for URL consumers (webhook / redirect / socials). */
+    upload: (files: Blob[]) => Promise<string>[];
+    /** Per-canvas output consumer (idempotent per session + data-state + canvas). */
+    consume: (canvas: EditorCanvas) => Promise<void>;
+    /**
+     * Render siblings in the background as soon as the popup opens, so ticking
+     * is instant. True for formats that render locally (cheap, never billed);
+     * false for server-side formats, which render only when ticked.
+     */
+    prerender: boolean;
+    /** Called whenever the delivered set changes (analytics). */
+    onSelectionChange?: (delivered: DeliveredCanvas[]) => void;
+};
+export type MultiCanvasExport = ReturnType<typeof createMultiCanvasExport>;
+export declare function createMultiCanvasExport(deps: MultiCanvasExportDeps): {
+    items: import("vue").Reactive<CanvasExportItem[]>;
+    selected: ComputedRef<CanvasExportItem[]>;
+    busy: ComputedRef<boolean>;
+    setSelected: (id: string, value: boolean) => void;
+    prerenderAll: () => Promise<void>;
+    deliverables: () => Promise<CanvasDeliverable[]>;
+    remote: (deliverable: CanvasDeliverable) => Promise<string>[];
+    consume: (deliverablesList: CanvasDeliverable[]) => Promise<void>;
+    delivered: () => DeliveredCanvas[];
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bluepic/embed",
-  "version": "0.6.3",
+  "version": "0.6.6",
   "description": "Bluepic embed sdk",
   "type": "module",
   "sideEffects": false,