@servantcdh/ez-planet-labeling 0.3.1 → 0.3.3

package/dist/index.js

@@ -1,10 +1,10 @@
-import tt, { createContext as xn, useState as re, useEffect as ce, useMemo as ve, useContext as Ln, useCallback as $, useRef as Ce, createElement as Je } from "react";
-import { jsx as d, jsxs as S, Fragment as Mt } from "react/jsx-runtime";
-const za = ["Record", "Image", "Text", "Number", "File"], Fa = "Brush", Fe = "Bounded Box", It = "Filled Box", wn = "Filled Polygon", Ct = "Magic Brush", _e = "Superpixel", it = "BrushCursor", pt = "SuperpixelBoundary", Xa = "Combined Label", bt = "Segment Anything Box", $a = "Eraser", Sn = 1, Mn = 0, In = [
-  it,
-  pt,
-  bt
-], Nt = [
+import et, { createContext as xn, useState as re, useEffect as ce, useMemo as ve, useContext as Ln, useCallback as $, useRef as Ce, createElement as Ke } from "react";
+import { jsx as u, jsxs as S, Fragment as It } from "react/jsx-runtime";
+const za = ["Record", "Image", "Text", "Number", "File"], Fa = "Brush", Fe = "Bounded Box", Nt = "Filled Box", wn = "Filled Polygon", vt = "Magic Brush", _e = "Superpixel", at = "BrushCursor", Ct = "SuperpixelBoundary", Xa = "Combined Label", pt = "Segment Anything Box", $a = "Eraser", Sn = 1, Mn = 0, In = [
+  at,
+  Ct,
+  pt
+], kt = [
   "id",
   "unique",
   "hex",
@@ -32,11 +32,11 @@ const On = async () => (ze || (ze = await import("fabric")), ze), oe = () => {
       "Fabric has not been loaded. Call loadFabric() first (async)."
     );
   return ze;
-}, ke = () => oe().Point, Pn = () => oe().Line, Gt = () => oe().Rect, qt = () => oe().Polygon, Tn = () => oe().PencilBrush, Bn = () => oe().Circle, Kt = () => oe().FabricImage, En = () => oe().Control, Rn = () => oe().StaticCanvas;
-let Xe = null, Dn = { x: 0, y: 0 }, An = { x: 0, y: 0 };
-const Q = () => Xe, Rt = (e) => {
+}, Oe = () => oe().Point, Pn = () => oe().Line, qt = () => oe().Rect, Kt = () => oe().Polygon, Tn = () => oe().PencilBrush, Bn = () => oe().Circle, Jt = () => oe().FabricImage, En = () => oe().Control, Rn = () => oe().StaticCanvas;
+let Xe = null, An = { x: 0, y: 0 }, Dn = { x: 0, y: 0 };
+const Q = () => Xe, At = (e) => {
   Xe = e;
-}, Hn = () => Dn, _n = () => An, pe = () => {
+}, Hn = () => An, _n = () => Dn, pe = () => {
   if (!Xe)
     throw new Error("Canvas has not been initialized.");
   return Xe;
@@ -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 = (r) => {
+      e(s, r.data);
     };
     return t.on(o, a), { eventName: o, handler: a };
   });
