@pixerate/editor-svelte 0.22.0 → 0.23.0

package/dist/image-editor/Histogram.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Histogram.svelte.d.ts","sourceRoot":"","sources":["../../src/image-editor/Histogram.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAIlE,UAAU,KAAK;IACb,SAAS,EAAE,cAAc,GAAG,IAAI,CAAC;IACjC,gGAAgG;IAChG,OAAO,CAAC,EAAE,KAAK,GAAG,WAAW,GAAG,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC;IACzD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAsCH,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/image-editor/ImageEditor.svelte

@@ -18,7 +18,12 @@
     hitTestAnnotation,
     normalizeProcessVersion,
     LATEST_PROCESS_VERSION,
+    IMAGE_ADJUSTMENT_CONTROLS,
+    readAdjustmentControls,
   } from '@pixerate/editor/image-editor';
+  import ControlSlider from './ControlSlider.svelte';
+  import Histogram from './Histogram.svelte';
+  import AdjustmentLayersPanel from './AdjustmentLayersPanel.svelte';
   import { onDestroy, untrack } from 'svelte';
   import { createReactiveImageEditor, type ReactiveImageEditor } from './imageEditorState.svelte.js';
 
@@ -886,150 +891,37 @@
             </button>
           </div>
 
-          <!-- Brightness -->
-          <div>
-            <div class="flex justify-between text-slate-400 mb-1">
-              <span>Brightness</span>
-              <span class="font-mono">{editor.state.adjustments.brightness}</span>
-            </div>
-            <input
-              type="range"
-              min="-100"
-              max="100"
-              value={editor.state.adjustments.brightness}
-              oninput={(e) => editor.setAdjustments({ brightness: Number((e.target as HTMLInputElement).value) })}
-              class="w-full accent-indigo-500"
-            />
-          </div>
-
-          <!-- Contrast -->
-          <div>
-            <div class="flex justify-between text-slate-400 mb-1">
-              <span>Contrast</span>
-              <span class="font-mono">{editor.state.adjustments.contrast}</span>
-            </div>
-            <input
-              type="range"
-              min="-100"
-              max="100"
-              value={editor.state.adjustments.contrast}
-              oninput={(e) => editor.setAdjustments({ contrast: Number((e.target as HTMLInputElement).value) })}
-              class="w-full accent-indigo-500"
-            />
-          </div>
-
-          <!-- Saturation -->
-          <div>
-            <div class="flex justify-between text-slate-400 mb-1">
-              <span>Saturation</span>
-              <span class="font-mono">{editor.state.adjustments.saturation}</span>
-            </div>
-            <input
-              type="range"
-              min="-100"
-              max="100"
-              value={editor.state.adjustments.saturation}
-              oninput={(e) => editor.setAdjustments({ saturation: Number((e.target as HTMLInputElement).value) })}
-              class="w-full accent-indigo-500"
-            />
-          </div>
-
-          <!-- Exposure -->
-          <div>
-            <div class="flex justify-between text-slate-400 mb-1">
-              <span>Exposure</span>
-              <span class="font-mono">{editor.state.adjustments.exposure}</span>
-            </div>
-            <input
-              type="range"
-              min="-100"
-              max="100"
-              value={editor.state.adjustments.exposure}
-              oninput={(e) => editor.setAdjustments({ exposure: Number((e.target as HTMLInputElement).value) })}
-              class="w-full accent-indigo-500"
-            />
-          </div>
+          <Histogram histogram={editor.histogram} />
 
