@nextcloud/image-editor 1.0.0-beta.1 → 1.0.0-beta.2

package/dist/index.mjs

@@ -1,5 +1,5 @@
 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 { shallowRef, computed, defineComponent, openBlock, createElementBlock, normalizeClass, renderSlot, mergeProps, createElementVNode, toDisplayString, createCommentVNode, createTextVNode, watch, provide, inject, Fragment, renderList, createVNode, withCtx, createBlock, resolveDynamicComponent, unref, normalizeStyle, createSlots, 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";
@@ -67,14 +67,21 @@ function createInitialState() {
     flipX: false,
     flipY: false,
     crop: null,
-    adjustments: { brightness: 0, contrast: 0, saturation: 0 },
+    adjustments: {
+      exposure: 0,
+      brightness: 0,
+      contrast: 0,
+      saturation: 0,
+      temperature: 0,
+      tint: 0,
+      sharpen: 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;
+  return state.rotation === 0 && state.fineRotation === 0 && state.zoom === 1 && !state.flipX && !state.flipY && state.crop === null && Object.values(state.adjustments).every((value) => value === 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 };
@@ -109,6 +116,7 @@ function mapAnnotationCW(annotation, height) {
     case "draw":
       return { ...annotation, points: mapPointsCW(annotation.points, height) };
     case "arrow":
+    case "line":
       return { ...annotation, points: mapPointsCW(annotation.points, height) };
     case "rectangle":
     case "ellipse":
@@ -140,7 +148,8 @@ function rotateCW(state, oriented) {
 function mapAnnotationFlipX(annotation, width) {
   switch (annotation.type) {
     case "draw":
-    case "arrow": {
+    case "arrow":
+    case "line": {
       const points = annotation.points.map((value, i) => i % 2 === 0 ? width - value : value);
       return { ...annotation, points };
     }
@@ -185,7 +194,8 @@ function flipHorizontal(state, oriented) {
 function mapAnnotationFlipY(annotation, height) {
   switch (annotation.type) {
     case "draw":
-    case "arrow": {
+    case "arrow":
+    case "line": {
       const points = annotation.points.map((value, i) => i % 2 === 1 ? height - value : value);
       return { ...annotation, points };
     }
@@ -230,7 +240,8 @@ function flipVertical(state, oriented) {
 function translateAnnotation(annotation, dx, dy) {
   switch (annotation.type) {
     case "draw":
-    case "arrow": {
+    case "arrow":
+    case "line": {
       const points = annotation.points.map((value, i) => value + (i % 2 === 0 ? dx : dy));
       return { ...annotation, points };
     }
@@ -249,7 +260,7 @@ function translateAnnotation(annotation, dx, dy) {
 function duplicateAnnotation(annotation, offset = 16) {
   return { ...translateAnnotation(annotation, offset, offset), id: newId() };
 }
-const _sfc_main$I = /* @__PURE__ */ defineComponent({
+const _sfc_main$N = /* @__PURE__ */ defineComponent({
   __name: "GlassSurface",
   props: {
     variant: {}
@@ -271,8 +282,51 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const GlassSurface = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["__scopeId", "data-v-b60e81d9"]]);
-const _sfc_main$H = {
+const GlassSurface = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["__scopeId", "data-v-b60e81d9"]]);
+const _sfc_main$M = {
+  name: "CameraIrisIcon",
+  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$E = ["fill", "width", "height"];
+const _hoisted_3$B = { d: "M13.73,15L9.83,21.76C10.53,21.91 11.25,22 12,22C14.4,22 16.6,21.15 18.32,19.75L14.66,13.4M2.46,15C3.38,17.92 5.61,20.26 8.45,21.34L12.12,15M8.54,12L4.64,5.25C3,7 2,9.39 2,12C2,12.68 2.07,13.35 2.2,14H9.69M21.8,10H14.31L14.6,10.5L19.36,18.75C21,16.97 22,14.6 22,12C22,11.31 21.93,10.64 21.8,10M21.54,9C20.62,6.07 18.39,3.74 15.55,2.66L11.88,9M9.4,10.5L14.17,2.24C13.47,2.09 12.75,2 12,2C9.6,2 7.4,2.84 5.68,4.25L9.34,10.6L9.4,10.5Z" };
+const _hoisted_4$A = { key: 0 };
+function _sfc_render$w(_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 camera-iris-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$A, toDisplayString($props.title), 1)) : createCommentVNode("", true)
+      ])
+    ], 8, _hoisted_2$E))
+  ], 16, _hoisted_1$J);
+}
+const CameraIris = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["render", _sfc_render$w]]);
+const _sfc_main$L = {
   name: "ContrastCircleIcon",
   emits: ["click"],
   props: {
@@ -289,11 +343,11 @@ const _sfc_main$H = {
     }
   }
 };
-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) {
+const _hoisted_1$I = ["aria-hidden", "aria-label"];
+const _hoisted_2$D = ["fill", "width", "height"];
+const _hoisted_3$A = { 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$z = { key: 0 };
+function _sfc_render$v(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, {
     "aria-hidden": $props.title ? null : "true",
     "aria-label": $props.title,
@@ -308,14 +362,57 @@ function _sfc_render$r(_ctx, _cache, $props, $setup, $data, $options) {
       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)
+      createElementVNode("path", _hoisted_3$A, [
+        $props.title ? (openBlock(), createElementBlock("title", _hoisted_4$z, toDisplayString($props.title), 1)) : createCommentVNode("", true)
       ])
-    ], 8, _hoisted_2$z))
-  ], 16, _hoisted_1$E);
+    ], 8, _hoisted_2$D))
+  ], 16, _hoisted_1$I);
 }
-const ContrastCircle = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["render", _sfc_render$r]]);
-const _sfc_main$G = {
+const ContrastCircle = /* @__PURE__ */ _export_sfc(_sfc_main$L, [["render", _sfc_render$v]]);
+const _sfc_main$K = {
+  name: "ImageFilterCenterFocusIcon",
+  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$C = ["fill", "width", "height"];
+const _hoisted_3$z = { d: "M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M19,19H15V21H19A2,2 0 0,0 21,19V15H19M19,3H15V5H19V9H21V5A2,2 0 0,0 19,3M5,5H9V3H5A2,2 0 0,0 3,5V9H5M5,15H3V19A2,2 0 0,0 5,21H9V19H5V15Z" };
+const _hoisted_4$y = { key: 0 };
+function _sfc_render$u(_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 image-filter-center-focus-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$z, [
+        $props.title ? (openBlock(), createElementBlock("title", _hoisted_4$y, toDisplayString($props.title), 1)) : createCommentVNode("", true)
+      ])
+    ], 8, _hoisted_2$C))
+  ], 16, _hoisted_1$H);
+}
+const ImageFilterCenterFocus = /* @__PURE__ */ _export_sfc(_sfc_main$K, [["render", _sfc_render$u]]);
+const _sfc_main$J = {
   name: "InvertColorsIcon",
   emits: ["click"],
   props: {
@@ -332,11 +429,11 @@ const _sfc_main$G = {
     }
   }
 };
