@pixerate/editor 0.177.0 → 0.178.0

package/dist/effects/index.cjs

@@ -597,6 +597,11 @@ var EFFECT_USE_LABELS = {
 };
 var HEX2 = /^#[0-9a-f]{6}([0-9a-f]{2})?$/i;
 var typeOf = (s) => Array.isArray(s.type) ? s.type.find((t) => t !== "null") : s.type;
+function hexColour(value) {
+  if (typeof value === "string") return HEX2.test(value) ? value : void 0;
+  if (!Array.isArray(value) || value.length !== 3 && value.length !== 4 || !value.every((n) => typeof n === "number" && Number.isFinite(n))) return void 0;
+  return `#${value.map((n) => Math.round(Math.min(1, Math.max(0, n)) * 255).toString(16).padStart(2, "0")).join("")}`;
+}
 function isEffectFontControl(schema) {
   return typeOf(schema) === "string" && (schema.format === "font" || schema["x-pixerate-control"] === "font");
 }
@@ -649,7 +654,10 @@ function effectFontFamilies(description, values = {}) {
   }
   return out;
 }
-var effectFieldValue = (field, value) => value === void 0 || value === null || typeof value === "object" && !Array.isArray(value) ? field.default : value;
+var effectFieldValue = (field, value) => {
+  if (field.type === "color") return _nullishCoalesce(hexColour(value), () => ( field.default));
+  return value === void 0 || value === null || typeof value === "object" && !Array.isArray(value) ? field.default : value;
+};
 function effectSamplePicture(width, height, variant = 0) {
   const p = _chunkA3A5TI6Rcjs.createEffectPixels.call(void 0, width, height);
   for (let y = 0, i = 0; y < height; y++) {

package/dist/effects/index.js

@@ -597,6 +597,11 @@ var EFFECT_USE_LABELS = {
 };
 var HEX2 = /^#[0-9a-f]{6}([0-9a-f]{2})?$/i;
 var typeOf = (s) => Array.isArray(s.type) ? s.type.find((t) => t !== "null") : s.type;
+function hexColour(value) {
+  if (typeof value === "string") return HEX2.test(value) ? value : void 0;
+  if (!Array.isArray(value) || value.length !== 3 && value.length !== 4 || !value.every((n) => typeof n === "number" && Number.isFinite(n))) return void 0;
+  return `#${value.map((n) => Math.round(Math.min(1, Math.max(0, n)) * 255).toString(16).padStart(2, "0")).join("")}`;
+}
 function isEffectFontControl(schema) {
   return typeOf(schema) === "string" && (schema.format === "font" || schema["x-pixerate-control"] === "font");
 }
@@ -649,7 +654,10 @@ function effectFontFamilies(description, values = {}) {
   }
   return out;
 }
-var effectFieldValue = (field, value) => value === void 0 || value === null || typeof value === "object" && !Array.isArray(value) ? field.default : value;
+var effectFieldValue = (field, value) => {
+  if (field.type === "color") return hexColour(value) ?? field.default;
+  return value === void 0 || value === null || typeof value === "object" && !Array.isArray(value) ? field.default : value;
+};
 function effectSamplePicture(width, height, variant = 0) {
   const p = createEffectPixels(width, height);
   for (let y = 0, i = 0; y < height; y++) {

package/dist/effects/ui.d.cts

@@ -27,7 +27,10 @@ export declare function effectParameterFields(description: Pick<EffectDescriptio
  * to load with `ensureFontsLoaded` before rendering a title preview.
  */
 export declare function effectFontFamilies(description: Pick<EffectDescription, 'controls' | 'defaults'>, values?: Readonly<Record<string, unknown>>): string[];
-/** A saved value as a field shows it (`ParameterValue`), or the field's default. */
+/**
+ * A saved value as a field shows it (`ParameterValue`), or the field's default. Colour fields show
+ * channel arrays as hex, and the default for values they can't show (`"currentColor"`, `rgb(…)`).
+ */
 export declare const effectFieldValue: (field: ParameterField, value: unknown) => ParameterValue;
 /**
  * A colourful, deterministic picture for previews of filters and transitions (`variant` 0 and 1

package/dist/effects/ui.d.ts

@@ -27,7 +27,10 @@ export declare function effectParameterFields(description: Pick<EffectDescriptio
  * to load with `ensureFontsLoaded` before rendering a title preview.
  */
 export declare function effectFontFamilies(description: Pick<EffectDescription, 'controls' | 'defaults'>, values?: Readonly<Record<string, unknown>>): string[];
-/** A saved value as a field shows it (`ParameterValue`), or the field's default. */
+/**
+ * A saved value as a field shows it (`ParameterValue`), or the field's default. Colour fields show
+ * channel arrays as hex, and the default for values they can't show (`"currentColor"`, `rgb(…)`).
+ */
 export declare const effectFieldValue: (field: ParameterField, value: unknown) => ParameterValue;
 /**
  * A colourful, deterministic picture for previews of filters and transitions (`variant` 0 and 1

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.0",
+  "version": "0.178.0",
   "description": "UI-agnostic rich text and media editing core library",
   "author": "Pixerate",
   "license": "MIT",

package/skills/pixerate-effect-authoring/SKILL.md

@@ -49,6 +49,11 @@ For general error reporting and undo conventions, see `pixerate-agent-tools`.
 
 - **Batch parameter changes.** Set all related control values in a single `effect_authoring_set_values`
   call so they apply cleanly in a single undo step.
+- **Write colours as hex.** A control with `type: "color"` in `effect_authoring_describe` takes
+  `#rrggbb` (or `#rrggbbaa` when `alpha` is true), even when the provider's schema also accepts 0–1
+  channel arrays or CSS colour strings (Flair's colours do). Hex keyframes blend smoothly. A control
+  that is in `values` but has no entry in `controls` has a shape no field can edit. Set it only with a
+  value that matches the provider's schema.
 - **Check compile issues.** When editing source code via `effect_authoring_set_source`, always verify
   the returned `issues` array. Fix errors before attempting to preview or set controls.
 - **Keyframe animation tracks.** Controls with active keyframes calculate their values dynamically

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