@pixerate/editor-svelte 0.72.1 → 0.73.0

package/dist/image-editor/LayerEffectsPanel.svelte

@@ -0,0 +1,189 @@
+<script lang="ts">
+  import type { EffectControl, ImageEditorController, LayerEffectKind } from '@pixerate/editor/image-editor';
+  import { LAYER_EFFECT_MENU, effectControlChange, layerEffectControls, layerEffectsPanel } from '@pixerate/editor/image-editor';
+  import { untrack } from 'svelte';
+
+  /**
+   * A layer's effects (Photoshop's layer styles): the master switch, Scale Effects, an "Add
+   * effect" menu, and each effect with its enabled toggle, remove button and, when expanded, its
+   * settings. Every change is one undo step (a slider drag is one step too).
+   */
+  interface Props {
+    controller: ImageEditorController;
+    /** The layer whose effects to show (default: the active layer). */
+    layerId?: string | null;
+    class?: string;
+  }
+
+  let { controller, layerId = null, class: className = '' }: Props = $props();
+
+  let tick = $state(0);
+  $effect(() => {
+    const c = controller;
+    return untrack(() => c.subscribe(() => tick++));
+  });
+
+  const view = $derived.by(() => {
+    void tick;
+    const layer = layerId ? controller.getLayer(layerId) : controller.getActiveLayer();
+    const model = layerEffectsPanel(layer);
+    const id = layer?.id ?? null;
+    const items = id && model.available ? controller.getLayerEffects(id).items : [];
+    return { id, model, items, patterns: controller.getDocumentPatterns() };
+  });
+
+  let open = $state<string | null>(null);
+  let error = $state<string | null>(null);
+  /** Whether the next slider change records an undo step (the first of a drag does, the rest replace it). */
+  let commitNext = true;
+
+  const button = 'px-1.5 py-0.5 rounded text-[10px] bg-slate-800 text-slate-300 hover:text-white disabled:opacity-40';
+
+  function attempt(fn: () => unknown) {
+    try {
+      error = null;
+      fn();
+    } catch (err) {
+      error = err instanceof Error ? err.message : String(err);
+    }
+  }
+
+  function change(effectId: string, control: EffectControl, value: unknown, drag = false) {
+    const id = view.id;
+    if (!id) return;
+    attempt(() => {
+      const effect = controller.getLayerEffects(id).items.find((e) => e.id === effectId)!;
+      controller.updateLayerEffect(id, effectId, effectControlChange(effect, control.key, value, view.patterns), drag ? commitNext : true);
+      if (drag) commitNext = false;
+    });
+  }
+
+  function add(e: Event) {
+    const select = e.currentTarget as HTMLSelectElement;
+    const kind = select.value as LayerEffectKind;
+    select.value = '';
+    const id = view.id;
+    if (!kind || !id) return;
+    attempt(() => (open = controller.addLayerEffect(id, kind).effect.id));
+  }
+
+  function setScale(e: Event) {
+    const v = Number((e.currentTarget as HTMLInputElement).value);
+    const id = view.id;
+    if (id && v >= 1 && v <= 1000) attempt(() => controller.setLayerEffectsEnabled(id, view.model.enabled, v / 100));
+  }
+
+  const k = (c: EffectControl) => (c.type === 'range' && c.percent ? 100 : 1);
+  const shown = (c: EffectControl) => (c.type === 'range' ? Math.round(c.value * k(c) * 100) / 100 : 0);
+</script>
+
+{#if !view.model.available || !view.id}
+  <div class="text-xs text-slate-500 {className}" data-testid="layer-effects">{view.model.reason}</div>
+{:else}
+  {@const id = view.id}
+  <div class="flex flex-col gap-1.5 text-xs text-slate-200 {className}" data-testid="layer-effects" aria-label="Layer effects" role="group">
+    <div class="flex flex-wrap items-center gap-2">
+      <span class="font-semibold text-slate-300">fx Effects</span>
+      <label class="flex items-center gap-1 text-slate-300">
+        <input
+          type="checkbox"
+          aria-label="Effects on"
+          checked={view.model.enabled}
+          disabled={view.model.readOnly}
+          onchange={(e) => attempt(() => controller.setLayerEffectsEnabled(id, (e.currentTarget as HTMLInputElement).checked))}
+          class="accent-indigo-500"
+        />
+        On
+      </label>
+      <label class="flex items-center gap-1 text-slate-400">
+        Scale
+        <input
+          type="number"
+          aria-label="Scale effects"
+          min="1"
+          max="1000"
+          step="1"
+          value={Math.round(view.model.scale * 100)}
+          disabled={view.model.readOnly}
+          oninput={setScale}
+          class="w-14 bg-slate-800 border border-slate-700 rounded px-1"
+        />
+        %
+      </label>
+      <select aria-label="Add effect" value="" disabled={view.model.readOnly} onchange={add} class="bg-slate-800 border border-slate-700 rounded px-1.5 py-1">
+        <option value="">Add effect…</option>
+        {#each LAYER_EFFECT_MENU as m (m.kind)}
+          <option value={m.kind}>{m.label}</option>
+        {/each}
+      </select>
+    </div>
+    {#if view.model.readOnly && view.model.reason}<p class="text-slate-500">{view.model.reason}</p>{/if}
+    <ul class="flex flex-col gap-1" aria-label="Effects">
+      {#each view.model.rows as row (row.id)}
+        {@const effect = view.items.find((e) => e.id === row.id)}
+        {@const expanded = open === row.id}
+        <li data-effect-id={row.id} class="rounded bg-slate-900/60 ring-1 ring-slate-800">
+          <div class="flex items-center gap-1.5 px-1.5 py-1">
+            <input
+              type="checkbox"
+              aria-label="{row.label} on"
+              checked={row.enabled}
+              disabled={view.model.readOnly}
+              onchange={(e) => attempt(() => controller.updateLayerEffect(id, row.id, { enabled: (e.currentTarget as HTMLInputElement).checked }))}
+              class="accent-indigo-500"
+            />
+            <button type="button" aria-expanded={expanded} class="flex-1 text-left {row.enabled && view.model.enabled ? '' : 'text-slate-500'}" onclick={() => (open = expanded ? null : row.id)}>
+              {row.label}
+            </button>
+            <button type="button" class={button} aria-label="Remove {row.label}" disabled={view.model.readOnly} onclick={() => attempt(() => controller.removeLayerEffect(id, row.id))}>✕</button>
+          </div>
+          {#if expanded && effect}
+            <div class="grid grid-cols-2 gap-x-2 gap-y-1 px-1.5 pb-1.5" data-testid="effect-settings">
+              {#each layerEffectControls(effect, view.patterns) as c (c.key)}
+                {#if c.type === 'range'}
+                  <label class="flex flex-col gap-0.5">
+                    <span class="text-slate-400">{c.label} {shown(c)}{c.unit ?? ''}</span>
+                    <input
+                      type="range"
+                      aria-label={c.label}
+                      min={c.min * k(c)}
+                      max={c.max * k(c)}
+                      step={c.step * k(c)}
+                      value={shown(c)}
+                      disabled={view.model.readOnly}
+                      onpointerdown={() => (commitNext = true)}
+                      onpointerup={() => (commitNext = true)}
+                      onkeydown={() => (commitNext = true)}
+                      oninput={(e) => change(row.id, c, Number((e.currentTarget as HTMLInputElement).value) / k(c), true)}
+                      class="accent-indigo-500"
+                    />
+                  </label>
+                {:else if c.type === 'color'}
+                  <label class="flex items-center gap-1.5 text-slate-300">
+                    <input type="color" aria-label={c.label} value={c.value} disabled={view.model.readOnly} oninput={(e) => change(row.id, c, (e.currentTarget as HTMLInputElement).value)} />
+                    {c.label}
+                  </label>
+                {:else if c.type === 'checkbox'}
+                  <label class="flex items-center gap-1.5 text-slate-300">
+                    <input type="checkbox" aria-label={c.label} checked={c.value} disabled={view.model.readOnly} onchange={(e) => change(row.id, c, (e.currentTarget as HTMLInputElement).checked)} class="accent-indigo-500" />
+                    {c.label}
+                  </label>
+                {:else}
+                  <label class="flex flex-col gap-0.5">
+                    <span class="text-slate-400">{c.label}</span>
+                    <select aria-label={c.label} value={c.value} disabled={view.model.readOnly} onchange={(e) => change(row.id, c, (e.currentTarget as HTMLSelectElement).value)} class="bg-slate-800 border border-slate-700 rounded px-1.5 py-1">
+                      {#each c.options as o (o.value)}
+                        <option value={o.value}>{o.label}</option>
+                      {/each}
+                    </select>
+                  </label>
+                {/if}
+              {/each}
+            </div>
+          {/if}
+        </li>
+      {/each}
+    </ul>
+    {#if error}<p role="alert" class="text-rose-400">{error}</p>{/if}
+  </div>
+{/if}

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

@@ -0,0 +1,16 @@
+import type { ImageEditorController } from '@pixerate/editor/image-editor';
+/**
+ * A layer's effects (Photoshop's layer styles): the master switch, Scale Effects, an "Add
+ * effect" menu, and each effect with its enabled toggle, remove button and, when expanded, its
+ * settings. Every change is one undo step (a slider drag is one step too).
+ */
+interface Props {
+    controller: ImageEditorController;
+    /** The layer whose effects to show (default: the active layer). */
+    layerId?: string | null;
+    class?: string;
+}
+declare const LayerEffectsPanel: import("svelte").Component<Props, {}, "">;
+type LayerEffectsPanel = ReturnType<typeof LayerEffectsPanel>;
+export default LayerEffectsPanel;
+//# sourceMappingURL=LayerEffectsPanel.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LayerEffectsPanel.svelte.d.ts","sourceRoot":"","sources":["../../src/image-editor/LayerEffectsPanel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAiB,qBAAqB,EAAmB,MAAM,+BAA+B,CAAC;AAKzG;;;;GAIG;AACH,UAAU,KAAK;IACb,UAAU,EAAE,qBAAqB,CAAC;IAClC,mEAAmE;IACnE,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAiJH,QAAA,MAAM,iBAAiB,2CAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/image-editor/LayersPanel.svelte

@@ -7,12 +7,14 @@
     dropPlacement,
     dropZone,
     layerBadge,
+    layerEffectsBadge,
     layerMenu,
     layerPanelRows,
     openPsdFile,
     runLayerMenuAction,
   } from '@pixerate/editor/image-editor';
   import { untrack } from 'svelte';
+  import LayerEffectsPanel from './LayerEffectsPanel.svelte';
 
   interface Props {
     controller: ImageEditorController;
@@ -22,10 +24,12 @@
     psd?: boolean;
     /** Base name of exported PSD files (default `image`). */
     psdFileName?: string;
+    /** Show the active layer's effects section (default true). */
+    effects?: boolean;
     class?: string;
   }
 
-  let { controller, thumbnailSize = 32, psd = true, psdFileName = 'image', class: className = '' }: Props = $props();
+  let { controller, thumbnailSize = 32, psd = true, psdFileName = 'image', effects = true, class: className = '' }: Props = $props();
 
   let tick = $state(0);
   $effect(() => {
@@ -255,6 +259,10 @@
     </div>
   {/if}
 
+  {#if effects && snapshot.active && snapshot.active.type !== 'adjustment'}
+    <LayerEffectsPanel {controller} class="border-t border-slate-800 pt-1.5" />
+  {/if}
+
   <ul class="flex flex-col gap-0.5" role="tree" aria-label="Layers">
     {#each snapshot.rows as row (row.layer.id)}
       {@const layer = row.layer}
@@ -361,6 +369,20 @@
               renaming = layer.id;
             }}>{row.label}</span>
         {/if}
+        {#if layerEffectsBadge(layer)}
+          {@const fxOn = layerEffectsBadge(layer) === 'on'}
+          <button
+            type="button"
+            data-testid="layer-fx-badge"
+            aria-label={fxOn ? `Turn effects off for ${row.label}` : `Turn effects on for ${row.label}`}
+            aria-pressed={fxOn}
+            class="text-[9px] italic font-semibold {fxOn ? 'text-indigo-300' : 'text-slate-600 line-through'}"
+            onclick={(e) => {
+              e.stopPropagation();
+              attempt(() => controller.setLayerEffectsEnabled(layer.id, !fxOn));
+            }}>fx</button
+          >
+        {/if}
         {#if locked(layer)}<span aria-label="Locked" class="text-slate-400">🔒</span>{/if}
         {#if layer.blend !== 'normal' && layer.blend !== 'pass-through'}<span class="text-[9px] text-slate-500">{layer.blend}</span>{/if}
       </li>

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

@@ -7,6 +7,8 @@ interface Props {
     psd?: boolean;
     /** Base name of exported PSD files (default `image`). */
     psdFileName?: string;
+    /** Show the active layer's effects section (default true). */
+    effects?: boolean;
     class?: string;
 }
 declare const LayersPanel: import("svelte").Component<Props, {}, "">;

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;AAgBlI,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,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAsQH,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;AAkRH,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

@@ -7,6 +7,7 @@ import type ControlSliderComponent from "./ControlSlider.svelte";
 import type SelectionOptionsBarComponent from "./SelectionOptionsBar.svelte";
 import type RefineEdgePanelComponent from "./RefineEdgePanel.svelte";
 import type LayersPanelComponent from "./LayersPanel.svelte";
+import type LayerEffectsPanelComponent from "./LayerEffectsPanel.svelte";
 import type BrushOptionsBarComponent from "./BrushOptionsBar.svelte";
 export { default as ImageEditor } from './ImageEditor.svelte';
 export { default as Histogram } from './Histogram.svelte';
@@ -16,6 +17,7 @@ export { default as ControlSlider } from './ControlSlider.svelte';
 export { default as SelectionOptionsBar } from './SelectionOptionsBar.svelte';
 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 * from './imageEditorState.svelte.js';
 export type ImageEditorProps = ComponentProps<typeof ImageEditorComponent>;
@@ -26,6 +28,7 @@ export type ControlSliderProps = ComponentProps<typeof ControlSliderComponent>;
 export type SelectionOptionsBarProps = ComponentProps<typeof SelectionOptionsBarComponent>;
 export type RefineEdgePanelProps = ComponentProps<typeof RefineEdgePanelComponent>;
 export type LayersPanelProps = ComponentProps<typeof LayersPanelComponent>;
+export type LayerEffectsPanelProps = ComponentProps<typeof LayerEffectsPanelComponent>;
 export type BrushOptionsBarProps = ComponentProps<typeof BrushOptionsBarComponent>;
 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,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,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,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;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"}

package/dist/image-editor/index.js

@@ -6,6 +6,7 @@ export { default as ControlSlider } from './ControlSlider.svelte';
 export { default as SelectionOptionsBar } from './SelectionOptionsBar.svelte';
 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 * 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.72.1",
+  "version": "0.73.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.96.0"
+    "@pixerate/editor": "0.97.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",