@servantcdh/ez-planet-labeling 0.2.0 → 0.3.2

package/dist/index.js

@@ -68,8 +68,8 @@ const Q = () => Xe, Rt = (e) => {
     return () => {
     };
   const n = Vn.map((s) => {
-    const o = `label:${s}`, a = (i) => {
-      e(s, i.data);
+    const o = `label:${s}`, a = (c) => {
+      e(s, c.data);
     };
     return t.on(o, a), { eventName: o, handler: a };
   });
@@ -100,7 +100,7 @@ const Q = () => Xe, Rt = (e) => {
       ({ info: r }) => r === it
     )
   );
-  const i = {
+  const c = {
     info: it,
     left: -100,
     top: -100,
@@ -116,33 +116,33 @@ const Q = () => Xe, Rt = (e) => {
     originX: "center",
     originY: "center",
     selectable: !1
-  }, c = e.lineCap === "round" ? new s(i) : new o(i), l = (r) => {
+  }, i = e.lineCap === "round" ? new s(c) : new o(c), l = (r) => {
     if (!r && !a.x)
       return;
     const m = r == null ? void 0 : r.e, { x: v, y: g } = m ? n.getScenePoint(m) : a;
-    a.x = v, a.y = g, c.set({ top: g, left: v }), c.setCoords(), n.renderAll();
+    a.x = v, a.y = g, i.set({ top: g, left: v }), i.setCoords(), n.renderAll();
   }, h = (r) => {
     l(r);
   }, u = () => {
     Un("init");
   };
-  return l(), { brushCursor: c, handleOnMouseMove: h, handleOnMouseUp: u };
+  return l(), { brushCursor: i, handleOnMouseMove: h, handleOnMouseUp: u };
 }, Ot = ({ colorCode: e, callback: t }, n, s = !1) => {
   const o = pe(), a = Gt();
   s && (n = s, o.getObjects().forEach((r) => r.set({ visible: !1 })), o.renderAll());
-  let i = 0, c = 0;
+  let c = 0, i = 0;
   const l = function(r) {
     const m = r.scenePoint ?? r.pointer;
     if (!m)
       return;
     const { x: v, y: g } = st(m);
-    i = v, c = g;
+    c = v, i = g;
   }, h = function(r) {
     const m = r.scenePoint ?? r.pointer;
     if (!m)
       return;
-    const { x: v, y: g } = st(m), b = v - i, f = g - c;
-    let p = Math.abs(b), N = Math.abs(f), Z = b > 0 ? i : v, V = f > 0 ? c : g;
+    const { x: v, y: g } = st(m), b = v - c, f = g - i;
+    let p = Math.abs(b), N = Math.abs(f), Z = b > 0 ? c : v, V = f > 0 ? i : g;
     const D = Z < 0, k = V < 0;
     p = D ? p + Z : p, N = k ? N + V : N, Z = D ? 0 : Z, V = k ? 0 : V;
     const H = o.getZoom(), w = Number(o.width ?? 0) / H, C = Number(o.height ?? 0) / H, E = Z + p > w, _ = V + N > C;
@@ -196,24 +196,24 @@ const Q = () => Xe, Rt = (e) => {
 }, Qt = () => ({ id: "brush", init: ({ brush: t, colorCode: n }) => {
   const s = pe(), o = Tn();
   s.isDrawingMode = !0, s.freeDrawingBrush = new o(s), s.freeDrawingBrush.color = n, s.freeDrawingBrush.strokeLineCap = t.lineCap, s.freeDrawingBrush.width = t.lineWidth;
-  const { brushCursor: a, handleOnMouseMove: i, handleOnMouseUp: c } = kt(t, n), l = function() {
+  const { brushCursor: a, handleOnMouseMove: c, handleOnMouseUp: i } = kt(t, n), l = function() {
     s.add(a);
   }, h = function() {
     s.remove(a);
   };
-  return s.add(a), s.on("mouse:over", I(l)), s.on("mouse:out", I(h)), s.on("mouse:move", I(i)), s.on("mouse:up", I(c)), () => {
-    s.remove(a), s.off("mouse:over", I(l)), s.off("mouse:out", I(h)), s.off("mouse:move", I(i)), s.off("mouse:up", I(c)), s.isDrawingMode = !1;
+  return s.add(a), s.on("mouse:over", I(l)), s.on("mouse:out", I(h)), s.on("mouse:move", I(c)), s.on("mouse:up", I(i)), () => {
+    s.remove(a), s.off("mouse:over", I(l)), s.off("mouse:out", I(h)), s.off("mouse:move", I(c)), s.off("mouse:up", I(i)), s.isDrawingMode = !1;
   };
 } }), en = () => ({ id: "eraser", init: async ({ brush: t }) => {
   const n = pe(), { EraserBrush: s } = await import("./index-DDn_Fjhx.js");
   n.freeDrawingBrush = new s(n), n.isDrawingMode = !0, n.freeDrawingBrush.strokeLineCap = t.lineCap, n.freeDrawingBrush.width = t.lineWidth;
-  const { brushCursor: o, handleOnMouseMove: a, handleOnMouseUp: i } = kt(t), c = function() {
+  const { brushCursor: o, handleOnMouseMove: a, handleOnMouseUp: c } = kt(t), i = function() {
     n.add(o);
   }, l = function() {
     n.remove(o);
   };
-  return n.add(o), n.on("mouse:over", I(c)), n.on("mouse:out", I(l)), n.on("mouse:move", I(a)), n.on("mouse:up", I(i)), () => {
-    n.remove(o), n.off("mouse:over", I(c)), n.off("mouse:out", I(l)), n.off("mouse:move", I(a)), n.off("mouse:up", I(i)), n.isDrawingMode = !1;
+  return n.add(o), n.on("mouse:over", I(i)), n.on("mouse:out", I(l)), n.on("mouse:move", I(a)), n.on("mouse:up", I(c)), () => {
+    n.remove(o), n.off("mouse:over", I(i)), n.off("mouse:out", I(l)), n.off("mouse:move", I(a)), n.off("mouse:up", I(c)), n.isDrawingMode = !1;
   };
 } }), At = (e, t, n = 0) => {
   const s = 10 ** n;
@@ -231,39 +231,39 @@ const Q = () => Xe, Rt = (e) => {
   const n = t.length === 8;
   if (t.length !== 6 && !n)
     return null;
-  const s = parseInt(t.substring(0, 6), 16), o = s >> 16 & 255, a = s >> 8 & 255, i = s & 255, c = n ? parseInt(t.substring(6), 16) / 255 : 1;
-  return { r: o, g: a, b: i, a: c };
+  const s = parseInt(t.substring(0, 6), 16), o = s >> 16 & 255, a = s >> 8 & 255, c = s & 255, i = n ? parseInt(t.substring(6), 16) / 255 : 1;
+  return { r: o, g: a, b: c, a: i };
 }, ct = (e) => {
   const t = { hex: "000000", alpha: "100%" };
   if (!e)
     return t;
   const n = e.trim();
   if (n.startsWith("rgba(")) {
-    const [o, a, i, c] = Pt(n);
+    const [o, a, c, i] = Pt(n);
     return {
-      hex: `${Be(o)}${Be(a)}${Be(i)}`,
-      alpha: `${At(c, 100, 0)}%`
+      hex: `${Be(o)}${Be(a)}${Be(c)}`,
+      alpha: `${At(i, 100, 0)}%`
     };
   }
   if (n.startsWith("rgb(")) {
-    const o = n.substring(4, n.length - 1).split(",").map((l) => +l), [a = 0, i = 0, c = 0] = o;
+    const o = n.substring(4, n.length - 1).split(",").map((l) => +l), [a = 0, c = 0, i = 0] = o;
     return {
-      hex: `${Be(a)}${Be(i)}${Be(c)}`,
+      hex: `${Be(a)}${Be(c)}${Be(i)}`,
       alpha: "100%"
     };
   }
   const s = Yn(n);
   if (s) {
-    const { r: o, g: a, b: i, a: c } = s;
+    const { r: o, g: a, b: c, a: i } = s;
     return {
-      hex: `${Be(o)}${Be(a)}${Be(i)}`,
-      alpha: `${At(c, 100, 0)}%`
+      hex: `${Be(o)}${Be(a)}${Be(c)}`,
+      alpha: `${At(i, 100, 0)}%`
     };
   }
   return t;
 }, qa = (e) => {
-  const [t, n, s, o] = Pt(e), a = Math.round(t).toString(16).padStart(2, "0"), i = Math.round(n).toString(16).padStart(2, "0"), c = Math.round(s).toString(16).padStart(2, "0"), l = Math.round(o * 255).toString(16).padStart(2, "0");
-  return `#${a}${i}${c}${l}`;
+  const [t, n, s, o] = Pt(e), a = Math.round(t).toString(16).padStart(2, "0"), c = Math.round(n).toString(16).padStart(2, "0"), i = Math.round(s).toString(16).padStart(2, "0"), l = Math.round(o * 255).toString(16).padStart(2, "0");
+  return `#${a}${c}${i}${l}`;
 }, nn = (e) => new Promise((t) => {
   const n = new Image();
   n.src = e, n.setAttribute("crossOrigin", ""), n.onload = () => t(n);
@@ -286,7 +286,7 @@ const Q = () => Xe, Rt = (e) => {
   }, n = document.createElement("canvas"), s = n.getContext("2d");
   if (!s)
     return { canvas: n, minX: 0, minY: 0 };
-  const { minX: o, minY: a, maxX: i, maxY: c } = t(e), l = i - o + 1, h = c - a + 1, u = s.createImageData(l, h);
+  const { minX: o, minY: a, maxX: c, maxY: i } = t(e), l = c - o + 1, h = i - a + 1, u = s.createImageData(l, h);
   for (let r = 0; r < h; r += 1)
     for (let m = 0; m < l; m += 1) {
       const v = ((a + r) * e.width + o + m) * 4, g = (r * l + m) * 4;
@@ -309,7 +309,7 @@ const Ja = (e) => {
     );
     return;
   }
-  const a = pe(), i = Kt(), c = ke(), l = oe(), h = () => {
+  const a = pe(), c = Kt(), i = ke(), l = oe(), h = () => {
     a.contextContainer && a.renderAll();
   };
   a.defaultCursor = "crosshair", a.hoverCursor = "crosshair";
@@ -348,7 +348,7 @@ const Ja = (e) => {
     const be = se.map((F) => {
       const ne = F.points.map(({ x: ye, y: X }) => {
         const K = ye * de, Te = X * Me;
-        return te = Math.min(te, K), W = Math.min(W, Te), new c(K, Te);
+        return te = Math.min(te, K), W = Math.min(W, Te), new i(K, Te);
       });
       return { inner: F.inner, points: ne };
     });
@@ -356,11 +356,11 @@ const Ja = (e) => {
     const me = { x: te, y: W }, Ie = be.map((F) => ({
       inner: F.inner,
       points: F.points.map(
-        ({ x: ne, y: ye }) => new c(ne - me.x, ye - me.y)
+        ({ x: ne, y: ye }) => new i(ne - me.x, ye - me.y)
       )
     })).sort((F, ne) => Number(F.inner) - Number(ne.inner)), je = Ie.findIndex(
       ({ inner: F }) => !F
-    ), Re = je >= 0 ? je : 0, Pe = Ie[Re] ?? Ie[0], Qe = (Pe == null ? void 0 : Pe.points.map(({ x: F, y: ne }) => new c(F, ne))) ?? [], De = [];
+    ), Re = je >= 0 ? je : 0, Pe = Ie[Re] ?? Ie[0], Qe = (Pe == null ? void 0 : Pe.points.map(({ x: F, y: ne }) => new i(F, ne))) ?? [], De = [];
     return Ie.forEach(({ points: F }) => {
       if (!F.length) return;
       const [ne, ...ye] = F;
@@ -376,7 +376,7 @@ const Ja = (e) => {
       selectable: !1,
       evented: !0,
       fillRule: "evenodd",
-      pathOffset: new c(0, 0),
+      pathOffset: new i(0, 0),
       points: Qe,
       pathContours: Ie,
       pathBaseOffset: me,
@@ -427,7 +427,7 @@ const Ja = (e) => {
     if (!v) return;
     const x = B, P = R, T = y.toDataURL();
     y.remove();
-    const L = await i.fromURL(T, {}, {
+    const L = await c.fromURL(T, {}, {
       left: x,
       top: P,
       objectCaching: !1,
@@ -471,24 +471,24 @@ const Ja = (e) => {
   };
 } }), sn = () => ({ id: "pen", init: ({ colorCode: t }) => {
   const n = pe(), s = ke(), o = qt(), a = Pn();
-  let i = [], c = [], l = !1;
+  let c = [], i = [], l = !1;
   const h = function(g, b) {
-    if (!c.length)
+    if (!i.length)
       return !1;
-    const f = c[0];
+    const f = i[0];
     if (f.x1 === void 0 || f.y1 === void 0)
       return !1;
     const p = n.getScenePoint(g), N = f.x1 ?? 0, Z = f.y1 ?? 0, { x: V, y: D } = p;
     return Math.abs(N - V) <= b && Math.abs(Z - D) <= b;
   }, u = function(g) {
-    g.preventDefault(), n.remove(...c), c = [];
+    g.preventDefault(), n.remove(...i), i = [];
   }, r = function(g) {
     const b = g.e;
     if (b && h(b, 10)) {
       l = !0;
       return;
     }
-    const f = n.getScenePoint(b), p = c.length ? c[c.length - 1] : null;
+    const f = n.getScenePoint(b), p = i.length ? i[i.length - 1] : null;
     if (!p || p.x2) {
       const N = new a(
         [f.x, f.y, f.x, f.y],
@@ -500,14 +500,14 @@ const Ja = (e) => {
           evented: !1
         }
       );
-      N.replaced = !0, n.add(N), c.push(N);
+      N.replaced = !0, n.add(N), i.push(N);
     } else
       p.set({ x2: f.x, y2: f.y });
-    i.push(new s(f.x, f.y));
+    c.push(new s(f.x, f.y));
   }, m = function(g) {
     if (l)
       return;
-    const b = c.length ? c[c.length - 1] : null;
+    const b = i.length ? i[i.length - 1] : null;
     if (b) {
       const f = g.e;
       if (!f)
@@ -517,19 +517,19 @@ const Ja = (e) => {
     }
   }, v = function() {
     if (l) {
-      n.remove(...c);
-      const g = new o(i, {
+      n.remove(...i);
+      const g = new o(c, {
         fill: t,
         objectCaching: !1,
         selectable: !1,
         evented: !0,
         info: wn
       });
-      n.add(g), n.renderAll(), i = [], c = [], l = !1;
+      n.add(g), n.renderAll(), c = [], i = [], l = !1;
     }
   };
   return n.defaultCursor = "crosshair", document.addEventListener("contextmenu", u), n.on("mouse:down", I(r)), n.on("mouse:move", I(m)), n.on("mouse:up", I(v)), () => {
-    document.removeEventListener("contextmenu", u), n.defaultCursor = "default", n.off("mouse:down", I(r)), n.off("mouse:move", I(m)), n.off("mouse:up", I(v)), n.remove(...c), c = [];
+    document.removeEventListener("contextmenu", u), n.defaultCursor = "default", n.off("mouse:down", I(r)), n.off("mouse:move", I(m)), n.off("mouse:up", I(v)), n.remove(...i), i = [];
   };
 } }), zn = (e) => {
   if (!e)
@@ -549,17 +549,17 @@ const Ja = (e) => {
   s[o].points = n.points.map(
     ({ x: l, y: h }) => new a(l, h)
   );
-  const i = [];
+  const c = [];
   s.forEach(({ points: l }) => {
     if (!l.length)
       return;
     const [h, ...u] = l;
-    i.push(`M ${h.x} ${h.y}`), u.forEach(({ x: r, y: m }) => {
-      i.push(`L ${r} ${m}`);
-    }), i.push("Z");
+    c.push(`M ${h.x} ${h.y}`), u.forEach(({ x: r, y: m }) => {
+      c.push(`L ${r} ${m}`);
+    }), c.push("Z");
   });
-  const c = new t.Path(i.join(" "));
-  n.set({ path: c.path }), n.pathContours = s, n.dirty = !0, n.setCoords();
+  const i = new t.Path(c.join(" "));
+  n.set({ path: i.path }), n.pathContours = s, n.dirty = !0, n.setCoords();
 }, an = (e) => {
   const t = ke(), n = e.strokeWidth ?? 0, s = (e.strokeUniform ? 1 / (e.scaleX ?? 1) : 1) * n, o = (e.strokeUniform ? 1 / (e.scaleY ?? 1) : 1) * n;
   return new t(
@@ -572,8 +572,8 @@ const Ja = (e) => {
 }, $n = (e, t) => {
   let n = !1;
   for (let s = 0, o = t.length - 1; s < t.length; o = s++) {
-    const a = t[s].x, i = t[s].y, c = t[o].x, l = t[o].y;
-    i > e.y != l > e.y && e.x < (c - a) * (e.y - i) / (l - i + Number.EPSILON) + a && (n = !n);
+    const a = t[s].x, c = t[s].y, i = t[o].x, l = t[o].y;
+    c > e.y != l > e.y && e.x < (i - a) * (e.y - c) / (l - c + Number.EPSILON) + a && (n = !n);
   }
   return n;
 }, Gn = (e) => {
@@ -581,15 +581,15 @@ const Ja = (e) => {
     return 0;
   let t = 0;
   for (let n = 0; n < e.length; n += 1) {
-    const { x: s, y: o } = e[n], { x: a, y: i } = e[(n + 1) % e.length];
-    t += s * i - a * o;
+    const { x: s, y: o } = e[n], { x: a, y: c } = e[(n + 1) % e.length];
+    t += s * c - a * o;
   }
   return Math.abs(t / 2);
 }, qn = function(e, t, n) {
   var l;
-  const s = ke(), o = oe().util, a = n.points[this.pointIndex ?? 0], i = a.x - n.pathOffset.x, c = a.y - n.pathOffset.y;
+  const s = ke(), o = oe().util, a = n.points[this.pointIndex ?? 0], c = a.x - n.pathOffset.x, i = a.y - n.pathOffset.y;
   return o.transformPoint(
-    new s(i, c),
+    new s(c, i),
     o.multiplyTransformMatrices(
       ((l = n.canvas) == null ? void 0 : l.viewportTransform) ?? [1, 0, 0, 1, 0, 0],
       n.calcTransformMatrix()
@@ -602,49 +602,49 @@ const Ja = (e) => {
     return [];
   const s = e.calcTransformMatrix(), o = (a = e.canvas) != null && a.viewportTransform ? n.multiplyTransformMatrices(e.canvas.viewportTransform, s) : s;
   return e.points.map(
-    (i) => n.transformPoint(
-      new t(i.x - e.pathOffset.x, i.y - e.pathOffset.y),
+    (c) => n.transformPoint(
+      new t(c.x - e.pathOffset.x, c.y - e.pathOffset.y),
       o
     )
   );
 }, Kn = function(e, t, n, s) {
   var v;
-  const o = ke(), a = oe(), i = t.target;
-  if (!i || !i.points || !i.pathOffset)
+  const o = ke(), a = oe(), c = t.target;
+  if (!c || !c.points || !c.pathOffset)
     return !1;
-  const c = (v = i.controls) == null ? void 0 : v[i.__corner ?? ""];
-  if (!c)
+  const i = (v = c.controls) == null ? void 0 : v[c.__corner ?? ""];
+  if (!i)
     return !1;
-  const l = c.pointIndex ?? 0, h = i.toLocalPoint(
+  const l = i.pointIndex ?? 0, h = c.toLocalPoint(
     new o(n, s),
     "center",
     "center"
-  ), u = an(i), r = i._getTransformedDimensions(0, 0), m = {
-    x: h.x * u.x / r.x + i.pathOffset.x,
-    y: h.y * u.y / r.y + i.pathOffset.y
+  ), u = an(c), r = c._getTransformedDimensions(0, 0), m = {
+    x: h.x * u.x / r.x + c.pathOffset.x,
+    y: h.y * u.y / r.y + c.pathOffset.y
   };
-  return i.points[l] = m, i instanceof a.Path && Fn(i), !0;
+  return c.points[l] = m, c instanceof a.Path && Fn(c), !0;
 }, Jn = function(e, t) {
   return function(n, s, o, a) {
     var Z;
-    const i = ke(), c = s.target;
-    if (!c.points || !c.pathOffset)
+    const c = ke(), i = s.target;
+    if (!i.points || !i.pathOffset)
       return !1;
-    const l = c.controls, h = typeof c.__corner == "string" ? c.__corner : "", u = l == null ? void 0 : l[h], r = (u == null ? void 0 : u.pointIndex) ?? e, v = oe().util.transformPoint(
-      new i(
-        c.points[e].x - c.pathOffset.x,
-        c.points[e].y - c.pathOffset.y
+    const l = i.controls, h = typeof i.__corner == "string" ? i.__corner : "", u = l == null ? void 0 : l[h], r = (u == null ? void 0 : u.pointIndex) ?? e, v = oe().util.transformPoint(
+      new c(
+        i.points[e].x - i.pathOffset.x,
+        i.points[e].y - i.pathOffset.y
       ),
-      c.calcTransformMatrix()
-    ), g = t(n, s, o, a), b = an(c), f = (c.points[e].x - c.pathOffset.x) / b.x, p = (c.points[e].y - c.pathOffset.y) / b.y;
-    Xn(c), c.setPositionByOrigin(
+      i.calcTransformMatrix()
+    ), g = t(n, s, o, a), b = an(i), f = (i.points[e].x - i.pathOffset.x) / b.x, p = (i.points[e].y - i.pathOffset.y) / b.y;
+    Xn(i), i.setPositionByOrigin(
       v,
       f + 0.5,
       p + 0.5
     );
-    const N = c.editSnapshot;
+    const N = i.editSnapshot;
     if ((Z = N == null ? void 0 : N.absolutePoints) != null && Z.length) {
-      const D = cn(c).map((k, H) => {
+      const D = cn(i).map((k, H) => {
         if (H === r)
           return null;
         const w = N.absolutePoints[H];
@@ -657,10 +657,10 @@ const Ja = (e) => {
       );
       if (D.length) {
         const k = D.reduce((w, { dx: C }) => w + C, 0) / D.length, H = D.reduce((w, { dy: C }) => w + C, 0) / D.length;
-        (k !== 0 || H !== 0) && (c.set({
-          left: (c.left ?? 0) + k,
-          top: (c.top ?? 0) + H
-        }), c.setCoords());
+        (k !== 0 || H !== 0) && (i.set({
+          left: (i.left ?? 0) + k,
+          top: (i.top ?? 0) + H
+        }), i.setCoords());
       }
     }
     return g;
@@ -685,9 +685,9 @@ const Ja = (e) => {
       ),
       area: Gn(r)
     })
-  ), c = ((h = a.filter(({ inside: r }) => r).sort((r, m) => r.area - m.area)[0]) == null ? void 0 : h.index) ?? ((u = a.sort((r, m) => r.distance - m.distance)[0]) == null ? void 0 : u.index) ?? 0;
-  e.pathEditableContourIndex = c;
-  const l = e.pathContours[c];
+  ), i = ((h = a.filter(({ inside: r }) => r).sort((r, m) => r.area - m.area)[0]) == null ? void 0 : h.index) ?? ((u = a.sort((r, m) => r.distance - m.distance)[0]) == null ? void 0 : u.index) ?? 0;
+  e.pathEditableContourIndex = i;
+  const l = e.pathContours[i];
   l && (e.points = l.points.map(
     ({ x: r, y: m }) => new s(r, m)
   ));
@@ -695,20 +695,20 @@ const Ja = (e) => {
   var s;
   const t = En(), n = (((s = e.points) == null ? void 0 : s.length) ?? 1) - 1;
   e.controls = (e.points ?? []).reduce(
-    function(o, a, i) {
-      const c = () => (e.editSnapshot = {
-        dragIndex: i,
+    function(o, a, c) {
+      const i = () => (e.editSnapshot = {
+        dragIndex: c,
         absolutePoints: cn(e)
       }, !1), l = () => (delete e.editSnapshot, !1);
-      return o["p" + i] = new t({
+      return o["p" + c] = new t({
         positionHandler: qn,
         actionHandler: Jn(
-          i > 0 ? i - 1 : n,
+          c > 0 ? c - 1 : n,
           Kn
         ),
         actionName: "editPolygon",
-        pointIndex: i,
-        mouseDownHandler: c,
+        pointIndex: c,
+        mouseDownHandler: i,
         mouseUpHandler: l
       }), o;
     },
@@ -738,12 +738,12 @@ const Ja = (e) => {
   a.forEach((w) => {
     w.selectable = !0, w.evented = !0;
   });
-  let i = null;
-  const c = (w = !1) => {
-    i && (xt(o), i = null, w && o.discardActiveObject(), Ne(o));
+  let c = null;
+  const i = (w = !1) => {
+    c && (xt(o), c = null, w && o.discardActiveObject(), Ne(o));
   }, l = function(w) {
     const C = w.scenePoint ?? w.absolutePointer, E = w.target;
-    i && E !== i && c(!E), C && (t = !0, s.x = C.x, s.y = C.y);
+    c && E !== c && i(!E), C && (t = !0, s.x = C.x, s.y = C.y);
   }, h = function(w) {
     t && a.forEach((C) => {
       C.info === Fe && (C.selectable = !1);
@@ -757,7 +757,7 @@ const Ja = (e) => {
   }, m = function() {
   }, v = function(w) {
     if (w.key === "Escape" || w.code === "Escape") {
-      c(!0);
+      i(!0);
       return;
     }
     n = w.shiftKey;
@@ -769,16 +769,16 @@ const Ja = (e) => {
       w.target ?? null,
       C
     );
-    E && (i = E, o.setActiveObject(E));
+    E && (c = E, o.setActiveObject(E));
   }, f = He(l), p = He(h), N = He(u), Z = He(r), V = He(m), D = He(b), k = () => {
-    c();
+    i();
   };
   o.on("mouse:down", I(f)), o.on("mouse:move", I(p)), o.on("mouse:up", I(N)), o.on("mouse:over", I(Z)), o.on("mouse:out", I(V)), o.on("mouse:dblclick", I(D)), o.on("selection:cleared", k), document.addEventListener("keydown", v), document.addEventListener("keyup", g);
   const H = we(o).find(
     ({ info: w }) => w === it
   );
   return H && (o.remove(H), Ne(o)), () => {
-    c(), o.defaultCursor = "default", o.hoverCursor = "default", o.moveCursor = "default", o.selection = !1, o.discardActiveObject(), Ne(o), o.off("mouse:down", I(f)), o.off("mouse:move", I(p)), o.off("mouse:up", I(N)), o.off("mouse:over", I(Z)), o.off("mouse:out", I(V)), o.off("mouse:dblclick", I(D)), o.off("selection:cleared", k), document.removeEventListener("keydown", v), document.removeEventListener("keyup", g), a.forEach((w) => {
+    i(), o.defaultCursor = "default", o.hoverCursor = "default", o.moveCursor = "default", o.selection = !1, o.discardActiveObject(), Ne(o), o.off("mouse:down", I(f)), o.off("mouse:move", I(p)), o.off("mouse:up", I(N)), o.off("mouse:over", I(Z)), o.off("mouse:out", I(V)), o.off("mouse:dblclick", I(D)), o.off("selection:cleared", k), document.removeEventListener("keydown", v), document.removeEventListener("keyup", g), a.forEach((w) => {
       w.selectable = !1, w.evented = !1;
     });
   };
@@ -798,7 +798,7 @@ const ja = (e) => {
     );
     return;
   }
-  const a = pe(), i = Kt(), c = ke(), l = oe();
+  const a = pe(), c = Kt(), i = ke(), l = oe();
   a.defaultCursor = "crosshair", a.hoverCursor = "crosshair";
   const h = !o || o.id !== "superpixel", u = await nn(t), { width: r, height: m } = u, v = we(a).filter(({ info: x }) => x === _e).pop(), g = (v == null ? void 0 : v.index) ?? 0, b = h ? g + 1 : g, f = document.createElement("canvas").getContext("2d");
   if (!f) return;
@@ -817,7 +817,7 @@ const ja = (e) => {
   f.canvas.remove();
   let w = setTimeout(async () => {
     w && clearTimeout(w), w = null;
-    const x = await i.fromURL(H, {}, {
+    const x = await c.fromURL(H, {}, {
       left: 0,
       top: 0,
       objectCaching: !1,
@@ -861,9 +861,9 @@ const ja = (e) => {
     const Re = { x: me, y: Ie }, Pe = je.map((X) => ({
       inner: X.inner,
       points: X.points.map(
-        ({ x: K, y: Te }) => new c(K - Re.x, Te - Re.y)
+        ({ x: K, y: Te }) => new i(K - Re.x, Te - Re.y)
       )
-    })).sort((X, K) => Number(X.inner) - Number(K.inner)), Qe = Pe.findIndex(({ inner: X }) => !X), De = Qe >= 0 ? Qe : 0, F = Pe[De] ?? Pe[0], ne = (F == null ? void 0 : F.points.map(({ x: X, y: K }) => new c(X, K))) ?? [], ye = [];
+    })).sort((X, K) => Number(X.inner) - Number(K.inner)), Qe = Pe.findIndex(({ inner: X }) => !X), De = Qe >= 0 ? Qe : 0, F = Pe[De] ?? Pe[0], ne = (F == null ? void 0 : F.points.map(({ x: X, y: K }) => new i(X, K))) ?? [], ye = [];
     return Pe.forEach(({ points: X }) => {
       if (!X.length) return;
       const [K, ...Te] = X;
@@ -877,7 +877,7 @@ const ja = (e) => {
       selectable: !1,
       evented: !0,
       fillRule: "evenodd",
-      pathOffset: new c(0, 0),
+      pathOffset: new i(0, 0),
       points: ne,
       pathContours: Pe,
       pathBaseOffset: Re,
@@ -978,7 +978,7 @@ const ja = (e) => {
   const t = e.info ?? "";
   return oo.has(t) ? "box" : "segmentation";
 }, ao = (e, t, n) => {
-  const s = nt(e.left), o = nt(e.top), a = nt(e.width), i = nt(e.height), c = rt(e.scaleX), l = rt(e.scaleY), h = a * c, u = i * l;
+  const s = nt(e.left), o = nt(e.top), a = nt(e.width), c = nt(e.height), i = rt(e.scaleX), l = rt(e.scaleY), h = a * i, u = c * l;
   return {
     type: "box",
     x: t > 0 ? s / t : s,
@@ -996,17 +996,17 @@ const ja = (e) => {
     Math.round((t == null ? void 0 : t.height) ?? (e.height ?? 0) * rt(e.scaleY))
   ), o = Rn(), a = document.createElement("canvas");
   a.width = n, a.height = s;
-  const i = new o(a, {
+  const c = new o(a, {
     width: n,
     height: s,
     renderOnAddRemove: !1
-  }), c = await io(e), l = (t == null ? void 0 : t.left) ?? 0, h = (t == null ? void 0 : t.top) ?? 0;
-  c.set({
-    left: (c.left ?? 0) - l,
-    top: (c.top ?? 0) - h
-  }), i.add(c), i.renderAll();
-  const u = i.toDataURL({ format: "png", multiplier: 1 });
-  return i.dispose(), a.remove(), u;
+  }), i = await io(e), l = (t == null ? void 0 : t.left) ?? 0, h = (t == null ? void 0 : t.top) ?? 0;
+  i.set({
+    left: (i.left ?? 0) - l,
+    top: (i.top ?? 0) - h
+  }), c.add(i), c.renderAll();
+  const u = c.toDataURL({ format: "png", multiplier: 1 });
+  return c.dispose(), a.remove(), u;
 }, ro = async (e) => {
   const t = await co(e);
   if (!t) return null;
@@ -1027,11 +1027,11 @@ const ja = (e) => {
   const o = so(e);
   let a = null;
   o === "box" ? a = ao(e, t, n) : a = await ro(e);
-  const i = lo(e), c = {
+  const c = lo(e), i = {
     name: e.class ?? "",
     index: $e(e.seq) ? e.seq : 0
   };
-  return { id: s, type: o, label: c, style: i, geometry: a };
+  return { id: s, type: o, label: i, style: c, geometry: a };
 }, un = async (e, t, n) => {
   const s = [];
   for (const o of e) {
@@ -1040,19 +1040,19 @@ const ja = (e) => {
   }
   return s;
 }, hn = (e, t, n) => {
-  const { id: s, type: o, label: a, style: i, geometry: c } = e, l = {
+  const { id: s, type: o, label: a, style: c, geometry: i } = e, l = {
     unique: s,
     class: a.name,
     seq: a.index,
-    hex: i.color.replace("#", ""),
-    alpha: `${Math.round(i.opacity * 100)}%`,
-    opacity: i.opacity,
+    hex: c.color.replace("#", ""),
+    alpha: `${Math.round(c.opacity * 100)}%`,
+    opacity: c.opacity,
     objectCaching: !1,
     selectable: !1,
     evented: !0
   };
-  if (i.lineColor && (l.stroke = i.lineColor), o === "box" && (c == null ? void 0 : c.type) === "box") {
-    const h = c;
+  if (c.lineColor && (l.stroke = c.lineColor), o === "box" && (i == null ? void 0 : i.type) === "box") {
+    const h = i;
     return {
       ...l,
       type: "rect",
@@ -1060,13 +1060,13 @@ const ja = (e) => {
       top: h.y * n,
       width: h.width * t,
       height: h.height * n,
-      fill: i.lineColor ? "" : tn(i.color.replace("#", ""), i.opacity),
-      stroke: i.lineColor ?? void 0,
-      info: i.lineColor ? Fe : It
+      fill: c.lineColor ? "" : tn(c.color.replace("#", ""), c.opacity),
+      stroke: c.lineColor ?? void 0,
+      info: c.lineColor ? Fe : It
     };
   }
-  if (o === "segmentation" && (c == null ? void 0 : c.type) === "segmentation") {
-    const h = c;
+  if (o === "segmentation" && (i == null ? void 0 : i.type) === "segmentation") {
+    const h = i;
     if (h.vector)
       try {
         return {
@@ -1091,8 +1091,8 @@ const ja = (e) => {
       const m = t;
       t = u ?? (typeof r != "object" || r === null) ? r : Object.assign({}, t, r), n.forEach((v) => v(t, m));
     }
-  }, o = () => t, c = { setState: s, getState: o, getInitialState: () => l, subscribe: (h) => (n.add(h), () => n.delete(h)) }, l = t = e(s, o, c);
-  return c;
+  }, o = () => t, i = { setState: s, getState: o, getInitialState: () => l, subscribe: (h) => (n.add(h), () => n.delete(h)) }, l = t = e(s, o, i);
+  return i;
 }, fn = (e) => e ? Ht(e) : Ht, ho = (e) => e;
 function fo(e, t = ho) {
   const n = tt.useSyncExternalStore(
@@ -1165,10 +1165,10 @@ const _t = (e) => {
 var Zt = (e, t, n) => (o, a) => ({
   pastStates: (n == null ? void 0 : n.pastStates) || [],
   futureStates: (n == null ? void 0 : n.futureStates) || [],
-  undo: (i = 1) => {
-    var c, l;
+  undo: (c = 1) => {
+    var i, l;
     if (a().pastStates.length) {
-      const h = ((c = n == null ? void 0 : n.partialize) == null ? void 0 : c.call(n, t())) || t(), u = a().pastStates.splice(-i, i), r = u.shift();
+      const h = ((i = n == null ? void 0 : n.partialize) == null ? void 0 : i.call(n, t())) || t(), u = a().pastStates.splice(-c, c), r = u.shift();
       e(r), o({
         pastStates: a().pastStates,
         futureStates: a().futureStates.concat(
@@ -1178,10 +1178,10 @@ var Zt = (e, t, n) => (o, a) => ({
       });
     }
   },
-  redo: (i = 1) => {
-    var c, l;
+  redo: (c = 1) => {
+    var i, l;
     if (a().futureStates.length) {
-      const h = ((c = n == null ? void 0 : n.partialize) == null ? void 0 : c.call(n, t())) || t(), u = a().futureStates.splice(-i, i), r = u.shift();
+      const h = ((i = n == null ? void 0 : n.partialize) == null ? void 0 : i.call(n, t())) || t(), u = a().futureStates.splice(-c, c), r = u.shift();
       e(r), o({
         pastStates: a().pastStates.concat(
           ((l = n == null ? void 0 : n.diff) == null ? void 0 : l.call(n, h, r)) || h,
@@ -1195,13 +1195,13 @@ var Zt = (e, t, n) => (o, a) => ({
   isTracking: !0,
   pause: () => o({ isTracking: !1 }),
   resume: () => o({ isTracking: !0 }),
-  setOnSave: (i) => o({ _onSave: i }),
+  setOnSave: (c) => o({ _onSave: c }),
   // Internal properties
   _onSave: n == null ? void 0 : n.onSave,
-  _handleSet: (i, c, l, h) => {
+  _handleSet: (c, i, l, h) => {
     var u, r;
-    n != null && n.limit && a().pastStates.length >= (n == null ? void 0 : n.limit) && a().pastStates.shift(), (r = (u = a())._onSave) == null || r.call(u, i, l), o({
-      pastStates: a().pastStates.concat(h || i),
+    n != null && n.limit && a().pastStates.length >= (n == null ? void 0 : n.limit) && a().pastStates.shift(), (r = (u = a())._onSave) == null || r.call(u, c, l), o({
+      pastStates: a().pastStates.concat(h || c),
       futureStates: []
     });
   }
@@ -1210,16 +1210,16 @@ var Zt = (e, t, n) => (o, a) => ({
   a.temporal = fn(
     ((h = t == null ? void 0 : t.wrapTemporal) == null ? void 0 : h.call(t, Zt(s, o, t))) || Zt(s, o, t)
   );
-  const i = ((u = t == null ? void 0 : t.handleSet) == null ? void 0 : u.call(
+  const c = ((u = t == null ? void 0 : t.handleSet) == null ? void 0 : u.call(
     t,
     a.temporal.getState()._handleSet
-  )) || a.temporal.getState()._handleSet, c = (r) => {
+  )) || a.temporal.getState()._handleSet, i = (r) => {
     var g, b, f;
     if (!a.temporal.getState().isTracking) return;
     const m = ((g = t == null ? void 0 : t.partialize) == null ? void 0 : g.call(t, o())) || o(), v = (b = t == null ? void 0 : t.diff) == null ? void 0 : b.call(t, r, m);
     // If the user has provided a diff function but nothing has been changed, deltaState will be null
     v === null || // If the user has provided an equality function, use it
-    (f = t == null ? void 0 : t.equality) != null && f.call(t, r, m) || i(
+    (f = t == null ? void 0 : t.equality) != null && f.call(t, r, m) || c(
       r,
       void 0,
       m,
@@ -1229,13 +1229,13 @@ var Zt = (e, t, n) => (o, a) => ({
   return a.setState = (...r) => {
     var v;
     const m = ((v = t == null ? void 0 : t.partialize) == null ? void 0 : v.call(t, o())) || o();
-    l(...r), c(m);
+    l(...r), i(m);
   }, e(
     // Modify the set function to call the userlandSet function
     (...r) => {
       var v;
       const m = ((v = t == null ? void 0 : t.partialize) == null ? void 0 : v.call(t, o())) || o();
-      s(...r), c(m);
+      s(...r), i(m);
     },
     o,
     a
@@ -1266,7 +1266,7 @@ const ei = () => j()(
   setMode: (n) => e({ mode: n }),
   cycleMode: () => {
     const n = t().mode, s = mt.findIndex(
-      (a) => a.length === n.length && a.every((i, c) => i === n[c])
+      (a) => a.length === n.length && a.every((c, i) => c === n[i])
     ), o = s >= 0 ? mt[(s + 1) % mt.length] : le.NORMAL;
     e({ mode: o });
   }
@@ -1460,8 +1460,8 @@ function bo({
   viewMode: s,
   onViewModeChange: o,
   availableViewModes: a = ["Image"],
-  textContent: i,
-  numberContent: c,
+  textContent: c,
+  numberContent: i,
   fileContent: l,
   records: h,
   activeRecordId: u,
@@ -1506,8 +1506,8 @@ function bo({
       viewMode: se,
       onViewModeChange: de,
       availableViewModes: a,
-      textContent: i,
-      numberContent: c,
+      textContent: c,
+      numberContent: i,
       fileContent: l,
       records: h,
       activeRecordId: u,
@@ -1547,8 +1547,8 @@ function bo({
       se,
       de,
       a,
-      i,
       c,
+      i,
       l,
       h,
       u,
@@ -1582,7 +1582,7 @@ function bo({
     const W = {};
     return O.primary && (W["--lc-primary"] = O.primary), O.background && (W["--lc-background"] = O.background), O.surface && (W["--lc-surface"] = O.surface), O.border && (W["--lc-border"] = O.border), O.text && (W["--lc-text"] = O.text), O.textSecondary && (W["--lc-text-secondary"] = O.textSecondary), O.hover && (W["--lc-hover"] = O.hover), O.fontFamily && (W["--lc-font-family"] = O.fontFamily), Object.keys(W).length > 0 ? W : void 0;
   }, [O]);
-  return /* @__PURE__ */ d(Cn.Provider, { value: Oe, children: /* @__PURE__ */ d("div", { style: ue, children: B }) });
+  return /* @__PURE__ */ d(Cn.Provider, { value: Oe, children: /* @__PURE__ */ d("div", { style: { width: "100%", height: "100%", ...ue }, children: B }) });
 }
 const yo = [
   // ─── Labeling Tools ───
@@ -1798,7 +1798,7 @@ function fe({
       clipRule: "evenodd",
       className: n,
       style: s,
-      children: o.d.map((i, c) => /* @__PURE__ */ d("path", { d: i }, c))
+      children: o.d.map((c, i) => /* @__PURE__ */ d("path", { d: c }, i))
     }
   );
 }
@@ -1841,8 +1841,8 @@ function Yo({
   mode: s = "labeling",
   onModeChange: o,
   onSave: a,
-  onSaveToRecord: i,
-  isSaving: c = !1,
+  onSaveToRecord: c,
+  isSaving: i = !1,
   onNavigateLeft: l,
   onNavigateRight: h,
   canNavigateLeft: u = !1,
@@ -1888,8 +1888,8 @@ function Yo({
         Go,
         {
           onSave: a,
-          onSaveToRecord: i,
-          isSaving: c
+          onSaveToRecord: c,
+          isSaving: i
         }
       ),
       o && /* @__PURE__ */ d(
@@ -1922,9 +1922,9 @@ function zo({
   )) });
 }
 function Fo({ viewMode: e }) {
-  const t = Ee((l) => l.tool), n = mn((l) => l.objects), s = gn((l) => l.selectedSegment), o = vn((l) => l.selectedSegment), a = We((l) => l.colorCode), i = lt((l) => l.opacity), c = t ? Wo[t.id] ?? t.id : "—";
+  const t = Ee((l) => l.tool), n = mn((l) => l.objects), s = gn((l) => l.selectedSegment), o = vn((l) => l.selectedSegment), a = We((l) => l.colorCode), c = lt((l) => l.opacity), i = t ? Wo[t.id] ?? t.id : "—";
   return e === "Record" || e === "File" ? null : /* @__PURE__ */ S("div", { className: U.metaInfo, children: [
-    /* @__PURE__ */ d("div", { className: U.metaItem, children: /* @__PURE__ */ d("em", { children: c }) }),
+    /* @__PURE__ */ d("div", { className: U.metaItem, children: /* @__PURE__ */ d("em", { children: i }) }),
     /* @__PURE__ */ d("div", { className: U.metaDivider }),
     e === "Image" && /* @__PURE__ */ d(Xo, { objects: n }),
     e === "Text" && s && /* @__PURE__ */ S("div", { className: U.metaItem, children: [
@@ -1953,7 +1953,7 @@ function Fo({ viewMode: e }) {
       ),
       /* @__PURE__ */ d("em", { children: a }),
       /* @__PURE__ */ S("span", { children: [
-        Math.round(i * 100),
+        Math.round(c * 100),
         "%"
       ] })
     ] })
@@ -1989,19 +1989,19 @@ function $o() {
     n(`${s}%`);
   }, [s]);
   const o = $(
-    (i) => {
-      const c = Math.max(0.1, Math.min(5, i));
+    (c) => {
+      const i = Math.max(0.1, Math.min(5, c));
       e.setZoom({
-        level: c,
+        level: i,
         width: e.width,
         height: e.height
       });
     },
     [e]
-  ), a = (i) => {
-    if (i.key === "Enter") {
-      const c = parseInt(t, 10);
-      isNaN(c) || o(c / 100), i.target.blur();
+  ), a = (c) => {
+    if (c.key === "Enter") {
+      const i = parseInt(t, 10);
+      isNaN(i) || o(i / 100), c.target.blur();
     }
   };
   return /* @__PURE__ */ S("div", { className: U.zoomControls, children: [
@@ -2019,7 +2019,7 @@ function $o() {
       {
         className: U.zoomInput,
         value: t,
-        onChange: (i) => n(i.target.value),
+        onChange: (c) => n(c.target.value),
         onKeyDown: a,
         onBlur: () => n(`${s}%`)
       }
@@ -2043,10 +2043,10 @@ function Go({
   const [s, o] = re(!1), a = Ce(null);
   return ce(() => {
     if (!s) return;
-    const i = (c) => {
-      a.current && !a.current.contains(c.target) && o(!1);
+    const c = (i) => {
+      a.current && !a.current.contains(i.target) && o(!1);
     };
-    return window.addEventListener("mousedown", i), () => window.removeEventListener("mousedown", i);
+    return window.addEventListener("mousedown", c), () => window.removeEventListener("mousedown", c);
   }, [s]), t ? /* @__PURE__ */ S("div", { className: U.saveDropdownWrapper, ref: a, children: [
     /* @__PURE__ */ S("div", { className: U.controlBtnGroup, children: [
       /* @__PURE__ */ S(
@@ -2065,7 +2065,7 @@ function Go({
         "button",
         {
           className: U.controlBtnPrimary,
-          onClick: () => o((i) => !i),
+          onClick: () => o((c) => !c),
           disabled: n,
           children: /* @__PURE__ */ d(fe, { iconType: "icon-down", size: "xxs" })
         }
@@ -2119,46 +2119,46 @@ function qo() {
     }
   );
 }
-function Ko(e, t) {
-  const n = Ce(null), s = Ce(null), o = Ce(t);
-  return o.current = t, ce(() => {
+function Ko(e, t, n = !1) {
+  const s = Ce(null), o = Ce(null), a = Ce(t);
+  return a.current = t, ce(() => {
     if (!Q()) return;
-    if (n.current && (n.current(), n.current = null), !e) {
-      s.current = null;
+    if (s.current && (s.current(), s.current = null), !e) {
+      o.current = null;
       return;
     }
-    const i = o.current;
-    let c = !1;
-    const l = async () => {
-      let h;
+    const i = a.current;
+    let l = !1;
+    const h = async () => {
+      let u;
       switch (e.id) {
         case "selection":
-          h = await e.init();
+          u = await e.init();
           break;
         case "brush":
-          h = await e.init({
+          u = await e.init({
             brush: i.brush,
             colorCode: i.colorCode
           });
           break;
         case "bounded-box":
         case "filled-box":
-          h = await e.init({
+          u = await e.init({
             colorCode: i.colorCode
           });
           break;
         case "pen":
-          h = await e.init({
+          u = await e.init({
             colorCode: i.colorCode
           });
           break;
         case "eraser":
-          h = await e.init({
+          u = await e.init({
             brush: i.brush
           });
           break;
         case "magic-brush":
-          h = await e.init({
+          u = await e.init({
             src: i.imageUrl ?? "",
             colorCode: i.colorCode,
             brush: i.brush,
@@ -2169,7 +2169,7 @@ function Ko(e, t) {
           });
           break;
         case "superpixel":
-          h = await e.init({
+          u = await e.init({
             src: i.imageUrl ?? "",
             colorCode: i.colorCode,
             superpixelConfig: i.superpixelConfig ?? {},
@@ -2177,20 +2177,20 @@ function Ko(e, t) {
           });
           break;
         case "seg-anything":
-          h = await e.init({
+          u = await e.init({
             callback: i.segAnythingCallback
           });
           break;
         default:
-          h = await e.init(i);
+          u = await e.init(i);
           break;
       }
-      !c && typeof h == "function" && (n.current = h);
+      !l && typeof u == "function" && (s.current = u);
     };
-    return s.current = e.id, l(), () => {
-      c = !0, n.current && (n.current(), n.current = null);
+    return o.current = e.id, h(), () => {
+      l = !0, s.current && (s.current(), s.current = null);
     };
-  }, [e]), { activeToolId: s.current };
+  }, [e, n]), { activeToolId: o.current };
 }
 const J = {
   common: {
@@ -2240,7 +2240,7 @@ function Qo({
   onRedo: o,
   disabled: a = !1
 }) {
-  const i = Se((h) => h.cycleMode), c = Co((h) => h.toggleActive), l = Ge();
+  const c = Se((h) => h.cycleMode), i = Co((h) => h.toggleActive), l = Ge();
   ce(() => {
     if (a) return;
     const h = (u) => {
@@ -2287,11 +2287,11 @@ function Qo({
         return;
       }
       if (r === m.layerToggle) {
-        i();
+        c();
         return;
       }
       if (r === m.navigationToggle) {
-        c();
+        i();
         return;
       }
       if (!t && e === "Image") {
@@ -2328,8 +2328,8 @@ function Qo({
     s,
     o,
     a,
-    i,
     c,
+    i,
     l
   ]);
 }
@@ -2345,7 +2345,7 @@ const es = {
   segAnything: no
 };
 function ts() {
-  const e = Ee((r) => r.tool), t = Ee((r) => r.setTool), n = We((r) => r.colorCode), s = We((r) => r.setColorCode), o = lt((r) => r.opacity), a = lt((r) => r.setOpacity), i = wt((r) => r.brush), c = wt((r) => r.setBrush), l = $(
+  const e = Ee((r) => r.tool), t = Ee((r) => r.setTool), n = We((r) => r.colorCode), s = We((r) => r.setColorCode), o = lt((r) => r.opacity), a = lt((r) => r.setOpacity), c = wt((r) => r.brush), i = wt((r) => r.setBrush), l = $(
     (r) => {
       const m = es[r];
       m && t(m());
@@ -2364,10 +2364,10 @@ function ts() {
       setColorCode: s,
       opacity: o,
       setOpacity: a,
-      brush: i,
-      setBrush: c
+      brush: c,
+      setBrush: i
     }),
-    [u, e, l, h, n, s, o, a, i, c]
+    [u, e, l, h, n, s, o, a, c, i]
   );
 }
 const ns = "lc-workspace-8csim", os = "lc-mainSection-uZv5Q", ss = "lc-canvasArea-zoUW1", as = "lc-canvasSection-aUKNP", is = "lc-imagePanel-ghGQ6", cs = "lc-sidePanel-3s3Nv", Ze = {
@@ -2386,7 +2386,7 @@ function Ft({
   width: o,
   height: a
 }) {
-  const i = Ce(null), c = Ce(null), [l, h] = re(!1), [u, r] = re({ width: 0, height: 0 }), m = Ce(t);
+  const c = Ce(null), i = Ce(null), [l, h] = re(!1), [u, r] = re({ width: 0, height: 0 }), m = Ce(t);
   m.current = t;
   const v = Ce(n);
   v.current = n;
@@ -2395,7 +2395,7 @@ function Ft({
     colorCode: N,
     brush: Z,
     imageUrl: w
-  }), Qo({
+  }, l), Qo({
     viewMode: V,
     isValidationMode: D,
     setTool: H,
@@ -2448,7 +2448,7 @@ function Ft({
       });
     };
     document.addEventListener("keydown", O), document.addEventListener("keyup", y), document.addEventListener("mousedown", B), document.addEventListener("mousemove", R), document.addEventListener("mouseup", x);
-    const T = c.current;
+    const T = i.current;
     return T == null || T.addEventListener("wheel", P, { passive: !1 }), () => {
       document.removeEventListener("keydown", O), document.removeEventListener("keyup", y), document.removeEventListener("mousedown", B), document.removeEventListener("mousemove", R), document.removeEventListener("mouseup", x), T == null || T.removeEventListener("wheel", P);
     };
@@ -2456,8 +2456,8 @@ function Ft({
     if (typeof document > "u") return;
     let C = !1;
     return (async () => {
-      if (await On(), C || !i.current) return;
-      const _ = await import("fabric"), A = new _.Canvas(i.current, {
+      if (await On(), C || !c.current) return;
+      const _ = await import("fabric"), A = new _.Canvas(c.current, {
         selection: !s,
         preserveObjectStacking: !0
       });
@@ -2466,7 +2466,7 @@ function Ft({
       if (C) return;
       const y = typeof e == "object" ? e.width : O.width ?? 0, B = typeof e == "object" ? e.height : O.height ?? 0;
       r({ width: y, height: B });
-      const R = c.current, x = o ?? (R == null ? void 0 : R.clientWidth) ?? y, P = a ?? (R == null ? void 0 : R.clientHeight) ?? B, T = Math.min(x / (y || 1), P / (B || 1), 1), L = Math.round(y * T), M = Math.round(B * T);
+      const R = i.current, x = o ?? (R == null ? void 0 : R.clientWidth) ?? y, P = a ?? (R == null ? void 0 : R.clientHeight) ?? B, T = Math.min(x / (y || 1), P / (B || 1), 1), L = Math.round(y * T), M = Math.round(B * T);
       A.setDimensions({ width: L, height: M }), A.setZoom(T), O.set({ selectable: !1, evented: !1 }), A.backgroundImage = O, A.renderAll(), b({ level: T, width: L, height: M });
     })(), () => {
       C = !0;
@@ -2533,7 +2533,7 @@ function Ft({
     if (l)
       return Zn(() => {
       });
-  }, [l]), /* @__PURE__ */ d("div", { ref: c, className: Ze.canvasSection, children: /* @__PURE__ */ d("div", { className: Ze.imagePanel, children: /* @__PURE__ */ d("canvas", { ref: i }) }) });
+  }, [l]), /* @__PURE__ */ d("div", { ref: i, className: Ze.canvasSection, children: /* @__PURE__ */ d("div", { className: Ze.imagePanel, children: /* @__PURE__ */ d("canvas", { ref: c }) }) });
 }
 const rs = "lc-textSection-pEESB", ls = "lc-textContent-JGJR8", ds = "lc-segment-RaLhM", us = "lc-emptyState-G-skG", Ye = {
   textSection: rs,
@@ -2546,7 +2546,7 @@ function hs({
   readOnly: t = !1,
   segments: n = []
 }) {
-  const s = Ce(null), o = gn((h) => h.setSelectedSegment), a = We((h) => h.colorCode), i = lt((h) => h.opacity), c = $(() => {
+  const s = Ce(null), o = gn((h) => h.setSelectedSegment), a = We((h) => h.colorCode), c = lt((h) => h.opacity), i = $(() => {
     if (t) return;
     const h = window.getSelection();
     if (!h || h.isCollapsed || !s.current) return;
@@ -2563,9 +2563,9 @@ function hs({
       end: b,
       text: g,
       color: a,
-      opacity: i
+      opacity: c
     }), h.removeAllRanges();
-  }, [t, o, a, i]);
+  }, [t, o, a, c]);
   if (!e)
     return /* @__PURE__ */ d("div", { className: Ye.textSection, children: /* @__PURE__ */ d("div", { className: Ye.emptyState, children: "No text content" }) });
   const l = fs(e.value, n);
@@ -2574,14 +2574,14 @@ function hs({
     {
       ref: s,
       className: Ye.textContent,
-      onMouseUp: c,
+      onMouseUp: i,
       children: l
     }
   ) });
 }
 function fs(e, t) {
   if (!t.length) return e;
-  const n = [...t].sort((a, i) => a.start - i.start), s = [];
+  const n = [...t].sort((a, c) => a.start - c.start), s = [];
   let o = 0;
   for (const a of n)
     a.start > o && s.push(e.slice(o, a.start)), s.push(
@@ -2627,7 +2627,7 @@ function bs({
   );
   if (!e)
     return /* @__PURE__ */ d("div", { className: Ae.numberSection, children: /* @__PURE__ */ d("div", { className: Ae.emptyState, children: "No number content" }) });
-  const { source: i } = e, c = i.columns, l = i.rows;
+  const { source: c } = e, i = c.columns, l = c.rows;
   return /* @__PURE__ */ S("div", { className: Ae.numberSection, children: [
     /* @__PURE__ */ d("div", { className: Ae.chartArea, children: e.canRender ? /* @__PURE__ */ S("div", { className: Ae.chartPlaceholder, children: [
       "Chart (",
@@ -2637,7 +2637,7 @@ function bs({
     l.length > 0 && /* @__PURE__ */ d("div", { className: Ae.dataTable, children: /* @__PURE__ */ S("table", { children: [
       /* @__PURE__ */ d("thead", { children: /* @__PURE__ */ S("tr", { children: [
         /* @__PURE__ */ d("th", { children: "#" }),
-        c.map((h) => /* @__PURE__ */ d("th", { children: h.label }, h.key))
+        i.map((h) => /* @__PURE__ */ d("th", { children: h.label }, h.key))
       ] }) }),
       /* @__PURE__ */ d("tbody", { children: l.map((h, u) => {
         const r = n.some(
@@ -2651,7 +2651,7 @@ function bs({
             style: { cursor: t ? "default" : "pointer" },
             children: [
               /* @__PURE__ */ d("td", { children: u + 1 }),
-              c.map((m) => /* @__PURE__ */ d("td", { children: String(h[m.key] ?? "") }, m.key))
+              i.map((m) => /* @__PURE__ */ d("td", { children: String(h[m.key] ?? "") }, m.key))
             ]
           },
           u
@@ -2676,13 +2676,13 @@ function ks({
   onFileUpload: n
 }) {
   const s = Ce(null), o = $(() => {
-    var i;
-    (i = s.current) == null || i.click();
+    var c;
+    (c = s.current) == null || c.click();
   }, []), a = $(
-    (i) => {
+    (c) => {
       var l;
-      const c = (l = i.target.files) == null ? void 0 : l[0];
-      c && (n == null || n(c)), i.target.value = "";
+      const i = (l = c.target.files) == null ? void 0 : l[0];
+      i && (n == null || n(i)), c.target.value = "";
     },
     [n]
   );
@@ -2717,8 +2717,8 @@ function Os({
   onChange: s,
   readOnly: o = !1,
   textContent: a,
-  numberContent: i,
-  fileContent: c,
+  numberContent: c,
+  fileContent: i,
   onFileUpload: l,
   children: h
 }) {
@@ -2745,7 +2745,7 @@ function Os({
       return /* @__PURE__ */ d(
         bs,
         {
-          content: i,
+          content: c,
           readOnly: o
         }
       );
@@ -2753,7 +2753,7 @@ function Os({
       return /* @__PURE__ */ d(
         ks,
         {
-          content: c,
+          content: i,
           readOnly: o,
           onFileUpload: l
         }
@@ -2795,17 +2795,17 @@ function Xt({
   onDirectionChange: o,
   hidden: a = !1
 }) {
-  const [i, c] = re(""), l = ve(() => {
-    if (!i.trim()) return e;
-    const r = i.trim().toLowerCase();
+  const [c, i] = re(""), l = ve(() => {
+    if (!c.trim()) return e;
+    const r = c.trim().toLowerCase();
     return e.filter(
       (m) => {
         var v;
         return m.title.toLowerCase().includes(r) || ((v = m.children) == null ? void 0 : v.some((g) => g.title.toLowerCase().includes(r)));
       }
     );
-  }, [e, i]), h = $((r) => {
-    c(r.target.value);
+  }, [e, c]), h = $((r) => {
+    i(r.target.value);
   }, []), u = s === "vertical" ? "bottom" : "left";
   return /* @__PURE__ */ S(
     "div",
@@ -2846,7 +2846,7 @@ function Xt({
               className: he.searchInput,
               type: "text",
               placeholder: "Search records...",
-              value: i,
+              value: c,
               onChange: h
             }
           ),
@@ -2869,8 +2869,8 @@ function pn({
   activeRecordId: t,
   onRecordSelect: n
 }) {
-  const s = e.id === t, o = e.children && e.children.length > 0, [a, i] = re(s || !1), c = $(() => {
-    o && i((l) => !l), n(e);
+  const s = e.id === t, o = e.children && e.children.length > 0, [a, c] = re(s || !1), i = $(() => {
+    o && c((l) => !l), n(e);
   }, [o, n, e]);
   return /* @__PURE__ */ S(Mt, { children: [
     /* @__PURE__ */ S(
@@ -2878,7 +2878,7 @@ function pn({
       {
         className: he.recordItem,
         "data-active": s || void 0,
-        onClick: c,
+        onClick: i,
         children: [
           e.thumbnail && /* @__PURE__ */ d(
             "img",
@@ -2940,10 +2940,10 @@ function ia({
   onClassSelect: s,
   onAnnotationSelect: o,
   onAnnotationDelete: a,
-  disabled: i = !1
+  disabled: c = !1
 }) {
   var v;
-  const [c, l] = re("class"), [h, u] = re(((v = e[0]) == null ? void 0 : v.id) ?? "");
+  const [i, l] = re("class"), [h, u] = re(((v = e[0]) == null ? void 0 : v.id) ?? "");
   ce(() => {
     e.length > 0 && !e.find((g) => g.id === h) && u(e[0].id);
   }, [e, h]);
@@ -2956,13 +2956,13 @@ function ia({
     return g;
   }, [e]), m = $(
     (g) => {
-      i || (u(g.id), s == null || s(g));
+      c || (u(g.id), s == null || s(g));
     },
-    [i, s]
+    [c, s]
   );
   return ce(() => {
     const g = (b) => {
-      if (i) return;
+      if (c) return;
       const f = b.target;
       if (f instanceof HTMLElement && (f.tagName === "INPUT" || f.tagName === "TEXTAREA" || f.tagName === "SELECT" || f.isContentEditable))
         return;
@@ -2970,13 +2970,13 @@ function ia({
       N && (b.preventDefault(), m(N));
     };
     return window.addEventListener("keydown", g), () => window.removeEventListener("keydown", g);
-  }, [e, i, m]), /* @__PURE__ */ d("div", { className: ae.infoPanel, children: /* @__PURE__ */ S("div", { className: ae.section, children: [
+  }, [e, c, m]), /* @__PURE__ */ d("div", { className: ae.infoPanel, children: /* @__PURE__ */ S("div", { className: ae.section, children: [
     /* @__PURE__ */ d("div", { className: ae.sectionTitle, children: /* @__PURE__ */ S("div", { className: ae.tabs, children: [
       /* @__PURE__ */ d(
         "button",
         {
           className: ae.tab,
-          "data-active": c === "class" || void 0,
+          "data-active": i === "class" || void 0,
           onClick: () => l("class"),
           children: "Class"
         }
@@ -2985,20 +2985,20 @@ function ia({
         "button",
         {
           className: ae.tab,
-          "data-active": c === "label" || void 0,
+          "data-active": i === "label" || void 0,
           onClick: () => l("label"),
           children: "Label"
         }
       )
     ] }) }),
-    c === "class" && /* @__PURE__ */ d("div", { className: ae.sectionContent, children: /* @__PURE__ */ d("div", { className: ae.classList, children: Array.from(r.entries()).map(([g, b]) => /* @__PURE__ */ S("div", { children: [
+    i === "class" && /* @__PURE__ */ d("div", { className: ae.sectionContent, children: /* @__PURE__ */ d("div", { className: ae.classList, children: Array.from(r.entries()).map(([g, b]) => /* @__PURE__ */ S("div", { children: [
       g && /* @__PURE__ */ d("div", { style: { fontSize: "0.75rem", fontWeight: 600, color: "#64748b", padding: "0.25rem 0", marginTop: "0.25rem" }, children: g }),
       b.map((f) => /* @__PURE__ */ S(
         "button",
         {
           className: ae.classButton,
           "data-active": h === f.id || void 0,
-          disabled: i,
+          disabled: c,
           onClick: () => m(f),
           children: [
             /* @__PURE__ */ d(
@@ -3015,7 +3015,7 @@ function ia({
         f.id
       ))
     ] }, g || "__default")) }) }),
-    c === "label" && /* @__PURE__ */ d("div", { className: ae.sectionContent, children: t.length === 0 ? /* @__PURE__ */ d("div", { style: { fontSize: "0.8125rem", color: "#64748b", padding: "1rem 0", textAlign: "center" }, children: "No labels yet" }) : /* @__PURE__ */ d("div", { className: ae.labelList, children: t.map((g) => /* @__PURE__ */ S(
+    i === "label" && /* @__PURE__ */ d("div", { className: ae.sectionContent, children: t.length === 0 ? /* @__PURE__ */ d("div", { style: { fontSize: "0.8125rem", color: "#64748b", padding: "1rem 0", textAlign: "center" }, children: "No labels yet" }) : /* @__PURE__ */ d("div", { className: ae.labelList, children: t.map((g) => /* @__PURE__ */ S(
       "div",
       {
         className: ae.labelItem,
@@ -3059,7 +3059,7 @@ function Le(e, t = "sm") {
   return Je(fe, { iconType: e, size: t });
 }
 function ra() {
-  const e = Ke((u) => u.tool), t = Ke((u) => u.setTool), n = Se((u) => u.mode), s = Se((u) => u.cycleMode), o = (e == null ? void 0 : e.id) ?? "selection", i = ["magic-brush", "superpixel", "seg-anything"].includes(o), c = o === "superpixel" ? "icon-superpixel" : o === "seg-anything" ? "icon-seg-anything" : "icon-magic-wand", l = n === le.ONLY_ORIGIN ? "icon-bottom-layer" : n === le.ONLY_OVERLAY ? "icon-top-layer" : "icon-all-layer";
+  const e = Ke((u) => u.tool), t = Ke((u) => u.setTool), n = Se((u) => u.mode), s = Se((u) => u.cycleMode), o = (e == null ? void 0 : e.id) ?? "selection", c = ["magic-brush", "superpixel", "seg-anything"].includes(o), i = o === "superpixel" ? "icon-superpixel" : o === "seg-anything" ? "icon-seg-anything" : "icon-magic-wand", l = n === le.ONLY_ORIGIN ? "icon-bottom-layer" : n === le.ONLY_OVERLAY ? "icon-top-layer" : "icon-all-layer";
   return { toolbar: [
     // Selection
     {
@@ -3107,9 +3107,9 @@ function ra() {
       variant: "radio",
       id: ca,
       name: "tool",
-      icon: Le(c),
+      icon: Le(i),
       title: "Intelligent Tools",
-      checked: i,
+      checked: c,
       subButtonItems: [
         {
           variant: "radio",
@@ -3142,7 +3142,7 @@ function ra() {
         }
       ],
       onClick: () => {
-        i || t(yt());
+        c || t(yt());
       }
     },
     // Dropdown toggle (slim)
@@ -3180,7 +3180,7 @@ function ot(e) {
   return Je(fe, { iconType: e, size: "sm" });
 }
 function la() {
-  const e = Yt((l) => l.tool), t = Yt((l) => l.setTool), n = Se((l) => l.mode), s = Se((l) => l.cycleMode), o = vo(), a = (e == null ? void 0 : e.id) ?? "selection", i = n === le.ONLY_ORIGIN ? "icon-bottom-layer" : n === le.ONLY_OVERLAY ? "icon-top-layer" : "icon-all-layer";
+  const e = Yt((l) => l.tool), t = Yt((l) => l.setTool), n = Se((l) => l.mode), s = Se((l) => l.cycleMode), o = vo(), a = (e == null ? void 0 : e.id) ?? "selection", c = n === le.ONLY_ORIGIN ? "icon-bottom-layer" : n === le.ONLY_OVERLAY ? "icon-top-layer" : "icon-all-layer";
   return { toolbar: [
     {
       variant: "radio",
@@ -3238,7 +3238,7 @@ function la() {
     {
       variant: "button",
       id: "layer-mode",
-      icon: ot(i),
+      icon: ot(c),
       title: ee("Layer", J.common.layerToggle),
       onClick: s
     }
@@ -3248,7 +3248,7 @@ function gt(e) {
   return Je(fe, { iconType: e, size: "sm" });
 }
 function da() {
-  const e = zt((c) => c.tool), t = zt((c) => c.setTool), n = Se((c) => c.mode), s = Se((c) => c.cycleMode), o = (e == null ? void 0 : e.id) ?? "selection", a = n === le.ONLY_ORIGIN ? "icon-bottom-layer" : n === le.ONLY_OVERLAY ? "icon-top-layer" : "icon-all-layer";
+  const e = zt((i) => i.tool), t = zt((i) => i.setTool), n = Se((i) => i.mode), s = Se((i) => i.cycleMode), o = (e == null ? void 0 : e.id) ?? "selection", a = n === le.ONLY_ORIGIN ? "icon-bottom-layer" : n === le.ONLY_OVERLAY ? "icon-top-layer" : "icon-all-layer";
   return { toolbar: [
     {
       variant: "radio",
@@ -3312,7 +3312,7 @@ function vt(e) {
   return Je(fe, { iconType: e, size: "sm" });
 }
 function fa() {
-  const e = Ke((l) => l.tool), t = Ke((l) => l.setTool), n = Se((l) => l.mode), s = Se((l) => l.cycleMode), o = St((l) => l.toggle), a = (e == null ? void 0 : e.id) ?? "selection", i = n === le.ONLY_ORIGIN ? "icon-bottom-layer" : n === le.ONLY_OVERLAY ? "icon-top-layer" : "icon-all-layer";
+  const e = Ke((l) => l.tool), t = Ke((l) => l.setTool), n = Se((l) => l.mode), s = Se((l) => l.cycleMode), o = St((l) => l.toggle), a = (e == null ? void 0 : e.id) ?? "selection", c = n === le.ONLY_ORIGIN ? "icon-bottom-layer" : n === le.ONLY_OVERLAY ? "icon-top-layer" : "icon-all-layer";
   return { toolbar: [
     {
       variant: "radio",
@@ -3335,16 +3335,16 @@ function fa() {
     {
       variant: "button",
       id: "layer-mode",
-      icon: vt(i),
+      icon: vt(c),
       title: ee("Layer", J.common.layerToggle),
       onClick: s
     }
   ] };
 }
 function ma(e, t) {
-  const n = ra(), s = la(), o = da(), a = ua(), i = ha(), c = fa();
+  const n = ra(), s = la(), o = da(), a = ua(), c = ha(), i = fa();
   if (t)
-    return c;
+    return i;
   switch (e) {
     case "Image":
       return n;
@@ -3355,7 +3355,7 @@ function ma(e, t) {
     case "Record":
       return a;
     case "File":
-      return i;
+      return c;
     default:
       return n;
   }
@@ -3444,12 +3444,12 @@ function Ma({ item: e }) {
         disabled: e.disabled,
         onClick: () => {
           var a;
-          (a = e.onClick) == null || a.call(e), n((i) => !i);
+          (a = e.onClick) == null || a.call(e), n((c) => !c);
         },
         children: e.icon
       }
     ),
-    t && e.subItems && /* @__PURE__ */ d("div", { className: ge.subToolbar, children: e.subItems.map((a, i) => /* @__PURE__ */ d(bn, { item: a }, i)) })
+    t && e.subItems && /* @__PURE__ */ d("div", { className: ge.subToolbar, children: e.subItems.map((a, c) => /* @__PURE__ */ d(bn, { item: a }, c)) })
   ] });
 }
 function Ia({ children: e }) {
@@ -3653,9 +3653,9 @@ function ci({
   onAnnotationSelect: s,
   onValidate: o,
   onValidationUpdate: a,
-  onValidationDelete: i
+  onValidationDelete: c
 }) {
-  const [c, l] = re(""), [h, u] = re(null), r = t.filter((f) => !f.result).length, m = $(async () => {
+  const [i, l] = re(""), [h, u] = re(null), r = t.filter((f) => !f.result).length, m = $(async () => {
     n && await (o == null ? void 0 : o({
       annotationIds: [n],
       result: !0
@@ -3664,13 +3664,13 @@ function ci({
     n && (await (o == null ? void 0 : o({
       annotationIds: [n],
       result: !1,
-      reason: c || void 0
+      reason: i || void 0
     })), l(""));
-  }, [n, c, o]), g = $(
+  }, [n, i, o]), g = $(
     async (f) => {
-      await (i == null ? void 0 : i({ ids: [f] }));
+      await (c == null ? void 0 : c({ ids: [f] }));
     },
-    [i]
+    [c]
   ), b = $(
     (f) => f.annotationId ? e.find((p) => p.id === f.annotationId) ?? null : null,
     [e]
@@ -3708,7 +3708,7 @@ function ci({
             ] }),
             f.reason && /* @__PURE__ */ d("p", { className: ie.issueReason, children: f.reason }),
             f.validatedAt && /* @__PURE__ */ d("span", { className: ie.issueDate, children: f.validatedAt }),
-            i && /* @__PURE__ */ d(
+            c && /* @__PURE__ */ d(
               "button",
               {
                 className: ie.validateButton,
@@ -3730,7 +3730,7 @@ function ci({
       {
         className: ie.reasonInput,
         placeholder: "Reason (optional)...",
-        value: c,
+        value: i,
         onChange: (f) => l(f.target.value)
       }
     ) }),
@@ -3775,7 +3775,7 @@ function ri() {
       p === "rect" ? f = new b.Rect(g) : p === "polygon" && g.points ? f = new b.Polygon(g.points, g) : p === "path" && g.path ? f = new b.Path(g.path, g) : p === "image" && typeof g.src == "string" && (f = await b.FabricImage.fromURL(g.src, { crossOrigin: "anonymous" }), f.set(g)), f && (v.add(f), Ne(v), t(v.getObjects()));
     },
     [t]
-  ), i = $(
+  ), c = $(
     (u) => {
       const r = Q();
       if (!r) return;
@@ -3783,7 +3783,7 @@ function ri() {
       v && (r.remove(v), Ne(r), t(r.getObjects()));
     },
     [t]
-  ), c = $(() => {
+  ), i = $(() => {
     const u = Q();
     if (!u) return;
     const r = u.getObjects();
@@ -3813,16 +3813,16 @@ function ri() {
       zoom: n,
       getAnnotations: o,
       addAnnotation: a,
-      removeAnnotation: i,
-      clearCanvas: c,
+      removeAnnotation: c,
+      clearCanvas: i,
       exportState: l,
       setZoomLevel: h
     }),
-    [e, n, o, a, i, c, l, h]
+    [e, n, o, a, c, i, l, h]
   );
 }
 function li() {
-  const e = Ee((r) => r.undoStack), t = Ee((r) => r.redoStack), n = Ee((r) => r.setUndoStack), s = Ee((r) => r.setRedoStack), o = dt((r) => r.setObjects), a = e.length > 0, i = t.length > 0, c = $(() => {
+  const e = Ee((r) => r.undoStack), t = Ee((r) => r.redoStack), n = Ee((r) => r.setUndoStack), s = Ee((r) => r.setRedoStack), o = dt((r) => r.setObjects), a = e.length > 0, c = t.length > 0, i = $(() => {
     const r = Ue(), m = JSON.stringify(r);
     n([...e, m]), s([]);
   }, [e, n, s]), l = $(async () => {
@@ -3834,26 +3834,26 @@ function li() {
     const v = [...e], g = v.pop();
     n(v), await r.loadFromJSON(g), Ne(r), o(r.getObjects());
   }, [a, e, t, n, s, o]), h = $(async () => {
-    if (!i) return;
+    if (!c) return;
     const r = Q();
     if (!r) return;
     const m = JSON.stringify(Ue());
     n([...e, m]);
     const v = [...t], g = v.pop();
     s(v), await r.loadFromJSON(g), Ne(r), o(r.getObjects());
-  }, [i, e, t, n, s, o]), u = $(() => {
+  }, [c, e, t, n, s, o]), u = $(() => {
     n([]), s([]);
   }, [n, s]);
   return ve(
     () => ({
       canUndo: a,
-      canRedo: i,
+      canRedo: c,
       undo: l,
       redo: h,
-      pushSnapshot: c,
+      pushSnapshot: i,
       clear: u
     }),
-    [a, i, l, h, c, u]
+    [a, c, l, h, i, u]
   );
 }
 function di(e) {
@@ -3863,8 +3863,8 @@ function di(e) {
     annotations: s,
     selectedIds: o,
     activeTool: a,
-    addAnnotations: i,
-    updateAnnotation: c,
+    addAnnotations: c,
+    updateAnnotation: i,
     removeAnnotations: l,
     setTool: h
   } = e, u = ve(
@@ -3882,8 +3882,8 @@ function di(e) {
       annotations: s,
       selectedIds: o,
       activeTool: a,
-      addAnnotations: i,
-      updateAnnotation: c,
+      addAnnotations: c,
+      updateAnnotation: i,
       removeAnnotations: l,
       setTool: h,
       canvas: {
@@ -3894,7 +3894,7 @@ function di(e) {
         }
       }
     }),
-    [n, s, o, a, i, c, l, h]
+    [n, s, o, a, c, i, l, h]
   ), g = ve(
     () => u.find((f) => f.id === a),
     [u, a]