-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) {
+const _hoisted_1$G = ["aria-hidden", "aria-label"];
+const _hoisted_2$B = ["fill", "width", "height"];
+const _hoisted_3$y = { 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$x = { key: 0 };
+function _sfc_render$t(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, {
     "aria-hidden": $props.title ? null : "true",
     "aria-label": $props.title,
@@ -351,14 +448,100 @@ function _sfc_render$q(_ctx, _cache, $props, $setup, $data, $options) {
       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)
+      createElementVNode("path", _hoisted_3$y, [
+        $props.title ? (openBlock(), createElementBlock("title", _hoisted_4$x, toDisplayString($props.title), 1)) : createCommentVNode("", true)
       ])
-    ], 8, _hoisted_2$y))
-  ], 16, _hoisted_1$D);
+    ], 8, _hoisted_2$B))
+  ], 16, _hoisted_1$G);
+}
+const InvertColors = /* @__PURE__ */ _export_sfc(_sfc_main$J, [["render", _sfc_render$t]]);
+const _sfc_main$I = {
+  name: "ThermometerIcon",
+  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$A = ["fill", "width", "height"];
+const _hoisted_3$x = { d: "M15 13V5A3 3 0 0 0 9 5V13A5 5 0 1 0 15 13M12 4A1 1 0 0 1 13 5V8H11V5A1 1 0 0 1 12 4Z" };
+const _hoisted_4$w = { key: 0 };
+function _sfc_render$s(_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 thermometer-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$x, [
+        $props.title ? (openBlock(), createElementBlock("title", _hoisted_4$w, toDisplayString($props.title), 1)) : createCommentVNode("", true)
+      ])
+    ], 8, _hoisted_2$A))
+  ], 16, _hoisted_1$F);
 }
