@pixerate/editor 0.177.1 → 0.178.0

package/dist/image-editor/index.cjs

@@ -14711,31 +14711,21 @@ function layerPanels(layer, options = {}) {
     ];
   }
   const panels = [{ id: "properties", title: "Layer Properties" }];
-  const styles = (id, title) => {
-    if (!options.effects) panels.push({ id, title });
-  };
   const effects = () => {
     if (options.effects) panels.push({ id: "provider-effects", title: "Effects" });
   };
   if (layer.type === "pixel") {
     effects();
     panels.push({ id: "paint", title: "Brush Options" });
-    styles("effects", "Layer Effects");
   } else if (layer.type === "adjustment") {
     panels.push({ id: "adjustment", title: _chunkUHMSMUHKcjs.adjustmentKindLabel.call(void 0, layer.kind) });
   } else if (layer.type === "type") {
     panels.push({ id: "type", title: "Typography" });
     effects();
-    styles("effects", "Layer Effects");
   } else if (layer.type === "shape") {
     panels.push({ id: "shape", title: "Shape Options" });
     effects();
-    styles("effects", "Layer Effects");
-  } else if (layer.type === "smart") {
-    effects();
-    styles("smart-filters", "Smart Filters");
-    styles("effects", "Layer Effects");
-  } else if (layer.type === "group") {
+  } else if (layer.type === "smart" || layer.type === "group") {
     effects();
   }
   if (layer.mask) {
@@ -14747,14 +14737,14 @@ function layerPanels(layer, options = {}) {
 // src/image-editor/layers/effects-ui.ts
 function layerEffectsPanel(layer) {
   const empty = { readOnly: true, enabled: true, scale: 1, rows: [] };
-  if (!layer) return { ...empty, available: false, reason: "Select a layer to add effects." };
-  if (layer.type === "adjustment") return { ...empty, available: false, reason: "Adjustment layers cannot have effects." };
+  if (!layer) return { ...empty, available: false, reason: "Select a layer to add a layer style." };
+  if (layer.type === "adjustment") return { ...empty, available: false, reason: "Adjustment layers cannot have a layer style." };
   const fx = layer.effects;
   const readOnly = Boolean(_optionalChain([layer, 'access', _460 => _460.locks, 'optionalAccess', _461 => _461.all]));
   return {
     available: true,
     readOnly,
-    reason: readOnly ? "The layer is locked; unlock it to change its effects." : void 0,
+    reason: readOnly ? "The layer is locked; unlock it to change its layer style." : void 0,
     enabled: _nullishCoalesce(_optionalChain([fx, 'optionalAccess', _462 => _462.enabled]), () => ( true)),
     scale: _nullishCoalesce(_optionalChain([fx, 'optionalAccess', _463 => _463.scale]), () => ( 1)),
     rows: (_nullishCoalesce(_optionalChain([fx, 'optionalAccess', _464 => _464.items]), () => ( []))).map((e) => ({ id: e.id, kind: e.kind, label: _chunkHGTDMKNEcjs.layerEffectLabel.call(void 0, e.kind), enabled: e.enabled }))

package/dist/image-editor/index.js

@@ -14711,31 +14711,21 @@ function layerPanels(layer, options = {}) {
     ];
   }
   const panels = [{ id: "properties", title: "Layer Properties" }];
-  const styles = (id, title) => {
-    if (!options.effects) panels.push({ id, title });
-  };
   const effects = () => {
     if (options.effects) panels.push({ id: "provider-effects", title: "Effects" });
   };
   if (layer.type === "pixel") {
     effects();
     panels.push({ id: "paint", title: "Brush Options" });
-    styles("effects", "Layer Effects");
   } else if (layer.type === "adjustment") {
     panels.push({ id: "adjustment", title: adjustmentKindLabel(layer.kind) });
   } else if (layer.type === "type") {
     panels.push({ id: "type", title: "Typography" });
     effects();
-    styles("effects", "Layer Effects");
   } else if (layer.type === "shape") {
     panels.push({ id: "shape", title: "Shape Options" });
     effects();
-    styles("effects", "Layer Effects");
-  } else if (layer.type === "smart") {
-    effects();
-    styles("smart-filters", "Smart Filters");
-    styles("effects", "Layer Effects");
-  } else if (layer.type === "group") {
+  } else if (layer.type === "smart" || layer.type === "group") {
     effects();
   }
   if (layer.mask) {
@@ -14747,14 +14737,14 @@ function layerPanels(layer, options = {}) {
 // src/image-editor/layers/effects-ui.ts
 function layerEffectsPanel(layer) {
   const empty = { readOnly: true, enabled: true, scale: 1, rows: [] };
-  if (!layer) return { ...empty, available: false, reason: "Select a layer to add effects." };
-  if (layer.type === "adjustment") return { ...empty, available: false, reason: "Adjustment layers cannot have effects." };
+  if (!layer) return { ...empty, available: false, reason: "Select a layer to add a layer style." };
+  if (layer.type === "adjustment") return { ...empty, available: false, reason: "Adjustment layers cannot have a layer style." };
   const fx = layer.effects;
   const readOnly = Boolean(layer.locks?.all);
   return {
     available: true,
     readOnly,
-    reason: readOnly ? "The layer is locked; unlock it to change its effects." : void 0,
+    reason: readOnly ? "The layer is locked; unlock it to change its layer style." : void 0,
     enabled: fx?.enabled ?? true,
     scale: fx?.scale ?? 1,
     rows: (fx?.items ?? []).map((e) => ({ id: e.id, kind: e.kind, label: layerEffectLabel(e.kind), enabled: e.enabled }))

package/dist/image-editor/layers/panel.d.cts

@@ -110,16 +110,19 @@ export interface LayerPanelDescriptor {
 }
 export interface LayerPanelsOptions {
     /**
-     * The editor has an effects provider (`controller.effectsProvider`): one `provider-effects`
-     * panel ("Effects") holds everything that changes how a layer looks beyond its own settings:
-     * an effect layer's effect (change it, its frame or animation, its controls), and the layer's
-     * styles (drop shadow, stroke…) and filters. It takes the place of the `effects` (Layer
-     * Effects) and `smart-filters` panels. New effect layers are added from the layers panel
+     * The editor has an effects provider (`controller.effectsProvider`): adds the `provider-effects`
+     * panel ("Effects") for layers that can take provider effects. It holds an effect layer's own
+     * effect (change it, its frame or animation, its controls) and the provider filters applied to
+     * the layer (smart filters). New effect layers are added from the layers panel
      * (`newLayerOptions`).
      */
     effects?: boolean;
 }
 /**
  * Returns contextual panels that apply to the currently active layer (or layer-independent panels if null).
+ *
+ * `properties` ("Layer Properties") is first for every layer and includes the layer's Layer Style
+ * (drop shadow, stroke, glow…: `layerEffectsPanel`) for layers that can take one, with or without a
+ * provider. There is no separate `effects` (Layer Effects) or `smart-filters` panel.
  */
 export declare function layerPanels(layer: ImageLayer | null, options?: LayerPanelsOptions): LayerPanelDescriptor[];

package/dist/image-editor/layers/panel.d.ts

@@ -110,16 +110,19 @@ export interface LayerPanelDescriptor {
 }
 export interface LayerPanelsOptions {
     /**
-     * The editor has an effects provider (`controller.effectsProvider`): one `provider-effects`
-     * panel ("Effects") holds everything that changes how a layer looks beyond its own settings:
-     * an effect layer's effect (change it, its frame or animation, its controls), and the layer's
-     * styles (drop shadow, stroke…) and filters. It takes the place of the `effects` (Layer
-     * Effects) and `smart-filters` panels. New effect layers are added from the layers panel
+     * The editor has an effects provider (`controller.effectsProvider`): adds the `provider-effects`
+     * panel ("Effects") for layers that can take provider effects. It holds an effect layer's own
+     * effect (change it, its frame or animation, its controls) and the provider filters applied to
+     * the layer (smart filters). New effect layers are added from the layers panel
      * (`newLayerOptions`).
      */
     effects?: boolean;
 }
 /**
  * Returns contextual panels that apply to the currently active layer (or layer-independent panels if null).
+ *
+ * `properties` ("Layer Properties") is first for every layer and includes the layer's Layer Style
+ * (drop shadow, stroke, glow…: `layerEffectsPanel`) for layers that can take one, with or without a
+ * provider. There is no separate `effects` (Layer Effects) or `smart-filters` panel.
  */
 export declare function layerPanels(layer: ImageLayer | null, options?: LayerPanelsOptions): LayerPanelDescriptor[];

package/dist/image-editor/provider-effect-tools.d.cts

@@ -4,7 +4,8 @@
  * `remove_effect`) on layers, where filter effects become smart filters, plus `add_effect_layer`
  * for generator, overlay and title effects and `set_effect_layer` to change one (its effect, still
  * frame or animation). (Drop shadows, strokes and the other layer styles are
- * `set_layer_effect`, a different thing.)
+ * `add_layer_effect`, a different thing: the Layer Style section of Layer Properties, not the
+ * Effects panel.)
  */
 import { type AppliedEffectInfo } from '../effects/tools.cjs';
 import type { AgentToolProvider } from '../tools/registry.cjs';

package/dist/image-editor/provider-effect-tools.d.ts

@@ -4,7 +4,8 @@
  * `remove_effect`) on layers, where filter effects become smart filters, plus `add_effect_layer`
  * for generator, overlay and title effects and `set_effect_layer` to change one (its effect, still
  * frame or animation). (Drop shadows, strokes and the other layer styles are
- * `set_layer_effect`, a different thing.)
+ * `add_layer_effect`, a different thing: the Layer Style section of Layer Properties, not the
+ * Effects panel.)
  */
 import { type AppliedEffectInfo } from '../effects/tools.js';
 import type { AgentToolProvider } from '../tools/registry.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor",
-  "version": "0.177.1",
+  "version": "0.178.0",
   "description": "UI-agnostic rich text and media editing core library",
   "author": "Pixerate",
   "license": "MIT",

package/skills/pixerate-image-editor/SKILL.md

@@ -117,7 +117,10 @@ drawing or editing either.
    annotation and group layers (not adjustment layers) and follow the layer's pixels as they
    change. Add them with `add_layer_effect` (`kind` plus only the `settings` that differ from
    Photoshop's defaults), tune them with `update_layer_effect` and read them back with
-   `list_layer_effects`. Each call is one undo step and returns the layer's effects.
+   `list_layer_effects`. Each call is one undo step and returns the layer's effects. In the UI
+   they are the **Layer Style** section of **Layer Properties**; the separate **Effects** panel is
+   for provider effects (effect layers and filters), so say "layer style" when you tell the user
+   where a drop shadow or stroke lives.
 2. **Keep the ids**: `add_layer_effect` returns `effectId`; `update_layer_effect` and
    `remove_layer_effect` need it. `list_layers` shows which layers have effects (ids and kinds
    only).

package/skills/pixerate-image-editor/references/provider-effects.md

@@ -2,7 +2,10 @@
 
 The host may register an effects provider (for example Flair). The tools then reach its catalog:
 filter effects become **smart filters**, and generator, overlay and title effects become
-**effect layers**. These are not the layer styles of `set_layer_effect` (drop shadow, stroke, glow).
+**effect layers**. These are not the layer styles of `add_layer_effect` (drop shadow, stroke, glow).
+In the UI, the **Effects** panel holds an effect layer's controls and the layer's filters; layer
+styles are the **Layer Style** section of **Layer Properties**. Use those names when you tell the
+user where to find what you changed.
 
 ## Working method