@pixerate/editor-svelte 0.21.0 → 0.23.0

package/dist/image-editor/ControlSlider.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import type { ControlSpec } from '@pixerate/editor/image-editor';
+  import { controlTrackBackground, formatControlValue } from '@pixerate/editor/image-editor';
+
+  interface Props {
+    spec: ControlSpec;
+    value: number;
+    onchange: (value: number) => void;
+    disabled?: boolean;
+    /** Overrides `spec.label` (also the accessible name). */
+    label?: string;
+  }
+
+  let { spec, value, onchange, disabled = false, label }: Props = $props();
+
+  const name = $derived(label ?? spec.label);
+  const track = $derived(controlTrackBackground(spec));
+</script>
+
+<div data-control-id={spec.id}>
+  <div class="flex justify-between text-slate-400 mb-1">
+    <span>{name}</span>
+    <span class="font-mono">{formatControlValue(spec, value)}</span>
+  </div>
+  <input
+    type="range"
+    min={spec.min}
+    max={spec.max}
+    step={spec.step}
+    aria-label={name}
+    {disabled}
+    {value}
+    oninput={(e) => onchange(Number((e.target as HTMLInputElement).value))}
+    class="w-full accent-indigo-500 disabled:opacity-40"
+  />
+  {#if track}
+    <div class="h-0.5 rounded-full opacity-70" style="background: {track}"></div>
+  {/if}
+</div>

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

@@ -0,0 +1,13 @@
+import type { ControlSpec } from '@pixerate/editor/image-editor';
+interface Props {
+    spec: ControlSpec;
+    value: number;
+    onchange: (value: number) => void;
+    disabled?: boolean;
+    /** Overrides `spec.label` (also the accessible name). */
+    label?: string;
+}
+declare const ControlSlider: import("svelte").Component<Props, {}, "">;
+type ControlSlider = ReturnType<typeof ControlSlider>;
+export default ControlSlider;
+//# sourceMappingURL=ControlSlider.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ControlSlider.svelte.d.ts","sourceRoot":"","sources":["../../src/image-editor/ControlSlider.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAI/D,UAAU,KAAK;IACb,IAAI,EAAE,WAAW,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yDAAyD;IACzD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAyBH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/image-editor/CurvesEditor.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">
+  import type { CurvePoint, ImageHistogram } from '@pixerate/editor/image-editor';
+  import {
+    boxToCurvePoint,
+    curvePointToBox,
+    curveSvgPath,
+    hitTestCurvePoint,
+    histogramPath,
+    insertCurvePoint,
+    moveCurvePoint,
+    removeCurvePoint,
+  } from '@pixerate/editor/image-editor';
+
+  interface Props {
+    points: CurvePoint[];
+    /** `commit` is true for the first change of a gesture (one undo step), false for the drag moves. */
+    onchange: (points: CurvePoint[], commit: boolean) => void;
+    histogram?: ImageHistogram | null;
+    channel?: 'master' | 'red' | 'green' | 'blue';
+    size?: number;
+  }
+
+  let { points, onchange, histogram = null, channel = 'master', size = 200 }: Props = $props();
+
+  const BOX = 256;
+  const STROKE = { master: '#e2e8f0', red: '#ef4444', green: '#22c55e', blue: '#3b82f6' };
+
+  let svgEl: SVGSVGElement | undefined = $state();
+  let drag: number | null = $state(null);
+
+  function toBox(e: MouseEvent) {
+    const rect = svgEl?.getBoundingClientRect();
+    if (!rect || !rect.width || !rect.height) return { x: 0, y: 0 };
+    return { x: ((e.clientX - rect.left) / rect.width) * BOX, y: ((e.clientY - rect.top) / rect.height) * BOX };
+  }
+
+  function onpointerdown(e: PointerEvent) {
+    const { x, y } = toBox(e);
+    let index = hitTestCurvePoint(points, x, y, BOX, BOX, 10);
+    if (index === -1) {
+      const inserted = insertCurvePoint(points, boxToCurvePoint(x, y, BOX, BOX));
+      onchange(inserted.points, true);
+      index = inserted.index;
+    } else {
+      onchange(points, true);
+    }
+    drag = index;
+    (e.target as Element).setPointerCapture?.(e.pointerId);
+  }
+
+  function onpointermove(e: PointerEvent) {
+    if (drag === null) return;
+    const { x, y } = toBox(e);
+    onchange(moveCurvePoint(points, drag, boxToCurvePoint(x, y, BOX, BOX)), false);
+  }
+
+  function ondblclick(e: MouseEvent) {
+    const { x, y } = toBox(e);
+    const index = hitTestCurvePoint(points, x, y, BOX, BOX, 10);
+    if (index !== -1 && points.length > 2) onchange(removeCurvePoint(points, index), true);
+  }
+
+  const histChannel = $derived(channel === 'master' ? 'luminance' : channel);
+</script>
+
+<!-- Curves editor over the histogram: click to add a point, drag to move it, double-click to remove it. -->
+<svg
+  bind:this={svgEl}
+  viewBox="0 0 {BOX} {BOX}"
+  width={size}
+  height={size}
+  role="application"
+  aria-label="{channel} curve"
+  data-testid="curves-editor"
+  class="rounded bg-slate-950/70 touch-none select-none cursor-crosshair"
+  {onpointerdown}
+  {onpointermove}
+  onpointerup={() => (drag = null)}
+  onpointercancel={() => (drag = null)}
+  {ondblclick}
+>
+  {#if histogram && histogram.samples > 0}
+    <path d={histogramPath(histogram, histChannel, BOX, BOX)} fill="rgba(148, 163, 184, 0.25)" />
+  {/if}
+  {#each [64, 128, 192] as v (v)}
+    <g stroke="rgba(148, 163, 184, 0.2)" stroke-width="1">
+      <line x1={v} y1="0" x2={v} y2={BOX} />
+      <line x1="0" y1={v} x2={BOX} y2={v} />
+    </g>
+  {/each}
+  <line x1="0" y1={BOX} x2={BOX} y2="0" stroke="rgba(148, 163, 184, 0.35)" stroke-dasharray="4 4" />
+  <path d={curveSvgPath(points, BOX, BOX)} fill="none" stroke={STROKE[channel]} stroke-width="2" />
+  {#each points as p, i (i)}
+    {@const b = curvePointToBox(p, BOX, BOX)}
+    <circle
+      cx={b.x}
+      cy={b.y}
+      r="5"
+      fill={drag === i ? STROKE[channel] : '#0f172a'}
+      stroke={STROKE[channel]}
+      stroke-width="2"
+      aria-label="Point {p.input} to {p.output}"
+    />
+  {/each}
+</svg>

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

@@ -0,0 +1,13 @@
+import type { CurvePoint, ImageHistogram } from '@pixerate/editor/image-editor';
+interface Props {
+    points: CurvePoint[];
+    /** `commit` is true for the first change of a gesture (one undo step), false for the drag moves. */
+    onchange: (points: CurvePoint[], commit: boolean) => void;
+    histogram?: ImageHistogram | null;
+    channel?: 'master' | 'red' | 'green' | 'blue';
+    size?: number;
+}
+declare const CurvesEditor: import("svelte").Component<Props, {}, "">;
+type CurvesEditor = ReturnType<typeof CurvesEditor>;
+export default CurvesEditor;
+//# sourceMappingURL=CurvesEditor.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CurvesEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/image-editor/CurvesEditor.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAa9E,UAAU,KAAK;IACb,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,oGAAoG;IACpG,QAAQ,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,EAAE,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1D,SAAS,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IAClC,OAAO,CAAC,EAAE,QAAQ,GAAG,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC;IAC9C,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAsEH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/image-editor/Histogram.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import type { ImageHistogram } from '@pixerate/editor/image-editor';
+  import { histogramPath } from '@pixerate/editor/image-editor';
+
+  interface Props {
+    histogram: ImageHistogram | null;
+    /** `rgb` overlays the three channels on the luminance; a single channel draws just that one. */
+    channel?: 'rgb' | 'luminance' | 'red' | 'green' | 'blue';
+    height?: number;
+    class?: string;
+  }
+
+  let { histogram, channel = 'rgb', height = 64, class: className = '' }: Props = $props();
+
+  const W = 256;
+  const FILL: Record<'luminance' | 'red' | 'green' | 'blue', string> = {
+    luminance: 'rgba(148, 163, 184, 0.45)',
+    red: 'rgba(239, 68, 68, 0.45)',
+    green: 'rgba(34, 197, 94, 0.45)',
+    blue: 'rgba(59, 130, 246, 0.45)',
+  };
+
+  const channels = $derived(channel === 'rgb' ? (['luminance', 'red', 'green', 'blue'] as const) : ([channel] as const));
+  const paths = $derived(
+    histogram && histogram.samples > 0 ? channels.map((c) => ({ c, d: histogramPath(histogram, c, W, height) })) : []
+  );
+  const clipLow = $derived(histogram && histogram.samples ? Math.max(...histogram.shadows) / histogram.samples : 0);
+  const clipHigh = $derived(histogram && histogram.samples ? Math.max(...histogram.highlights) / histogram.samples : 0);
+</script>
+
+<svg
+  viewBox="0 0 {W} {height}"
+  preserveAspectRatio="none"
+  role="img"
+  aria-label={histogram ? `Histogram of ${histogram.samples} pixels` : 'Histogram (no data)'}
+  data-testid="image-editor-histogram"
+  class="w-full rounded bg-slate-950/60 {className}"
+  style="height: {height}px"
+>
+  {#each paths as p (p.c)}
+    <path d={p.d} fill={FILL[p.c]} stroke="none" />
+  {/each}
+  {#if clipLow > 0.005}
+    <rect x="0" y="0" width="3" {height} fill="#3b82f6" data-testid="histogram-clip-shadows" />
+  {/if}
+  {#if clipHigh > 0.005}
+    <rect x={W - 3} y="0" width="3" {height} fill="#ef4444" data-testid="histogram-clip-highlights" />
+  {/if}
+</svg>

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

@@ -0,0 +1,12 @@
+import type { ImageHistogram } from '@pixerate/editor/image-editor';
+interface Props {
+    histogram: ImageHistogram | null;
+    /** `rgb` overlays the three channels on the luminance; a single channel draws just that one. */
+    channel?: 'rgb' | 'luminance' | 'red' | 'green' | 'blue';
+    height?: number;
+    class?: string;
+}
+declare const Histogram: import("svelte").Component<Props, {}, "">;
+type Histogram = ReturnType<typeof Histogram>;
+export default Histogram;
+//# sourceMappingURL=Histogram.svelte.d.ts.map

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

@@ -16,7 +16,14 @@
     getCropCursor,
     calculateCropDrag,
     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';
 
@@ -47,6 +54,9 @@
   const internalEditor = createReactiveImageEditor();
   const editor = $derived(propEditor || internalEditor);
   onDestroy(() => internalEditor.destroy());
+  const legacyProcess = $derived(
+    normalizeProcessVersion(editor.state.adjustments.process) < LATEST_PROCESS_VERSION
+  );
 
   let canvasEl = $state<HTMLCanvasElement | null>(null);
   let containerEl = $state<HTMLDivElement | null>(null);
@@ -881,116 +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>
-
-          <!-- 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>
+            {#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"
+              >
+                <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;AASzC,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;AA+hCH,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;
@@ -14,6 +16,14 @@ export declare function createReactiveImageEditor(options?: ImageEditorOptions):
     flipVertical(): void;
     setAdjustments(partial: Partial<ImageAdjustments>, commitToHistory?: boolean): void;
     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;
@@ -50,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;;0BAM3B,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;
@@ -53,6 +61,26 @@ export function createReactiveImageEditor(options = {}) {
         resetAdjustments() {
             controller.resetAdjustments();
         },
+        /** Update to Current Process: re-render the adjustments with the latest process (one undo step). */
+        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);
         },
@@ -132,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,8 +12,9 @@ export * from "./history/index.js";
 export * from "./fileImport.svelte.js";
 export * from "./agentTools.svelte.js";
 export * from "./outline.svelte.js";
-export { DirtyTracker, createDirtyTracker, defaultIsEqual, HistoryManager, createHistoryManager, } from "@pixerate/editor";
-export type { DirtyTrackerOptions, Command, HistoryState, HistoryManagerOptions, } from "@pixerate/editor";
+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>;
 export type BubbleMenuProps = ComponentProps<typeof BubbleMenuComponent>;
 export type TemplateRendererProps = ComponentProps<typeof TemplateRendererComponent>;
@@ -21,11 +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,GACrB,MAAM,kBAAkB,CAAC;AAC1B,YAAY,EACV,mBAAmB,EACnB,OAAO,EACP,YAAY,EACZ,qBAAqB,GACtB,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"}
+{"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"}