-const InvertColors = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["render", _sfc_render$q]]);
-const _sfc_main$F = {
+const Thermometer = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["render", _sfc_render$s]]);
+const _sfc_main$H = {
+  name: "WhiteBalanceIridescentIcon",
+  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: "M4.96,19.95L6.76,18.15L5.34,16.74L3.55,18.53M3.55,4.46L5.34,6.26L6.76,4.84L4.96,3.05M20.45,18.53L18.66,16.74L17.24,18.15L19.04,19.95M13,22.45V19.5H11V22.45C11.32,22.45 13,22.45 13,22.45M19.04,3.05L17.24,4.84L18.66,6.26L20.45,4.46M11,3.5H13V0.55H11M5,14.5H19V8.5H5V14.5Z" };
+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 white-balance-iridescent-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 WhiteBalanceIridescent = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["render", _sfc_render$r]]);
+const _sfc_main$G = {
   name: "WhiteBalanceSunnyIcon",
   emits: ["click"],
   props: {
@@ -375,11 +558,11 @@ const _sfc_main$F = {
     }
   }
 };
-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) {
+const _hoisted_1$D = ["aria-hidden", "aria-label"];
+const _hoisted_2$y = ["fill", "width", "height"];
+const _hoisted_3$v = { 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$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,
@@ -394,16 +577,16 @@ function _sfc_render$p(_ctx, _cache, $props, $setup, $data, $options) {
       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)
+      createElementVNode("path", _hoisted_3$v, [
+        $props.title ? (openBlock(), createElementBlock("title", _hoisted_4$u, toDisplayString($props.title), 1)) : createCommentVNode("", true)
       ])
-    ], 8, _hoisted_2$x))
-  ], 16, _hoisted_1$C);
+    ], 8, _hoisted_2$y))
+  ], 16, _hoisted_1$D);
 }
-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({
+const WhiteBalanceSunny = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["render", _sfc_render$q]]);
+const _hoisted_1$C = { class: "editor-slider" };
+const _hoisted_2$x = ["value", "data-test", "disabled", "aria-label", "min", "max", "step"];
+const _sfc_main$F = /* @__PURE__ */ defineComponent({
   __name: "EditorSlider",
   props: {
     value: {},
@@ -423,7 +606,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
       emit("input", Number(event.target.value));
     }
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$B, [
+      return openBlock(), createElementBlock("div", _hoisted_1$C, [
         createElementVNode("input", {
           value: props.value,
           "data-test": __props.dataTest,
@@ -435,7 +618,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
           step: __props.step,
           onInput,
           onChange: _cache[0] || (_cache[0] = ($event) => emit("commit"))
-        }, null, 40, _hoisted_2$w),
+        }, null, 40, _hoisted_2$x),
         createElementVNode("output", null, [
           renderSlot(_ctx.$slots, "preview", {}, () => [
             createTextVNode(toDisplayString(__props.display ?? props.value), 1)
@@ -445,9 +628,9 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
     };
   }
 });
-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({
+const EditorSlider = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["__scopeId", "data-v-6562ea60"]]);
+const _hoisted_1$B = ["disabled", "data-test", "aria-pressed"];
+const _sfc_main$E = /* @__PURE__ */ defineComponent({
   __name: "IconTab",
   props: {
     label: {},
@@ -469,11 +652,11 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
       }, [
         renderSlot(_ctx.$slots, "default", {}, void 0, true),
         createElementVNode("span", null, toDisplayString(__props.label), 1)
-      ], 10, _hoisted_1$A);
+      ], 10, _hoisted_1$B);
     };
   }
 });
