@nextcloud/image-editor 1.0.0-beta.1

package/dist/index.mjs

@@ -0,0 +1,4683 @@
+import './assets/index.css';
+import { shallowRef, computed, defineComponent, openBlock, createElementBlock, normalizeClass, renderSlot, mergeProps, createElementVNode, toDisplayString, createCommentVNode, createTextVNode, watch, provide, inject, Fragment, renderList, createVNode, withCtx, createBlock, resolveDynamicComponent, unref, normalizeStyle, ref, useTemplateRef, onMounted, withDirectives, withKeys, withModifiers, vModelText, onBeforeUnmount } from "vue";
+import Konva from "konva";
+import NcButton from "@nextcloud/vue/components/NcButton";
+import NcLoadingIcon from "@nextcloud/vue/components/NcLoadingIcon";
+import { getGettextBuilder } from "@nextcloud/l10n/gettext";
+import { emojiSearch } from "@nextcloud/vue/functions/emoji";
+import NcEmojiPicker from "@nextcloud/vue/components/NcEmojiPicker";
+import { showConfirmation } from "@nextcloud/dialogs";
+import NcActionButton from "@nextcloud/vue/components/NcActionButton";
+import NcActions from "@nextcloud/vue/components/NcActions";
+function useHistory(capacity = 100) {
+  if (!Number.isInteger(capacity) || capacity < 1) {
+    throw new RangeError("History capacity must be a positive integer");
+  }
+  const entries = shallowRef([]);
+  const index = shallowRef(-1);
+  const canUndo = computed(() => index.value > 0);
+  const canRedo = computed(() => index.value < entries.value.length - 1);
+  const current = computed(() => entries.value[index.value]?.snapshot);
+  function push(snapshot, label) {
+    const kept = [...entries.value.slice(0, index.value + 1), { snapshot, label }];
+    entries.value = kept.slice(Math.max(0, kept.length - capacity));
+    index.value = entries.value.length - 1;
+  }
+  function jumpTo(target) {
+    if (target === index.value || target < 0 || target >= entries.value.length) {
+      return void 0;
+    }
+    index.value = target;
+    return current.value;
+  }
+  function undo() {
+    return canUndo.value ? jumpTo(index.value - 1) : void 0;
+  }
+  function redo() {
+    return canRedo.value ? jumpTo(index.value + 1) : void 0;
+  }
+  function clear() {
+    entries.value = [];
+    index.value = -1;
+  }
+  return {
+    canUndo,
+    canRedo,
+    current,
+    entries: computed(() => entries.value),
+    index: computed(() => index.value),
+    push,
+    undo,
+    redo,
+    jumpTo,
+    clear
+  };
+}
+function newId() {
+  if (typeof crypto.randomUUID === "function") {
+    return crypto.randomUUID();
+  }
+  return [...crypto.getRandomValues(new Uint8Array(16))].map((byte) => byte.toString(16).padStart(2, "0")).join("");
+}
+function createInitialState() {
+  return {
+    rotation: 0,
+    fineRotation: 0,
+    zoom: 1,
+    flipX: false,
+    flipY: false,
+    crop: null,
+    adjustments: { brightness: 0, contrast: 0, saturation: 0 },
+    preset: "none",
+    annotations: []
+  };
+}
+function isPristine(state) {
+  const { adjustments } = state;
+  return state.rotation === 0 && state.fineRotation === 0 && state.zoom === 1 && !state.flipX && !state.flipY && state.crop === null && adjustments.brightness === 0 && adjustments.contrast === 0 && adjustments.saturation === 0 && state.preset === "none" && state.annotations.length === 0;
+}
+function orientedSize(natural, rotation) {
+  return rotation % 180 === 0 ? { width: natural.width, height: natural.height } : { width: natural.height, height: natural.width };
+}
+function clampRect(rect, bounds) {
+  const x = Math.min(Math.max(rect.x, 0), bounds.width - 1);
+  const y = Math.min(Math.max(rect.y, 0), bounds.height - 1);
+  return {
+    x,
+    y,
+    width: Math.max(1, Math.min(rect.width, bounds.width - x)),
+    height: Math.max(1, Math.min(rect.height, bounds.height - y))
+  };
+}
+function mapPointsCW(points, height) {
+  const mapped = [];
+  for (let i = 0; i < points.length; i += 2) {
+    mapped.push(height - (points[i + 1] ?? 0), points[i] ?? 0);
+  }
+  return mapped;
+}
+function mapRectCW(rect, height) {
+  return {
+    x: height - rect.y - rect.height,
+    y: rect.x,
+    width: rect.height,
+    height: rect.width
+  };
+}
+function mapAnnotationCW(annotation, height) {
+  switch (annotation.type) {
+    case "draw":
+      return { ...annotation, points: mapPointsCW(annotation.points, height) };
+    case "arrow":
+      return { ...annotation, points: mapPointsCW(annotation.points, height) };
+    case "rectangle":
+    case "ellipse":
+      return {
+        ...annotation,
+        rect: { ...annotation.rect, x: height - annotation.rect.y, y: annotation.rect.x },
+        rotation: (annotation.rotation + 90) % 360
+      };
+    case "redact":
+      return { ...annotation, rect: mapRectCW(annotation.rect, height) };
+    case "text":
+    case "sticker":
+      return {
+        ...annotation,
+        x: height - annotation.y,
+        y: annotation.x,
+        rotation: (annotation.rotation + 90) % 360
+      };
+  }
+}
+function rotateCW(state, oriented) {
+  return {
+    ...state,
+    rotation: (state.rotation + 90) % 360,
+    crop: state.crop && mapRectCW(state.crop, oriented.height),
+    annotations: state.annotations.map((annotation) => mapAnnotationCW(annotation, oriented.height))
+  };
+}
+function mapAnnotationFlipX(annotation, width) {
+  switch (annotation.type) {
+    case "draw":
+    case "arrow": {
+      const points = annotation.points.map((value, i) => i % 2 === 0 ? width - value : value);
+      return { ...annotation, points };
+    }
+    case "rectangle":
+    case "ellipse": {
+      const radians = annotation.rotation * Math.PI / 180;
+      return {
+        ...annotation,
+        rect: {
+          ...annotation.rect,
+          x: width - annotation.rect.x - annotation.rect.width * Math.cos(radians),
+          y: annotation.rect.y + annotation.rect.width * Math.sin(radians)
+        },
+        rotation: (360 - annotation.rotation) % 360
+      };
+    }
+    case "redact":
+      return {
+        ...annotation,
+        rect: { ...annotation.rect, x: width - annotation.rect.x - annotation.rect.width }
+      };
+    case "text":
+    case "sticker":
+      return {
+        ...annotation,
+        x: width - annotation.x,
+        rotation: (360 - annotation.rotation) % 360
+      };
+  }
+}
+function flipHorizontal(state, oriented) {
+  const sideways = state.rotation % 180 !== 0;
+  return {
+    ...state,
+    flipX: sideways ? state.flipX : !state.flipX,
+    flipY: sideways ? !state.flipY : state.flipY,
+    fineRotation: -state.fineRotation,
+    crop: state.crop && { ...state.crop, x: oriented.width - state.crop.x - state.crop.width },
+    annotations: state.annotations.map((annotation) => mapAnnotationFlipX(annotation, oriented.width))
+  };
+}
+function mapAnnotationFlipY(annotation, height) {
+  switch (annotation.type) {
+    case "draw":
+    case "arrow": {
+      const points = annotation.points.map((value, i) => i % 2 === 1 ? height - value : value);
+      return { ...annotation, points };
+    }
+    case "rectangle":
+    case "ellipse": {
+      const radians = annotation.rotation * Math.PI / 180;
+      return {
+        ...annotation,
+        rect: {
+          ...annotation.rect,
+          x: annotation.rect.x - annotation.rect.height * Math.sin(radians),
+          y: height - annotation.rect.y - annotation.rect.height * Math.cos(radians)
+        },
+        rotation: (360 - annotation.rotation) % 360
+      };
+    }
+    case "redact":
+      return {
+        ...annotation,
+        rect: { ...annotation.rect, y: height - annotation.rect.y - annotation.rect.height }
+      };
+    case "text":
+    case "sticker":
+      return {
+        ...annotation,
+        y: height - annotation.y,
+        rotation: (360 - annotation.rotation) % 360
+      };
+  }
+}
+function flipVertical(state, oriented) {
+  const sideways = state.rotation % 180 !== 0;
+  return {
+    ...state,
+    flipX: sideways ? !state.flipX : state.flipX,
+    flipY: sideways ? state.flipY : !state.flipY,
+    fineRotation: -state.fineRotation,
+    crop: state.crop && { ...state.crop, y: oriented.height - state.crop.y - state.crop.height },
+    annotations: state.annotations.map((annotation) => mapAnnotationFlipY(annotation, oriented.height))
+  };
+}
+function translateAnnotation(annotation, dx, dy) {
+  switch (annotation.type) {
+    case "draw":
+    case "arrow": {
+      const points = annotation.points.map((value, i) => value + (i % 2 === 0 ? dx : dy));
+      return { ...annotation, points };
+    }
+    case "rectangle":
+    case "ellipse":
+    case "redact":
+      return {
+        ...annotation,
+        rect: { ...annotation.rect, x: annotation.rect.x + dx, y: annotation.rect.y + dy }
+      };
+    case "text":
+    case "sticker":
+      return { ...annotation, x: annotation.x + dx, y: annotation.y + dy };
+  }
+}
+function duplicateAnnotation(annotation, offset = 16) {
+  return { ...translateAnnotation(annotation, offset, offset), id: newId() };
+}
+const _sfc_main$I = /* @__PURE__ */ defineComponent({
+  __name: "GlassSurface",
+  props: {
+    variant: {}
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["glass-surface", `glass-surface--${__props.variant ?? "card"}`])
+      }, [
+        renderSlot(_ctx.$slots, "default", {}, void 0, true)
+      ], 2);
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const GlassSurface = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["__scopeId", "data-v-b60e81d9"]]);
+const _sfc_main$H = {
+  name: "ContrastCircleIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+const _hoisted_1$E = ["aria-hidden", "aria-label"];
+const _hoisted_2$z = ["fill", "width", "height"];
+const _hoisted_3$w = { d: "M12,20C9.79,20 7.79,19.1 6.34,17.66L17.66,6.34C19.1,7.79 20,9.79 20,12A8,8 0 0,1 12,20M6,8H8V6H9.5V8H11.5V9.5H9.5V11.5H8V9.5H6M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,16H17V14.5H12V16Z" };
+const _hoisted_4$v = { key: 0 };
+function _sfc_render$r(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, {
+    "aria-hidden": $props.title ? null : "true",
+    "aria-label": $props.title,
+    class: "material-design-icon contrast-circle-icon",
+    role: "img",
+    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
+  }), [
+    (openBlock(), createElementBlock("svg", {
+      fill: $props.fillColor,
+      class: "material-design-icon__svg",
+      width: $props.size,
+      height: $props.size,
+      viewBox: "0 0 24 24"
+    }, [
+      createElementVNode("path", _hoisted_3$w, [
+        $props.title ? (openBlock(), createElementBlock("title", _hoisted_4$v, toDisplayString($props.title), 1)) : createCommentVNode("", true)
+      ])
+    ], 8, _hoisted_2$z))
+  ], 16, _hoisted_1$E);
+}
+const ContrastCircle = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["render", _sfc_render$r]]);
+const _sfc_main$G = {
+  name: "InvertColorsIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+const _hoisted_1$D = ["aria-hidden", "aria-label"];
+const _hoisted_2$y = ["fill", "width", "height"];
+const _hoisted_3$v = { d: "M12,19.58V19.58C10.4,19.58 8.89,18.96 7.76,17.83C6.62,16.69 6,15.19 6,13.58C6,12 6.62,10.47 7.76,9.34L12,5.1M17.66,7.93L12,2.27V2.27L6.34,7.93C3.22,11.05 3.22,16.12 6.34,19.24C7.9,20.8 9.95,21.58 12,21.58C14.05,21.58 16.1,20.8 17.66,19.24C20.78,16.12 20.78,11.05 17.66,7.93Z" };
+const _hoisted_4$u = { key: 0 };
+function _sfc_render$q(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, {
+    "aria-hidden": $props.title ? null : "true",
+    "aria-label": $props.title,
+    class: "material-design-icon invert-colors-icon",
+    role: "img",
+    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
+  }), [
+    (openBlock(), createElementBlock("svg", {
+      fill: $props.fillColor,
+      class: "material-design-icon__svg",
+      width: $props.size,
+      height: $props.size,
+      viewBox: "0 0 24 24"
+    }, [
+      createElementVNode("path", _hoisted_3$v, [
+        $props.title ? (openBlock(), createElementBlock("title", _hoisted_4$u, toDisplayString($props.title), 1)) : createCommentVNode("", true)
+      ])
+    ], 8, _hoisted_2$y))
+  ], 16, _hoisted_1$D);
+}
+const InvertColors = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["render", _sfc_render$q]]);
+const _sfc_main$F = {
+  name: "WhiteBalanceSunnyIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+const _hoisted_1$C = ["aria-hidden", "aria-label"];
+const _hoisted_2$x = ["fill", "width", "height"];
+const _hoisted_3$u = { d: "M3.55 19.09L4.96 20.5L6.76 18.71L5.34 17.29M12 6C8.69 6 6 8.69 6 12S8.69 18 12 18 18 15.31 18 12C18 8.68 15.31 6 12 6M20 13H23V11H20M17.24 18.71L19.04 20.5L20.45 19.09L18.66 17.29M20.45 5L19.04 3.6L17.24 5.39L18.66 6.81M13 1H11V4H13M6.76 5.39L4.96 3.6L3.55 5L5.34 6.81L6.76 5.39M1 13H4V11H1M13 20H11V23H13" };
+const _hoisted_4$t = { key: 0 };
+function _sfc_render$p(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, {
+    "aria-hidden": $props.title ? null : "true",
+    "aria-label": $props.title,
+    class: "material-design-icon white-balance-sunny-icon",
+    role: "img",
+    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
+  }), [
+    (openBlock(), createElementBlock("svg", {
+      fill: $props.fillColor,
+      class: "material-design-icon__svg",
+      width: $props.size,
+      height: $props.size,
+      viewBox: "0 0 24 24"
+    }, [
+      createElementVNode("path", _hoisted_3$u, [
+        $props.title ? (openBlock(), createElementBlock("title", _hoisted_4$t, toDisplayString($props.title), 1)) : createCommentVNode("", true)
+      ])
+    ], 8, _hoisted_2$x))
+  ], 16, _hoisted_1$C);
+}
+const WhiteBalanceSunny = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["render", _sfc_render$p]]);
+const _hoisted_1$B = { class: "editor-slider" };
+const _hoisted_2$w = ["value", "data-test", "disabled", "aria-label", "min", "max", "step"];
+const _sfc_main$E = /* @__PURE__ */ defineComponent({
+  __name: "EditorSlider",
+  props: {
+    value: {},
+    min: {},
+    max: {},
+    step: {},
+    label: {},
+    display: {},
+    dataTest: {},
+    disabled: { type: Boolean }
+  },
+  emits: ["input", "commit"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    function onInput(event) {
+      emit("input", Number(event.target.value));
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$B, [
+        createElementVNode("input", {
+          value: props.value,
+          "data-test": __props.dataTest,
+          disabled: __props.disabled,
+          "aria-label": __props.label,
+          type: "range",
+          min: __props.min,
+          max: __props.max,
+          step: __props.step,
+          onInput,
+          onChange: _cache[0] || (_cache[0] = ($event) => emit("commit"))
+        }, null, 40, _hoisted_2$w),
+        createElementVNode("output", null, [
+          renderSlot(_ctx.$slots, "preview", {}, () => [
+            createTextVNode(toDisplayString(__props.display ?? props.value), 1)
+          ], true)
+        ])
+      ]);
+    };
+  }
+});
+const EditorSlider = /* @__PURE__ */ _export_sfc(_sfc_main$E, [["__scopeId", "data-v-6562ea60"]]);
+const _hoisted_1$A = ["disabled", "data-test", "aria-pressed"];
+const _sfc_main$D = /* @__PURE__ */ defineComponent({
+  __name: "IconTab",
+  props: {
+    label: {},
+    active: { type: Boolean },
+    disabled: { type: Boolean },
+    dataTest: {}
+  },
+  emits: ["click"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("button", {
+        type: "button",
+        class: normalizeClass(["icon-tab", { "icon-tab--active": __props.active }]),
+        disabled: __props.disabled,
+        "data-test": __props.dataTest,
+        "aria-pressed": __props.active,
+        onClick: _cache[0] || (_cache[0] = ($event) => emit("click"))
+      }, [
+        renderSlot(_ctx.$slots, "default", {}, void 0, true),
+        createElementVNode("span", null, toDisplayString(__props.label), 1)
+      ], 10, _hoisted_1$A);
+    };
+  }
+});
+const IconTab = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-95889662"]]);
+const gtBuilder = getGettextBuilder().detectLocale();
+[].map((data) => gtBuilder.addTranslation(data.locale, data.json));
+const gt = gtBuilder.build();
+gt.ngettext.bind(gt);
+const t = gt.gettext.bind(gt);
+const VIEW_MARGIN = 16;
+const MIN_ZOOM = 1;
+const MAX_ZOOM = 4;
+const ZOOM_SNAP = 1.05;
+const PINCH_TOLERANCE = 0.01;
+const WHEEL_LINE = 16;
+const WHEEL_CLAMP = 300;
+const WHEEL_SENSITIVITY = 15e-4;
+function panBounds(visible, scale, container) {
+  return {
+    x: Math.max(0, (visible.width * scale - container.width) / 2 + VIEW_MARGIN),
+    y: Math.max(0, (visible.height * scale - container.height) / 2 + VIEW_MARGIN)
+  };
+}
+function clampPan(pan, bounds) {
+  return {
+    x: Math.min(bounds.x, Math.max(-bounds.x, pan.x)),
+    y: Math.min(bounds.y, Math.max(-bounds.y, pan.y))
+  };
+}
+function clampZoom(zoom) {
+  return zoom < ZOOM_SNAP ? MIN_ZOOM : Math.min(MAX_ZOOM, zoom);
+}
+function anchoredPan(pan, cursor, factor) {
+  return {
+    x: cursor.x - factor * (cursor.x - pan.x),
+    y: cursor.y - factor * (cursor.y - pan.y)
+  };
+}
+function wheelZoomFactor(deltaY, deltaMode, pageHeight) {
+  const scaled = deltaMode === 1 ? deltaY * WHEEL_LINE : deltaMode === 2 ? deltaY * pageHeight : deltaY;
+  const bounded = Math.min(WHEEL_CLAMP, Math.max(-WHEEL_CLAMP, scaled));
+  return Math.exp(-bounded * WHEEL_SENSITIVITY);
+}
+const MODE_DEFAULT_TOOL = {
+  select: "select",
+  crop: "crop",
+  finetune: "adjust",
+  filter: "adjust",
+  annotate: "draw",
+  sticker: "sticker",
+  redact: "redact"
+};
+const EDITOR_CONTEXT = /* @__PURE__ */ Symbol("nextcloud:image-editor");
+function createEditorContext() {
+  const history = useHistory();
+  const state = shallowRef(createInitialState());
+  const viewZoom = shallowRef(MIN_ZOOM);
+  const viewPan = shallowRef({ x: 0, y: 0 });
+  const viewFit = shallowRef(null);
+  const boundsAt = (zoom) => {
+    const fit = viewFit.value;
+    return fit === null ? { x: 0, y: 0 } : panBounds(fit.visible, fit.scale * zoom, fit.container);
+  };
+  const activeMode = shallowRef("crop");
+  const activeTool = shallowRef(MODE_DEFAULT_TOOL.crop);
+  history.push(state.value, t("Original"));
+  const context = {
+    state,
+    activeMode,
+    activeTool,
+    setMode(mode) {
+      activeMode.value = mode;
+      activeTool.value = MODE_DEFAULT_TOOL[mode];
+      context.selectedId.value = null;
+    },
+    drawColor: shallowRef("#ff0000"),
+    strokeWidth: shallowRef(6),
+    fontSize: shallowRef(24),
+    sticker: shallowRef("😀"),
+    redactStyle: shallowRef("pixelate"),
+    cropAspect: shallowRef(null),
+    viewZoom,
+    viewPan,
+    viewFit,
+    panning: shallowRef(false),
+    setViewZoom(zoom, anchor) {
+      const previous = viewZoom.value;
+      const next = clampZoom(zoom);
+      viewZoom.value = next;
+      if (next === MIN_ZOOM) {
+        viewPan.value = { x: 0, y: 0 };
+        return;
+      }
+      const panned = anchor === void 0 ? viewPan.value : anchoredPan(viewPan.value, anchor, next / previous);
+      viewPan.value = clampPan(panned, boundsAt(next));
+    },
+    setViewPan(pan) {
+      viewPan.value = clampPan(pan, boundsAt(viewZoom.value));
+    },
+    interacting: shallowRef(false),
+    selectedId: shallowRef(null),
+    canUndo: history.canUndo,
+    canRedo: history.canRedo,
+    historyEntries: history.entries,
+    historyIndex: history.index,
+    commit(next, label) {
+      context.interacting.value = false;
+      state.value = next;
+      history.push(next, label);
+    },
+    preview(next) {
+      context.interacting.value = true;
+      state.value = next;
+    },
+    undo() {
+      const snapshot = history.undo();
+      if (snapshot !== void 0) {
+        state.value = snapshot;
+      }
+    },
+    redo() {
+      const snapshot = history.redo();
+      if (snapshot !== void 0) {
+        state.value = snapshot;
+      }
+    },
+    jumpTo(index) {
+      const snapshot = history.jumpTo(index);
+      if (snapshot !== void 0) {
+        state.value = snapshot;
+      }
+    },
+    reset(next) {
+      history.clear();
+      state.value = next ?? createInitialState();
+      activeMode.value = "crop";
+      activeTool.value = MODE_DEFAULT_TOOL.crop;
+      context.selectedId.value = null;
+      viewZoom.value = MIN_ZOOM;
+      viewPan.value = { x: 0, y: 0 };
+      context.panning.value = false;
+      history.push(state.value, next === void 0 ? t("Original") : t("Restored"));
+    }
+  };
+  watch(activeTool, (tool) => {
+    if (tool !== "select") {
+      context.selectedId.value = null;
+    }
+  });
+  provide(EDITOR_CONTEXT, context);
+  return context;
+}
+function useEditorContext() {
+  const context = inject(EDITOR_CONTEXT, null);
+  if (context === null) {
+    throw new Error("useEditorContext() called outside of an ImageEditor tree");
+  }
+  return context;
+}
+const _hoisted_1$z = { class: "adjust-panel" };
+const _hoisted_2$v = { class: "adjust-panel__tabs" };
+const _sfc_main$C = /* @__PURE__ */ defineComponent({
+  __name: "AdjustPanel",
+  props: {
+    loaded: { type: Boolean }
+  },
+  setup(__props) {
+    const context = useEditorContext();
+    const adjustments = [
+      { id: "brightness", label: t("Brightness"), icon: WhiteBalanceSunny },
+      { id: "contrast", label: t("Contrast"), icon: ContrastCircle },
+      { id: "saturation", label: t("Saturation"), icon: InvertColors }
+    ];
+    const activeAdjustment = shallowRef("brightness");
+    const display = computed(() => {
+      const value = context.state.value.adjustments[activeAdjustment.value];
+      return value > 0 ? `+${value}` : `${value}`;
+    });
+    function onAdjustInput(value) {
+      const state = context.state.value;
+      context.preview({
+        ...state,
+        adjustments: { ...state.adjustments, [activeAdjustment.value]: value }
+      });
+    }
+    function onSliderCommit() {
+      context.commit(context.state.value, adjustments.find((entry) => entry.id === activeAdjustment.value).label);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$z, [
+        createElementVNode("div", _hoisted_2$v, [
+          (openBlock(), createElementBlock(Fragment, null, renderList(adjustments, (adjustment) => {
+            return createVNode(IconTab, {
+              key: adjustment.id,
+              label: adjustment.label,
+              active: activeAdjustment.value === adjustment.id,
+              disabled: !__props.loaded,
+              "data-test": `tab-${adjustment.id}`,
+              onClick: ($event) => activeAdjustment.value = adjustment.id
+            }, {
+              default: withCtx(() => [
+                (openBlock(), createBlock(resolveDynamicComponent(adjustment.icon), { size: 20 }))
+              ]),
+              _: 2
+            }, 1032, ["label", "active", "disabled", "data-test", "onClick"]);
+          }), 64))
+        ]),
+        createVNode(EditorSlider, {
+          value: unref(context).state.value.adjustments[activeAdjustment.value],
+          min: -100,
+          max: 100,
+          step: 1,
+          label: adjustments.find((entry) => entry.id === activeAdjustment.value).label,
+          display: display.value,
+          "data-test": `adjust-${activeAdjustment.value}`,
+          disabled: !__props.loaded,
+          onInput: onAdjustInput,
+          onCommit: onSliderCommit
+        }, null, 8, ["value", "label", "display", "data-test", "disabled"])
+      ]);
+    };
+  }
+});
+const AdjustPanel = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["__scopeId", "data-v-d7f848cf"]]);
+const _sfc_main$B = {
+  name: "ArrowTopRightIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+const _hoisted_1$y = ["aria-hidden", "aria-label"];
+const _hoisted_2$u = ["fill", "width", "height"];
+const _hoisted_3$t = { d: "M5,17.59L15.59,7H9V5H19V15H17V8.41L6.41,19L5,17.59Z" };
+const _hoisted_4$s = { key: 0 };
+function _sfc_render$o(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, {
+    "aria-hidden": $props.title ? null : "true",
+    "aria-label": $props.title,
+    class: "material-design-icon arrow-top-right-icon",
+    role: "img",
+    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
+  }), [
+    (openBlock(), createElementBlock("svg", {
+      fill: $props.fillColor,
+      class: "material-design-icon__svg",
+      width: $props.size,
+      height: $props.size,
+      viewBox: "0 0 24 24"
+    }, [
+      createElementVNode("path", _hoisted_3$t, [
+        $props.title ? (openBlock(), createElementBlock("title", _hoisted_4$s, toDisplayString($props.title), 1)) : createCommentVNode("", true)
+      ])
+    ], 8, _hoisted_2$u))
+  ], 16, _hoisted_1$y);
+}
+const ArrowTopRight = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["render", _sfc_render$o]]);
+const _sfc_main$A = {
+  name: "EllipseOutlineIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+const _hoisted_1$x = ["aria-hidden", "aria-label"];
+const _hoisted_2$t = ["fill", "width", "height"];
+const _hoisted_3$s = { d: "M12,6C16.41,6 20,8.69 20,12C20,15.31 16.41,18 12,18C7.59,18 4,15.31 4,12C4,8.69 7.59,6 12,6M12,4C6.5,4 2,7.58 2,12C2,16.42 6.5,20 12,20C17.5,20 22,16.42 22,12C22,7.58 17.5,4 12,4Z" };
+const _hoisted_4$r = { key: 0 };
+function _sfc_render$n(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, {
+    "aria-hidden": $props.title ? null : "true",
+    "aria-label": $props.title,
+    class: "material-design-icon ellipse-outline-icon",
+    role: "img",
+    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
+  }), [
+    (openBlock(), createElementBlock("svg", {
+      fill: $props.fillColor,
+      class: "material-design-icon__svg",
+      width: $props.size,
+      height: $props.size,
+      viewBox: "0 0 24 24"
+    }, [
+      createElementVNode("path", _hoisted_3$s, [
+        $props.title ? (openBlock(), createElementBlock("title", _hoisted_4$r, toDisplayString($props.title), 1)) : createCommentVNode("", true)
+      ])
+    ], 8, _hoisted_2$t))
+  ], 16, _hoisted_1$x);
+}
+const EllipseOutline = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["render", _sfc_render$n]]);
+const _sfc_main$z = {
+  name: "FormatTextIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+const _hoisted_1$w = ["aria-hidden", "aria-label"];
+const _hoisted_2$s = ["fill", "width", "height"];
+const _hoisted_3$r = { d: "M18.5,4L19.66,8.35L18.7,8.61C18.25,7.74 17.79,6.87 17.26,6.43C16.73,6 16.11,6 15.5,6H13V16.5C13,17 13,17.5 13.33,17.75C13.67,18 14.33,18 15,18V19H9V18C9.67,18 10.33,18 10.67,17.75C11,17.5 11,17 11,16.5V6H8.5C7.89,6 7.27,6 6.74,6.43C6.21,6.87 5.75,7.74 5.3,8.61L4.34,8.35L5.5,4H18.5Z" };
+const _hoisted_4$q = { key: 0 };
+function _sfc_render$m(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, {
+    "aria-hidden": $props.title ? null : "true",
+    "aria-label": $props.title,
+    class: "material-design-icon format-text-icon",
+    role: "img",
+    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
+  }), [
+    (openBlock(), createElementBlock("svg", {
+      fill: $props.fillColor,
+      class: "material-design-icon__svg",
+      width: $props.size,
+      height: $props.size,
+      viewBox: "0 0 24 24"
+    }, [
+      createElementVNode("path", _hoisted_3$r, [
+        $props.title ? (openBlock(), createElementBlock("title", _hoisted_4$q, toDisplayString($props.title), 1)) : createCommentVNode("", true)
+      ])
+    ], 8, _hoisted_2$s))
+  ], 16, _hoisted_1$w);
+}
+const FormatText = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["render", _sfc_render$m]]);
+const _sfc_main$y = {
+  name: "PencilIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+const _hoisted_1$v = ["aria-hidden", "aria-label"];
+const _hoisted_2$r = ["fill", "width", "height"];
+const _hoisted_3$q = { d: "M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z" };
+const _hoisted_4$p = { key: 0 };
+function _sfc_render$l(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, {
+    "aria-hidden": $props.title ? null : "true",
+    "aria-label": $props.title,
+    class: "material-design-icon pencil-icon",
+    role: "img",
+    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
+  }), [
+    (openBlock(), createElementBlock("svg", {
+      fill: $props.fillColor,
+      class: "material-design-icon__svg",
+      width: $props.size,
+      height: $props.size,
+      viewBox: "0 0 24 24"
+    }, [
+      createElementVNode("path", _hoisted_3$q, [
+        $props.title ? (openBlock(), createElementBlock("title", _hoisted_4$p, toDisplayString($props.title), 1)) : createCommentVNode("", true)
+      ])
+    ], 8, _hoisted_2$r))
+  ], 16, _hoisted_1$v);
+}
+const Pencil = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["render", _sfc_render$l]]);
+const _sfc_main$x = {
+  name: "RectangleOutlineIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+const _hoisted_1$u = ["aria-hidden", "aria-label"];
+const _hoisted_2$q = ["fill", "width", "height"];
+const _hoisted_3$p = { d: "M4,6V19H20V6H4M18,17H6V8H18V17Z" };
+const _hoisted_4$o = { key: 0 };
+function _sfc_render$k(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, {
+    "aria-hidden": $props.title ? null : "true",
+    "aria-label": $props.title,
+    class: "material-design-icon rectangle-outline-icon",
+    role: "img",
+    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
+  }), [
+    (openBlock(), createElementBlock("svg", {
+      fill: $props.fillColor,
+      class: "material-design-icon__svg",
+      width: $props.size,
+      height: $props.size,
+      viewBox: "0 0 24 24"
+    }, [
+      createElementVNode("path", _hoisted_3$p, [
+        $props.title ? (openBlock(), createElementBlock("title", _hoisted_4$o, toDisplayString($props.title), 1)) : createCommentVNode("", true)
+      ])
+    ], 8, _hoisted_2$q))
+  ], 16, _hoisted_1$u);
+}
+const RectangleOutline = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["render", _sfc_render$k]]);
+function useAnnotationColor(context) {
+  function recolorable() {
+    const annotation = context.state.value.annotations.find((entry) => entry.id === context.selectedId.value);
+    return annotation !== void 0 && "color" in annotation && annotation.type !== "sticker" ? annotation : void 0;
+  }
+  function apply(color) {
+    const annotation = recolorable();
+    if (annotation === void 0 || annotation.color === color) {
+      return;
+    }
+    const state = context.state.value;
+    context.preview({
+      ...state,
+      annotations: state.annotations.map((entry) => entry.id === annotation.id ? { ...entry, color } : entry)
+    });
+  }
+  return {
+    preview(color) {
+      context.drawColor.value = color;
+      apply(color);
+    },
+    commit(color) {
+      context.drawColor.value = color;
+      apply(color);
+      if (recolorable() !== void 0) {
+        context.commit(context.state.value, t("Color"));
+      }
+    }
+  };
+}
+const _hoisted_1$t = { class: "annotate-panel" };
+const _hoisted_2$p = { class: "annotate-panel__row" };
+const _hoisted_3$o = { class: "annotate-panel__option" };
+const _hoisted_4$n = ["value"];
+const FONT_SAMPLE = "A";
+const PREVIEW_CAP = 44;
+const _sfc_main$w = /* @__PURE__ */ defineComponent({
+  __name: "AnnotatePanel",
+  props: {
+    loaded: { type: Boolean }
+  },
+  setup(__props) {
+    const context = useEditorContext();
+    const color = useAnnotationColor(context);
+    const labels = {
+      color: t("Color"),
+      strokeWidth: t("Stroke width"),
+      fontSize: t("Font size")
+    };
+    const subTools = [
+      { id: "draw", label: t("Draw"), icon: Pencil },
+      { id: "rectangle", label: t("Rectangle"), icon: RectangleOutline },
+      { id: "ellipse", label: t("Ellipse"), icon: EllipseOutline },
+      { id: "arrow", label: t("Arrow"), icon: ArrowTopRight },
+      { id: "text", label: t("Text"), icon: FormatText }
+    ];
+    const showStrokeOptions = computed(() => ["draw", "rectangle", "ellipse", "arrow"].includes(context.activeTool.value));
+    const viewScale = computed(() => (context.viewFit.value?.scale ?? 1) * context.viewZoom.value);
+    const strokePreview = computed(() => Math.min(PREVIEW_CAP, Math.max(2, context.strokeWidth.value * viewScale.value)));
+    const fontPreview = computed(() => Math.min(PREVIEW_CAP, Math.max(8, context.fontSize.value * viewScale.value)));
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$t, [
+        createElementVNode("div", _hoisted_2$p, [
+          (openBlock(), createElementBlock(Fragment, null, renderList(subTools, (tool) => {
+            return createVNode(unref(NcButton), {
+              key: tool.id,
+              "aria-label": tool.label,
+              title: tool.label,
+              disabled: !__props.loaded,
+              pressed: unref(context).activeTool.value === tool.id,
+              variant: "tertiary",
+              onClick: ($event) => unref(context).activeTool.value = tool.id
+            }, {
+              icon: withCtx(() => [
+                (openBlock(), createBlock(resolveDynamicComponent(tool.icon), { size: 20 }))
+              ]),
+              _: 2
+            }, 1032, ["aria-label", "title", "disabled", "pressed", "onClick"]);
+          }), 64)),
+          _cache[4] || (_cache[4] = createElementVNode("span", { class: "annotate-panel__divider" }, null, -1)),
+          createElementVNode("label", _hoisted_3$o, [
+            createTextVNode(toDisplayString(labels.color) + " ", 1),
+            createElementVNode("input", {
+              value: unref(context).drawColor.value,
+              type: "color",
+              "data-test": "color",
+              onInput: _cache[0] || (_cache[0] = ($event) => unref(color).preview($event.target.value)),
+              onChange: _cache[1] || (_cache[1] = ($event) => unref(color).commit($event.target.value))
+            }, null, 40, _hoisted_4$n)
+          ])
+        ]),
+        showStrokeOptions.value ? (openBlock(), createBlock(EditorSlider, {
+          key: 0,
+          value: unref(context).strokeWidth.value,
+          min: 1,
+          max: 32,
+          step: 1,
+          label: labels.strokeWidth,
+          onInput: _cache[2] || (_cache[2] = ($event) => unref(context).strokeWidth.value = $event),
+          onCommit: () => {
+          }
+        }, {
+          preview: withCtx(() => [
+            createElementVNode("span", {
+              class: "annotate-panel__dot",
+              "data-test": "stroke-preview",
+              style: normalizeStyle({
+                inlineSize: `${strokePreview.value}px`,
+                blockSize: `${strokePreview.value}px`,
+                backgroundColor: unref(context).drawColor.value
+              })
+            }, null, 4)
+          ]),
+          _: 1
+        }, 8, ["value", "label"])) : unref(context).activeTool.value === "text" ? (openBlock(), createBlock(EditorSlider, {
+          key: 1,
+          value: unref(context).fontSize.value,
+          min: 8,
+          max: 128,
+          step: 1,
+          label: labels.fontSize,
+          onInput: _cache[3] || (_cache[3] = ($event) => unref(context).fontSize.value = $event),
+          onCommit: () => {
+          }
+        }, {
+          preview: withCtx(() => [
+            createElementVNode("span", {
+              class: "annotate-panel__glyph",
+              "data-test": "font-preview",
+              style: normalizeStyle({
+                fontSize: `${fontPreview.value}px`,
+                color: unref(context).drawColor.value
+              })
+            }, toDisplayString(FONT_SAMPLE), 4)
+          ]),
+          _: 1
+        }, 8, ["value", "label"])) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+const AnnotatePanel = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["__scopeId", "data-v-1bf135e4"]]);
+const _sfc_main$v = {
+  name: "FlipHorizontalIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+const _hoisted_1$s = ["aria-hidden", "aria-label"];
+const _hoisted_2$o = ["fill", "width", "height"];
+const _hoisted_3$n = { d: "M15 21H17V19H15M19 9H21V7H19M3 5V19C3 20.1 3.9 21 5 21H9V19H5V5H9V3H5C3.9 3 3 3.9 3 5M19 3V5H21C21 3.9 20.1 3 19 3M11 23H13V1H11M19 17H21V15H19M15 5H17V3H15M19 13H21V11H19M19 21C20.1 21 21 20.1 21 19H19Z" };
+const _hoisted_4$m = { key: 0 };
+function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, {
+    "aria-hidden": $props.title ? null : "true",
+    "aria-label": $props.title,
+    class: "material-design-icon flip-horizontal-icon",
+    role: "img",
+    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
+  }), [
+    (openBlock(), createElementBlock("svg", {
+      fill: $props.fillColor,
+      class: "material-design-icon__svg",
+      width: $props.size,
+      height: $props.size,
+      viewBox: "0 0 24 24"
+    }, [
+      createElementVNode("path", _hoisted_3$n, [
+        $props.title ? (openBlock(), createElementBlock("title", _hoisted_4$m, toDisplayString($props.title), 1)) : createCommentVNode("", true)
+      ])
+    ], 8, _hoisted_2$o))
+  ], 16, _hoisted_1$s);
+}
+const FlipHorizontal = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["render", _sfc_render$j]]);
+const _sfc_main$u = {
+  name: "FlipVerticalIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+const _hoisted_1$r = ["aria-hidden", "aria-label"];
+const _hoisted_2$n = ["fill", "width", "height"];
+const _hoisted_3$m = { d: "M3 15V17H5V15M15 19V21H17V19M19 3H5C3.9 3 3 3.9 3 5V9H5V5H19V9H21V5C21 3.9 20.1 3 19 3M21 19H19V21C20.1 21 21 20.1 21 19M1 11V13H23V11M7 19V21H9V19M19 15V17H21V15M11 19V21H13V19M3 19C3 20.1 3.9 21 5 21V19Z" };
+const _hoisted_4$l = { key: 0 };
+function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, {
+    "aria-hidden": $props.title ? null : "true",
+    "aria-label": $props.title,
+    class: "material-design-icon flip-vertical-icon",
+    role: "img",
+    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
+  }), [
+    (openBlock(), createElementBlock("svg", {
+      fill: $props.fillColor,
+      class: "material-design-icon__svg",
+      width: $props.size,
+      height: $props.size,
+      viewBox: "0 0 24 24"
+    }, [
+      createElementVNode("path", _hoisted_3$m, [
+        $props.title ? (openBlock(), createElementBlock("title", _hoisted_4$l, toDisplayString($props.title), 1)) : createCommentVNode("", true)
+      ])
+    ], 8, _hoisted_2$n))
+  ], 16, _hoisted_1$r);
+}
+const FlipVertical = /* @__PURE__ */ _export_sfc(_sfc_main$u, [["render", _sfc_render$i]]);
+const _sfc_main$t = {
+  name: "RotateLeftIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+const _hoisted_1$q = ["aria-hidden", "aria-label"];
+const _hoisted_2$m = ["fill", "width", "height"];
+const _hoisted_3$l = { d: "M13,4.07V1L8.45,5.55L13,10V6.09C15.84,6.57 18,9.03 18,12C18,14.97 15.84,17.43 13,17.91V19.93C16.95,19.44 20,16.08 20,12C20,7.92 16.95,4.56 13,4.07M7.1,18.32C8.26,19.22 9.61,19.76 11,19.93V17.9C10.13,17.75 9.29,17.41 8.54,16.87L7.1,18.32M6.09,13H4.07C4.24,14.39 4.79,15.73 5.69,16.89L7.1,15.47C6.58,14.72 6.23,13.88 6.09,13M7.11,8.53L5.7,7.11C4.8,8.27 4.24,9.61 4.07,11H6.09C6.23,10.13 6.58,9.28 7.11,8.53Z" };
+const _hoisted_4$k = { key: 0 };
+function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, {
+    "aria-hidden": $props.title ? null : "true",
+    "aria-label": $props.title,
+    class: "material-design-icon rotate-left-icon",
+    role: "img",
+    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
+  }), [
+    (openBlock(), createElementBlock("svg", {
+      fill: $props.fillColor,
+      class: "material-design-icon__svg",
+      width: $props.size,
+      height: $props.size,
+      viewBox: "0 0 24 24"
+    }, [
+      createElementVNode("path", _hoisted_3$l, [
+        $props.title ? (openBlock(), createElementBlock("title", _hoisted_4$k, toDisplayString($props.title), 1)) : createCommentVNode("", true)
+      ])
+    ], 8, _hoisted_2$m))
+  ], 16, _hoisted_1$q);
+}
+const RotateLeft = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["render", _sfc_render$h]]);
+const _sfc_main$s = {
+  name: "RotateRightIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+const _hoisted_1$p = ["aria-hidden", "aria-label"];
+const _hoisted_2$l = ["fill", "width", "height"];
+const _hoisted_3$k = { d: "M16.89,15.5L18.31,16.89C19.21,15.73 19.76,14.39 19.93,13H17.91C17.77,13.87 17.43,14.72 16.89,15.5M13,17.9V19.92C14.39,19.75 15.74,19.21 16.9,18.31L15.46,16.87C14.71,17.41 13.87,17.76 13,17.9M19.93,11C19.76,9.61 19.21,8.27 18.31,7.11L16.89,8.53C17.43,9.28 17.77,10.13 17.91,11M15.55,5.55L11,1V4.07C7.06,4.56 4,7.92 4,12C4,16.08 7.05,19.44 11,19.93V17.91C8.16,17.43 6,14.97 6,12C6,9.03 8.16,6.57 11,6.09V10L15.55,5.55Z" };
+const _hoisted_4$j = { key: 0 };
+function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, {
+    "aria-hidden": $props.title ? null : "true",
+    "aria-label": $props.title,
+    class: "material-design-icon rotate-right-icon",
+    role: "img",
+    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
+  }), [
+    (openBlock(), createElementBlock("svg", {
+      fill: $props.fillColor,
+      class: "material-design-icon__svg",
+      width: $props.size,
+      height: $props.size,
+      viewBox: "0 0 24 24"
+    }, [
+      createElementVNode("path", _hoisted_3$k, [
+        $props.title ? (openBlock(), createElementBlock("title", _hoisted_4$j, toDisplayString($props.title), 1)) : createCommentVNode("", true)
+      ])
+    ], 8, _hoisted_2$l))
+  ], 16, _hoisted_1$p);
+}
+const RotateRight = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["render", _sfc_render$g]]);
+const EDITOR_COMMANDS = /* @__PURE__ */ Symbol("nextcloud:image-editor:commands");
+function provideEditorCommands(commands) {
+  provide(EDITOR_COMMANDS, commands);
+  return commands;
+}
+function useEditorCommands() {
+  const commands = inject(EDITOR_COMMANDS, null);
+  if (commands === null) {
+    throw new Error("useEditorCommands() called outside of an ImageEditor tree");
+  }
+  return commands;
+}
+const _hoisted_1$o = { class: "crop-panel" };
+const _hoisted_2$k = { class: "crop-panel__row" };
+const _hoisted_3$j = { class: "crop-panel__row" };
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
+  __name: "CropPanel",
+  props: {
+    loaded: { type: Boolean }
+  },
+  setup(__props) {
+    const context = useEditorContext();
+    const commands = useEditorCommands();
+    const labels = {
+      rotateLeft: t("Rotate left"),
+      rotateRight: t("Rotate right"),
+      flipHorizontal: t("Flip horizontal"),
+      flipVertical: t("Flip vertical"),
+      applyCrop: t("Apply crop"),
+      resetCrop: t("Reset crop"),
+      rotation: t("Rotation"),
+      scale: t("Scale")
+    };
+    const aspectPresets = [
+      { id: null, label: t("Free") },
+      { id: "original", label: t("Original") },
+      { id: 1, label: "1:1" },
+      { id: 4 / 3, label: "4:3" },
+      { id: 16 / 9, label: "16:9" }
+    ];
+    const cropControls = [
+      { id: "rotation", label: labels.rotation },
+      { id: "scale", label: labels.scale }
+    ];
+    const activeCropControl = shallowRef("rotation");
+    const display = computed(() => activeCropControl.value === "rotation" ? `${context.state.value.fineRotation}°` : `×${context.state.value.zoom.toFixed(2)}`);
+    function onTransformInput(value) {
+      context.preview(activeCropControl.value === "rotation" ? { ...context.state.value, fineRotation: value } : { ...context.state.value, zoom: value });
+    }
+    function onSliderCommit() {
+      context.commit(context.state.value, activeCropControl.value === "rotation" ? labels.rotation : labels.scale);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$o, [
+        createElementVNode("div", _hoisted_2$k, [
+          (openBlock(), createElementBlock(Fragment, null, renderList(aspectPresets, (preset) => {
+            return createVNode(unref(NcButton), {
+              key: String(preset.id),
+              "data-test": `aspect-${preset.id === null ? "free" : preset.id === "original" ? "original" : preset.label}`,
+              pressed: unref(context).cropAspect.value === preset.id,
+              disabled: !__props.loaded,
+              variant: "tertiary",
+              onClick: ($event) => unref(context).cropAspect.value = preset.id
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(preset.label), 1)
+              ]),
+              _: 2
+            }, 1032, ["data-test", "pressed", "disabled", "onClick"]);
+          }), 64))
+        ]),
+        createElementVNode("div", _hoisted_3$j, [
+          createVNode(unref(NcButton), {
+            "aria-label": labels.rotateLeft,
+            title: labels.rotateLeft,
+            disabled: !__props.loaded,
+            variant: "tertiary",
+            onClick: _cache[0] || (_cache[0] = ($event) => unref(commands).rotateCCW())
+          }, {
+            icon: withCtx(() => [
+              createVNode(RotateLeft, { size: 20 })
+            ]),
+            _: 1
+          }, 8, ["aria-label", "title", "disabled"]),
+          createVNode(unref(NcButton), {
+            "aria-label": labels.rotateRight,
+            title: labels.rotateRight,
+            disabled: !__props.loaded,
+            variant: "tertiary",
+            onClick: _cache[1] || (_cache[1] = ($event) => unref(commands).rotateCW())
+          }, {
+            icon: withCtx(() => [
+              createVNode(RotateRight, { size: 20 })
+            ]),
+            _: 1
+          }, 8, ["aria-label", "title", "disabled"]),
+          createVNode(unref(NcButton), {
+            "aria-label": labels.flipHorizontal,
+            title: labels.flipHorizontal,
+            disabled: !__props.loaded,
+            variant: "tertiary",
+            onClick: _cache[2] || (_cache[2] = ($event) => unref(commands).flipHorizontal())
+          }, {
+            icon: withCtx(() => [
+              createVNode(FlipHorizontal, { size: 20 })
+            ]),
+            _: 1
+          }, 8, ["aria-label", "title", "disabled"]),
+          createVNode(unref(NcButton), {
+            "aria-label": labels.flipVertical,
+            title: labels.flipVertical,
+            disabled: !__props.loaded,
+            variant: "tertiary",
+            onClick: _cache[3] || (_cache[3] = ($event) => unref(commands).flipVertical())
+          }, {
+            icon: withCtx(() => [
+              createVNode(FlipVertical, { size: 20 })
+            ]),
+            _: 1
+          }, 8, ["aria-label", "title", "disabled"]),
+          _cache[6] || (_cache[6] = createElementVNode("span", { class: "crop-panel__divider" }, null, -1)),
+          (openBlock(), createElementBlock(Fragment, null, renderList(cropControls, (control) => {
+            return createVNode(unref(NcButton), {
+              key: control.id,
+              "data-test": `tab-${control.id}`,
+              pressed: activeCropControl.value === control.id,
+              disabled: !__props.loaded,
+              variant: "tertiary",
+              onClick: ($event) => activeCropControl.value = control.id
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(control.label), 1)
+              ]),
+              _: 2
+            }, 1032, ["data-test", "pressed", "disabled", "onClick"]);
+          }), 64)),
+          _cache[7] || (_cache[7] = createElementVNode("span", { class: "crop-panel__divider" }, null, -1)),
+          createVNode(unref(NcButton), {
+            "data-test": "reset-crop",
+            variant: "tertiary",
+            disabled: !__props.loaded || unref(context).state.value.crop === null,
+            onClick: _cache[4] || (_cache[4] = ($event) => unref(commands).resetCrop())
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(labels.resetCrop), 1)
+            ]),
+            _: 1
+          }, 8, ["disabled"]),
+          createVNode(unref(NcButton), {
+            "data-test": "apply-crop",
+            variant: "secondary",
+            disabled: !__props.loaded,
+            onClick: _cache[5] || (_cache[5] = ($event) => unref(commands).applyCrop())
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(labels.applyCrop), 1)
+            ]),
+            _: 1
+          }, 8, ["disabled"])
+        ]),
+        activeCropControl.value === "rotation" ? (openBlock(), createBlock(EditorSlider, {
+          key: 0,
+          value: unref(context).state.value.fineRotation,
+          min: -45,
+          max: 45,
+          step: 1,
+          label: labels.rotation,
+          display: display.value,
+          "data-test": "fine-rotation",
+          disabled: !__props.loaded,
+          onInput: onTransformInput,
+          onCommit: onSliderCommit
+        }, null, 8, ["value", "label", "display", "disabled"])) : (openBlock(), createBlock(EditorSlider, {
+          key: 1,
+          value: unref(context).state.value.zoom,
+          min: 1,
+          max: 3,
+          step: 0.05,
+          label: labels.scale,
+          display: display.value,
+          "data-test": "zoom",
+          disabled: !__props.loaded,
+          onInput: onTransformInput,
+          onCommit: onSliderCommit
+        }, null, 8, ["value", "label", "display", "disabled"]))
+      ]);
+    };
+  }
+});
+const CropPanel = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["__scopeId", "data-v-30fdb9f8"]]);
+const _hoisted_1$n = ["disabled", "data-test", "aria-pressed", "title"];
+const _hoisted_2$j = ["src", "alt"];
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
+  __name: "PresetChip",
+  props: {
+    url: {},
+    label: {},
+    active: { type: Boolean },
+    disabled: { type: Boolean },
+    dataTest: {}
+  },
+  emits: ["click"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("button", {
+        type: "button",
+        class: normalizeClass(["preset-chip", { "preset-chip--active": __props.active }]),
+        disabled: __props.disabled,
+        "data-test": __props.dataTest,
+        "aria-pressed": __props.active,
+        title: __props.label,
+        onClick: _cache[0] || (_cache[0] = ($event) => emit("click"))
+      }, [
+        createElementVNode("img", {
+          src: __props.url,
+          alt: __props.label
+        }, null, 8, _hoisted_2$j),
+        createElementVNode("span", null, toDisplayString(__props.label), 1)
+      ], 10, _hoisted_1$n);
+    };
+  }
+});
+const PresetChip = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["__scopeId", "data-v-b38cdab1"]]);
+function luma(r, g, b) {
+  return 0.299 * r + 0.587 * g + 0.114 * b;
+}
+function saturate(imageData) {
+  const { data } = imageData;
+  const factor = this.saturation() + 1;
+  for (let i = 0; i < data.length; i += 4) {
+    const gray = luma(data[i], data[i + 1], data[i + 2]);
+    data[i] = gray + (data[i] - gray) * factor;
+    data[i + 1] = gray + (data[i + 1] - gray) * factor;
+    data[i + 2] = gray + (data[i + 2] - gray) * factor;
+  }
+}
+function warm(imageData) {
+  const { data } = imageData;
+  for (let i = 0; i < data.length; i += 4) {
+    data[i] = Math.min(255, data[i] * 1.12);
+    data[i + 2] = data[i + 2] * 0.9;
+  }
+}
+function cool(imageData) {
+  const { data } = imageData;
+  for (let i = 0; i < data.length; i += 4) {
+    data[i] = data[i] * 0.9;
+    data[i + 2] = Math.min(255, data[i + 2] * 1.12);
+  }
+}
+function fade(imageData) {
+  const { data } = imageData;
+  for (let i = 0; i < data.length; i += 4) {
+    const luma2 = 0.299 * data[i] + 0.587 * data[i + 1] + 0.114 * data[i + 2];
+    data[i] = 28 + (0.7 * data[i] + 0.3 * luma2) * 0.86 * 1.04;
+    data[i + 1] = 28 + (0.7 * data[i + 1] + 0.3 * luma2) * 0.86;
+    data[i + 2] = 28 + (0.7 * data[i + 2] + 0.3 * luma2) * 0.86 * 0.96;
+  }
+}
+function noir(imageData) {
+  const { data } = imageData;
+  for (let i = 0; i < data.length; i += 4) {
+    const luma2 = 0.299 * data[i] + 0.587 * data[i + 1] + 0.114 * data[i + 2];
+    const value = Math.min(255, Math.max(0, (luma2 - 128) * 1.35 + 118));
+    data[i] = value;
+    data[i + 1] = value;
+    data[i + 2] = value;
+  }
+}
+function golden(imageData) {
+  const { data } = imageData;
+  for (let i = 0; i < data.length; i += 4) {
+    data[i] = data[i] * 1.12 + 12;
+    data[i + 1] = data[i + 1] * 1.04 + 5;
+    data[i + 2] = data[i + 2] * 0.82;
+  }
+}
+function coast(imageData) {
+  const { data } = imageData;
+  for (let i = 0; i < data.length; i += 4) {
+    const luma2 = 0.299 * data[i] + 0.587 * data[i + 1] + 0.114 * data[i + 2];
+    const shadow = Math.max(0, 1 - luma2 / 140);
+    data[i] = (data[i] - 128) * 1.12 + 132;
+    data[i + 1] = (data[i + 1] - 128) * 1.12 + 132 + 10 * shadow;
+    data[i + 2] = (data[i + 2] - 128) * 1.12 + 132 + 22 * shadow;
+  }
+}
+function mist(imageData) {
+  const { data } = imageData;
+  for (let i = 0; i < data.length; i += 4) {
+    const luma2 = 0.299 * data[i] + 0.587 * data[i + 1] + 0.114 * data[i + 2];
+    data[i] = 22 + (0.6 * data[i] + 0.4 * luma2) * 0.84;
+    data[i + 1] = 22 + (0.6 * data[i + 1] + 0.4 * luma2) * 0.84;
+    data[i + 2] = 26 + (0.6 * data[i + 2] + 0.4 * luma2) * 0.84;
+  }
+}
+function berry(imageData) {
+  const { data } = imageData;
+  for (let i = 0; i < data.length; i += 4) {
+    data[i] = (data[i] - 128) * 1.08 + 128 + 10;
+    data[i + 1] = (data[i + 1] - 128) * 1.08 + 128 - 12;
+    data[i + 2] = (data[i + 2] - 128) * 1.08 + 128 + 8;
+  }
+}
+function cinema(imageData) {
+  const { data } = imageData;
+  for (let i = 0; i < data.length; i += 4) {
+    const luma2 = 0.299 * data[i] + 0.587 * data[i + 1] + 0.114 * data[i + 2];
+    const balance = (luma2 - 128) / 128;
+    data[i] = (data[i] - 128) * 1.06 + 128 + 16 * balance;
+    data[i + 1] = (data[i + 1] - 128) * 1.06 + 128;
+    data[i + 2] = (data[i + 2] - 128) * 1.06 + 128 - 20 * balance;
+  }
+}
+function luna(imageData) {
+  const { data } = imageData;
+  for (let i = 0; i < data.length; i += 4) {
+    const luma2 = 0.299 * data[i] + 0.587 * data[i + 1] + 0.114 * data[i + 2];
+    const value = 18 + luma2 * 0.9;
+    data[i] = value;
+    data[i + 1] = value;
+    data[i + 2] = value + 4;
+  }
+}
+function visibleRect(state, oriented) {
+  return state.crop ?? { x: 0, y: 0, ...oriented };
+}
+function context2d(canvas) {
+  const context = canvas.getContext("2d");
+  if (context === null) {
+    throw new Error("Canvas 2D context unavailable");
+  }
+  return context;
+}
+function supportsContextFilter(context) {
+  if (context === null) {
+    return false;
+  }
+  context.filter = "blur(1px)";
+  return context.filter !== "none";
+}
+let contextFilterSupport = null;
+function contextFilterAvailable() {
+  contextFilterSupport ??= supportsContextFilter(document.createElement("canvas").getContext("2d"));
+  return contextFilterSupport;
+}
+function obfuscate(oriented, rect, style) {
+  const strength = Math.max(4, Math.round(Math.min(oriented.width, oriented.height) / 40));
+  const out = document.createElement("canvas");
+  out.width = Math.max(1, Math.ceil(rect.width));
+  out.height = Math.max(1, Math.ceil(rect.height));
+  const context = context2d(out);
+  if (style === "blur" && contextFilterAvailable()) {
+    const pad = strength * 2;
+    context.filter = `blur(${strength}px)`;
+    context.drawImage(
+      oriented,
+      rect.x - pad,
+      rect.y - pad,
+      rect.width + pad * 2,
+      rect.height + pad * 2,
+      -pad,
+      -pad,
+      out.width + pad * 2,
+      out.height + pad * 2
+    );
+    return out;
+  }
+  const small = document.createElement("canvas");
+  small.width = Math.max(1, Math.ceil(rect.width / strength));
+  small.height = Math.max(1, Math.ceil(rect.height / strength));
+  context2d(small).drawImage(oriented, rect.x, rect.y, rect.width, rect.height, 0, 0, small.width, small.height);
+  context.imageSmoothingEnabled = false;
+  context.drawImage(small, 0, 0, out.width, out.height);
+  return out;
+}
+function buildAnnotationNode(annotation, oriented) {
+  const base = { id: annotation.id, name: "annotation" };
+  switch (annotation.type) {
+    case "draw":
+      return new Konva.Line({
+        ...base,
+        points: annotation.points,
+        stroke: annotation.color,
+        strokeWidth: annotation.strokeWidth,
+        lineCap: "round",
+        lineJoin: "round"
+      });
+    case "arrow":
+      return new Konva.Arrow({
+        ...base,
+        points: [...annotation.points],
+        stroke: annotation.color,
+        fill: annotation.color,
+        strokeWidth: annotation.strokeWidth,
+        pointerLength: annotation.strokeWidth * 4,
+        pointerWidth: annotation.strokeWidth * 4
+      });
+    case "rectangle":
+      return new Konva.Rect({
+        ...base,
+        ...annotation.rect,
+        rotation: annotation.rotation,
+        stroke: annotation.color,
+        strokeWidth: annotation.strokeWidth
+      });
+    case "ellipse":
+      return new Konva.Ellipse({
+        ...base,
+        x: annotation.rect.x,
+        y: annotation.rect.y,
+        offsetX: -annotation.rect.width / 2,
+        offsetY: -annotation.rect.height / 2,
+        radiusX: annotation.rect.width / 2,
+        radiusY: annotation.rect.height / 2,
+        rotation: annotation.rotation,
+        stroke: annotation.color,
+        strokeWidth: annotation.strokeWidth
+      });
+    case "text":
+    case "sticker":
+      return new Konva.Text({
+        ...base,
+        x: annotation.x,
+        y: annotation.y,
+        text: annotation.text,
+        fill: annotation.color,
+        fontSize: annotation.fontSize,
+        rotation: annotation.rotation,
+        // Kept in sync with the text overlay for WYSIWYG editing
+        fontFamily: "Helvetica, Arial, sans-serif"
+      });
+    case "redact": {
+      if (oriented === void 0) {
+        throw new Error("Redaction requires the oriented image");
+      }
+      return new Konva.Image({
+        ...base,
+        image: obfuscate(oriented, annotation.rect, annotation.style),
+        x: annotation.rect.x,
+        y: annotation.rect.y
+      });
+    }
+  }
+}
+function applyFilters(node, state, pixelRatio = 1) {
+  const { brightness, contrast, saturation } = state.adjustments;
+  const filters = [];
+  if (brightness !== 0) {
+    filters.push(Konva.Filters.Brighten);
+  }
+  if (contrast !== 0) {
+    filters.push(Konva.Filters.Contrast);
+  }
+  if (saturation !== 0) {
+    filters.push(saturate);
+  }
+  const presetFilters = {
+    none: null,
+    grayscale: Konva.Filters.Grayscale,
+    noir,
+    luna,
+    sepia: Konva.Filters.Sepia,
+    fade,
+    warm,
+    cool,
+    golden,
+    coast,
+    mist,
+    berry,
+    cinema,
+    invert: Konva.Filters.Invert,
+    solarize: Konva.Filters.Solarize,
+    posterize: Konva.Filters.Posterize,
+    pop: Konva.Filters.Enhance
+  }[state.preset];
+  if (presetFilters !== null) {
+    filters.push(presetFilters);
+  }
+  if (filters.length === 0) {
+    node.filters([]);
+    node.clearCache();
+    return;
+  }
+  node.filters(filters);
+  node.brightness(brightness / 100);
+  node.contrast(contrast);
+  node.saturation(saturation / 100);
+  if (state.preset === "posterize") {
+    node.levels(0.02);
+  }
+  if (state.preset === "pop") {
+    node.enhance(0.25);
+  }
+  node.cache({ pixelRatio });
+}
+function thumbnailKey(state) {
+  const { crop, adjustments } = state;
+  return [
+    crop?.x,
+    crop?.y,
+    crop?.width,
+    crop?.height,
+    adjustments.brightness,
+    adjustments.contrast,
+    adjustments.saturation
+  ].join("|");
+}
+function presetThumbnail(oriented, state, preset, size = 96) {
+  const visible = visibleRect(state, { width: oriented.width, height: oriented.height });
+  const scale = Math.min(size / visible.width, size / visible.height);
+  const thumb = document.createElement("canvas");
+  thumb.width = Math.max(1, Math.round(visible.width * scale));
+  thumb.height = Math.max(1, Math.round(visible.height * scale));
+  context2d(thumb).drawImage(oriented, visible.x, visible.y, visible.width, visible.height, 0, 0, thumb.width, thumb.height);
+  const stage = new Konva.Stage({
+    container: document.createElement("div"),
+    width: thumb.width,
+    height: thumb.height
+  });
+  try {
+    const node = new Konva.Image({ image: thumb, listening: false });
+    applyFilters(node, { ...state, preset });
+    const layer = new Konva.Layer();
+    layer.add(node);
+    stage.add(layer);
+    return stage.toDataURL();
+  } finally {
+    stage.destroy();
+  }
+}
+function createScene(stage) {
+  const layer = new Konva.Layer();
+  const viewGroup = new Konva.Group({ name: "view" });
+  const contentGroup = new Konva.Group({ name: "content" });
+  const imageNode = new Konva.Image({ image: void 0, listening: false });
+  contentGroup.add(imageNode);
+  viewGroup.add(contentGroup);
+  layer.add(viewGroup);
+  stage.add(layer);
+  const built = /* @__PURE__ */ new Map();
+  let filterKey = "";
+  const update = (oriented, state, options) => {
+    const orientedChanged = imageNode.image() !== oriented;
+    if (orientedChanged) {
+      imageNode.image(oriented);
+    }
+    const origin = options.showCropped ? visibleRect(state, { width: oriented.width, height: oriented.height }) : { x: 0, y: 0 };
+    viewGroup.position({
+      x: options.offset.x - origin.x * options.scale,
+      y: options.offset.y - origin.y * options.scale
+    });
+    viewGroup.scale({ x: options.scale, y: options.scale });
+    if (options.showCropped && state.crop !== null) {
+      viewGroup.clip(state.crop);
+    } else {
+      viewGroup.clipWidth(void 0);
+      viewGroup.clipHeight(void 0);
+    }
+    const pixelRatio = options.fastFilters ? Math.min(1, options.scale * (globalThis.devicePixelRatio || 1)) : 1;
+    const { brightness, contrast, saturation } = state.adjustments;
+    const nextFilterKey = `${brightness}|${contrast}|${saturation}|${state.preset}|${pixelRatio}`;
+    if (orientedChanged || nextFilterKey !== filterKey) {
+      applyFilters(imageNode, state, pixelRatio);
+      filterKey = nextFilterKey;
+    }
+    const seen = /* @__PURE__ */ new Set();
+    for (const annotation of state.annotations) {
+      seen.add(annotation.id);
+      const entry = built.get(annotation.id);
+      if (entry !== void 0 && entry.annotation === annotation && !orientedChanged) {
+        continue;
+      }
+      entry?.node.destroy();
+      const node = buildAnnotationNode(annotation, oriented);
+      contentGroup.add(node);
+      built.set(annotation.id, { annotation, node });
+    }
+    for (const [id, entry] of built) {
+      if (!seen.has(id)) {
+        entry.node.destroy();
+        built.delete(id);
+      }
+    }
+    imageNode.zIndex(0);
+    state.annotations.forEach((annotation, index) => built.get(annotation.id).node.zIndex(index + 1));
+  };
+  return {
+    viewGroup,
+    contentGroup,
+    imageNode,
+    update,
+    destroy: () => {
+      built.clear();
+      layer.destroy();
+    }
+  };
+}
+function renderScene(stage, oriented, state, options) {
+  const scene = createScene(stage);
+  scene.update(oriented, state, options);
+  return scene;
+}
+function renderToCanvas(oriented, state, maxSize) {
+  const visible = visibleRect(state, { width: oriented.width, height: oriented.height });
+  const pixelRatio = maxSize === void 0 ? 1 : Math.min(1, maxSize / Math.max(visible.width, visible.height));
+  const stage = new Konva.Stage({
+    // Detached container: the export stage is never displayed
+    container: document.createElement("div"),
+    width: visible.width,
+    height: visible.height
+  });
+  try {
+    renderScene(stage, oriented, state, {
+      scale: 1,
+      offset: { x: 0, y: 0 },
+      showCropped: true
+    });
+    return stage.toCanvas({ pixelRatio });
+  } finally {
+    stage.destroy();
+  }
+}
+function toImageCoords(pointer, state, oriented, options) {
+  const visible = visibleRect(state, oriented);
+  return {
+    x: (pointer.x - options.offset.x) / options.scale + (options.showCropped ? visible.x : 0),
+    y: (pointer.y - options.offset.y) / options.scale + (options.showCropped ? visible.y : 0)
+  };
+}
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
+  __name: "FilterStrip",
+  props: {
+    loaded: { type: Boolean },
+    oriented: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const context = useEditorContext();
+    const presets = [
+      { id: "none", label: t("No filter") },
+      { id: "pop", label: t("Pop") },
+      { id: "golden", label: t("Golden") },
+      { id: "coast", label: t("Coast") },
+      { id: "cinema", label: t("Cinema") },
+      { id: "berry", label: t("Berry") },
+      { id: "mist", label: t("Mist") },
+      { id: "warm", label: t("Warm") },
+      { id: "cool", label: t("Cool") },
+      { id: "fade", label: t("Fade") },
+      { id: "grayscale", label: t("Grayscale") },
+      { id: "noir", label: t("Noir") },
+      { id: "luna", label: t("Luna") },
+      { id: "sepia", label: t("Sepia") },
+      { id: "invert", label: t("Invert") },
+      { id: "solarize", label: t("Solarize") },
+      { id: "posterize", label: t("Posterize") }
+    ];
+    const presetPreviews = shallowRef([]);
+    watch(
+      [() => props.oriented, () => thumbnailKey(context.state.value)],
+      ([oriented]) => {
+        presetPreviews.value = oriented ? presets.map((preset) => ({
+          ...preset,
+          url: presetThumbnail(oriented, context.state.value, preset.id)
+        })) : [];
+      },
+      { immediate: true }
+    );
+    function setPreset(preset, label) {
+      context.commit({ ...context.state.value, preset }, label);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(GlassSurface, {
+        variant: "strip",
+        class: "filter-strip"
+      }, {
+        default: withCtx(() => [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(presetPreviews.value, (preset) => {
+            return openBlock(), createBlock(PresetChip, {
+              key: preset.id,
+              url: preset.url,
+              label: preset.label,
+              active: unref(context).state.value.preset === preset.id,
+              disabled: !__props.loaded,
+              "data-test": `preset-${preset.id}`,
+              onClick: ($event) => setPreset(preset.id, preset.label)
+            }, null, 8, ["url", "label", "active", "disabled", "data-test", "onClick"]);
+          }), 128))
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+const FilterStrip = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["__scopeId", "data-v-44007efa"]]);
+const _hoisted_1$m = { class: "redact-panel" };
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
+  __name: "RedactPanel",
+  props: {
+    loaded: { type: Boolean }
+  },
+  setup(__props) {
+    const context = useEditorContext();
+    const labels = {
+      pixelate: t("Pixelate"),
+      blur: t("Blur")
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$m, [
+        createVNode(unref(NcButton), {
+          "data-test": "redact-pixelate",
+          pressed: unref(context).redactStyle.value === "pixelate",
+          disabled: !__props.loaded,
+          variant: "tertiary",
+          onClick: _cache[0] || (_cache[0] = ($event) => unref(context).redactStyle.value = "pixelate")
+        }, {
+          default: withCtx(() => [
+            createTextVNode(toDisplayString(labels.pixelate), 1)
+          ]),
+          _: 1
+        }, 8, ["pressed", "disabled"]),
+        createVNode(unref(NcButton), {
+          "data-test": "redact-blur",
+          pressed: unref(context).redactStyle.value === "blur",
+          disabled: !__props.loaded,
+          variant: "tertiary",
+          onClick: _cache[1] || (_cache[1] = ($event) => unref(context).redactStyle.value = "blur")
+        }, {
+          default: withCtx(() => [
+            createTextVNode(toDisplayString(labels.blur), 1)
+          ]),
+          _: 1
+        }, 8, ["pressed", "disabled"])
+      ]);
+    };
+  }
+});
+const RedactPanel = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["__scopeId", "data-v-ac701267"]]);
+const _hoisted_1$l = { class: "select-panel" };
+const _hoisted_2$i = {
+  key: 0,
+  class: "select-panel__option"
+};
+const _hoisted_3$i = ["value", "disabled"];
+const _hoisted_4$i = {
+  key: 1,
+  class: "select-panel__hint"
+};
+const _hoisted_5$1 = {
+  key: 2,
+  class: "select-panel__hint"
+};
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
+  __name: "SelectPanel",
+  props: {
+    loaded: { type: Boolean }
+  },
+  setup(__props) {
+    const context = useEditorContext();
+    const color = useAnnotationColor(context);
+    const colorLabel = t("Color");
+    const hint = t("Click an annotation to move, resize or recolor it");
+    const transformHint = t("Drag to move, use the handles to resize");
+    const selectedAnnotation = computed(() => context.state.value.annotations.find((annotation) => annotation.id === context.selectedId.value) ?? null);
+    const recolorable = computed(() => selectedAnnotation.value !== null && selectedAnnotation.value.type !== "sticker" && selectedAnnotation.value.type !== "redact");
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$l, [
+        recolorable.value ? (openBlock(), createElementBlock("label", _hoisted_2$i, [
+          createTextVNode(toDisplayString(unref(colorLabel)) + " ", 1),
+          createElementVNode("input", {
+            value: unref(context).drawColor.value,
+            type: "color",
+            disabled: !__props.loaded,
+            "data-test": "color",
+            onInput: _cache[0] || (_cache[0] = ($event) => unref(color).preview($event.target.value)),
+            onChange: _cache[1] || (_cache[1] = ($event) => unref(color).commit($event.target.value))
+          }, null, 40, _hoisted_3$i)
+        ])) : selectedAnnotation.value !== null ? (openBlock(), createElementBlock("span", _hoisted_4$i, toDisplayString(unref(transformHint)), 1)) : (openBlock(), createElementBlock("span", _hoisted_5$1, toDisplayString(unref(hint)), 1))
+      ]);
+    };
+  }
+});
+const SelectPanel = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-2ca9996e"]]);
+const _hoisted_1$k = { class: "sticker-panel" };
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
+  __name: "StickerPanel",
+  props: {
+    loaded: { type: Boolean }
+  },
+  setup(__props) {
+    const context = useEditorContext();
+    const moreLabel = t("More emojis");
+    const FALLBACK_STICKERS = ["😀", "😍", "🎉", "👍", "❤️", "⭐", "🔥", "💡", "✅", "❌", "❓", "⚠️"];
+    function frequentStickers() {
+      try {
+        const frequent = emojiSearch("", 12).map((emoji) => emoji.native).filter((native) => typeof native === "string" && native !== "");
+        return frequent.length >= 6 ? frequent : FALLBACK_STICKERS;
+      } catch {
+        return FALLBACK_STICKERS;
+      }
+    }
+    const DEFAULT_STICKERS = frequentStickers();
+    const stickers = computed(() => DEFAULT_STICKERS.includes(context.sticker.value) ? DEFAULT_STICKERS : [context.sticker.value, ...DEFAULT_STICKERS.slice(0, 11)]);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$k, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(stickers.value, (sticker) => {
+          return openBlock(), createBlock(unref(NcButton), {
+            key: sticker,
+            "aria-label": sticker,
+            pressed: unref(context).sticker.value === sticker,
+            disabled: !__props.loaded,
+            class: "sticker-panel__emoji",
+            variant: "tertiary",
+            onClick: ($event) => unref(context).sticker.value = sticker
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(sticker), 1)
+            ]),
+            _: 2
+          }, 1032, ["aria-label", "pressed", "disabled", "onClick"]);
+        }), 128)),
+        createVNode(unref(NcEmojiPicker), {
+          onSelect: _cache[0] || (_cache[0] = ($event) => unref(context).sticker.value = $event)
+        }, {
+          default: withCtx(() => [
+            createVNode(unref(NcButton), {
+              "data-test": "emoji-picker",
+              variant: "tertiary"
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(unref(moreLabel)), 1)
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        })
+      ]);
+    };
+  }
+});
+const StickerPanel = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__scopeId", "data-v-6307599b"]]);
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
+  __name: "EditorPanel",
+  props: {
+    loaded: { type: Boolean },
+    oriented: {}
+  },
+  setup(__props) {
+    const context = useEditorContext();
+    return (_ctx, _cache) => {
+      return unref(context).activeMode.value === "filter" ? (openBlock(), createBlock(FilterStrip, {
+        key: 0,
+        loaded: __props.loaded,
+        oriented: __props.oriented
+      }, null, 8, ["loaded", "oriented"])) : (openBlock(), createBlock(GlassSurface, {
+        key: 1,
+        variant: "card",
+        class: "editor-card"
+      }, {
+        default: withCtx(() => [
+          unref(context).activeMode.value === "crop" ? (openBlock(), createBlock(CropPanel, {
+            key: 0,
+            loaded: __props.loaded
+          }, null, 8, ["loaded"])) : unref(context).activeMode.value === "finetune" ? (openBlock(), createBlock(AdjustPanel, {
+            key: 1,
+            loaded: __props.loaded
+          }, null, 8, ["loaded"])) : unref(context).activeMode.value === "annotate" ? (openBlock(), createBlock(AnnotatePanel, {
+            key: 2,
+            loaded: __props.loaded
+          }, null, 8, ["loaded"])) : unref(context).activeMode.value === "select" ? (openBlock(), createBlock(SelectPanel, {
+            key: 3,
+            loaded: __props.loaded
+          }, null, 8, ["loaded"])) : unref(context).activeMode.value === "sticker" ? (openBlock(), createBlock(StickerPanel, {
+            key: 4,
+            loaded: __props.loaded
+          }, null, 8, ["loaded"])) : unref(context).activeMode.value === "redact" ? (openBlock(), createBlock(RedactPanel, {
+            key: 5,
+            loaded: __props.loaded
+          }, null, 8, ["loaded"])) : createCommentVNode("", true)
+        ]),
+        _: 1
+      }));
+    };
+  }
+});
+const EditorPanel = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["__scopeId", "data-v-3fb85d8f"]]);
+const _sfc_main$k = {
+  name: "BlurIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+const _hoisted_1$j = ["aria-hidden", "aria-label"];
+const _hoisted_2$h = ["fill", "width", "height"];
+const _hoisted_3$h = { d: "M14,8.5A1.5,1.5 0 0,0 12.5,10A1.5,1.5 0 0,0 14,11.5A1.5,1.5 0 0,0 15.5,10A1.5,1.5 0 0,0 14,8.5M14,12.5A1.5,1.5 0 0,0 12.5,14A1.5,1.5 0 0,0 14,15.5A1.5,1.5 0 0,0 15.5,14A1.5,1.5 0 0,0 14,12.5M10,17A1,1 0 0,0 9,18A1,1 0 0,0 10,19A1,1 0 0,0 11,18A1,1 0 0,0 10,17M10,8.5A1.5,1.5 0 0,0 8.5,10A1.5,1.5 0 0,0 10,11.5A1.5,1.5 0 0,0 11.5,10A1.5,1.5 0 0,0 10,8.5M14,20.5A0.5,0.5 0 0,0 13.5,21A0.5,0.5 0 0,0 14,21.5A0.5,0.5 0 0,0 14.5,21A0.5,0.5 0 0,0 14,20.5M14,17A1,1 0 0,0 13,18A1,1 0 0,0 14,19A1,1 0 0,0 15,18A1,1 0 0,0 14,17M21,13.5A0.5,0.5 0 0,0 20.5,14A0.5,0.5 0 0,0 21,14.5A0.5,0.5 0 0,0 21.5,14A0.5,0.5 0 0,0 21,13.5M18,5A1,1 0 0,0 17,6A1,1 0 0,0 18,7A1,1 0 0,0 19,6A1,1 0 0,0 18,5M18,9A1,1 0 0,0 17,10A1,1 0 0,0 18,11A1,1 0 0,0 19,10A1,1 0 0,0 18,9M18,17A1,1 0 0,0 17,18A1,1 0 0,0 18,19A1,1 0 0,0 19,18A1,1 0 0,0 18,17M18,13A1,1 0 0,0 17,14A1,1 0 0,0 18,15A1,1 0 0,0 19,14A1,1 0 0,0 18,13M10,12.5A1.5,1.5 0 0,0 8.5,14A1.5,1.5 0 0,0 10,15.5A1.5,1.5 0 0,0 11.5,14A1.5,1.5 0 0,0 10,12.5M10,7A1,1 0 0,0 11,6A1,1 0 0,0 10,5A1,1 0 0,0 9,6A1,1 0 0,0 10,7M10,3.5A0.5,0.5 0 0,0 10.5,3A0.5,0.5 0 0,0 10,2.5A0.5,0.5 0 0,0 9.5,3A0.5,0.5 0 0,0 10,3.5M10,20.5A0.5,0.5 0 0,0 9.5,21A0.5,0.5 0 0,0 10,21.5A0.5,0.5 0 0,0 10.5,21A0.5,0.5 0 0,0 10,20.5M3,13.5A0.5,0.5 0 0,0 2.5,14A0.5,0.5 0 0,0 3,14.5A0.5,0.5 0 0,0 3.5,14A0.5,0.5 0 0,0 3,13.5M14,3.5A0.5,0.5 0 0,0 14.5,3A0.5,0.5 0 0,0 14,2.5A0.5,0.5 0 0,0 13.5,3A0.5,0.5 0 0,0 14,3.5M14,7A1,1 0 0,0 15,6A1,1 0 0,0 14,5A1,1 0 0,0 13,6A1,1 0 0,0 14,7M21,10.5A0.5,0.5 0 0,0 21.5,10A0.5,0.5 0 0,0 21,9.5A0.5,0.5 0 0,0 20.5,10A0.5,0.5 0 0,0 21,10.5M6,5A1,1 0 0,0 5,6A1,1 0 0,0 6,7A1,1 0 0,0 7,6A1,1 0 0,0 6,5M3,9.5A0.5,0.5 0 0,0 2.5,10A0.5,0.5 0 0,0 3,10.5A0.5,0.5 0 0,0 3.5,10A0.5,0.5 0 0,0 3,9.5M6,9A1,1 0 0,0 5,10A1,1 0 0,0 6,11A1,1 0 0,0 7,10A1,1 0 0,0 6,9M6,17A1,1 0 0,0 5,18A1,1 0 0,0 6,19A1,1 0 0,0 7,18A1,1 0 0,0 6,17M6,13A1,1 0 0,0 5,14A1,1 0 0,0 6,15A1,1 0 0,0 7,14A1,1 0 0,0 6,13Z" };
+const _hoisted_4$h = { key: 0 };
+function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, {
+    "aria-hidden": $props.title ? null : "true",
+    "aria-label": $props.title,
+    class: "material-design-icon blur-icon",
+    role: "img",
+    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
+  }), [
+    (openBlock(), createElementBlock("svg", {
+      fill: $props.fillColor,
+      class: "material-design-icon__svg",
+      width: $props.size,
+      height: $props.size,
+      viewBox: "0 0 24 24"
+    }, [
+      createElementVNode("path", _hoisted_3$h, [
+        $props.title ? (openBlock(), createElementBlock("title", _hoisted_4$h, toDisplayString($props.title), 1)) : createCommentVNode("", true)
+      ])
+    ], 8, _hoisted_2$h))
+  ], 16, _hoisted_1$j);
+}
+const Blur = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["render", _sfc_render$f]]);
+const _sfc_main$j = {
+  name: "CropIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+const _hoisted_1$i = ["aria-hidden", "aria-label"];
+const _hoisted_2$g = ["fill", "width", "height"];
+const _hoisted_3$g = { d: "M7,17V1H5V5H1V7H5V17A2,2 0 0,0 7,19H17V23H19V19H23V17M17,15H19V7C19,5.89 18.1,5 17,5H9V7H17V15Z" };
+const _hoisted_4$g = { key: 0 };
+function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, {
+    "aria-hidden": $props.title ? null : "true",
+    "aria-label": $props.title,
+    class: "material-design-icon crop-icon",
+    role: "img",
+    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
+  }), [
+    (openBlock(), createElementBlock("svg", {
+      fill: $props.fillColor,
+      class: "material-design-icon__svg",
+      width: $props.size,
+      height: $props.size,
+      viewBox: "0 0 24 24"
+    }, [
+      createElementVNode("path", _hoisted_3$g, [
+        $props.title ? (openBlock(), createElementBlock("title", _hoisted_4$g, toDisplayString($props.title), 1)) : createCommentVNode("", true)
+      ])
+    ], 8, _hoisted_2$g))
+  ], 16, _hoisted_1$i);
+}
+const Crop = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$e]]);
+const _sfc_main$i = {
+  name: "CursorDefaultOutlineIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+const _hoisted_1$h = ["aria-hidden", "aria-label"];
+const _hoisted_2$f = ["fill", "width", "height"];
+const _hoisted_3$f = { d: "M10.07,14.27C10.57,14.03 11.16,14.25 11.4,14.75L13.7,19.74L15.5,18.89L13.19,13.91C12.95,13.41 13.17,12.81 13.67,12.58L13.95,12.5L16.25,12.05L8,5.12V15.9L9.82,14.43L10.07,14.27M13.64,21.97C13.14,22.21 12.54,22 12.31,21.5L10.13,16.76L7.62,18.78C7.45,18.92 7.24,19 7,19A1,1 0 0,1 6,18V3A1,1 0 0,1 7,2C7.24,2 7.47,2.09 7.64,2.23L7.65,2.22L19.14,11.86C19.57,12.22 19.62,12.85 19.27,13.27C19.12,13.45 18.91,13.57 18.7,13.61L15.54,14.23L17.74,18.96C18,19.46 17.76,20.05 17.26,20.28L13.64,21.97Z" };
+const _hoisted_4$f = { key: 0 };
+function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, {
+    "aria-hidden": $props.title ? null : "true",
+    "aria-label": $props.title,
+    class: "material-design-icon cursor-default-outline-icon",
+    role: "img",
+    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
+  }), [
+    (openBlock(), createElementBlock("svg", {
+      fill: $props.fillColor,
+      class: "material-design-icon__svg",
+      width: $props.size,
+      height: $props.size,
+      viewBox: "0 0 24 24"
+    }, [
+      createElementVNode("path", _hoisted_3$f, [
+        $props.title ? (openBlock(), createElementBlock("title", _hoisted_4$f, toDisplayString($props.title), 1)) : createCommentVNode("", true)
+      ])
+    ], 8, _hoisted_2$f))
+  ], 16, _hoisted_1$h);
+}
+const CursorDefaultOutline = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render$d]]);
+const _sfc_main$h = {
+  name: "PaletteOutlineIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+const _hoisted_1$g = ["aria-hidden", "aria-label"];
+const _hoisted_2$e = ["fill", "width", "height"];
+const _hoisted_3$e = { d: "M12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2C17.5,2 22,6 22,11A6,6 0 0,1 16,17H14.2C13.9,17 13.7,17.2 13.7,17.5C13.7,17.6 13.8,17.7 13.8,17.8C14.2,18.3 14.4,18.9 14.4,19.5C14.5,20.9 13.4,22 12,22M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20C12.3,20 12.5,19.8 12.5,19.5C12.5,19.3 12.4,19.2 12.4,19.1C12,18.6 11.8,18.1 11.8,17.5C11.8,16.1 12.9,15 14.3,15H16A4,4 0 0,0 20,11C20,7.1 16.4,4 12,4M6.5,10C7.3,10 8,10.7 8,11.5C8,12.3 7.3,13 6.5,13C5.7,13 5,12.3 5,11.5C5,10.7 5.7,10 6.5,10M9.5,6C10.3,6 11,6.7 11,7.5C11,8.3 10.3,9 9.5,9C8.7,9 8,8.3 8,7.5C8,6.7 8.7,6 9.5,6M14.5,6C15.3,6 16,6.7 16,7.5C16,8.3 15.3,9 14.5,9C13.7,9 13,8.3 13,7.5C13,6.7 13.7,6 14.5,6M17.5,10C18.3,10 19,10.7 19,11.5C19,12.3 18.3,13 17.5,13C16.7,13 16,12.3 16,11.5C16,10.7 16.7,10 17.5,10Z" };
+const _hoisted_4$e = { key: 0 };
+function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, {
+    "aria-hidden": $props.title ? null : "true",
+    "aria-label": $props.title,
+    class: "material-design-icon palette-outline-icon",
+    role: "img",
+    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
+  }), [
+    (openBlock(), createElementBlock("svg", {
+      fill: $props.fillColor,
+      class: "material-design-icon__svg",
+      width: $props.size,
+      height: $props.size,
+      viewBox: "0 0 24 24"
+    }, [
+      createElementVNode("path", _hoisted_3$e, [
+        $props.title ? (openBlock(), createElementBlock("title", _hoisted_4$e, toDisplayString($props.title), 1)) : createCommentVNode("", true)
+      ])
+    ], 8, _hoisted_2$e))
+  ], 16, _hoisted_1$g);
+}
+const PaletteOutline = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", _sfc_render$c]]);
+const _sfc_main$g = {
+  name: "StickerEmojiIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+const _hoisted_1$f = ["aria-hidden", "aria-label"];
+const _hoisted_2$d = ["fill", "width", "height"];
+const _hoisted_3$d = { d: "M5.5,2C3.56,2 2,3.56 2,5.5V18.5C2,20.44 3.56,22 5.5,22H16L22,16V5.5C22,3.56 20.44,2 18.5,2H5.5M5.75,4H18.25A1.75,1.75 0 0,1 20,5.75V15H18.5C16.56,15 15,16.56 15,18.5V20H5.75A1.75,1.75 0 0,1 4,18.25V5.75A1.75,1.75 0 0,1 5.75,4M14.44,6.77C14.28,6.77 14.12,6.79 13.97,6.83C13.03,7.09 12.5,8.05 12.74,9C12.79,9.15 12.86,9.3 12.95,9.44L16.18,8.56C16.18,8.39 16.16,8.22 16.12,8.05C15.91,7.3 15.22,6.77 14.44,6.77M8.17,8.5C8,8.5 7.85,8.5 7.7,8.55C6.77,8.81 6.22,9.77 6.47,10.7C6.5,10.86 6.59,11 6.68,11.16L9.91,10.28C9.91,10.11 9.89,9.94 9.85,9.78C9.64,9 8.95,8.5 8.17,8.5M16.72,11.26L7.59,13.77C8.91,15.3 11,15.94 12.95,15.41C14.9,14.87 16.36,13.25 16.72,11.26Z" };
+const _hoisted_4$d = { key: 0 };
+function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, {
+    "aria-hidden": $props.title ? null : "true",
+    "aria-label": $props.title,
+    class: "material-design-icon sticker-emoji-icon",
+    role: "img",
+    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
+  }), [
+    (openBlock(), createElementBlock("svg", {
+      fill: $props.fillColor,
+      class: "material-design-icon__svg",
+      width: $props.size,
+      height: $props.size,
+      viewBox: "0 0 24 24"
+    }, [
+      createElementVNode("path", _hoisted_3$d, [
+        $props.title ? (openBlock(), createElementBlock("title", _hoisted_4$d, toDisplayString($props.title), 1)) : createCommentVNode("", true)
+      ])
+    ], 8, _hoisted_2$d))
+  ], 16, _hoisted_1$f);
+}
+const StickerEmoji = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", _sfc_render$b]]);
+const _sfc_main$f = {
+  name: "TuneIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+const _hoisted_1$e = ["aria-hidden", "aria-label"];
+const _hoisted_2$c = ["fill", "width", "height"];
+const _hoisted_3$c = { d: "M3,17V19H9V17H3M3,5V7H13V5H3M13,21V19H21V17H13V15H11V21H13M7,9V11H3V13H7V15H9V9H7M21,13V11H11V13H21M15,9H17V7H21V5H17V3H15V9Z" };
+const _hoisted_4$c = { key: 0 };
+function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, {
+    "aria-hidden": $props.title ? null : "true",
+    "aria-label": $props.title,
+    class: "material-design-icon tune-icon",
+    role: "img",
+    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
+  }), [
+    (openBlock(), createElementBlock("svg", {
+      fill: $props.fillColor,
+      class: "material-design-icon__svg",
+      width: $props.size,
+      height: $props.size,
+      viewBox: "0 0 24 24"
+    }, [
+      createElementVNode("path", _hoisted_3$c, [
+        $props.title ? (openBlock(), createElementBlock("title", _hoisted_4$c, toDisplayString($props.title), 1)) : createCommentVNode("", true)
+      ])
+    ], 8, _hoisted_2$c))
+  ], 16, _hoisted_1$e);
+}
+const Tune = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["render", _sfc_render$a]]);
+const _hoisted_1$d = { class: "editor-sidebar" };
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
+  __name: "EditorSidebar",
+  props: {
+    loaded: { type: Boolean }
+  },
+  setup(__props) {
+    const context = useEditorContext();
+    const modes = [
+      { id: "select", label: t("Select"), icon: CursorDefaultOutline },
+      { id: "crop", label: t("Crop"), icon: Crop },
+      { id: "finetune", label: t("Adjust"), icon: Tune },
+      { id: "filter", label: t("Filter"), icon: PaletteOutline },
+      { id: "annotate", label: t("Annotate"), icon: Pencil },
+      { id: "sticker", label: t("Sticker"), icon: StickerEmoji },
+      { id: "redact", label: t("Redact"), icon: Blur }
+    ];
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("nav", _hoisted_1$d, [
+        (openBlock(), createElementBlock(Fragment, null, renderList(modes, (mode) => {
+          return createVNode(IconTab, {
+            key: mode.id,
+            label: mode.label,
+            active: unref(context).activeMode.value === mode.id,
+            disabled: !__props.loaded,
+            onClick: ($event) => unref(context).setMode(mode.id)
+          }, {
+            default: withCtx(() => [
+              (openBlock(), createBlock(resolveDynamicComponent(mode.icon), { size: 20 }))
+            ]),
+            _: 2
+          }, 1032, ["label", "active", "disabled", "onClick"]);
+        }), 64))
+      ]);
+    };
+  }
+});
+const EditorSidebar = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__scopeId", "data-v-a4223674"]]);
+const _sfc_main$d = {
+  name: "CheckIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+const _hoisted_1$c = ["aria-hidden", "aria-label"];
+const _hoisted_2$b = ["fill", "width", "height"];
+const _hoisted_3$b = { d: "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" };
+const _hoisted_4$b = { key: 0 };
+function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, {
+    "aria-hidden": $props.title ? null : "true",
+    "aria-label": $props.title,
+    class: "material-design-icon check-icon",
+    role: "img",
+    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
+  }), [
+    (openBlock(), createElementBlock("svg", {
+      fill: $props.fillColor,
+      class: "material-design-icon__svg",
+      width: $props.size,
+      height: $props.size,
+      viewBox: "0 0 24 24"
+    }, [
+      createElementVNode("path", _hoisted_3$b, [
+        $props.title ? (openBlock(), createElementBlock("title", _hoisted_4$b, toDisplayString($props.title), 1)) : createCommentVNode("", true)
+      ])
+    ], 8, _hoisted_2$b))
+  ], 16, _hoisted_1$c);
+}
+const Check = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$9]]);
+const _sfc_main$c = {
+  name: "CloseIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+const _hoisted_1$b = ["aria-hidden", "aria-label"];
+const _hoisted_2$a = ["fill", "width", "height"];
+const _hoisted_3$a = { d: "M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" };
+const _hoisted_4$a = { key: 0 };
+function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, {
+    "aria-hidden": $props.title ? null : "true",
+    "aria-label": $props.title,
+    class: "material-design-icon close-icon",
+    role: "img",
+    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
+  }), [
+    (openBlock(), createElementBlock("svg", {
+      fill: $props.fillColor,
+      class: "material-design-icon__svg",
+      width: $props.size,
+      height: $props.size,
+      viewBox: "0 0 24 24"
+    }, [
+      createElementVNode("path", _hoisted_3$a, [
+        $props.title ? (openBlock(), createElementBlock("title", _hoisted_4$a, toDisplayString($props.title), 1)) : createCommentVNode("", true)
+      ])
+    ], 8, _hoisted_2$a))
+  ], 16, _hoisted_1$b);
+}
+const Close = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render$8]]);
+const _sfc_main$b = {
+  name: "HistoryIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+const _hoisted_1$a = ["aria-hidden", "aria-label"];
+const _hoisted_2$9 = ["fill", "width", "height"];
+const _hoisted_3$9 = { d: "M13.5,8H12V13L16.28,15.54L17,14.33L13.5,12.25V8M13,3A9,9 0 0,0 4,12H1L4.96,16.03L9,12H6A7,7 0 0,1 13,5A7,7 0 0,1 20,12A7,7 0 0,1 13,19C11.07,19 9.32,18.21 8.06,16.94L6.64,18.36C8.27,20 10.5,21 13,21A9,9 0 0,0 22,12A9,9 0 0,0 13,3" };
+const _hoisted_4$9 = { key: 0 };
+function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, {
+    "aria-hidden": $props.title ? null : "true",
+    "aria-label": $props.title,
+    class: "material-design-icon history-icon",
+    role: "img",
+    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
+  }), [
+    (openBlock(), createElementBlock("svg", {
+      fill: $props.fillColor,
+      class: "material-design-icon__svg",
+      width: $props.size,
+      height: $props.size,
+      viewBox: "0 0 24 24"
+    }, [
+      createElementVNode("path", _hoisted_3$9, [
+        $props.title ? (openBlock(), createElementBlock("title", _hoisted_4$9, toDisplayString($props.title), 1)) : createCommentVNode("", true)
+      ])
+    ], 8, _hoisted_2$9))
+  ], 16, _hoisted_1$a);
+}
+const HistoryIcon = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", _sfc_render$7]]);
+const _sfc_main$a = {
+  name: "MagnifyMinusOutlineIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+const _hoisted_1$9 = ["aria-hidden", "aria-label"];
+const _hoisted_2$8 = ["fill", "width", "height"];
+const _hoisted_3$8 = { d: "M15.5,14H14.71L14.43,13.73C15.41,12.59 16,11.11 16,9.5A6.5,6.5 0 0,0 9.5,3A6.5,6.5 0 0,0 3,9.5A6.5,6.5 0 0,0 9.5,16C11.11,16 12.59,15.41 13.73,14.43L14,14.71V15.5L19,20.5L20.5,19L15.5,14M9.5,14C7,14 5,12 5,9.5C5,7 7,5 9.5,5C12,5 14,7 14,9.5C14,12 12,14 9.5,14M7,9H12V10H7V9Z" };
+const _hoisted_4$8 = { key: 0 };
+function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, {
+    "aria-hidden": $props.title ? null : "true",
+    "aria-label": $props.title,
+    class: "material-design-icon magnify-minus-outline-icon",
+    role: "img",
+    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
+  }), [
+    (openBlock(), createElementBlock("svg", {
+      fill: $props.fillColor,
+      class: "material-design-icon__svg",
+      width: $props.size,
+      height: $props.size,
+      viewBox: "0 0 24 24"
+    }, [
+      createElementVNode("path", _hoisted_3$8, [
+        $props.title ? (openBlock(), createElementBlock("title", _hoisted_4$8, toDisplayString($props.title), 1)) : createCommentVNode("", true)
+      ])
+    ], 8, _hoisted_2$8))
+  ], 16, _hoisted_1$9);
+}
+const MagnifyMinusOutline = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$6]]);
+const _sfc_main$9 = {
+  name: "MagnifyPlusOutlineIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+const _hoisted_1$8 = ["aria-hidden", "aria-label"];
+const _hoisted_2$7 = ["fill", "width", "height"];
+const _hoisted_3$7 = { d: "M15.5,14L20.5,19L19,20.5L14,15.5V14.71L13.73,14.43C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.43,13.73L14.71,14H15.5M9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14M12,10H10V12H9V10H7V9H9V7H10V9H12V10Z" };
+const _hoisted_4$7 = { key: 0 };
+function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, {
+    "aria-hidden": $props.title ? null : "true",
+    "aria-label": $props.title,
+    class: "material-design-icon magnify-plus-outline-icon",
+    role: "img",
+    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
+  }), [
+    (openBlock(), createElementBlock("svg", {
+      fill: $props.fillColor,
+      class: "material-design-icon__svg",
+      width: $props.size,
+      height: $props.size,
+      viewBox: "0 0 24 24"
+    }, [
+      createElementVNode("path", _hoisted_3$7, [
+        $props.title ? (openBlock(), createElementBlock("title", _hoisted_4$7, toDisplayString($props.title), 1)) : createCommentVNode("", true)
+      ])
+    ], 8, _hoisted_2$7))
+  ], 16, _hoisted_1$8);
+}
+const MagnifyPlusOutline = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$5]]);
+const _sfc_main$8 = {
+  name: "RedoIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+const _hoisted_1$7 = ["aria-hidden", "aria-label"];
+const _hoisted_2$6 = ["fill", "width", "height"];
+const _hoisted_3$6 = { d: "M18.4,10.6C16.55,9 14.15,8 11.5,8C6.85,8 2.92,11.03 1.54,15.22L3.9,16C4.95,12.81 7.95,10.5 11.5,10.5C13.45,10.5 15.23,11.22 16.62,12.38L13,16H22V7L18.4,10.6Z" };
+const _hoisted_4$6 = { key: 0 };
+function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, {
+    "aria-hidden": $props.title ? null : "true",
+    "aria-label": $props.title,
+    class: "material-design-icon redo-icon",
+    role: "img",
+    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
+  }), [
+    (openBlock(), createElementBlock("svg", {
+      fill: $props.fillColor,
+      class: "material-design-icon__svg",
+      width: $props.size,
+      height: $props.size,
+      viewBox: "0 0 24 24"
+    }, [
+      createElementVNode("path", _hoisted_3$6, [
+        $props.title ? (openBlock(), createElementBlock("title", _hoisted_4$6, toDisplayString($props.title), 1)) : createCommentVNode("", true)
+      ])
+    ], 8, _hoisted_2$6))
+  ], 16, _hoisted_1$7);
+}
+const Redo = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$4]]);
+const _sfc_main$7 = {
+  name: "RestoreIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+const _hoisted_1$6 = ["aria-hidden", "aria-label"];
+const _hoisted_2$5 = ["fill", "width", "height"];
+const _hoisted_3$5 = { d: "M13,3A9,9 0 0,0 4,12H1L4.89,15.89L4.96,16.03L9,12H6A7,7 0 0,1 13,5A7,7 0 0,1 20,12A7,7 0 0,1 13,19C11.07,19 9.32,18.21 8.06,16.94L6.64,18.36C8.27,20 10.5,21 13,21A9,9 0 0,0 22,12A9,9 0 0,0 13,3Z" };
+const _hoisted_4$5 = { key: 0 };
+function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, {
+    "aria-hidden": $props.title ? null : "true",
+    "aria-label": $props.title,
+    class: "material-design-icon restore-icon",
+    role: "img",
+    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
+  }), [
+    (openBlock(), createElementBlock("svg", {
+      fill: $props.fillColor,
+      class: "material-design-icon__svg",
+      width: $props.size,
+      height: $props.size,
+      viewBox: "0 0 24 24"
+    }, [
+      createElementVNode("path", _hoisted_3$5, [
+        $props.title ? (openBlock(), createElementBlock("title", _hoisted_4$5, toDisplayString($props.title), 1)) : createCommentVNode("", true)
+      ])
+    ], 8, _hoisted_2$5))
+  ], 16, _hoisted_1$6);
+}
+const Restore = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$3]]);
+const _sfc_main$6 = {
+  name: "UndoIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+const _hoisted_1$5 = ["aria-hidden", "aria-label"];
+const _hoisted_2$4 = ["fill", "width", "height"];
+const _hoisted_3$4 = { d: "M12.5,8C9.85,8 7.45,9 5.6,10.6L2,7V16H11L7.38,12.38C8.77,11.22 10.54,10.5 12.5,10.5C16.04,10.5 19.05,12.81 20.1,16L22.47,15.22C21.08,11.03 17.15,8 12.5,8Z" };
+const _hoisted_4$4 = { key: 0 };
+function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, {
+    "aria-hidden": $props.title ? null : "true",
+    "aria-label": $props.title,
+    class: "material-design-icon undo-icon",
+    role: "img",
+    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
+  }), [
+    (openBlock(), createElementBlock("svg", {
+      fill: $props.fillColor,
+      class: "material-design-icon__svg",
+      width: $props.size,
+      height: $props.size,
+      viewBox: "0 0 24 24"
+    }, [
+      createElementVNode("path", _hoisted_3$4, [
+        $props.title ? (openBlock(), createElementBlock("title", _hoisted_4$4, toDisplayString($props.title), 1)) : createCommentVNode("", true)
+      ])
+    ], 8, _hoisted_2$4))
+  ], 16, _hoisted_1$5);
+}
+const Undo = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render$2]]);
+const _hoisted_1$4 = { class: "editor-topbar" };
+const _hoisted_2$3 = { class: "editor-topbar__history" };
+const _hoisted_3$3 = ["aria-label", "title", "disabled"];
+const _hoisted_4$3 = { class: "editor-topbar__actions" };
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+  __name: "EditorTopBar",
+  props: {
+    loaded: { type: Boolean }
+  },
+  emits: ["save", "cancel"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const context = useEditorContext();
+    const commands = useEditorCommands();
+    const labels = {
+      undo: t("Undo"),
+      redo: t("Redo"),
+      revert: t("Revert all changes"),
+      revertText: t("All edits will be discarded. This cannot be undone by closing the dialog."),
+      zoomIn: t("Zoom in"),
+      zoomOut: t("Zoom out"),
+      resetZoom: t("Reset zoom"),
+      save: t("Save"),
+      cancel: t("Cancel"),
+      history: t("Edit history"),
+      step: t("Edit")
+    };
+    const historySteps = computed(() => context.historyEntries.value.map((entry, index) => ({
+      index,
+      label: entry.label ?? labels.step,
+      active: index === context.historyIndex.value
+    })).reverse());
+    function stepZoom(direction) {
+      const factor = direction === 1 ? 1.5 : 1 / 1.5;
+      context.setViewZoom(context.viewZoom.value * factor);
+    }
+    function resetZoom() {
+      context.setViewZoom(MIN_ZOOM);
+    }
+    async function onRevert() {
+      if (await showConfirmation({
+        name: labels.revert,
+        text: labels.revertText,
+        labelConfirm: labels.revert,
+        labelReject: labels.cancel,
+        severity: "warning"
+      })) {
+        commands.revert();
+      }
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$4, [
+        _cache[9] || (_cache[9] = createElementVNode("span", { class: "editor-topbar__spacer" }, null, -1)),
+        createElementVNode("div", _hoisted_2$3, [
+          createVNode(unref(NcButton), {
+            "data-test": "revert",
+            "aria-label": labels.revert,
+            title: labels.revert,
+            disabled: !__props.loaded || !unref(context).canUndo.value,
+            variant: "tertiary",
+            onClick: onRevert
+          }, {
+            icon: withCtx(() => [
+              createVNode(Restore, { size: 20 })
+            ]),
+            _: 1
+          }, 8, ["aria-label", "title", "disabled"]),
+          _cache[7] || (_cache[7] = createElementVNode("span", { class: "editor-topbar__separator" }, null, -1)),
+          createVNode(unref(NcButton), {
+            "aria-label": labels.undo,
+            title: labels.undo,
+            disabled: !__props.loaded || !unref(context).canUndo.value,
+            variant: "tertiary",
+            onClick: _cache[0] || (_cache[0] = ($event) => unref(context).undo())
+          }, {
+            icon: withCtx(() => [
+              createVNode(Undo, { size: 20 })
+            ]),
+            _: 1
+          }, 8, ["aria-label", "title", "disabled"]),
+          createVNode(unref(NcButton), {
+            "aria-label": labels.redo,
+            title: labels.redo,
+            disabled: !__props.loaded || !unref(context).canRedo.value,
+            variant: "tertiary",
+            onClick: _cache[1] || (_cache[1] = ($event) => unref(context).redo())
+          }, {
+            icon: withCtx(() => [
+              createVNode(Redo, { size: 20 })
+            ]),
+            _: 1
+          }, 8, ["aria-label", "title", "disabled"]),
+          createVNode(unref(NcActions), {
+            "aria-label": labels.history,
+            title: labels.history,
+            disabled: !__props.loaded,
+            variant: "tertiary",
+            "data-test": "history"
+          }, {
+            icon: withCtx(() => [
+              createVNode(HistoryIcon, { size: 20 })
+            ]),
+            default: withCtx(() => [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(historySteps.value, (step) => {
+                return openBlock(), createBlock(unref(NcActionButton), {
+                  key: step.index,
+                  "data-test": `history-step-${step.index}`,
+                  "aria-current": step.active,
+                  onClick: ($event) => unref(context).jumpTo(step.index)
+                }, {
+                  icon: withCtx(() => [
+                    step.active ? (openBlock(), createBlock(Check, {
+                      key: 0,
+                      size: 20
+                    })) : createCommentVNode("", true)
+                  ]),
+                  default: withCtx(() => [
+                    createTextVNode(" " + toDisplayString(step.label), 1)
+                  ]),
+                  _: 2
+                }, 1032, ["data-test", "aria-current", "onClick"]);
+              }), 128))
+            ]),
+            _: 1
+          }, 8, ["aria-label", "title", "disabled"]),
+          _cache[8] || (_cache[8] = createElementVNode("span", { class: "editor-topbar__separator" }, null, -1)),
+          createVNode(unref(NcButton), {
+            "data-test": "zoom-out",
+            "aria-label": labels.zoomOut,
+            title: labels.zoomOut,
+            disabled: !__props.loaded || unref(context).viewZoom.value <= unref(MIN_ZOOM),
+            variant: "tertiary",
+            onClick: _cache[2] || (_cache[2] = ($event) => stepZoom(-1))
+          }, {
+            icon: withCtx(() => [
+              createVNode(MagnifyMinusOutline, { size: 20 })
+            ]),
+            _: 1
+          }, 8, ["aria-label", "title", "disabled"]),
+          createElementVNode("button", {
+            type: "button",
+            class: "editor-topbar__zoom",
+            "data-test": "zoom-reset",
+            "aria-label": labels.resetZoom,
+            title: labels.resetZoom,
+            disabled: !__props.loaded,
+            onClick: resetZoom
+          }, toDisplayString(Math.round(unref(context).viewZoom.value * 100)) + "% ", 9, _hoisted_3$3),
+          createVNode(unref(NcButton), {
+            "data-test": "zoom-in",
+            "aria-label": labels.zoomIn,
+            title: labels.zoomIn,
+            disabled: !__props.loaded || unref(context).viewZoom.value >= unref(MAX_ZOOM),
+            variant: "tertiary",
+            onClick: _cache[3] || (_cache[3] = ($event) => stepZoom(1))
+          }, {
+            icon: withCtx(() => [
+              createVNode(MagnifyPlusOutline, { size: 20 })
+            ]),
+            _: 1
+          }, 8, ["aria-label", "title", "disabled"])
+        ]),
+        createElementVNode("div", _hoisted_4$3, [
+          createVNode(unref(NcButton), {
+            "data-test": "cancel",
+            class: "editor-topbar__cancel-text",
+            variant: "tertiary",
+            onClick: _cache[4] || (_cache[4] = ($event) => emit("cancel"))
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(labels.cancel), 1)
+            ]),
+            _: 1
+          }),
+          createVNode(unref(NcButton), {
+            "data-test": "cancel-icon",
+            class: "editor-topbar__cancel-icon",
+            "aria-label": labels.cancel,
+            title: labels.cancel,
+            variant: "tertiary",
+            onClick: _cache[5] || (_cache[5] = ($event) => emit("cancel"))
+          }, {
+            icon: withCtx(() => [
+              createVNode(Close, { size: 20 })
+            ]),
+            _: 1
+          }, 8, ["aria-label", "title"]),
+          createVNode(unref(NcButton), {
+            "data-test": "save",
+            variant: "primary",
+            disabled: !__props.loaded,
+            onClick: _cache[6] || (_cache[6] = ($event) => emit("save"))
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(labels.save), 1)
+            ]),
+            _: 1
+          }, 8, ["disabled"])
+        ])
+      ]);
+    };
+  }
+});
+const EditorTopBar = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-9ba9bd23"]]);
+const _sfc_main$4 = {
+  name: "ContentCopyIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+const _hoisted_1$3 = ["aria-hidden", "aria-label"];
+const _hoisted_2$2 = ["fill", "width", "height"];
+const _hoisted_3$2 = { d: "M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" };
+const _hoisted_4$2 = { key: 0 };
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, {
+    "aria-hidden": $props.title ? null : "true",
+    "aria-label": $props.title,
+    class: "material-design-icon content-copy-icon",
+    role: "img",
+    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
+  }), [
+    (openBlock(), createElementBlock("svg", {
+      fill: $props.fillColor,
+      class: "material-design-icon__svg",
+      width: $props.size,
+      height: $props.size,
+      viewBox: "0 0 24 24"
+    }, [
+      createElementVNode("path", _hoisted_3$2, [
+        $props.title ? (openBlock(), createElementBlock("title", _hoisted_4$2, toDisplayString($props.title), 1)) : createCommentVNode("", true)
+      ])
+    ], 8, _hoisted_2$2))
+  ], 16, _hoisted_1$3);
+}
+const ContentCopy = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$1]]);
+const _sfc_main$3 = {
+  name: "DeleteIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+const _hoisted_1$2 = ["aria-hidden", "aria-label"];
+const _hoisted_2$1 = ["fill", "width", "height"];
+const _hoisted_3$1 = { d: "M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z" };
+const _hoisted_4$1 = { key: 0 };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, {
+    "aria-hidden": $props.title ? null : "true",
+    "aria-label": $props.title,
+    class: "material-design-icon delete-icon",
+    role: "img",
+    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
+  }), [
+    (openBlock(), createElementBlock("svg", {
+      fill: $props.fillColor,
+      class: "material-design-icon__svg",
+      width: $props.size,
+      height: $props.size,
+      viewBox: "0 0 24 24"
+    }, [
+      createElementVNode("path", _hoisted_3$1, [
+        $props.title ? (openBlock(), createElementBlock("title", _hoisted_4$1, toDisplayString($props.title), 1)) : createCommentVNode("", true)
+      ])
+    ], 8, _hoisted_2$1))
+  ], 16, _hoisted_1$2);
+}
+const Delete = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render]]);
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "SelectionToolbar",
+  props: {
+    box: {}
+  },
+  emits: ["duplicate", "delete"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const duplicateLabel = t("Duplicate");
+    const deleteLabel = t("Delete");
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(GlassSurface, {
+        variant: "pill",
+        class: "selection-toolbar",
+        "data-test": "selection-toolbar",
+        style: normalizeStyle({
+          insetInlineStart: `${__props.box.x + __props.box.width / 2}px`,
+          // Above the selection as designed, clearing the rotate handle;
+          // below only when the top edge would clip it
+          insetBlockStart: __props.box.y - 76 >= 4 ? `${__props.box.y - 76}px` : `${__props.box.y + __props.box.height + 12}px`
+        })
+      }, {
+        default: withCtx(() => [
+          createVNode(unref(NcButton), {
+            "data-test": "duplicate",
+            "aria-label": unref(duplicateLabel),
+            title: unref(duplicateLabel),
+            variant: "tertiary",
+            onClick: _cache[0] || (_cache[0] = ($event) => emit("duplicate"))
+          }, {
+            icon: withCtx(() => [
+              createVNode(ContentCopy, { size: 18 })
+            ]),
+            _: 1
+          }, 8, ["aria-label", "title"]),
+          createVNode(unref(NcButton), {
+            "data-test": "delete",
+            "aria-label": unref(deleteLabel),
+            title: unref(deleteLabel),
+            variant: "tertiary",
+            onClick: _cache[1] || (_cache[1] = ($event) => emit("delete"))
+          }, {
+            icon: withCtx(() => [
+              createVNode(Delete, { size: 18 })
+            ]),
+            _: 1
+          }, 8, ["aria-label", "title"])
+        ]),
+        _: 1
+      }, 8, ["style"]);
+    };
+  }
+});
+const SelectionToolbar = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-09c1d16e"]]);
+const _hoisted_1$1 = ["aria-label"];
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "TextOverlay",
+  props: {
+    x: {},
+    y: {},
+    fontSize: {},
+    color: {},
+    initial: {}
+  },
+  emits: ["confirm", "cancel"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const inputLabel = t("Annotation text");
+    const value = ref(props.initial);
+    const input = useTemplateRef("input");
+    function autosize() {
+      const element = input.value;
+      if (element === null) {
+        return;
+      }
+      element.style.width = "0";
+      element.style.height = "0";
+      element.style.width = `${Math.max(element.scrollWidth + 4, props.fontSize * 2)}px`;
+      element.style.height = `${Math.max(element.scrollHeight, props.fontSize * 1.2)}px`;
+    }
+    onMounted(() => {
+      autosize();
+      input.value.focus();
+      input.value.select();
+    });
+    function onEnter(event) {
+      if (!event.shiftKey) {
+        event.preventDefault();
+        emit("confirm", value.value);
+      }
+    }
+    return (_ctx, _cache) => {
+      return withDirectives((openBlock(), createElementBlock("textarea", {
+        ref_key: "input",
+        ref: input,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => value.value = $event),
+        class: "text-overlay",
+        "aria-label": unref(inputLabel),
+        "data-test": "text-overlay",
+        style: normalizeStyle({
+          insetInlineStart: `${__props.x}px`,
+          insetBlockStart: `${__props.y}px`,
+          fontSize: `${__props.fontSize}px`,
+          color: __props.color
+        }),
+        rows: "1",
+        onInput: autosize,
+        onKeydown: [
+          withKeys(onEnter, ["enter"]),
+          _cache[1] || (_cache[1] = withKeys(withModifiers(($event) => emit("cancel"), ["stop"]), ["esc"]))
+        ],
+        onBlur: _cache[2] || (_cache[2] = ($event) => emit("confirm", value.value))
+      }, null, 44, _hoisted_1$1)), [
+        [vModelText, value.value]
+      ]);
+    };
+  }
+});
+const TextOverlay = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-bbba034b"]]);
+function primaryColor() {
+  const value = getComputedStyle(document.body).getPropertyValue("--color-primary-element").trim();
+  return value !== "" ? value : "#0082c9";
+}
+function ambientColor(canvas) {
+  const sample = document.createElement("canvas");
+  sample.width = 8;
+  sample.height = 8;
+  const context = sample.getContext("2d");
+  if (context === null) {
+    return "88, 86, 112";
+  }
+  context.drawImage(canvas, 0, 0, 8, 8);
+  let data;
+  try {
+    data = context.getImageData(0, 0, 8, 8).data;
+  } catch {
+    return "88, 86, 112";
+  }
+  let r = 0;
+  let g = 0;
+  let b = 0;
+  let total = 0;
+  for (let i = 0; i < data.length; i += 4) {
+    const saturation = Math.max(data[i], data[i + 1], data[i + 2]) - Math.min(data[i], data[i + 1], data[i + 2]);
+    const weight = saturation + 8;
+    r += data[i] * weight;
+    g += data[i + 1] * weight;
+    b += data[i + 2] * weight;
+    total += weight;
+  }
+  return `${Math.round(r / total)}, ${Math.round(g / total)}, ${Math.round(b / total)}`;
+}
+function ambientBackdrop(canvas) {
+  const sample = document.createElement("canvas");
+  const width = canvas instanceof HTMLImageElement ? canvas.naturalWidth : canvas.width;
+  const height = canvas instanceof HTMLImageElement ? canvas.naturalHeight : canvas.height;
+  if (width === 0 || height === 0) {
+    return "";
+  }
+  sample.width = 24;
+  sample.height = Math.max(1, Math.round(24 * height / width));
+  const context = sample.getContext("2d");
+  if (context === null) {
+    return "";
+  }
+  context.drawImage(canvas, 0, 0, sample.width, sample.height);
+  try {
+    return sample.toDataURL();
+  } catch {
+    return "";
+  }
+}
+function useAmbient(source) {
+  const ambient = ref("88, 86, 112");
+  const backdrop = ref("");
+  watch(source, (image) => {
+    if (image !== null) {
+      ambient.value = ambientColor(image);
+      backdrop.value = ambientBackdrop(image);
+    }
+  });
+  return { ambient, backdrop };
+}
+function useAnnouncements(context) {
+  const message = ref("");
+  const modeLabels = {
+    select: t("Select"),
+    crop: t("Crop"),
+    finetune: t("Adjust"),
+    filter: t("Filter"),
+    annotate: t("Annotate"),
+    sticker: t("Sticker"),
+    redact: t("Redact")
+  };
+  watch(context.activeMode, (mode) => {
+    message.value = t("{mode} mode", { mode: modeLabels[mode] ?? mode });
+  });
+  let annotationCount = 0;
+  watch(context.state, (state) => {
+    if (state.annotations.length > annotationCount) {
+      message.value = t("Annotation added");
+    } else if (state.annotations.length < annotationCount) {
+      message.value = t("Annotation removed");
+    }
+    annotationCount = state.annotations.length;
+  });
+  watch(() => context.state.value.preset, (preset) => {
+    message.value = preset === "none" ? t("Filter removed") : t("Filter applied");
+  });
+  return message;
+}
+const TEXT_ENTRY = "input, textarea, select, [contenteditable]";
+const ACTIVATABLE = 'button, [role="button"], a[href], summary';
+function ownsTextEntry(target) {
+  return target instanceof HTMLElement && target.closest(TEXT_ENTRY) !== null;
+}
+function ownsSpaceKey(target) {
+  return target instanceof HTMLElement && target.closest(`${TEXT_ENTRY}, ${ACTIVATABLE}`) !== null;
+}
+const NUDGE_KEYS = {
+  ArrowLeft: [-1, 0],
+  ArrowRight: [1, 0],
+  ArrowUp: [0, -1],
+  ArrowDown: [0, 1]
+};
+function useEditorShortcuts(deps) {
+  const { context } = deps;
+  let nudging = false;
+  function nudgeSelection(event) {
+    const id = context.selectedId.value;
+    const direction = NUDGE_KEYS[event.key];
+    if (id === null || direction === void 0) {
+      return;
+    }
+    event.preventDefault();
+    const step = event.shiftKey ? 10 : 1;
+    const state = context.state.value;
+    nudging = true;
+    context.preview({
+      ...state,
+      annotations: state.annotations.map((annotation) => annotation.id === id ? translateAnnotation(annotation, direction[0] * step, direction[1] * step) : annotation)
+    });
+  }
+  function onKeydown(event) {
+    if (deps.isTextEditing() || ownsTextEntry(event.target)) {
+      return;
+    }
+    const meta = event.ctrlKey || event.metaKey;
+    if (meta && !event.shiftKey && event.key.toLowerCase() === "z") {
+      event.preventDefault();
+      context.undo();
+      return;
+    }
+    if (meta && event.shiftKey && event.key.toLowerCase() === "z" || meta && event.key.toLowerCase() === "y") {
+      event.preventDefault();
+      context.redo();
+      return;
+    }
+    if (event.key === "+" || event.key === "=") {
+      context.setViewZoom(context.viewZoom.value * 1.25);
+      return;
+    }
+    if (event.key === "-") {
+      context.setViewZoom(context.viewZoom.value / 1.25);
+      return;
+    }
+    if (event.key in NUDGE_KEYS && context.selectedId.value !== null) {
+      nudgeSelection(event);
+      return;
+    }
+    if ((event.key === "Delete" || event.key === "Backspace") && context.selectedId.value !== null) {
+      event.preventDefault();
+      deps.onDelete();
+    } else if (event.key === "Escape") {
+      deps.onEscape();
+    }
+  }
+  function onKeyup(event) {
+    if (ownsTextEntry(event.target)) {
+      return;
+    }
+    if (nudging && event.key in NUDGE_KEYS) {
+      nudging = false;
+      context.commit(context.state.value, t("Move or resize"));
+    }
+  }
+  onMounted(() => {
+    window.addEventListener("keydown", onKeydown);
+    window.addEventListener("keyup", onKeyup);
+  });
+  onBeforeUnmount(() => {
+    window.removeEventListener("keydown", onKeydown);
+    window.removeEventListener("keyup", onKeyup);
+  });
+}
+function needsCors(url) {
+  let target;
+  try {
+    target = new URL(url, window.location.href);
+  } catch {
+    return false;
+  }
+  return (target.protocol === "http:" || target.protocol === "https:") && target.origin !== window.location.origin;
+}
+async function loadImage(source) {
+  const url = typeof source === "string" ? source : URL.createObjectURL(source);
+  try {
+    return await new Promise((resolve, reject) => {
+      const image = new Image();
+      if (needsCors(url)) {
+        image.crossOrigin = "anonymous";
+      }
+      image.onload = () => resolve(image);
+      image.onerror = () => reject(new Error(t("Image could not be decoded")));
+      image.src = url;
+    });
+  } finally {
+    if (typeof source !== "string") {
+      URL.revokeObjectURL(url);
+    }
+  }
+}
+async function canvasToBlob(canvas, type = "image/png", quality) {
+  return new Promise((resolve, reject) => {
+    canvas.toBlob((blob) => {
+      if (blob === null) {
+        reject(new Error(t("Canvas could not be encoded")));
+        return;
+      }
+      resolve(blob);
+    }, type, quality);
+  });
+}
+function useExportImage(deps) {
+  async function exportImage(options = {}) {
+    const oriented = deps.oriented();
+    if (oriented === null) {
+      throw new Error("No image loaded");
+    }
+    const source = deps.source();
+    if (source !== null && source.type !== "" && isPristine(deps.getState()) && options.maxSize === void 0 && (options.format === void 0 || options.format === source.type)) {
+      return { blob: source, width: oriented.width, height: oriented.height, mimeType: source.type };
+    }
+    const canvas = renderToCanvas(oriented, deps.getState(), options.maxSize);
+    const mimeType = options.format ?? "image/png";
+    try {
+      const blob = await canvasToBlob(canvas, mimeType, options.quality);
+      return { blob, width: canvas.width, height: canvas.height, mimeType };
+    } catch (error) {
+      if (error instanceof DOMException && error.name === "SecurityError") {
+        throw new Error(
+          t("The image cannot be exported because it was loaded without cross-origin access"),
+          { cause: error }
+        );
+      }
+      throw error;
+    }
+  }
+  async function save() {
+    try {
+      deps.onSaved(await exportImage(deps.saveOptions()));
+    } catch (error) {
+      deps.onError(error instanceof Error ? error : new Error(String(error)));
+    }
+  }
+  return { exportImage, save };
+}
+function useTextEditing(deps) {
+  const { context } = deps;
+  const textEdit = ref(null);
+  function startTextEdit(position, existing) {
+    const options = deps.viewOptions();
+    const oriented = deps.oriented();
+    if (options === null || oriented === null) {
+      return;
+    }
+    const origin = options.showCropped ? visibleRect(context.state.value, { width: oriented.width, height: oriented.height }) : { x: 0, y: 0 };
+    textEdit.value = {
+      sceneX: position.x,
+      sceneY: position.y,
+      screenX: options.offset.x + (position.x - origin.x) * options.scale,
+      screenY: options.offset.y + (position.y - origin.y) * options.scale,
+      screenFontSize: (existing?.fontSize ?? context.fontSize.value) * options.scale,
+      color: existing?.color ?? context.drawColor.value,
+      value: existing?.text ?? "",
+      id: existing?.id ?? null
+    };
+  }
+  function confirmTextEdit(text) {
+    const edit = textEdit.value;
+    textEdit.value = null;
+    if (edit === null) {
+      return;
+    }
+    const state = context.state.value;
+    const trimmed = text.trim();
+    if (edit.id !== null) {
+      context.commit({
+        ...state,
+        annotations: trimmed === "" ? state.annotations.filter((annotation) => annotation.id !== edit.id) : state.annotations.map((annotation) => annotation.id === edit.id ? { ...annotation, text: trimmed } : annotation)
+      }, trimmed === "" ? t("Delete") : t("Text"));
+    } else if (trimmed !== "") {
+      context.commit({
+        ...state,
+        annotations: [...state.annotations, {
+          id: newId(),
+          type: "text",
+          x: edit.sceneX,
+          y: edit.sceneY,
+          text: trimmed,
+          color: edit.color,
+          fontSize: context.fontSize.value,
+          rotation: 0
+        }]
+      }, t("Text"));
+    }
+  }
+  return { textEdit, startTextEdit, confirmTextEdit };
+}
+function useWheelControls(element, context) {
+  let dragFrom = null;
+  let pinch = null;
+  const pointers = /* @__PURE__ */ new Map();
+  const spaceHeld = shallowRef(false);
+  const toolFreeDrag = () => context.activeTool.value === "adjust";
+  const zoomed = () => context.viewZoom.value > MIN_ZOOM;
+  const panArmed = computed(() => context.viewZoom.value > MIN_ZOOM && (spaceHeld.value || context.activeTool.value === "adjust"));
+  function anchorAt(position) {
+    const rect = element.value?.getBoundingClientRect();
+    if (rect === void 0) {
+      return void 0;
+    }
+    return {
+      x: position.x - rect.x - rect.width / 2,
+      y: position.y - rect.y - rect.height / 2
+    };
+  }
+  function currentPinch() {
+    if (pointers.size !== 2) {
+      return null;
+    }
+    const [a, b] = [...pointers.values()];
+    return {
+      distance: Math.hypot(a.x - b.x, a.y - b.y),
+      centroid: { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 }
+    };
+  }
+  function onWheel(event) {
+    event.preventDefault();
+    if (event.deltaY === 0) {
+      return;
+    }
+    const height = element.value?.clientHeight ?? window.innerHeight;
+    const factor = wheelZoomFactor(event.deltaY, event.deltaMode, height);
+    context.setViewZoom(context.viewZoom.value * factor, anchorAt({ x: event.clientX, y: event.clientY }));
+  }
+  function onPointerDown(event) {
+    if (event.pointerType === "touch") {
+      pointers.set(event.pointerId, { x: event.clientX, y: event.clientY });
+      if (pointers.size === 2) {
+        pinch = currentPinch();
+        context.panning.value = true;
+        event.stopPropagation();
+      }
+      return;
+    }
+    const wantsPan = event.button === 1 || event.button === 0 && (spaceHeld.value || toolFreeDrag());
+    if (!wantsPan || !zoomed()) {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    dragFrom = {
+      pointer: { x: event.clientX, y: event.clientY },
+      pan: context.viewPan.value
+    };
+    context.panning.value = true;
+    element.value?.setPointerCapture(event.pointerId);
+  }
+  function onPointerMove(event) {
+    if (event.pointerType === "touch" && pointers.has(event.pointerId)) {
+      pointers.set(event.pointerId, { x: event.clientX, y: event.clientY });
+      const next = currentPinch();
+      if (next === null || pinch === null) {
+        return;
+      }
+      event.stopPropagation();
+      const ratio = next.distance / pinch.distance;
+      if (Math.abs(ratio - 1) > PINCH_TOLERANCE) {
+        context.setViewZoom(context.viewZoom.value * ratio, anchorAt(next.centroid));
+      } else {
+        context.setViewPan({
+          x: context.viewPan.value.x + next.centroid.x - pinch.centroid.x,
+          y: context.viewPan.value.y + next.centroid.y - pinch.centroid.y
+        });
+      }
+      pinch = next;
+      return;
+    }
+    if (dragFrom === null) {
+      return;
+    }
+    event.stopPropagation();
+    context.setViewPan({
+      x: dragFrom.pan.x + (event.clientX - dragFrom.pointer.x),
+      y: dragFrom.pan.y + (event.clientY - dragFrom.pointer.y)
+    });
+  }
+  function onPointerUp(event) {
+    if (event !== void 0) {
+      pointers.delete(event.pointerId);
+    }
+    pinch = currentPinch();
+    dragFrom = null;
+    if (pointers.size < 2) {
+      context.panning.value = false;
+    }
+  }
+  function onKeydown(event) {
+    if (event.code !== "Space" || ownsSpaceKey(event.target)) {
+      return;
+    }
+    event.preventDefault();
+    spaceHeld.value = true;
+  }
+  function onKeyup(event) {
+    if (event.code === "Space") {
+      spaceHeld.value = false;
+    }
+  }
+  onMounted(() => {
+    const target = element.value;
+    target?.addEventListener("wheel", onWheel, { passive: false });
+    target?.addEventListener("pointerdown", onPointerDown, { capture: true });
+    target?.addEventListener("pointermove", onPointerMove, { capture: true });
+    target?.addEventListener("pointerup", onPointerUp);
+    target?.addEventListener("pointercancel", onPointerUp);
+    window.addEventListener("keydown", onKeydown);
+    window.addEventListener("keyup", onKeyup);
+  });
+  onBeforeUnmount(() => {
+    const target = element.value;
+    target?.removeEventListener("wheel", onWheel);
+    target?.removeEventListener("pointerdown", onPointerDown, { capture: true });
+    target?.removeEventListener("pointermove", onPointerMove, { capture: true });
+    target?.removeEventListener("pointerup", onPointerUp);
+    target?.removeEventListener("pointercancel", onPointerUp);
+    window.removeEventListener("keydown", onKeydown);
+    window.removeEventListener("keyup", onKeyup);
+  });
+  return { panArmed };
+}
+const DURATION = 0.3;
+function prefersReducedMotion() {
+  return typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function pivotOnCenter(target) {
+  target.node.offset(target.pivot);
+  target.node.position(target.pivot);
+}
+function playTransition(kind, deps, context) {
+  if (prefersReducedMotion()) {
+    return;
+  }
+  const { scale } = deps;
+  const easing = Konva.Easings.EaseInOut;
+  const ratio = context.previousScale / scale;
+  for (const target of deps.targets) {
+    const { node } = target;
+    node.setAttrs({ x: 0, y: 0, offsetX: 0, offsetY: 0, rotation: 0, scaleX: 1, scaleY: 1, opacity: 1 });
+    switch (kind) {
+      case "load":
+        pivotOnCenter(target);
+        node.opacity(0);
+        node.scale({ x: 0.96, y: 0.96 });
+        node.to({ opacity: 1, scaleX: 1, scaleY: 1, duration: DURATION, easing });
+        break;
+      case "rotate-cw":
+      case "rotate-ccw":
+        pivotOnCenter(target);
+        node.rotation(kind === "rotate-cw" ? -90 : 90);
+        node.scale({ x: ratio, y: ratio });
+        node.to({ rotation: 0, scaleX: 1, scaleY: 1, duration: DURATION, easing });
+        break;
+      case "flip-h":
+        pivotOnCenter(target);
+        node.scaleX(-1);
+        node.to({ scaleX: 1, duration: DURATION, easing });
+        break;
+      case "flip-v":
+        pivotOnCenter(target);
+        node.scaleY(-1);
+        node.to({ scaleY: 1, duration: DURATION, easing });
+        break;
+      case "crop": {
+        const { previousScale, previousOffset, previousOrigin } = context;
+        node.scale({ x: ratio, y: ratio });
+        node.position({
+          x: (previousOffset.x - previousOrigin.x * previousScale - (deps.offset.x - deps.origin.x * scale)) * target.unit,
+          y: (previousOffset.y - previousOrigin.y * previousScale - (deps.offset.y - deps.origin.y * scale)) * target.unit
+        });
+        node.to({ x: 0, y: 0, scaleX: 1, scaleY: 1, duration: DURATION, easing });
+        break;
+      }
+    }
+  }
+}
+function clampCropBox(bounds, oldBox, newBox, keepRatio) {
+  const right = bounds.x + bounds.width;
+  const bottom = bounds.y + bounds.height;
+  let { x, y, width, height } = newBox;
+  if (x < bounds.x) {
+    width -= bounds.x - x;
+    x = bounds.x;
+  }
+  if (y < bounds.y) {
+    height -= bounds.y - y;
+    y = bounds.y;
+  }
+  width = Math.min(width, right - x);
+  height = Math.min(height, bottom - y);
+  if (keepRatio && oldBox.height > 0) {
+    const ratio = oldBox.width / oldBox.height;
+    if (width / height > ratio) {
+      width = height * ratio;
+    } else {
+      height = width / ratio;
+    }
+    if (Math.abs(newBox.x - oldBox.x) > 0.01) {
+      x = Math.min(newBox.x + newBox.width, right) - width;
+    }
+    if (Math.abs(newBox.y - oldBox.y) > 0.01) {
+      y = Math.min(newBox.y + newBox.height, bottom) - height;
+    }
+  }
+  return {
+    ...newBox,
+    x,
+    y,
+    width: Math.max(8, width),
+    height: Math.max(8, height)
+  };
+}
+function attachCropOverlay(deps) {
+  const view = { oriented: deps.oriented, scale: deps.scale, offset: deps.offset };
+  const toStage = (rect) => ({
+    x: view.offset.x + rect.x * view.scale,
+    y: view.offset.y + rect.y * view.scale,
+    width: rect.width * view.scale,
+    height: rect.height * view.scale
+  });
+  const toScene = (rect) => ({
+    x: (rect.x - view.offset.x) / view.scale,
+    y: (rect.y - view.offset.y) / view.scale,
+    width: rect.width / view.scale,
+    height: rect.height / view.scale
+  });
+  let imageBounds = toStage({ x: 0, y: 0, ...view.oriented });
+  const layer = new Konva.Layer({ name: "crop" });
+  const makeShade = () => new Konva.Rect({
+    fill: "rgba(0, 0, 0, 0.5)",
+    listening: false
+  });
+  const shadeTop = makeShade();
+  const shadeLeft = makeShade();
+  const shadeRight = makeShade();
+  const shadeBottom = makeShade();
+  for (const shade of [shadeTop, shadeLeft, shadeRight, shadeBottom]) {
+    layer.add(shade);
+  }
+  const cropNode = new Konva.Rect({
+    // Named so it can be told apart from the four shade rects
+    name: "crop-rect",
+    ...toStage(clampRect(deps.initial ?? { x: 0, y: 0, ...view.oriented }, view.oriented)),
+    stroke: "rgba(255, 255, 255, 0.9)",
+    strokeWidth: 1,
+    draggable: true,
+    strokeScaleEnabled: false
+  });
+  layer.add(cropNode);
+  const stageRect = () => ({
+    x: cropNode.x(),
+    y: cropNode.y(),
+    width: cropNode.width() * cropNode.scaleX(),
+    height: cropNode.height() * cropNode.scaleY()
+  });
+  const gridLines = Array.from({ length: 4 }, () => new Konva.Line({
+    stroke: "rgba(255, 255, 255, 0.35)",
+    strokeWidth: 1,
+    listening: false
+  }));
+  for (const line of gridLines) {
+    layer.add(line);
+  }
+  const clampToImage = (rect) => {
+    const x = Math.min(Math.max(rect.x, imageBounds.x), imageBounds.x + imageBounds.width - rect.width);
+    const y = Math.min(Math.max(rect.y, imageBounds.y), imageBounds.y + imageBounds.height - rect.height);
+    return { ...rect, x, y };
+  };
+  const updateOverlay = () => {
+    const rect = stageRect();
+    const { x, y, width, height } = imageBounds;
+    shadeTop.setAttrs({ x, y, width, height: rect.y - y });
+    shadeLeft.setAttrs({ x, y: rect.y, width: rect.x - x, height: rect.height });
+    shadeRight.setAttrs({ x: rect.x + rect.width, y: rect.y, width: x + width - rect.x - rect.width, height: rect.height });
+    shadeBottom.setAttrs({ x, y: rect.y + rect.height, width, height: y + height - rect.y - rect.height });
+    gridLines[0].points([rect.x + rect.width / 3, rect.y, rect.x + rect.width / 3, rect.y + rect.height]);
+    gridLines[1].points([rect.x + rect.width * 2 / 3, rect.y, rect.x + rect.width * 2 / 3, rect.y + rect.height]);
+    gridLines[2].points([rect.x, rect.y + rect.height / 3, rect.x + rect.width, rect.y + rect.height / 3]);
+    gridLines[3].points([rect.x, rect.y + rect.height * 2 / 3, rect.x + rect.width, rect.y + rect.height * 2 / 3]);
+  };
+  let ratioLocked = false;
+  const transformer = new Konva.Transformer({
+    nodes: [cropNode],
+    rotateEnabled: false,
+    flipEnabled: false,
+    keepRatio: false,
+    // Pintura-style solid round corner dots
+    enabledAnchors: ["top-left", "top-right", "bottom-left", "bottom-right"],
+    anchorSize: 14,
+    anchorCornerRadius: 7,
+    anchorFill: "#111",
+    anchorStroke: "#111",
+    anchorStrokeWidth: 1,
+    borderStroke: "rgba(255, 255, 255, 0.7)",
+    boundBoxFunc: (oldBox, newBox) => ({ ...newBox, ...clampCropBox(imageBounds, oldBox, newBox, ratioLocked) })
+  });
+  layer.add(transformer);
+  cropNode.dragBoundFunc((position) => clampToImage({
+    ...position,
+    width: cropNode.width() * cropNode.scaleX(),
+    height: cropNode.height() * cropNode.scaleY()
+  }));
+  cropNode.on("dragmove transform", updateOverlay);
+  const setAspect = (aspect) => {
+    ratioLocked = aspect !== null;
+    transformer.keepRatio(ratioLocked);
+    if (aspect === null) {
+      return;
+    }
+    const current = stageRect();
+    const width = Math.min(
+      Math.max(current.width, current.height * aspect),
+      imageBounds.width,
+      imageBounds.height * aspect
+    );
+    const height = width / aspect;
+    const center = { x: current.x + current.width / 2, y: current.y + current.height / 2 };
+    const position = clampToImage({
+      x: center.x - width / 2,
+      y: center.y - height / 2,
+      width,
+      height
+    });
+    cropNode.setAttrs({ ...position, width, height, scaleX: 1, scaleY: 1 });
+    transformer.forceUpdate();
+    updateOverlay();
+  };
+  updateOverlay();
+  deps.stage.add(layer);
+  return {
+    layer,
+    setAspect,
+    update(next) {
+      const scene = toScene(stageRect());
+      view.oriented = next.oriented;
+      view.scale = next.scale;
+      view.offset = next.offset;
+      imageBounds = toStage({ x: 0, y: 0, ...view.oriented });
+      cropNode.setAttrs({ ...toStage(scene), scaleX: 1, scaleY: 1 });
+      transformer.forceUpdate();
+      updateOverlay();
+    },
+    getRect() {
+      const scene = toScene(stageRect());
+      return clampRect({
+        x: Math.round(scene.x),
+        y: Math.round(scene.y),
+        width: Math.round(scene.width),
+        height: Math.round(scene.height)
+      }, view.oriented);
+    },
+    destroy() {
+      transformer.destroy();
+      layer.destroy();
+    }
+  };
+}
+function coverScale(box, degrees) {
+  if (box.width <= 0 || box.height <= 0) {
+    throw new RangeError("Dimensions must be positive");
+  }
+  const radians = degrees * Math.PI / 180;
+  const cos = Math.abs(Math.cos(radians));
+  const sin = Math.abs(Math.sin(radians));
+  return Math.max(
+    (box.width * cos + box.height * sin) / box.width,
+    (box.width * sin + box.height * cos) / box.height
+  );
+}
+function fitContain(content, container) {
+  if (content.width <= 0 || content.height <= 0 || container.width <= 0 || container.height <= 0) {
+    throw new RangeError("Dimensions must be positive");
+  }
+  const scale = Math.min(
+    container.width / content.width,
+    container.height / content.height,
+    1
+  );
+  const width = content.width * scale;
+  const height = content.height * scale;
+  return {
+    scale,
+    width,
+    height,
+    x: (container.width - width) / 2,
+    y: (container.height - height) / 2
+  };
+}
+function orientImage(image, state) {
+  const natural = { width: image.naturalWidth, height: image.naturalHeight };
+  const oriented = orientedSize(natural, state.rotation);
+  const canvas = document.createElement("canvas");
+  canvas.width = oriented.width;
+  canvas.height = oriented.height;
+  const context = canvas.getContext("2d");
+  if (context === null) {
+    throw new Error("Canvas 2D context unavailable");
+  }
+  const cover = coverScale(oriented, state.fineRotation) * Math.max(1, state.zoom);
+  context.translate(oriented.width / 2, oriented.height / 2);
+  context.rotate(state.fineRotation * Math.PI / 180);
+  context.scale(cover, cover);
+  context.rotate(state.rotation * Math.PI / 180);
+  context.scale(state.flipX ? -1 : 1, state.flipY ? -1 : 1);
+  context.drawImage(image, -natural.width / 2, -natural.height / 2);
+  return canvas;
+}
+function transformPoints(points, node) {
+  const radians = node.rotation() * Math.PI / 180;
+  const cos = Math.cos(radians);
+  const sin = Math.sin(radians);
+  const result = [];
+  for (let i = 0; i < points.length; i += 2) {
+    const x = points[i] * node.scaleX();
+    const y = points[i + 1] * node.scaleY();
+    result.push(node.x() + x * cos - y * sin, node.y() + x * sin + y * cos);
+  }
+  return result;
+}
+function applyNodeTransform(annotation, node) {
+  switch (annotation.type) {
+    case "draw":
+    case "arrow": {
+      const points = transformPoints(annotation.points, node);
+      const scale = (Math.abs(node.scaleX()) + Math.abs(node.scaleY())) / 2;
+      const strokeWidth = Math.max(1, annotation.strokeWidth * scale);
+      return { ...annotation, points, strokeWidth };
+    }
+    case "redact":
+      return {
+        ...annotation,
+        rect: {
+          x: node.x(),
+          y: node.y(),
+          width: Math.max(1, annotation.rect.width * node.scaleX()),
+          height: Math.max(1, annotation.rect.height * node.scaleY())
+        }
+      };
+    case "rectangle":
+    case "ellipse":
+      return {
+        ...annotation,
+        rect: {
+          x: node.x(),
+          y: node.y(),
+          width: Math.max(1, annotation.rect.width * node.scaleX()),
+          height: Math.max(1, annotation.rect.height * node.scaleY())
+        },
+        rotation: node.rotation()
+      };
+    case "text":
+    case "sticker":
+      return {
+        ...annotation,
+        x: node.x(),
+        y: node.y(),
+        fontSize: Math.max(4, annotation.fontSize * node.scaleY()),
+        rotation: node.rotation()
+      };
+  }
+}
+function attachSelection(deps) {
+  const accent = primaryColor();
+  const transformer = new Konva.Transformer({
+    rotateEnabled: true,
+    flipEnabled: false,
+    ignoreStroke: true,
+    // A plain square with four corner handles
+    enabledAnchors: ["top-left", "top-right", "bottom-left", "bottom-right"],
+    anchorSize: 12,
+    anchorCornerRadius: 6,
+    anchorFill: "#fff",
+    anchorStroke: accent,
+    borderStroke: accent,
+    rotateAnchorOffset: 24,
+    rotationSnaps: [0, 45, 90, 135, 180, 225, 270, 315],
+    rotationSnapTolerance: 6
+  });
+  const layer = new Konva.Layer({ name: "selection" });
+  layer.add(transformer);
+  deps.stage.add(layer);
+  const findAnnotation = (id) => deps.getState().annotations.find((annotation) => annotation.id === id);
+  const findNode = (id) => id === null ? null : deps.stage.find(".annotation").find((node) => node.id() === id) ?? null;
+  const reportRect = () => {
+    const node = findNode(deps.getSelectedId());
+    deps.onSelectionRect(node ? node.getClientRect() : null);
+  };
+  const syncTransformer = () => {
+    const id = deps.getSelectedId();
+    const node = findNode(id);
+    if (node === null || node === void 0) {
+      transformer.nodes([]);
+      deps.onSelectionRect(null);
+      return;
+    }
+    const annotation = findAnnotation(id);
+    transformer.rotateEnabled(annotation !== void 0 && annotation.type !== "redact");
+    transformer.nodes([node]);
+    deps.onSelectionRect(node.getClientRect());
+  };
+  const sync = () => {
+    deps.stage.find(".annotation").forEach((node) => node.draggable(true));
+    syncTransformer();
+  };
+  sync();
+  const onWriteBack = (event) => {
+    const node = event.target;
+    const annotation = findAnnotation(node.id());
+    if (annotation === void 0) {
+      return;
+    }
+    const state = deps.getState();
+    deps.commit({
+      ...state,
+      annotations: state.annotations.map((entry) => entry.id === annotation.id ? applyNodeTransform(annotation, node) : entry)
+    }, t("Move or resize"));
+  };
+  const onClick = (event) => {
+    if (event.target.hasName("annotation")) {
+      deps.select(event.target.id());
+    } else if (event.target === deps.stage || event.target instanceof Konva.Image) {
+      deps.select(null);
+    }
+    syncTransformer();
+  };
+  const onDblClick = (event) => {
+    const annotation = findAnnotation(event.target.id());
+    if (annotation?.type === "text") {
+      deps.editText(annotation);
+    }
+  };
+  deps.stage.on("click.selection tap.selection", onClick);
+  deps.stage.on("dblclick.selection dbltap.selection", onDblClick);
+  deps.stage.on("dragend.selection transformend.selection", onWriteBack);
+  deps.stage.on("dragmove.selection transform.selection", reportRect);
+  return {
+    sync,
+    detach() {
+      deps.stage.off(".selection");
+      deps.stage.find(".annotation").forEach((node) => node.draggable(false));
+      deps.onSelectionRect(null);
+      transformer.destroy();
+      layer.destroy();
+    }
+  };
+}
+const TOOL_LABELS = {
+  draw: t("Draw"),
+  rectangle: t("Rectangle"),
+  ellipse: t("Ellipse"),
+  arrow: t("Arrow"),
+  sticker: t("Sticker"),
+  redact: t("Redact")
+};
+function attachPointerTools(tool, deps) {
+  if (!["draw", "rectangle", "ellipse", "arrow", "text", "sticker", "redact"].includes(tool)) {
+    return () => {
+    };
+  }
+  let active = null;
+  let previewNode = null;
+  let start = { x: 0, y: 0 };
+  let pendingText = null;
+  const scenePointer = () => {
+    const pointer = deps.stage.getPointerPosition();
+    return pointer === null ? null : deps.toScene(pointer);
+  };
+  const refreshPreview = () => {
+    if (active === null) {
+      previewNode?.destroy();
+      previewNode = null;
+      return;
+    }
+    if (previewNode !== null && (active.type === "draw" || active.type === "arrow")) {
+      previewNode.points(active.points);
+      return;
+    }
+    previewNode?.destroy();
+    previewNode = null;
+    const source = deps.oriented() ?? void 0;
+    if (active.type === "redact" && source === void 0) {
+      return;
+    }
+    previewNode = buildAnnotationNode(active, source);
+    deps.contentGroup()?.add(previewNode);
+  };
+  const discard = () => {
+    active = null;
+    pendingText = null;
+    previewNode?.destroy();
+    previewNode = null;
+  };
+  const onPointerDown = () => {
+    const point = scenePointer();
+    if (point === null || deps.panning()) {
+      return;
+    }
+    const options = deps.options();
+    start = point;
+    switch (tool) {
+      case "draw":
+        active = { id: newId(), type: "draw", points: [point.x, point.y], color: options.color, strokeWidth: options.strokeWidth };
+        break;
+      case "arrow":
+        active = { id: newId(), type: "arrow", points: [point.x, point.y, point.x, point.y], color: options.color, strokeWidth: options.strokeWidth };
+        break;
+      case "rectangle":
+      case "ellipse":
+        active = { id: newId(), type: tool, rect: { x: point.x, y: point.y, width: 1, height: 1 }, rotation: 0, color: options.color, strokeWidth: options.strokeWidth };
+        break;
+      case "redact":
+        active = { id: newId(), type: "redact", rect: { x: point.x, y: point.y, width: 1, height: 1 }, style: options.redactStyle };
+        break;
+      case "text":
+        pendingText = point;
+        return;
+      case "sticker": {
+        const state = deps.getState();
+        const sticker = {
+          id: newId(),
+          type: "sticker",
+          x: point.x,
+          y: point.y,
+          text: options.sticker,
+          color: options.color,
+          fontSize: options.fontSize * 2,
+          rotation: 0
+        };
+        deps.commit({ ...state, annotations: [...state.annotations, sticker] }, TOOL_LABELS.sticker);
+        return;
+      }
+    }
+    refreshPreview();
+  };
+  const onPointerMove = () => {
+    if (active === null) {
+      return;
+    }
+    if (deps.panning()) {
+      discard();
+      return;
+    }
+    const point = scenePointer();
+    if (point === null) {
+      return;
+    }
+    switch (active.type) {
+      case "draw":
+        active.points.push(point.x, point.y);
+        break;
+      case "arrow":
+        active.points = [start.x, start.y, point.x, point.y];
+        break;
+      case "rectangle":
+      case "ellipse":
+      case "redact":
+        active = {
+          ...active,
+          rect: {
+            x: Math.min(start.x, point.x),
+            y: Math.min(start.y, point.y),
+            width: Math.abs(point.x - start.x) || 1,
+            height: Math.abs(point.y - start.y) || 1
+          }
+        };
+        break;
+    }
+    refreshPreview();
+  };
+  const onPointerUp = () => {
+    if (pendingText !== null) {
+      deps.startTextEdit(pendingText);
+      pendingText = null;
+      return;
+    }
+    if (active === null) {
+      return;
+    }
+    const state = deps.getState();
+    deps.commit({ ...state, annotations: [...state.annotations, active] }, TOOL_LABELS[tool]);
+    discard();
+  };
+  deps.stage.on("pointerdown.tool", onPointerDown);
+  deps.stage.on("pointermove.tool", onPointerMove);
+  deps.stage.on("pointerup.tool", onPointerUp);
+  window.addEventListener("pointerup", onPointerUp);
+  window.addEventListener("pointercancel", discard);
+  return () => {
+    deps.stage.off(".tool");
+    window.removeEventListener("pointerup", onPointerUp);
+    window.removeEventListener("pointercancel", discard);
+    previewNode?.destroy();
+  };
+}
+const _hoisted_1 = { class: "image-editor__shell" };
+const _hoisted_2 = { class: "image-editor__frame" };
+const _hoisted_3 = { class: "image-editor__viewport" };
+const _hoisted_4 = ["aria-label"];
+const _hoisted_5 = {
+  key: 1,
+  class: "image-editor__error",
+  "data-test": "load-error"
+};
+const _hoisted_6 = {
+  class: "hidden-visually",
+  role: "status",
+  "aria-live": "polite"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ImageEditor",
+  props: {
+    src: {},
+    label: {},
+    exportOptions: {},
+    initialState: {}
+  },
+  emits: ["save", "cancel", "error", "change"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const labels = {
+      canvas: t("Image editor"),
+      failed: t("The image could not be loaded"),
+      retry: t("Try again")
+    };
+    let loadAttempt = 0;
+    const context = createEditorContext();
+    const container = useTemplateRef("container");
+    const loaded = ref(false);
+    const errored = ref(false);
+    const containerSize = shallowRef({ width: 0, height: 0 });
+    const orientedCanvas = shallowRef(null);
+    const sourceImage = shallowRef(null);
+    const { ambient, backdrop } = useAmbient(sourceImage);
+    const { panArmed } = useWheelControls(container, context);
+    const announcement = useAnnouncements(context);
+    const selectionBox = shallowRef(null);
+    let stage = null;
+    let scene = null;
+    let cropOverlay = null;
+    let selection = null;
+    let detachTool = null;
+    let attached = null;
+    let resizeObserver = null;
+    let pendingTransition = null;
+    let lastView = null;
+    const canvasCursor = computed(() => {
+      if (context.panning.value) {
+        return "grabbing";
+      }
+      if (panArmed.value) {
+        return "grab";
+      }
+      const tool = context.activeTool.value;
+      if (["draw", "rectangle", "ellipse", "arrow", "text", "sticker", "redact"].includes(tool)) {
+        return "crosshair";
+      }
+      return "default";
+    });
+    const viewFit = computed(() => {
+      const oriented = orientedCanvas.value;
+      if (oriented === null || containerSize.value.width === 0 || containerSize.value.height === 0) {
+        return null;
+      }
+      const showCropped = context.activeTool.value !== "crop";
+      const visible = showCropped ? visibleRect(context.state.value, { width: oriented.width, height: oriented.height }) : { x: 0, y: 0, width: oriented.width, height: oriented.height };
+      const container2 = containerSize.value;
+      const fit = fitContain(
+        { width: visible.width, height: visible.height },
+        {
+          width: Math.max(1, container2.width - VIEW_MARGIN * 2),
+          height: Math.max(1, container2.height - VIEW_MARGIN * 2)
+        }
+      );
+      return { scale: fit.scale, visible, container: container2, showCropped };
+    });
+    const viewOptions = computed(() => {
+      const fit = viewFit.value;
+      if (fit === null) {
+        return null;
+      }
+      const scale = fit.scale * context.viewZoom.value;
+      const pan = clampPan(context.viewPan.value, panBounds(fit.visible, scale, fit.container));
+      return {
+        scale,
+        offset: {
+          x: (fit.container.width - fit.visible.width * scale) / 2 + pan.x,
+          y: (fit.container.height - fit.visible.height * scale) / 2 + pan.y
+        },
+        showCropped: fit.showCropped,
+        fastFilters: context.interacting.value
+      };
+    });
+    const { textEdit, startTextEdit, confirmTextEdit } = useTextEditing({
+      context,
+      viewOptions: () => viewOptions.value,
+      oriented: () => orientedCanvas.value
+    });
+    const { exportImage, save: onSave } = useExportImage({
+      oriented: () => orientedCanvas.value,
+      getState: () => context.state.value,
+      source: () => props.src instanceof Blob ? props.src : null,
+      saveOptions: () => props.exportOptions ?? {},
+      onSaved: (result) => emit("save", result),
+      onError: (error) => emit("error", error)
+    });
+    function captureView() {
+      return lastView ?? { previousScale: 1, previousOffset: { x: 0, y: 0 }, previousOrigin: { x: 0, y: 0 } };
+    }
+    function commitWithTransition(kind, next, label) {
+      pendingTransition = { kind, context: captureView() };
+      context.commit(next, label);
+    }
+    function renderView() {
+      const oriented = orientedCanvas.value;
+      const options = viewOptions.value;
+      if (stage === null || oriented === null || options === null) {
+        return;
+      }
+      stage.size(containerSize.value);
+      scene ??= createScene(stage);
+      scene.update(oriented, context.state.value, options);
+      const renderedOrigin = options.showCropped ? visibleRect(context.state.value, { width: oriented.width, height: oriented.height }) : { x: 0, y: 0 };
+      syncTools(oriented, options);
+      if (pendingTransition !== null) {
+        const visible = options.showCropped ? visibleRect(context.state.value, { width: oriented.width, height: oriented.height }) : { x: 0, y: 0, width: oriented.width, height: oriented.height };
+        const center = {
+          x: visible.x + visible.width / 2,
+          y: visible.y + visible.height / 2
+        };
+        const targets = [{
+          node: scene.contentGroup,
+          pivot: center,
+          unit: 1 / options.scale
+        }];
+        if (cropOverlay !== null) {
+          targets.push({
+            node: cropOverlay.layer,
+            pivot: {
+              x: options.offset.x + (center.x - renderedOrigin.x) * options.scale,
+              y: options.offset.y + (center.y - renderedOrigin.y) * options.scale
+            },
+            unit: 1
+          });
+        }
+        playTransition(pendingTransition.kind, {
+          targets,
+          scale: options.scale,
+          offset: options.offset,
+          origin: renderedOrigin
+        }, pendingTransition.context);
+        pendingTransition = null;
+      }
+      lastView = {
+        previousScale: options.scale,
+        previousOffset: options.offset,
+        previousOrigin: { x: renderedOrigin.x, y: renderedOrigin.y }
+      };
+    }
+    function syncTools(oriented, options) {
+      if (stage === null) {
+        return;
+      }
+      const tool = context.activeTool.value;
+      const crop = context.state.value.crop;
+      const fresh = attached !== null && attached.tool === tool && attached.oriented === oriented && attached.crop === crop;
+      if (fresh) {
+        selection?.sync();
+        cropOverlay?.update({
+          oriented: { width: oriented.width, height: oriented.height },
+          scale: options.scale,
+          offset: options.offset
+        });
+        return;
+      }
+      detachTool?.();
+      detachTool = null;
+      selection?.detach();
+      selection = null;
+      cropOverlay?.destroy();
+      cropOverlay = null;
+      attached = { tool, oriented, crop };
+      if (tool === "select") {
+        selection = attachSelection({
+          stage,
+          getState: () => context.state.value,
+          commit: context.commit,
+          select: (id) => {
+            context.selectedId.value = id;
+          },
+          getSelectedId: () => context.selectedId.value,
+          editText: (annotation) => startTextEdit({ x: annotation.x, y: annotation.y }, annotation),
+          onSelectionRect: (rect) => {
+            selectionBox.value = rect;
+          }
+        });
+      } else if (tool === "crop") {
+        cropOverlay = attachCropOverlay({
+          stage,
+          oriented: { width: oriented.width, height: oriented.height },
+          scale: options.scale,
+          offset: options.offset,
+          initial: crop
+        });
+        applyCropAspect();
+      } else if (tool !== "adjust") {
+        detachTool = attachPointerTools(tool, {
+          stage,
+          contentGroup: () => scene?.contentGroup ?? null,
+          oriented: () => orientedCanvas.value,
+          getState: () => context.state.value,
+          commit: context.commit,
+          // Read the live view: the tool outlives the transform it was
+          // attached under
+          toScene: (pointer) => toImageCoords(
+            pointer,
+            context.state.value,
+            { width: oriented.width, height: oriented.height },
+            viewOptions.value ?? options
+          ),
+          panning: () => context.panning.value,
+          options: () => ({
+            color: context.drawColor.value,
+            strokeWidth: context.strokeWidth.value,
+            fontSize: context.fontSize.value,
+            sticker: context.sticker.value,
+            redactStyle: context.redactStyle.value
+          }),
+          startTextEdit: (position) => startTextEdit(position)
+        });
+      }
+    }
+    function applyCropAspect() {
+      if (cropOverlay === null) {
+        return;
+      }
+      const aspect = context.cropAspect.value;
+      const oriented = orientedCanvas.value;
+      if (aspect === "original" && oriented !== null) {
+        cropOverlay.setAspect(oriented.width / oriented.height);
+      } else {
+        cropOverlay.setAspect(typeof aspect === "number" ? aspect : null);
+      }
+    }
+    function refreshOrientedCanvas() {
+      if (sourceImage.value === null) {
+        return;
+      }
+      orientedCanvas.value = orientImage(sourceImage.value, context.state.value);
+    }
+    function seedState(seed, image) {
+      if (seed.crop === null) {
+        return seed;
+      }
+      const oriented = orientedSize({ width: image.naturalWidth, height: image.naturalHeight }, seed.rotation);
+      return { ...seed, crop: clampRect(seed.crop, oriented) };
+    }
+    async function load() {
+      const attempt = ++loadAttempt;
+      loaded.value = false;
+      errored.value = false;
+      try {
+        const image = await loadImage(props.src);
+        if (attempt !== loadAttempt) {
+          return;
+        }
+        sourceImage.value = image;
+        context.reset(props.initialState === void 0 ? void 0 : seedState(props.initialState, image));
+        const minDimension = Math.min(image.naturalWidth, image.naturalHeight);
+        context.fontSize.value = Math.min(128, Math.max(12, Math.round(minDimension / 15)));
+        pendingTransition = { kind: "load", context: captureView() };
+        refreshOrientedCanvas();
+        loaded.value = true;
+      } catch (error) {
+        if (attempt !== loadAttempt) {
+          return;
+        }
+        errored.value = true;
+        emit("error", error instanceof Error ? error : new Error(String(error)));
+      }
+    }
+    function currentOriented() {
+      const oriented = orientedCanvas.value;
+      return { width: oriented.width, height: oriented.height };
+    }
+    function onRotateCW() {
+      commitWithTransition("rotate-cw", rotateCW(context.state.value, currentOriented()), t("Rotate right"));
+    }
+    function onRotateCCW() {
+      let state = context.state.value;
+      let oriented = currentOriented();
+      for (let i = 0; i < 3; i++) {
+        state = rotateCW(state, oriented);
+        oriented = { width: oriented.height, height: oriented.width };
+      }
+      commitWithTransition("rotate-ccw", state, t("Rotate left"));
+    }
+    function onFlipHorizontal() {
+      commitWithTransition("flip-h", flipHorizontal(context.state.value, currentOriented()), t("Flip horizontal"));
+    }
+    function onFlipVertical() {
+      commitWithTransition("flip-v", flipVertical(context.state.value, currentOriented()), t("Flip vertical"));
+    }
+    function onApplyCrop() {
+      if (cropOverlay !== null) {
+        const crop = cropOverlay.getRect();
+        pendingTransition = { kind: "crop", context: captureView() };
+        context.commit({ ...context.state.value, crop }, t("Crop"));
+        context.setMode("annotate");
+      }
+    }
+    function onDuplicateSelection() {
+      const id = context.selectedId.value;
+      const state = context.state.value;
+      const annotation = state.annotations.find((entry) => entry.id === id);
+      if (annotation === void 0) {
+        return;
+      }
+      const copy = duplicateAnnotation(annotation);
+      context.commit({ ...state, annotations: [...state.annotations, copy] }, t("Duplicate"));
+      context.selectedId.value = copy.id;
+      renderView();
+    }
+    function onRevert() {
+      context.commit(createInitialState(), t("Revert all changes"));
+    }
+    function onResetCrop() {
+      context.commit({ ...context.state.value, crop: null }, t("Reset crop"));
+    }
+    function onDeleteSelection() {
+      const id = context.selectedId.value;
+      if (id === null) {
+        return;
+      }
+      const state = context.state.value;
+      context.selectedId.value = null;
+      context.commit({
+        ...state,
+        annotations: state.annotations.filter((annotation) => annotation.id !== id)
+      }, t("Delete"));
+    }
+    useEditorShortcuts({
+      context,
+      isTextEditing: () => textEdit.value !== null,
+      onDelete: onDeleteSelection,
+      onEscape: () => {
+        if (context.selectedId.value !== null) {
+          context.selectedId.value = null;
+          renderView();
+        } else if (context.activeMode.value === "crop") {
+          context.setMode("select");
+        } else if (context.activeMode.value === "annotate" && context.activeTool.value !== "select") {
+          context.activeTool.value = "select";
+        }
+      }
+    });
+    watch(viewFit, (fit) => {
+      context.viewFit.value = fit;
+    }, { immediate: true });
+    provideEditorCommands({
+      rotateCW: onRotateCW,
+      rotateCCW: onRotateCCW,
+      flipHorizontal: onFlipHorizontal,
+      flipVertical: onFlipVertical,
+      applyCrop: onApplyCrop,
+      resetCrop: onResetCrop,
+      revert: onRevert
+    });
+    watch(() => props.src, load);
+    watch(
+      [
+        () => context.state.value.rotation,
+        () => context.state.value.flipX,
+        () => context.state.value.flipY,
+        () => context.state.value.fineRotation,
+        () => context.state.value.zoom
+      ],
+      refreshOrientedCanvas
+    );
+    watch(
+      [context.state, context.activeTool, context.activeMode, context.viewZoom, context.viewPan, context.interacting, orientedCanvas, containerSize],
+      renderView
+    );
+    watch(context.cropAspect, applyCropAspect);
+    watch(context.selectedId, (id) => {
+      const annotation = context.state.value.annotations.find((entry) => entry.id === id);
+      if (annotation !== void 0 && "color" in annotation && annotation.type !== "sticker") {
+        context.drawColor.value = annotation.color;
+      }
+    });
+    watch([context.state, context.interacting], () => {
+      if (!context.interacting.value) {
+        emit("change", structuredClone(context.state.value));
+      }
+    });
+    onMounted(() => {
+      stage = new Konva.Stage({ container: container.value, width: 1, height: 1 });
+      resizeObserver = new ResizeObserver(() => {
+        const { clientWidth, clientHeight } = container.value;
+        containerSize.value = { width: clientWidth, height: clientHeight };
+      });
+      resizeObserver.observe(container.value);
+      load();
+    });
+    onBeforeUnmount(() => {
+      resizeObserver?.disconnect();
+      detachTool?.();
+      selection?.detach();
+      cropOverlay?.destroy();
+      scene?.destroy();
+      scene = null;
+      stage?.destroy();
+      stage = null;
+    });
+    __expose({
+      exportImage,
+      /**
+       * Start over, optionally from a given state.
+       *
+       * @param state state to reset to, defaulting to a pristine one
+       */
+      reset: (state) => context.reset(state)
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: "image-editor",
+        style: normalizeStyle({
+          "--editor-ambient": unref(ambient),
+          "--editor-backdrop": unref(backdrop) ? `url(${unref(backdrop)})` : "none"
+        })
+      }, [
+        createElementVNode("div", _hoisted_1, [
+          createElementVNode("div", _hoisted_2, [
+            createElementVNode("div", _hoisted_3, [
+              createElementVNode("div", {
+                ref_key: "container",
+                ref: container,
+                class: "image-editor__canvas",
+                style: normalizeStyle({ cursor: canvasCursor.value }),
+                role: "img",
+                "aria-label": __props.label ?? labels.canvas
+              }, null, 12, _hoisted_4),
+              !loaded.value && !errored.value ? (openBlock(), createBlock(unref(NcLoadingIcon), {
+                key: 0,
+                class: "image-editor__loading",
+                size: 44
+              })) : createCommentVNode("", true),
+              errored.value ? (openBlock(), createElementBlock("div", _hoisted_5, [
+                createElementVNode("p", null, toDisplayString(labels.failed), 1),
+                createVNode(unref(NcButton), {
+                  variant: "secondary",
+                  "data-test": "retry",
+                  onClick: _cache[0] || (_cache[0] = ($event) => load())
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(labels.retry), 1)
+                  ]),
+                  _: 1
+                })
+              ])) : createCommentVNode("", true),
+              unref(textEdit) !== null ? (openBlock(), createBlock(TextOverlay, {
+                key: 2,
+                x: unref(textEdit).screenX,
+                y: unref(textEdit).screenY,
+                "font-size": unref(textEdit).screenFontSize,
+                color: unref(textEdit).color,
+                initial: unref(textEdit).value,
+                onConfirm: unref(confirmTextEdit),
+                onCancel: _cache[1] || (_cache[1] = ($event) => textEdit.value = null)
+              }, null, 8, ["x", "y", "font-size", "color", "initial", "onConfirm"])) : createCommentVNode("", true),
+              selectionBox.value !== null ? (openBlock(), createBlock(SelectionToolbar, {
+                key: 3,
+                box: selectionBox.value,
+                onDuplicate: onDuplicateSelection,
+                onDelete: onDeleteSelection
+              }, null, 8, ["box"])) : createCommentVNode("", true)
+            ]),
+            createVNode(EditorTopBar, {
+              class: "image-editor__topbar",
+              loaded: loaded.value,
+              onSave: unref(onSave),
+              onCancel: _cache[2] || (_cache[2] = ($event) => emit("cancel"))
+            }, null, 8, ["loaded", "onSave"]),
+            createVNode(EditorPanel, {
+              class: normalizeClass(unref(context).activeMode.value === "filter" ? "image-editor__strip" : "image-editor__controls"),
+              loaded: loaded.value,
+              oriented: orientedCanvas.value
+            }, null, 8, ["class", "loaded", "oriented"]),
+            createVNode(EditorSidebar, {
+              class: "image-editor__rail",
+              loaded: loaded.value
+            }, null, 8, ["loaded"]),
+            createElementVNode("span", _hoisted_6, toDisplayString(unref(announcement)), 1)
+          ])
+        ])
+      ], 4);
+    };
+  }
+});
+const ImageEditor = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-e3346ccd"]]);
+export {
+  ImageEditor,
+  createInitialState,
+  isPristine,
+  useHistory
+};
+//# sourceMappingURL=index.mjs.map