-          <!-- Temperature / Warmth -->
-          <div>
-            <div class="flex justify-between text-slate-400 mb-1">
-              <span>Warmth / Temperature</span>
-              <span class="font-mono">{editor.state.adjustments.temperature}</span>
-            </div>
-            <input
-              type="range"
-              min="-100"
-              max="100"
-              value={editor.state.adjustments.temperature}
-              oninput={(e) => editor.setAdjustments({ temperature: Number((e.target as HTMLInputElement).value) })}
-              class="w-full accent-indigo-500"
+          {#each IMAGE_ADJUSTMENT_CONTROLS as spec (spec.id)}
+            <ControlSlider
+              {spec}
+              value={readAdjustmentControls(editor.state.adjustments)[spec.id]}
+              disabled={spec.requiresProcess !== undefined && legacyProcess}
+              onchange={(v) => editor.setAdjustments({ [spec.id]: v })}
             />
-          </div>
-
-          <!-- Tint (process 2 white balance) -->
-          <div>
-            <div class="flex justify-between text-slate-400 mb-1">
-              <span>Tint</span>
-              <span class="font-mono">{editor.state.adjustments.tint ?? 0}</span>
-            </div>
-            <input
-              type="range"
-              min="-100"
-              max="100"
-              aria-label="Tint"
-              disabled={legacyProcess}
-              value={editor.state.adjustments.tint ?? 0}
-              oninput={(e) => editor.setAdjustments({ tint: Number((e.target as HTMLInputElement).value) })}
-              class="w-full accent-indigo-500 disabled:opacity-40"
-            />
-          </div>
-
-          {#if legacyProcess}
-            <div
-              class="flex items-center justify-between gap-2 rounded border border-amber-500/30 bg-amber-500/10 px-2 py-1.5 text-[10px] text-amber-200"
-              data-testid="image-editor-process-notice"
-            >
-              <span>Legacy rendering (process 1). Tint needs the current process.</span>
-              <button
-                type="button"
-                onclick={() => editor.upgradeProcess()}
-                class="shrink-0 rounded bg-amber-500/20 px-2 py-0.5 hover:bg-amber-500/30"
+            {#if spec.id === 'tint' && legacyProcess}
+              <div
+                class="flex items-center justify-between gap-2 rounded border border-amber-500/30 bg-amber-500/10 px-2 py-1.5 text-[10px] text-amber-200"
+                data-testid="image-editor-process-notice"
               >
-                Update
-              </button>
-            </div>
-          {/if}
-
-          <!-- Blur -->
-          <div>
-            <div class="flex justify-between text-slate-400 mb-1">
-              <span>Blur</span>
-              <span class="font-mono">{editor.state.adjustments.blur}px</span>
-            </div>
-            <input
-              type="range"
-              min="0"
-              max="30"
-              value={editor.state.adjustments.blur}
-              oninput={(e) => editor.setAdjustments({ blur: Number((e.target as HTMLInputElement).value) })}
-              class="w-full accent-indigo-500"
-            />
-          </div>
+                <span>Legacy rendering (process 1). Tint needs the current process.</span>
+                <button
+                  type="button"
+                  onclick={() => editor.upgradeProcess()}
+                  class="shrink-0 rounded bg-amber-500/20 px-2 py-0.5 hover:bg-amber-500/30"
+                >
+                  Update
+                </button>
+              </div>
+            {/if}
+          {/each}
 
-          <!-- Opacity -->
-          <div>
-            <div class="flex justify-between text-slate-400 mb-1">
-              <span>Opacity</span>
-              <span class="font-mono">{Math.round(editor.state.adjustments.opacity * 100)}%</span>
-            </div>
-            <input
-              type="range"
-              min="0"
-              max="1"
-              step="0.05"
-              value={editor.state.adjustments.opacity}
-              oninput={(e) => editor.setAdjustments({ opacity: Number((e.target as HTMLInputElement).value) })}
-              class="w-full accent-indigo-500"
+          <div class="border-t border-slate-700/60 pt-3">
+            <AdjustmentLayersPanel
+              controller={editor.controller}
+              layers={editor.state.adjustments.layers}
+              histogram={editor.histogram}
             />
           </div>
         </div>

package/dist/image-editor/ImageEditor.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/image-editor/ImageEditor.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAIR,aAAa,EAGb,WAAW,EACX,oBAAoB,EACpB,kBAAkB,EACnB,MAAM,+BAA+B,CAAC;AAWzC,OAAO,EAA6B,KAAK,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAGjG,UAAU,KAAK;IACb,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,kBAAkB,CAAC,EAAE,oBAAoB,CAAC;IAC1C,OAAO,CAAC,EAAE,kBAAkB,CAAC;CAC9B;AAojCH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ImageEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/image-editor/ImageEditor.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAIR,aAAa,EAGb,WAAW,EACX,oBAAoB,EACpB,kBAAkB,EACnB,MAAM,+BAA+B,CAAC;AAgBzC,OAAO,EAA6B,KAAK,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAGjG,UAAU,KAAK;IACb,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,kBAAkB,CAAC,EAAE,oBAAoB,CAAC;IAC1C,OAAO,CAAC,EAAE,kBAAkB,CAAC;CAC9B;AAw/BH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/image-editor/imageEditorState.svelte.d.ts

@@ -1,8 +1,10 @@
-import { ImageEditorController, type ImageEditorOptions, type ImageEditorState, type ImageEditorTool, type CropBox, type AspectRatio, type ImageAdjustments, type DepthMaskOptions, type Annotation, type CreateAnnotationPayload, type ExportOptions, type SerializedImageEditorState, type ImagePoint } from '@pixerate/editor/image-editor';
+import { ImageEditorController, type ImageEditorOptions, type ImageEditorState, type ImageEditorTool, type CropBox, type AspectRatio, type ImageAdjustments, type DepthMaskOptions, type Annotation, type CreateAnnotationPayload, type ExportOptions, type SerializedImageEditorState, type ImagePoint, type AdjustmentKind, type AdjustmentLayerInit, type AdjustmentLayerUpdate, type ImageHistogram } from '@pixerate/editor/image-editor';
 export declare function createReactiveImageEditor(options?: ImageEditorOptions): {
     readonly controller: ImageEditorController;
     readonly state: ImageEditorState;
     readonly canUndo: boolean;
+    /** Histogram of the last rendered preview (after adjustments and layers); null before a render. */
+    readonly histogram: ImageHistogram | null;
     readonly canRedo: boolean;
     setTool(tool: ImageEditorTool): void;
     setCrop(crop: CropBox | null, addToHistory?: boolean): void;
@@ -16,6 +18,12 @@ export declare function createReactiveImageEditor(options?: ImageEditorOptions):
     resetAdjustments(): void;
     /** Update to Current Process: re-render the adjustments with the latest process (one undo step). */
     upgradeProcess(): boolean;
+    /** Adds an adjustment layer (one undo step) and returns its id. */
+    addAdjustmentLayer(init: AdjustmentKind | AdjustmentLayerInit, index?: number): string;
+    updateAdjustmentLayer(id: string, update: AdjustmentLayerUpdate, commitToHistory?: boolean): boolean;
+    removeAdjustmentLayer(id: string): boolean;
+    moveAdjustmentLayer(id: string, toIndex: number): boolean;
+    toggleAdjustmentLayer(id: string, enabled?: boolean): boolean;
     setDepthMask(partial: Partial<DepthMaskOptions>): void;
     resetDepthMask(): void;
     addAnnotation(ann: CreateAnnotationPayload): string;
@@ -52,4 +60,9 @@ export declare function createReactiveImageEditor(options?: ImageEditorOptions):
     destroy(): void;
 };
 export type ReactiveImageEditor = ReturnType<typeof createReactiveImageEditor>;
+/** The preview histogram of an image editor controller as a rune (`current`), updated after every render. */
+export declare function createImageHistogram(controller: ImageEditorController): {
+    readonly current: ImageHistogram | null;
+    destroy(): void;
+};
 //# sourceMappingURL=imageEditorState.svelte.d.ts.map

package/dist/image-editor/imageEditorState.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"imageEditorState.svelte.d.ts","sourceRoot":"","sources":["../../src/image-editor/imageEditorState.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,qBAAqB,EACrB,KAAK,kBAAkB,EACvB,KAAK,gBAAgB,EACrB,KAAK,eAAe,EACpB,KAAK,OAAO,EACZ,KAAK,WAAW,EAChB,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,EACrB,KAAK,UAAU,EACf,KAAK,uBAAuB,EAC5B,KAAK,aAAa,EAClB,KAAK,0BAA0B,EAC/B,KAAK,UAAU,EAChB,MAAM,+BAA+B,CAAC;AAEvC,wBAAgB,yBAAyB,CAAC,OAAO,GAAE,kBAAuB;;;;;kBA0BxD,eAAe;kBAGf,OAAO,GAAG,IAAI;2BAGL,WAAW;;oBAMlB,MAAM;yBAGD,MAAM;;;4BASH,OAAO,CAAC,gBAAgB,CAAC;;IAMjD,oGAAoG;;0BAI9E,OAAO,CAAC,gBAAgB,CAAC;;uBAM5B,uBAAuB;yBAGrB,MAAM,WAAW,OAAO,CAAC,UAAU,CAAC;yBAGpC,MAAM;;yBAMN,MAAM,GAAG,IAAI;;;;oBAYlB,MAAM;qBAGL,MAAM;;kBAMT,MAAM;gBAGR,UAAU;4BAGE,OAAO;mBAGhB,MAAM,GAAG,gBAAgB;qBAGvB,aAAa;kBAGhB,aAAa;;mBAMZ,0BAA0B;sBAGvB;QAAE,cAAc,CAAC,EAAE,OAAO,CAAC;QAAC,OAAO,CAAC,EAAE,OAAO,CAAA;KAAE;yBAG5C;QAAE,cAAc,CAAC,EAAE,OAAO,CAAC;QAAC,OAAO,CAAC,EAAE,OAAO,CAAA;KAAE;2BAG7C,IAAI,CAAC,aAAa,EAAE,QAAQ,GAAG,SAAS,CAAC;oCAGhC,MAAM;4CAGE,MAAM;IAG9C,8EAA8E;;EAKjF;AAED,MAAM,MAAM,mBAAmB,GAAG,UAAU,CAAC,OAAO,yBAAyB,CAAC,CAAC"}
+{"version":3,"file":"imageEditorState.svelte.d.ts","sourceRoot":"","sources":["../../src/image-editor/imageEditorState.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,qBAAqB,EACrB,KAAK,kBAAkB,EACvB,KAAK,gBAAgB,EACrB,KAAK,eAAe,EACpB,KAAK,OAAO,EACZ,KAAK,WAAW,EAChB,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,EACrB,KAAK,UAAU,EACf,KAAK,uBAAuB,EAC5B,KAAK,aAAa,EAClB,KAAK,0BAA0B,EAC/B,KAAK,UAAU,EACf,KAAK,cAAc,EACnB,KAAK,mBAAmB,EACxB,KAAK,qBAAqB,EAC1B,KAAK,cAAc,EACpB,MAAM,+BAA+B,CAAC;AAEvC,wBAAgB,yBAAyB,CAAC,OAAO,GAAE,kBAAuB;;;;IA2BtE,mGAAmG;;;kBAQrF,eAAe;kBAGf,OAAO,GAAG,IAAI;2BAGL,WAAW;;oBAMlB,MAAM;yBAGD,MAAM;;;4BASH,OAAO,CAAC,gBAAgB,CAAC;;IAMjD,oGAAoG;;IAIpG,mEAAmE;6BAC1C,cAAc,GAAG,mBAAmB,UAAU,MAAM;8BAGnD,MAAM,UAAU,qBAAqB;8BAGrC,MAAM;4BAGR,MAAM,WAAW,MAAM;8BAGrB,MAAM,YAAY,OAAO;0BAG7B,OAAO,CAAC,gBAAgB,CAAC;;uBAM5B,uBAAuB;yBAGrB,MAAM,WAAW,OAAO,CAAC,UAAU,CAAC;yBAGpC,MAAM;;yBAMN,MAAM,GAAG,IAAI;;;;oBAYlB,MAAM;qBAGL,MAAM;;kBAMT,MAAM;gBAGR,UAAU;4BAGE,OAAO;mBAGhB,MAAM,GAAG,gBAAgB;qBAGvB,aAAa;kBAGhB,aAAa;;mBAMZ,0BAA0B;sBAGvB;QAAE,cAAc,CAAC,EAAE,OAAO,CAAC;QAAC,OAAO,CAAC,EAAE,OAAO,CAAA;KAAE;yBAG5C;QAAE,cAAc,CAAC,EAAE,OAAO,CAAC;QAAC,OAAO,CAAC,EAAE,OAAO,CAAA;KAAE;2BAG7C,IAAI,CAAC,aAAa,EAAE,QAAQ,GAAG,SAAS,CAAC;oCAGhC,MAAM;4CAGE,MAAM;IAG9C,8EAA8E;;EAMjF;AAED,MAAM,MAAM,mBAAmB,GAAG,UAAU,CAAC,OAAO,yBAAyB,CAAC,CAAC;AAE/E,6GAA6G;AAC7G,wBAAgB,oBAAoB,CAAC,UAAU,EAAE,qBAAqB;;;EAarE"}

package/dist/image-editor/imageEditorState.svelte.js

@@ -3,10 +3,14 @@ export function createReactiveImageEditor(options = {}) {
     const controller = new ImageEditorController(options);
     let state = $state(controller.getState());
     let historyTicks = $state(0);
+    let histogram = $state.raw(controller.getHistogram());
     const unsubscribe = controller.subscribe((updated) => {
         state = { ...updated };
         historyTicks++;
     });
+    const unsubscribeHistogram = controller.subscribeHistogram((h) => {
+        histogram = h;
+    });
     return {
         get controller() {
             return controller;
@@ -19,6 +23,10 @@ export function createReactiveImageEditor(options = {}) {
             void historyTicks;
             return controller.canUndo;
         },
+        /** Histogram of the last rendered preview (after adjustments and layers); null before a render. */
+        get histogram() {
+            return histogram;
+        },
         get canRedo() {
             void historyTicks;
             return controller.canRedo;
@@ -57,6 +65,22 @@ export function createReactiveImageEditor(options = {}) {
         upgradeProcess() {
             return controller.upgradeProcess();
         },
+        /** Adds an adjustment layer (one undo step) and returns its id. */
+        addAdjustmentLayer(init, index) {
+            return controller.addAdjustmentLayer(init, index);
+        },
+        updateAdjustmentLayer(id, update, commitToHistory = true) {
+            return controller.updateAdjustmentLayer(id, update, commitToHistory);
+        },
+        removeAdjustmentLayer(id) {
+            return controller.removeAdjustmentLayer(id);
+        },
+        moveAdjustmentLayer(id, toIndex) {
+            return controller.moveAdjustmentLayer(id, toIndex);
+        },
+        toggleAdjustmentLayer(id, enabled) {
+            return controller.toggleAdjustmentLayer(id, enabled);
+        },
         setDepthMask(partial) {
             controller.setDepthMask(partial);
         },
@@ -136,6 +160,22 @@ export function createReactiveImageEditor(options = {}) {
             return controller.applyBackgroundRemovedImage(newDataUrl);
         },
         /** Stops syncing controller state; call when the editor is no longer used. */
+        destroy() {
+            unsubscribe();
+            unsubscribeHistogram();
+        },
+    };
+}
+/** The preview histogram of an image editor controller as a rune (`current`), updated after every render. */
+export function createImageHistogram(controller) {
+    let current = $state.raw(controller.getHistogram());
+    const unsubscribe = controller.subscribeHistogram((h) => {
+        current = h;
+    });
+    return {
+        get current() {
+            return current;
+        },
         destroy() {
             unsubscribe();
         },

package/dist/image-editor/index.d.ts

@@ -1,6 +1,18 @@
 import type { ComponentProps } from "svelte";
 import type ImageEditorComponent from "./ImageEditor.svelte";
+import type HistogramComponent from "./Histogram.svelte";
+import type AdjustmentLayersPanelComponent from "./AdjustmentLayersPanel.svelte";
+import type CurvesEditorComponent from "./CurvesEditor.svelte";
+import type ControlSliderComponent from "./ControlSlider.svelte";
 export { default as ImageEditor } from './ImageEditor.svelte';
+export { default as Histogram } from './Histogram.svelte';
+export { default as AdjustmentLayersPanel } from './AdjustmentLayersPanel.svelte';
+export { default as CurvesEditor } from './CurvesEditor.svelte';
+export { default as ControlSlider } from './ControlSlider.svelte';
 export * from './imageEditorState.svelte.js';
 export type ImageEditorProps = ComponentProps<typeof ImageEditorComponent>;
+export type HistogramProps = ComponentProps<typeof HistogramComponent>;
+export type AdjustmentLayersPanelProps = ComponentProps<typeof AdjustmentLayersPanelComponent>;
+export type CurvesEditorProps = ComponentProps<typeof CurvesEditorComponent>;
+export type ControlSliderProps = ComponentProps<typeof ControlSliderComponent>;
 //# sourceMappingURL=index.d.ts.map

package/dist/image-editor/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/image-editor/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,KAAK,oBAAoB,MAAM,sBAAsB,CAAC;AAE7D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,cAAc,8BAA8B,CAAC;AAE7C,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,oBAAoB,CAAC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/image-editor/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,KAAK,oBAAoB,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,kBAAkB,MAAM,oBAAoB,CAAC;AACzD,OAAO,KAAK,8BAA8B,MAAM,gCAAgC,CAAC;AACjF,OAAO,KAAK,qBAAqB,MAAM,uBAAuB,CAAC;AAC/D,OAAO,KAAK,sBAAsB,MAAM,wBAAwB,CAAC;AAEjE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,cAAc,8BAA8B,CAAC;AAE7C,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,oBAAoB,CAAC,CAAC;AAC3E,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC,OAAO,kBAAkB,CAAC,CAAC;AACvE,MAAM,MAAM,0BAA0B,GAAG,cAAc,CAAC,OAAO,8BAA8B,CAAC,CAAC;AAC/F,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAC7E,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,sBAAsB,CAAC,CAAC"}

package/dist/image-editor/index.js

@@ -1,2 +1,6 @@
 export { default as ImageEditor } from './ImageEditor.svelte';
+export { default as Histogram } from './Histogram.svelte';
+export { default as AdjustmentLayersPanel } from './AdjustmentLayersPanel.svelte';
+export { default as CurvesEditor } from './CurvesEditor.svelte';
+export { default as ControlSlider } from './ControlSlider.svelte';
 export * from './imageEditorState.svelte.js';

package/dist/index.d.ts

@@ -4,6 +4,7 @@ import type BubbleMenuComponent from "./BubbleMenu.svelte";
 import type TemplateRendererComponent from "./TemplateRenderer.svelte";
 import type VariableFormComponent from "./VariableForm.svelte";
 import type OutlinePanelComponent from "./OutlinePanel.svelte";
+import type MergePreviewComponent from "./MergePreview.svelte";
 export * from "./editor.svelte.js";
 export * from "./navigationGuard.js";
 export * from "./createNavigationGuard.svelte.js";
@@ -11,6 +12,7 @@ export * from "./history/index.js";
 export * from "./fileImport.svelte.js";
 export * from "./agentTools.svelte.js";
 export * from "./outline.svelte.js";
+export * from "./merge.svelte.js";
 export { DirtyTracker, createDirtyTracker, defaultIsEqual, HistoryManager, createHistoryManager, bindDirtyToHistory, withoutDirty, } from "@pixerate/editor";
 export type { DirtyTrackerOptions, Command, HistoryState, HistoryManagerOptions, HistoryEntry, HistoryMark, MergedExecutionOptions, HistoryDirtyBinding, BindDirtyToHistoryOptions, } from "@pixerate/editor";
 export type EditableTextNodeEditorProps = ComponentProps<typeof EditableTextNodeEditorComponent>;
@@ -21,12 +23,17 @@ export { default as EditableTextNodeEditor } from "./EditableTextNodeEditor.svel
 export { default as BubbleMenu } from "./BubbleMenu.svelte";
 export { default as TemplateRenderer } from "./TemplateRenderer.svelte";
 export { default as VariableForm } from "./VariableForm.svelte";
+export type MergePreviewProps = ComponentProps<typeof MergePreviewComponent>;
+export { default as MergePreview } from "./MergePreview.svelte";
 export type OutlinePanelProps = ComponentProps<typeof OutlinePanelComponent>;
 export { default as OutlinePanel } from "./OutlinePanel.svelte";
 export type { Template, TemplateVersion, Token, TokenType, ColorGradient, RichTextPresetOptions, ImageOptions, } from "@pixerate/editor";
-export type { PromptValues, PromptDiagnostic, VariableFormField, } from "@pixerate/editor";
+export type { PromptValues, PromptDiagnostic, VariableFormField, MergeDataSource, MergeRecord, MergeRecordsResult, MergeOutput, } from "@pixerate/editor";
 export * from "./spreadsheet/index.js";
 export * from "./image-editor/index.js";
 export * from "./review/index.js";
 export * from "./commands/index.js";
+export * from "./persistence/index.js";
+export * from "./generation/index.js";
+export * from "./find-replace/index.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAE7C,OAAO,KAAK,+BAA+B,MAAM,iCAAiC,CAAC;AACnF,OAAO,KAAK,mBAAmB,MAAM,qBAAqB,CAAC;AAC3D,OAAO,KAAK,yBAAyB,MAAM,2BAA2B,CAAC;AACvE,OAAO,KAAK,qBAAqB,MAAM,uBAAuB,CAAC;AAC/D,OAAO,KAAK,qBAAqB,MAAM,uBAAuB,CAAC;AAE/D,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mCAAmC,CAAC;AAClD,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AAEpC,OAAO,EACL,YAAY,EACZ,kBAAkB,EAClB,cAAc,EACd,cAAc,EACd,oBAAoB,EACpB,kBAAkB,EAClB,YAAY,GACb,MAAM,kBAAkB,CAAC;AAC1B,YAAY,EACV,mBAAmB,EACnB,OAAO,EACP,YAAY,EACZ,qBAAqB,EACrB,YAAY,EACZ,WAAW,EACX,sBAAsB,EACtB,mBAAmB,EACnB,yBAAyB,GAC1B,MAAM,kBAAkB,CAAC;AAG1B,MAAM,MAAM,2BAA2B,GAAG,cAAc,CACtD,OAAO,+BAA+B,CACvC,CAAC;AACF,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,OAAO,mBAAmB,CAAC,CAAC;AACzE,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAChD,OAAO,yBAAyB,CACjC,CAAC;AACF,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAE7E,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAEhE,YAAY,EACV,QAAQ,EACR,eAAe,EACf,KAAK,EACL,SAAS,EACT,aAAa,EACb,qBAAqB,EACrB,YAAY,GACb,MAAM,kBAAkB,CAAC;AAC1B,YAAY,EACV,YAAY,EACZ,gBAAgB,EAChB,iBAAiB,GAClB,MAAM,kBAAkB,CAAC;AAE1B,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAE7C,OAAO,KAAK,+BAA+B,MAAM,iCAAiC,CAAC;AACnF,OAAO,KAAK,mBAAmB,MAAM,qBAAqB,CAAC;AAC3D,OAAO,KAAK,yBAAyB,MAAM,2BAA2B,CAAC;AACvE,OAAO,KAAK,qBAAqB,MAAM,uBAAuB,CAAC;AAC/D,OAAO,KAAK,qBAAqB,MAAM,uBAAuB,CAAC;AAC/D,OAAO,KAAK,qBAAqB,MAAM,uBAAuB,CAAC;AAE/D,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mCAAmC,CAAC;AAClD,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAElC,OAAO,EACL,YAAY,EACZ,kBAAkB,EAClB,cAAc,EACd,cAAc,EACd,oBAAoB,EACpB,kBAAkB,EAClB,YAAY,GACb,MAAM,kBAAkB,CAAC;AAC1B,YAAY,EACV,mBAAmB,EACnB,OAAO,EACP,YAAY,EACZ,qBAAqB,EACrB,YAAY,EACZ,WAAW,EACX,sBAAsB,EACtB,mBAAmB,EACnB,yBAAyB,GAC1B,MAAM,kBAAkB,CAAC;AAG1B,MAAM,MAAM,2BAA2B,GAAG,cAAc,CACtD,OAAO,+BAA+B,CACvC,CAAC;AACF,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,OAAO,mBAAmB,CAAC,CAAC;AACzE,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAChD,OAAO,yBAAyB,CACjC,CAAC;AACF,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAE7E,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAEhE,YAAY,EACV,QAAQ,EACR,eAAe,EACf,KAAK,EACL,SAAS,EACT,aAAa,EACb,qBAAqB,EACrB,YAAY,GACb,MAAM,kBAAkB,CAAC;AAC1B,YAAY,EACV,YAAY,EACZ,gBAAgB,EAChB,iBAAiB,EACjB,eAAe,EACf,WAAW,EACX,kBAAkB,EAClB,WAAW,GACZ,MAAM,kBAAkB,CAAC;AAE1B,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC"}

package/dist/index.js

@@ -5,13 +5,18 @@ export * from "./history/index.js";
 export * from "./fileImport.svelte.js";
 export * from "./agentTools.svelte.js";
 export * from "./outline.svelte.js";
+export * from "./merge.svelte.js";
 export { DirtyTracker, createDirtyTracker, defaultIsEqual, HistoryManager, createHistoryManager, bindDirtyToHistory, withoutDirty, } from "@pixerate/editor";
 export { default as EditableTextNodeEditor } from "./EditableTextNodeEditor.svelte";
 export { default as BubbleMenu } from "./BubbleMenu.svelte";
 export { default as TemplateRenderer } from "./TemplateRenderer.svelte";
 export { default as VariableForm } from "./VariableForm.svelte";
+export { default as MergePreview } from "./MergePreview.svelte";
 export { default as OutlinePanel } from "./OutlinePanel.svelte";
 export * from "./spreadsheet/index.js";
 export * from "./image-editor/index.js";
 export * from "./review/index.js";
 export * from "./commands/index.js";
+export * from "./persistence/index.js";
+export * from "./generation/index.js";
+export * from "./find-replace/index.js";

package/dist/merge.svelte.d.ts

@@ -0,0 +1,51 @@
+import { type MergeRecordsOptions, type MergeRecordsResult, type ParseDataSourceOptions, type Template } from "@pixerate/editor";
+export interface MergePreviewOptions {
+    /** The prompt merged with each record. */
+    template: string;
+    templates?: Template[];
+    bindings?: Record<string, string>;
+    /** How to read the data source text. */
+    parseOptions?: ParseDataSourceOptions;
+    /** Passed to `mergeRecords` by `merge()`. */
+    skipIf?: MergeRecordsOptions["skipIf"];
+    separator?: string;
+    maxOutputs?: number;
+}
+/**
+ * Reactive mail-merge preview state for Svelte 5 (the counterpart of React's
+ * `useMergePreview`): parses a pasted or loaded data source, matches its
+ * fields to the template's variables (editable), steps through records and
+ * merges them all with `mergeRecords`.
+ *
+ * `getOptions` is read reactively, so pass `() => ({ template, templates })`
+ * built from props or state.
+ */
+export declare function createMergePreview(getOptions: () => MergePreviewOptions, initialSource?: string): {
+    sourceText: string;
+    setSourceText: (text: string) => void;
+    /** Reads a picked file (CSV, TSV or JSON) into `sourceText`. */
+    loadFile(file: Blob): Promise<void>;
+    readonly source: import("@pixerate/editor").MergeDataSource;
+    /** Variable names the template uses, in order. */
+    readonly variables: string[];
+    /** Variable → field: automatic matches with the user's overrides applied. */
+    readonly mapping: Record<string, string | null>;
+    setFieldMapping(variable: string, field: string | null): void;
+    resetMapping(): void;
+    /** 0-based index of the previewed record. */
+    readonly index: number;
+    readonly count: number;
+    setIndex: (next: number) => void;
+    next(): void;
+    prev(): void;
+    readonly record: import("@pixerate/editor").MergeRecord;
+    /** Prompt values for the previewed record. */
+    readonly values: import("@pixerate/editor").PromptValues;
+    /** Merges every record with the current mapping and stores the result. */
+    merge(): MergeRecordsResult;
+    readonly result: MergeRecordsResult | null;
+    /** The last merge's outputs as text or JSON. */
+    serialize(format: "text" | "json"): string;
+};
+export type MergePreviewState = ReturnType<typeof createMergePreview>;
+//# sourceMappingURL=merge.svelte.d.ts.map

package/dist/merge.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"merge.svelte.d.ts","sourceRoot":"","sources":["../src/merge.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,mBAAmB,EACxB,KAAK,kBAAkB,EACvB,KAAK,sBAAsB,EAC3B,KAAK,QAAQ,EACd,MAAM,kBAAkB,CAAC;AAE1B,MAAM,WAAW,mBAAmB;IAClC,0CAA0C;IAC1C,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAClC,wCAAwC;IACxC,YAAY,CAAC,EAAE,sBAAsB,CAAC;IACtC,6CAA6C;IAC7C,MAAM,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;;;;;;GAQG;AACH,wBAAgB,kBAAkB,CAChC,UAAU,EAAE,MAAM,mBAAmB,EACrC,aAAa,SAAK;gBA4CK,MAAM;0BAbA,MAAM;IAiBjC,gEAAgE;mBAC3C,IAAI;;IAMzB,kDAAkD;;IAIlD,6EAA6E;;8BAInD,MAAM,SAAS,MAAM,GAAG,IAAI;;IAOtD,6CAA6C;;;qBAlCvB,MAAM;;;;IAmD5B,8CAA8C;;IAI9C,0EAA0E;aACjE,kBAAkB;;IAe3B,gDAAgD;sBAC9B,MAAM,GAAG,MAAM,GAAG,MAAM;EAI7C;AAED,MAAM,MAAM,iBAAiB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC"}

package/dist/merge.svelte.js

@@ -0,0 +1,117 @@
+import { extractVariables, matchFields, mergeRecords, parseDataSource, recordToValues, serializeMergeOutputs, } from "@pixerate/editor";
+/**
+ * Reactive mail-merge preview state for Svelte 5 (the counterpart of React's
+ * `useMergePreview`): parses a pasted or loaded data source, matches its
+ * fields to the template's variables (editable), steps through records and
+ * merges them all with `mergeRecords`.
+ *
+ * `getOptions` is read reactively, so pass `() => ({ template, templates })`
+ * built from props or state.
+ */
+export function createMergePreview(getOptions, initialSource = "") {
+    let sourceText = $state(initialSource);
+    let overrides = $state.raw({});
+    let index = $state(0);
+    let result = $state.raw(null);
+    const options = $derived(getOptions());
+    const source = $derived(parseDataSource(sourceText, options.parseOptions));
+    const variables = $derived(extractVariables(options.template, {
+        templates: options.templates,
+        bindings: options.bindings,
+    }).map((v) => v.name));
+    const mapping = $derived.by(() => {
+        const merged = {
+            ...matchFields(variables, source.fields).mapping,
+        };
+        for (const [variable, field] of Object.entries(overrides)) {
+            if (variables.includes(variable) && (field === null || source.fields.includes(field))) {
+                merged[variable] = field;
+            }
+        }
+        return merged;
+    });
+    const count = $derived(source.records.length);
+    const current = $derived(count === 0 ? 0 : Math.min(index, count - 1));
+    const record = $derived(source.records[current]);
+    const values = $derived(record ? recordToValues(record, mapping) : {});
+    function setSourceText(text) {
+        sourceText = text;
+        index = 0;
+        result = null;
+    }
+    function setIndex(next) {
+        index = Math.max(0, Math.min(next, count - 1));
+    }
+    return {
+        get sourceText() {
+            return sourceText;
+        },
+        set sourceText(text) {
+            setSourceText(text);
+        },
+        setSourceText,
+        /** Reads a picked file (CSV, TSV or JSON) into `sourceText`. */
+        async loadFile(file) {
+            setSourceText(await file.text());
+        },
+        get source() {
+            return source;
+        },
+        /** Variable names the template uses, in order. */
+        get variables() {
+            return variables;
+        },
+        /** Variable → field: automatic matches with the user's overrides applied. */
+        get mapping() {
+            return mapping;
+        },
+        setFieldMapping(variable, field) {
+            overrides = { ...overrides, [variable]: field };
+            result = null;
+        },
+        resetMapping() {
+            overrides = {};
+        },
+        /** 0-based index of the previewed record. */
+        get index() {
+            return current;
+        },
+        get count() {
+            return count;
+        },
+        setIndex,
+        next() {
+            setIndex(current + 1);
+        },
+        prev() {
+            setIndex(current - 1);
+        },
+        get record() {
+            return record;
+        },
+        /** Prompt values for the previewed record. */
+        get values() {
+            return values;
+        },
+        /** Merges every record with the current mapping and stores the result. */
+        merge() {
+            const merged = mergeRecords(options.template, source, {
+                templates: options.templates,
+                bindings: options.bindings,
+                mapping,
+                skipIf: options.skipIf,
+                separator: options.separator,
+                maxOutputs: options.maxOutputs,
+            });
+            result = merged;
+            return merged;
+        },
+        get result() {
+            return result;
+        },
+        /** The last merge's outputs as text or JSON. */
+        serialize(format) {
+            return result ? serializeMergeOutputs(result.outputs, format, options.separator) : "";
+        },
+    };
+}

package/dist/persistence/RecoveryPrompt.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import { formatRecoveryMessage, type RecoveryMeta } from '@pixerate/editor/persistence';
+
+  interface Props {
+    /** `createAutosave(...).recovery`; nothing renders while it is `null`. */
+    recovery: { meta: RecoveryMeta } | null;
+    onRestore: () => void;
+    onDiscard: () => void;
+    /** Formats the snapshot time (default `toLocaleString`). */
+    formatTime?: (time: number) => string;
+    restoreLabel?: string;
+    discardLabel?: string;
+    class?: string;
+  }
+
+  let {
+    recovery,
+    onRestore,
+    onDiscard,
+    formatTime,
+    restoreLabel = 'Restore',
+    discardLabel = 'Discard',
+    class: className = ''
+  }: Props = $props();
+</script>
+
+{#if recovery}
+  <div
+    role="alertdialog"
+    aria-label="Unsaved changes found"
+    data-recovery-prompt=""
+    class="flex flex-wrap items-center gap-3 rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground shadow-sm {className}"
+  >
+    <span class="min-w-0 flex-1">
+      {formatRecoveryMessage(recovery.meta, formatTime)}
+      {#if recovery.meta.name}
+        <span class="ml-1 text-xs text-muted-foreground">({recovery.meta.name})</span>
+      {/if}
+    </span>
+    <button
+      type="button"
+      data-recovery-restore=""
+      onclick={onRestore}
+      class="rounded-md bg-primary px-3 py-1 text-xs font-medium text-primary-foreground hover:opacity-90"
+    >
+      {restoreLabel}
+    </button>
+    <button
+      type="button"
+      data-recovery-discard=""
+      onclick={onDiscard}
+      class="rounded-md border border-border px-3 py-1 text-xs font-medium hover:bg-muted"
+    >
+      {discardLabel}
+    </button>
+  </div>
+{/if}