-const IconTab = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-95889662"]]);
+const IconTab = /* @__PURE__ */ _export_sfc(_sfc_main$E, [["__scopeId", "data-v-95889662"]]);
 const gtBuilder = getGettextBuilder().detectLocale();
 [].map((data) => gtBuilder.addTranslation(data.locale, data.json));
 const gt = gtBuilder.build();
@@ -629,9 +812,9 @@ function useEditorContext() {
   }
   return context;
 }
-const _hoisted_1$z = { class: "adjust-panel" };
-const _hoisted_2$v = { class: "adjust-panel__tabs" };
-const _sfc_main$C = /* @__PURE__ */ defineComponent({
+const _hoisted_1$A = { class: "adjust-panel" };
+const _hoisted_2$w = { class: "adjust-panel__tabs" };
+const _sfc_main$D = /* @__PURE__ */ defineComponent({
   __name: "AdjustPanel",
   props: {
     loaded: { type: Boolean }
@@ -639,11 +822,15 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const context = useEditorContext();
     const adjustments = [
+      { id: "exposure", label: t("Exposure"), icon: CameraIris },
       { id: "brightness", label: t("Brightness"), icon: WhiteBalanceSunny },
       { id: "contrast", label: t("Contrast"), icon: ContrastCircle },
-      { id: "saturation", label: t("Saturation"), icon: InvertColors }
+      { id: "saturation", label: t("Saturation"), icon: InvertColors },
+      { id: "temperature", label: t("Temperature"), icon: Thermometer },
+      { id: "tint", label: t("Tint"), icon: WhiteBalanceIridescent },
+      { id: "sharpen", label: t("Sharpen"), icon: ImageFilterCenterFocus }
     ];
-    const activeAdjustment = shallowRef("brightness");
+    const activeAdjustment = shallowRef("exposure");
     const display = computed(() => {
       const value = context.state.value.adjustments[activeAdjustment.value];
       return value > 0 ? `+${value}` : `${value}`;
@@ -659,8 +846,8 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
       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, [
+      return openBlock(), createElementBlock("div", _hoisted_1$A, [
+        createElementVNode("div", _hoisted_2$w, [
           (openBlock(), createElementBlock(Fragment, null, renderList(adjustments, (adjustment) => {
             return createVNode(IconTab, {
               key: adjustment.id,
@@ -693,8 +880,8 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const AdjustPanel = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["__scopeId", "data-v-d7f848cf"]]);
-const _sfc_main$B = {
+const AdjustPanel = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-3ad63bd8"]]);
+const _sfc_main$C = {
   name: "ArrowTopRightIcon",
   emits: ["click"],
   props: {
@@ -711,15 +898,58 @@ const _sfc_main$B = {
     }
   }
 };
+const _hoisted_1$z = ["aria-hidden", "aria-label"];
+const _hoisted_2$v = ["fill", "width", "height"];
+const _hoisted_3$u = { d: "M5,17.59L15.59,7H9V5H19V15H17V8.41L6.41,19L5,17.59Z" };
+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 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$u, [
+        $props.title ? (openBlock(), createElementBlock("title", _hoisted_4$t, toDisplayString($props.title), 1)) : createCommentVNode("", true)
+      ])
+    ], 8, _hoisted_2$v))
+  ], 16, _hoisted_1$z);
+}
+const ArrowTopRight = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["render", _sfc_render$p]]);
+const _sfc_main$B = {
+  name: "EllipseOutlineIcon",
+  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_3$t = { 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$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",
+    class: "material-design-icon ellipse-outline-icon",
     role: "img",
     onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
   }), [
@@ -736,9 +966,9 @@ function _sfc_render$o(_ctx, _cache, $props, $setup, $data, $options) {
     ], 8, _hoisted_2$u))
   ], 16, _hoisted_1$y);
 }
-const ArrowTopRight = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["render", _sfc_render$o]]);
+const EllipseOutline = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["render", _sfc_render$o]]);
 const _sfc_main$A = {
-  name: "EllipseOutlineIcon",
+  name: "FormatTextIcon",
   emits: ["click"],
   props: {
     title: {
@@ -756,13 +986,13 @@ const _sfc_main$A = {
 };
 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_3$s = { 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$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",
+    class: "material-design-icon format-text-icon",
     role: "img",
     onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
   }), [
@@ -779,9 +1009,9 @@ function _sfc_render$n(_ctx, _cache, $props, $setup, $data, $options) {
     ], 8, _hoisted_2$t))
   ], 16, _hoisted_1$x);
 }
