@pixerate/editor-svelte 0.73.1 → 0.74.0

package/dist/image-editor/FreeTransformOptionsBar.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+  import type { FreeTransformField, FreeTransformTool, Interpolation } from '@pixerate/editor/image-editor';
+  import { FREE_TRANSFORM_FIELDS, FREE_TRANSFORM_MODE_OPTIONS, INTERPOLATIONS, TRANSFORM_ANCHORS } from '@pixerate/editor/image-editor';
+
+  /**
+   * Free Transform's options bar (Photoshop's): the mode switch (Free, Rotate, Skew, Distort,
+   * Perspective), the reference-point locator, X / Y of the reference point, W / H in percent
+   * with the proportional chain, the angle and skews, the interpolation, and Commit (Enter) /
+   * Cancel (Esc). Typed values apply on Enter or when the field loses focus.
+   */
+  let { tool, class: className = '' }: { tool: FreeTransformTool; class?: string } = $props();
+
+  let tick = $state(0);
+  $effect(() => tool.subscribe(() => tick++));
+
+  /** What the bar shows, re-read whenever the tool changes. */
+  const view = $derived.by(() => {
+    void tick;
+    return { bar: tool.active ? tool.bar() : null, mode: tool.mode, proportional: tool.proportional, interpolation: tool.interpolation, error: tool.error };
+  });
+  const bar = $derived(view.bar);
+  const chip = (on: boolean) => `px-2 py-1 rounded text-[11px] ${on ? 'bg-indigo-600 text-white' : 'bg-slate-800 text-slate-300 hover:text-white'}`;
+  const round = (v: number, unit: string) => (unit === 'px' ? Math.round(v * 10) / 10 : Math.round(v * 100) / 100);
+
+  function apply(field: FreeTransformField, raw: string) {
+    const b = tool.bar();
+    const v = Number(raw);
+    if (b && raw.trim() !== '' && Number.isFinite(v) && Math.abs(v - b[field]) > 1e-9) tool.setField(field, v);
+  }
+</script>
+
+{#if bar}
+  <div class="flex flex-wrap items-center gap-2 text-xs text-slate-200 {className}" data-testid="free-transform-options" role="toolbar" aria-label="Free Transform options">
+    <div class="flex gap-1" role="group" aria-label="Transform mode">
+      {#each FREE_TRANSFORM_MODE_OPTIONS as m (m.id)}
+        <button type="button" title={m.title} aria-pressed={view.mode === m.id} class={chip(view.mode === m.id)} onclick={() => tool.setMode(m.id)}>{m.label}</button>
+      {/each}
+    </div>
+    <div class="grid grid-cols-3 gap-px" role="group" aria-label="Reference point">
+      {#each TRANSFORM_ANCHORS as a (a)}
+        <button type="button" aria-label={`Reference point ${a}`} title={`Reference point: ${a}`} class="h-2.5 w-2.5 rounded-sm bg-slate-700 hover:bg-indigo-500" onclick={() => tool.setReference(a)}></button>
+      {/each}
+    </div>
+    {#each FREE_TRANSFORM_FIELDS as f (f.id)}
+      <label class="flex items-center gap-1" title={f.title}>
+        <span class="text-slate-400">{f.label}</span>
+        {#key round(bar[f.id], f.unit)}
+          <input
+            type="number"
+            aria-label={f.title}
+            value={round(bar[f.id], f.unit)}
+            disabled={!bar.affine}
+            step={f.unit === 'px' ? 1 : 0.1}
+            class="w-16 rounded border border-slate-700 bg-slate-900 px-1 py-0.5 text-right disabled:opacity-40"
+            onblur={(e) => apply(f.id, e.currentTarget.value)}
+            onkeydown={(e) => {
+              if (e.key === 'Enter') {
+                e.preventDefault();
+                e.stopPropagation();
+                apply(f.id, e.currentTarget.value);
+              }
+            }}
+          />
+        {/key}
+        <span class="text-slate-500">{f.unit}</span>
+        {#if f.id === 'scaleX'}
+          <button
+            type="button"
+            aria-label="Keep width and height proportional"
+            aria-pressed={view.proportional}
+            class={chip(view.proportional)}
+            onclick={() => {
+              tool.proportional = !tool.proportional;
+              tick++;
+            }}>⛓︎</button>
+        {/if}
+      </label>
+    {/each}
+    <label class="flex items-center gap-1">
+      <span class="text-slate-400">Interpolation</span>
+      <select
+        aria-label="Interpolation"
+        value={view.interpolation}
+        onchange={(e) => tool.setInterpolation(e.currentTarget.value as Interpolation)}
+        class="rounded border border-slate-700 bg-slate-900 px-1 py-0.5"
+      >
+        {#each INTERPOLATIONS as i (i)}
+          <option value={i}>{i[0].toUpperCase() + i.slice(1)}</option>
+        {/each}
+      </select>
+    </label>
+    <button type="button" title="Commit (Enter)" class="px-2 py-1 rounded bg-emerald-600 text-white hover:bg-emerald-500" onclick={() => tool.commit()}>Commit</button>
+    <button type="button" title="Cancel (Esc)" class={chip(false)} onclick={() => tool.cancel()}>Cancel</button>
+    {#if view.error}
+      <span role="alert" class="text-rose-400">{view.error}</span>
+    {/if}
+  </div>
+{/if}

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

@@ -0,0 +1,9 @@
+import type { FreeTransformTool } from '@pixerate/editor/image-editor';
+type $$ComponentProps = {
+    tool: FreeTransformTool;
+    class?: string;
+};
+declare const FreeTransformOptionsBar: import("svelte").Component<$$ComponentProps, {}, "">;
+type FreeTransformOptionsBar = ReturnType<typeof FreeTransformOptionsBar>;
+export default FreeTransformOptionsBar;
+//# sourceMappingURL=FreeTransformOptionsBar.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FreeTransformOptionsBar.svelte.d.ts","sourceRoot":"","sources":["../../src/image-editor/FreeTransformOptionsBar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAsB,iBAAiB,EAAiB,MAAM,+BAA+B,CAAC;AAGzG,KAAK,gBAAgB,GAAI;IAAE,IAAI,EAAE,iBAAiB,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAmFtE,QAAA,MAAM,uBAAuB,sDAAwC,CAAC;AACtE,KAAK,uBAAuB,GAAG,UAAU,CAAC,OAAO,uBAAuB,CAAC,CAAC;AAC1E,eAAe,uBAAuB,CAAC"}

package/dist/image-editor/ImageEditor.svelte

@@ -26,6 +26,8 @@
     PaintGesture,
     handlePaintShortcut,
     pointerPressure,
+    FreeTransformTool,
+    getViewportProjection,
     type SelectionToolOptions,
   } from '@pixerate/editor/image-editor';
   import ControlSlider from './ControlSlider.svelte';
@@ -35,6 +37,7 @@
   import BrushOptionsBar from './BrushOptionsBar.svelte';
   import SelectionOptionsBar from './SelectionOptionsBar.svelte';
   import RefineEdgePanel from './RefineEdgePanel.svelte';
+  import FreeTransformOptionsBar from './FreeTransformOptionsBar.svelte';
   import { onDestroy, untrack } from 'svelte';
   import { createReactiveImageEditor, type ReactiveImageEditor } from './imageEditorState.svelte.js';
 
@@ -81,6 +84,75 @@
   // Paint tools (Move, Brush, Eraser): the pointer gesture and the brush cursor.
   const paintGesture = $derived(new PaintGesture(editor.controller));
   let brushCursor: ImagePoint | null = null;
+
+  // Free Transform (Ctrl/Cmd+T): the shared tool drives a session; its overlay is drawn by the renderer.
+  const transformTool = $derived(
+    new FreeTransformTool(editor.controller, {
+      schedule: (run) => (typeof requestAnimationFrame !== 'undefined' ? requestAnimationFrame(run) : run()),
+    })
+  );
+  let transformTick = $state(0);
+  let transformCursor = $state('default');
+  const transformActive = $derived((void transformTick, transformTool.active));
+  const transformError = $derived((void transformTick, transformTool.error));
+  $effect(() => {
+    const tool = transformTool;
+    const off = tool.subscribe(() => {
+      transformTick++;
+      void renderCanvas();
+    });
+    return () => {
+      off();
+      tool.cancel();
+    };
+  });
+  $effect(() => {
+    if (typeof window === 'undefined') return;
+    const tool = transformTool;
+    const onKey = (e: KeyboardEvent) => {
+      if (tool.key(e)) e.preventDefault();
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  });
+
+  /** The document point of a pointer event and the hit tolerance (6 screen px). */
+  function transformPoint(e: PointerEvent) {
+    const rect = canvasEl!.getBoundingClientRect();
+    const sx = rect.width > 0 ? canvasEl!.width / rect.width : 1;
+    const sy = rect.height > 0 ? canvasEl!.height / rect.height : 1;
+    const s = editor.controller.getState();
+    const cropping = activeTab === 'crop';
+    const projection = getViewportProjection(s, canvasEl!.width, canvasEl!.height, cropping);
+    const pt = canvasToImagePoint({ x: (e.clientX - rect.left) * sx, y: (e.clientY - rect.top) * sy }, s, canvasEl!.width, canvasEl!.height, cropping);
+    transformTool.setView(projection.scale);
+    return { pt, tolerance: 6 / (projection.scale || 1) };
+  }
+  function handleTransformPointerDown(e: PointerEvent): boolean {
+    if (!transformTool.active || !canvasEl) return false;
+    if (e.button !== 0) return true;
+    e.preventDefault();
+    try {
+      canvasEl.setPointerCapture?.(e.pointerId);
+    } catch {
+      // Synthetic events have no active pointer to capture.
+    }
+    const { pt, tolerance } = transformPoint(e);
+    transformTool.down(pt, tolerance);
+    return true;
+  }
+  function handleTransformPointerMove(e: PointerEvent): boolean {
+    if (!transformTool.active || !canvasEl) return false;
+    const { pt, tolerance } = transformPoint(e);
+    if (e.buttons & 1) transformTool.move(pt, e);
+    else transformCursor = transformTool.cursor(transformTool.hit(pt, tolerance));
+    return true;
+  }
+  function handleTransformPointerUp(): boolean {
+    if (!transformTool.active) return false;
+    transformTool.up();
+    return true;
+  }
   let paintError = $state<string | null>(null);
   let selectionDraft = $state.raw<ImagePoint[] | null>(null);
   let selectionError = $state<string | null>(null);
@@ -216,9 +288,10 @@
       draftCrop: overrideCrop !== undefined ? overrideCrop : draftCrop,
       draftSelectionPath: selectionDraft,
       brushCursor:
-        activeTab === 'paint' && brushCursor && editor.controller.getState().activeTool !== 'move'
+        activeTab === 'paint' && brushCursor && editor.controller.getState().activeTool !== 'move' && !transformTool.active
           ? { ...brushCursor, diameter: editor.controller.getState().paint.brush.size }
           : null,
+      freeTransform: transformTool.overlay(),
     });
   }
 
@@ -236,6 +309,7 @@
     }));
   }
   function handlePaintPointerDown(e: PointerEvent) {
+    if (handleTransformPointerDown(e)) return;
     if (activeTab !== 'paint' || e.button !== 0 || !canvasEl) return;
     e.preventDefault();
     try {
@@ -246,6 +320,7 @@
     paintError = paintGesture.down(paintSamples(e)[0]);
   }
   function handlePaintPointerMove(e: PointerEvent) {
+    if (handleTransformPointerMove(e)) return;
     if (activeTab !== 'paint' || !canvasEl) return;
     const samples = paintSamples(e);
     brushCursor = samples[samples.length - 1] ?? null;
@@ -253,6 +328,7 @@
     else void renderCanvas();
   }
   function handlePaintPointerUp() {
+    if (handleTransformPointerUp()) return;
     if (activeTab !== 'paint' || !paintGesture.active) return;
     paintGesture.up();
     if (paintGesture.error) paintError = paintGesture.error;
@@ -319,7 +395,7 @@
   }
 
   function handleMouseDown(e: MouseEvent) {
-    if (!canvasEl) return;
+    if (!canvasEl || transformTool.active) return;
     const canvasPt = getCanvasEventPoint(e);
 
     if (activeTab === 'select') {
@@ -398,7 +474,7 @@
   }
 
   function handleMouseMove(e: MouseEvent) {
-    if (!canvasEl) return;
+    if (!canvasEl || transformTool.active) return;
     const canvasPt = getCanvasEventPoint(e);
 
     if (activeTab === 'select') {
@@ -559,7 +635,7 @@
   }
 
   function handleMouseUp(e: MouseEvent) {
-    if (!canvasEl) return;
+    if (!canvasEl || transformTool.active) return;
     const canvasPt = getCanvasEventPoint(e);
 
     if (activeTab === 'select') {
@@ -876,6 +952,13 @@
   </div>
 
   <!-- Main Viewport + Sidebar Layout -->
+  <!-- Free Transform options bar (Ctrl/Cmd+T), above the viewport while a transform is open -->
+  {#if transformActive}
+    <FreeTransformOptionsBar tool={transformTool} class="border-b border-slate-800 bg-slate-900/95 px-4 py-2" />
+  {:else if transformError}
+    <div role="alert" class="border-b border-rose-900 bg-rose-950/80 px-4 py-1.5 text-xs text-rose-200">{transformError}</div>
+  {/if}
+
   <div class="flex flex-col md:flex-row flex-1 min-h-[520px] md:h-[560px]">
     <!-- Canvas Area -->
     <div
@@ -893,8 +976,10 @@
         onpointerup={handlePaintPointerUp}
         onpointercancel={() => paintGesture.cancel()}
         data-testid="image-editor-canvas"
-        class="absolute inset-0 w-full h-full block {activeTab === 'paint' ? 'touch-none cursor-crosshair' : ''}"
+        style={transformActive ? `cursor: ${transformCursor}` : undefined}
+        class="absolute inset-0 w-full h-full block {transformActive ? 'touch-none' : activeTab === 'paint' ? 'touch-none cursor-crosshair' : ''}"
       ></canvas>
+
     </div>
 
     <!-- Tab Controls Sidebar -->
@@ -1076,6 +1161,12 @@
       {#if activeTab === 'layers'}
         <div class="flex flex-col gap-3 text-xs">
           <span class="font-semibold text-slate-200 uppercase tracking-wider text-[11px]">Layers</span>
+          <button
+            type="button"
+            title="Edit › Free Transform (Ctrl/Cmd+T): the selected pixels, or the whole active layer"
+            class="px-2 py-1 rounded text-[11px] bg-slate-800 text-slate-300 hover:text-white self-start disabled:opacity-40"
+            disabled={transformActive}
+            onclick={() => transformTool.begin()}>Free Transform</button>
           <LayersPanel controller={editor.controller} />
         </div>
       {/if}
@@ -1084,6 +1175,12 @@
         <div class="flex flex-col gap-3 text-xs">
           <span class="font-semibold text-slate-200 uppercase tracking-wider text-[11px]">Paint</span>
           <BrushOptionsBar controller={editor.controller} />
+          <button
+            type="button"
+            title="Edit › Free Transform (Ctrl/Cmd+T): the selected pixels, or the whole active layer"
+            class="px-2 py-1 rounded text-[11px] bg-slate-800 text-slate-300 hover:text-white self-start disabled:opacity-40"
+            disabled={transformActive}
+            onclick={() => transformTool.begin()}>Free Transform</button>
           {#if paintError}
             <p role="alert" class="text-rose-400" data-testid="paint-error">{paintError}</p>
           {/if}
@@ -1331,6 +1428,20 @@
           {#if selectionError}
             <p role="alert" class="text-rose-400">{selectionError}</p>
           {/if}
+          <div class="flex gap-1">
+            <button
+            type="button"
+            title="Select › Transform Selection: the outline only"
+            class="px-2 py-1 rounded text-[11px] bg-slate-800 text-slate-300 hover:text-white self-start disabled:opacity-40"
+            disabled={transformActive}
+            onclick={() => transformTool.begin({ content: 'selection-outline' })}>Transform Selection</button>
+            <button
+            type="button"
+            title="Edit › Free Transform: the selected pixels of the active layer"
+            class="px-2 py-1 rounded text-[11px] bg-slate-800 text-slate-300 hover:text-white self-start disabled:opacity-40"
+            disabled={transformActive}
+            onclick={() => transformTool.begin({ content: 'selection' })}>Free Transform Pixels</button>
+          </div>
           <RefineEdgePanel
             controller={editor.controller}
             selection={editor.state.selection ?? null}

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,EAClB,cAAc,EACf,MAAM,+BAA+B,CAAC;AA0BzC,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;IAC7B,GAAG,CAAC,EAAE,cAAc,CAAC;CACtB;AAupCH,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,EAClB,cAAc,EACf,MAAM,+BAA+B,CAAC;AA6BzC,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;IAC7B,GAAG,CAAC,EAAE,cAAc,CAAC;CACtB;AA+uCH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/image-editor/LayersPanel.svelte

@@ -326,6 +326,19 @@
             class="shrink-0 grid place-items-center rounded bg-slate-800 text-[9px] text-slate-400 ring-1 ring-slate-700"
             style="width: {thumbnailSize}px; height: {thumbnailSize}px">{layerBadge(layer)}</span>
         {/if}
+        {#if layer.mask && !layer.mask.source && layer.type === 'pixel'}
+          <button
+            type="button"
+            aria-label={`${layer.mask.linked === false ? 'Link' : 'Unlink'} ${row.label} mask`}
+            aria-pressed={layer.mask.linked !== false}
+            title={layer.mask.linked === false ? 'Mask unlinked: it stays put when the layer moves or transforms. Click to link.' : 'Mask linked: it moves with the layer. Click to unlink.'}
+            data-testid="layer-mask-link"
+            class="shrink-0 text-[10px] leading-none {layer.mask.linked === false ? 'text-slate-600' : 'text-slate-300'}"
+            onclick={(e) => {
+              e.stopPropagation();
+              attempt(() => controller.setLayerMaskProps(layer.id, { linked: layer.mask!.linked === false }));
+            }}>{layer.mask.linked === false ? '⛓︎̸' : '⛓︎'}</button>
+        {/if}
         {#if layer.mask}
           <canvas
             use:paint={maskThumb(layer)}

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

@@ -1 +1 @@
-{"version":3,"file":"LayersPanel.svelte.d.ts","sourceRoot":"","sources":["../../src/image-editor/LayersPanel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,qBAAqB,EAA2D,MAAM,+BAA+B,CAAC;AAkBlI,UAAU,KAAK;IACb,UAAU,EAAE,qBAAqB,CAAC;IAClC,yCAAyC;IACzC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iDAAiD;IACjD,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,yDAAyD;IACzD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8DAA8D;IAC9D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAkRH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"LayersPanel.svelte.d.ts","sourceRoot":"","sources":["../../src/image-editor/LayersPanel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,qBAAqB,EAA2D,MAAM,+BAA+B,CAAC;AAkBlI,UAAU,KAAK;IACb,UAAU,EAAE,qBAAqB,CAAC;IAClC,yCAAyC;IACzC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iDAAiD;IACjD,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,yDAAyD;IACzD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8DAA8D;IAC9D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAwRH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

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

@@ -9,6 +9,7 @@ import type RefineEdgePanelComponent from "./RefineEdgePanel.svelte";
 import type LayersPanelComponent from "./LayersPanel.svelte";
 import type LayerEffectsPanelComponent from "./LayerEffectsPanel.svelte";
 import type BrushOptionsBarComponent from "./BrushOptionsBar.svelte";
+import type FreeTransformOptionsBarComponent from "./FreeTransformOptionsBar.svelte";
 export { default as ImageEditor } from './ImageEditor.svelte';
 export { default as Histogram } from './Histogram.svelte';
 export { default as AdjustmentLayersPanel } from './AdjustmentLayersPanel.svelte';
@@ -19,6 +20,7 @@ export { default as RefineEdgePanel } from './RefineEdgePanel.svelte';
 export { default as LayersPanel } from './LayersPanel.svelte';
 export { default as LayerEffectsPanel } from './LayerEffectsPanel.svelte';
 export { default as BrushOptionsBar } from './BrushOptionsBar.svelte';
+export { default as FreeTransformOptionsBar } from './FreeTransformOptionsBar.svelte';
 export * from './imageEditorState.svelte.js';
 export type ImageEditorProps = ComponentProps<typeof ImageEditorComponent>;
 export type HistogramProps = ComponentProps<typeof HistogramComponent>;
@@ -30,5 +32,6 @@ export type RefineEdgePanelProps = ComponentProps<typeof RefineEdgePanelComponen
 export type LayersPanelProps = ComponentProps<typeof LayersPanelComponent>;
 export type LayerEffectsPanelProps = ComponentProps<typeof LayerEffectsPanelComponent>;
 export type BrushOptionsBarProps = ComponentProps<typeof BrushOptionsBarComponent>;
+export type FreeTransformOptionsBarProps = ComponentProps<typeof FreeTransformOptionsBarComponent>;
 export { applyRegionMosaic, applyRegionBlur, resolveMosaicRegionBounds, type MosaicRegion, type MosaicImageDataLike } from '@pixerate/editor/image-editor';
 //# 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;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;AACjE,OAAO,KAAK,4BAA4B,MAAM,8BAA8B,CAAC;AAC7E,OAAO,KAAK,wBAAwB,MAAM,0BAA0B,CAAC;AACrE,OAAO,KAAK,oBAAoB,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,0BAA0B,MAAM,4BAA4B,CAAC;AACzE,OAAO,KAAK,wBAAwB,MAAM,0BAA0B,CAAC;AAErE,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,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,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;AAC/E,MAAM,MAAM,wBAAwB,GAAG,cAAc,CAAC,OAAO,4BAA4B,CAAC,CAAC;AAC3F,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,OAAO,wBAAwB,CAAC,CAAC;AACnF,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,oBAAoB,CAAC,CAAC;AAC3E,MAAM,MAAM,sBAAsB,GAAG,cAAc,CAAC,OAAO,0BAA0B,CAAC,CAAC;AACvF,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,OAAO,wBAAwB,CAAC,CAAC;AAEnF,OAAO,EACN,iBAAiB,EACjB,eAAe,EACf,yBAAyB,EACzB,KAAK,YAAY,EACjB,KAAK,mBAAmB,EACxB,MAAM,+BAA+B,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;AACjE,OAAO,KAAK,4BAA4B,MAAM,8BAA8B,CAAC;AAC7E,OAAO,KAAK,wBAAwB,MAAM,0BAA0B,CAAC;AACrE,OAAO,KAAK,oBAAoB,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,0BAA0B,MAAM,4BAA4B,CAAC;AACzE,OAAO,KAAK,wBAAwB,MAAM,0BAA0B,CAAC;AACrE,OAAO,KAAK,gCAAgC,MAAM,kCAAkC,CAAC;AAErF,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,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,kCAAkC,CAAC;AACtF,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;AAC/E,MAAM,MAAM,wBAAwB,GAAG,cAAc,CAAC,OAAO,4BAA4B,CAAC,CAAC;AAC3F,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,OAAO,wBAAwB,CAAC,CAAC;AACnF,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,oBAAoB,CAAC,CAAC;AAC3E,MAAM,MAAM,sBAAsB,GAAG,cAAc,CAAC,OAAO,0BAA0B,CAAC,CAAC;AACvF,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,OAAO,wBAAwB,CAAC,CAAC;AACnF,MAAM,MAAM,4BAA4B,GAAG,cAAc,CAAC,OAAO,gCAAgC,CAAC,CAAC;AAEnG,OAAO,EACN,iBAAiB,EACjB,eAAe,EACf,yBAAyB,EACzB,KAAK,YAAY,EACjB,KAAK,mBAAmB,EACxB,MAAM,+BAA+B,CAAC"}

package/dist/image-editor/index.js

@@ -8,5 +8,6 @@ export { default as RefineEdgePanel } from './RefineEdgePanel.svelte';
 export { default as LayersPanel } from './LayersPanel.svelte';
 export { default as LayerEffectsPanel } from './LayerEffectsPanel.svelte';
 export { default as BrushOptionsBar } from './BrushOptionsBar.svelte';
+export { default as FreeTransformOptionsBar } from './FreeTransformOptionsBar.svelte';
 export * from './imageEditorState.svelte.js';
 export { applyRegionMosaic, applyRegionBlur, resolveMosaicRegionBounds } from '@pixerate/editor/image-editor';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.73.1",
+  "version": "0.74.0",
   "description": "Svelte bindings and prompt/rich-text components for @pixerate/editor",
   "author": "Pixerate",
   "license": "MIT",
@@ -131,7 +131,7 @@
     "@tiptap/extension-bubble-menu": "^2.11.5",
     "@tiptap/extension-placeholder": "^2.11.5",
     "@tiptap/starter-kit": "^2.11.5",
-    "@pixerate/editor": "0.98.0"
+    "@pixerate/editor": "0.99.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",