@beeintel/batch-image 0.0.0-stage → 1.0.0

package/dist/chunks/ImageEffectsToolPanel-CsDIBpT6.js

@@ -0,0 +1,966 @@
+import { defineComponent as oe, ref as F, computed as L, watch as ke, onMounted as ie, onBeforeUnmount as xe, openBlock as o, createElementBlock as r, createElementVNode as f, toDisplayString as _, unref as l, normalizeStyle as Z, withModifiers as j, Fragment as H, renderList as z, createCommentVNode as $, useId as we, createVNode as Y, normalizeClass as W, createBlock as Q, nextTick as _e, withCtx as me, resolveDynamicComponent as Ve, Teleport as Ae, withDirectives as De, createTextVNode as Oe, withKeys as ae, vShow as Ke } from "vue";
+import { F as re, aA as Ee, _ as se, aj as Ce, S as Re, a4 as He, aW as Be, aX as Fe, aY as Ge, aZ as ze, a_ as ve, a$ as Ne, G as Xe, R as Ye, b0 as Ue, b1 as pe, b2 as qe, b3 as je, b4 as J, b5 as We, b6 as Ze } from "./entry-CboOSe2r.js";
+import { u as Je, a as Qe, c as be, _ as et } from "./PluginActionFooter.vue_vue_type_script_setup_true_lang-BGe419qz.js";
+import { S as tt } from "./search-BwsDnulU.js";
+const at = ["light", "material", "art", "color", "distortion"], nt = {
+  light_leak: "light",
+  motion_blur: "light",
+  textured_glass: "material",
+  holo_sticker: "material",
+  halftone: "art",
+  engraving: "art",
+  xerox_noise: "art",
+  ascii_art: "art",
+  duotone: "color",
+  posterize: "color",
+  lo_fi: "color",
+  glitch_art: "distortion",
+  glitch_blur: "distortion",
+  sparkle: "light",
+  glow: "light",
+  lens_flare: "light",
+  tilt_shift: "light",
+  paper_texture: "material",
+  glass_tiles: "material",
+  watercolor: "art",
+  dither: "art",
+  contour_lines: "art",
+  film_stock: "color",
+  gradient_map: "color",
+  tritone: "color",
+  kaleidoscope: "distortion",
+  mirror_collage: "distortion",
+  wave_distortion: "distortion"
+};
+function U(a) {
+  return nt[a];
+}
+function le(a, D, d) {
+  const s = d * Math.PI / 180;
+  return 50 + 100 * ((a.x - D.width / 2) * Math.sin(s) + (a.y - D.height / 2) * Math.cos(s)) / Math.min(D.width, D.height);
+}
+function lt(a, D, d, s) {
+  const g = [
+    { x: 0, y: 0 },
+    { x: a.width, y: 0 },
+    { x: a.width, y: a.height },
+    { x: 0, y: a.height }
+  ], O = (x) => le(x, a, D);
+  function m(x, M, y) {
+    const C = [];
+    for (const [p, w] of x.entries()) {
+      const I = x[(p + x.length - 1) % x.length];
+      if (!I) continue;
+      const E = O(I) - M, P = O(w) - M, S = y ? E >= 0 : E <= 0, B = y ? P >= 0 : P <= 0;
+      if (S !== B) {
+        const R = E / (E - P);
+        C.push({ x: I.x + (w.x - I.x) * R, y: I.y + (w.y - I.y) * R });
+      }
+      B && C.push(w);
+    }
+    return C;
+  }
+  function k(x, M = 0.5) {
+    const y = [];
+    for (const [w, I] of g.entries()) {
+      const E = g[(w + 1) % g.length];
+      if (!E) continue;
+      const P = O(I) - x, S = O(E) - x;
+      if (Math.abs(P) < 1e-8 && y.push(I), P * S < 0) {
+        const B = P / (P - S);
+        y.push({ x: I.x + (E.x - I.x) * B, y: I.y + (E.y - I.y) * B });
+      }
+    }
+    const C = y[0], p = y.find((w) => C && Math.hypot(w.x - C.x, w.y - C.y) > 1e-6);
+    return C && p ? {
+      start: C,
+      end: p,
+      handle: {
+        x: C.x + (p.x - C.x) * M,
+        y: C.y + (p.y - C.y) * M
+      }
+    } : void 0;
+  }
+  const K = d - s / 2, v = d + s / 2;
+  return {
+    band: m(m(g, K, !0), v, !1),
+    before: m(g, K, !1),
+    after: m(g, v, !0),
+    center: k(d),
+    edges: [{ side: -1, line: k(K, 0.25) }, { side: 1, line: k(v, 0.75) }]
+  };
+}
+function ne(a) {
+  return a.map((D) => `${D.x},${D.y}`).join(" ");
+}
+const ot = { class: "direct-controls" }, it = { class: "direct-caption" }, rt = ["data-direct-preview"], st = ["src"], ct = ["viewBox"], ut = ["points"], dt = ["points"], ft = ["points", "tabindex", "aria-disabled", "aria-label", "aria-valuenow"], gt = ["x1", "y1", "x2", "y2"], yt = ["cx", "cy", "data-width-side", "tabindex", "aria-disabled", "aria-label", "aria-valuenow", "onPointerdown"], ht = ["x1", "y1", "x2", "y2"], mt = ["cx", "cy", "tabindex", "aria-disabled", "aria-label", "aria-valuenow"], vt = ["tabindex", "aria-disabled", "aria-label", "aria-valuenow", "aria-valuetext"], pt = ["aria-label"], bt = ["data-tilt-direction", "aria-pressed", "disabled", "onClick"], kt = /* @__PURE__ */ oe({
+  __name: "ImageEffectsDirectControl",
+  props: {
+    effectId: {},
+    center: {},
+    width: {},
+    angle: {},
+    lightX: {},
+    lightY: {},
+    readonly: { type: Boolean },
+    imageSource: {},
+    imageWidth: {},
+    imageHeight: {}
+  },
+  emits: ["change"],
+  setup(a, { emit: D }) {
+    const { ui: d } = re(), s = a, g = D, O = F(), m = F({ width: 320, height: 180 }), k = F(16 / 9), K = L(
+      () => s.imageSource && s.imageWidth && s.imageHeight ? s.imageWidth / s.imageHeight : k.value
+    ), v = L(() => lt(m.value, s.angle, s.center, s.width)), x = L(
+      () => ["ns-resize", "nwse-resize", "ew-resize", "nesw-resize"][(Math.round(s.angle / 45) % 4 + 4) % 4]
+    ), M = L(
+      () => s.imageSource ?? Ee(`tool-cards/magic-v3/${s.effectId}.webp`)
+    );
+    let y, C;
+    const p = (n) => Math.round(Math.min(100, Math.max(0, n)));
+    function w() {
+      const n = O.value?.getBoundingClientRect();
+      n && n.width > 0 && n.height > 0 && (m.value = { width: n.width, height: n.height });
+    }
+    function I(n) {
+      n.target instanceof HTMLImageElement && n.target.naturalHeight && (k.value = n.target.naturalWidth / n.target.naturalHeight), w();
+    }
+    function E(n) {
+      const h = O.value?.getBoundingClientRect();
+      return { x: n.clientX - (h?.left ?? 0), y: n.clientY - (h?.top ?? 0) };
+    }
+    function P() {
+      const n = y;
+      y = void 0, n?.target.hasPointerCapture?.(n.pointerId) && n.target.releasePointerCapture(n.pointerId);
+    }
+    function S(n, h, c = 1) {
+      if (s.readonly || y && y.pointerId !== n.pointerId || n.button !== void 0 && n.button !== 0 || !(n.currentTarget instanceof Element))
+        return;
+      P(), w();
+      const T = { pointerId: n.pointerId, target: n.currentTarget, start: E(n) };
+      h === "center" ? y = { ...T, kind: h, value: s.center } : h === "width" ? y = { ...T, kind: h, side: c, value: s.width } : y = { ...T, kind: h, x: s.lightX, y: s.lightY }, n.preventDefault(), n.currentTarget.setPointerCapture?.(n.pointerId);
+    }
+    function B(n) {
+      if (!y || n.pointerId !== y.pointerId || s.readonly) return;
+      const h = E(n);
+      if (y.kind === "light")
+        g("change", {
+          lightX: p(y.x + 100 * (h.x - y.start.x) / m.value.width),
+          lightY: p(y.y + 100 * (h.y - y.start.y) / m.value.height)
+        });
+      else {
+        const c = le(h, m.value, s.angle) - le(y.start, m.value, s.angle);
+        y.kind === "center" ? g("change", { center: p(y.value + c) }) : g("change", { width: p(y.value + y.side * c * 2) });
+      }
+    }
+    function R(n) {
+      y?.pointerId === n.pointerId && P();
+    }
+    function b(n) {
+      if (s.readonly) return;
+      const h = s.angle * Math.PI / 180, c = {
+        ArrowLeft: -Math.sin(h),
+        ArrowRight: Math.sin(h),
+        ArrowUp: -Math.cos(h),
+        ArrowDown: Math.cos(h)
+      };
+      let T = s.center;
+      if (n.key === "Home") T = 0;
+      else if (n.key === "End") T = 100;
+      else if (n.key in c)
+        T += (c[n.key] ?? 0) * (n.shiftKey ? 10 : 1);
+      else return;
+      n.preventDefault(), g("change", { center: p(T) });
+    }
+    function V(n) {
+      if (s.readonly) return;
+      const h = n.shiftKey ? 10 : 1;
+      let c = s.width;
+      if (n.key === "Home") c = 0;
+      else if (n.key === "End") c = 100;
+      else if (n.key === "ArrowLeft" || n.key === "ArrowDown") c -= h;
+      else if (n.key === "ArrowRight" || n.key === "ArrowUp") c += h;
+      else return;
+      n.preventDefault(), g("change", { width: p(c) });
+    }
+    function A(n) {
+      if (s.readonly) return;
+      const h = n.shiftKey ? 10 : 1;
+      let c = s.lightX, T = s.lightY;
+      if (n.key === "ArrowLeft") c -= h;
+      else if (n.key === "ArrowRight") c += h;
+      else if (n.key === "ArrowUp") T -= h;
+      else if (n.key === "ArrowDown") T += h;
+      else if (n.key === "Home") c = T = 0;
+      else if (n.key === "End") c = T = 100;
+      else return;
+      n.preventDefault(), g("change", { lightX: p(c), lightY: p(T) });
+    }
+    return ke(() => [s.effectId, s.readonly, s.imageSource, s.angle], P), ie(() => {
+      w(), typeof ResizeObserver < "u" && O.value && (C = new ResizeObserver(w), C.observe(O.value)), window.addEventListener("pointermove", B), window.addEventListener("pointerup", R), window.addEventListener("pointercancel", R), window.addEventListener("blur", P);
+    }), xe(() => {
+      P(), C?.disconnect(), window.removeEventListener("pointermove", B), window.removeEventListener("pointerup", R), window.removeEventListener("pointercancel", R), window.removeEventListener("blur", P);
+    }), (n, h) => (o(), r("div", ot, [
+      f("p", it, _(l(d)(`tools.image_effects.direct.${a.imageSource ? "sourceGuide" : "referenceGuide"}`)), 1),
+      f("div", {
+        ref_key: "preview",
+        ref: O,
+        class: "magic-direct-preview",
+        "data-direct-preview": a.effectId,
+        style: Z({ aspectRatio: K.value }),
+        onLostpointercapture: R
+      }, [
+        f("img", {
+          src: M.value,
+          alt: "",
+          onLoad: I
+        }, null, 40, st),
+        a.effectId === "tilt_shift" ? (o(), r("svg", {
+          key: 0,
+          class: "tilt-overlay",
+          viewBox: `0 0 ${m.value.width} ${m.value.height}`,
+          preserveAspectRatio: "none"
+        }, [
+          f("polygon", {
+            points: l(ne)(v.value.before),
+            class: "tilt-outside"
+          }, null, 8, ut),
+          f("polygon", {
+            points: l(ne)(v.value.after),
+            class: "tilt-outside"
+          }, null, 8, dt),
+          f("polygon", {
+            points: l(ne)(v.value.band),
+            class: "tilt-shift-band",
+            "data-direct-control": "tilt-shift-band",
+            role: "slider",
+            tabindex: a.readonly ? -1 : 0,
+            "aria-disabled": a.readonly,
+            "aria-label": l(d)("tools.image_effects.direct.focusBand"),
+            "aria-valuemin": "0",
+            "aria-valuemax": "100",
+            "aria-valuenow": a.center,
+            onPointerdown: h[0] || (h[0] = j((c) => S(c, "center"), ["stop"])),
+            onKeydown: b
+          }, null, 40, ft),
+          (o(!0), r(H, null, z(v.value.edges, (c) => (o(), r(H, {
+            key: c.side
+          }, [
+            c.line ? (o(), r("line", {
+              key: 0,
+              x1: c.line.start.x,
+              y1: c.line.start.y,
+              x2: c.line.end.x,
+              y2: c.line.end.y,
+              class: "tilt-edge"
+            }, null, 8, gt)) : $("", !0),
+            c.line ? (o(), r("circle", {
+              key: 1,
+              cx: c.line.handle.x,
+              cy: c.line.handle.y,
+              r: "7",
+              class: "tilt-width-handle",
+              style: Z({ cursor: x.value }),
+              "data-width-side": c.side,
+              "data-direct-control": "tilt-width",
+              role: "slider",
+              tabindex: a.readonly ? -1 : 0,
+              "aria-disabled": a.readonly,
+              "aria-label": l(d)("tools.image_effects.field.width"),
+              "aria-valuemin": "0",
+              "aria-valuemax": "100",
+              "aria-valuenow": a.width,
+              onPointerdown: j((T) => S(T, "width", c.side), ["stop"]),
+              onKeydown: V
+            }, null, 44, yt)) : $("", !0)
+          ], 64))), 128)),
+          v.value.center ? (o(), r("line", {
+            key: 0,
+            x1: v.value.center.start.x,
+            y1: v.value.center.start.y,
+            x2: v.value.center.end.x,
+            y2: v.value.center.end.y,
+            class: "tilt-center-line"
+          }, null, 8, ht)) : $("", !0),
+          v.value.center ? (o(), r("circle", {
+            key: 1,
+            cx: v.value.center.handle.x,
+            cy: v.value.center.handle.y,
+            r: "8",
+            class: "tilt-center-handle",
+            "data-direct-control": "tilt-center",
+            role: "slider",
+            tabindex: a.readonly ? -1 : 0,
+            "aria-disabled": a.readonly,
+            "aria-label": l(d)("tools.image_effects.field.center"),
+            "aria-valuemin": "0",
+            "aria-valuemax": "100",
+            "aria-valuenow": a.center,
+            onPointerdown: h[1] || (h[1] = j((c) => S(c, "center"), ["stop"])),
+            onKeydown: b
+          }, null, 40, mt)) : $("", !0)
+        ], 8, ct)) : (o(), r("div", {
+          key: 1,
+          class: "lens-flare-point",
+          "data-direct-control": "lens-flare-point",
+          role: "slider",
+          tabindex: a.readonly ? -1 : 0,
+          "aria-disabled": a.readonly,
+          "aria-label": l(d)("tools.image_effects.direct.lightPoint"),
+          "aria-valuemin": "0",
+          "aria-valuemax": "100",
+          "aria-valuenow": a.lightX,
+          "aria-valuetext": `${a.lightX}%, ${a.lightY}%`,
+          style: Z({ left: `${a.lightX}%`, top: `${a.lightY}%` }),
+          onPointerdown: h[2] || (h[2] = j((c) => S(c, "light"), ["stop"])),
+          onKeydown: A
+        }, null, 44, vt))
+      ], 44, rt),
+      a.effectId === "tilt_shift" ? (o(), r("div", {
+        key: 0,
+        class: "tilt-shift-direction",
+        role: "group",
+        "aria-label": l(d)("tools.image_effects.direct.rotation")
+      }, [
+        (o(), r(H, null, z([
+          { id: "horizontal", angle: 0 },
+          { id: "diagonal", angle: 45 },
+          { id: "vertical", angle: 90 }
+        ], (c) => f("button", {
+          key: c.id,
+          "data-tilt-direction": c.id,
+          type: "button",
+          "aria-pressed": a.angle === c.angle,
+          disabled: a.readonly,
+          onClick: (T) => g("change", { angle: c.angle })
+        }, _(l(d)(`tools.image_effects.direct.${c.id}`)), 9, bt)), 64))
+      ], 8, pt)) : $("", !0)
+    ]));
+  }
+}), xt = /* @__PURE__ */ se(kt, [["__scopeId", "data-v-6fffb6d4"]]), wt = ["for"], _t = { class: "magic-picker-input" }, Et = ["id", "value", "placeholder", "aria-expanded", "aria-controls", "aria-activedescendant"], Ct = ["aria-label"], It = ["aria-label", "aria-expanded"], $t = ["id", "aria-label"], Pt = ["id", "data-category", "aria-selected", "onClick"], Lt = /* @__PURE__ */ oe({
+  __name: "ImageEffectsGalleryPicker",
+  props: {
+    modelValue: {},
+    counts: {},
+    delegateEscape: { type: Boolean }
+  },
+  emits: ["update:modelValue"],
+  setup(a, { expose: D, emit: d }) {
+    const { ui: s } = re(), g = a, O = d, m = F(), k = F(), K = F(), v = F(!1), x = F(-1), M = we(), y = ["all", ...at], C = L(
+      () => g.modelValue.kind === "query" ? g.modelValue.text : s(`tools.image_effects.category.${g.modelValue.id}`)
+    );
+    function p() {
+      v.value = !1, x.value = -1;
+    }
+    function w() {
+      x.value = -1, v.value = !0;
+    }
+    function I() {
+      w(), k.value?.select();
+    }
+    async function E(b) {
+      O("update:modelValue", { kind: "category", id: b }), await _e(), k.value?.focus(), k.value?.select(), p();
+    }
+    function P(b) {
+      if (!(b.target instanceof HTMLInputElement)) return;
+      const V = b.target.value;
+      O("update:modelValue", { kind: "query", text: V }), w();
+    }
+    function S(b) {
+      if (!(b.isComposing || b.keyCode === 229) && !(b.target !== k.value && b.key !== "Escape"))
+        if (b.key === "Escape" && v.value && !g.delegateEscape)
+          b.preventDefault(), b.stopPropagation(), p();
+        else if (b.key === "ArrowDown" || b.key === "ArrowUp")
+          b.preventDefault(), v.value = !0, x.value = b.key === "ArrowDown" ? (x.value + 1) % y.length : x.value <= 0 ? y.length - 1 : x.value - 1;
+        else if (b.key === "Enter" && v.value) {
+          b.preventDefault();
+          const V = y[x.value];
+          V !== void 0 ? E(V) : p();
+        } else b.key === "Tab" && p();
+    }
+    function B(b) {
+      (!(b.relatedTarget instanceof Node) || !m.value?.contains(b.relatedTarget)) && p();
+    }
+    function R(b) {
+      (!(b.target instanceof Node) || !m.value?.contains(b.target)) && p();
+    }
+    return D({
+      focusControl: () => K.value?.focus({ preventScroll: !0 }),
+      hasOverlay: () => v.value,
+      dismissOverlay() {
+        return v.value ? (p(), !0) : !1;
+      }
+    }), ie(() => document.addEventListener("pointerdown", R)), xe(() => document.removeEventListener("pointerdown", R)), (b, V) => (o(), r("div", {
+      ref_key: "root",
+      ref: m,
+      class: "magic-gallery-picker",
+      onFocusout: B,
+      onKeydown: S
+    }, [
+      f("label", {
+        class: "visually-hidden",
+        for: `${l(M)}-input`
+      }, _(l(s)("tools.image_effects.gallery.filter")), 9, wt),
+      f("div", _t, [
+        Y(l(tt), {
+          class: "magic-picker-search",
+          size: 15,
+          "aria-hidden": "true"
+        }),
+        f("input", {
+          id: `${l(M)}-input`,
+          ref_key: "inputElement",
+          ref: k,
+          role: "combobox",
+          value: C.value,
+          autocomplete: "off",
+          placeholder: l(s)("tools.image_effects.gallery.searchPlaceholder"),
+          "aria-autocomplete": "list",
+          "aria-haspopup": "listbox",
+          "aria-expanded": v.value,
+          "aria-controls": `${l(M)}-list`,
+          "aria-activedescendant": v.value && x.value >= 0 ? `${l(M)}-option-${x.value}` : void 0,
+          onFocus: I,
+          onInput: P
+        }, null, 40, Et),
+        a.modelValue.kind === "query" ? (o(), r("button", {
+          key: 0,
+          type: "button",
+          "aria-label": l(s)("tools.image_effects.gallery.clear"),
+          onClick: V[0] || (V[0] = (A) => E("all"))
+        }, [
+          Y(l(Ce), {
+            size: 14,
+            "aria-hidden": "true"
+          })
+        ], 8, Ct)) : $("", !0),
+        f("button", {
+          ref_key: "categoryButton",
+          ref: K,
+          type: "button",
+          "aria-label": l(s)("tools.image_effects.gallery.category"),
+          "aria-expanded": v.value,
+          onClick: V[1] || (V[1] = (A) => v.value ? p() : w())
+        }, [
+          Y(l(Re), {
+            size: 15,
+            "aria-hidden": "true"
+          })
+        ], 8, It)
+      ]),
+      v.value ? (o(), r("div", {
+        key: 0,
+        id: `${l(M)}-list`,
+        role: "listbox",
+        "aria-label": l(s)("tools.image_effects.gallery.category"),
+        class: "magic-picker-list"
+      }, [
+        (o(), r(H, null, z(y, (A, n) => f("button", {
+          id: `${l(M)}-option-${n}`,
+          key: A,
+          type: "button",
+          role: "option",
+          "data-category": A,
+          "aria-selected": a.modelValue.kind === "category" && a.modelValue.id === A,
+          class: W({ active: x.value === n }),
+          tabindex: "-1",
+          onPointerdown: V[2] || (V[2] = j(() => {
+          }, ["prevent"])),
+          onClick: (h) => E(A)
+        }, [
+          f("span", null, _(l(s)(`tools.image_effects.category.${A}`)), 1),
+          f("small", null, _(a.counts[A]), 1),
+          a.modelValue.kind === "category" && a.modelValue.id === A ? (o(), Q(l(He), {
+            key: 0,
+            size: 13,
+            "aria-hidden": "true"
+          })) : $("", !0)
+        ], 42, Pt)), 64))
+      ], 8, $t)) : $("", !0)
+    ], 544));
+  }
+}), Tt = /* @__PURE__ */ se(Lt, [["__scopeId", "data-v-17c73189"]]), Mt = { class: "effects-panel" }, St = ["data-view", "aria-label"], Vt = {
+  key: 0,
+  class: "magic-gallery-grid"
+}, At = ["disabled", "aria-pressed", "onClick"], Dt = ["src"], Ot = {
+  key: 1,
+  class: "magic-no-results",
+  role: "status"
+}, Kt = ["aria-label"], Rt = {
+  key: 0,
+  class: "magic-parameter-heading"
+}, Ht = ["disabled", "aria-label", "title"], Bt = ["aria-label", "title"], Ft = { class: "magic-parameter-body" }, Gt = ["aria-label"], zt = { class: "direct-control-label" }, Nt = ["data-strength-preset", "disabled", "onClick"], Xt = ["disabled"], Yt = {
+  key: 0,
+  class: "effect-field",
+  "data-field": "glassType"
+}, Ut = ["value", "aria-label"], qt = ["value"], jt = ["data-field"], Wt = ["aria-label"], Zt = ["aria-pressed", "onClick"], Jt = ["data-field"], Qt = ["aria-label", "value", "onInput"], ea = ["aria-label"], ta = ["name", "value", "checked", "onChange", "onClick", "onKeydown"], aa = ["value", "aria-label", "onChange"], na = ["value"], la = ["checked", "aria-label", "onChange"], oa = ["aria-label", "value", "onChange"], ia = { value: "transparent" }, ra = { value: "color" }, sa = ["aria-label", "value", "onInput"], ca = ["aria-label", "min", "max", "step", "value", "onInput"], ua = ["aria-label", "min", "max", "step", "value", "onInput"], da = {
+  key: 0,
+  class: "field-unit"
+}, fa = ["aria-label", "value"], ga = {
+  key: 2,
+  role: "alert",
+  class: "hint"
+}, ya = { class: "effect-note" }, ha = /* @__PURE__ */ oe({
+  __name: "ImageEffectsToolPanel",
+  props: {
+    context: {}
+  },
+  setup(a, { expose: D }) {
+    const { ui: d } = re(), s = qe(d), g = a, O = we(), m = Je(() => g.context), k = L(() => m.value.imageEffects.effectId), K = L(
+      () => Be(g.context.entryId) && g.context.entryId === k.value ? g.context.entryId : void 0
+    ), v = L(() => Fe(m.value.imageEffects)), x = L(() => Ge(m.value.imageEffects)), M = L(() => x.value.params), y = Qe(() => g.context, "imageEffects"), C = je(), p = L(
+      () => C.filter((t) => g.context.entryAllowed?.(t.entryId) !== !1)
+    ), w = F({
+      kind: "category",
+      id: "all"
+    }), I = F(), E = F(), P = F();
+    let S;
+    function B() {
+      const t = P.value?.contains(document.activeElement);
+      if (!g.context.presentation?.setOpen(!1)) return !1;
+      if (t) {
+        const u = S?.isConnected && !S.matches(":disabled") ? S : I.value?.querySelector("button.selected:not(:disabled)");
+        u ? u.focus({ preventScroll: !0 }) : E.value?.focusControl();
+      }
+      return !0;
+    }
+    D({
+      blocksShortcuts: () => !!E.value?.hasOverlay?.(),
+      hasOverlay: () => !!E.value?.hasOverlay?.() || !!g.context.presentation?.open,
+      dismissOverlay: () => E.value?.dismissOverlay?.() || (g.context.presentation?.open ? B() : !1)
+    });
+    const R = L(() => {
+      const t = w.value;
+      if (t.kind === "category")
+        return p.value.filter(
+          (e) => t.id === "all" || U(e.entryId) === t.id
+        );
+      const u = t.text.trim().toLocaleLowerCase();
+      return p.value.filter(
+        (e) => `${d(e.titleKey)} ${e.entryId}`.toLocaleLowerCase().includes(u)
+      );
+    }), b = {
+      all: p.value.length,
+      light: p.value.filter((t) => U(t.entryId) === "light").length,
+      material: p.value.filter((t) => U(t.entryId) === "material").length,
+      art: p.value.filter((t) => U(t.entryId) === "art").length,
+      color: p.value.filter((t) => U(t.entryId) === "color").length,
+      distortion: p.value.filter((t) => U(t.entryId) === "distortion").length
+    };
+    ke(
+      () => g.context.entryId,
+      () => {
+        V();
+      }
+    ), ie(V);
+    async function V() {
+      await _e(), I.value?.querySelector("button.selected")?.scrollIntoView?.({ block: "nearest", inline: "nearest" });
+    }
+    const A = L(
+      () => ze(m.value.imageEffects).map((t) => ({
+        ...t,
+        value: Pe(t.key)
+      }))
+    ), n = F(), h = L(() => A.value.some((t) => t.kind === "material")), c = L(
+      () => k.value === "duotone" && A.value.some((t) => t.kind === "palette") ? A.value.filter((t) => t.key === "shadowColor" || t.key === "highlightColor") : []
+    ), T = L(
+      () => A.value.filter(
+        (t) => !c.value.includes(t) && !(h.value && t.key === "edgeColor") && !(v.value !== null && t.key === "pattern")
+      )
+    ), ce = L(
+      () => String(m.value.imageEffects.params.edgeColor ?? ve)
+    );
+    function Ie() {
+      const t = n.value;
+      if (g.context.readonly || !t) return;
+      const u = J(m.value.imageEffects, "edgeMaterial", "custom");
+      m.value.imageEffects.params.edgeMaterial !== "custom" && y.value(u), t.value = String(u.params.edgeColor ?? ve), typeof t.showPicker == "function" ? t.showPicker() : t.click();
+    }
+    function $e(t) {
+      if (g.context.readonly || !(t.target instanceof HTMLInputElement)) return;
+      const u = J(m.value.imageEffects, "edgeMaterial", "custom");
+      y.value(J(u, "edgeColor", t.target.value));
+    }
+    function N(t) {
+      const u = k.value === "dither" && t === "pattern" ? "ditherPattern" : k.value === "film_stock" && t === "preset" ? "filmPreset" : t;
+      return d(`tools.image_effects.field.${u}`);
+    }
+    function Pe(t) {
+      const u = m.value.imageEffects.params[t];
+      return typeof u == "number" || typeof u == "string" || typeof u == "boolean" ? u : void 0;
+    }
+    function ue(t) {
+      const u = We.find((e) => e.id === t);
+      return u ? `linear-gradient(90deg, ${u.colors.join(", ")})` : void 0;
+    }
+    const ee = L(() => {
+      try {
+        return {
+          snapshot: Ne(m.value.imageEffects),
+          error: ""
+        };
+      } catch (t) {
+        return {
+          snapshot: void 0,
+          error: s(
+            t instanceof Error ? t.message : String(t),
+            "invalidParams"
+          )
+        };
+      }
+    });
+    function Le(t, u) {
+      g.context.selectEntry?.(t) === !0 && u.currentTarget instanceof HTMLElement && (S = u.currentTarget);
+    }
+    function X(t, u) {
+      te({ [t]: u });
+    }
+    function te(t) {
+      if (g.context.readonly) return;
+      const u = m.value.imageEffects;
+      let e = u;
+      for (const [i, G] of Object.entries(t))
+        e.params[i] !== G && (e = J(e, i, G));
+      e !== u && y.value(e);
+    }
+    function Te(t) {
+      if (g.context.readonly || !(t.target instanceof HTMLSelectElement)) return;
+      const u = t.target.value, e = pe.find((i) => i === u);
+      e && y.value(Ze(m.value.imageEffects, e));
+    }
+    function de() {
+      g.context.readonly || g.context.resetDraft({
+        imageEffects: x.value
+      });
+    }
+    const Me = {
+      sparkle: { subtle: 25, balanced: 55, bold: 85 },
+      glow: { subtle: 25, balanced: 55, bold: 85 },
+      lens_flare: { subtle: 20, balanced: 50, bold: 80 },
+      tilt_shift: { subtle: 25, balanced: 55, bold: 85 }
+    };
+    function fe(t) {
+      return t === "lens_flare" || t === "tilt_shift";
+    }
+    function ge(t) {
+      if (t === "sparkle" || t === "glow" || fe(t)) return Me[t];
+    }
+    const ye = L(() => {
+      const t = ge(k.value);
+      return t ? ["subtle", "balanced", "bold"].map((u) => ({ id: u, value: t[u] ?? 0 })) : [];
+    }), he = L(
+      () => fe(k.value) ? k.value : void 0
+    );
+    function q(t, u = 0) {
+      const e = m.value.imageEffects.params[t];
+      return typeof e == "number" && Number.isFinite(e) ? e : u;
+    }
+    function Se(t) {
+      if (g.context.readonly) return;
+      const u = ge(k.value);
+      if (!u) return;
+      const e = u[t];
+      if (e === void 0) return;
+      const i = { strength: e };
+      k.value === "glow" && (i.radius = t === "subtle" ? 8 : t === "balanced" ? 16 : 24), k.value === "lens_flare" && (i.size = t === "subtle" ? 30 : t === "balanced" ? 55 : 80), k.value === "tilt_shift" && (i.width = t === "subtle" ? 25 : t === "balanced" ? 45 : 70), te(i);
+    }
+    return (t, u) => (o(), Q(Xe, {
+      context: a.context,
+      layout: "contained",
+      changed: !!K.value && !a.context.presentation && l(be)(l(m).imageEffects.params, M.value),
+      onReset: de
+    }, {
+      default: me(() => [
+        f("div", Mt, [
+          Y(Tt, {
+            ref_key: "picker",
+            ref: E,
+            modelValue: w.value,
+            "onUpdate:modelValue": u[0] || (u[0] = (e) => w.value = e),
+            counts: b,
+            "delegate-escape": !!a.context.presentation
+          }, null, 8, ["modelValue", "delegate-escape"]),
+          f("div", {
+            ref_key: "gallery",
+            ref: I,
+            class: "magic-gallery",
+            "data-view": w.value.kind === "category" ? w.value.id : "query",
+            "aria-label": l(d)("tools.image_effects.effectLabel")
+          }, [
+            R.value.length ? (o(), r("div", Vt, [
+              (o(!0), r(H, null, z(R.value, (e) => (o(), r("button", {
+                key: e.entryId,
+                type: "button",
+                class: W({ selected: e.entryId === K.value }),
+                disabled: a.context.readonly,
+                "aria-pressed": e.entryId === K.value,
+                onClick: (i) => Le(e.entryId, i)
+              }, [
+                f("img", {
+                  src: l(Ee)(`tool-cards/magic-v3/${e.entryId}.webp`),
+                  alt: "",
+                  loading: "lazy"
+                }, null, 8, Dt),
+                f("span", null, _(l(d)(e.titleKey)), 1)
+              ], 10, At))), 128))
+            ])) : (o(), r("div", Ot, [
+              f("p", null, _(l(d)("tools.image_effects.gallery.noResults")), 1),
+              f("button", {
+                type: "button",
+                onClick: u[1] || (u[1] = (e) => w.value = { kind: "category", id: "all" })
+              }, _(l(d)("tools.image_effects.gallery.clear")), 1)
+            ]))
+          ], 8, St),
+          (o(), Q(Ve(a.context.presentation ? Ae : "div"), {
+            to: a.context.presentation?.target
+          }, {
+            default: me(() => [
+              K.value ? De((o(), r("section", {
+                key: 0,
+                ref_key: "parameterFrame",
+                ref: P,
+                class: W(["magic-parameters", { "magic-parameters-floating": !!a.context.presentation }]),
+                "aria-label": l(d)(`tools.image_effects.${k.value}.title`)
+              }, [
+                a.context.presentation ? (o(), r("header", Rt, [
+                  f("h2", null, _(l(d)(`tools.image_effects.${k.value}.title`)), 1),
+                  a.context.resetAllowed !== !1 ? (o(), r("button", {
+                    key: 0,
+                    type: "button",
+                    class: "magic-parameter-reset",
+                    disabled: a.context.readonly || !l(be)(l(m).imageEffects.params, M.value),
+                    "aria-label": l(d)("common.toolPanel_cc611e20"),
+                    title: l(d)("common.toolPanel_cc611e20"),
+                    onClick: de
+                  }, [
+                    Y(l(Ye), { size: 16 })
+                  ], 8, Ht)) : $("", !0),
+                  f("button", {
+                    type: "button",
+                    class: "magic-parameter-close",
+                    "aria-label": l(d)("common.toolPanel_08c744de"),
+                    title: l(d)("common.toolPanel_08c744de"),
+                    onClick: B
+                  }, [
+                    Y(l(Ce), { size: 18 })
+                  ], 8, Bt)
+                ])) : $("", !0),
+                f("div", Ft, [
+                  ye.value.length ? (o(), r("div", {
+                    key: 0,
+                    class: "strength-presets",
+                    role: "group",
+                    "aria-label": l(d)("tools.image_effects.strengthPresets")
+                  }, [
+                    f("span", zt, _(l(d)("tools.image_effects.strengthPresets")), 1),
+                    (o(!0), r(H, null, z(ye.value, (e) => (o(), r("button", {
+                      key: e.id,
+                      type: "button",
+                      "data-strength-preset": e.id,
+                      disabled: a.context.readonly,
+                      onClick: (i) => Se(e.id)
+                    }, _(l(d)(`tools.image_effects.strengthPreset.${e.id}`)), 9, Nt))), 128))
+                  ], 8, Gt)) : $("", !0),
+                  he.value ? (o(), Q(xt, {
+                    key: 1,
+                    "effect-id": he.value,
+                    center: q("center", 50),
+                    width: q("width", 40),
+                    angle: q("angle"),
+                    "light-x": q("lightX", 50),
+                    "light-y": q("lightY", 50),
+                    readonly: a.context.readonly,
+                    "image-source": a.context.view.currentImageSource?.url,
+                    "image-width": a.context.view.currentWidth,
+                    "image-height": a.context.view.currentHeight,
+                    onChange: te
+                  }, null, 8, ["effect-id", "center", "width", "angle", "light-x", "light-y", "readonly", "image-source", "image-width", "image-height"])) : $("", !0),
+                  f("fieldset", {
+                    class: "effect-fields",
+                    disabled: a.context.readonly
+                  }, [
+                    f("legend", null, [
+                      Oe(_(l(d)(`tools.image_effects.${k.value}.title`)) + " ", 1),
+                      f("small", null, "V" + _(l(m).imageEffects.effectVersion ?? l(Ue)(k.value)), 1)
+                    ]),
+                    v.value !== null ? (o(), r("label", Yt, [
+                      f("span", null, _(l(d)("tools.image_effects.field.glassType")), 1),
+                      f("select", {
+                        value: v.value,
+                        "aria-label": l(d)("tools.image_effects.field.glassType"),
+                        onChange: Te
+                      }, [
+                        (o(!0), r(H, null, z(l(pe), (e) => (o(), r("option", {
+                          key: e,
+                          value: e
+                        }, _(l(d)(`tools.image_effects.option.${e}`)), 9, qt))), 128))
+                      ], 40, Ut)
+                    ])) : $("", !0),
+                    (o(!0), r(H, null, z(T.value, (e) => (o(), r("div", {
+                      key: e.key,
+                      class: "effect-field",
+                      "data-field": e.key
+                    }, [
+                      f("span", null, _(N(e.key)), 1),
+                      e.kind === "palette" ? (o(), r("div", {
+                        key: 0,
+                        class: "palette-grid",
+                        role: "group",
+                        "aria-label": N(e.key)
+                      }, [
+                        (o(!0), r(H, null, z(e.options, (i) => (o(), r("button", {
+                          key: i,
+                          type: "button",
+                          "aria-pressed": e.value === i,
+                          class: W({ selected: e.value === i }),
+                          onClick: (G) => X(e.key, i)
+                        }, [
+                          ue(i) ? (o(), r("span", {
+                            key: 0,
+                            class: "palette-swatch",
+                            style: Z({ background: ue(i) }),
+                            "aria-hidden": "true"
+                          }, null, 4)) : $("", !0),
+                          f("span", null, _(l(d)(`tools.image_effects.palette.${i}`)), 1)
+                        ], 10, Zt))), 128)),
+                        (o(!0), r(H, null, z(c.value, (i) => (o(), r("label", {
+                          key: i.key,
+                          class: "palette-custom-color",
+                          "data-field": i.key
+                        }, [
+                          f("input", {
+                            type: "color",
+                            "aria-label": l(d)(`tools.image_effects.field.${i.key}`),
+                            value: String(i.value),
+                            onInput: (G) => X(i.key, G.target.value),
+                            onKeydown: u[2] || (u[2] = ae((G) => !a.context.presentation && G.stopPropagation(), ["esc"]))
+                          }, null, 40, Qt),
+                          f("span", null, _(l(d)(`tools.image_effects.field.${i.key}`)), 1)
+                        ], 8, Jt))), 128))
+                      ], 8, Wt)) : e.kind === "material" ? (o(), r("div", {
+                        key: 1,
+                        class: "material-options",
+                        role: "radiogroup",
+                        "aria-label": N(e.key)
+                      }, [
+                        (o(!0), r(H, null, z(e.options, (i) => (o(), r("label", {
+                          key: i,
+                          class: "material-option"
+                        }, [
+                          f("input", {
+                            type: "radio",
+                            name: l(O),
+                            value: i,
+                            checked: e.value === i,
+                            onChange: (G) => X(e.key, i),
+                            onClick: (G) => i === "custom" && Ie(),
+                            onKeydown: ae((G) => !a.context.presentation && i === "custom" && G.stopPropagation(), ["esc"])
+                          }, null, 40, ta),
+                          f("span", {
+                            class: W(["material-swatch", `material-swatch-${i}`]),
+                            "aria-hidden": "true"
+                          }, [
+                            i === "custom" ? (o(), r("span", {
+                              key: 0,
+                              class: "material-custom-center",
+                              style: Z({
+                                background: ce.value
+                              })
+                            }, null, 4)) : $("", !0)
+                          ], 2),
+                          f("span", null, _(l(d)(`tools.image_effects.option.${i}`)), 1)
+                        ]))), 128))
+                      ], 8, ea)) : e.kind === "select" ? (o(), r("select", {
+                        key: 2,
+                        value: typeof e.value == "boolean" ? void 0 : e.value ?? e.options?.[0],
+                        "aria-label": N(e.key),
+                        onChange: (i) => X(e.key, i.target.value)
+                      }, [
+                        (o(!0), r(H, null, z(e.options, (i) => (o(), r("option", {
+                          key: i,
+                          value: i
+                        }, _(l(d)(`tools.image_effects.option.${i}`)), 9, na))), 128))
+                      ], 40, aa)) : e.kind === "boolean" ? (o(), r("input", {
+                        key: 3,
+                        type: "checkbox",
+                        checked: e.value === !0,
+                        "aria-label": N(e.key),
+                        onChange: (i) => X(e.key, i.target.checked)
+                      }, null, 40, la)) : e.kind === "color" ? (o(), r(H, { key: 4 }, [
+                        e.key === "background" ? (o(), r("select", {
+                          key: 0,
+                          "aria-label": N(e.key),
+                          value: e.value === "transparent" ? "transparent" : "color",
+                          onChange: (i) => X(
+                            e.key,
+                            i.target.value === "transparent" ? "transparent" : "#ffffff"
+                          )
+                        }, [
+                          f("option", ia, _(l(d)("tools.image_effects.transparent")), 1),
+                          f("option", ra, _(l(d)("tools.image_effects.solidColor")), 1)
+                        ], 40, oa)) : $("", !0),
+                        e.value !== "transparent" ? (o(), r("input", {
+                          key: 1,
+                          type: "color",
+                          "aria-label": N(e.key),
+                          value: typeof e.value == "boolean" ? void 0 : e.value,
+                          onInput: (i) => X(e.key, i.target.value)
+                        }, null, 40, sa)) : $("", !0)
+                      ], 64)) : (o(), r(H, { key: 5 }, [
+                        f("input", {
+                          type: "range",
+                          "aria-label": N(e.key),
+                          min: e.min,
+                          max: e.max,
+                          step: e.step,
+                          value: typeof e.value == "boolean" ? void 0 : e.value,
+                          onInput: (i) => X(e.key, Number(i.target.value))
+                        }, null, 40, ca),
+                        f("input", {
+                          type: "number",
+                          "aria-label": N(e.key),
+                          min: e.min,
+                          max: e.max,
+                          step: e.step,
+                          value: typeof e.value == "boolean" ? void 0 : e.value,
+                          onInput: (i) => X(e.key, Number(i.target.value))
+                        }, null, 40, ua),
+                        e.unit ? (o(), r("span", da, _(e.unit), 1)) : $("", !0)
+                      ], 64))
+                    ], 8, jt))), 128)),
+                    h.value ? (o(), r("input", {
+                      key: 1,
+                      ref_key: "customEdgePicker",
+                      ref: n,
+                      type: "color",
+                      class: "material-color-picker",
+                      tabindex: "-1",
+                      "aria-label": l(d)("tools.image_effects.field.edgeColor"),
+                      value: ce.value,
+                      onInput: $e,
+                      onKeydown: u[3] || (u[3] = ae((e) => !a.context.presentation && e.stopPropagation(), ["esc"]))
+                    }, null, 40, fa)) : $("", !0)
+                  ], 8, Xt),
+                  ee.value.error ? (o(), r("p", ga, _(ee.value.error), 1)) : $("", !0),
+                  f("p", ya, _(l(d)("tools.image_effects.panelNote")), 1)
+                ]),
+                Y(et, {
+                  context: a.context,
+                  available: !0,
+                  ready: !!K.value && !!ee.value.snapshot
+                }, null, 8, ["context", "ready"])
+              ], 10, Kt)), [
+                [Ke, !a.context.presentation || a.context.presentation.open]
+              ]) : $("", !0)
+            ]),
+            _: 1
+          }, 8, ["to"]))
+        ])
+      ]),
+      _: 1
+    }, 8, ["context", "changed"]));
+  }
+}), ka = /* @__PURE__ */ se(ha, [["__scopeId", "data-v-4fd94c0d"]]);
+export {
+  ka as default
+};