@pixerate/editor 0.259.0 → 0.260.0

package/dist/vector/index.js

@@ -26,7 +26,7 @@ import {
   traceField,
   traceVectorImage,
   vectorTraceContours
-} from "../chunk-4M4E3N6X.js";
+} from "../chunk-CQVTGBQI.js";
 import {
   applyHomography,
   homographyFromPoints,
@@ -53,7 +53,7 @@ import {
   reverseMorphContour,
   subpathToMorphContour,
   turnMorphContour
-} from "../chunk-IXQZHCOF.js";
+} from "../chunk-QAR2N7HZ.js";
 import {
   DEFAULT_VECTOR_FONT,
   IDENTITY_MATRIX,
@@ -380,6 +380,7 @@ import {
   vectorBrushstrokeBrushOf,
   vectorBrushstrokeBrushes,
   vectorBrushstrokeCharacterError,
+  vectorBrushstrokeDefaultColour,
   vectorBrushstrokeImages,
   vectorBrushstrokeReach,
   vectorChildAppearanceShapes,
@@ -528,10 +529,10 @@ import {
   withVectorStrokes,
   withVectorTargetPaint,
   zigzagPaths
-} from "../chunk-YQ4PQTBB.js";
+} from "../chunk-6NZL24W4.js";
 import {
   snapshotBrushLibrary
-} from "../chunk-SMTUQWGY.js";
+} from "../chunk-5IW65VQ6.js";
 import "../chunk-APX63ILU.js";
 import {
   createProvenance
@@ -558,6 +559,8 @@ import {
   fitCubics,
   parseSvgPath
 } from "../chunk-PWBZH3FK.js";
+import "../chunk-FJBQTZS4.js";
+import "../chunk-3CI7FRMK.js";
 import {
   StickerError
 } from "../chunk-SZTI6EER.js";
@@ -6823,7 +6826,9 @@ var VectorEditorController = class _VectorEditorController {
   committing = false;
   revision = 0;
   state;
+  colorScheme;
   constructor(options = {}) {
+    this.colorScheme = options.colorScheme ?? "light";
     this.brushes = options.brushLibrary ? snapshotBrushLibrary(options.brushLibrary, () => this.notify()) : null;
     this.history = options.history ?? new HistoryManager();
     this.doc = options.document ? loadedDocument(options.document) : { width: 800, height: 600, nodes: [] };
@@ -8182,7 +8187,8 @@ var VectorEditorController = class _VectorEditorController {
    * Adds a brushstroke to the selected (or given) paths: a stroke layer that paints the path with
    * brush `brushId` (a preset, or a saved brush of the brush library: `listBrushstrokeBrushes`), `size` document
    * units across (default the brush's own), an optional `pressure` profile along the length, in
-   * `color` (default the top stroke's paint, else black) at `opacity`. At the top of the stroke
+   * `color` (default the brush's own default colour, unless `keepColour`; else the top stroke's
+   * paint, else black) at `opacity`. At the top of the stroke
    * stack or at `index`. A `seed` gives it the brush's character (jitter and the grain of `paper`,
    * `null` for none); without one it renders plain. One undo step.
    */
@@ -8196,9 +8202,10 @@ var VectorEditorController = class _VectorEditorController {
     if (characterError) return { ok: false, message: characterError };
     if (options.color !== void 0 && !parseVectorColor(options.color)) return { ok: false, message: `"${options.color}" is not a colour.` };
     if (options.opacity !== void 0 && !(options.opacity >= 0 && options.opacity <= 1)) return { ok: false, message: "opacity must be from 0 to 1." };
+    const own = options.keepColour ? null : vectorBrushstrokeDefaultColour(clean.brushId, user, this.colorScheme);
     return this.editStacks("stroke", options.ids, "Add Brushstroke", (stack, path) => {
       const top = [...stack].reverse().find((l) => (l.kind ?? "paint") === "paint");
-      const paint = options.color ?? (typeof top?.paint === "string" && top.paint !== "none" ? top.paint : typeof path.stroke === "string" && path.stroke !== "none" ? path.stroke : "#000000");
+      const paint = options.color ?? own ?? (typeof top?.paint === "string" && top.paint !== "none" ? top.paint : typeof path.stroke === "string" && path.stroke !== "none" ? path.stroke : "#000000");
       const layer = { kind: "brushstroke", paint, brush: clean, ...options.opacity !== void 0 && options.opacity < 1 ? { opacity: options.opacity } : {} };
       const at = options.index === void 0 ? stack.length : Math.min(stack.length, Math.max(0, Math.round(options.index)));
       return [...stack.slice(0, at), layer, ...stack.slice(at)];
@@ -8208,7 +8215,8 @@ var VectorEditorController = class _VectorEditorController {
    * Changes brushstroke layer `index` (in the stroke stack, 0 is the bottom) of the selected (or
    * given) paths: another brush, size, pressure profile (null removes it), colour or opacity, the
    * character `seed` (null removes it: plain dabs) or the `paper` (replaced whole: `null` for no
-   * grain, `{}` for the default paper). Fails, changing nothing, when that layer is not a
+   * grain, `{}` for the default paper). Another brush without a `color` takes that brush's default
+   * colour, if it has one, unless `keepColour`. Fails, changing nothing, when that layer is not a
    * brushstroke. With `merge`, consecutive edits fold into one undo step.
    */
   setBrushstroke(index, patch, options = {}) {
@@ -8236,12 +8244,18 @@ var VectorEditorController = class _VectorEditorController {
         if (patch.seed === null) delete brush.seed;
         else if (patch.seed !== void 0) brush.seed = patch.seed;
         if (patch.paper !== void 0) brush.paper = patch.paper;
-        const next = { ...layer, brush: sanitizeVectorBrushstroke(brush, user) ?? layer.brush, ...patch.color ? { paint: patch.color } : {}, ...patch.opacity !== void 0 ? { opacity: patch.opacity } : {} };
+        const own = patch.brushId && patch.brushId !== layer.brush.brushId && !patch.keepColour ? vectorBrushstrokeDefaultColour(patch.brushId, user, this.colorScheme) : null;
+        const colour = patch.color ?? own;
+        const next = { ...layer, brush: sanitizeVectorBrushstroke(brush, user) ?? layer.brush, ...colour ? { paint: colour } : {}, ...patch.opacity !== void 0 ? { opacity: patch.opacity } : {} };
         return stack.map((l, i) => i === index ? next : l);
       },
       merge
     );
   }
+  /** Sets the colour scheme that picks the side of a brush's light / dark default colour. Existing strokes keep their colour. */
+  setColorScheme(scheme) {
+    this.colorScheme = scheme;
+  }
   /** Removes layer `index` of the fill or stroke stack of the selected (or given) paths. */
   removePaintLayer(kind, index, options = {}) {
     return this.editStacks(
@@ -15932,7 +15946,8 @@ function createVectorCommands(controller, options = {}) {
           brushId: { type: "string", description: 'Brush id from vector.listBrushes, e.g. "pencil-hb".' },
           size: { type: "number", exclusiveMinimum: 0, maximum: 500, description: "Brush diameter in document units (default: the brush's own)." },
           pressure: { type: "array", items: { type: "number", minimum: 0, maximum: 1 }, minItems: 1, maxItems: 64, description: "Pressure 0\u20131 along the length, spread evenly from start to end (default: full pressure)." },
-          color: { type: "string", description: "CSS colour (default: the path's stroke colour, else black)." },
+          color: { type: "string", description: "CSS colour (default: the brush's own default colour, such as the ballpoint's blue, unless keepColour; else the path's stroke colour, else black)." },
+          keepColour: { type: "boolean", description: "Ignore the brush's default colour and use the path's stroke colour (default false)." },
           opacity: { type: "number", minimum: 0, maximum: 1, description: "Layer opacity 0\u20131 (default 1)." },
           index: { type: "integer", minimum: 0, description: "Position in the stroke stack, 0 the bottom (default: on top)." },
           seed: { ...BRUSH_SEED, description: "Character seed 0\u20132147483647: turns on the brush's jitter and paper grain; the same seed always renders the same stroke (default: none, plain dabs)." },
@@ -15954,7 +15969,7 @@ function createVectorCommands(controller, options = {}) {
               ...params.seed !== void 0 ? { seed: params.seed } : {},
               ...params.paper !== void 0 ? { paper: params.paper } : {}
             },
-            { ...params.ids ? { ids: params.ids } : {}, ...params.index !== void 0 ? { index: params.index } : {}, ...params.color ? { color: params.color } : {}, ...params.opacity !== void 0 ? { opacity: params.opacity } : {} }
+            { ...params.ids ? { ids: params.ids } : {}, ...params.index !== void 0 ? { index: params.index } : {}, ...params.color ? { color: params.color } : {}, ...params.keepColour ? { keepColour: true } : {}, ...params.opacity !== void 0 ? { opacity: params.opacity } : {} }
           )
         );
         const paths = [];
@@ -15979,7 +15994,8 @@ function createVectorCommands(controller, options = {}) {
           brushId: { type: "string", description: "Another brush from vector.listBrushes." },
           size: { type: ["number", "null"], description: "Diameter in document units, or null for the brush's own." },
           pressure: { type: ["array", "null"], items: { type: "number", minimum: 0, maximum: 1 }, description: "Pressure profile 0\u20131 from start to end, or null for full pressure." },
-          color: { type: "string", description: "CSS colour." },
+          color: { type: "string", description: "CSS colour (with another brushId and no color, the new brush's default colour, if it has one, unless keepColour)." },
+          keepColour: { type: "boolean", description: "With another brushId: keep the layer's colour instead of taking the new brush's default colour (default false)." },
           opacity: { type: "number", minimum: 0, maximum: 1, description: "Layer opacity 0\u20131." },
           seed: { anyOf: [BRUSH_SEED, { type: "null" }], description: "Character seed 0\u20132147483647 (jitter and paper grain; a new seed gives a new take on the same stroke), or null for plain dabs." },
           paper: { anyOf: [BRUSH_PAPER, { type: "null" }], description: "The paper the grain comes from { pattern, seed, scale, depth } (applies with a seed), null for no grain, or {} for the default sanded paper." }
@@ -18873,6 +18889,7 @@ export {
   vectorBrushstrokeBrushOf,
   vectorBrushstrokeBrushes,
   vectorBrushstrokeCharacterError,
+  vectorBrushstrokeDefaultColour,
   vectorBrushstrokeImages,
   vectorBrushstrokeReach,
   vectorBuilderErasedEdges,

package/package.json

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

package/skills/pixerate-brushes/SKILL.md

@@ -21,7 +21,7 @@ built-in presets (read-only) and the user's brushes, shared by every editor that
 | Behaviour | `surface` `dry`, `wet` (`wet` settings) or `thick` (`thick` impasto settings); paper `grain`; `exchange` (pick-up and mix; a `reservoir` makes a Mixer Brush); tool `strength`. |
 | Light | Light the brush gives off (`amount`), plus suggested layer `spill` and `glow`. |
 | Motion | Animation after painting (live effect paint, particle `waveSpeed`). |
-| Colour | A `default` colour, a `palette` of up to 16, `own` (always its own colour). Each is a hex or `rgba()` colour, a light / dark pair `{ light, dark }`, a gradient or effect paint. A gradient default is always painted; a solid or light / dark default becomes the editor's colour when the brush is chosen (unless the user locked theirs), resolved for the colour scheme. |
+| Colour | A `default` colour, a `palette` of up to 16, `own` (always its own colour). Each is a hex or `rgba()` colour, a light / dark pair `{ light, dark }`, a gradient or effect paint. A gradient default is always painted; a solid or light / dark default becomes the editor's colour when the brush is chosen (unless the user locked theirs), resolved for the colour scheme. Canvas strokes and vector brushstrokes take it too, when they are given no colour. |
 
 How media map to facets: a **pencil** or **charcoal** is `dry` with high `grain` and tilt;
 **ink** is a hard round tip with pressure to size (a pen thins with velocity); **watercolour**

package/skills/pixerate-canvas/SKILL.md

@@ -99,6 +99,8 @@ you to. Withdraw stale ones with `reject_proposal`: when the user changes what a
   one width), the airbrush is a soft spray. The grain and jitter are seeded per stroke, so a
   stroke always looks the same, and neighbouring strokes share one sheet of paper. Pick the brush
   for the look, then the colour; for a sketch, use one or two brushes rather than all of them.
+  A brush with a default colour (ballpoint blue, highlighter yellow, chalk) paints in it when
+  you pass no `color`; pass `color` to use another.
 - **Annotate with gestures, not points.** To mark up work the way a designer marks up a print,
   use the gesture commands (`canvas.circle`, `canvas.underline`, `canvas.arrow`,
   `canvas.bracket`, `canvas.strike`, `canvas.cross`, `canvas.check`) with node ids
@@ -251,7 +253,7 @@ character: seeded jitter and the paper grain they catch) and, when a width was c
 
 | Command | Use it to |
 | --- | --- |
-| `canvas.drawFreehand` | Draw a pen or highlighter stroke through `points` (`[x, y]` pairs in canvas units, in drawing order; one undo step). `tool` picks the defaults (`pen`: blue, width 3; `highlighter`: yellow, width 24, opacity 0.35); `color`, `width`, `opacity` override them (with a `brush`, `width` is the brush diameter and defaults to the preset's own size). Pass `brush` (a preset or saved brush id from `canvas.listBrushes`, or tip settings) to paint it with a dry brush, plus `pressure` / `tiltX` / `tiltY` profiles spread along its length (`[0.2, 1, 0.3]` swells in the middle). Add `paint` (only with `brush`) for gradient paint that changes colour along the stroke: `{ "type": "gradient", "stops": [...], "map": { "by": "distance", "length": 200 } }` (length in canvas units), or `by` `pressure`, `tilt`, `direction`, `across-tip`, `random`. Returns the node `id`, its `bounds` and the stored `brush` (with `paint` normalised: defaults filled in, colours lowercased). |
+| `canvas.drawFreehand` | Draw a pen or highlighter stroke through `points` (`[x, y]` pairs in canvas units, in drawing order; one undo step). `tool` picks the defaults (`pen`: blue, width 3; `highlighter`: yellow, width 24, opacity 0.35); `color`, `width`, `opacity` override them (with a `brush` and no `color`, the brush's default colour if it has one; with a `brush`, `width` is the brush diameter and defaults to the preset's own size). Pass `brush` (a preset or saved brush id from `canvas.listBrushes`, or tip settings) to paint it with a dry brush, plus `pressure` / `tiltX` / `tiltY` profiles spread along its length (`[0.2, 1, 0.3]` swells in the middle). Add `paint` (only with `brush`) for gradient paint that changes colour along the stroke: `{ "type": "gradient", "stops": [...], "map": { "by": "distance", "length": 200 } }` (length in canvas units), or `by` `pressure`, `tilt`, `direction`, `across-tip`, `random`. Returns the node `id`, its `bounds` and the stored `brush` (with `paint` normalised: defaults filled in, colours lowercased). |
 | `canvas.listBrushes` | Read-only: the brushes `canvas.drawFreehand` and the gestures accept as `brush`: the dry presets, then saved brushes from the brush library the canvas can paint (`id`, `name`, `category`, the brush's own `size`, which a stroke uses unless you pass `width`, and `builtin`). Call it before the first brushed stroke instead of guessing ids. |
 
 Gestures draw one hand-drawn stroke node each (one undo step) through the same path as

package/skills/pixerate-vector/SKILL.md

@@ -374,8 +374,8 @@ contents whole while you work, without losing the mask.
 | Command | Use it to |
 | --- | --- |
 | `vector.listBrushes` | List the brushes a brushstroke can use: the dry presets (pencils, pastels, charcoal, crayon, chalk, markers, inks, ballpoint, gel pen, fineliner), then saved brushes from the brush library the vector profile admits, with their sizes and `builtin`. Brushes it refuses (wet, thick, particles, stickers, tools) are refused by `vector.addBrushstroke` with the reason. A saved brush is kept in the layer, so the document renders without the library. |
-| `vector.addBrushstroke` | Paint paths with a brush along their outline (`brushId`, `size`, `pressure` profile such as [0.2, 1, 0.2] for a taper, `color`): sketchy, hand-drawn or inked lines that stay editable. Pass a `seed` (any integer) so the brush gets its character, the seeded jitter and paper grain that make pencil, pastel and charcoal look real; `paper` picks the grain (`{ pattern, seed, scale, depth }`) or `null` turns it off. Returns the stroke stacks. |
-| `vector.setBrushstroke` | Change brushstroke layer `index` of path `id`: brush, size, pressure, colour, opacity, `seed` (a new seed is a new take on the same stroke; null: plain dabs) and `paper` (replaced whole; null: no grain; {}: the default sanded paper). Remove it with `vector.removeStroke`. |
+| `vector.addBrushstroke` | Paint paths with a brush along their outline (`brushId`, `size`, `pressure` profile such as [0.2, 1, 0.2] for a taper, `color`, default the brush's default colour (ballpoint blue, chalk), else the path's stroke; `keepColour` keeps the path's colour): sketchy, hand-drawn or inked lines that stay editable. Pass a `seed` (any integer) so the brush gets its character, the seeded jitter and paper grain that make pencil, pastel and charcoal look real; `paper` picks the grain (`{ pattern, seed, scale, depth }`) or `null` turns it off. Returns the stroke stacks. |
+| `vector.setBrushstroke` | Change brushstroke layer `index` of path `id`: brush (another brush without `color` takes its default colour, unless `keepColour`), size, pressure, colour, opacity, `seed` (a new seed is a new take on the same stroke; null: plain dabs) and `paper` (replaced whole; null: no grain; {}: the default sanded paper). Remove it with `vector.removeStroke`. |
 
 Give brushstrokes a `seed` unless you want flat, even dabs: without one a charcoal or pastel line looks like a felt pen. Use different seeds on neighbouring strokes so they do not repeat each other, and `paper: null` for clean ink or marker lines that should not catch grain. The grain is laid in each path's own space, so it moves with the path.
 

package/dist/chunk-2VJAVXLI.js

@@ -1,192 +0,0 @@
-import {
-  LAYER_EFFECT_KINDS,
-  builtinPattern,
-  builtinPatternIds,
-  defaultEffectGradient,
-  hasActiveEffects,
-  layerEffectLabel
-} from "./chunk-3PPJRMIG.js";
-import {
-  BLEND_MODES
-} from "./chunk-IRSTHLQQ.js";
-
-// src/raster/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 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 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 }))
-  };
-}
-function layerEffectsBadge(layer) {
-  if (!layer.effects?.items.length) return null;
-  return hasActiveEffects(layer.effects) ? "on" : "off";
-}
-var LAYER_EFFECT_MENU = LAYER_EFFECT_KINDS.map((kind) => ({ kind, label: layerEffectLabel(kind) }));
-var BLENDS = BLEND_MODES.filter((m) => m.id !== "pigment").map((m) => ({ value: m.id, label: m.label }));
-var opt = (...pairs) => pairs.map(([value, label]) => ({ value, label }));
-function patternOptions(patterns) {
-  return [...patterns.map((p) => ({ value: p.id, label: p.name || p.id })), ...builtinPatternIds().map((id) => ({ value: id, label: builtinPattern(id).name }))];
-}
-function getPath(o, path) {
-  let v = o;
-  for (const p of path.split(".")) {
-    if (v === null || v === void 0) return void 0;
-    if (Array.isArray(v)) v = p === "last" ? v[v.length - 1] : v[Number(p)];
-    else v = v[p];
-  }
-  return v;
-}
-function setPath(o, parts, value) {
-  if (!parts.length) return value;
-  const [p, ...rest] = parts;
-  if (Array.isArray(o)) {
-    const i = p === "last" ? o.length - 1 : Number(p);
-    const out = [...o];
-    out[i] = setPath(o[i], rest, value);
-    return out;
-  }
-  const r = o ?? {};
-  return { ...r, [p]: setPath(r[p], rest, value) };
-}
-function fillControls(f, allowPattern, patterns) {
-  const types = allowPattern ? opt(["color", "Color"], ["gradient", "Gradient"], ["pattern", "Pattern"]) : opt(["color", "Color"], ["gradient", "Gradient"]);
-  const out = [{ key: "fill.type", label: "Fill", type: "select", value: f.type, options: types }];
-  if (f.type === "color") out.push({ key: "fill.color", label: "Color", type: "color", value: f.color });
-  else if (f.type === "gradient") out.push(...gradientControls("fill.gradient", f.gradient));
-  else {
-    out.push(
-      { key: "fill.patternId", label: "Pattern", type: "select", value: f.patternId, options: patternOptions(patterns) },
-      { key: "fill.scale", label: "Scale", type: "range", min: 0.01, max: 10, step: 0.01, value: f.scale, percent: true, unit: "%" }
-    );
-  }
-  return out;
-}
-function gradientControls(prefix, g) {
-  return [
-    { key: `${prefix}.stops.0.color`, label: "Start colour", type: "color", value: g.stops[0]?.color ?? "#000000" },
-    { key: `${prefix}.stops.last.color`, label: "End colour", type: "color", value: g.stops[g.stops.length - 1]?.color ?? "#ffffff" },
-    { key: `${prefix}.style`, label: "Style", type: "select", value: g.style, options: opt(["linear", "Linear"], ["radial", "Radial"], ["angle", "Angle"], ["reflected", "Reflected"], ["diamond", "Diamond"]) },
-    { key: `${prefix}.angle`, label: "Angle", type: "range", min: -180, max: 180, step: 1, value: g.angle, unit: "\xB0" },
-    { key: `${prefix}.scale`, label: "Scale", type: "range", min: 0.1, max: 1.5, step: 0.01, value: g.scale, percent: true, unit: "%" },
-    { key: `${prefix}.reverse`, label: "Reverse", type: "checkbox", value: g.reverse },
-    { key: `${prefix}.align`, label: "Align with layer", type: "checkbox", value: g.align }
-  ];
-}
-var px = (key, label, value, max = 250) => ({ key, label, type: "range", min: 0, max, step: 1, value, unit: "px" });
-var pct = (key, label, value, min = 0, max = 1) => ({ key, label, type: "range", min, max, step: 0.01, value, percent: true, unit: "%" });
-var deg = (key, label, value, min = -180, max = 180) => ({ key, label, type: "range", min, max, step: 1, value, unit: "\xB0" });
-function layerEffectControls(e, patterns = []) {
-  const blended = e.kind === "bevel-emboss" ? [] : [
-    { key: "blend", label: "Blend mode", type: "select", value: e.blend, options: BLENDS },
-    pct("opacity", "Opacity", e.opacity)
-  ];
-  switch (e.kind) {
-    case "drop-shadow":
-    case "inner-shadow":
-      return [
-        ...blended,
-        { key: "color", label: "Color", type: "color", value: e.color },
-        { key: "useGlobalLight", label: "Use global light", type: "checkbox", value: e.useGlobalLight },
-        deg("angle", "Angle", e.angle),
-        px("distance", "Distance", e.distance, 500),
-        e.kind === "drop-shadow" ? pct("spread", "Spread", e.spread) : pct("choke", "Choke", e.choke),
-        px("size", "Size", e.size),
-        pct("noise", "Noise", e.noise),
-        ...e.kind === "drop-shadow" ? [{ key: "knocksOut", label: "Layer knocks out shadow", type: "checkbox", value: e.knocksOut }] : []
-      ];
-    case "outer-glow":
-    case "inner-glow":
-      return [
-        ...blended,
-        ...fillControls(e.fill, false, patterns),
-        { key: "technique", label: "Technique", type: "select", value: e.technique, options: opt(["softer", "Softer"], ["precise", "Precise"]) },
-        ...e.kind === "inner-glow" ? [{ key: "source", label: "Source", type: "select", value: e.source, options: opt(["edge", "Edge"], ["center", "Center"]) }] : [],
-        e.kind === "outer-glow" ? pct("spread", "Spread", e.spread) : pct("choke", "Choke", e.choke),
-        px("size", "Size", e.size),
-        pct("range", "Range", e.range, 0.01, 1),
-        pct("noise", "Noise", e.noise)
-      ];
-    case "bevel-emboss":
-      return [
-        { key: "style", label: "Style", type: "select", value: e.style, options: opt(["inner-bevel", "Inner Bevel"], ["outer-bevel", "Outer Bevel"], ["emboss", "Emboss"], ["pillow-emboss", "Pillow Emboss"], ["stroke-emboss", "Stroke Emboss"]) },
-        { key: "technique", label: "Technique", type: "select", value: e.technique, options: opt(["smooth", "Smooth"], ["chisel-hard", "Chisel Hard"], ["chisel-soft", "Chisel Soft"]) },
-        pct("depth", "Depth", e.depth, 0, 10),
-        { key: "direction", label: "Direction", type: "select", value: e.direction, options: opt(["up", "Up"], ["down", "Down"]) },
-        px("size", "Size", e.size),
-        px("soften", "Soften", e.soften, 16),
-        { key: "useGlobalLight", label: "Use global light", type: "checkbox", value: e.useGlobalLight },
-        deg("angle", "Angle", e.angle),
-        deg("altitude", "Altitude", e.altitude, 0, 90),
-        { key: "highlightColor", label: "Highlight", type: "color", value: e.highlightColor },
-        { key: "highlightBlend", label: "Highlight mode", type: "select", value: e.highlightBlend, options: BLENDS },
-        pct("highlightOpacity", "Highlight opacity", e.highlightOpacity),
-        { key: "shadowColor", label: "Shadow", type: "color", value: e.shadowColor },
-        { key: "shadowBlend", label: "Shadow mode", type: "select", value: e.shadowBlend, options: BLENDS },
-        pct("shadowOpacity", "Shadow opacity", e.shadowOpacity)
-      ];
-    case "satin":
-      return [
-        ...blended,
-        { key: "color", label: "Color", type: "color", value: e.color },
-        deg("angle", "Angle", e.angle),
-        px("distance", "Distance", e.distance),
-        px("size", "Size", e.size),
-        { key: "invert", label: "Invert", type: "checkbox", value: e.invert }
-      ];
-    case "color-overlay":
-      return [...blended, { key: "color", label: "Color", type: "color", value: e.color }];
-    case "gradient-overlay":
-      return [...blended, ...gradientControls("gradient", e.gradient)];
-    case "pattern-overlay":
-      return [
-        ...blended,
-        { key: "patternId", label: "Pattern", type: "select", value: e.patternId, options: patternOptions(patterns) },
-        pct("scale", "Scale", e.scale, 0.01, 10),
-        deg("angle", "Angle", e.angle ?? 0),
-        { key: "link", label: "Link with layer", type: "checkbox", value: e.link ?? true }
-      ];
-    case "stroke":
-      return [
-        ...blended,
-        px("size", "Size", e.size),
-        { key: "position", label: "Position", type: "select", value: e.position, options: opt(["outside", "Outside"], ["inside", "Inside"], ["center", "Center"]) },
-        ...fillControls(e.fill, true, patterns)
-      ];
-  }
-}
-function fillOfType(current, type, patterns) {
-  if (type === "gradient") return { type: "gradient", gradient: defaultEffectGradient() };
-  if (type === "pattern") return { type: "pattern", patternId: patterns[0]?.id ?? "checker", scale: 1 };
-  return { type: "color", color: current.type === "color" ? current.color : "#000000" };
-}
-function effectControlChange(effect, key, value, patterns = []) {
-  const [top, ...rest] = key.split(".");
-  if (top === "fill" && rest[0] === "type") return { fill: fillOfType(effect.fill, String(value), patterns) };
-  if (top === "patternId" && !rest.length) {
-    const name = patternOptions(patterns).find((o) => o.value === value)?.label;
-    return name ? { patternId: value, name } : { patternId: value };
-  }
-  if (!rest.length) return { [top]: value };
-  if (top === "fill" && rest[0] === "patternId") {
-    const name = patternOptions(patterns).find((o) => o.value === value)?.label;
-    return { fill: { ...effect.fill, patternId: value, ...name ? { name } : {} } };
-  }
-  return { [top]: setPath(getPath(effect, top), rest, value) };
-}
-
-export {
-  layerEffectsPanel,
-  layerEffectsBadge,
-  LAYER_EFFECT_MENU,
-  layerEffectControls,
-  effectControlChange
-};