-const EllipseOutline = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["render", _sfc_render$n]]);
+const FormatText = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["render", _sfc_render$n]]);
 const _sfc_main$z = {
-  name: "FormatTextIcon",
+  name: "PencilIcon",
   emits: ["click"],
   props: {
     title: {
@@ -799,13 +1029,13 @@ const _sfc_main$z = {
 };
 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_3$r = { 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$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",
+    class: "material-design-icon pencil-icon",
     role: "img",
     onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
   }), [
@@ -822,9 +1052,9 @@ function _sfc_render$m(_ctx, _cache, $props, $setup, $data, $options) {
     ], 8, _hoisted_2$s))
   ], 16, _hoisted_1$w);
 }
-const FormatText = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["render", _sfc_render$m]]);
+const Pencil = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["render", _sfc_render$m]]);
 const _sfc_main$y = {
-  name: "PencilIcon",
+  name: "RectangleOutlineIcon",
   emits: ["click"],
   props: {
     title: {
@@ -842,13 +1072,13 @@ const _sfc_main$y = {
 };
 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_3$q = { d: "M4,6V19H20V6H4M18,17H6V8H18V17Z" };
 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",
+    class: "material-design-icon rectangle-outline-icon",
     role: "img",
     onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
   }), [
@@ -865,9 +1095,9 @@ function _sfc_render$l(_ctx, _cache, $props, $setup, $data, $options) {
     ], 8, _hoisted_2$r))
   ], 16, _hoisted_1$v);
 }
-const Pencil = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["render", _sfc_render$l]]);
+const RectangleOutline = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["render", _sfc_render$l]]);
 const _sfc_main$x = {
-  name: "RectangleOutlineIcon",
+  name: "VectorLineIcon",
   emits: ["click"],
   props: {
     title: {
@@ -885,13 +1115,13 @@ const _sfc_main$x = {
 };
 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_3$p = { d: "M15,3V7.59L7.59,15H3V21H9V16.42L16.42,9H21V3M17,5H19V7H17M5,17H7V19H5" };
 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",
+    class: "material-design-icon vector-line-icon",
     role: "img",
     onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
   }), [
@@ -908,7 +1138,7 @@ function _sfc_render$k(_ctx, _cache, $props, $setup, $data, $options) {
     ], 8, _hoisted_2$q))
   ], 16, _hoisted_1$u);
 }
