@pixerate/editor-svelte 0.130.3 → 0.131.0

package/dist/image-editor/ImageProviderEffectsPanel.svelte

@@ -1,14 +1,12 @@
 <script lang="ts">
   import { imageOutlineButtonClass } from './styles.js';
-  import { EFFECT_LAYER_USES, LAYER_EFFECT_MENU, effectLayerTiming, findLayer, layerEffectsPanel, type ImageEditorController, type ImageLayer, type LayerEffectKind, type SmartObjectLayer } from '@pixerate/editor/image-editor';
+  import { EFFECT_LAYER_USES, effectLayerTiming, findLayer, type ImageEditorController, type ImageLayer, type SmartObjectLayer } from '@pixerate/editor/image-editor';
   import { untrack } from 'svelte';
   import EffectsBrowser from '../effects/EffectsBrowser.svelte';
   import { effectDescriptionOf } from '../effects/effects.svelte.js';
   import ImageEffectControls from './ImageEffectControls.svelte';
-  import LayerEffectsPanel from './LayerEffectsPanel.svelte';
   import ImageCheckbox from './controls/ImageCheckbox.svelte';
   import ImageRange from './controls/ImageRange.svelte';
-  import ImageSelect from './controls/ImageSelect.svelte';
   import type { ParameterComponents } from '../parameters/index.js';
 
   interface Props {
@@ -38,14 +36,9 @@
   const layer = $derived(snapshot.layer);
   const all = $derived(layer?.type === 'smart' ? ((layer as SmartObjectLayer).smartFilters?.filters ?? []) : []);
   const generator = $derived(layer?.type === 'pixel' ? layer.generator : undefined);
-  const canFilter = $derived(!!layer && layer.type !== 'adjustment' && layer.type !== 'annotation');
-  const styles = $derived(layerEffectsPanel(layer));
+  const canFilter = $derived(!!provider && !!layer && layer.type !== 'adjustment' && layer.type !== 'annotation');
   const described = effectDescriptionOf(() => provider, () => generator?.effect);
   const timing = $derived(generator ? effectLayerTiming(generator, described.description) : null);
-  const addOptions = $derived([
-    ...(provider && canFilter ? [{ value: 'filter', label: 'Filter…' }] : []),
-    ...(styles.available && !styles.readOnly ? LAYER_EFFECT_MENU.map((m) => ({ value: `style:${m.kind}`, label: m.label })) : []),
-  ]);
   const drags = new Set<string>();
   /** Changes during a drag skip the undo stack after the first, so the drag is one step. */
   function commit(gesture: string | null) {
@@ -60,12 +53,6 @@
       .then(work)
       .catch((e: unknown) => (message = e instanceof Error ? e.message : String(e)));
   }
-  function add(value: string) {
-    const id = layer?.id;
-    if (!value || !id) return;
-    if (value === 'filter') browse = browse === 'filter' ? null : 'filter';
-    else run(() => controller.addLayerEffect(id, value.slice('style:'.length) as LayerEffectKind));
-  }
 
   // Scrubbing the frame draws the effect again: one render at a time, the latest frame wins.
   let scrub: { layerId: string; time: number; commit: boolean } | null = null;
@@ -94,11 +81,12 @@
 </script>
 
 <!--
-  Effects for the active layer, in one place. An effect layer first: its effect (change it or
+  Provider effects for the active layer. An effect layer first: its effect (change it or
   rasterize it), a still frame or an animation for an effect that moves, and its controls. Then
-  what is applied to any layer: provider filters (smart filters; applying one converts a pixel
-  layer to a smart object in the same undo step) and layer styles, added from one menu. New
-  effect layers come from the layers panel. Without a provider it says why nothing can be added.
+  the provider filters applied to the layer (smart filters; applying one converts a pixel layer to
+  a smart object in the same undo step). Layer styles (drop shadow, stroke…) are not here: they
+  are part of the layer's properties (LayerEffectsPanel). New effect layers come from the layers
+  panel. Without a provider it says why nothing can be added.
 -->
 <section class="flex flex-col gap-2 text-xs {className}" aria-label="Effects" data-image-provider-effects="">
   {#if !provider}<p class="text-[11px] text-muted-foreground">No effects provider is registered. Effects in the document are kept.</p>{/if}
@@ -169,10 +157,8 @@
   {/if}
   {#if layer && canFilter}
     <div class="flex items-center gap-1" data-effect-part="applied">
-      <span class="flex-1 text-[11px] font-semibold uppercase tracking-wider text-foreground">{generator ? 'On this layer' : 'Effects'}</span>
-      {#if addOptions.length}
-        <ImageSelect label="Add effect" value="" placeholder="Add…" options={addOptions} onchange={add} />
-      {/if}
+      <span class="flex-1 text-[11px] font-semibold uppercase tracking-wider text-foreground">Filters</span>
+      <button type="button" class={imageOutlineButtonClass} aria-pressed={browse === 'filter'} onclick={() => (browse = browse === 'filter' ? null : 'filter')}>Add filter…</button>
     </div>
     {#if browse === 'filter'}
       {@const id = layer.id}
@@ -219,11 +205,8 @@
       {/each}
     </ol>
   {/if}
-  {#if layer && styles.available && styles.rows.length}
-    <LayerEffectsPanel {controller} layerId={layer.id} heading={false} />
-  {/if}
-  {#if layer && canFilter && !generator && !all.some((f) => f.kind === 'effect') && !styles.rows.length}
-    <p class="text-[11px] text-muted-foreground">No effects yet. Add a filter, or a style such as a drop shadow. New effect layers are added from the layers panel.</p>
+  {#if layer && canFilter && !generator && !all.some((f) => f.kind === 'effect')}
+    <p class="text-[11px] text-muted-foreground">No filters yet. A filter changes the layer's pixels and stays editable. Layer styles such as a drop shadow are in the layer's properties; new effect layers are added from the layers panel.</p>
   {/if}
   {#if !layer}<p class="text-[11px] text-muted-foreground">Select a layer to apply effects to it.</p>{/if}
   {#if message}<p role="alert" class="text-[11px] text-destructive">{message}</p>{/if}

package/dist/image-editor/LayerEffectsPanel.svelte

@@ -10,7 +10,7 @@
 
   /**
    * 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
+   * style" 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 {
@@ -18,7 +18,7 @@
     /** The layer whose effects to show (default: the active layer). */
     layerId?: string | null;
     /**
-     * Show the "fx Effects" title and the "Add effect" menu (default true). Without them (inside a
+     * Show the "Layer Style" title and the "Add style" menu (default true). Without them (inside a
      * panel that adds styles from its own menu) the master switch and Scale stay.
      */
     heading?: boolean;
@@ -87,9 +87,9 @@
   <div class="text-xs text-muted-foreground {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-foreground {className}" data-testid="layer-effects" aria-label="Layer effects" role="group">
+  <div class="flex flex-col gap-1.5 text-xs text-foreground {className}" data-testid="layer-effects" aria-label="Layer style" role="group">
     <div class="flex flex-wrap items-center gap-2">
-      {#if heading}<span class="font-semibold text-foreground">fx Effects</span>{:else}<span class="font-semibold text-foreground">Styles</span>{/if}
+      {#if heading}<span class="font-semibold text-foreground">Layer Style</span>{:else}<span class="font-semibold text-foreground">Styles</span>{/if}
       <label class="flex items-center gap-1 text-foreground">
         <ImageCheckbox
           label="Effects on"
@@ -116,9 +116,9 @@
       </label>
       {#if heading}
         <ImageSelect
-          label="Add effect"
+          label="Add style"
           value=""
-          placeholder="Add effect…"
+          placeholder="Add style…"
           disabled={view.model.readOnly}
           options={LAYER_EFFECT_MENU.map((m) => ({ value: m.kind, label: m.label }))}
           onchange={add}

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

@@ -1,7 +1,7 @@
 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
+ * style" 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 {
@@ -9,7 +9,7 @@ interface Props {
     /** The layer whose effects to show (default: the active layer). */
     layerId?: string | null;
     /**
-     * Show the "fx Effects" title and the "Add effect" menu (default true). Without them (inside a
+     * Show the "Layer Style" title and the "Add style" menu (default true). Without them (inside a
      * panel that adds styles from its own menu) the master switch and Scale stay.
      */
     heading?: boolean;

package/dist/image-editor/LayerPanel.svelte

@@ -68,6 +68,10 @@
             onchange={(val) => controller.setLayerProperties(activeLayer.id, { opacity: val })}
           />
         </div>
+        <!-- Layer Style (drop shadow, stroke, glow…) is part of the layer's properties; adjustment layers have none. -->
+        {#if activeLayer.type !== 'adjustment'}
+          <LayerEffectsPanel {controller} layerId={activeLayer.id} class="border-t border-border pt-2" />
+        {/if}
       {:else}
         <div class="text-muted-foreground">No active layer selected.</div>
       {/if}
@@ -78,10 +82,8 @@
       <BrushOptionsBar {controller} />
     </div>
   {:else if panelId === 'effects'}
-    <div class="flex flex-col gap-3">
-      <div class="font-medium text-sm text-foreground">Layer Effects</div>
-      <LayerEffectsPanel {controller} />
-    </div>
+    <!-- Kept for hosts that still ask for it by id: layerPanels() folds it into 'properties'. -->
+    <LayerEffectsPanel {controller} />
   {:else if panelId === 'adjustment'}
     <AdjustmentLayersPanel {controller} />
   {:else if panelId === 'type'}
@@ -95,10 +97,8 @@
       <ShapeOptionsBar {controller} options={shapeOptions} onchange={(o) => (shapeOptions = o)} />
     </div>
   {:else if panelId === 'smart-filters'}
-    <div class="flex flex-col gap-3">
-      <div class="font-medium text-sm text-foreground">Smart Filters</div>
-      <LayerEffectsPanel {controller} />
-    </div>
+    <!-- Kept for hosts that still ask for it by id: smart filters are under 'provider-effects'. -->
+    <ImageProviderEffectsPanel {controller} />
   {:else if panelId === 'provider-effects'}
     <ImageProviderEffectsPanel {controller} />
   {:else if panelId === 'selection'}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.130.3",
+  "version": "0.131.0",
   "description": "Svelte bindings and prompt/rich-text components for @pixerate/editor",
   "author": "Pixerate",
   "license": "MIT",
@@ -165,7 +165,7 @@
     "**/*.css"
   ],
   "dependencies": {
-    "@pixerate/editor": "0.177.1"
+    "@pixerate/editor": "0.178.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",