@@ -81,27 +81,27 @@ const Q = () => Xe, Rt = (e) => {
 }, Un = (e, t) => {
   const n = Q();
   n && n.fire(`label:${e}`, { data: t });
-}, Jt = (e) => e, we = (e = pe()) => Jt(e.getObjects()), Ga = (e = pe()) => e.getActiveObjects(), Wn = (e) => ({
+}, jt = (e) => e, Se = (e = pe()) => jt(e.getObjects()), Ga = (e = pe()) => e.getActiveObjects(), Wn = (e) => ({
   ...e,
-  objects: Jt(e.objects)
-}), Ue = (e = pe()) => Wn(e.toJSON(Nt)), He = (e) => (t) => e(t), I = (e) => e, Dt = (e, t) => t === 0 ? 0 : e / t, st = ({ x: e, y: t }) => {
+  objects: jt(e.objects)
+}), Ue = (e = pe()) => Wn(e.toJSON(kt)), De = (e) => (t) => e(t), I = (e) => e, Dt = (e, t) => t === 0 ? 0 : e / t, ot = ({ x: e, y: t }) => {
   const s = pe().getZoom();
   return { x: Dt(e, s), y: Dt(t, s) };
-}, jt = (e) => st({
+}, Qt = (e) => ot({
   x: e.offsetX,
   y: e.offsetY
-}), Ne = (e) => {
+}), ke = (e) => {
   const t = e ?? Xe;
   t && t.contextContainer && t.renderAll();
-}, kt = (e, t) => {
-  const n = pe(), s = Bn(), o = Gt(), a = Hn();
+}, Ot = (e, t) => {
+  const n = pe(), s = Bn(), o = qt(), a = Hn();
   n.remove(
-    ...we(n).filter(
-      ({ info: r }) => r === it
+    ...Se(n).filter(
+      ({ info: c }) => c === at
     )
   );
-  const i = {
-    info: it,
+  const r = {
+    info: at,
     left: -100,
     top: -100,
     width: e.lineWidth,
@@ -116,38 +116,38 @@ const Q = () => Xe, Rt = (e) => {
     originX: "center",
     originY: "center",
     selectable: !1
-  }, c = e.lineCap === "round" ? new s(i) : new o(i), l = (r) => {
-    if (!r && !a.x)
+  }, i = e.lineCap === "round" ? new s(r) : new o(r), l = (c) => {
+    if (!c && !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();
-  }, h = (r) => {
-    l(r);
-  }, u = () => {
+    const m = c == null ? void 0 : c.e, { x: v, y: f } = m ? n.getScenePoint(m) : a;
+    a.x = v, a.y = f, i.set({ top: f, left: v }), i.setCoords(), n.renderAll();
+  }, g = (c) => {
+    l(c);
+  }, d = () => {
     Un("init");
   };
-  return l(), { brushCursor: c, 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;
-  const l = function(r) {
-    const m = r.scenePoint ?? r.pointer;
+  return l(), { brushCursor: i, handleOnMouseMove: g, handleOnMouseUp: d };
+}, Pt = ({ colorCode: e, callback: t }, n, s = !1) => {
+  const o = pe(), a = qt();
+  s && (n = s, o.getObjects().forEach((c) => c.set({ visible: !1 })), o.renderAll());
+  let r = 0, i = 0;
+  const l = function(c) {
+    const m = c.scenePoint ?? c.pointer;
     if (!m)
       return;
-    const { x: v, y: g } = st(m);
-    i = v, c = g;
-  }, h = function(r) {
-    const m = r.scenePoint ?? r.pointer;
+    const { x: v, y: f } = ot(m);
+    r = v, i = f;
+  }, g = function(c) {
+    const m = c.scenePoint ?? c.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 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 { x: v, y: f } = ot(m), b = v - r, h = f - i;
+    let p = Math.abs(b), N = Math.abs(h), Z = b > 0 ? r : v, V = h > 0 ? i : f;
+    const A = Z < 0, k = V < 0;
+    p = A ? p + Z : p, N = k ? N + V : N, Z = A ? 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;
     p = E ? p - (Z + p - w) : p, N = _ ? N - (V + N - C) : N;
-    const A = p && N ? new a({
+    const D = p && N ? new a({
       left: Z,
       top: V,
       width: p,
@@ -157,7 +157,7 @@ const Q = () => Xe, Rt = (e) => {
         stroke: e,
         strokeWidth: s ? kn : Nn,
         erasable: !1,
-        info: s ? bt : Fe,
+        info: s ? pt : Fe,
         ...s ? {
           strokeDashArray: [7, 5],
           lockMovementX: !0,
@@ -165,106 +165,106 @@ const Q = () => Xe, Rt = (e) => {
         } : {}
       } : {
         fill: e,
-        info: It
+        info: Nt
       },
       objectCaching: !1,
       selectable: !1
     }) : null;
-    if (s && !A && t && t({
-      point: { x: v, y: g, maskInput: Sn }
-    }), s && A && t) {
+    if (s && !D && t && t({
+      point: { x: v, y: f, maskInput: Sn }
+    }), s && D && t) {
       const O = Number(Z ?? 0), y = Number(V ?? 0), B = O + p, R = y + N;
       t({ box: { x1: O, y1: y, x2: B, y2: R } });
     }
-    A && o.add(A);
-  }, u = function(r) {
-    r.preventDefault();
-    const { x: m, y: v } = st({ x: r.offsetX, y: r.offsetY });
-    r.target && r.target.localName === "canvas" && t && t({
+    D && o.add(D);
+  }, d = function(c) {
+    c.preventDefault();
+    const { x: m, y: v } = ot({ x: c.offsetX, y: c.offsetY });
+    c.target && c.target.localName === "canvas" && t && t({
       point: { x: m, y: v, maskInput: Mn }
     });
   };
-  return o.defaultCursor = "crosshair", o.hoverCursor = s ? "crosshair" : "default", o.selection = !0, o.on("mouse:down", I(l)), o.on("mouse:up", I(h)), s && document.addEventListener("contextmenu", u), () => {
-    o.defaultCursor = "default", o.selection = !1, o.off("mouse:down", I(l)), o.off("mouse:up", I(h)), s && (document.removeEventListener("contextmenu", u), o.remove(
-      ...we(o).filter(
-        ({ info: r }) => r === bt
+  return o.defaultCursor = "crosshair", o.hoverCursor = s ? "crosshair" : "default", o.selection = !0, o.on("mouse:down", I(l)), o.on("mouse:up", I(g)), s && document.addEventListener("contextmenu", d), () => {
+    o.defaultCursor = "default", o.selection = !1, o.off("mouse:down", I(l)), o.off("mouse:up", I(g)), s && (document.removeEventListener("contextmenu", d), o.remove(
+      ...Se(o).filter(
+        ({ info: c }) => c === pt
       )
-    ), we(o).forEach(
-      (r) => r.set({ visible: !0 })
-    )), Ne(o);
+    ), Se(o).forEach(
+      (c) => c.set({ visible: !0 })
+    )), ke(o);
   };
-}, Qt = () => ({ id: "brush", init: ({ brush: t, colorCode: n }) => {
+}, en = () => ({ 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: r, handleOnMouseUp: i } = Ot(t, n), l = function() {
     s.add(a);
-  }, h = function() {
+  }, g = 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(g)), s.on("mouse:move", I(r)), s.on("mouse:up", I(i)), () => {
+    s.remove(a), s.off("mouse:over", I(l)), s.off("mouse:out", I(g)), s.off("mouse:move", I(r)), s.off("mouse:up", I(i)), s.isDrawingMode = !1;
   };
-} }), en = () => ({ id: "eraser", init: async ({ brush: t }) => {
+} }), tn = () => ({ 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: r } = Ot(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(r)), () => {
+    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(r)), n.isDrawingMode = !1;
   };
-} }), At = (e, t, n = 0) => {
+} }), Ht = (e, t, n = 0) => {
   const s = 10 ** n;
   return Math.round(e * t * s) / s;
-}, tn = (e, t) => {
+}, nn = (e, t) => {
   e = e.includes("#") ? e.substring(1) : e;
   const n = parseInt(e, 16), s = n >> 16 & 255, o = n >> 8 & 255, a = n & 255;
   return `rgba(${s},${o},${a},${t})`;
-}, Pt = (e) => {
+}, Tt = (e) => {
   const t = e.substring(5);
   return t.substring(0, t.length - 1).split(",").map((s) => +s);
-}, Be = (e) => Math.round(e).toString(16).padStart(2, "0"), Yn = (e) => {
+}, Ee = (e) => Math.round(e).toString(16).padStart(2, "0"), Yn = (e) => {
   let t = e.startsWith("#") ? e.substring(1) : e;
   (t.length === 3 || t.length === 4) && (t = t.split("").map((l) => l + l).join(""));
   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 };
-}, ct = (e) => {
+  const s = parseInt(t.substring(0, 6), 16), o = s >> 16 & 255, a = s >> 8 & 255, r = s & 255, i = n ? parseInt(t.substring(6), 16) / 255 : 1;
+  return { r: o, g: a, b: r, a: i };
+}, it = (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, r, i] = Tt(n);
     return {
-      hex: `${Be(o)}${Be(a)}${Be(i)}`,
-      alpha: `${At(c, 100, 0)}%`
+      hex: `${Ee(o)}${Ee(a)}${Ee(r)}`,
+      alpha: `${Ht(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, r = 0, i = 0] = o;
     return {
-      hex: `${Be(a)}${Be(i)}${Be(c)}`,
+      hex: `${Ee(a)}${Ee(r)}${Ee(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: r, a: i } = s;
     return {
-      hex: `${Be(o)}${Be(a)}${Be(i)}`,
-      alpha: `${At(c, 100, 0)}%`
+      hex: `${Ee(o)}${Ee(a)}${Ee(r)}`,
+      alpha: `${Ht(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}`;
-}, nn = (e) => new Promise((t) => {
+  const [t, n, s, o] = Tt(e), a = Math.round(t).toString(16).padStart(2, "0"), r = 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}${r}${i}${l}`;
+}, on = (e) => new Promise((t) => {
   const n = new Image();
   n.src = e, n.setAttribute("crossOrigin", ""), n.onload = () => t(n);
 }), Ka = (e, t) => {
@@ -273,31 +273,31 @@ const Q = () => Xe, Rt = (e) => {
     s === 0 && o === 0 && a === 0 ? e.data[n + 3] = 0 : t && (e.data[n + 3] = Math.round(255 * t * 100) / 100);
   }
   return e;
-}, on = (e) => {
-  const t = (r) => {
-    const m = r.data;
-    let v = r.width, g = r.height, b = 0, f = 0;
-    for (let p = 0; p < r.height; p += 1)
-      for (let N = 0; N < r.width; N += 1) {
-        const Z = (p * r.width + N) * 4;
-        m[Z + 3] > 0 && (v = Math.min(v, N), g = Math.min(g, p), b = Math.max(b, N), f = Math.max(f, p));
+}, sn = (e) => {
+  const t = (c) => {
+    const m = c.data;
+    let v = c.width, f = c.height, b = 0, h = 0;
+    for (let p = 0; p < c.height; p += 1)
+      for (let N = 0; N < c.width; N += 1) {
+        const Z = (p * c.width + N) * 4;
+        m[Z + 3] > 0 && (v = Math.min(v, N), f = Math.min(f, p), b = Math.max(b, N), h = Math.max(h, p));
       }
-    return { minX: v, minY: g, maxX: b, maxY: f };
+    return { minX: v, minY: f, maxX: b, maxY: h };
   }, 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);
-  for (let r = 0; r < h; r += 1)
+  const { minX: o, minY: a, maxX: r, maxY: i } = t(e), l = r - o + 1, g = i - a + 1, d = s.createImageData(l, g);
+  for (let c = 0; c < g; c += 1)
     for (let m = 0; m < l; m += 1) {
-      const v = ((a + r) * e.width + o + m) * 4, g = (r * l + m) * 4;
-      u.data[g] = e.data[v], u.data[g + 1] = e.data[v + 1], u.data[g + 2] = e.data[v + 2], u.data[g + 3] = e.data[v + 3];
+      const v = ((a + c) * e.width + o + m) * 4, f = (c * l + m) * 4;
+      d.data[f] = e.data[v], d.data[f + 1] = e.data[v + 1], d.data[f + 2] = e.data[v + 2], d.data[f + 3] = e.data[v + 3];
     }
-  return n.width = l, n.height = h, s.putImageData(u, 0, 0), { canvas: n, minX: o, minY: a };
+  return n.width = l, n.height = g, s.putImageData(d, 0, 0), { canvas: n, minX: o, minY: a };
 };
 let Ve = null;
 const Ja = (e) => {
   Ve = e;
-}, yt = () => ({ id: "magic-wand", init: async ({
+}, bt = () => ({ id: "magic-wand", init: async ({
   src: t,
   colorCode: n,
   brush: s,
@@ -309,19 +309,19 @@ const Ja = (e) => {
     );
     return;
   }
-  const a = pe(), i = Kt(), c = ke(), l = oe(), h = () => {
+  const a = pe(), r = Jt(), i = Oe(), l = oe(), g = () => {
     a.contextContainer && a.renderAll();
   };
   a.defaultCursor = "crosshair", a.hoverCursor = "crosshair";
-  const { threshold: u, radius: r } = o;
+  const { threshold: d, radius: c } = o;
   let m = null, v = null;
-  const g = await nn(t), { width: b, height: f } = g, p = document.createElement("canvas").getContext("2d");
+  const f = await on(t), { width: b, height: h } = f, p = document.createElement("canvas").getContext("2d");
   if (!p)
     return;
-  p.canvas.width = b, p.canvas.height = f, p.drawImage(g, 0, 0), m = p.getImageData(0, 0, b, f);
+  p.canvas.width = b, p.canvas.height = h, p.drawImage(f, 0, 0), m = p.getImageData(0, 0, b, h);
   const N = ({ x: y, y: B }) => ({
     x: Math.min(Math.max(Math.round(y), 0), b - 1),
-    y: Math.min(Math.max(Math.round(B), 0), f - 1)
+    y: Math.min(Math.max(Math.round(B), 0), h - 1)
   }), Z = async (y) => {
     const B = y.getElement(), R = document.createElement("canvas").getContext("2d");
     if (!B || !R)
@@ -343,32 +343,32 @@ const Ja = (e) => {
       ({ points: F }) => F.length
     );
     if (!se.length) return null;
-    const de = y.scaleX ?? 1, Me = y.scaleY ?? 1, Oe = y.left ?? 0, ue = y.top ?? 0;
+    const de = y.scaleX ?? 1, Ie = y.scaleY ?? 1, Pe = y.left ?? 0, ue = y.top ?? 0;
     let te = 1 / 0, W = 1 / 0;
     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);
+        const K = ye * de, Be = X * Ie;
+        return te = Math.min(te, K), W = Math.min(W, Be), new i(K, Be);
       });
       return { inner: F.inner, points: ne };
     });
     if (!Number.isFinite(te) || !Number.isFinite(W)) return null;
-    const me = { x: te, y: W }, Ie = be.map((F) => ({
+    const me = { x: te, y: W }, Ne = 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(
+    })).sort((F, ne) => Number(F.inner) - Number(ne.inner)), Je = Ne.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 = [];
-    return Ie.forEach(({ points: F }) => {
+    ), Re = Je >= 0 ? Je : 0, Te = Ne[Re] ?? Ne[0], je = (Te == null ? void 0 : Te.points.map(({ x: F, y: ne }) => new i(F, ne))) ?? [], Ae = [];
+    return Ne.forEach(({ points: F }) => {
       if (!F.length) return;
       const [ne, ...ye] = F;
-      De.push(`M ${ne.x} ${ne.y}`), ye.forEach(({ x: X, y: K }) => {
-        De.push(`L ${X} ${K}`);
-      }), De.push("Z");
-    }), new l.Path(De.join(" "), {
-      left: Oe + me.x,
+      Ae.push(`M ${ne.x} ${ne.y}`), ye.forEach(({ x: X, y: K }) => {
+        Ae.push(`L ${X} ${K}`);
+      }), Ae.push("Z");
+    }), new l.Path(Ae.join(" "), {
+      left: Pe + me.x,
       top: ue + me.y,
       originX: "left",
       originY: "top",
@@ -376,12 +376,12 @@ const Ja = (e) => {
       selectable: !1,
       evented: !0,
       fillRule: "evenodd",
-      pathOffset: new c(0, 0),
-      points: Qe,
-      pathContours: Ie,
+      pathOffset: new i(0, 0),
+      points: je,
+      pathContours: Ne,
       pathBaseOffset: me,
       pathEditableContourIndex: Re,
-      info: y.info ?? Ct,
+      info: y.info ?? vt,
       fill: y.fill,
       hex: y.hex,
       alpha: y.alpha,
@@ -403,9 +403,9 @@ const Ja = (e) => {
       height: m.height,
       bytes: 4
     }, { x: B, y: R } = v;
-    let x = Ve.floodFill(y, B, R, u);
-    x = Ve.gaussBlurOnlyBorder(x, r), D(x, n);
-  }, D = (y, B) => {
+    let x = Ve.floodFill(y, B, R, d);
+    x = Ve.gaussBlurOnlyBorder(x, c), A(x, n);
+  }, A = (y, B) => {
     if (!m) return;
     const x = ((ue) => {
       const te = ue.substring(5), be = te.substring(0, te.length - 1).split(",").map((me) => +me);
@@ -421,22 +421,22 @@ const Ja = (e) => {
         se[W] = x[0], se[W + 1] = x[1], se[W + 2] = x[2], se[W + 3] = x[3];
       }
     P.remove();
-    const { canvas: de, minX: Me, minY: Oe } = on(q);
-    k(de, Me, Oe);
+    const { canvas: de, minX: Ie, minY: Pe } = sn(q);
+    k(de, Ie, Pe);
   }, k = async (y, B, R) => {
     if (!v) return;
     const x = B, P = R, T = y.toDataURL();
     y.remove();
-    const L = await i.fromURL(T, {}, {
+    const L = await r.fromURL(T, {}, {
       left: x,
       top: P,
       objectCaching: !1,
       selectable: !1,
-      info: Ct,
+      info: vt,
       fill: n,
       lockMovementX: !0,
       lockMovementY: !0
-    }), { hex: M, alpha: Y } = ct(n);
+    }), { hex: M, alpha: Y } = it(n);
     L.set({
       hex: M,
       alpha: Y,
@@ -454,44 +454,44 @@ const Ja = (e) => {
     }
   }, H = function(y) {
     const B = y.e;
-    (B == null ? void 0 : B.button) === 0 && (v = N(jt(B)), V());
+    (B == null ? void 0 : B.button) === 0 && (v = N(Qt(B)), V());
   }, {
     brushCursor: w,
     handleOnMouseMove: C,
     handleOnMouseUp: E
-  } = kt({ ...s, lineCap: "square" }), _ = () => {
+  } = Ot({ ...s, lineCap: "square" }), _ = () => {
     E();
-  }, A = function() {
+  }, D = function() {
     a.add(w);
   }, O = function() {
     a.remove(w);
   };
-  return a.add(w), a.on("mouse:over", I(A)), a.on("mouse:out", I(O)), a.on("mouse:down", I(H)), a.on("mouse:move", I(C)), a.on("mouse:up", I(_)), () => {
-    a.remove(w), h(), a.off("mouse:over", I(A)), a.off("mouse:out", I(O)), a.off("mouse:down", I(H)), a.off("mouse:move", I(C)), a.off("mouse:up", I(_));
+  return a.add(w), a.on("mouse:over", I(D)), a.on("mouse:out", I(O)), a.on("mouse:down", I(H)), a.on("mouse:move", I(C)), a.on("mouse:up", I(_)), () => {
+    a.remove(w), g(), a.off("mouse:over", I(D)), a.off("mouse:out", I(O)), a.off("mouse:down", I(H)), a.off("mouse:move", I(C)), a.off("mouse:up", I(_));
   };
-} }), sn = () => ({ id: "pen", init: ({ colorCode: t }) => {
-  const n = pe(), s = ke(), o = qt(), a = Pn();
-  let i = [], c = [], l = !1;
-  const h = function(g, b) {
-    if (!c.length)
+} }), an = () => ({ id: "pen", init: ({ colorCode: t }) => {
+  const n = pe(), s = Oe(), o = Kt(), a = Pn();
+  let r = [], i = [], l = !1;
+  const g = function(f, b) {
+    if (!i.length)
       return !1;
-    const f = c[0];
-    if (f.x1 === void 0 || f.y1 === void 0)
+    const h = i[0];
+    if (h.x1 === void 0 || h.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 = [];
-  }, r = function(g) {
-    const b = g.e;
-    if (b && h(b, 10)) {
+    const p = n.getScenePoint(f), N = h.x1 ?? 0, Z = h.y1 ?? 0, { x: V, y: A } = p;
+    return Math.abs(N - V) <= b && Math.abs(Z - A) <= b;
+  }, d = function(f) {
+    f.preventDefault(), n.remove(...i), i = [];
+  }, c = function(f) {
+    const b = f.e;
+    if (b && g(b, 10)) {
       l = !0;
       return;
     }
-    const f = n.getScenePoint(b), p = c.length ? c[c.length - 1] : null;
+    const h = 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],
+        [h.x, h.y, h.x, h.y],
         {
           stroke: "red",
           strokeWidth: 2,
@@ -500,42 +500,42 @@ 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));
-  }, m = function(g) {
+      p.set({ x2: h.x, y2: h.y });
+    r.push(new s(h.x, h.y));
+  }, m = function(f) {
     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)
+      const h = f.e;
+      if (!h)
         return;
-      const p = n.getScenePoint(f);
+      const p = n.getScenePoint(h);
       b.set({ x2: p.x, y2: p.y }), n.renderAll();
     }
   }, v = function() {
     if (l) {
-      n.remove(...c);
-      const g = new o(i, {
+      n.remove(...i);
+      const f = new o(r, {
         fill: t,
         objectCaching: !1,
         selectable: !1,
         evented: !0,
         info: wn
       });
-      n.add(g), n.renderAll(), i = [], c = [], l = !1;
+      n.add(f), n.renderAll(), r = [], 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 = [];
+  return n.defaultCursor = "crosshair", document.addEventListener("contextmenu", d), n.on("mouse:down", I(c)), n.on("mouse:move", I(m)), n.on("mouse:up", I(v)), () => {
+    document.removeEventListener("contextmenu", d), n.defaultCursor = "default", n.off("mouse:down", I(c)), n.off("mouse:move", I(m)), n.off("mouse:up", I(v)), n.remove(...i), i = [];
   };
 } }), zn = (e) => {
   if (!e)
     return !1;
-  const t = qt(), n = oe();
-  return !!(e instanceof t || e instanceof n.Path && [_e, Ct].includes(
+  const t = Kt(), n = oe();
+  return !!(e instanceof t || e instanceof n.Path && [_e, vt].includes(
     e.info ?? ""
   ) && Array.isArray(e.points) && Array.isArray(e.pathContours));
 }, Fn = (e) => {
@@ -545,23 +545,23 @@ const Ja = (e) => {
   const n = e, s = n.pathContours, o = n.pathEditableContourIndex ?? 0;
   if (!s[o])
     return;
-  const a = ke();
+  const a = Oe();
   s[o].points = n.points.map(
-    ({ x: l, y: h }) => new a(l, h)
+    ({ x: l, y: g }) => new a(l, g)
   );
-  const i = [];
+  const r = [];
   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");
+    const [g, ...d] = l;
+    r.push(`M ${g.x} ${g.y}`), d.forEach(({ x: c, y: m }) => {
+      r.push(`L ${c} ${m}`);
+    }), r.push("Z");
   });
-  const c = new t.Path(i.join(" "));
-  n.set({ path: c.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;
+  const i = new t.Path(r.join(" "));
+  n.set({ path: i.path }), n.pathContours = s, n.dirty = !0, n.setCoords();
+}, cn = (e) => {
+  const t = Oe(), 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(
     Math.max((e.width ?? 0) + s, 1),
     Math.max((e.height ?? 0) + o, 1)
@@ -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, r = t[s].y, i = t[o].x, l = t[o].y;
+    r > e.y != l > e.y && e.x < (i - a) * (e.y - r) / (l - r + Number.EPSILON) + a && (n = !n);
   }
   return n;
 }, Gn = (e) => {
@@ -581,71 +581,71 @@ 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: r } = e[(n + 1) % e.length];
+    t += s * r - 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 = Oe(), o = oe().util, a = n.points[this.pointIndex ?? 0], r = a.x - n.pathOffset.x, i = a.y - n.pathOffset.y;
   return o.transformPoint(
-    new s(i, c),
+    new s(r, i),
     o.multiplyTransformMatrices(
       ((l = n.canvas) == null ? void 0 : l.viewportTransform) ?? [1, 0, 0, 1, 0, 0],
       n.calcTransformMatrix()
     )
   );
-}, cn = (e) => {
+}, rn = (e) => {
   var a;
-  const t = ke(), n = oe().util;
+  const t = Oe(), n = oe().util;
   if (!e.points || !e.pathOffset)
     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),
+    (r) => n.transformPoint(
+      new t(r.x - e.pathOffset.x, r.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 = Oe(), a = oe(), r = t.target;
+  if (!r || !r.points || !r.pathOffset)
     return !1;
-  const c = (v = i.controls) == null ? void 0 : v[i.__corner ?? ""];
-  if (!c)
+  const i = (v = r.controls) == null ? void 0 : v[r.__corner ?? ""];
+  if (!i)
     return !1;
-  const l = c.pointIndex ?? 0, h = i.toLocalPoint(
+  const l = i.pointIndex ?? 0, g = r.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
+  ), d = cn(r), c = r._getTransformedDimensions(0, 0), m = {
+    x: g.x * d.x / c.x + r.pathOffset.x,
+    y: g.y * d.y / c.y + r.pathOffset.y
   };
-  return i.points[l] = m, i instanceof a.Path && Fn(i), !0;
+  return r.points[l] = m, r instanceof a.Path && Fn(r), !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 r = Oe(), 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, g = typeof i.__corner == "string" ? i.__corner : "", d = l == null ? void 0 : l[g], c = (d == null ? void 0 : d.pointIndex) ?? e, v = oe().util.transformPoint(
+      new r(
+        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()
+    ), f = t(n, s, o, a), b = cn(i), h = (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,
+      h + 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) => {
-        if (H === r)
+      const A = rn(i).map((k, H) => {
+        if (H === c)
           return null;
         const w = N.absolutePoints[H];
         return w ? {
@@ -655,19 +655,19 @@ const Ja = (e) => {
       }).filter(
         (k) => k !== null
       );
-      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());
+      if (A.length) {
+        const k = A.reduce((w, { dx: C }) => w + C, 0) / A.length, H = A.reduce((w, { dy: C }) => w + C, 0) / A.length;
+        (k !== 0 || H !== 0) && (i.set({
+          left: (i.left ?? 0) + k,
+          top: (i.top ?? 0) + H
+        }), i.setCoords());
       }
     }
-    return g;
+    return f;
   };
 }, jn = (e, t) => {
-  var h, u;
-  const n = oe(), s = ke();
+  var g, d;
+  const n = oe(), s = Oe();
   if (!(e instanceof n.Path) || !Array.isArray(e.pathContours) || !t)
     return;
   const o = e.toLocalPoint(
@@ -675,93 +675,93 @@ const Ja = (e) => {
     "left",
     "top"
   ), a = e.pathContours.map(
-    ({ points: r }, m) => ({
+    ({ points: c }, m) => ({
       index: m,
-      inside: $n(o, r),
+      inside: $n(o, c),
       distance: Math.min(
-        ...r.map(
+        ...c.map(
           (v) => Math.hypot(v.x - o.x, v.y - o.y)
         )
       ),
-      area: Gn(r)
+      area: Gn(c)
     })
-  ), 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 = ((g = a.filter(({ inside: c }) => c).sort((c, m) => c.area - m.area)[0]) == null ? void 0 : g.index) ?? ((d = a.sort((c, m) => c.distance - m.distance)[0]) == null ? void 0 : d.index) ?? 0;
+  e.pathEditableContourIndex = i;
+  const l = e.pathContours[i];
   l && (e.points = l.points.map(
-    ({ x: r, y: m }) => new s(r, m)
+    ({ x: c, y: m }) => new s(c, m)
   ));
 }, Qn = (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,
-        absolutePoints: cn(e)
+    function(o, a, r) {
+      const i = () => (e.editSnapshot = {
+        dragIndex: r,
+        absolutePoints: rn(e)
       }, !1), l = () => (delete e.editSnapshot, !1);
-      return o["p" + i] = new t({
+      return o["p" + r] = new t({
         positionHandler: qn,
         actionHandler: Jn(
-          i > 0 ? i - 1 : n,
+          r > 0 ? r - 1 : n,
           Kn
         ),
         actionName: "editPolygon",
-        pointIndex: i,
-        mouseDownHandler: c,
+        pointIndex: r,
+        mouseDownHandler: i,
         mouseUpHandler: l
       }), o;
     },
     {}
   );
-}, rn = (e, t) => {
+}, ln = (e, t) => {
   const n = t.passStack;
   t.passStack = !0, e.fire("object:modified", { target: t }), t.passStack = n;
 }, eo = (e, t, n) => {
   if (!t || !zn(t))
-    return xt(e), null;
+    return yt(e), null;
   const s = t;
-  return s.edit || (jn(s, n), s.edit = !0, s.cornerStyle = "circle", Qn(s), s.transparentCorners = !1, s.hasBorders = !1), xt(e, s), e.requestRenderAll(), rn(e, s), s;
-}, xt = (e, t) => {
+  return s.edit || (jn(s, n), s.edit = !0, s.cornerStyle = "circle", Qn(s), s.transparentCorners = !1, s.hasBorders = !1), yt(e, s), e.requestRenderAll(), ln(e, s), s;
+}, yt = (e, t) => {
   const n = oe().FabricObject;
-  we(e).forEach((s) => {
+  Se(e).forEach((s) => {
     if (!t || s !== t && t.edit) {
       const o = s, a = o.edit;
-      o.edit = !1, o.cornerStyle = "rect", o.controls = n.prototype.controls, o.hasBorders = !0, o.transparentCorners = !0, delete o.editSnapshot, a && rn(e, o);
+      o.edit = !1, o.cornerStyle = "rect", o.controls = n.prototype.controls, o.hasBorders = !0, o.transparentCorners = !0, delete o.editSnapshot, a && ln(e, o);
     }
   }), e.requestRenderAll();
-}, ln = () => ({ id: "bounded-box", init: (t) => Ot(t, !0) }), to = () => ({ id: "filled-box", init: (t) => Ot(t, !1) }), no = () => ({ id: "seg-anything", init: ({ callback: t }) => Ot({ colorCode: "#13C0A4", callback: t }, !0, !0) }), Tt = () => ({ id: "selection", init: () => {
+}, dn = () => ({ id: "bounded-box", init: (t) => Pt(t, !0) }), to = () => ({ id: "filled-box", init: (t) => Pt(t, !1) }), no = () => ({ id: "seg-anything", init: ({ callback: t }) => Pt({ colorCode: "#13C0A4", callback: t }, !0, !0) }), Bt = () => ({ id: "selection", init: () => {
   let t = !1, n = !1;
   const s = _n(), o = pe();
   o.defaultCursor = "default", o.hoverCursor = "default", o.moveCursor = "default", o.selection = !0;
-  const a = we();
+  const a = Se();
   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 r = null;
+  const i = (w = !1) => {
+    r && (yt(o), r = null, w && o.discardActiveObject(), ke(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);
-  }, h = function(w) {
+    r && E !== r && i(!E), C && (t = !0, s.x = C.x, s.y = C.y);
+  }, g = function(w) {
     t && a.forEach((C) => {
       C.info === Fe && (C.selectable = !1);
     });
-  }, u = function(w) {
+  }, d = function(w) {
     const C = w.scenePoint ?? w.absolutePointer;
     C && (s.x = C.x - s.x, s.y = C.y - s.y), t = !1, a.forEach((E) => {
       E.info === Fe && (E.selectable = !n);
     });
-  }, r = function({ target: w }) {
+  }, c = function({ target: w }) {
   }, m = function() {
   }, v = function(w) {
     if (w.key === "Escape" || w.code === "Escape") {
-      c(!0);
+      i(!0);
       return;
     }
     n = w.shiftKey;
-  }, g = function() {
+  }, f = function() {
     n = !1;
   }, b = function(w) {
     const C = w.scenePoint ?? w.absolutePointer, E = eo(
@@ -769,65 +769,65 @@ const Ja = (e) => {
       w.target ?? null,
       C
     );
-    E && (i = E, o.setActiveObject(E));
-  }, f = He(l), p = He(h), N = He(u), Z = He(r), V = He(m), D = He(b), k = () => {
-    c();
+    E && (r = E, o.setActiveObject(E));
+  }, h = De(l), p = De(g), N = De(d), Z = De(c), V = De(m), A = De(b), k = () => {
+    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
+  o.on("mouse:down", I(h)), 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(A)), o.on("selection:cleared", k), document.addEventListener("keydown", v), document.addEventListener("keyup", f);
+  const H = Se(o).find(
+    ({ info: w }) => w === at
   );
-  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) => {
+  return H && (o.remove(H), ke(o)), () => {
+    i(), o.defaultCursor = "default", o.hoverCursor = "default", o.moveCursor = "default", o.selection = !1, o.discardActiveObject(), ke(o), o.off("mouse:down", I(h)), 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(A)), o.off("selection:cleared", k), document.removeEventListener("keydown", v), document.removeEventListener("keyup", f), a.forEach((w) => {
       w.selectable = !1, w.evented = !1;
     });
   };
 } });
-let Lt = null, at = null;
+let xt = null, st = null;
 const ja = (e) => {
-  Lt = e.SLIC, at = e.MagicBrush;
-}, dn = () => ({ id: "superpixel", init: async ({
+  xt = e.SLIC, st = e.MagicBrush;
+}, un = () => ({ id: "superpixel", init: async ({
   src: t,
   colorCode: n,
   superpixelConfig: s,
   previousTool: o
 }) => {
-  if (!Lt || !at) {
+  if (!xt || !st) {
     console.warn(
       "[@ez-planet/labeling-canvas] SLIC/MagicBrush modules not provided. Call setSuperpixelModules() first."
     );
     return;
   }
-  const a = pe(), i = Kt(), c = ke(), l = oe();
+  const a = pe(), r = Jt(), i = Oe(), 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;
-  f.canvas.width = r, f.canvas.height = m;
+  const g = !o || o.id !== "superpixel", d = await on(t), { width: c, height: m } = d, v = Se(a).filter(({ info: x }) => x === _e).pop(), f = (v == null ? void 0 : v.index) ?? 0, b = g ? f + 1 : f, h = document.createElement("canvas").getContext("2d");
+  if (!h) return;
+  h.canvas.width = c, h.canvas.height = m;
   const p = document.createElement("canvas").getContext("2d");
   if (!p) return;
-  p.canvas.width = r, p.canvas.height = m;
+  p.canvas.width = c, p.canvas.height = m;
   const N = document.createElement("canvas").getContext("2d");
   if (!N) return;
-  N.canvas.width = r, N.canvas.height = m, f.drawImage(u, 0, 0);
-  const Z = f.getImageData(0, 0, r, m), V = new Lt(Z, s), D = V.result;
-  V.createPixelIndex(D), p.putImageData(D, 0, 0);
-  const k = p.getImageData(0, 0, r, m);
-  V.computeEdgemap(k), f.clearRect(0, 0, r, m), f.putImageData(k, 0, 0);
-  const H = f.canvas.toDataURL();
-  f.canvas.remove();
+  N.canvas.width = c, N.canvas.height = m, h.drawImage(d, 0, 0);
+  const Z = h.getImageData(0, 0, c, m), V = new xt(Z, s), A = V.result;
+  V.createPixelIndex(A), p.putImageData(A, 0, 0);
+  const k = p.getImageData(0, 0, c, m);
+  V.computeEdgemap(k), h.clearRect(0, 0, c, m), h.putImageData(k, 0, 0);
+  const H = h.canvas.toDataURL();
+  h.canvas.remove();
   let w = setTimeout(async () => {
     w && clearTimeout(w), w = null;
-    const x = await i.fromURL(H, {}, {
+    const x = await r.fromURL(H, {}, {
       left: 0,
       top: 0,
       objectCaching: !1,
       selectable: !1,
-      info: pt
+      info: Ct
     });
     a.add(x);
   }, 1), C = !1, E = null, _ = null;
-  const A = ({ x, y: P }) => ({
-    x: Math.min(Math.max(Math.round(x), 0), r - 1),
+  const D = ({ x, y: P }) => ({
+    x: Math.min(Math.max(Math.round(x), 0), c - 1),
     y: Math.min(Math.max(Math.round(P), 0), m - 1)
   }), O = (x) => {
     const P = x.getElement(), T = document.createElement("canvas").getContext("2d");
@@ -840,34 +840,34 @@ const ja = (e) => {
       for (let K = 0; K < L; K += 1)
         Y[(X * L + K) * 4 + 3] && (G[X * L + K] = 1, z = Math.min(z, K), q = Math.min(q, X), se = Math.max(se, K), de = Math.max(de, X));
     if (T.canvas.remove(), se < z || de < q) return null;
-    const Me = at.traceContours({
+    const Ie = st.traceContours({
       data: G,
       width: L,
       height: M,
       bounds: { minX: z, minY: q, maxX: se, maxY: de }
-    }), Oe = x.scaleX ?? 1, ue = x.scaleY ?? 1, te = x.left ?? 0, W = x.top ?? 0, be = at.simplifyContours(Me, 1, 6).filter(
+    }), Pe = x.scaleX ?? 1, ue = x.scaleY ?? 1, te = x.left ?? 0, W = x.top ?? 0, be = st.simplifyContours(Ie, 1, 6).filter(
       ({ points: X }) => X.length
     );
     if (!be.length) return null;
-    let me = 1 / 0, Ie = 1 / 0;
-    const je = be.map((X) => {
-      const K = X.points.map(({ x: Te, y: ut }) => {
-        const et = Te * Oe, Et = ut * ue;
-        return me = Math.min(me, et), Ie = Math.min(Ie, Et), { x: et, y: Et };
+    let me = 1 / 0, Ne = 1 / 0;
+    const Je = be.map((X) => {
+      const K = X.points.map(({ x: Be, y: dt }) => {
+        const Qe = Be * Pe, Rt = dt * ue;
+        return me = Math.min(me, Qe), Ne = Math.min(Ne, Rt), { x: Qe, y: Rt };
       });
       return { inner: X.inner, points: K };
     });
-    if (!Number.isFinite(me) || !Number.isFinite(Ie)) return null;
-    const Re = { x: me, y: Ie }, Pe = je.map((X) => ({
+    if (!Number.isFinite(me) || !Number.isFinite(Ne)) return null;
+    const Re = { x: me, y: Ne }, Te = 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: Be }) => new i(K - Re.x, Be - 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 = [];
-    return Pe.forEach(({ points: X }) => {
+    })).sort((X, K) => Number(X.inner) - Number(K.inner)), je = Te.findIndex(({ inner: X }) => !X), Ae = je >= 0 ? je : 0, F = Te[Ae] ?? Te[0], ne = (F == null ? void 0 : F.points.map(({ x: X, y: K }) => new i(X, K))) ?? [], ye = [];
+    return Te.forEach(({ points: X }) => {
       if (!X.length) return;
-      const [K, ...Te] = X;
-      ye.push(`M ${K.x} ${K.y}`), Te.forEach(({ x: ut, y: et }) => ye.push(`L ${ut} ${et}`)), ye.push("Z");
+      const [K, ...Be] = X;
+      ye.push(`M ${K.x} ${K.y}`), Be.forEach(({ x: dt, y: Qe }) => ye.push(`L ${dt} ${Qe}`)), ye.push("Z");
     }), new l.Path(ye.join(" "), {
       left: te + Re.x,
       top: W + Re.y,
@@ -877,11 +877,11 @@ const ja = (e) => {
       selectable: !1,
       evented: !0,
       fillRule: "evenodd",
-      pathOffset: new c(0, 0),
+      pathOffset: new i(0, 0),
       points: ne,
-      pathContours: Pe,
+      pathContours: Te,
       pathBaseOffset: Re,
-      pathEditableContourIndex: De,
+      pathEditableContourIndex: Ae,
       info: x.info ?? _e,
       fill: x.fill,
       hex: x.hex,
@@ -898,20 +898,20 @@ const ja = (e) => {
   }, y = (x) => {
     const P = x.e;
     if (C && (P == null ? void 0 : P.button) === 0) {
-      const T = A(jt(P));
+      const T = D(Qt(P));
       if (!T.x && !T.y) return;
-      const L = V.getClickOffset(T, r), M = D.data, Y = N.getImageData(0, 0, r, m), G = V.getEncodedLabel(M, L);
+      const L = V.getClickOffset(T, c), M = A.data, Y = N.getImageData(0, 0, c, m), G = V.getEncodedLabel(M, L);
       if (E === G) return;
       E = G;
-      const z = V.getPixelIndex()[G], q = Pt(n), se = Math.max(0, Math.min(1, q[3] ?? 1)), de = [
+      const z = V.getPixelIndex()[G], q = Tt(n), se = Math.max(0, Math.min(1, q[3] ?? 1)), de = [
         q[0],
         q[1],
         q[2],
         Math.round(se * 255)
       ];
-      V.highlightPixels(z, de, Y, k), V.fillPixels(z, de, Y), N.clearRect(0, 0, r, m), N.putImageData(Y, 0, 0);
-      const { canvas: Me, minX: Oe, minY: ue } = on(Y), { hex: te, alpha: W } = ct(n), be = new l.FabricImage(Me, {
-        left: Oe,
+      V.highlightPixels(z, de, Y, k), V.fillPixels(z, de, Y), N.clearRect(0, 0, c, m), N.putImageData(Y, 0, 0);
+      const { canvas: Ie, minX: Pe, minY: ue } = sn(Y), { hex: te, alpha: W } = it(n), be = new l.FabricImage(Ie, {
+        left: Pe,
         top: ue,
         objectCaching: !1,
         selectable: !1,
@@ -932,7 +932,7 @@ const ja = (e) => {
     C = !0, y(x);
   }, R = () => {
     C = !1, E = null;
-    const x = we(a).filter(
+    const x = Se(a).filter(
       (T) => T.info === _e && T.index === b && T.type === "image"
     ), P = x[x.length - 1];
     P && (P.combinded = !0, P.evented = !0, a.remove(...x), a.add(P), _ = P);
@@ -940,8 +940,8 @@ const ja = (e) => {
   return a.on("mouse:down", I(B)), a.on("mouse:move", I(y)), a.on("mouse:up", I(R)), () => {
     w && (clearTimeout(w), w = null);
     try {
-      const x = we(a), P = x.find(
-        ({ info: L }) => L === pt
+      const x = Se(a), P = x.find(
+        ({ info: L }) => L === Ct
       );
       P && a.remove(P);
       const T = _ || (x.filter(
@@ -955,71 +955,71 @@ const ja = (e) => {
       a.off("mouse:down", I(B)), a.off("mouse:move", I(y)), a.off("mouse:up", I(R)), _ = null;
     }
   };
-} }), oo = /* @__PURE__ */ new Set([Fe, It]), $e = (e) => typeof e == "number" && Number.isFinite(e), rt = (e) => $e(e) && e !== 0 ? Math.abs(e) : 1, nt = (e, t = 0) => $e(e) ? e : t, ht = (e) => {
+} }), oo = /* @__PURE__ */ new Set([Fe, Nt]), $e = (e) => typeof e == "number" && Number.isFinite(e), ct = (e) => $e(e) && e !== 0 ? Math.abs(e) : 1, tt = (e, t = 0) => $e(e) ? e : t, ut = (e) => {
   if (!e) return;
   const t = e.trim();
   if (!t) return;
   if (t.startsWith("#")) {
     if (t.length === 7 || t.length === 9)
       return t;
-    const { hex: s } = ct(t);
+    const { hex: s } = it(t);
     return `#${s}`;
   }
-  const { hex: n } = ct(t);
+  const { hex: n } = it(t);
   return `#${n}`;
-}, ft = (e, t) => {
+}, ht = (e, t) => {
   if (t === "fill" && typeof e.fill == "string")
-    return ht(e.fill);
+    return ut(e.fill);
   if (t === "stroke" && typeof e.stroke == "string")
-    return ht(e.stroke);
+    return ut(e.stroke);
   if (t === "hex" && typeof e.hex == "string" && e.hex.length)
-    return ht(`#${e.hex}`);
+    return ut(`#${e.hex}`);
 }, so = (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 = tt(e.left), o = tt(e.top), a = tt(e.width), r = tt(e.height), i = ct(e.scaleX), l = ct(e.scaleY), g = a * i, d = r * l;
   return {
     type: "box",
     x: t > 0 ? s / t : s,
     y: n > 0 ? o / n : o,
-    width: t > 0 ? Math.max(h, 0) / t : h,
-    height: n > 0 ? Math.max(u, 0) / n : u
+    width: t > 0 ? Math.max(g, 0) / t : g,
+    height: n > 0 ? Math.max(d, 0) / n : d
   };
-}, io = (e) => e.clone(Nt).then((t) => t ?? e), co = async (e) => {
+}, io = (e) => e.clone(kt).then((t) => t ?? e), co = async (e) => {
   if (typeof document > "u") return null;
   const t = e.getBoundingRect(), n = Math.max(
     1,
-    Math.round((t == null ? void 0 : t.width) ?? (e.width ?? 0) * rt(e.scaleX))
+    Math.round((t == null ? void 0 : t.width) ?? (e.width ?? 0) * ct(e.scaleX))
   ), s = Math.max(
     1,
-    Math.round((t == null ? void 0 : t.height) ?? (e.height ?? 0) * rt(e.scaleY))
+    Math.round((t == null ? void 0 : t.height) ?? (e.height ?? 0) * ct(e.scaleY))
   ), o = Rn(), a = document.createElement("canvas");
   a.width = n, a.height = s;
-  const i = new o(a, {
+  const r = 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, g = (t == null ? void 0 : t.top) ?? 0;
+  i.set({
+    left: (i.left ?? 0) - l,
+    top: (i.top ?? 0) - g
+  }), r.add(i), r.renderAll();
+  const d = r.toDataURL({ format: "png", multiplier: 1 });
+  return r.dispose(), a.remove(), d;
 }, ro = async (e) => {
   const t = await co(e);
   if (!t) return null;
   const [, n] = t.split(",");
   if (!n) return null;
-  const s = JSON.stringify(e.toObject(Nt));
+  const s = JSON.stringify(e.toObject(kt));
   return {
     type: "segmentation",
     mask: n,
     vector: s
   };
 }, lo = (e) => {
-  const t = ft(e, "fill") ?? ft(e, "hex") ?? "#000000", n = $e(e.opacity) ? e.opacity : 1, s = ft(e, "stroke"), o = $e(e.seq) ? e.seq : void 0;
+  const t = ht(e, "fill") ?? ht(e, "hex") ?? "#000000", n = $e(e.opacity) ? e.opacity : 1, s = ht(e, "stroke"), o = $e(e.seq) ? e.seq : void 0;
   return { color: t, opacity: n, lineColor: s, zIndex: o };
 }, uo = async (e, t, n) => {
   const s = e.unique ?? "";
@@ -1027,51 +1027,51 @@ 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 r = lo(e), i = {
     name: e.class ?? "",
     index: $e(e.seq) ? e.seq : 0
   };
-  return { id: s, type: o, label: c, style: i, geometry: a };
-}, un = async (e, t, n) => {
+  return { id: s, type: o, label: i, style: r, geometry: a };
+}, hn = async (e, t, n) => {
   const s = [];
   for (const o of e) {
     const a = await uo(o, t, n);
     a && s.push(a);
   }
   return s;
-}, hn = (e, t, n) => {
-  const { id: s, type: o, label: a, style: i, geometry: c } = e, l = {
+}, fn = (e, t, n) => {
+  const { id: s, type: o, label: a, style: r, 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: r.color.replace("#", ""),
+    alpha: `${Math.round(r.opacity * 100)}%`,
+    opacity: r.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 (r.lineColor && (l.stroke = r.lineColor), o === "box" && (i == null ? void 0 : i.type) === "box") {
+    const g = i;
     return {
       ...l,
       type: "rect",
-      left: h.x * t,
-      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
+      left: g.x * t,
+      top: g.y * n,
+      width: g.width * t,
+      height: g.height * n,
+      fill: r.lineColor ? "" : nn(r.color.replace("#", ""), r.opacity),
+      stroke: r.lineColor ?? void 0,
+      info: r.lineColor ? Fe : Nt
     };
   }
-  if (o === "segmentation" && (c == null ? void 0 : c.type) === "segmentation") {
-    const h = c;
-    if (h.vector)
+  if (o === "segmentation" && (i == null ? void 0 : i.type) === "segmentation") {
+    const g = i;
+    if (g.vector)
       try {
         return {
           ...l,
-          ...JSON.parse(h.vector),
+          ...JSON.parse(g.vector),
           unique: s
         };
       } catch {
@@ -1079,33 +1079,33 @@ const ja = (e) => {
     return {
       ...l,
       type: "image",
-      src: `data:image/png;base64,${h.mask}`
+      src: `data:image/png;base64,${g.mask}`
     };
   }
   return l;
-}, Ht = (e) => {
+}, _t = (e) => {
   let t;
-  const n = /* @__PURE__ */ new Set(), s = (h, u) => {
-    const r = typeof h == "function" ? h(t) : h;
-    if (!Object.is(r, t)) {
+  const n = /* @__PURE__ */ new Set(), s = (g, d) => {
+    const c = typeof g == "function" ? g(t) : g;
+    if (!Object.is(c, t)) {
       const m = t;
-      t = u ?? (typeof r != "object" || r === null) ? r : Object.assign({}, t, r), n.forEach((v) => v(t, m));
+      t = d ?? (typeof c != "object" || c === null) ? c : Object.assign({}, t, c), 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;
-}, fn = (e) => e ? Ht(e) : Ht, ho = (e) => e;
+  }, o = () => t, i = { setState: s, getState: o, getInitialState: () => l, subscribe: (g) => (n.add(g), () => n.delete(g)) }, l = t = e(s, o, i);
+  return i;
+}, mn = (e) => e ? _t(e) : _t, ho = (e) => e;
 function fo(e, t = ho) {
-  const n = tt.useSyncExternalStore(
+  const n = et.useSyncExternalStore(
     e.subscribe,
-    tt.useCallback(() => t(e.getState()), [e, t]),
-    tt.useCallback(() => t(e.getInitialState()), [e, t])
+    et.useCallback(() => t(e.getState()), [e, t]),
+    et.useCallback(() => t(e.getInitialState()), [e, t])
   );
-  return tt.useDebugValue(n), n;
+  return et.useDebugValue(n), n;
 }
-const _t = (e) => {
-  const t = fn(e), n = (s) => fo(t, s);
+const Vt = (e) => {
+  const t = mn(e), n = (s) => fo(t, s);
   return Object.assign(n, t), n;
-}, j = (e) => e ? _t(e) : _t, Ee = j((e) => ({
+}, j = (e) => e ? Vt(e) : Vt, we = j((e) => ({
   tool: null,
   setTool(t) {
     e({ tool: t });
@@ -1126,7 +1126,7 @@ const _t = (e) => {
       return e({ redoStack: [] });
     e({ redoStack: t });
   }
-})), Qa = () => Ee.getState(), Vt = [
+})), Qa = () => we.getState(), Zt = [
   "#C21460",
   "#8601AF",
   "#4424D6",
@@ -1140,11 +1140,11 @@ const _t = (e) => {
   "#FC600A",
   "#FE2712"
 ], We = j((e) => ({
-  colorCode: tn(Vt[Vt.length - 1], 1),
+  colorCode: nn(Zt[Zt.length - 1], 1),
   setColorCode(t) {
     e({ colorCode: t });
   }
-})), lt = j((e) => ({
+})), rt = j((e) => ({
   opacity: 1,
   setOpacity(t) {
     e({ opacity: t });
@@ -1156,36 +1156,36 @@ const _t = (e) => {
   { id: 2, lineCap: "round", lineWidth: 5 },
   { id: 4, lineCap: "round", lineWidth: 10 },
   { id: 6, lineCap: "round", lineWidth: 20 }
-], wt = j((e) => ({
+], Lt = j((e) => ({
   brush: mo[0],
   setBrush(t) {
     e({ brush: t });
   }
 }));
-var Zt = (e, t, n) => (o, a) => ({
+var Ut = (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: (r = 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();
-      e(r), o({
+      const g = ((i = n == null ? void 0 : n.partialize) == null ? void 0 : i.call(n, t())) || t(), d = a().pastStates.splice(-r, r), c = d.shift();
+      e(c), o({
         pastStates: a().pastStates,
         futureStates: a().futureStates.concat(
-          ((l = n == null ? void 0 : n.diff) == null ? void 0 : l.call(n, h, r)) || h,
-          u.reverse()
+          ((l = n == null ? void 0 : n.diff) == null ? void 0 : l.call(n, g, c)) || g,
+          d.reverse()
         )
       });
     }
   },
-  redo: (i = 1) => {
-    var c, l;
+  redo: (r = 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();
-      e(r), o({
+      const g = ((i = n == null ? void 0 : n.partialize) == null ? void 0 : i.call(n, t())) || t(), d = a().futureStates.splice(-r, r), c = d.shift();
+      e(c), o({
         pastStates: a().pastStates.concat(
-          ((l = n == null ? void 0 : n.diff) == null ? void 0 : l.call(n, h, r)) || h,
-          u.reverse()
+          ((l = n == null ? void 0 : n.diff) == null ? void 0 : l.call(n, g, c)) || g,
+          d.reverse()
         ),
         futureStates: a().futureStates
       });
@@ -1195,47 +1195,47 @@ var Zt = (e, t, n) => (o, a) => ({
   isTracking: !0,
   pause: () => o({ isTracking: !1 }),
   resume: () => o({ isTracking: !0 }),
-  setOnSave: (i) => o({ _onSave: i }),
+  setOnSave: (r) => o({ _onSave: r }),
   // Internal properties
   _onSave: n == null ? void 0 : n.onSave,
-  _handleSet: (i, c, 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),
+  _handleSet: (r, i, l, g) => {
+    var d, c;
+    n != null && n.limit && a().pastStates.length >= (n == null ? void 0 : n.limit) && a().pastStates.shift(), (c = (d = a())._onSave) == null || c.call(d, r, l), o({
+      pastStates: a().pastStates.concat(g || r),
       futureStates: []
     });
   }
 }), go = (e, t) => (s, o, a) => {
-  var h, u;
-  a.temporal = fn(
-    ((h = t == null ? void 0 : t.wrapTemporal) == null ? void 0 : h.call(t, Zt(s, o, t))) || Zt(s, o, t)
+  var g, d;
+  a.temporal = mn(
+    ((g = t == null ? void 0 : t.wrapTemporal) == null ? void 0 : g.call(t, Ut(s, o, t))) || Ut(s, o, t)
   );
-  const i = ((u = t == null ? void 0 : t.handleSet) == null ? void 0 : u.call(
+  const r = ((d = t == null ? void 0 : t.handleSet) == null ? void 0 : d.call(
     t,
     a.temporal.getState()._handleSet
-  )) || a.temporal.getState()._handleSet, c = (r) => {
-    var g, b, f;
+  )) || a.temporal.getState()._handleSet, i = (c) => {
+    var f, b, h;
     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);
+    const m = ((f = t == null ? void 0 : t.partialize) == null ? void 0 : f.call(t, o())) || o(), v = (b = t == null ? void 0 : t.diff) == null ? void 0 : b.call(t, c, 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(
-      r,
+    (h = t == null ? void 0 : t.equality) != null && h.call(t, c, m) || r(
+      c,
       void 0,
       m,
       v
     );
   }, l = a.setState;
-  return a.setState = (...r) => {
+  return a.setState = (...c) => {
     var v;
     const m = ((v = t == null ? void 0 : t.partialize) == null ? void 0 : v.call(t, o())) || o();
-    l(...r), c(m);
+    l(...c), i(m);
   }, e(
     // Modify the set function to call the userlandSet function
-    (...r) => {
+    (...c) => {
       var v;
       const m = ((v = t == null ? void 0 : t.partialize) == null ? void 0 : v.call(t, o())) || o();
-      s(...r), c(m);
+      s(...c), i(m);
     },
     o,
     a
@@ -1253,24 +1253,24 @@ const ei = () => j()(
       partialize: (e) => ({ snapshot: e.snapshot })
     }
   )
-), Ut = 0, Wt = 1, le = {
-  NORMAL: [Ut, Wt],
-  ONLY_ORIGIN: [Ut],
-  ONLY_OVERLAY: [Wt]
-}, mt = [
+), Wt = 0, Yt = 1, le = {
+  NORMAL: [Wt, Yt],
+  ONLY_ORIGIN: [Wt],
+  ONLY_OVERLAY: [Yt]
+}, ft = [
   le.NORMAL,
   le.ONLY_ORIGIN,
   le.ONLY_OVERLAY
-], Se = j((e, t) => ({
+], Me = j((e, t) => ({
   mode: le.NORMAL,
   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])
-    ), o = s >= 0 ? mt[(s + 1) % mt.length] : le.NORMAL;
+    const n = t().mode, s = ft.findIndex(
+      (a) => a.length === n.length && a.every((r, i) => r === n[i])
+    ), o = s >= 0 ? ft[(s + 1) % ft.length] : le.NORMAL;
     e({ mode: o });
   }
-})), dt = j((e) => ({
+})), lt = j((e) => ({
   objects: [],
   setObjects: (t) => e({ objects: t })
 })), Ge = j((e) => ({
@@ -1284,7 +1284,7 @@ const ei = () => j()(
   setMode(t) {
     e({ mode: t });
   }
-})), ti = () => qe.getState(), Ke = j((e, t) => ({
+})), ti = () => qe.getState(), wt = j((e, t) => ({
   tool: null,
   setTool(n) {
     const s = t().tool, o = s ? [s.id, ...t().toolHistory.slice(0, 4)] : t().toolHistory;
@@ -1307,12 +1307,12 @@ const ei = () => j()(
     e({ redoStack: n });
   },
   toolHistory: []
-})), ni = () => Ke.getState(), Yt = j((e) => ({
+})), ni = () => wt.getState(), zt = j((e) => ({
   tool: null,
   setTool(t) {
     e({ tool: t });
   }
-})), zt = j((e) => ({
+})), Ft = j((e) => ({
   tool: null,
   setTool(t) {
     e({ tool: t });
@@ -1333,7 +1333,7 @@ const ei = () => j()(
   reset() {
     e({ english: !1, number: !1, special: !1 });
   }
-})), Bt = j((e, t) => ({
+})), Et = j((e, t) => ({
   isValidationMode: !1,
   setValidationMode(n) {
     e({ isValidationMode: n });
@@ -1408,17 +1408,17 @@ const ei = () => j()(
   reset() {
     e({ hiddenClassificationIds: {} });
   }
-})), mn = j((e) => ({
+})), gn = j((e) => ({
   objects: [],
   setObjects(t) {
     e({ objects: t });
   }
-})), gn = j((e) => ({
+})), vn = j((e) => ({
   selectedSegment: null,
   setSelectedSegment(t) {
     e({ selectedSegment: t });
   }
-})), vn = j((e) => ({
+})), Cn = j((e) => ({
   selectedSegment: null,
   setSelectedSegment(t) {
     e({ selectedSegment: t });
@@ -1446,9 +1446,9 @@ const ei = () => j()(
   toggleActive() {
     e({ active: !t().active });
   }
-})), Cn = xn(null);
+})), pn = xn(null);
 function po() {
-  const e = Ln(Cn);
+  const e = Ln(pn);
   if (!e)
     throw new Error("useLabelingContext must be used within a LabelingProvider");
   return e;
@@ -1460,29 +1460,29 @@ function bo({
   viewMode: s,
   onViewModeChange: o,
   availableViewModes: a = ["Image"],
-  textContent: i,
-  numberContent: c,
+  textContent: r,
+  numberContent: i,
   fileContent: l,
-  records: h,
-  activeRecordId: u,
-  onRecordSelect: r,
+  records: g,
+  activeRecordId: d,
+  onRecordSelect: c,
   classes: m,
   policies: v = [],
-  onClassSelect: g,
+  onClassSelect: f,
   onSave: b,
-  onSaveToRecord: f,
+  onSaveToRecord: h,
   onFileUpload: p,
   isSaving: N = !1,
   onNavigateLeft: Z,
   onNavigateRight: V,
-  canNavigateLeft: D = !1,
+  canNavigateLeft: A = !1,
   canNavigateRight: k = !1,
   mode: H = "labeling",
   onModeChange: w,
   validationResults: C = [],
   indicator: E,
   extensions: _ = [],
-  tools: A = ["selection", "blankRect", "polygon", "brush", "eraser"],
+  tools: D = ["selection", "blankRect", "polygon", "brush", "eraser"],
   theme: O,
   layout: y = {},
   children: B
@@ -1494,11 +1494,11 @@ function bo({
   ce(() => {
     s && z(s);
   }, [s, z]);
-  const Me = Bt((W) => W.setValidationMode);
+  const Ie = Et((W) => W.setValidationMode);
   ce(() => {
-    Me(H === "validation");
-  }, [H, Me]);
-  const Oe = ve(
+    Ie(H === "validation");
+  }, [H, Ie]);
+  const Pe = ve(
     () => ({
       image: e,
       annotations: t,
@@ -1506,33 +1506,33 @@ function bo({
       viewMode: se,
       onViewModeChange: de,
       availableViewModes: a,
-      textContent: i,
-      numberContent: c,
+      textContent: r,
+      numberContent: i,
       fileContent: l,
-      records: h,
-      activeRecordId: u,
-      onRecordSelect: r,
+      records: g,
+      activeRecordId: d,
+      onRecordSelect: c,
       classes: m,
       policies: v,
-      onClassSelect: g,
+      onClassSelect: f,
       selectedClassId: R,
       setSelectedClassId: x,
       selectedAnnotationId: P,
       setSelectedAnnotationId: T,
       onSave: b,
-      onSaveToRecord: f,
+      onSaveToRecord: h,
       onFileUpload: p,
       isSaving: N,
       onNavigateLeft: Z,
       onNavigateRight: V,
-      canNavigateLeft: D,
+      canNavigateLeft: A,
       canNavigateRight: k,
       mode: H,
       onModeChange: w,
       validationResults: C,
       indicator: E,
       extensions: _,
-      tools: A,
+      tools: D,
       theme: O,
       layout: y,
       navDirection: L,
@@ -1547,31 +1547,31 @@ function bo({
       se,
       de,
       a,
+      r,
       i,
-      c,
       l,
-      h,
-      u,
-      r,
+      g,
+      d,
+      c,
       m,
       v,
-      g,
+      f,
       R,
       P,
       b,
-      f,
+      h,
       p,
       N,
       Z,
       V,
-      D,
+      A,
       k,
       H,
       w,
       C,
       E,
       _,
-      A,
+      D,
       O,
       y,
       L,
@@ -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__ */ u(pn.Provider, { value: Pe, children: /* @__PURE__ */ u("div", { style: { width: "100%", height: "100%", overflow: "hidden", ...ue }, children: B }) });
 }
 const yo = [
   // ─── Labeling Tools ───
@@ -1786,7 +1786,7 @@ function fe({
   const o = xo(e);
   if (!o) return null;
   const a = Lo[t];
-  return /* @__PURE__ */ d(
+  return /* @__PURE__ */ u(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -1798,11 +1798,11 @@ function fe({
       clipRule: "evenodd",
       className: n,
       style: s,
-      children: o.d.map((i, c) => /* @__PURE__ */ d("path", { d: i }, c))
+      children: o.d.map((r, i) => /* @__PURE__ */ u("path", { d: r }, i))
     }
   );
 }
-const wo = "lc-controlBar-UEkkK", So = "lc-controlLeft-DLKH7", Mo = "lc-controlRight-1O3y-", Io = "lc-viewModeTabs-NTBV-", No = "lc-viewModeTab-SeV73", ko = "lc-metaInfo-a6MkE", Oo = "lc-metaItem-7MLAS", Po = "lc-metaDivider-3k0-r", To = "lc-colorPreview-UXizA", Bo = "lc-zoomControls-nRIFJ", Eo = "lc-zoomBtn-RQj5N", Ro = "lc-zoomInput-CGM7z", Do = "lc-controlBtn-5D7WV", Ao = "lc-controlBtnPrimary-BhTmF lc-controlBtn-5D7WV", Ho = "lc-controlBtnGroup-Q3Yxp", _o = "lc-saveDropdownWrapper-zrTMb", Vo = "lc-saveDropdown-d9tVH", Zo = "lc-saveDropdownItem-Uo97r", Uo = "lc-toggleBtn-OwP-- lc-controlBtn-5D7WV", U = {
+const wo = "lc-controlBar-UEkkK", So = "lc-controlLeft-DLKH7", Mo = "lc-controlRight-1O3y-", Io = "lc-viewModeTabs-NTBV-", No = "lc-viewModeTab-SeV73", ko = "lc-metaInfo-a6MkE", Oo = "lc-metaItem-7MLAS", Po = "lc-metaDivider-3k0-r", To = "lc-colorPreview-UXizA", Bo = "lc-zoomControls-nRIFJ", Eo = "lc-zoomBtn-RQj5N", Ro = "lc-zoomInput-CGM7z", Ao = "lc-controlBtn-5D7WV", Do = "lc-controlBtnPrimary-BhTmF lc-controlBtn-5D7WV", Ho = "lc-controlBtnGroup-Q3Yxp", _o = "lc-saveDropdownWrapper-zrTMb", Vo = "lc-saveDropdown-d9tVH", Zo = "lc-saveDropdownItem-Uo97r", Uo = "lc-toggleBtn-OwP-- lc-controlBtn-5D7WV", U = {
   controlBar: wo,
   controlLeft: So,
   controlRight: Mo,
@@ -1815,8 +1815,8 @@ const wo = "lc-controlBar-UEkkK", So = "lc-controlLeft-DLKH7", Mo = "lc-controlR
   zoomControls: Bo,
   zoomBtn: Eo,
   zoomInput: Ro,
-  controlBtn: Do,
-  controlBtnPrimary: Ao,
+  controlBtn: Ao,
+  controlBtnPrimary: Do,
   controlBtnGroup: Ho,
   saveDropdownWrapper: _o,
   saveDropdown: Vo,
@@ -1841,16 +1841,16 @@ function Yo({
   mode: s = "labeling",
   onModeChange: o,
   onSave: a,
-  onSaveToRecord: i,
-  isSaving: c = !1,
+  onSaveToRecord: r,
+  isSaving: i = !1,
   onNavigateLeft: l,
-  onNavigateRight: h,
-  canNavigateLeft: u = !1,
-  canNavigateRight: r = !1
+  onNavigateRight: g,
+  canNavigateLeft: d = !1,
+  canNavigateRight: c = !1
 }) {
   return /* @__PURE__ */ S("div", { className: U.controlBar, children: [
     /* @__PURE__ */ S("div", { className: U.controlLeft, children: [
-      n.length > 1 && /* @__PURE__ */ d(
+      n.length > 1 && /* @__PURE__ */ u(
         zo,
         {
           viewMode: e,
@@ -1858,41 +1858,41 @@ function Yo({
           onViewModeChange: t
         }
       ),
-      /* @__PURE__ */ d(Fo, { viewMode: e })
+      /* @__PURE__ */ u(Fo, { viewMode: e })
     ] }),
     /* @__PURE__ */ S("div", { className: U.controlRight, children: [
-      /* @__PURE__ */ d($o, {}),
-      (l || h) && /* @__PURE__ */ S("div", { className: U.controlBtnGroup, children: [
-        /* @__PURE__ */ d(
+      /* @__PURE__ */ u($o, {}),
+      (l || g) && /* @__PURE__ */ S("div", { className: U.controlBtnGroup, children: [
+        /* @__PURE__ */ u(
           "button",
           {
             className: U.controlBtn,
-            disabled: !u,
+            disabled: !d,
             onClick: l,
             title: "Previous",
-            children: /* @__PURE__ */ d(fe, { iconType: "icon-left", size: "xs" })
+            children: /* @__PURE__ */ u(fe, { iconType: "icon-left", size: "xs" })
           }
         ),
-        /* @__PURE__ */ d(
+        /* @__PURE__ */ u(
           "button",
           {
             className: U.controlBtn,
-            disabled: !r,
-            onClick: h,
+            disabled: !c,
+            onClick: g,
             title: "Next",
-            children: /* @__PURE__ */ d(fe, { iconType: "icon-right", size: "xs" })
+            children: /* @__PURE__ */ u(fe, { iconType: "icon-right", size: "xs" })
           }
         )
       ] }),
-      a && /* @__PURE__ */ d(
+      a && /* @__PURE__ */ u(
         Go,
         {
           onSave: a,
-          onSaveToRecord: i,
-          isSaving: c
+          onSaveToRecord: r,
+          isSaving: i
         }
       ),
-      o && /* @__PURE__ */ d(
+      o && /* @__PURE__ */ u(
         "button",
         {
           className: U.toggleBtn,
@@ -1901,7 +1901,7 @@ function Yo({
           children: "Valid"
         }
       ),
-      /* @__PURE__ */ d(qo, {})
+      /* @__PURE__ */ u(qo, {})
     ] })
   ] });
 }
@@ -1910,7 +1910,7 @@ function zo({
   availableViewModes: t,
   onViewModeChange: n
 }) {
-  return /* @__PURE__ */ d("div", { className: U.viewModeTabs, children: t.map((s) => /* @__PURE__ */ d(
+  return /* @__PURE__ */ u("div", { className: U.viewModeTabs, children: t.map((s) => /* @__PURE__ */ u(
     "button",
     {
       className: U.viewModeTab,
@@ -1922,18 +1922,18 @@ 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 = we((l) => l.tool), n = gn((l) => l.objects), s = vn((l) => l.selectedSegment), o = Cn((l) => l.selectedSegment), a = We((l) => l.colorCode), r = rt((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.metaDivider }),
-    e === "Image" && /* @__PURE__ */ d(Xo, { objects: n }),
+    /* @__PURE__ */ u("div", { className: U.metaItem, children: /* @__PURE__ */ u("em", { children: i }) }),
+    /* @__PURE__ */ u("div", { className: U.metaDivider }),
+    e === "Image" && /* @__PURE__ */ u(Xo, { objects: n }),
     e === "Text" && s && /* @__PURE__ */ S("div", { className: U.metaItem, children: [
       "Characters: ",
-      /* @__PURE__ */ d("em", { children: s.end - s.start })
+      /* @__PURE__ */ u("em", { children: s.end - s.start })
     ] }),
     e === "Number" && o && /* @__PURE__ */ S("div", { className: U.metaItem, children: [
       "Points: ",
-      /* @__PURE__ */ d("em", { children: o.end - o.start + 1 }),
+      /* @__PURE__ */ u("em", { children: o.end - o.start + 1 }),
       " ",
       "Index: ",
       /* @__PURE__ */ S("em", { children: [
@@ -1942,18 +1942,18 @@ function Fo({ viewMode: e }) {
         o.end + 1
       ] })
     ] }),
-    /* @__PURE__ */ d("div", { className: U.metaDivider }),
+    /* @__PURE__ */ u("div", { className: U.metaDivider }),
     /* @__PURE__ */ S("div", { className: U.metaItem, children: [
-      /* @__PURE__ */ d(
+      /* @__PURE__ */ u(
         "span",
         {
           className: U.colorPreview,
           style: { background: a }
         }
       ),
-      /* @__PURE__ */ d("em", { children: a }),
+      /* @__PURE__ */ u("em", { children: a }),
       /* @__PURE__ */ S("span", { children: [
-        Math.round(i * 100),
+        Math.round(r * 100),
         "%"
       ] })
     ] })
@@ -1963,24 +1963,24 @@ function Xo({ objects: e }) {
   if (!e.length)
     return /* @__PURE__ */ S("div", { className: U.metaItem, children: [
       "X: ",
-      /* @__PURE__ */ d("em", { children: "—" }),
+      /* @__PURE__ */ u("em", { children: "—" }),
       " Y: ",
-      /* @__PURE__ */ d("em", { children: "—" }),
+      /* @__PURE__ */ u("em", { children: "—" }),
       " W: ",
-      /* @__PURE__ */ d("em", { children: "—" }),
+      /* @__PURE__ */ u("em", { children: "—" }),
       " H: ",
-      /* @__PURE__ */ d("em", { children: "—" })
+      /* @__PURE__ */ u("em", { children: "—" })
     ] });
   const t = e[0], n = Math.round(t.left ?? 0), s = Math.round(t.top ?? 0), o = Math.round((t.width ?? 0) * (t.scaleX ?? 1)), a = Math.round((t.height ?? 0) * (t.scaleY ?? 1));
   return /* @__PURE__ */ S("div", { className: U.metaItem, children: [
     "X: ",
-    /* @__PURE__ */ d("em", { children: n }),
+    /* @__PURE__ */ u("em", { children: n }),
     " Y: ",
-    /* @__PURE__ */ d("em", { children: s }),
+    /* @__PURE__ */ u("em", { children: s }),
     " W: ",
-    /* @__PURE__ */ d("em", { children: o }),
+    /* @__PURE__ */ u("em", { children: o }),
     " H: ",
-    /* @__PURE__ */ d("em", { children: a })
+    /* @__PURE__ */ u("em", { children: a })
   ] });
 }
 function $o() {
@@ -1989,48 +1989,48 @@ function $o() {
     n(`${s}%`);
   }, [s]);
   const o = $(
-    (i) => {
-      const c = Math.max(0.1, Math.min(5, i));
+    (r) => {
+      const i = Math.max(0.1, Math.min(5, r));
       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 = (r) => {
+    if (r.key === "Enter") {
+      const i = parseInt(t, 10);
+      isNaN(i) || o(i / 100), r.target.blur();
     }
   };
   return /* @__PURE__ */ S("div", { className: U.zoomControls, children: [
-    /* @__PURE__ */ d(
+    /* @__PURE__ */ u(
       "button",
       {
         className: U.zoomBtn,
         onClick: () => o(e.level / 1.1),
         title: "Zoom Out",
-        children: /* @__PURE__ */ d(fe, { iconType: "icon-minus", size: "xs" })
+        children: /* @__PURE__ */ u(fe, { iconType: "icon-minus", size: "xs" })
       }
     ),
-    /* @__PURE__ */ d(
+    /* @__PURE__ */ u(
       "input",
       {
         className: U.zoomInput,
         value: t,
-        onChange: (i) => n(i.target.value),
+        onChange: (r) => n(r.target.value),
         onKeyDown: a,
         onBlur: () => n(`${s}%`)
       }
     ),
-    /* @__PURE__ */ d(
+    /* @__PURE__ */ u(
       "button",
       {
         className: U.zoomBtn,
         onClick: () => o(e.level * 1.1),
         title: "Zoom In",
-        children: /* @__PURE__ */ d(fe, { iconType: "icon-plus", size: "xs" })
+        children: /* @__PURE__ */ u(fe, { iconType: "icon-plus", size: "xs" })
       }
     )
   ] });
@@ -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 r = (i) => {
+      a.current && !a.current.contains(i.target) && o(!1);
     };
-    return window.addEventListener("mousedown", i), () => window.removeEventListener("mousedown", i);
+    return window.addEventListener("mousedown", r), () => window.removeEventListener("mousedown", r);
   }, [s]), t ? /* @__PURE__ */ S("div", { className: U.saveDropdownWrapper, ref: a, children: [
     /* @__PURE__ */ S("div", { className: U.controlBtnGroup, children: [
       /* @__PURE__ */ S(
@@ -2056,23 +2056,23 @@ function Go({
           disabled: n,
           onClick: e,
           children: [
-            /* @__PURE__ */ d(fe, { iconType: "icon-save", size: "xs" }),
+            /* @__PURE__ */ u(fe, { iconType: "icon-save", size: "xs" }),
             n ? "Saving…" : "Save"
           ]
         }
       ),
-      /* @__PURE__ */ d(
+      /* @__PURE__ */ u(
         "button",
         {
           className: U.controlBtnPrimary,
-          onClick: () => o((i) => !i),
+          onClick: () => o((r) => !r),
           disabled: n,
-          children: /* @__PURE__ */ d(fe, { iconType: "icon-down", size: "xxs" })
+          children: /* @__PURE__ */ u(fe, { iconType: "icon-down", size: "xxs" })
         }
       )
     ] }),
     s && /* @__PURE__ */ S("div", { className: U.saveDropdown, children: [
-      /* @__PURE__ */ d(
+      /* @__PURE__ */ u(
         "button",
         {
           className: U.saveDropdownItem,
@@ -2082,7 +2082,7 @@ function Go({
           children: "Save"
         }
       ),
-      /* @__PURE__ */ d(
+      /* @__PURE__ */ u(
         "button",
         {
           className: U.saveDropdownItem,
@@ -2100,7 +2100,7 @@ function Go({
       disabled: n,
       onClick: e,
       children: [
-        /* @__PURE__ */ d(fe, { iconType: "icon-save", size: "xs" }),
+        /* @__PURE__ */ u(fe, { iconType: "icon-save", size: "xs" }),
         n ? "Saving…" : "Save"
       ]
     }
@@ -2108,57 +2108,57 @@ function Go({
 }
 function qo() {
   const e = St((n) => n.isOpen), t = St((n) => n.toggle);
-  return /* @__PURE__ */ d(
+  return /* @__PURE__ */ u(
     "button",
     {
       className: U.toggleBtn,
       "data-active": e || void 0,
       onClick: t,
       title: "Issues",
-      children: /* @__PURE__ */ d(fe, { iconType: "icon-issue", size: "sm" })
+      children: /* @__PURE__ */ u(fe, { iconType: "icon-issue", size: "sm" })
     }
   );
 }
-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 g = async () => {
+      let d;
       switch (e.id) {
         case "selection":
-          h = await e.init();
+          d = await e.init();
           break;
         case "brush":
-          h = await e.init({
+          d = await e.init({
             brush: i.brush,
             colorCode: i.colorCode
           });
           break;
         case "bounded-box":
         case "filled-box":
-          h = await e.init({
+          d = await e.init({
             colorCode: i.colorCode
           });
           break;
         case "pen":
-          h = await e.init({
+          d = await e.init({
             colorCode: i.colorCode
           });
           break;
         case "eraser":
-          h = await e.init({
+          d = await e.init({
             brush: i.brush
           });
           break;
         case "magic-brush":
-          h = await e.init({
+          d = 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({
+          d = 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({
+          d = await e.init({
             callback: i.segAnythingCallback
           });
           break;
         default:
-          h = await e.init(i);
+          d = await e.init(i);
           break;
       }
-      !c && typeof h == "function" && (n.current = h);
+      !l && typeof d == "function" && (s.current = d);
     };
-    return s.current = e.id, l(), () => {
-      c = !0, n.current && (n.current(), n.current = null);
+    return o.current = e.id, g(), () => {
+      l = !0, s.current && (s.current(), s.current = null);
     };
-  }, [e]), { activeToolId: s.current };
+  }, [e, n]), { activeToolId: o.current };
 }
 const J = {
   common: {
@@ -2240,39 +2240,39 @@ function Qo({
   onRedo: o,
   disabled: a = !1
 }) {
-  const i = Se((h) => h.cycleMode), c = Co((h) => h.toggleActive), l = Ge();
+  const r = Me((g) => g.cycleMode), i = Co((g) => g.toggleActive), l = Ge();
   ce(() => {
     if (a) return;
-    const h = (u) => {
-      if (jo(u)) return;
-      const r = Jo(u);
-      if (u.ctrlKey || u.metaKey) {
-        if (r === "z" && !u.shiftKey) {
-          u.preventDefault(), s == null || s();
+    const g = (d) => {
+      if (jo(d)) return;
+      const c = Jo(d);
+      if (d.ctrlKey || d.metaKey) {
+        if (c === "z" && !d.shiftKey) {
+          d.preventDefault(), s == null || s();
           return;
         }
-        if (r === "z" && u.shiftKey || r === "y") {
-          u.preventDefault(), o == null || o();
+        if (c === "z" && d.shiftKey || c === "y") {
+          d.preventDefault(), o == null || o();
           return;
         }
-        if (r === "=" || r === "+") {
-          u.preventDefault(), l.setZoom({
+        if (c === "=" || c === "+") {
+          d.preventDefault(), l.setZoom({
             level: Math.min(l.level * 1.1, 5),
             width: l.width,
             height: l.height
           });
           return;
         }
-        if (r === "-") {
-          u.preventDefault(), l.setZoom({
+        if (c === "-") {
+          d.preventDefault(), l.setZoom({
             level: Math.max(l.level / 1.1, 0.1),
             width: l.width,
             height: l.height
           });
           return;
         }
-        if (r === "0") {
-          u.preventDefault(), l.setZoom({
+        if (c === "0") {
+          d.preventDefault(), l.setZoom({
             level: 1,
             width: l.width,
             height: l.height
@@ -2282,21 +2282,21 @@ function Qo({
         return;
       }
       const { common: m } = J;
-      if (r === m.selection) {
+      if (c === m.selection) {
         n("selection");
         return;
       }
-      if (r === m.layerToggle) {
-        i();
+      if (c === m.layerToggle) {
+        r();
         return;
       }
-      if (r === m.navigationToggle) {
-        c();
+      if (c === m.navigationToggle) {
+        i();
         return;
       }
       if (!t && e === "Image") {
         const { image: v } = J;
-        switch (r) {
+        switch (c) {
           case v.boundingBox:
             n("blankRect");
             return;
@@ -2318,8 +2318,8 @@ function Qo({
         }
       }
     };
-    return document.addEventListener("keydown", h), () => {
-      document.removeEventListener("keydown", h);
+    return document.addEventListener("keydown", g), () => {
+      document.removeEventListener("keydown", g);
     };
   }, [
     e,
@@ -2328,46 +2328,46 @@ function Qo({
     s,
     o,
     a,
+    r,
     i,
-    c,
     l
   ]);
 }
 const es = {
-  selection: Tt,
-  brush: Qt,
-  blankRect: ln,
+  selection: Bt,
+  brush: en,
+  blankRect: dn,
   filledRect: to,
-  polygon: sn,
-  eraser: en,
-  magicbrush: yt,
-  superpixel: dn,
+  polygon: an,
+  eraser: tn,
+  magicbrush: bt,
+  superpixel: un,
   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 = $(
-    (r) => {
-      const m = es[r];
+  const e = we((c) => c.tool), t = we((c) => c.setTool), n = We((c) => c.colorCode), s = We((c) => c.setColorCode), o = rt((c) => c.opacity), a = rt((c) => c.setOpacity), r = Lt((c) => c.brush), i = Lt((c) => c.setBrush), l = $(
+    (c) => {
+      const m = es[c];
       m && t(m());
     },
     [t]
-  ), h = $(() => {
+  ), g = $(() => {
     t(null);
-  }, [t]), u = (e == null ? void 0 : e.id) ?? null;
+  }, [t]), d = (e == null ? void 0 : e.id) ?? null;
   return ve(
     () => ({
-      activeToolId: u,
+      activeToolId: d,
       currentTool: e,
       setTool: l,
-      clearTool: h,
+      clearTool: g,
       colorCode: n,
       setColorCode: s,
       opacity: o,
       setOpacity: a,
-      brush: i,
-      setBrush: c
+      brush: r,
+      setBrush: i
     }),
-    [u, e, l, h, n, s, o, a, i, c]
+    [d, e, l, g, n, s, o, a, r, 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 = {
@@ -2378,7 +2378,7 @@ const ns = "lc-workspace-8csim", os = "lc-mainSection-uZv5Q", ss = "lc-canvasAre
   imagePanel: is,
   sidePanel: cs
 };
-function Ft({
+function Xt({
   image: e,
   annotations: t,
   onChange: n,
@@ -2386,23 +2386,23 @@ 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 r = Ce(null), i = Ce(null), [l, g] = re(!1), [d, c] = re({ width: 0, height: 0 }), m = Ce(t);
   m.current = t;
   const v = Ce(n);
   v.current = n;
-  const g = Ge(), b = g.setZoom, f = dt((C) => C.setObjects), p = Ee((C) => C.tool), N = We((C) => C.colorCode), Z = wt((C) => C.brush), V = qe((C) => C.mode), D = Bt((C) => C.isValidationMode), k = mn((C) => C.setObjects), { setTool: H } = ts(), w = typeof e == "string" ? e : e.url;
+  const f = Ge(), b = f.setZoom, h = lt((C) => C.setObjects), p = we((C) => C.tool), N = We((C) => C.colorCode), Z = Lt((C) => C.brush), V = qe((C) => C.mode), A = Et((C) => C.isValidationMode), k = gn((C) => C.setObjects), { setTool: H } = ts(), w = typeof e == "string" ? e : e.url;
   return Ko(p, {
     colorCode: N,
     brush: Z,
     imageUrl: w
-  }), Qo({
+  }, l), Qo({
     viewMode: V,
-    isValidationMode: D,
+    isValidationMode: A,
     setTool: H,
     disabled: s
   }), ce(() => {
     if (s) return;
-    let C = !1, E = !1, _ = 0, A = 0;
+    let C = !1, E = !1, _ = 0, D = 0;
     const O = (L) => {
       if (L.code === "Space" && !L.repeat) {
         const M = L.target;
@@ -2419,7 +2419,7 @@ function Ft({
       }
     }, B = (L) => {
       if (!E) return;
-      C = !0, _ = L.clientX, A = L.clientY;
+      C = !0, _ = L.clientX, D = L.clientY;
       const M = Q();
       M && (M.defaultCursor = "grabbing", M.hoverCursor = "grabbing");
     }, R = (L) => {
@@ -2428,8 +2428,8 @@ function Ft({
       if (!M) return;
       const Y = M.viewportTransform;
       if (!Y) return;
-      const G = L.clientX - _, z = L.clientY - A;
-      Y[4] += G, Y[5] += z, M.setViewportTransform(Y), M.requestRenderAll(), _ = L.clientX, A = L.clientY;
+      const G = L.clientX - _, z = L.clientY - D;
+      Y[4] += G, Y[5] += z, M.setViewportTransform(Y), M.requestRenderAll(), _ = L.clientX, D = L.clientY;
     }, x = () => {
       if (!C) return;
       C = !1;
@@ -2443,35 +2443,35 @@ function Ft({
       const Y = L.deltaY, G = M.getZoom(), z = Y > 0 ? Math.max(G / 1.05, 0.1) : Math.min(G * 1.05, 5), q = M.getScenePoint(L);
       M.zoomToPoint(q, z), M.requestRenderAll(), b({
         level: z,
-        width: g.width,
-        height: g.height
+        width: f.width,
+        height: f.height
       });
     };
     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);
     };
-  }, [s, b, g.width, g.height]), ce(() => {
+  }, [s, b, f.width, f.height]), ce(() => {
     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 || !r.current) return;
+      const _ = await import("fabric"), D = new _.Canvas(r.current, {
         selection: !s,
         preserveObjectStacking: !0
       });
-      Rt(A), h(!0);
+      At(D), g(!0);
       const O = await _.FabricImage.fromURL(w, { crossOrigin: "anonymous" });
       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);
-      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({ width: y, height: B });
+      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);
+      D.setDimensions({ width: L, height: M }), D.setZoom(T), O.set({ selectable: !1, evented: !1 }), D.backgroundImage = O, D.renderAll(), b({ level: T, width: L, height: M });
     })(), () => {
       C = !0;
       const _ = Q();
-      _ && (_.dispose(), Rt(null));
+      _ && (_.dispose(), At(null));
     };
   }, [w]), ce(() => {
     if (!l) return;
@@ -2481,26 +2481,26 @@ function Ft({
       const _ = C.getObjects();
       for (const O of _)
         C.remove(O);
-      const A = await import("fabric");
+      const D = await import("fabric");
       for (const O of t) {
-        const y = hn(O, u.width, u.height), B = y.type;
+        const y = fn(O, d.width, d.height), B = y.type;
         let R = null;
-        B === "rect" ? R = new A.Rect(y) : B === "image" && typeof y.src == "string" ? (R = await A.FabricImage.fromURL(y.src, { crossOrigin: "anonymous" }), R.set(y)) : B === "path" && y.path ? R = new A.Path(y.path, y) : B === "polygon" && y.points && (R = new A.Polygon(y.points, y)), R && (s && R.set({ selectable: !1, evented: !1 }), C.add(R));
+        B === "rect" ? R = new D.Rect(y) : B === "image" && typeof y.src == "string" ? (R = await D.FabricImage.fromURL(y.src, { crossOrigin: "anonymous" }), R.set(y)) : B === "path" && y.path ? R = new D.Path(y.path, y) : B === "polygon" && y.points && (R = new D.Polygon(y.points, y)), R && (s && R.set({ selectable: !1, evented: !1 }), C.add(R));
       }
-      C.renderAll(), f(C.getObjects());
+      C.renderAll(), h(C.getObjects());
     })();
-  }, [t, l, u.width, u.height, s, f]), ce(() => {
+  }, [t, l, d.width, d.height, s, h]), ce(() => {
     if (!l) return;
     const C = Q();
     if (!C) return;
     const E = async () => {
       var y;
-      const A = we(), O = await un(
-        A,
-        u.width,
-        u.height
+      const D = Se(), O = await hn(
+        D,
+        d.width,
+        d.height
       );
-      f(A), (y = v.current) == null || y.call(v, {
+      h(D), (y = v.current) == null || y.call(v, {
         annotations: O,
         action: {
           type: "batch",
@@ -2510,19 +2510,19 @@ function Ft({
         }
       });
     }, _ = ["object:added", "object:removed", "object:modified"];
-    for (const A of _)
-      C.on(A, E);
+    for (const D of _)
+      C.on(D, E);
     return () => {
-      for (const A of _)
-        C.off(A, E);
+      for (const D of _)
+        C.off(D, E);
     };
-  }, [l, u.width, u.height, f]), ce(() => {
+  }, [l, d.width, d.height, h]), ce(() => {
     if (!l) return;
     const C = Q();
     if (!C) return;
     const E = () => {
-      const A = C.getActiveObjects();
-      k(A);
+      const D = C.getActiveObjects();
+      k(D);
     }, _ = () => {
       k([]);
     };
@@ -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__ */ u("div", { ref: i, className: Ze.canvasSection, children: /* @__PURE__ */ u("div", { className: Ze.imagePanel, children: /* @__PURE__ */ u("canvas", { ref: r }) }) });
 }
 const rs = "lc-textSection-pEESB", ls = "lc-textContent-JGJR8", ds = "lc-segment-RaLhM", us = "lc-emptyState-G-skG", Ye = {
   textSection: rs,
@@ -2546,46 +2546,46 @@ 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 = vn((c) => c.setSelectedSegment), a = We((c) => c.colorCode), r = rt((c) => c.opacity), i = $(() => {
     if (t) return;
-    const h = window.getSelection();
-    if (!h || h.isCollapsed || !s.current) return;
-    const u = h.getRangeAt(0), r = s.current;
-    if (!r.contains(u.startContainer) || !r.contains(u.endContainer)) return;
-    const m = document.createRange();
-    m.selectNodeContents(r), m.setEnd(u.startContainer, u.startOffset);
-    const v = m.toString().length, g = u.toString(), b = v + g.length;
-    b > v && o({
+    const c = window.getSelection();
+    if (!c || c.isCollapsed || !s.current) return;
+    const m = c.getRangeAt(0), v = s.current;
+    if (!v.contains(m.startContainer) || !v.contains(m.endContainer)) return;
+    const f = document.createRange();
+    f.selectNodeContents(v), f.setEnd(m.startContainer, m.startOffset);
+    const b = f.toString().length, h = m.toString(), p = b + h.length;
+    p > b && o({
       key: `${Date.now()}`,
       labelId: null,
       tempId: `temp-${Date.now()}`,
-      start: v,
-      end: b,
-      text: g,
+      start: b,
+      end: p,
+      text: h,
       color: a,
-      opacity: i
-    }), h.removeAllRanges();
-  }, [t, o, a, i]);
+      opacity: r
+    }), c.removeAllRanges();
+  }, [t, o, a, r]);
   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);
-  return /* @__PURE__ */ d("div", { className: Ye.textSection, children: /* @__PURE__ */ d(
+    return /* @__PURE__ */ u("div", { className: Ye.textSection, children: /* @__PURE__ */ u("div", { className: Ye.emptyState, children: "No text content" }) });
+  const l = e.text ?? e.value ?? "", g = n.length > 0 ? n : e.segments ?? [], d = fs(l, g);
+  return /* @__PURE__ */ u("div", { className: Ye.textSection, children: /* @__PURE__ */ u(
     "div",
     {
       ref: s,
       className: Ye.textContent,
-      onMouseUp: c,
-      children: l
+      onMouseUp: i,
+      children: d
     }
   ) });
 }
 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, r) => a.start - r.start), s = [];
   let o = 0;
   for (const a of n)
     a.start > o && s.push(e.slice(o, a.start)), s.push(
-      /* @__PURE__ */ d(
+      /* @__PURE__ */ u(
         "span",
         {
           className: Ye.segment,
@@ -2598,9 +2598,9 @@ function fs(e, t) {
         a.id
       )
     ), o = a.end;
-  return o < e.length && s.push(e.slice(o)), /* @__PURE__ */ d(Mt, { children: s });
+  return o < e.length && s.push(e.slice(o)), /* @__PURE__ */ u(It, { children: s });
 }
-const ms = "lc-numberSection-7xT86", gs = "lc-chartArea-hZF-l", vs = "lc-chartPlaceholder-t8mNs", Cs = "lc-dataTable-RjNsV", ps = "lc-emptyState-lK5lO", Ae = {
+const ms = "lc-numberSection-7xT86", gs = "lc-chartArea-hZF-l", vs = "lc-chartPlaceholder-t8mNs", Cs = "lc-dataTable-RjNsV", ps = "lc-emptyState-lK5lO", He = {
   numberSection: ms,
   chartArea: gs,
   chartPlaceholder: vs,
@@ -2612,49 +2612,53 @@ function bs({
   readOnly: t = !1,
   segments: n = []
 }) {
-  const s = vn((h) => h.setSelectedSegment), o = We((h) => h.colorCode), a = $(
-    (h) => {
+  const s = Cn((d) => d.setSelectedSegment), o = We((d) => d.colorCode), a = $(
+    (d) => {
       t || s({
         key: `${Date.now()}`,
         labelId: null,
         tempId: `temp-${Date.now()}`,
-        start: h,
-        end: h,
+        start: d,
+        end: d,
         color: o
       });
     },
     [t, s, o]
   );
   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;
-  return /* @__PURE__ */ S("div", { className: Ae.numberSection, children: [
-    /* @__PURE__ */ d("div", { className: Ae.chartArea, children: e.canRender ? /* @__PURE__ */ S("div", { className: Ae.chartPlaceholder, children: [
+    return /* @__PURE__ */ u("div", { className: He.numberSection, children: /* @__PURE__ */ u("div", { className: He.emptyState, children: "No number content" }) });
+  const { source: r } = e, i = n.length > 0 ? n : e.segments ?? [], l = r.columns.map(
+    (d, c) => typeof d == "string" ? { key: String(c), label: d } : d
+  ), g = Array.isArray(r.rows[0]);
+  return /* @__PURE__ */ S("div", { className: He.numberSection, children: [
+    e.canRender && /* @__PURE__ */ u("div", { className: He.chartArea, children: /* @__PURE__ */ S("div", { className: He.chartPlaceholder, children: [
       "Chart (",
-      e.mode,
+      e.mode ?? "line",
       ") — rendered by host app"
-    ] }) : /* @__PURE__ */ d("div", { className: Ae.chartPlaceholder, children: "Cannot render chart for this data" }) }),
-    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))
+    ] }) }),
+    r.rows.length > 0 && /* @__PURE__ */ u("div", { className: He.dataTable, children: /* @__PURE__ */ S("table", { children: [
+      /* @__PURE__ */ u("thead", { children: /* @__PURE__ */ S("tr", { children: [
+        /* @__PURE__ */ u("th", { children: "#" }),
+        l.map((d) => /* @__PURE__ */ u("th", { children: d.label }, d.key))
       ] }) }),
-      /* @__PURE__ */ d("tbody", { children: l.map((h, u) => {
-        const r = n.some(
-          (m) => u >= m.start && u <= m.end
+      /* @__PURE__ */ u("tbody", { children: r.rows.map((d, c) => {
+        const m = i.some(
+          (v) => c >= v.start && c <= v.end
         );
         return /* @__PURE__ */ S(
           "tr",
           {
-            "data-selected": r || void 0,
-            onClick: () => a(u),
+            "data-selected": m || void 0,
+            onClick: () => a(c),
             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))
+              /* @__PURE__ */ u("td", { children: c + 1 }),
+              l.map((v, f) => /* @__PURE__ */ u("td", { children: String(
+                g ? d[f] ?? "" : d[v.key] ?? ""
+              ) }, v.key))
             ]
           },
-          u
+          c
         );
       }) })
     ] }) })
@@ -2676,30 +2680,30 @@ function ks({
   onFileUpload: n
 }) {
   const s = Ce(null), o = $(() => {
-    var i;
-    (i = s.current) == null || i.click();
+    var r;
+    (r = s.current) == null || r.click();
   }, []), a = $(
-    (i) => {
+    (r) => {
       var l;
-      const c = (l = i.target.files) == null ? void 0 : l[0];
-      c && (n == null || n(c)), i.target.value = "";
+      const i = (l = r.target.files) == null ? void 0 : l[0];
+      i && (n == null || n(i)), r.target.value = "";
     },
     [n]
   );
   return e != null && e.fileName ? /* @__PURE__ */ S("div", { className: xe.fileSection, children: [
-    /* @__PURE__ */ d("div", { className: xe.fileIcon, children: /* @__PURE__ */ S("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: [
-      /* @__PURE__ */ d("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z" }),
-      /* @__PURE__ */ d("polyline", { points: "14 2 14 8 20 8", fill: "none", stroke: "currentColor", strokeWidth: "1.5" })
+    /* @__PURE__ */ u("div", { className: xe.fileIcon, children: /* @__PURE__ */ S("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: [
+      /* @__PURE__ */ u("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z" }),
+      /* @__PURE__ */ u("polyline", { points: "14 2 14 8 20 8", fill: "none", stroke: "currentColor", strokeWidth: "1.5" })
     ] }) }),
-    /* @__PURE__ */ d("div", { className: xe.fileName, children: e.fileName }),
-    e.fileType && /* @__PURE__ */ d("div", { className: xe.fileType, children: e.fileType })
-  ] }) : t ? /* @__PURE__ */ d("div", { className: xe.fileSection, children: /* @__PURE__ */ d("div", { className: xe.emptyState, children: "No file content" }) }) : /* @__PURE__ */ S("div", { className: xe.fileSection, children: [
+    /* @__PURE__ */ u("div", { className: xe.fileName, children: e.fileName }),
+    e.fileType && /* @__PURE__ */ u("div", { className: xe.fileType, children: e.fileType })
+  ] }) : t ? /* @__PURE__ */ u("div", { className: xe.fileSection, children: /* @__PURE__ */ u("div", { className: xe.emptyState, children: "No file content" }) }) : /* @__PURE__ */ S("div", { className: xe.fileSection, children: [
     /* @__PURE__ */ S("div", { className: xe.uploadArea, onClick: o, children: [
-      /* @__PURE__ */ d("div", { className: xe.fileIcon, children: /* @__PURE__ */ d("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ d("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }),
-      /* @__PURE__ */ d("div", { className: xe.uploadText, children: "Click to upload file" }),
-      /* @__PURE__ */ d("div", { className: xe.uploadHint, children: "or drag and drop" })
+      /* @__PURE__ */ u("div", { className: xe.fileIcon, children: /* @__PURE__ */ u("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ u("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }),
+      /* @__PURE__ */ u("div", { className: xe.uploadText, children: "Click to upload file" }),
+      /* @__PURE__ */ u("div", { className: xe.uploadHint, children: "or drag and drop" })
     ] }),
-    /* @__PURE__ */ d(
+    /* @__PURE__ */ u(
       "input",
       {
         ref: s,
@@ -2717,15 +2721,15 @@ function Os({
   onChange: s,
   readOnly: o = !1,
   textContent: a,
-  numberContent: i,
-  fileContent: c,
+  numberContent: r,
+  fileContent: i,
   onFileUpload: l,
-  children: h
+  children: g
 }) {
   switch (e) {
     case "Image":
-      return /* @__PURE__ */ d(
-        Ft,
+      return /* @__PURE__ */ u(
+        Xt,
         {
           image: t,
           annotations: n,
@@ -2734,7 +2738,7 @@ function Os({
         }
       );
     case "Text":
-      return /* @__PURE__ */ d(
+      return /* @__PURE__ */ u(
         hs,
         {
           content: a,
@@ -2742,27 +2746,27 @@ function Os({
         }
       );
     case "Number":
-      return /* @__PURE__ */ d(
+      return /* @__PURE__ */ u(
         bs,
         {
-          content: i,
+          content: r,
           readOnly: o
         }
       );
     case "File":
-      return /* @__PURE__ */ d(
+      return /* @__PURE__ */ u(
         ks,
         {
-          content: c,
+          content: i,
           readOnly: o,
           onFileUpload: l
         }
       );
     case "Record":
-      return /* @__PURE__ */ d(Mt, { children: h });
+      return /* @__PURE__ */ u(It, { children: g });
     default:
-      return /* @__PURE__ */ d(
-        Ft,
+      return /* @__PURE__ */ u(
+        Xt,
         {
           image: t,
           annotations: n,
@@ -2772,14 +2776,14 @@ function Os({
       );
   }
 }
-const Ps = "lc-navigationWrapper-3oNp8", Ts = "lc-title-ozM0E", Bs = "lc-titleUtil-V4RV4", Es = "lc-directionButton-GOUn-", Rs = "lc-content-fBa8N", Ds = "lc-recordList-kWbe2", As = "lc-recordItem-qutOX", Hs = "lc-recordThumbnail-s2bPH", _s = "lc-recordTitle-BtPW7", Vs = "lc-recordStatus--HJxg", Zs = "lc-childrenList-i9Ow3", Us = "lc-searchInput-RI4GW", Ws = "lc-empty-olthD", he = {
+const Ps = "lc-navigationWrapper-3oNp8", Ts = "lc-title-ozM0E", Bs = "lc-titleUtil-V4RV4", Es = "lc-directionButton-GOUn-", Rs = "lc-content-fBa8N", As = "lc-recordList-kWbe2", Ds = "lc-recordItem-qutOX", Hs = "lc-recordThumbnail-s2bPH", _s = "lc-recordTitle-BtPW7", Vs = "lc-recordStatus--HJxg", Zs = "lc-childrenList-i9Ow3", Us = "lc-searchInput-RI4GW", Ws = "lc-empty-olthD", he = {
   navigationWrapper: Ps,
   title: Ts,
   titleUtil: Bs,
   directionButton: Es,
   content: Rs,
-  recordList: Ds,
-  recordItem: As,
+  recordList: As,
+  recordItem: Ds,
   recordThumbnail: Hs,
   recordTitle: _s,
   recordStatus: Vs,
@@ -2787,7 +2791,7 @@ const Ps = "lc-navigationWrapper-3oNp8", Ts = "lc-title-ozM0E", Bs = "lc-titleUt
   searchInput: Us,
   empty: Ws
 };
-function Xt({
+function $t({
   records: e,
   activeRecordId: t,
   onRecordSelect: n,
@@ -2795,92 +2799,92 @@ function Xt({
   onDirectionChange: o,
   hidden: a = !1
 }) {
-  const [i, c] = re(""), l = ve(() => {
-    if (!i.trim()) return e;
-    const r = i.trim().toLowerCase();
+  const [r, i] = re(""), l = ve(() => {
+    if (!r.trim()) return e;
+    const c = r.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)));
+        return m.title.toLowerCase().includes(c) || ((v = m.children) == null ? void 0 : v.some((f) => f.title.toLowerCase().includes(c)));
       }
     );
-  }, [e, i]), h = $((r) => {
-    c(r.target.value);
-  }, []), u = s === "vertical" ? "bottom" : "left";
+  }, [e, r]), g = $((c) => {
+    i(c.target.value);
+  }, []), d = s === "vertical" ? "bottom" : "left";
   return /* @__PURE__ */ S(
     "div",
     {
       className: he.navigationWrapper,
-      "data-position": u,
+      "data-position": d,
       "data-hidden": a || void 0,
       children: [
         /* @__PURE__ */ S("div", { className: he.title, children: [
-          /* @__PURE__ */ d("p", { children: "Navigation" }),
+          /* @__PURE__ */ u("p", { children: "Navigation" }),
           o && /* @__PURE__ */ S("div", { className: he.titleUtil, children: [
-            /* @__PURE__ */ d(
+            /* @__PURE__ */ u(
               "button",
               {
                 className: he.directionButton,
                 "data-active": s === "horizontal" || void 0,
                 onClick: () => o("horizontal"),
                 title: "Side panel",
-                children: /* @__PURE__ */ d(Ys, {})
+                children: /* @__PURE__ */ u(Ys, {})
               }
             ),
-            /* @__PURE__ */ d(
+            /* @__PURE__ */ u(
               "button",
               {
                 className: he.directionButton,
                 "data-active": s === "vertical" || void 0,
                 onClick: () => o("vertical"),
                 title: "Bottom panel",
-                children: /* @__PURE__ */ d(zs, {})
+                children: /* @__PURE__ */ u(zs, {})
               }
             )
           ] })
         ] }),
         /* @__PURE__ */ S("div", { className: he.content, children: [
-          /* @__PURE__ */ d(
+          /* @__PURE__ */ u(
             "input",
             {
               className: he.searchInput,
               type: "text",
               placeholder: "Search records...",
-              value: i,
-              onChange: h
+              value: r,
+              onChange: g
             }
           ),
-          l.length === 0 ? /* @__PURE__ */ d("div", { className: he.empty, children: "No records found" }) : /* @__PURE__ */ d("div", { className: he.recordList, children: l.map((r) => /* @__PURE__ */ d(
-            pn,
+          l.length === 0 ? /* @__PURE__ */ u("div", { className: he.empty, children: "No records found" }) : /* @__PURE__ */ u("div", { className: he.recordList, children: l.map((c) => /* @__PURE__ */ u(
+            bn,
             {
-              record: r,
+              record: c,
               activeRecordId: t,
               onRecordSelect: n
             },
-            r.id
+            c.id
           )) })
         ] })
       ]
     }
   );
 }
-function pn({
+function bn({
   record: e,
   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, r] = re(s || !1), i = $(() => {
+    o && r((l) => !l), n(e);
   }, [o, n, e]);
-  return /* @__PURE__ */ S(Mt, { children: [
+  return /* @__PURE__ */ S(It, { children: [
     /* @__PURE__ */ S(
       "div",
       {
         className: he.recordItem,
         "data-active": s || void 0,
-        onClick: c,
+        onClick: i,
         children: [
-          e.thumbnail && /* @__PURE__ */ d(
+          e.thumbnail && /* @__PURE__ */ u(
             "img",
             {
               className: he.recordThumbnail,
@@ -2888,13 +2892,13 @@ function pn({
               alt: e.title
             }
           ),
-          /* @__PURE__ */ d("span", { className: he.recordTitle, children: e.title }),
-          e.status && /* @__PURE__ */ d("span", { className: he.recordStatus, "data-status": e.status })
+          /* @__PURE__ */ u("span", { className: he.recordTitle, children: e.title }),
+          e.status && /* @__PURE__ */ u("span", { className: he.recordStatus, "data-status": e.status })
         ]
       }
     ),
-    o && a && /* @__PURE__ */ d("div", { className: he.childrenList, children: e.children.map((l) => /* @__PURE__ */ d(
-      pn,
+    o && a && /* @__PURE__ */ u("div", { className: he.childrenList, children: e.children.map((l) => /* @__PURE__ */ u(
+      bn,
       {
         record: l,
         activeRecordId: t,
@@ -2906,14 +2910,14 @@ function pn({
 }
 function Ys() {
   return /* @__PURE__ */ S("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: [
-    /* @__PURE__ */ d("rect", { x: "1", y: "1", width: "12", height: "12", rx: "1.5", stroke: "currentColor", strokeWidth: "1.2" }),
-    /* @__PURE__ */ d("line", { x1: "5", y1: "1", x2: "5", y2: "13", stroke: "currentColor", strokeWidth: "1.2" })
+    /* @__PURE__ */ u("rect", { x: "1", y: "1", width: "12", height: "12", rx: "1.5", stroke: "currentColor", strokeWidth: "1.2" }),
+    /* @__PURE__ */ u("line", { x1: "5", y1: "1", x2: "5", y2: "13", stroke: "currentColor", strokeWidth: "1.2" })
   ] });
 }
 function zs() {
   return /* @__PURE__ */ S("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: [
-    /* @__PURE__ */ d("rect", { x: "1", y: "1", width: "12", height: "12", rx: "1.5", stroke: "currentColor", strokeWidth: "1.2" }),
-    /* @__PURE__ */ d("line", { x1: "1", y1: "9", x2: "13", y2: "9", stroke: "currentColor", strokeWidth: "1.2" })
+    /* @__PURE__ */ u("rect", { x: "1", y: "1", width: "12", height: "12", rx: "1.5", stroke: "currentColor", strokeWidth: "1.2" }),
+    /* @__PURE__ */ u("line", { x1: "1", y1: "9", x2: "13", y2: "9", stroke: "currentColor", strokeWidth: "1.2" })
   ] });
 }
 const Fs = "lc-infoPanel-mqfKy", Xs = "lc-section-sMcXk", $s = "lc-sectionTitle-XfGbz", Gs = "lc-sectionContent-xsoVh", qs = "lc-tabs-huI9o", Ks = "lc-tab-jbpRb", Js = "lc-classList-mtPXc", js = "lc-classButton-Cdd6v", Qs = "lc-classColorDot-Ravod", ea = "lc-className-yQWn-", ta = "lc-classHotkey-deQqu", na = "lc-labelList-iJvDs", oa = "lc-labelItem-ws-sn", sa = "lc-indicator-6JWmk", aa = "lc-indicatorProgress-5iZVD", ae = {
@@ -2940,97 +2944,97 @@ function ia({
   onClassSelect: s,
   onAnnotationSelect: o,
   onAnnotationDelete: a,
-  disabled: i = !1
+  disabled: r = !1
 }) {
   var v;
-  const [c, l] = re("class"), [h, u] = re(((v = e[0]) == null ? void 0 : v.id) ?? "");
+  const [i, l] = re("class"), [g, d] = 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]);
-  const r = ve(() => {
-    const g = /* @__PURE__ */ new Map();
+    e.length > 0 && !e.find((f) => f.id === g) && d(e[0].id);
+  }, [e, g]);
+  const c = ve(() => {
+    const f = /* @__PURE__ */ new Map();
     for (const b of e) {
-      const f = b.group ?? "", p = g.get(f) ?? [];
-      p.push(b), g.set(f, p);
+      const h = b.group ?? "", p = f.get(h) ?? [];
+      p.push(b), f.set(h, p);
     }
-    return g;
+    return f;
   }, [e]), m = $(
-    (g) => {
-      i || (u(g.id), s == null || s(g));
+    (f) => {
+      r || (d(f.id), s == null || s(f));
     },
-    [i, s]
+    [r, s]
   );
   return ce(() => {
-    const g = (b) => {
-      if (i) return;
-      const f = b.target;
-      if (f instanceof HTMLElement && (f.tagName === "INPUT" || f.tagName === "TEXTAREA" || f.tagName === "SELECT" || f.isContentEditable))
+    const f = (b) => {
+      if (r) return;
+      const h = b.target;
+      if (h instanceof HTMLElement && (h.tagName === "INPUT" || h.tagName === "TEXTAREA" || h.tagName === "SELECT" || h.isContentEditable))
         return;
       const p = b.key, N = e.find((Z) => Z.hotkey === p);
       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: [
-    /* @__PURE__ */ d("div", { className: ae.sectionTitle, children: /* @__PURE__ */ S("div", { className: ae.tabs, children: [
-      /* @__PURE__ */ d(
+    return window.addEventListener("keydown", f), () => window.removeEventListener("keydown", f);
+  }, [e, r, m]), /* @__PURE__ */ u("div", { className: ae.infoPanel, children: /* @__PURE__ */ S("div", { className: ae.section, children: [
+    /* @__PURE__ */ u("div", { className: ae.sectionTitle, children: /* @__PURE__ */ S("div", { className: ae.tabs, children: [
+      /* @__PURE__ */ u(
         "button",
         {
           className: ae.tab,
-          "data-active": c === "class" || void 0,
+          "data-active": i === "class" || void 0,
           onClick: () => l("class"),
           children: "Class"
         }
       ),
-      /* @__PURE__ */ d(
+      /* @__PURE__ */ u(
         "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: [
-      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(
+    i === "class" && /* @__PURE__ */ u("div", { className: ae.sectionContent, children: /* @__PURE__ */ u("div", { className: ae.classList, children: Array.from(c.entries()).map(([f, b]) => /* @__PURE__ */ S("div", { children: [
+      f && /* @__PURE__ */ u("div", { style: { fontSize: "0.75rem", fontWeight: 600, color: "#64748b", padding: "0.25rem 0", marginTop: "0.25rem" }, children: f }),
+      b.map((h) => /* @__PURE__ */ S(
         "button",
         {
           className: ae.classButton,
-          "data-active": h === f.id || void 0,
-          disabled: i,
-          onClick: () => m(f),
+          "data-active": g === h.id || void 0,
+          disabled: r,
+          onClick: () => m(h),
           children: [
-            /* @__PURE__ */ d(
+            /* @__PURE__ */ u(
               "div",
               {
                 className: ae.classColorDot,
-                style: { backgroundColor: f.color }
+                style: { backgroundColor: h.color }
               }
             ),
-            /* @__PURE__ */ d("span", { className: ae.className, children: f.name }),
-            f.hotkey && /* @__PURE__ */ d("span", { className: ae.classHotkey, children: f.hotkey })
+            /* @__PURE__ */ u("span", { className: ae.className, children: h.name }),
+            h.hotkey && /* @__PURE__ */ u("span", { className: ae.classHotkey, children: h.hotkey })
           ]
         },
-        f.id
+        h.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(
+    ] }, f || "__default")) }) }),
+    i === "label" && /* @__PURE__ */ u("div", { className: ae.sectionContent, children: t.length === 0 ? /* @__PURE__ */ u("div", { style: { fontSize: "0.8125rem", color: "#64748b", padding: "1rem 0", textAlign: "center" }, children: "No labels yet" }) : /* @__PURE__ */ u("div", { className: ae.labelList, children: t.map((f) => /* @__PURE__ */ S(
       "div",
       {
         className: ae.labelItem,
-        "data-selected": n === g.id || void 0,
-        onClick: () => o == null ? void 0 : o(g),
+        "data-selected": n === f.id || void 0,
+        onClick: () => o == null ? void 0 : o(f),
         children: [
-          /* @__PURE__ */ d(
+          /* @__PURE__ */ u(
             "div",
             {
               className: ae.classColorDot,
-              style: { backgroundColor: g.style.color, opacity: g.style.opacity }
+              style: { backgroundColor: f.style.color, opacity: f.style.opacity }
             }
           ),
-          /* @__PURE__ */ d("p", { children: g.label.name || g.type }),
-          a && /* @__PURE__ */ d(
+          /* @__PURE__ */ u("p", { children: f.label.name || f.type }),
+          a && /* @__PURE__ */ u(
             "button",
             {
               style: {
@@ -3043,23 +3047,23 @@ function ia({
                 color: "#94a3b8"
               },
               onClick: (b) => {
-                b.stopPropagation(), a(g.id);
+                b.stopPropagation(), a(f.id);
               },
               children: "×"
             }
           )
         ]
       },
-      g.id
+      f.id
     )) }) })
   ] }) });
 }
 const ca = "sub-tool-panel";
 function Le(e, t = "sm") {
-  return Je(fe, { iconType: e, size: t });
+  return Ke(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 = we((d) => d.tool), t = we((d) => d.setTool), n = Me((d) => d.mode), s = Me((d) => d.cycleMode), o = (e == null ? void 0 : e.id) ?? "selection", r = ["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
     {
@@ -3069,7 +3073,7 @@ function ra() {
       icon: Le("icon-selection"),
       title: ee("Selection", J.common.selection),
       checked: o === "selection",
-      onClick: () => t(Tt())
+      onClick: () => t(Bt())
     },
     { variant: "divider" },
     // Bounding Box
@@ -3080,7 +3084,7 @@ function ra() {
       icon: Le("icon-borderd-rect"),
       title: ee("Bounding Box", J.image.boundingBox),
       checked: o === "bounded-box",
-      onClick: () => t(ln())
+      onClick: () => t(dn())
     },
     // Pen
     {
@@ -3090,7 +3094,7 @@ function ra() {
       icon: Le("icon-pen"),
       title: ee("Pen", J.image.pen),
       checked: o === "polygon",
-      onClick: () => t(sn())
+      onClick: () => t(an())
     },
     // Brush
     {
@@ -3100,16 +3104,16 @@ function ra() {
       icon: Le("icon-brush"),
       title: ee("Brush", J.image.brush),
       checked: o === "brush",
-      onClick: () => t(Qt())
+      onClick: () => t(en())
     },
     // Intelligent Tools (sub-panel)
     {
       variant: "radio",
       id: ca,
       name: "tool",
-      icon: Le(c),
+      icon: Le(i),
       title: "Intelligent Tools",
-      checked: i,
+      checked: r,
       subButtonItems: [
         {
           variant: "radio",
@@ -3118,7 +3122,7 @@ function ra() {
           icon: Le("icon-magic-wand"),
           title: ee("Magic Brush", J.image.magicBrush),
           checked: o === "magic-brush",
-          onClick: () => t(yt())
+          onClick: () => t(bt())
         },
         {
           variant: "radio",
@@ -3127,7 +3131,7 @@ function ra() {
           icon: Le("icon-superpixel"),
           title: ee("Superpixel", J.image.superpixel),
           checked: o === "superpixel",
-          onClick: () => t(dn())
+          onClick: () => t(un())
         },
         {
           variant: "radio",
@@ -3142,7 +3146,7 @@ function ra() {
         }
       ],
       onClick: () => {
-        i || t(yt());
+        r || t(bt());
       }
     },
     // Dropdown toggle (slim)
@@ -3163,7 +3167,7 @@ function ra() {
       icon: Le("icon-eraser"),
       title: ee("Eraser", J.image.eraser),
       checked: o === "eraser",
-      onClick: () => t(en())
+      onClick: () => t(tn())
     },
     { variant: "divider" },
     // Layer Mode
@@ -3176,17 +3180,17 @@ function ra() {
     }
   ] };
 }
-function ot(e) {
-  return Je(fe, { iconType: e, size: "sm" });
+function nt(e) {
+  return Ke(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 = zt((l) => l.tool), t = zt((l) => l.setTool), n = Me((l) => l.mode), s = Me((l) => l.cycleMode), o = vo(), a = (e == null ? void 0 : e.id) ?? "selection", r = n === le.ONLY_ORIGIN ? "icon-bottom-layer" : n === le.ONLY_OVERLAY ? "icon-top-layer" : "icon-all-layer";
   return { toolbar: [
     {
       variant: "radio",
       id: "selection",
       name: "tool",
-      icon: ot("icon-selection"),
+      icon: nt("icon-selection"),
       title: ee("Selection", J.common.selection),
       checked: a === "selection",
       onClick: () => t({ id: "selection", label: "Selection" })
@@ -3196,7 +3200,7 @@ function la() {
       variant: "radio",
       id: "drag-segment",
       name: "tool",
-      icon: ot("icon-highlight"),
+      icon: nt("icon-highlight"),
       title: ee("Highlighting", J.text.highlighting),
       checked: a === "drag-segment",
       onClick: () => t({ id: "drag-segment", label: "Highlighting" })
@@ -3206,7 +3210,7 @@ function la() {
     {
       variant: "button",
       id: "auto-highlight",
-      icon: ot("icon-highlight"),
+      icon: nt("icon-highlight"),
       title: ee("Auto Highlight", J.text.autoHighlight),
       subItems: [
         {
@@ -3238,23 +3242,23 @@ function la() {
     {
       variant: "button",
       id: "layer-mode",
-      icon: ot(i),
+      icon: nt(r),
       title: ee("Layer", J.common.layerToggle),
       onClick: s
     }
   ] };
 }
-function gt(e) {
-  return Je(fe, { iconType: e, size: "sm" });
+function mt(e) {
+  return Ke(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 = Ft((i) => i.tool), t = Ft((i) => i.setTool), n = Me((i) => i.mode), s = Me((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",
       id: "selection",
       name: "tool",
-      icon: gt("icon-selection"),
+      icon: mt("icon-selection"),
       title: ee("Selection", J.common.selection),
       checked: o === "selection",
       onClick: () => t({ id: "selection", label: "Selection" })
@@ -3264,7 +3268,7 @@ function da() {
       variant: "radio",
       id: "drag-segment",
       name: "tool",
-      icon: gt("icon-highlight"),
+      icon: mt("icon-highlight"),
       title: ee("Highlighting", J.number.highlighting),
       checked: o === "drag-segment",
       onClick: () => t({ id: "drag-segment", label: "Highlighting" })
@@ -3273,23 +3277,23 @@ function da() {
     {
       variant: "button",
       id: "layer-mode",
-      icon: gt(a),
+      icon: mt(a),
       title: ee("Layer", J.common.layerToggle),
       onClick: s
     }
   ] };
 }
-function $t(e) {
-  return Je(fe, { iconType: e, size: "sm" });
+function Gt(e) {
+  return Ke(fe, { iconType: e, size: "sm" });
 }
 function ua() {
-  const e = Se((o) => o.mode), t = Se((o) => o.cycleMode), n = e === le.ONLY_ORIGIN ? "icon-bottom-layer" : e === le.ONLY_OVERLAY ? "icon-top-layer" : "icon-all-layer";
+  const e = Me((o) => o.mode), t = Me((o) => o.cycleMode), n = e === le.ONLY_ORIGIN ? "icon-bottom-layer" : e === le.ONLY_OVERLAY ? "icon-top-layer" : "icon-all-layer";
   return { toolbar: [
     {
       variant: "radio",
       id: "selection",
       name: "tool",
-      icon: $t("icon-selection"),
+      icon: Gt("icon-selection"),
       title: ee("Selection", J.common.selection),
       checked: !0,
       onClick: () => {
@@ -3299,7 +3303,7 @@ function ua() {
     {
       variant: "button",
       id: "layer-mode",
-      icon: $t(n),
+      icon: Gt(n),
       title: ee("Layer", J.common.layerToggle),
       onClick: t
     }
@@ -3308,26 +3312,26 @@ function ua() {
 function ha() {
   return { toolbar: [] };
 }
-function vt(e) {
-  return Je(fe, { iconType: e, size: "sm" });
+function gt(e) {
+  return Ke(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 = wt((l) => l.tool), t = wt((l) => l.setTool), n = Me((l) => l.mode), s = Me((l) => l.cycleMode), o = St((l) => l.toggle), a = (e == null ? void 0 : e.id) ?? "selection", r = n === le.ONLY_ORIGIN ? "icon-bottom-layer" : n === le.ONLY_OVERLAY ? "icon-top-layer" : "icon-all-layer";
   return { toolbar: [
     {
       variant: "radio",
       id: "selection",
       name: "tool",
-      icon: vt("icon-selection"),
+      icon: gt("icon-selection"),
       title: ee("Selection", J.common.selection),
       checked: a === "selection",
-      onClick: () => t(Tt())
+      onClick: () => t(Bt())
     },
     { variant: "divider" },
     {
       variant: "button",
       id: "issue",
-      icon: vt("icon-issue"),
+      icon: gt("icon-issue"),
       title: ee("Issue", J.validation.issue),
       onClick: o
     },
@@ -3335,16 +3339,16 @@ function fa() {
     {
       variant: "button",
       id: "layer-mode",
-      icon: vt(i),
+      icon: gt(r),
       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(), r = ha(), i = fa();
   if (t)
-    return c;
+    return i;
   switch (e) {
     case "Image":
       return n;
@@ -3355,7 +3359,7 @@ function ma(e, t) {
     case "Record":
       return a;
     case "File":
-      return i;
+      return r;
     default:
       return n;
   }
@@ -3377,21 +3381,21 @@ function Sa({
   verticalNav: n = !1,
   children: s
 }) {
-  return t ? /* @__PURE__ */ d(
+  return t ? /* @__PURE__ */ u(
     "div",
     {
       className: ge.stickyWrapper,
       "data-vertical-nav": n || void 0,
       children: /* @__PURE__ */ S("div", { className: ge.toolbarWrapper, children: [
-        e.map((o, a) => /* @__PURE__ */ d(bn, { item: o }, a)),
+        e.map((o, a) => /* @__PURE__ */ u(yn, { item: o }, a)),
         s
       ] })
     }
   ) : null;
 }
-function bn({ item: e }) {
+function yn({ item: e }) {
   var t;
-  return e.variant === "divider" ? /* @__PURE__ */ d("div", { className: ge.divider }) : e.variant === "radio" ? /* @__PURE__ */ d(
+  return e.variant === "divider" ? /* @__PURE__ */ u("div", { className: ge.divider }) : e.variant === "radio" ? /* @__PURE__ */ u(
     "button",
     {
       className: ge.toolButton,
@@ -3402,7 +3406,7 @@ function bn({ item: e }) {
       children: e.icon
     }
   ) : e.variant === "checkbox" ? /* @__PURE__ */ S("label", { className: ge.checkboxItem, title: e.title, children: [
-    /* @__PURE__ */ d(
+    /* @__PURE__ */ u(
       "input",
       {
         type: "checkbox",
@@ -3414,8 +3418,8 @@ function bn({ item: e }) {
         }
       }
     ),
-    /* @__PURE__ */ d("span", { className: ge.checkboxLabel, children: e.title })
-  ] }) : (t = e.subItems) != null && t.length ? /* @__PURE__ */ d(Ma, { item: e }) : /* @__PURE__ */ d(
+    /* @__PURE__ */ u("span", { className: ge.checkboxLabel, children: e.title })
+  ] }) : (t = e.subItems) != null && t.length ? /* @__PURE__ */ u(Ma, { item: e }) : /* @__PURE__ */ u(
     "button",
     {
       className: `${ge.toolButton} ${e.slim ? ge.toolButtonSlim : ""}`,
@@ -3435,7 +3439,7 @@ function Ma({ item: e }) {
     if (t)
       return window.addEventListener("mousedown", o), () => window.removeEventListener("mousedown", o);
   }, [t, o]), /* @__PURE__ */ S("div", { className: ge.buttonWithSub, ref: s, children: [
-    /* @__PURE__ */ d(
+    /* @__PURE__ */ u(
       "button",
       {
         className: `${ge.toolButton} ${e.slim ? ge.toolButtonSlim : ""}`,
@@ -3444,21 +3448,30 @@ 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((r) => !r);
         },
         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__ */ u("div", { className: ge.subToolbar, children: e.subItems.map((a, r) => /* @__PURE__ */ u(yn, { item: a }, r)) })
   ] });
 }
 function Ia({ children: e }) {
-  const t = qe((a) => a.mode), n = Bt((a) => a.isValidationMode), { toolbar: s } = ma(t, n), o = s.map(yn);
-  return /* @__PURE__ */ d(Sa, { items: o, children: e });
+  const t = qe((a) => a.mode), n = Et((a) => a.isValidationMode), { toolbar: s } = ma(t, n), o = s.map(Mt);
+  return /* @__PURE__ */ u(Sa, { items: o, children: e });
 }
-function yn(e) {
-  var t;
-  return e.variant === "divider" ? { variant: "divider" } : e.variant === "radio" ? {
+function Mt(e) {
+  var t, n;
+  return e.variant === "divider" ? { variant: "divider" } : e.variant === "radio" ? (t = e.subButtonItems) != null && t.length ? {
+    variant: "button",
+    id: e.id,
+    icon: e.icon,
+    title: e.title,
+    active: e.checked,
+    disabled: e.disabled,
+    onClick: e.onClick,
+    subItems: e.subButtonItems.map(Mt)
+  } : {
     variant: "radio",
     id: e.id,
     name: e.name,
@@ -3485,12 +3498,12 @@ function yn(e) {
     active: e.active,
     slim: e.slim,
     onClick: e.onClick,
-    subItems: (t = e.subItems) == null ? void 0 : t.map(yn)
+    subItems: (n = e.subItems) == null ? void 0 : n.map(Mt)
   };
 }
 function Na({ indicator: e }) {
   return e ? /* @__PURE__ */ S("div", { className: ae.indicator, children: [
-    /* @__PURE__ */ d("span", { children: e.title }),
+    /* @__PURE__ */ u("span", { children: e.title }),
     e.subtitle && /* @__PURE__ */ S("span", { children: [
       ": ",
       e.subtitle
@@ -3509,7 +3522,7 @@ function Na({ indicator: e }) {
   ] }) : null;
 }
 function ii(e) {
-  return /* @__PURE__ */ d(
+  return /* @__PURE__ */ u(
     bo,
     {
       image: e.image,
@@ -3549,15 +3562,15 @@ function ii(e) {
       tools: e.tools,
       theme: e.theme,
       layout: e.layout,
-      children: /* @__PURE__ */ d(ka, {})
+      children: /* @__PURE__ */ u(ka, {})
     }
   );
 }
 function ka() {
   const e = po(), t = e.mode === "readonly", n = e.navVisible && e.layout.navigation !== "hidden", s = e.navDirection, o = n && s === "horizontal" ? "with-nav-left" : n && s === "vertical" ? "with-nav-bottom" : void 0;
   return /* @__PURE__ */ S("div", { className: Ze.workspace, "data-layout": o, children: [
-    n && s === "horizontal" && /* @__PURE__ */ d(
-      Xt,
+    n && s === "horizontal" && /* @__PURE__ */ u(
+      $t,
       {
         records: e.records,
         activeRecordId: e.activeRecordId,
@@ -3567,7 +3580,7 @@ function ka() {
       }
     ),
     /* @__PURE__ */ S("div", { className: Ze.mainSection, children: [
-      /* @__PURE__ */ d(
+      /* @__PURE__ */ u(
         Yo,
         {
           viewMode: e.viewMode,
@@ -3590,7 +3603,7 @@ function ka() {
         }
       ),
       /* @__PURE__ */ S("div", { className: Ze.canvasArea, children: [
-        /* @__PURE__ */ d(
+        /* @__PURE__ */ u(
           Os,
           {
             viewMode: e.viewMode,
@@ -3604,10 +3617,10 @@ function ka() {
             onFileUpload: e.onFileUpload
           }
         ),
-        !t && e.viewMode !== "Record" && e.viewMode !== "File" && /* @__PURE__ */ d(Ia, {}),
-        e.indicator && /* @__PURE__ */ d(Na, { indicator: e.indicator })
+        !t && e.viewMode !== "Record" && e.viewMode !== "File" && /* @__PURE__ */ u(Ia, {}),
+        e.indicator && /* @__PURE__ */ u(Na, { indicator: e.indicator })
       ] }),
-      /* @__PURE__ */ d("div", { className: Ze.sidePanel, children: /* @__PURE__ */ d(
+      /* @__PURE__ */ u("div", { className: Ze.sidePanel, children: /* @__PURE__ */ u(
         ia,
         {
           classes: e.classes,
@@ -3619,8 +3632,8 @@ function ka() {
         }
       ) })
     ] }),
-    n && s === "vertical" && /* @__PURE__ */ d(
-      Xt,
+    n && s === "vertical" && /* @__PURE__ */ u(
+      $t,
       {
         records: e.records,
         activeRecordId: e.activeRecordId,
@@ -3631,15 +3644,15 @@ function ka() {
     )
   ] });
 }
-const Oa = "lc-issuePanel-Ji1Oq", Pa = "lc-issuePanelTitle-MnKUa", Ta = "lc-issueCount-xtlWy", Ba = "lc-issueItem-CL2Qq", Ea = "lc-issueHeader-YSNcb", Ra = "lc-issueLabel-K-Klr", Da = "lc-issueBadge-oMlCN", Aa = "lc-issueReason-Pof-O", Ha = "lc-issueDate-PZH2G", _a = "lc-validationActions-qtvXO", Va = "lc-validateButton-mhzNq", Za = "lc-reasonInput-WGZ6m", Ua = "lc-emptyState-4wJWu", ie = {
+const Oa = "lc-issuePanel-Ji1Oq", Pa = "lc-issuePanelTitle-MnKUa", Ta = "lc-issueCount-xtlWy", Ba = "lc-issueItem-CL2Qq", Ea = "lc-issueHeader-YSNcb", Ra = "lc-issueLabel-K-Klr", Aa = "lc-issueBadge-oMlCN", Da = "lc-issueReason-Pof-O", Ha = "lc-issueDate-PZH2G", _a = "lc-validationActions-qtvXO", Va = "lc-validateButton-mhzNq", Za = "lc-reasonInput-WGZ6m", Ua = "lc-emptyState-4wJWu", ie = {
   issuePanel: Oa,
   issuePanelTitle: Pa,
   issueCount: Ta,
   issueItem: Ba,
   issueHeader: Ea,
   issueLabel: Ra,
-  issueBadge: Da,
-  issueReason: Aa,
+  issueBadge: Aa,
+  issueReason: Da,
   issueDate: Ha,
   validationActions: _a,
   validateButton: Va,
@@ -3653,9 +3666,9 @@ function ci({
   onAnnotationSelect: s,
   onValidate: o,
   onValidationUpdate: a,
-  onValidationDelete: i
+  onValidationDelete: r
 }) {
-  const [c, l] = re(""), [h, u] = re(null), r = t.filter((f) => !f.result).length, m = $(async () => {
+  const [i, l] = re(""), [g, d] = re(null), c = t.filter((h) => !h.result).length, m = $(async () => {
     n && await (o == null ? void 0 : o({
       annotationIds: [n],
       result: !0
@@ -3664,78 +3677,78 @@ 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 = $(
-    async (f) => {
-      await (i == null ? void 0 : i({ ids: [f] }));
+  }, [n, i, o]), f = $(
+    async (h) => {
+      await (r == null ? void 0 : r({ ids: [h] }));
     },
-    [i]
+    [r]
   ), b = $(
-    (f) => f.annotationId ? e.find((p) => p.id === f.annotationId) ?? null : null,
+    (h) => h.annotationId ? e.find((p) => p.id === h.annotationId) ?? null : null,
     [e]
   );
   return /* @__PURE__ */ S("div", { className: ie.issuePanel, children: [
     /* @__PURE__ */ S("div", { className: ie.issuePanelTitle, children: [
-      /* @__PURE__ */ d("span", { children: "Validation" }),
-      r > 0 && /* @__PURE__ */ S("span", { className: ie.issueCount, children: [
-        r,
+      /* @__PURE__ */ u("span", { children: "Validation" }),
+      c > 0 && /* @__PURE__ */ S("span", { className: ie.issueCount, children: [
+        c,
         " issues"
       ] })
     ] }),
-    t.length === 0 ? /* @__PURE__ */ d("div", { className: ie.emptyState, children: /* @__PURE__ */ d("p", { children: "No validation results yet" }) }) : t.map((f) => {
-      const p = b(f);
+    t.length === 0 ? /* @__PURE__ */ u("div", { className: ie.emptyState, children: /* @__PURE__ */ u("p", { children: "No validation results yet" }) }) : t.map((h) => {
+      const p = b(h);
       return /* @__PURE__ */ S(
         "div",
         {
           className: ie.issueItem,
-          "data-selected": h === f.id || void 0,
-          "data-result": f.result ? "pass" : "fail",
+          "data-selected": g === h.id || void 0,
+          "data-result": h.result ? "pass" : "fail",
           onClick: () => {
-            u(f.id), p && (s == null || s(p));
+            d(h.id), p && (s == null || s(p));
           },
           children: [
             /* @__PURE__ */ S("div", { className: ie.issueHeader, children: [
-              /* @__PURE__ */ d("span", { className: ie.issueLabel, children: (p == null ? void 0 : p.label.name) ?? `Annotation ${f.annotationId ?? f.id}` }),
-              /* @__PURE__ */ d(
+              /* @__PURE__ */ u("span", { className: ie.issueLabel, children: (p == null ? void 0 : p.label.name) ?? `Annotation ${h.annotationId ?? h.id}` }),
+              /* @__PURE__ */ u(
                 "span",
                 {
                   className: ie.issueBadge,
-                  "data-result": f.result ? "pass" : "fail",
-                  children: f.result ? "Pass" : "Fail"
+                  "data-result": h.result ? "pass" : "fail",
+                  children: h.result ? "Pass" : "Fail"
                 }
               )
             ] }),
-            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(
+            h.reason && /* @__PURE__ */ u("p", { className: ie.issueReason, children: h.reason }),
+            h.validatedAt && /* @__PURE__ */ u("span", { className: ie.issueDate, children: h.validatedAt }),
+            r && /* @__PURE__ */ u(
               "button",
               {
                 className: ie.validateButton,
                 "data-variant": "secondary",
                 style: { marginTop: "0.25rem", padding: "0.25rem 0.5rem", fontSize: "0.75rem" },
                 onClick: (N) => {
-                  N.stopPropagation(), g(f.id);
+                  N.stopPropagation(), f(h.id);
                 },
                 children: "Delete"
               }
             )
           ]
         },
-        f.id
+        h.id
       );
     }),
-    o && /* @__PURE__ */ d("div", { className: ie.validationActions, children: /* @__PURE__ */ d(
+    o && /* @__PURE__ */ u("div", { className: ie.validationActions, children: /* @__PURE__ */ u(
       "textarea",
       {
         className: ie.reasonInput,
         placeholder: "Reason (optional)...",
-        value: c,
-        onChange: (f) => l(f.target.value)
+        value: i,
+        onChange: (h) => l(h.target.value)
       }
     ) }),
     o && /* @__PURE__ */ S("div", { className: ie.validationActions, children: [
-      /* @__PURE__ */ d(
+      /* @__PURE__ */ u(
         "button",
         {
           className: ie.validateButton,
@@ -3745,7 +3758,7 @@ function ci({
           children: "Approve"
         }
       ),
-      /* @__PURE__ */ d(
+      /* @__PURE__ */ u(
         "button",
         {
           className: ie.validateButton,
@@ -3759,51 +3772,51 @@ function ci({
   ] });
 }
 function ri() {
-  const e = dt((u) => u.objects), t = dt((u) => u.setObjects), n = Ge((u) => u.level), s = Ge((u) => u.setZoom), o = $(
-    async (u, r) => {
-      const m = we();
-      return un(m, u, r);
+  const e = lt((d) => d.objects), t = lt((d) => d.setObjects), n = Ge((d) => d.level), s = Ge((d) => d.setZoom), o = $(
+    async (d, c) => {
+      const m = Se();
+      return hn(m, d, c);
     },
     []
   ), a = $(
-    async (u, r, m) => {
+    async (d, c, m) => {
       const v = Q();
       if (!v) return;
-      const g = hn(u, r, m), b = await import("fabric");
-      let f = null;
-      const p = g.type;
-      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()));
+      const f = fn(d, c, m), b = await import("fabric");
+      let h = null;
+      const p = f.type;
+      p === "rect" ? h = new b.Rect(f) : p === "polygon" && f.points ? h = new b.Polygon(f.points, f) : p === "path" && f.path ? h = new b.Path(f.path, f) : p === "image" && typeof f.src == "string" && (h = await b.FabricImage.fromURL(f.src, { crossOrigin: "anonymous" }), h.set(f)), h && (v.add(h), ke(v), t(v.getObjects()));
     },
     [t]
-  ), i = $(
-    (u) => {
-      const r = Q();
-      if (!r) return;
-      const v = r.getObjects().find((g) => g.unique === u);
-      v && (r.remove(v), Ne(r), t(r.getObjects()));
+  ), r = $(
+    (d) => {
+      const c = Q();
+      if (!c) return;
+      const v = c.getObjects().find((f) => f.unique === d);
+      v && (c.remove(v), ke(c), t(c.getObjects()));
     },
     [t]
-  ), c = $(() => {
-    const u = Q();
-    if (!u) return;
-    const r = u.getObjects();
-    for (const m of r)
-      u.remove(m);
-    Ne(u), t([]);
+  ), i = $(() => {
+    const d = Q();
+    if (!d) return;
+    const c = d.getObjects();
+    for (const m of c)
+      d.remove(m);
+    ke(d), t([]);
   }, [t]), l = $(
-    async (u, r) => {
-      const m = await o(u, r), v = Ue();
+    async (d, c) => {
+      const m = await o(d, c), v = Ue();
       return {
         annotations: m,
         canvasJSON: v,
-        image: { width: u, height: r }
+        image: { width: d, height: c }
       };
     },
     [o]
-  ), h = $(
-    (u) => {
-      const r = Q();
-      r && (r.setZoom(u), Ne(r), s({ level: u, width: r.getWidth(), height: r.getHeight() }));
+  ), g = $(
+    (d) => {
+      const c = Q();
+      c && (c.setZoom(d), ke(c), s({ level: d, width: c.getWidth(), height: c.getHeight() }));
     },
     [s]
   );
@@ -3813,47 +3826,47 @@ function ri() {
       zoom: n,
       getAnnotations: o,
       addAnnotation: a,
-      removeAnnotation: i,
-      clearCanvas: c,
+      removeAnnotation: r,
+      clearCanvas: i,
       exportState: l,
-      setZoomLevel: h
+      setZoomLevel: g
     }),
-    [e, n, o, a, i, c, l, h]
+    [e, n, o, a, r, i, l, g]
   );
 }
 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 r = Ue(), m = JSON.stringify(r);
+  const e = we((c) => c.undoStack), t = we((c) => c.redoStack), n = we((c) => c.setUndoStack), s = we((c) => c.setRedoStack), o = lt((c) => c.setObjects), a = e.length > 0, r = t.length > 0, i = $(() => {
+    const c = Ue(), m = JSON.stringify(c);
     n([...e, m]), s([]);
   }, [e, n, s]), l = $(async () => {
     if (!a) return;
-    const r = Q();
-    if (!r) return;
+    const c = Q();
+    if (!c) return;
     const m = JSON.stringify(Ue());
     s([...t, m]);
-    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;
-    const r = Q();
+    const v = [...e], f = v.pop();
+    n(v), await c.loadFromJSON(f), ke(c), o(c.getObjects());
+  }, [a, e, t, n, s, o]), g = $(async () => {
     if (!r) return;
+    const c = Q();
+    if (!c) 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 = $(() => {
+    const v = [...t], f = v.pop();
+    s(v), await c.loadFromJSON(f), ke(c), o(c.getObjects());
+  }, [r, e, t, n, s, o]), d = $(() => {
     n([]), s([]);
   }, [n, s]);
   return ve(
     () => ({
       canUndo: a,
-      canRedo: i,
+      canRedo: r,
       undo: l,
-      redo: h,
-      pushSnapshot: c,
-      clear: u
+      redo: g,
+      pushSnapshot: i,
+      clear: d
     }),
-    [a, i, l, h, c, u]
+    [a, r, l, g, i, d]
   );
 }
 function di(e) {
@@ -3863,18 +3876,18 @@ function di(e) {
     annotations: s,
     selectedIds: o,
     activeTool: a,
-    addAnnotations: i,
-    updateAnnotation: c,
+    addAnnotations: r,
+    updateAnnotation: i,
     removeAnnotations: l,
-    setTool: h
-  } = e, u = ve(
-    () => t.filter((f) => f.slot === "tool"),
+    setTool: g
+  } = e, d = ve(
+    () => t.filter((h) => h.slot === "tool"),
     [t]
-  ), r = ve(
-    () => t.filter((f) => f.slot === "sidePanel"),
+  ), c = ve(
+    () => t.filter((h) => h.slot === "sidePanel"),
     [t]
   ), m = ve(
-    () => t.filter((f) => f.slot === "toolbar"),
+    () => t.filter((h) => h.slot === "toolbar"),
     [t]
   ), v = ve(
     () => ({
@@ -3882,70 +3895,70 @@ function di(e) {
       annotations: s,
       selectedIds: o,
       activeTool: a,
-      addAnnotations: i,
-      updateAnnotation: c,
+      addAnnotations: r,
+      updateAnnotation: i,
       removeAnnotations: l,
-      setTool: h,
+      setTool: g,
       canvas: {
         toJSON: () => Ue(),
         getImageDataURL: () => {
-          const f = Q();
-          return f ? f.toDataURL({ format: "png", multiplier: 1 }) : "";
+          const h = Q();
+          return h ? h.toDataURL({ format: "png", multiplier: 1 }) : "";
         }
       }
     }),
-    [n, s, o, a, i, c, l, h]
-  ), g = ve(
-    () => u.find((f) => f.id === a),
-    [u, a]
-  ), b = Ce(g == null ? void 0 : g.canvasHandlers);
-  return b.current = g == null ? void 0 : g.canvasHandlers, ce(() => {
-    const f = Q();
-    if (!f || !b.current) return;
-    const p = (D) => {
+    [n, s, o, a, r, i, l, g]
+  ), f = ve(
+    () => d.find((h) => h.id === a),
+    [d, a]
+  ), b = Ce(f == null ? void 0 : f.canvasHandlers);
+  return b.current = f == null ? void 0 : f.canvasHandlers, ce(() => {
+    const h = Q();
+    if (!h || !b.current) return;
+    const p = (A) => {
       var H, w, C, E, _;
-      const k = ((H = f.getScenePoint) == null ? void 0 : H.call(f, D)) ?? ((w = f.getPointer) == null ? void 0 : w.call(f, D)) ?? { x: 0, y: 0 };
+      const k = ((H = h.getScenePoint) == null ? void 0 : H.call(h, A)) ?? ((w = h.getPointer) == null ? void 0 : w.call(h, A)) ?? { x: 0, y: 0 };
       return {
         x: k.x,
         y: k.y,
-        shiftKey: ((C = D.e) == null ? void 0 : C.shiftKey) ?? !1,
-        ctrlKey: ((E = D.e) == null ? void 0 : E.ctrlKey) ?? !1,
-        altKey: ((_ = D.e) == null ? void 0 : _.altKey) ?? !1
+        shiftKey: ((C = A.e) == null ? void 0 : C.shiftKey) ?? !1,
+        ctrlKey: ((E = A.e) == null ? void 0 : E.ctrlKey) ?? !1,
+        altKey: ((_ = A.e) == null ? void 0 : _.altKey) ?? !1
       };
-    }, N = (D) => {
+    }, N = (A) => {
       var k, H;
-      return (H = (k = b.current) == null ? void 0 : k.onMouseDown) == null ? void 0 : H.call(k, p(D));
-    }, Z = (D) => {
+      return (H = (k = b.current) == null ? void 0 : k.onMouseDown) == null ? void 0 : H.call(k, p(A));
+    }, Z = (A) => {
       var k, H;
-      return (H = (k = b.current) == null ? void 0 : k.onMouseMove) == null ? void 0 : H.call(k, p(D));
-    }, V = (D) => {
+      return (H = (k = b.current) == null ? void 0 : k.onMouseMove) == null ? void 0 : H.call(k, p(A));
+    }, V = (A) => {
       var k, H;
-      return (H = (k = b.current) == null ? void 0 : k.onMouseUp) == null ? void 0 : H.call(k, p(D));
+      return (H = (k = b.current) == null ? void 0 : k.onMouseUp) == null ? void 0 : H.call(k, p(A));
     };
-    return f.on("mouse:down", N), f.on("mouse:move", Z), f.on("mouse:up", V), () => {
-      f.off("mouse:down", N), f.off("mouse:move", Z), f.off("mouse:up", V);
+    return h.on("mouse:down", N), h.on("mouse:move", Z), h.on("mouse:up", V), () => {
+      h.off("mouse:down", N), h.off("mouse:move", Z), h.off("mouse:up", V);
     };
-  }, [g == null ? void 0 : g.id]), {
+  }, [f == null ? void 0 : f.id]), {
     context: v,
-    toolExtensions: u,
-    sidePanelExtensions: r,
+    toolExtensions: d,
+    sidePanelExtensions: c,
     toolbarExtensions: m,
-    activeToolExtension: g
+    activeToolExtension: f
   };
 }
 export {
   In as EXCEPTION_TOOLS,
-  Nt as EXPORT_PROPS,
+  kt as EXPORT_PROPS,
   J as LABELING_SHORTCUTS,
   le as LAYER_MODE,
-  Ft as LabelingCanvas,
+  Xt as LabelingCanvas,
   ks as LabelingFileSection,
   Sa as LabelingFloatingToolbar,
   fe as LabelingIcon,
   Na as LabelingIndicator,
   ia as LabelingInfoPanel,
   ci as LabelingIssuePanel,
-  Xt as LabelingNavigation,
+  $t as LabelingNavigation,
   bs as LabelingNumberSection,
   bo as LabelingProvider,
   hs as LabelingTextSection,
@@ -3957,23 +3970,23 @@ export {
   Fa as TOOL_INFO_BRUSH,
   Xa as TOOL_INFO_COMBINED_LABELS,
   $a as TOOL_INFO_ERASER,
-  It as TOOL_INFO_FILLED_BOX,
+  Nt as TOOL_INFO_FILLED_BOX,
   wn as TOOL_INFO_FILLED_POLYGON,
-  Ct as TOOL_INFO_MAGIC_BRUSH,
+  vt as TOOL_INFO_MAGIC_BRUSH,
   _e as TOOL_INFO_SUPERPIXEL,
   za as WORKSPACE_VIEW_MODES,
-  hn as annotationToFabricProps,
+  fn as annotationToFabricProps,
   mo as basicBrushes,
-  Vt as basicColors,
-  ln as blankRectTool,
-  Qt as brushTool,
-  un as canvasToAnnotations,
-  nn as createImage,
+  Zt as basicColors,
+  dn as blankRectTool,
+  en as brushTool,
+  hn as canvasToAnnotations,
+  on as createImage,
   ei as createTemporalHistoryStore,
-  on as cropAlphaArea,
+  sn as cropAlphaArea,
   Un as emitLabelEvent,
   pe as ensureCanvas,
-  en as eraserTool,
+  tn as eraserTool,
   uo as fabricObjectToAnnotation,
   to as filledRectTool,
   ee as formatShortcutTitle,
@@ -3981,30 +3994,30 @@ export {
   Q as getCanvasInstance,
   Ue as getCanvasJSON,
   ni as getImageToolStore,
-  we as getLabeledObjects,
+  Se as getLabeledObjects,
   Jo as getLabelingShortcutKey,
   Qa as getToolSelectionStore,
   ti as getViewModeStore,
   On as loadFabric,
-  yt as magicbrushTool,
-  sn as polygonTool,
-  Ne as renderAllSafe,
+  bt as magicbrushTool,
+  an as polygonTool,
+  ke as renderAllSafe,
   no as segmentAnythingTool,
-  Tt as selectionTool,
-  Rt as setCanvasInstance,
+  Bt as selectionTool,
+  At as setCanvasInstance,
   Ja as setMagicBrushModule,
   ja as setSuperpixelModules,
   Zn as subscribeLabelEvents,
-  dn as superpixelTool,
-  ct as toHex,
+  un as superpixelTool,
+  it as toHex,
   qa as toRGBAHex,
-  tn as toRgba,
-  Pt as toRgbaArray,
+  nn as toRgba,
+  Tt as toRgbaArray,
   Ka as transparentBlackPixel,
-  wt as useBrushStore,
-  dt as useCanvasObjectsStore,
+  Lt as useBrushStore,
+  lt as useCanvasObjectsStore,
   di as useExtensions,
-  Ke as useImageToolStore,
+  wt as useImageToolStore,
   St as useIssuePanelStore,
   Qo as useKeyboardShortcuts,
   oi as useLabelBatchStore,
@@ -4015,18 +4028,18 @@ export {
   li as useLabelingHistory,
   ts as useLabelingTools,
   ma as useLabelingUIMeta,
-  Se as useLayerModeStore,
-  vn as useNumberSegmentSelectionStore,
-  zt as useNumberToolStore,
-  lt as useOpacityStore,
+  Me as useLayerModeStore,
+  Cn as useNumberSegmentSelectionStore,
+  Ft as useNumberToolStore,
+  rt as useOpacityStore,
   We as usePaletteStore,
-  mn as useSelectedObjectsStore,
+  gn as useSelectedObjectsStore,
   vo as useTextAutoHighlightStore,
-  gn as useTextSegmentSelectionStore,
-  Yt as useTextToolStore,
+  vn as useTextSegmentSelectionStore,
+  zt as useTextToolStore,
   Ko as useToolInit,
-  Ee as useToolSelectionStore,
-  Bt as useValidationModeStore,
+  we as useToolSelectionStore,
+  Et as useValidationModeStore,
   qe as useViewModeStore,
   Co as useWorkspaceLayoutStore,
   Ge as useZoomStore