@pixerate/editor 0.96.0 → 0.97.0

package/dist/image-editor/index.js

@@ -58,7 +58,7 @@ import {
   validateEffectGradient,
   validateLayerEffect,
   validateLayerEffects
-} from "../chunk-KFTQ2PKP.js";
+} from "../chunk-OEVSVA6V.js";
 import {
   CoverageMap,
   DEFAULT_BRUSH,
@@ -557,20 +557,20 @@ function hitTestCrop(canvasPt, state, vpWidth, vpHeight, handleThreshold = 14, c
 }
 function hitTestCropRect(canvasPt, rect, handleThreshold) {
   const { x, y, width: w, height: h } = rect;
-  const px = canvasPt.x;
+  const px2 = canvasPt.x;
   const py = canvasPt.y;
   const dist = (x1, y1, x2, y2) => Math.hypot(x1 - x2, y1 - y2);
-  if (dist(px, py, x, y) <= handleThreshold) return "nw";
-  if (dist(px, py, x + w, y) <= handleThreshold) return "ne";
-  if (dist(px, py, x + w, y + h) <= handleThreshold) return "se";
-  if (dist(px, py, x, y + h) <= handleThreshold) return "sw";
-  const nearX = px >= x - handleThreshold && px <= x + w + handleThreshold;
+  if (dist(px2, py, x, y) <= handleThreshold) return "nw";
+  if (dist(px2, py, x + w, y) <= handleThreshold) return "ne";
+  if (dist(px2, py, x + w, y + h) <= handleThreshold) return "se";
+  if (dist(px2, py, x, y + h) <= handleThreshold) return "sw";
+  const nearX = px2 >= x - handleThreshold && px2 <= x + w + handleThreshold;
   const nearY = py >= y - handleThreshold && py <= y + h + handleThreshold;
   if (nearX && Math.abs(py - y) <= handleThreshold) return "n";
   if (nearX && Math.abs(py - (y + h)) <= handleThreshold) return "s";
-  if (nearY && Math.abs(px - x) <= handleThreshold) return "w";
-  if (nearY && Math.abs(px - (x + w)) <= handleThreshold) return "e";
-  if (px >= x && px <= x + w && py >= y && py <= y + h) {
+  if (nearY && Math.abs(px2 - x) <= handleThreshold) return "w";
+  if (nearY && Math.abs(px2 - (x + w)) <= handleThreshold) return "e";
+  if (px2 >= x && px2 <= x + w && py >= y && py <= y + h) {
     return "inside";
   }
   return null;
@@ -1598,13 +1598,13 @@ function hslToRgb(h, s, l) {
   };
   return [f(h + 1 / 3), f(h), f(h - 1 / 3)];
 }
-function hueRangeWeight(range, deg) {
+function hueRangeWeight(range, deg2) {
   const [a, b0, c0, d0] = range.bounds;
   const rel = (x) => Number.isFinite(x) && Number.isFinite(a) ? remEuclid(x - a, 360) : 0;
   const b = rel(b0);
   const c = Math.max(rel(c0), b);
   const d = Math.max(rel(d0), c);
-  const h = rel(deg);
+  const h = rel(deg2);
   if (h <= b) return b <= 0 ? 1 : h / b;
   if (h <= c) return 1;
   if (h <= d) return d <= c ? 1 : (d - h) / (d - c);
@@ -1616,9 +1616,9 @@ function hueRangeTables(ranges) {
   const t = [new Float32Array(n), new Float32Array(n), new Float32Array(n)];
   const active = ranges.filter((r) => !isNeutralRange(r));
   for (let k = 0; k < n; k++) {
-    const deg = k / (n - 1) * 360;
+    const deg2 = k / (n - 1) * 360;
     for (const r of active) {
-      const w = hueRangeWeight(r, deg);
+      const w = hueRangeWeight(r, deg2);
       t[0][k] += w * r.hue;
       t[1][k] += w * r.saturation / 100;
       t[2][k] += w * r.lightness / 100;
@@ -2181,8 +2181,8 @@ function applyFastBoxBlur(imageData, radius) {
       let r = 0, g = 0, b = 0, a = 0;
       let count = 0;
       for (let k = -radius; k <= radius; k++) {
-        const px = Math.min(w - 1, Math.max(0, x + k));
-        const idx = (y * w + px) * 4;
+        const px2 = Math.min(w - 1, Math.max(0, x + k));
+        const idx = (y * w + px2) * 4;
         r += src[idx];
         g += src[idx + 1];
         b += src[idx + 2];
@@ -3137,13 +3137,13 @@ var ImageEditorRenderer = class {
       ctx.save();
       try {
         applyImageProjectionToContext(ctx, projection);
-        const px = 1 / (projection.scale || 1);
+        const px2 = 1 / (projection.scale || 1);
         ctx.beginPath();
-        ctx.arc(b.x, b.y, Math.max(px, b.diameter / 2), 0, Math.PI * 2);
-        ctx.lineWidth = 2 * px;
+        ctx.arc(b.x, b.y, Math.max(px2, b.diameter / 2), 0, Math.PI * 2);
+        ctx.lineWidth = 2 * px2;
         ctx.strokeStyle = "rgba(0,0,0,0.6)";
         ctx.stroke();
-        ctx.lineWidth = px;
+        ctx.lineWidth = px2;
         ctx.strokeStyle = "#ffffff";
         ctx.stroke();
       } catch {
@@ -3426,32 +3426,32 @@ var ImageEditorRenderer = class {
       this.outlineCache.set(selection, segs);
     }
     if (!segs.length) return;
-    const px = 1 / (scale || 1);
+    const px2 = 1 / (scale || 1);
     ctx.beginPath();
     for (let i = 0; i < segs.length; i += 4) {
       ctx.moveTo(segs[i], segs[i + 1]);
       ctx.lineTo(segs[i + 2], segs[i + 3]);
     }
-    ctx.lineWidth = px;
+    ctx.lineWidth = px2;
     ctx.strokeStyle = "#ffffff";
     ctx.stroke();
     if (typeof ctx.setLineDash === "function") {
-      ctx.setLineDash([4 * px, 4 * px]);
-      ctx.lineDashOffset = -offset * px;
+      ctx.setLineDash([4 * px2, 4 * px2]);
+      ctx.lineDashOffset = -offset * px2;
     }
     ctx.strokeStyle = "#000000";
     ctx.stroke();
     if (typeof ctx.setLineDash === "function") ctx.setLineDash([]);
   }
   drawDraftPath(ctx, points, scale) {
-    const px = 1 / (scale || 1);
+    const px2 = 1 / (scale || 1);
     ctx.beginPath();
     points.forEach((p, i) => i === 0 ? ctx.moveTo(p.x, p.y) : ctx.lineTo(p.x, p.y));
     ctx.closePath();
-    ctx.lineWidth = px;
+    ctx.lineWidth = px2;
     ctx.strokeStyle = "#ffffff";
     ctx.stroke();
-    if (typeof ctx.setLineDash === "function") ctx.setLineDash([4 * px, 4 * px]);
+    if (typeof ctx.setLineDash === "function") ctx.setLineDash([4 * px2, 4 * px2]);
     ctx.strokeStyle = "#000000";
     ctx.stroke();
     if (typeof ctx.setLineDash === "function") ctx.setLineDash([]);
@@ -4297,8 +4297,8 @@ var gfRadius = (p) => Math.min(64, Math.max(1, Math.ceil(p.radius)));
 var smoothSigma = (p) => p.smooth / 100 * 4;
 var featherSigma = (p) => p.feather / 2;
 function shiftAmount(p) {
-  const px = p.shiftEdge / 100 * Math.max(p.radius, 4);
-  return Number.isFinite(px) ? Math.min(64, Math.max(-64, px)) : 0;
+  const px2 = p.shiftEdge / 100 * Math.max(p.radius, 4);
+  return Number.isFinite(px2) ? Math.min(64, Math.max(-64, px2)) : 0;
 }
 function refineEdgeHalo(params = {}) {
   const p = normalizeRefineEdgeParams(params);
@@ -4702,8 +4702,8 @@ function readSurface(ref, x, y, channels, defaultValue, ctx, what) {
     return emptySurface(channels, defaultValue);
   }
   try {
-    const px = (ctx.decodeAsset ?? decodePngDataUrl)(url, channels);
-    return surfaceFromPixels(px, channels, Math.round(num(x, -1e7, 1e7, 0)), Math.round(num(y, -1e7, 1e7, 0)), defaultValue);
+    const px2 = (ctx.decodeAsset ?? decodePngDataUrl)(url, channels);
+    return surfaceFromPixels(px2, channels, Math.round(num(x, -1e7, 1e7, 0)), Math.round(num(y, -1e7, 1e7, 0)), defaultValue);
   } catch (err) {
     ctx.problems.push(`${what}: asset "${ref}" could not be decoded (${err.message})`);
     return emptySurface(channels, defaultValue);
@@ -8763,17 +8763,17 @@ var ImageEditorController = class {
    */
   sourceSurface() {
     const { width, height } = this.naturalSize;
-    const fromPixels = (px2) => {
-      let s = this.sourceSurfaces.get(px2);
+    const fromPixels = (px3) => {
+      let s = this.sourceSurfaces.get(px3);
       if (!s) {
-        s = surfaceFromPixels(px2, 4);
-        this.sourceSurfaces.set(px2, s);
+        s = surfaceFromPixels(px3, 4);
+        this.sourceSurfaces.set(px3, s);
       }
       return s;
     };
-    const px = this.samplePixels;
-    const fits = Boolean(px && px.width === width && px.height === height);
-    if (this.samplePixelsOverride && fits) return fromPixels(px);
+    const px2 = this.samplePixels;
+    const fits = Boolean(px2 && px2.width === width && px2.height === height);
+    if (this.samplePixelsOverride && fits) return fromPixels(px2);
     const el = this.imageElement;
     if (el) {
       const cached = this.sourceSurfaces.get(el);
@@ -8787,7 +8787,7 @@ var ImageEditorController = class {
         return s;
       }
     }
-    return fits ? fromPixels(px) : null;
+    return fits ? fromPixels(px2) : null;
   }
   opaqueCache = /* @__PURE__ */ new WeakMap();
   /** Whether every source pixel is opaque (some legacy renders depend on it). */
@@ -8846,11 +8846,11 @@ var ImageEditorController = class {
     const { width, height } = this.naturalSize;
     let surface = emptySurface(4);
     if (init.pixels) {
-      const px = init.pixels;
-      if (!(px.width > 0 && px.height > 0) || px.data.length < px.width * px.height * 4) {
+      const px2 = init.pixels;
+      if (!(px2.width > 0 && px2.height > 0) || px2.data.length < px2.width * px2.height * 4) {
         throw new LayerOperationError("pixels must be RGBA with width \xD7 height \xD7 4 bytes.");
       }
-      surface = surfaceFromPixels(px, 4);
+      surface = surfaceFromPixels(px2, 4);
     } else if (init.color !== void 0) {
       const c = parseColor(init.color);
       surface = solidSurface(4, { x: 0, y: 0, width, height }, packRgba(c[0], c[1], c[2], c[3]));
@@ -9098,14 +9098,14 @@ var ImageEditorController = class {
     const surface = this.surfaceOf(layer);
     const sb = sel.bounds;
     const src = { x: sb.x - layer.offset.x, y: sb.y - layer.offset.y, width: sb.width, height: sb.height };
-    const px = readRegion(surface, src);
-    const kept = options.cut ? new Uint8ClampedArray(px) : null;
+    const px2 = readRegion(surface, src);
+    const kept = options.cut ? new Uint8ClampedArray(px2) : null;
     for (let y = 0; y < sb.height; y++) {
       for (let x = 0; x < sb.width; x++) {
         const c = sel.data[(sb.y + y) * sel.width + sb.x + x];
         const i = (y * sb.width + x) * 4 + 3;
         if (kept) kept[i] = Math.round(kept[i] * (1 - c / 255));
-        px[i] = Math.round(px[i] * (c / 255));
+        px2[i] = Math.round(px2[i] * (c / 255));
       }
     }
     const copy = {
@@ -9115,7 +9115,7 @@ var ImageEditorController = class {
       visible: true,
       opacity: 1,
       blend: "normal",
-      surface: surfaceFromPixels({ width: src.width, height: src.height, data: px }, 4, src.x, src.y),
+      surface: surfaceFromPixels({ width: src.width, height: src.height, data: px2 }, 4, src.x, src.y),
       offset: { ...layer.offset }
     };
     let next = insertLayer(this.state.layers, copy, loc.parent?.id ?? null, loc.index + 1);
@@ -10377,9 +10377,9 @@ var ImageEditorController = class {
       return;
     }
     const { width, height } = this.naturalSize;
-    let px = await this.decodeImage(newDataUrl);
-    if (px.width !== width || px.height !== height) px = resizePixels(px, width, height);
-    const data = new Uint8ClampedArray(px.data);
+    let px2 = await this.decodeImage(newDataUrl);
+    if (px2.width !== width || px2.height !== height) px2 = resizePixels(px2, width, height);
+    const data = new Uint8ClampedArray(px2.data);
     const sel = this.state.selection?.bounds ? this.state.selection : null;
     if (sel) for (let p = 0, i = 3; p < width * height; p++, i += 4) data[i] = Math.round(data[i] * sel.data[p] / 255);
     return this.addPixelLayer({ name: "Inpaint", pixels: { width, height, data } });
@@ -10400,10 +10400,10 @@ var ImageEditorController = class {
     if (!target) throw new LayerOperationError("There is no pixel layer to mask.");
     requireUnlocked(target, "all", "mask it");
     const { width, height } = this.naturalSize;
-    let px = await this.decodeImage(newDataUrl);
-    if (px.width !== width || px.height !== height) px = resizePixels(px, width, height);
+    let px2 = await this.decodeImage(newDataUrl);
+    if (px2.width !== width || px2.height !== height) px2 = resizePixels(px2, width, height);
     const alpha = new Uint8ClampedArray(width * height);
-    for (let p = 0; p < alpha.length; p++) alpha[p] = px.data[p * 4 + 3];
+    for (let p = 0; p < alpha.length; p++) alpha[p] = px2.data[p * 4 + 3];
     let surface = surfaceFromPixels({ width, height, data: alpha }, 1, 0, 0, 0);
     if (target.offset.x || target.offset.y) surface = translateSurface(surface, -target.offset.x, -target.offset.y);
     this.commitLayers(setLayerMask(this.state.layers, target.id, { surface, defaultValue: 0 }));
@@ -10913,24 +10913,24 @@ function pixelsOnly(layers) {
   }
   return out;
 }
-function resizePixels(px, width, height) {
-  const src = px.data;
+function resizePixels(px2, width, height) {
+  const src = px2.data;
   const out = new Uint8ClampedArray(width * height * 4);
-  const kx = px.width / width;
-  const ky = px.height / height;
+  const kx = px2.width / width;
+  const ky = px2.height / height;
   for (let y = 0; y < height; y++) {
-    const fy = Math.min(px.height - 1, Math.max(0, (y + 0.5) * ky - 0.5));
+    const fy = Math.min(px2.height - 1, Math.max(0, (y + 0.5) * ky - 0.5));
     const y0 = Math.floor(fy);
-    const y1 = Math.min(px.height - 1, y0 + 1);
+    const y1 = Math.min(px2.height - 1, y0 + 1);
     const ty = fy - y0;
     for (let x = 0; x < width; x++) {
-      const fx = Math.min(px.width - 1, Math.max(0, (x + 0.5) * kx - 0.5));
+      const fx = Math.min(px2.width - 1, Math.max(0, (x + 0.5) * kx - 0.5));
       const x0 = Math.floor(fx);
-      const x1 = Math.min(px.width - 1, x0 + 1);
+      const x1 = Math.min(px2.width - 1, x0 + 1);
       const tx = fx - x0;
       for (let c = 0; c < 4; c++) {
-        const a = src[(y0 * px.width + x0) * 4 + c] * (1 - tx) + src[(y0 * px.width + x1) * 4 + c] * tx;
-        const b = src[(y1 * px.width + x0) * 4 + c] * (1 - tx) + src[(y1 * px.width + x1) * 4 + c] * tx;
+        const a = src[(y0 * px2.width + x0) * 4 + c] * (1 - tx) + src[(y0 * px2.width + x1) * 4 + c] * tx;
+        const b = src[(y1 * px2.width + x0) * 4 + c] * (1 - tx) + src[(y1 * px2.width + x1) * 4 + c] * tx;
         out[(y * width + x) * 4 + c] = a * (1 - ty) + b * ty;
       }
     }
@@ -11425,8 +11425,8 @@ function describeSelection(mask) {
   if (!mask || !mask.bounds) return "No selection";
   let sum = 0;
   for (let i = 0; i < mask.data.length; i++) sum += mask.data[i];
-  const pct2 = sum / 255 / mask.data.length * 100;
-  const shown = pct2 >= 10 ? Math.round(pct2) : Math.round(pct2 * 10) / 10;
+  const pct3 = sum / 255 / mask.data.length * 100;
+  const shown = pct3 >= 10 ? Math.round(pct3) : Math.round(pct3 * 10) / 10;
   return `${mask.bounds.width} \xD7 ${mask.bounds.height} px selected (${shown}% of the image)`;
 }
 
@@ -11746,14 +11746,14 @@ function rebin(bins, count) {
   return out;
 }
 function histogramSummary(h, bins) {
-  const pct2 = (n) => h.samples ? round(n / h.samples * 100) : 0;
+  const pct3 = (n) => h.samples ? round(n / h.samples * 100) : 0;
   const channels = { red: h.red, green: h.green, blue: h.blue, luminance: h.luminance };
   return {
     samples: h.samples,
     transparent: h.transparent,
     clipping: {
-      shadowsPercent: { red: pct2(h.shadows[0]), green: pct2(h.shadows[1]), blue: pct2(h.shadows[2]) },
-      highlightsPercent: { red: pct2(h.highlights[0]), green: pct2(h.highlights[1]), blue: pct2(h.highlights[2]) }
+      shadowsPercent: { red: pct3(h.shadows[0]), green: pct3(h.shadows[1]), blue: pct3(h.shadows[2]) },
+      highlightsPercent: { red: pct3(h.highlights[0]), green: pct3(h.highlights[1]), blue: pct3(h.highlights[2]) }
     },
     stats: Object.fromEntries(Object.entries(channels).map(([k, v]) => [k, binStats(v, h.samples)])),
     ...bins ? { bins: Object.fromEntries(Object.entries(channels).map(([k, v]) => [k, rebin(v, bins)])) } : {}
@@ -12620,7 +12620,7 @@ var DEFS = {
 };
 var nullable = (schema, description) => ({ anyOf: [schema, { type: "null" }], description });
 function settingsSchema(forUpdate) {
-  const opt = (schema, description) => forUpdate ? nullable(schema, `${description} null removes it.`) : { ...schema, description };
+  const opt2 = (schema, description) => forUpdate ? nullable(schema, `${description} null removes it.`) : { ...schema, description };
   return {
     type: "object",
     description: forUpdate ? "Settings to change (only these; nested objects are replaced whole). Which settings a kind takes: see add_layer_effect." : "Settings to change from Photoshop's defaults (all optional). Unknown settings for the kind are refused with the list of its settings.",
@@ -12635,7 +12635,7 @@ function settingsSchema(forUpdate) {
       spread: { type: "number", minimum: 0, maximum: 1, description: "drop-shadow, outer-glow: 0..1 of the size made solid (default 0)." },
       choke: { type: "number", minimum: 0, maximum: 1, description: "inner-shadow, inner-glow: 0..1 of the size made solid (default 0)." },
       size: { type: "number", minimum: 0, maximum: 250, description: "Shadows, glows, satin, bevel-emboss: blur / size in px (default 5; satin 14); stroke: width in px (default 3)." },
-      contour: opt({ $ref: "#/$defs/contour" }, "Shadows, glows, satin: coverage contour (default linear)."),
+      contour: opt2({ $ref: "#/$defs/contour" }, "Shadows, glows, satin: coverage contour (default linear)."),
       antiAlias: { type: "boolean", description: "Shadows, glows, satin: smooth the contour (default false; satin true)." },
       noise: { type: "number", minimum: 0, maximum: 1, description: "Shadows, glows: speckle 0..1 (default 0)." },
       knocksOut: { type: "boolean", description: "drop-shadow: the layer hides the shadow beneath its see-through fill (default true)." },
@@ -12649,14 +12649,14 @@ function settingsSchema(forUpdate) {
       direction: { type: "string", enum: ["up", "down"], description: "bevel-emboss: raised (up, default) or sunk (down)." },
       soften: { type: "number", minimum: 0, maximum: 16, description: "bevel-emboss: blur of the height in px (default 0)." },
       altitude: { type: "number", minimum: 0, maximum: 90, description: "bevel-emboss: light altitude in degrees (default 30)." },
-      glossContour: opt({ $ref: "#/$defs/contour" }, "bevel-emboss: gloss contour over the shading (default linear)."),
+      glossContour: opt2({ $ref: "#/$defs/contour" }, "bevel-emboss: gloss contour over the shading (default linear)."),
       highlightColor: { $ref: "#/$defs/color", description: "bevel-emboss: highlight colour (default #ffffff)." },
       highlightBlend: { type: "string", enum: BLEND_IDS, description: "bevel-emboss: highlight mode (default screen)." },
       highlightOpacity: { type: "number", minimum: 0, maximum: 1, description: "bevel-emboss: highlight opacity (default 0.75)." },
       shadowColor: { $ref: "#/$defs/color", description: "bevel-emboss: shadow colour (default #000000)." },
       shadowBlend: { type: "string", enum: BLEND_IDS, description: "bevel-emboss: shadow mode (default multiply)." },
       shadowOpacity: { type: "number", minimum: 0, maximum: 1, description: "bevel-emboss: shadow opacity (default 0.75)." },
-      contourElement: opt(
+      contourElement: opt2(
         {
           type: "object",
           properties: {
@@ -12669,7 +12669,7 @@ function settingsSchema(forUpdate) {
         },
         "bevel-emboss: the Contour element, shaping the bevel's height profile (default off)."
       ),
-      texture: opt(
+      texture: opt2(
         {
           type: "object",
           properties: {
@@ -13686,8 +13686,8 @@ function applyRegionMosaic(imageData, regions, blockSize = 12) {
         const count = bw * bh;
         for (let py = by; py < by + bh; py++) {
           const rowOffset = py * width;
-          for (let px = bx; px < bx + bw; px++) {
-            const idx = (rowOffset + px) * 4;
+          for (let px2 = bx; px2 < bx + bw; px2++) {
+            const idx = (rowOffset + px2) * 4;
             rSum += data[idx];
             gSum += data[idx + 1];
             bSum += data[idx + 2];
@@ -13700,8 +13700,8 @@ function applyRegionMosaic(imageData, regions, blockSize = 12) {
         const aAvg = Math.round(aSum / count);
         for (let py = by; py < by + bh; py++) {
           const rowOffset = py * width;
-          for (let px = bx; px < bx + bw; px++) {
-            const idx = (rowOffset + px) * 4;
+          for (let px2 = bx; px2 < bx + bw; px2++) {
+            const idx = (rowOffset + px2) * 4;
             data[idx] = rAvg;
             data[idx + 1] = gAvg;
             data[idx + 2] = bAvg;
@@ -13919,6 +13919,179 @@ async function runLayerMenuAction(controller, action) {
   }
 }
 
+// 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." };
+  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,
+    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 pct2 = (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 },
+    pct2("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" ? pct2("spread", "Spread", e.spread) : pct2("choke", "Choke", e.choke),
+        px("size", "Size", e.size),
+        pct2("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" ? pct2("spread", "Spread", e.spread) : pct2("choke", "Choke", e.choke),
+        px("size", "Size", e.size),
+        pct2("range", "Range", e.range, 0.01, 1),
+        pct2("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"]) },
+        pct2("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 },
+        pct2("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 },
+        pct2("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) },
+        pct2("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) };
+}
+
 // src/image-editor/psd/ui.ts
 var PSD_FILE_ACCEPT = ".psd,.psb,image/vnd.adobe.photoshop,application/x-photoshop";
 function blobBytes(file) {
@@ -13991,6 +14164,7 @@ export {
   LATEST_PROCESS_VERSION,
   LAYERED_SCHEMA_VERSION,
   LAYER_EFFECT_KINDS,
+  LAYER_EFFECT_MENU,
   LEGACY_PROCESS_VERSION,
   LUMA_709,
   LayerCompositor,
@@ -14152,6 +14326,7 @@ export {
   duplicateLayer,
   edgeWidth,
   effectColorHex,
+  effectControlChange,
   effectReach,
   effectsFingerprint,
   effectsMargin,
@@ -14231,9 +14406,12 @@ export {
   isSpatialFilter,
   kelvinToTemperature,
   layerBadge,
+  layerEffectControls,
   layerEffectFields,
   layerEffectLabel,
+  layerEffectsBadge,
   layerEffectsOf,
+  layerEffectsPanel,
   layerLabel,
   layerMaskCoverage,
   layerMaskFromSelection,