-const RectangleOutline = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["render", _sfc_render$k]]);
+const VectorLine = /* @__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);
@@ -963,9 +1193,10 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
       { id: "rectangle", label: t("Rectangle"), icon: RectangleOutline },
       { id: "ellipse", label: t("Ellipse"), icon: EllipseOutline },
       { id: "arrow", label: t("Arrow"), icon: ArrowTopRight },
+      { id: "line", label: t("Line"), icon: VectorLine },
       { id: "text", label: t("Text"), icon: FormatText }
     ];
-    const showStrokeOptions = computed(() => ["draw", "rectangle", "ellipse", "arrow"].includes(context.activeTool.value));
+    const showStrokeOptions = computed(() => ["draw", "rectangle", "ellipse", "arrow", "line"].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)));
@@ -1050,7 +1281,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const AnnotatePanel = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["__scopeId", "data-v-1bf135e4"]]);
+const AnnotatePanel = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["__scopeId", "data-v-f7e8a194"]]);
 const _sfc_main$v = {
   name: "FlipHorizontalIcon",
   emits: ["click"],
@@ -1450,6 +1681,43 @@ const PresetChip = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["__scopeId", "data
 function luma(r, g, b) {
   return 0.299 * r + 0.587 * g + 0.114 * b;
 }
+const EXPOSURE_RANGE = 2;
+const TEMPERATURE_RANGE = 0.25;
+const TINT_RANGE = 0.25;
+function tone(imageData) {
+  const { data } = imageData;
+  const exposure = 2 ** ((this.getAttr("exposure") ?? 0) * EXPOSURE_RANGE);
+  const temperature = (this.getAttr("temperature") ?? 0) * TEMPERATURE_RANGE;
+  const tint = (this.getAttr("tint") ?? 0) * TINT_RANGE;
+  const red = exposure * (1 + temperature) * (1 + tint / 2);
+  const green = exposure * (1 - tint);
+  const blue = exposure * (1 - temperature) * (1 + tint / 2);
+  for (let i = 0; i < data.length; i += 4) {
+    data[i] = data[i] * red;
+    data[i + 1] = data[i + 1] * green;
+    data[i + 2] = data[i + 2] * blue;
+  }
+}
+const SHARPEN_RANGE = 1.2;
+function sharpen(imageData) {
+  const amount = (this.getAttr("sharpen") ?? 0) * SHARPEN_RANGE;
+  if (amount === 0) {
+    return;
+  }
+  const { data, width, height } = imageData;
+  const source = new Uint8ClampedArray(data);
+  const stride = width * 4;
+  for (let y = 1; y < height - 1; y++) {
+    for (let x = 1; x < width - 1; x++) {
+      const centre = y * stride + x * 4;
+      for (let channel = 0; channel < 3; channel++) {
+        const i = centre + channel;
+        const neighbours = source[i - 4] + source[i + 4] + source[i - stride] + source[i + stride];
+        data[i] = source[i] * (1 + 4 * amount) - amount * neighbours;
+      }
+    }
+  }
+}
 function saturate(imageData) {
   const { data } = imageData;
   const factor = this.saturation() + 1;
@@ -1612,6 +1880,14 @@ function buildAnnotationNode(annotation, oriented) {
         lineCap: "round",
         lineJoin: "round"
       });
+    case "line":
+      return new Konva.Line({
+        ...base,
+        points: [...annotation.points],
+        stroke: annotation.color,
+        strokeWidth: annotation.strokeWidth,
+        lineCap: "round"
+      });
     case "arrow":
       return new Konva.Arrow({
         ...base,
@@ -1670,8 +1946,11 @@ function buildAnnotationNode(annotation, oriented) {
   }
 }
 function applyFilters(node, state, pixelRatio = 1) {
-  const { brightness, contrast, saturation } = state.adjustments;
+  const { exposure, brightness, contrast, saturation, temperature, tint } = state.adjustments;
   const filters = [];
+  if (exposure !== 0 || temperature !== 0 || tint !== 0) {
+    filters.push(tone);
+  }
   if (brightness !== 0) {
     filters.push(Konva.Filters.Brighten);
   }
@@ -1703,6 +1982,9 @@ function applyFilters(node, state, pixelRatio = 1) {
   if (presetFilters !== null) {
     filters.push(presetFilters);
   }
+  if (state.adjustments.sharpen !== 0) {
+    filters.push(sharpen);
+  }
   if (filters.length === 0) {
     node.filters([]);
     node.clearCache();
@@ -1712,6 +1994,10 @@ function applyFilters(node, state, pixelRatio = 1) {
   node.brightness(brightness / 100);
   node.contrast(contrast);
   node.saturation(saturation / 100);
+  node.setAttr("exposure", exposure / 100);
+  node.setAttr("temperature", temperature / 100);
+  node.setAttr("tint", tint / 100);
+  node.setAttr("sharpen", state.adjustments.sharpen / 100);
   if (state.preset === "posterize") {
     node.levels(0.02);
   }
@@ -1727,9 +2013,7 @@ function thumbnailKey(state) {
     crop?.y,
     crop?.width,
     crop?.height,
-    adjustments.brightness,
-    adjustments.contrast,
-    adjustments.saturation
+    ...Object.values(adjustments)
   ].join("|");
 }
 function presetThumbnail(oriented, state, preset, size = 96) {
@@ -1784,8 +2068,7 @@ function createScene(stage) {
       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}`;
+    const nextFilterKey = `${Object.values(state.adjustments).join("|")}|${state.preset}|${pixelRatio}`;
     if (orientedChanged || nextFilterKey !== filterKey) {
       applyFilters(imageNode, state, pixelRatio);
       filterKey = nextFilterKey;
@@ -2759,7 +3042,8 @@ const _hoisted_4$3 = { class: "editor-topbar__actions" };
 const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "EditorTopBar",
   props: {
-    loaded: { type: Boolean }
+    loaded: { type: Boolean },
+    saving: { type: Boolean }
   },
   emits: ["save", "cancel"],
   setup(__props, { emit: __emit }) {
@@ -2942,20 +3226,31 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
           createVNode(unref(NcButton), {
             "data-test": "save",
             variant: "primary",
-            disabled: !__props.loaded,
+            disabled: !__props.loaded || __props.saving,
             onClick: _cache[6] || (_cache[6] = ($event) => emit("save"))
-          }, {
+          }, createSlots({
             default: withCtx(() => [
-              createTextVNode(toDisplayString(labels.save), 1)
+              createTextVNode(" " + toDisplayString(labels.save), 1)
             ]),
-            _: 1
-          }, 8, ["disabled"])
+            _: 2
+          }, [
+            __props.saving ? {
+              name: "icon",
+              fn: withCtx(() => [
+                createVNode(unref(NcLoadingIcon), {
+                  size: 20,
+                  "data-test": "saving"
+                })
+              ]),
+              key: "0"
+            } : void 0
+          ]), 1032, ["disabled"])
         ])
       ]);
     };
   }
 });
-const EditorTopBar = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-9ba9bd23"]]);
+const EditorTopBar = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-50392429"]]);
 const _sfc_main$4 = {
   name: "ContentCopyIcon",
   emits: ["click"],
@@ -3376,7 +3671,13 @@ async function canvasToBlob(canvas, type = "image/png", quality) {
     }, type, quality);
   });
 }
+async function painted() {
+  await new Promise((resolve) => {
+    requestAnimationFrame(() => requestAnimationFrame(() => resolve(null)));
+  });
+}
 function useExportImage(deps) {
+  const exporting = ref(false);
   async function exportImage(options = {}) {
     const oriented = deps.oriented();
     if (oriented === null) {
@@ -3386,6 +3687,15 @@ function useExportImage(deps) {
     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 };
     }
+    exporting.value = true;
+    await painted();
+    try {
+      return await encode(oriented, options);
+    } finally {
+      exporting.value = false;
+    }
+  }
+  async function encode(oriented, options) {
     const canvas = renderToCanvas(oriented, deps.getState(), options.maxSize);
     const mimeType = options.format ?? "image/png";
     try {
@@ -3408,7 +3718,7 @@ function useExportImage(deps) {
       deps.onError(error instanceof Error ? error : new Error(String(error)));
     }
   }
-  return { exportImage, save };
+  return { exporting, exportImage, save };
 }
 function useTextEditing(deps) {
   const { context } = deps;
@@ -3896,7 +4206,8 @@ function transformPoints(points, node) {
 function applyNodeTransform(annotation, node) {
   switch (annotation.type) {
     case "draw":
-    case "arrow": {
+    case "arrow":
+    case "line": {
       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);
@@ -4025,11 +4336,12 @@ const TOOL_LABELS = {
   rectangle: t("Rectangle"),
   ellipse: t("Ellipse"),
   arrow: t("Arrow"),
+  line: t("Line"),
   sticker: t("Sticker"),
   redact: t("Redact")
 };
 function attachPointerTools(tool, deps) {
-  if (!["draw", "rectangle", "ellipse", "arrow", "text", "sticker", "redact"].includes(tool)) {
+  if (!["draw", "rectangle", "ellipse", "arrow", "line", "text", "sticker", "redact"].includes(tool)) {
     return () => {
     };
   }
@@ -4047,7 +4359,7 @@ function attachPointerTools(tool, deps) {
       previewNode = null;
       return;
     }
-    if (previewNode !== null && (active.type === "draw" || active.type === "arrow")) {
+    if (previewNode !== null && (active.type === "draw" || active.type === "arrow" || active.type === "line")) {
       previewNode.points(active.points);
       return;
     }
@@ -4078,7 +4390,8 @@ function attachPointerTools(tool, deps) {
         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 };
+      case "line":
+        active = { id: newId(), type: tool, points: [point.x, point.y, point.x, point.y], color: options.color, strokeWidth: options.strokeWidth };
         break;
       case "rectangle":
       case "ellipse":
@@ -4125,6 +4438,7 @@ function attachPointerTools(tool, deps) {
         active.points.push(point.x, point.y);
         break;
       case "arrow":
+      case "line":
         active.points = [start.x, start.y, point.x, point.y];
         break;
       case "rectangle":
@@ -4188,7 +4502,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     src: {},
     label: {},
     exportOptions: {},
-    initialState: {}
+    initialState: {},
+    saving: { type: Boolean }
   },
   emits: ["save", "cancel", "error", "change"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -4228,7 +4543,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         return "grab";
       }
       const tool = context.activeTool.value;
-      if (["draw", "rectangle", "ellipse", "arrow", "text", "sticker", "redact"].includes(tool)) {
+      if (["draw", "rectangle", "ellipse", "arrow", "line", "text", "sticker", "redact"].includes(tool)) {
         return "crosshair";
       }
       return "default";
@@ -4272,7 +4587,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       viewOptions: () => viewOptions.value,
       oriented: () => orientedCanvas.value
     });
-    const { exportImage, save: onSave } = useExportImage({
+    const { exporting, exportImage, save: onSave } = useExportImage({
       oriented: () => orientedCanvas.value,
       getState: () => context.state.value,
       source: () => props.src instanceof Blob ? props.src : null,
@@ -4654,9 +4969,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             createVNode(EditorTopBar, {
               class: "image-editor__topbar",
               loaded: loaded.value,
+              saving: unref(exporting) || __props.saving === true,
               onSave: unref(onSave),
               onCancel: _cache[2] || (_cache[2] = ($event) => emit("cancel"))
-            }, null, 8, ["loaded", "onSave"]),
+            }, null, 8, ["loaded", "saving", "onSave"]),
             createVNode(EditorPanel, {
               class: normalizeClass(unref(context).activeMode.value === "filter" ? "image-editor__strip" : "image-editor__controls"),
               loaded: loaded.value,
@@ -4673,7 +4989,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const ImageEditor = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-e3346ccd"]]);
+const ImageEditor = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5225c517"]]);
 export {
   ImageEditor,
   createInitialState,