@blocklet/labels 1.5.200 → 1.5.202

package/dist/index.es.js

@@ -1,82 +1,109 @@
-import { jsx as r, jsxs as C, Fragment as L } from "react/jsx-runtime";
-import { createContext as V, useRef as D, useState as A, useCallback as k, useEffect as M, useMemo as N, useContext as q } from "react";
-import { ExpandMore as W, Add as Z, EditOutlined as G, DeleteOutlineOutlined as U, Edit as Y, LabelOutlined as X } from "@mui/icons-material";
-import f from "@mui/material/Box";
-import { styled as R } from "@mui/material/styles";
-import { Tree as ee } from "react-arborist";
-import { Icon as te } from "@iconify/react";
-import ne from "lodash/omit";
-import re, { components as $ } from "react-select";
-import oe from "@mui/material/Typography";
-import O from "@mui/material/Button";
-import E from "@mui/material/IconButton";
-import { TranslationTextField as le, TranslationTag as ae } from "@blocklet/translation-input";
-import j from "@mui/material/TextField";
-import se from "@mui/material/ClickAwayListener";
-import { GithubPicker as ie } from "react-color";
-import J from "@arcblock/ux/lib/Dialog";
-import ce from "@mui/material/Alert";
-import { ClickAwayListener as de, Box as ue, Chip as he, IconButton as pe, Button as fe, getContrastRatio as me, alpha as ge } from "@mui/material";
-import { useLocaleContext as ye } from "@arcblock/ux/lib/Locale/context";
-const xe = (e) => /* @__PURE__ */ r("svg", { viewBox: "0 0 24 24", width: "1.2em", height: "1.2em", ...e, children: /* @__PURE__ */ r("path", { fill: "currentColor", d: "M5 19q-.825 0-1.413-.587Q3 17.825 3 17V7q0-.825.587-1.412Q4.175 5 5 5h10q.5 0 .938.225q.437.225.712.625l3.525 5q.375.525.375 1.15q0 .625-.375 1.15l-3.525 5q-.275.4-.712.625Q15.5 19 15 19Z" }) }), Ce = (e) => /* @__PURE__ */ r("svg", { viewBox: "0 0 24 24", width: "1.2em", height: "1.2em", ...e, children: /* @__PURE__ */ r("path", { fill: "currentColor", d: "m10 16.4l-4-4L7.4 11l2.6 2.6L16.6 7L18 8.4Z" }) }), _ = V({});
-function ve({
-  selectable: e = !1,
-  selected: t = [],
-  onSelect: s,
-  renderItem: l,
-  children: o
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { createContext, useRef, useState, useCallback, useEffect, useMemo, useContext } from "react";
+import { ExpandMore, Add, EditOutlined, DeleteOutlineOutlined, Edit, LabelOutlined } from "@mui/icons-material";
+import Box from "@mui/material/Box";
+import { styled } from "@mui/material/styles";
+import { Tree } from "react-arborist";
+import { Icon } from "@iconify/react";
+import omit from "lodash/omit";
+import Select, { components } from "react-select";
+import Typography from "@mui/material/Typography";
+import Button from "@mui/material/Button";
+import IconButton from "@mui/material/IconButton";
+import { TranslationTextField, TranslationTag } from "@blocklet/translation-input";
+import { useSetState, useReactive, useRequest } from "ahooks";
+import TextField from "@mui/material/TextField";
+import ClickAwayListener from "@mui/material/ClickAwayListener";
+import { GithubPicker } from "react-color";
+import Dialog from "@arcblock/ux/lib/Dialog";
+import Alert from "@mui/material/Alert";
+import { ClickAwayListener as ClickAwayListener$1, Box as Box$1, Chip, IconButton as IconButton$1, Button as Button$1, getContrastRatio, alpha } from "@mui/material";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { createContainer } from "unstated-next";
+import { arrayToTree } from "performant-array-to-tree";
+const materialSymbolsLabelRounded = (props) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "1.2em", height: "1.2em", ...props, children: /* @__PURE__ */ jsx("path", { fill: "currentColor", d: "M5 19q-.825 0-1.413-.587Q3 17.825 3 17V7q0-.825.587-1.412Q4.175 5 5 5h10q.5 0 .938.225q.437.225.712.625l3.525 5q.375.525.375 1.15q0 .625-.375 1.15l-3.525 5q-.275.4-.712.625Q15.5 19 15 19Z" }) });
+const materialSymbolsCheckSmall = (props) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "1.2em", height: "1.2em", ...props, children: /* @__PURE__ */ jsx("path", { fill: "currentColor", d: "m10 16.4l-4-4L7.4 11l2.6 2.6L16.6 7L18 8.4Z" }) });
+const LabelTreeContext = createContext({});
+function LabelTreeProvider({
+  selectable = false,
+  selected = [],
+  onSelect,
+  renderItem,
+  children
 }) {
-  const n = (p) => t.indexOf(p) !== -1, a = (p) => {
-    Array.from(new Set(t).add(p)), s == null || s(p);
-  }, u = N(
+  const isSelected = (id) => selected.indexOf(id) !== -1;
+  const select = (id) => {
+    Array.from(new Set(selected).add(id));
+    onSelect == null ? void 0 : onSelect(id);
+  };
+  const value = useMemo(
     () => ({
-      selectable: e,
-      selected: t,
-      isSelected: n,
-      select: a,
-      renderItem: l
+      selectable,
+      selected,
+      isSelected,
+      select,
+      renderItem
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [t]
+    [selected]
   );
-  return /* @__PURE__ */ r(_.Provider, { value: u, children: o });
+  return /* @__PURE__ */ jsx(LabelTreeContext.Provider, { value, children });
 }
-const be = (e) => {
-  var t;
-  return e.isLeaf || !((t = e.data.children) != null && t.length);
+const isLeaf = (node) => {
+  var _a;
+  return node.isLeaf || !((_a = node.data.children) == null ? void 0 : _a.length);
 };
-function Se({ node: e }) {
-  return be(e) ? /* @__PURE__ */ r("span", {}) : e.isOpen ? /* @__PURE__ */ r(W, { style: { fontSize: 20 } }) : /* @__PURE__ */ r(W, { style: { fontSize: 20, transform: "rotate(-90deg)" } });
+function FolderArrow({ node }) {
+  if (isLeaf(node))
+    return /* @__PURE__ */ jsx("span", {});
+  return node.isOpen ? /* @__PURE__ */ jsx(ExpandMore, { style: { fontSize: 20 } }) : /* @__PURE__ */ jsx(ExpandMore, { style: { fontSize: 20, transform: "rotate(-90deg)" } });
 }
-function we({ node: e, style: t, dragHandle: s }) {
-  const { selectable: l, select: o, isSelected: n, renderItem: a } = q(_), { data: u } = e, p = u.icon ? /* @__PURE__ */ r(te, { icon: u.icon, style: { fontSize: 18 } }) : /* @__PURE__ */ r(xe, { style: { fontSize: 18, color: u.color || "#ddd" } }), y = (x) => {
-    x.stopPropagation(), e.isInternal && e.toggle();
-  }, b = (x) => {
-    x.stopPropagation(), l && o(e.id);
-  }, m = /* @__PURE__ */ C(L, { children: [
-    /* @__PURE__ */ C(f, { sx: { display: "flex", alignItems: "center", flex: 1 }, children: [
-      /* @__PURE__ */ r(f, { sx: { display: "flex", cursor: "pointer" }, onClick: y, children: /* @__PURE__ */ r(Se, { node: e }) }),
-      /* @__PURE__ */ r(f, { sx: { display: "flex", alignItems: "center", width: 22, height: 22 }, children: p }),
-      /* @__PURE__ */ r(f, { component: "span", sx: { color: "grey.700" }, children: e.data.name })
+function Node({ node, style, dragHandle }) {
+  const { selectable, select, isSelected, renderItem } = useContext(LabelTreeContext);
+  const { data } = node;
+  const icon = data.icon ? /* @__PURE__ */ jsx(Icon, { icon: data.icon, style: { fontSize: 18 } }) : /* @__PURE__ */ jsx(materialSymbolsLabelRounded, { style: { fontSize: 18, color: data.color || "#ddd" } });
+  const handleToggle = (e) => {
+    e.stopPropagation();
+    if (node.isInternal) {
+      node.toggle();
+    }
+  };
+  const handleClick = (e) => {
+    e.stopPropagation();
+    if (selectable) {
+      select(node.id);
+    }
+  };
+  const children = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", flex: 1 }, children: [
+      /* @__PURE__ */ jsx(Box, { sx: { display: "flex", cursor: "pointer" }, onClick: handleToggle, children: /* @__PURE__ */ jsx(FolderArrow, { node }) }),
+      /* @__PURE__ */ jsx(Box, { sx: { display: "flex", alignItems: "center", width: 22, height: 22 }, children: icon }),
+      /* @__PURE__ */ jsx(Box, { component: "span", sx: { color: "grey.700" }, children: node.data.name })
     ] }),
-    l && n(e.id) && /* @__PURE__ */ r(Ce, {})
+    selectable && isSelected(node.id) && /* @__PURE__ */ jsx(materialSymbolsCheckSmall, {})
   ] });
-  return /* @__PURE__ */ C(
-    f,
+  return /* @__PURE__ */ jsxs(
+    Box,
     {
       className: "label-tree-item",
-      style: t,
+      style,
       sx: { display: "flex", alignItems: "center", justifyContent: "space-between" },
-      ref: s,
-      onClick: b,
+      ref: dragHandle,
+      onClick: handleClick,
       children: [
-        !a && m,
-        !!a && a(m, e.data)
+        !renderItem && children,
+        !!renderItem && renderItem(children, node.data)
       ]
     }
   );
 }
-const Ie = R(f)`
+const Root = styled(Box)`
   > div,
   > div > div,
   > div > div > div {
@@ -90,71 +117,114 @@ const Ie = R(f)`
     width: 100%;
   }
 `;
-function F({
-  data: e,
-  selectable: t,
-  selected: s = [],
-  onSelect: l,
-  rowHeight: o = 28,
-  renderItem: n,
-  sx: a,
-  ...u
+function LabelTree({
+  data,
+  selectable,
+  selected = [],
+  onSelect,
+  rowHeight = 28,
+  renderItem,
+  sx,
+  ...rest
 }) {
-  const p = D(), y = [...Array.isArray(a) ? a : [a]], [b, m] = A(0), x = k(() => {
-    var c, i;
-    m((((i = (c = p.current) == null ? void 0 : c.visibleNodes) == null ? void 0 : i.length) || 0) * o);
-  }, [o]);
-  return M(() => {
-    x();
-  }, [e, x]), /* @__PURE__ */ r(ve, { selectable: t, selected: s, onSelect: l, renderItem: n, children: /* @__PURE__ */ r(Ie, { ...u, sx: y, children: /* @__PURE__ */ r(ee, { data: e, rowHeight: o, height: b, indent: 32, ref: p, onToggle: () => {
-    setTimeout(x);
-  }, children: we }) }) });
+  const tree = useRef();
+  const mergedSx = [...Array.isArray(sx) ? sx : [sx]];
+  const [height, setHeight] = useState(0);
+  const updateHeight = useCallback(() => {
+    var _a, _b;
+    setHeight((((_b = (_a = tree.current) == null ? void 0 : _a.visibleNodes) == null ? void 0 : _b.length) || 0) * rowHeight);
+  }, [rowHeight]);
+  useEffect(() => {
+    updateHeight();
+  }, [data, updateHeight]);
+  const handleToggle = () => {
+    setTimeout(updateHeight);
+  };
+  return /* @__PURE__ */ jsx(LabelTreeProvider, { selectable, selected, onSelect, renderItem, children: /* @__PURE__ */ jsx(Root, { ...rest, sx: mergedSx, children: /* @__PURE__ */ jsx(Tree, { data, rowHeight, height, indent: 32, ref: tree, onToggle: handleToggle, children: Node }) }) });
 }
-const B = (e) => e.reduce((t, s) => {
-  var l;
-  return t.push(s), (l = s.children) != null && l.length && t.push(...B(s.children)), t;
-}, []), H = (e) => e.map((t) => {
-  var s;
-  return (s = t.children) != null && s.length && (t.children = H(t.children)), t;
-}), ze = (e, t = null) => {
+const flatten = (data) => {
+  return data.reduce((acc, cur) => {
+    var _a;
+    acc.push(cur);
+    if ((_a = cur.children) == null ? void 0 : _a.length) {
+      acc.push(...flatten(cur.children));
+    }
+    return acc;
+  }, []);
+};
+const copyTree = (data) => {
+  return data.map((item) => {
+    var _a;
+    if ((_a = item.children) == null ? void 0 : _a.length) {
+      item.children = copyTree(item.children);
+    }
+    return item;
+  });
+};
+const safeParseJSON = (json, defaultValue = null) => {
   try {
-    return JSON.parse(e);
+    return JSON.parse(json);
   } catch {
-    return t;
+    return defaultValue;
   }
-}, ke = (e) => {
-  const t = e.reduce((o, n) => (o[n.id] = o[n.id] || {}, n.parentId && (o[n.id].parent = n.parentId, o[n.parentId] = o[n.parentId] || {}, o[n.parentId].children = o[n.parentId].children || [], o[n.parentId].children.push(n.id)), o), {}), s = e.map(({ parentId: o, translation: n, ...a }) => ({
-    ...a,
-    translation: ze(n),
+};
+const transformLabels = (labelDtos) => {
+  const relations = labelDtos.reduce((acc, cur) => {
+    acc[cur.id] = acc[cur.id] || {};
+    if (cur.parentId) {
+      acc[cur.id].parent = cur.parentId;
+      acc[cur.parentId] = acc[cur.parentId] || {};
+      acc[cur.parentId].children = acc[cur.parentId].children || [];
+      acc[cur.parentId].children.push(cur.id);
+    }
+    return acc;
+  }, {});
+  const labels = labelDtos.map(({ parentId, translation, ...rest }) => ({
+    ...rest,
+    translation: safeParseJSON(translation),
     children: []
-  })), l = s.reduce((o, n) => ({ ...o, [n.id]: n }), {});
-  return s.forEach((o) => {
-    const n = t[o.id];
-    n.parent && l[n.parent] && (o.parent = l[n.parent]), n.children && (o.children = n.children.map((a) => l[a]));
-  }), s.filter((o) => !o.parent);
-}, Ae = (e) => {
-  const { options: t, getValue: s, selectProps: l, selectOption: o } = e, n = s(), a = (u) => {
-    const p = t.find((y) => y.data.id === u);
-    p && o(p);
+  }));
+  const labelsKeyById = labels.reduce((acc, cur) => ({ ...acc, [cur.id]: cur }), {});
+  labels.forEach((item) => {
+    const relation = relations[item.id];
+    if (relation.parent && labelsKeyById[relation.parent]) {
+      item.parent = labelsKeyById[relation.parent];
+    }
+    if (relation.children) {
+      item.children = relation.children.map((childId) => labelsKeyById[childId]);
+    }
+  });
+  return labels.filter((item) => !item.parent);
+};
+const LabelMenuList = (props) => {
+  const { options, getValue, selectProps, selectOption } = props;
+  const value = getValue();
+  const handleSelect = (id) => {
+    const option = options.find((item) => item.data.id === id);
+    if (option) {
+      selectOption(option);
+    }
   };
-  return /* @__PURE__ */ C(L, { children: [
-    /* @__PURE__ */ r($.MenuList, { ...ne(e, ["addon"]), children: /* @__PURE__ */ r(f, { sx: { px: 2, py: 1 }, children: /* @__PURE__ */ r(
-      F,
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(components.MenuList, { ...omit(props, ["addon"]), children: /* @__PURE__ */ jsx(Box, { sx: { px: 2, py: 1 }, children: /* @__PURE__ */ jsx(
+      LabelTree,
       {
-        data: l.data,
-        selectable: !0,
-        onSelect: a,
-        selected: n.map((u) => u.data.id)
+        data: selectProps.data,
+        selectable: true,
+        onSelect: handleSelect,
+        selected: value.map((item) => item.data.id)
       }
     ) }) }),
-    e.addon
+    props.addon
   ] });
-}, Ne = ({ children: e, ...t }) => {
-  const [s, l] = e, o = Array.isArray(s) ? s.length : 0;
-  return /* @__PURE__ */ C($.ValueContainer, { ...t, children: [
-    /* @__PURE__ */ r(f, { component: "span", sx: { fontSize: 13, fontWeight: "bold" }, children: o ? "Labels" : "Filter by labels" }),
-    !!o && /* @__PURE__ */ r(
-      f,
+};
+const ValueContainer = ({ children, ...props }) => {
+  const [values, input] = children;
+  const count = Array.isArray(values) ? values.length : 0;
+  return /* @__PURE__ */ jsxs(components.ValueContainer, { ...props, children: [
+    /* @__PURE__ */ jsx(Box, { component: "span", sx: { fontSize: 13, fontWeight: "bold" }, children: count ? "Labels" : "Filter by labels" }),
+    !!count && /* @__PURE__ */ jsx(
+      Box,
       {
         sx: {
           display: "inline-flex",
@@ -167,250 +237,242 @@ const B = (e) => e.reduce((t, s) => {
           fontSize: 12,
           bgcolor: "grey.200"
         },
-        children: o
+        children: count
       }
     ),
-    l
+    input
   ] });
-}, Te = {
-  control: (e) => ({
-    ...e,
+};
+const compactSelectStyles = {
+  control: (provided) => ({
+    ...provided,
     minHeight: 31
   }),
-  valueContainer: (e) => ({
-    ...e,
+  valueContainer: (provided) => ({
+    ...provided,
     display: "flex"
   }),
-  dropdownIndicator: (e) => ({
-    ...e,
+  dropdownIndicator: (provided) => ({
+    ...provided,
     padding: "0 4px"
   }),
-  clearIndicator: (e) => ({
-    ...e,
+  clearIndicator: (provided) => ({
+    ...provided,
     padding: "4px"
   })
 };
-function Oe({
-  data: e,
-  value: t = [],
-  editable: s = !1,
-  addon: l,
-  onChange: o,
-  compact: n,
-  isMulti: a = !0,
-  maxHeight: u = 264,
-  ...p
+function LabelPicker({
+  data,
+  value = [],
+  editable = false,
+  addon,
+  onChange,
+  compact,
+  isMulti = true,
+  maxHeight = 264,
+  ...rest
 }) {
-  const y = D(null), b = N(
-    () => B(e).map((h) => ({ data: h, label: h.name, value: h.id })),
-    [e]
-  ), m = b.reduce(
-    (h, I) => ({ ...h, [I.data.id]: I }),
+  const selectRef = useRef(null);
+  const options = useMemo(
+    () => flatten(data).map((item) => ({ data: item, label: item.name, value: item.id })),
+    [data]
+  );
+  const optionsKeyById = options.reduce(
+    (acc, cur) => ({ ...acc, [cur.data.id]: cur }),
     {}
-  ), x = Array.isArray(t) ? t : [t], z = x.map((h) => m[h]), c = D({
-    prev: x.map((h) => {
-      var I;
-      return ((I = m[h]) == null ? void 0 : I.data) || "";
+  );
+  const valueArr = Array.isArray(value) ? value : [value];
+  const selectedOptions = valueArr.map((item) => optionsKeyById[item]);
+  const changes = useRef({
+    prev: valueArr.map((item) => {
+      var _a;
+      return ((_a = optionsKeyById[item]) == null ? void 0 : _a.data) || "";
     })
-  }), i = (h, I) => {
-    !a || !Array.isArray(h) ? o(h ? [h.data] : []) : c.current.current = h.map((d) => d.data), ["clear", "remove-value"].includes(I.action) && y.current && setTimeout(() => {
-      var d;
-      return (d = y == null ? void 0 : y.current) == null ? void 0 : d.blur();
-    }, 1);
-  }, S = () => {
-    c.current.current && JSON.stringify(c.current.prev.map((I) => I.id)) !== JSON.stringify(c.current.current.map((I) => I.id)) && (o(c.current.current), c.current.prev = c.current.current);
+  });
+  const handleChange = (v, actionMeta) => {
+    if (!isMulti || !Array.isArray(v)) {
+      onChange(v ? [v.data] : []);
+    } else {
+      changes.current.current = v.map((item) => item.data);
+    }
+    if (["clear", "remove-value"].includes(actionMeta.action) && selectRef.current) {
+      setTimeout(() => {
+        var _a;
+        return (_a = selectRef == null ? void 0 : selectRef.current) == null ? void 0 : _a.blur();
+      }, 1);
+    }
+  };
+  const handleMenuClose = () => {
+    if (changes.current.current) {
+      const changed = JSON.stringify(changes.current.prev.map((item) => item.id)) !== JSON.stringify(changes.current.current.map((item) => item.id));
+      if (changed) {
+        onChange(changes.current.current);
+        changes.current.prev = changes.current.current;
+      }
+    }
   };
-  return /* @__PURE__ */ r(f, { ...p, children: /* @__PURE__ */ r(
-    re,
+  return /* @__PURE__ */ jsx(Box, { ...rest, children: /* @__PURE__ */ jsx(
+    Select,
     {
-      ref: y,
-      defaultValue: z,
-      options: b,
-      onChange: i,
+      ref: selectRef,
+      defaultValue: selectedOptions,
+      options,
+      onChange: handleChange,
       components: {
         // @ts-ignore
-        MenuList: (h) => /* @__PURE__ */ r(Ae, { ...h, addon: l }),
+        MenuList: (props) => /* @__PURE__ */ jsx(LabelMenuList, { ...props, addon }),
         // eslint-disable-line react/no-unstable-nested-components
-        ...n && { ValueContainer: Ne }
+        ...compact && { ValueContainer }
       },
       placeholder: "Select labels",
       styles: {
-        ...n && Te,
-        menu: (h) => ({
-          ...h,
-          ...s && { paddingBottom: "36px" },
+        ...compact && compactSelectStyles,
+        menu: (css) => ({
+          ...css,
+          ...editable && { paddingBottom: "36px" },
           zIndex: 99
         }),
-        menuList: (h) => ({
-          ...h,
+        menuList: (css) => ({
+          ...css,
           overflowY: "auto",
-          maxHeight: `${u}px`
+          maxHeight: `${maxHeight}px`
         })
       },
-      theme: (h) => ({
-        ...h,
+      theme: (_theme) => ({
+        ..._theme,
         colors: {
-          ...h.colors,
+          ..._theme.colors,
           primary25: "#ddd",
           primary50: "#ddd",
           primary: "#ddd"
         }
       }),
-      isSearchable: !1,
-      isMulti: a,
-      closeMenuOnSelect: !a,
-      onMenuClose: S,
-      isClearable: !0,
-      data: e
+      isSearchable: false,
+      isMulti,
+      closeMenuOnSelect: !isMulti,
+      onMenuClose: handleMenuClose,
+      isClearable: true,
+      data
     }
   ) });
 }
-var P = function() {
-  return P = Object.assign || function(t) {
-    for (var s, l = 1, o = arguments.length; l < o; l++) {
-      s = arguments[l];
-      for (var n in s)
-        Object.prototype.hasOwnProperty.call(s, n) && (t[n] = s[n]);
-    }
-    return t;
-  }, P.apply(this, arguments);
-};
-function Be(e, t) {
-  var s = typeof Symbol == "function" && e[Symbol.iterator];
-  if (!s)
-    return e;
-  var l = s.call(e), o, n = [], a;
-  try {
-    for (; (t === void 0 || t-- > 0) && !(o = l.next()).done; )
-      n.push(o.value);
-  } catch (u) {
-    a = { error: u };
-  } finally {
-    try {
-      o && !o.done && (s = l.return) && s.call(l);
-    } finally {
-      if (a)
-        throw a.error;
+function LabelFormDialog({ open, initialLabel, onSubmit, onClose, ...rest }) {
+  const isNew = !(initialLabel == null ? void 0 : initialLabel.id);
+  const [state, setState] = useSetState({
+    name: (initialLabel == null ? void 0 : initialLabel.name) || "",
+    color: (initialLabel == null ? void 0 : initialLabel.color) || "#ddd",
+    slug: (initialLabel == null ? void 0 : initialLabel.id) || "",
+    translation: (initialLabel == null ? void 0 : initialLabel.translation) || {}
+  });
+  const isValidColor = (color) => /^#([0-9A-F]{3}){1,2}$/i.test(color);
+  const canSubmit = useMemo(() => {
+    if (isNew) {
+      return state.name && state.color && state.slug && isValidColor(state.color);
     }
-  }
-  return n;
-}
-var Le = function(e) {
-  return typeof e == "function";
-}, Pe = function(e) {
-  var t = Be(A(e), 2), s = t[0], l = t[1], o = k(function(n) {
-    l(function(a) {
-      var u = Le(n) ? n(a) : n;
-      return u ? P(P({}, a), u) : a;
-    });
-  }, []);
-  return [s, o];
-};
-const Ee = Pe;
-function je({ open: e, initialLabel: t, onSubmit: s, onClose: l, ...o }) {
-  const n = !(t != null && t.id), [a, u] = Ee({
-    name: (t == null ? void 0 : t.name) || "",
-    color: (t == null ? void 0 : t.color) || "#ddd",
-    slug: (t == null ? void 0 : t.id) || "",
-    translation: (t == null ? void 0 : t.translation) || {}
-  }), p = (i) => /^#([0-9A-F]{3}){1,2}$/i.test(i), y = N(() => n ? a.name && a.color && a.slug && p(a.color) : a.name && a.color && p(a.color), [a, n]), [b, m] = A(!1), x = () => {
-    s({ ...t, name: a.name, color: a.color, id: a.slug, translation: a.translation });
-  }, z = (i) => {
-    u({ color: i.hex }), setTimeout(() => m(!1));
-  }, c = (i) => {
-    u({ color: i.target.value });
+    return state.name && state.color && isValidColor(state.color);
+  }, [state, isNew]);
+  const [colorPickerVisible, setColorPickerVisible] = useState(false);
+  const handleSubmit = () => {
+    onSubmit({ ...initialLabel, name: state.name, color: state.color, id: state.slug, translation: state.translation });
+  };
+  const handleColorChange = (color) => {
+    setState({ color: color.hex });
+    setTimeout(() => setColorPickerVisible(false));
+  };
+  const handleColorTextChange = (e) => {
+    setState({ color: e.target.value });
   };
-  return /* @__PURE__ */ r(
-    J,
+  return /* @__PURE__ */ jsx(
+    Dialog,
     {
-      open: e,
-      showCloseButton: !0,
+      open,
+      showCloseButton: true,
       maxWidth: "lg",
-      title: n ? "Create label" : "Edit label",
-      actions: /* @__PURE__ */ C(L, { children: [
-        /* @__PURE__ */ r(O, { color: "inherit", variant: "contained", size: "small", onClick: l, children: "Cancel" }),
-        /* @__PURE__ */ r(O, { color: "primary", variant: "contained", size: "small", onClick: x, disabled: !y, children: n ? "Create" : "Save Changes" })
+      title: isNew ? "Create label" : "Edit label",
+      actions: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Button, { color: "inherit", variant: "contained", size: "small", onClick: onClose, children: "Cancel" }),
+        /* @__PURE__ */ jsx(Button, { color: "primary", variant: "contained", size: "small", onClick: handleSubmit, disabled: !canSubmit, children: isNew ? "Create" : "Save Changes" })
       ] }),
-      onClose: l,
-      ...o,
-      children: /* @__PURE__ */ C(f, { width: 600, minHeight: 320, children: [
-        /* @__PURE__ */ r(
-          le,
+      onClose,
+      ...rest,
+      children: /* @__PURE__ */ jsxs(Box, { width: 600, minHeight: 320, children: [
+        /* @__PURE__ */ jsx(
+          TranslationTextField,
           {
             label: "Name",
-            value: a.name,
+            value: state.name,
             placeholder: "New label",
             size: "small",
-            fullWidth: !0,
-            onChange: (i) => u({ name: i.target.value }),
+            fullWidth: true,
+            onChange: (e) => setState({ name: e.target.value }),
             translationInputProps: {
-              value: a.translation,
-              onChange: (i) => u({ translation: i })
+              value: state.translation,
+              onChange: (v) => setState({ translation: v })
             }
           }
         ),
-        /* @__PURE__ */ r(
-          j,
+        /* @__PURE__ */ jsx(
+          TextField,
           {
             label: "Slug",
-            value: a.slug,
+            value: state.slug,
             size: "small",
-            fullWidth: !0,
-            disabled: !n,
-            onChange: (i) => u({ slug: i.target.value }),
+            fullWidth: true,
+            disabled: !isNew,
+            onChange: (e) => setState({ slug: e.target.value }),
             sx: { mt: 2 }
           }
         ),
-        (t == null ? void 0 : t.parent) && /* @__PURE__ */ r(j, { label: "Parent", value: t.parent.name, size: "small", fullWidth: !0, disabled: !0, sx: { mt: 2 } }),
-        /* @__PURE__ */ r(se, { onClickAway: () => m(!1), children: /* @__PURE__ */ C(f, { sx: { position: "relative", mt: 2 }, children: [
-          /* @__PURE__ */ C(f, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
-            /* @__PURE__ */ r(
-              f,
+        (initialLabel == null ? void 0 : initialLabel.parent) && /* @__PURE__ */ jsx(TextField, { label: "Parent", value: initialLabel.parent.name, size: "small", fullWidth: true, disabled: true, sx: { mt: 2 } }),
+        /* @__PURE__ */ jsx(ClickAwayListener, { onClickAway: () => setColorPickerVisible(false), children: /* @__PURE__ */ jsxs(Box, { sx: { position: "relative", mt: 2 }, children: [
+          /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+            /* @__PURE__ */ jsx(
+              Box,
               {
-                sx: { width: 30, height: 30, bgcolor: a.color, borderRadius: 1 },
-                onClick: () => m(!0)
+                sx: { width: 30, height: 30, bgcolor: state.color, borderRadius: 1 },
+                onClick: () => setColorPickerVisible(true)
               }
             ),
-            /* @__PURE__ */ r(
-              j,
+            /* @__PURE__ */ jsx(
+              TextField,
               {
                 label: "",
-                value: a.color,
+                value: state.color,
                 size: "small",
-                onChange: c,
+                onChange: handleColorTextChange,
                 inputProps: { maxLength: 7 },
                 sx: { width: 100, ".MuiInputBase-root": { height: 32 } }
               }
             )
           ] }),
-          b && /* @__PURE__ */ r(f, { sx: { position: "absolute", top: 48, zIndex: 1 }, children: /* @__PURE__ */ r(ie, { color: a.color, onChangeComplete: z }) })
+          colorPickerVisible && /* @__PURE__ */ jsx(Box, { sx: { position: "absolute", top: 48, zIndex: 1 }, children: /* @__PURE__ */ jsx(GithubPicker, { color: state.color, onChangeComplete: handleColorChange }) })
         ] }) })
       ] })
     }
   );
 }
-function De({ open: e, label: t, onSubmit: s, onClose: l, ...o }) {
-  return /* @__PURE__ */ r(
-    J,
+function LabelDeleteDialog({ open, label, onSubmit, onClose, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    Dialog,
     {
-      open: e,
-      showCloseButton: !0,
+      open,
+      showCloseButton: true,
       maxWidth: "md",
       title: "Delete",
-      actions: /* @__PURE__ */ C(L, { children: [
-        /* @__PURE__ */ r(O, { color: "inherit", variant: "contained", size: "small", onClick: l, children: "Cancel" }),
-        /* @__PURE__ */ r(O, { color: "primary", variant: "contained", size: "small", onClick: s, children: "Delete" })
+      actions: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Button, { color: "inherit", variant: "contained", size: "small", onClick: onClose, children: "Cancel" }),
+        /* @__PURE__ */ jsx(Button, { color: "primary", variant: "contained", size: "small", onClick: onSubmit, children: "Delete" })
       ] }),
-      onClose: l,
-      ...o,
-      children: /* @__PURE__ */ C(f, { width: 600, minHeight: 280, children: [
-        /* @__PURE__ */ r(ce, { severity: "info", sx: { mb: 2 }, children: "Are you sure you want to delete these labels ?" }),
-        /* @__PURE__ */ r(F, { data: [t] })
+      onClose,
+      ...rest,
+      children: /* @__PURE__ */ jsxs(Box, { width: 600, minHeight: 280, children: [
+        /* @__PURE__ */ jsx(Alert, { severity: "info", sx: { mb: 2 }, children: "Are you sure you want to delete these labels ?" }),
+        /* @__PURE__ */ jsx(LabelTree, { data: [label] })
       ] })
     }
   );
 }
-const Me = R(F)`
+const StyledLabelTree = styled(LabelTree)`
   .label-tree-item {
     &:before {
       content: '';
@@ -431,211 +493,459 @@ const Me = R(F)`
     padding: 0 16px;
   }
 `;
-function at({ data: e, api: t, ...s }) {
-  const [l, o] = A(null), [n, a] = A(null), [u, p] = A(H(e)), y = N(() => B(u), [u]), b = N(() => {
-    const d = (g, w) => g.map((v) => (w && (v.parent = w), v.children && (v.children = d(v.children, v)), v));
-    return d(u);
-  }, [u]), m = (d) => {
-    var g, w;
-    d.parent ? (d.parent.children = (w = (g = d.parent) == null ? void 0 : g.children) == null ? void 0 : w.map((v) => v.id === d.id ? { ...d } : v), m(d.parent)) : p(u.map((v) => v.id === d.id ? { ...d } : v));
-  }, x = (d) => {
-    d.parent ? (d.parent.children = d.parent.children || [], d.parent.children.push(d), p([...u])) : p([...u, d]);
-  }, z = (d) => {
-    var g;
-    d.parent ? d.parent.children = (g = d.parent.children) == null ? void 0 : g.filter((w) => w.id !== d.id) : p(u.filter((w) => w.id !== d.id));
-  }, c = (d) => {
-    if (l)
+function LabelManager({ data, api, ...rest }) {
+  const [editingLabel, setEditingLabel] = useState(null);
+  const [deletingLabel, setDeletingLabel] = useState(null);
+  const [copy, setCopy] = useState(copyTree(data));
+  const flattened = useMemo(() => flatten(copy), [copy]);
+  const treeData = useMemo(() => {
+    const format = (nodes, parent) => {
+      return nodes.map((node) => {
+        if (parent) {
+          node.parent = parent;
+        }
+        if (node.children) {
+          node.children = format(node.children, node);
+        }
+        return node;
+      });
+    };
+    return format(copy);
+  }, [copy]);
+  const updateNode = (label) => {
+    var _a, _b;
+    if (!label.parent) {
+      setCopy(copy.map((item) => item.id === label.id ? { ...label } : item));
+    } else {
+      label.parent.children = (_b = (_a = label.parent) == null ? void 0 : _a.children) == null ? void 0 : _b.map((item) => item.id === label.id ? { ...label } : item);
+      updateNode(label.parent);
+    }
+  };
+  const addNode = (label) => {
+    if (label.parent) {
+      label.parent.children = label.parent.children || [];
+      label.parent.children.push(label);
+      setCopy([...copy]);
+    } else {
+      setCopy([...copy, label]);
+    }
+  };
+  const deleteNode = (label) => {
+    var _a;
+    if (label.parent) {
+      label.parent.children = (_a = label.parent.children) == null ? void 0 : _a.filter((item) => item.id !== label.id);
+    } else {
+      setCopy(copy.filter((item) => item.id !== label.id));
+    }
+  };
+  const handleAdd = (parent) => {
+    if (editingLabel) {
       return;
-    o({ id: "", name: "New label", parent: d, color: "#dddddd" });
-  }, i = (d) => {
-    l || o(d);
-  }, S = async (d) => {
-    if (!l)
+    }
+    const newLabel = { id: "", name: "New label", parent, color: "#dddddd" };
+    setEditingLabel(newLabel);
+  };
+  const handleEdit = (label) => {
+    if (editingLabel) {
       return;
-    const { parent: g, children: w, translation: v, ...T } = d;
-    l.id ? (await t.updateLabel({ ...T, translation: JSON.stringify(v), parentId: g == null ? void 0 : g.id }), m(d)) : (await t.createLabel({ ...T, translation: JSON.stringify(v), parentId: g == null ? void 0 : g.id }), x(d)), o(null);
-  }, h = async () => {
-    n && (await t.deleteLabel(n.id), z(n), a(null));
-  }, I = (d, g) => /* @__PURE__ */ C(L, { children: [
-    /* @__PURE__ */ C(f, { sx: { display: "flex", alignItems: "center", flexWrap: "wrap" }, className: "label-name", children: [
-      /* @__PURE__ */ r(f, { children: d }),
-      g.translation && /* @__PURE__ */ r(f, { sx: { display: "flex", alignItems: "center", gap: 0.5, ml: 2 }, className: "label-translation", children: Object.keys(g.translation).map((w) => {
-        var T;
-        const v = (T = g.translation) == null ? void 0 : T[w];
-        return v ? /* @__PURE__ */ r(ae, { locale: w, value: v }, w) : null;
-      }) })
-    ] }),
-    /* @__PURE__ */ C(f, { sx: { display: "flex", gap: 1, flex: "0 0 auto" }, className: "label-action", children: [
-      /* @__PURE__ */ r(E, { color: "inherit", size: "small", sx: { color: "grey.500" }, onClick: () => c(g), children: /* @__PURE__ */ r(Z, { sx: { fontSize: 20 } }) }),
-      /* @__PURE__ */ r(E, { color: "inherit", size: "small", sx: { color: "grey.500" }, onClick: () => i(g), children: /* @__PURE__ */ r(G, { sx: { fontSize: 18 } }) }),
-      /* @__PURE__ */ r(E, { color: "inherit", size: "small", sx: { color: "grey.500" }, onClick: () => a(g), children: /* @__PURE__ */ r(U, { sx: { fontSize: 20 } }) })
-    ] })
-  ] });
-  return /* @__PURE__ */ C(f, { ...s, className: "label-container", children: [
-    /* @__PURE__ */ C(f, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
-      /* @__PURE__ */ r(oe, { component: "h2", variant: "h6", children: "Manage labels" }),
-      /* @__PURE__ */ r(
-        O,
+    }
+    setEditingLabel(label);
+  };
+  const handleSubmit = async (payload) => {
+    if (!editingLabel) {
+      return;
+    }
+    const { parent, children, translation, ...submitData } = payload;
+    if (!editingLabel.id) {
+      await api.createLabel({ ...submitData, translation: JSON.stringify(translation), parentId: parent == null ? void 0 : parent.id });
+      addNode(payload);
+    } else {
+      await api.updateLabel({ ...submitData, translation: JSON.stringify(translation), parentId: parent == null ? void 0 : parent.id });
+      updateNode(payload);
+    }
+    setEditingLabel(null);
+  };
+  const handleDelete = async () => {
+    if (!deletingLabel) {
+      return;
+    }
+    await api.deleteLabel(deletingLabel.id);
+    deleteNode(deletingLabel);
+    setDeletingLabel(null);
+  };
+  const renderItem = (children, label) => {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", flexWrap: "wrap" }, className: "label-name", children: [
+        /* @__PURE__ */ jsx(Box, { children }),
+        label.translation && /* @__PURE__ */ jsx(Box, { sx: { display: "flex", alignItems: "center", gap: 0.5, ml: 2 }, className: "label-translation", children: Object.keys(label.translation).map((key) => {
+          var _a;
+          const value = (_a = label.translation) == null ? void 0 : _a[key];
+          if (value) {
+            return /* @__PURE__ */ jsx(TranslationTag, { locale: key, value }, key);
+          }
+          return null;
+        }) })
+      ] }),
+      /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", gap: 1, flex: "0 0 auto" }, className: "label-action", children: [
+        /* @__PURE__ */ jsx(IconButton, { color: "inherit", size: "small", sx: { color: "grey.500" }, onClick: () => handleAdd(label), children: /* @__PURE__ */ jsx(Add, { sx: { fontSize: 20 } }) }),
+        /* @__PURE__ */ jsx(IconButton, { color: "inherit", size: "small", sx: { color: "grey.500" }, onClick: () => handleEdit(label), children: /* @__PURE__ */ jsx(EditOutlined, { sx: { fontSize: 18 } }) }),
+        /* @__PURE__ */ jsx(IconButton, { color: "inherit", size: "small", sx: { color: "grey.500" }, onClick: () => setDeletingLabel(label), children: /* @__PURE__ */ jsx(DeleteOutlineOutlined, { sx: { fontSize: 20 } }) })
+      ] })
+    ] });
+  };
+  return /* @__PURE__ */ jsxs(Box, { ...rest, className: "label-container", children: [
+    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+      /* @__PURE__ */ jsx(Typography, { component: "h2", variant: "h6", children: "Manage labels" }),
+      /* @__PURE__ */ jsx(
+        Button,
         {
           color: "primary",
           variant: "contained",
           size: "small",
           sx: { textTransform: "none" },
-          onClick: () => c(),
+          onClick: () => handleAdd(),
           children: "New label"
         }
       )
     ] }),
-    /* @__PURE__ */ C(f, { sx: { mt: 2, border: 1, borderColor: "grey.300", borderRadius: 1, overflow: "hidden" }, children: [
-      /* @__PURE__ */ C(f, { sx: { p: 2, fontSize: 14, fontWeight: "bold", bgcolor: "grey.200" }, className: "label-header", children: [
-        y.length,
+    /* @__PURE__ */ jsxs(Box, { sx: { mt: 2, border: 1, borderColor: "grey.300", borderRadius: 1, overflow: "hidden" }, children: [
+      /* @__PURE__ */ jsxs(Box, { sx: { p: 2, fontSize: 14, fontWeight: "bold", bgcolor: "grey.200" }, className: "label-header", children: [
+        flattened.length,
         " labels"
       ] }),
-      /* @__PURE__ */ r(f, { sx: { pt: 0.5 }, children: /* @__PURE__ */ r(Me, { data: b, selected: [], renderItem: I, rowHeight: 64 }) })
+      /* @__PURE__ */ jsx(Box, { sx: { pt: 0.5 }, children: /* @__PURE__ */ jsx(StyledLabelTree, { data: treeData, selected: [], renderItem, rowHeight: 64 }) })
     ] }),
-    /* @__PURE__ */ r(
-      je,
+    /* @__PURE__ */ jsx(
+      LabelFormDialog,
       {
-        open: !!l,
-        onClose: () => o(null),
-        initialLabel: l,
-        onSubmit: S
+        open: !!editingLabel,
+        onClose: () => setEditingLabel(null),
+        initialLabel: editingLabel,
+        onSubmit: handleSubmit
       },
-      l == null ? void 0 : l.id
+      editingLabel == null ? void 0 : editingLabel.id
     ),
-    /* @__PURE__ */ r(
-      De,
+    /* @__PURE__ */ jsx(
+      LabelDeleteDialog,
       {
-        open: !!n,
-        onClose: () => a(null),
-        label: n,
-        onSubmit: h
+        open: !!deletingLabel,
+        onClose: () => setDeletingLabel(null),
+        label: deletingLabel,
+        onSubmit: handleDelete
       },
-      n == null ? void 0 : n.id
+      deletingLabel == null ? void 0 : deletingLabel.id
     )
   ] });
 }
-const K = V({}), Q = () => q(K), st = () => {
-  const { updateLabels: e } = Q();
-  M(() => () => {
-    e();
-  }, []);
+class TreeNode {
+  constructor({ data, parent, children }) {
+    __publicField(this, "data");
+    __publicField(this, "parent");
+    __publicField(this, "children");
+    this.data = data;
+    this.parent = parent;
+    this.children = children || [];
+  }
+  setParent(node) {
+    this.parent = node;
+  }
+  add(...nodes) {
+    this.children.push(...nodes);
+    nodes.forEach((node) => node.setParent(this));
+  }
+  isLeaf(node) {
+    var _a;
+    return !((_a = node.children) == null ? void 0 : _a.length);
+  }
+  getAllParents(includeSelf = true) {
+    const parents = [];
+    if (includeSelf) {
+      parents.unshift(this);
+    }
+    let { parent } = this;
+    while (parent) {
+      parents.unshift(parent);
+      parent = parent.parent;
+    }
+    return parents;
+  }
+  getAllSiblings() {
+    var _a;
+    const siblings = ((_a = this.parent) == null ? void 0 : _a.children.filter((node) => node !== this)) || [];
+    return siblings;
+  }
+  flatten(includeRoot) {
+    const nodes = [];
+    const traverse = (node) => {
+      nodes.push(node);
+      node.children.forEach(traverse);
+    };
+    traverse(this);
+    if (!includeRoot) {
+      nodes.shift();
+    }
+    return nodes;
+  }
+}
+class Label {
+  constructor(data) {
+    __publicField(this, "id");
+    __publicField(this, "name");
+    __publicField(this, "icon");
+    __publicField(this, "color");
+    __publicField(this, "translation");
+    this.id = data.id;
+    this.name = data.name;
+    this.icon = data.icon;
+    this.color = data.color;
+    this.translation = this._normalizeTranslation(data.translation);
+  }
+  _normalizeTranslation(translation) {
+    if (typeof translation === "object") {
+      return translation;
+    }
+    try {
+      return JSON.parse(translation);
+    } catch {
+      return {};
+    }
+  }
+  getName(locale) {
+    var _a;
+    if (!locale) {
+      return this.name;
+    }
+    return ((_a = this == null ? void 0 : this.translation) == null ? void 0 : _a[locale]) || (this == null ? void 0 : this.name);
+  }
+}
+class LabelTreeNode extends TreeNode {
+}
+const mapToTree = (items, parent) => {
+  return items.map((item) => {
+    const node = new LabelTreeNode({ data: new Label(item.data), parent });
+    const children = mapToTree(item.children || [], node);
+    node.add(...children);
+    return node;
+  });
+};
+const initLabelTree = (data) => {
+  const treeData = arrayToTree(data);
+  const root = new LabelTreeNode({ data: {}, children: mapToTree(treeData) });
+  return root;
 };
-function it({ fetchLabels: e, children: t }) {
-  const { locale: s } = ye(), [l, o] = A({
-    loading: !0,
-    labels: [],
-    updateCounter: 1
+const createEmptyLabelTree = () => {
+  return new LabelTreeNode({ data: {}, children: [] });
+};
+const useLabels = ({ loading, data }) => {
+  const { locale } = useLocaleContext();
+  const state = useReactive({
+    loading: true,
+    tree: createEmptyLabelTree(),
+    stats: []
   });
-  M(() => {
-    (async () => {
-      try {
-        o((S) => ({ ...S, loading: !0 }));
-        const i = await e();
-        o((S) => ({ ...S, loading: !1, labels: ke(i) }));
-      } catch (i) {
-        console.error(i), o((S) => ({ ...S, loading: !1, labels: [] }));
+  useEffect(() => {
+    try {
+      if (data && !loading) {
+        const { labels, stats } = data;
+        const tree = initLabelTree(labels || []);
+        state.loading = false;
+        state.tree = tree;
+        state.stats = stats.sort((a, b) => b.count - a.count);
       }
-    })();
-  }, [l.updateCounter]);
-  const n = N(() => {
-    var i;
-    return (i = l.labels) != null && i.length ? B(l.labels).reduce((S, h) => ({ ...S, [h.id]: h }), {}) : {};
-  }, [l.labels]), a = k(
-    (c) => {
-      var i;
+    } catch (e) {
+      console.error(e);
+      state.loading = false;
+    }
+  }, [data, loading]);
+  const flattened = useMemo(() => state.tree.flatten(), [state.tree]);
+  const counts = useMemo(
+    () => state.stats.reduce((acc, cur) => ({ ...acc, [cur.id]: cur.count }), {}),
+    [state.stats]
+  );
+  const nodesKeyById = useMemo(() => {
+    return flattened.reduce((acc, cur) => ({ ...acc, [cur.data.id]: cur }), {});
+  }, [flattened]);
+  const popularLabels = useMemo(
+    () => state.stats.slice(0, 12).map((x) => nodesKeyById[x.id]),
+    [nodesKeyById, state.stats]
+  );
+  const getLabelsByIds = (ids) => {
+    return ids.map((id) => nodesKeyById[id]).filter(Boolean);
+  };
+  const getLabelName = (id) => {
+    var _a;
+    return (_a = nodesKeyById[id]) == null ? void 0 : _a.data.getName(locale);
+  };
+  const getRelatedLabels = (id) => {
+    const node = nodesKeyById[id];
+    if (!node) {
+      return [];
+    }
+    const siblings = node.getAllSiblings();
+    return siblings;
+  };
+  const getRecommended = (id) => {
+    const related = getRelatedLabels(id);
+    const set = /* @__PURE__ */ new Set([...related.map((x) => x.data.id), id]);
+    return [...related, ...popularLabels.filter((x) => !set.has(x.data.id))];
+  };
+  return { ...state, popularLabels, counts, getLabelsByIds, getLabelName, getRelatedLabels, getRecommended };
+};
+const LabelsContainer = createContainer(useLabels);
+const LabelsContext = createContext({});
+const useLabelsContext = () => useContext(LabelsContext);
+const useLabelsUpdateOnDestroy = () => {
+  const { updateLabels } = useLabelsContext();
+  useEffect(() => {
+    return () => {
+      updateLabels();
+    };
+  }, []);
+};
+function LabelsProvider({ fetchLabels, children }) {
+  const { locale } = useLocaleContext();
+  const [updateCounter, setUpdateCounter] = useState(1);
+  const { loading, data } = useRequest(fetchLabels, {
+    refreshDeps: [updateCounter]
+  });
+  const labels = useMemo(() => transformLabels((data == null ? void 0 : data.labels) || []), [data]);
+  const labelsKeyById = useMemo(() => {
+    if (!(labels == null ? void 0 : labels.length)) {
+      return {};
+    }
+    const flattened = flatten(labels);
+    return flattened.reduce((acc, cur) => ({ ...acc, [cur.id]: cur }), {});
+  }, [labels]);
+  const localeTransformer = useCallback(
+    (label) => {
+      var _a;
       return {
-        ...c,
-        name: ((i = c.translation) == null ? void 0 : i[s]) || c.name
+        ...label,
+        name: ((_a = label.translation) == null ? void 0 : _a[locale]) || label.name
       };
     },
-    [s]
-  ), u = k(
-    (c) => c.filter(Boolean).map((i) => n[i]).map(a),
-    [n, a]
-  ), p = k((c) => {
-    let { parent: i } = c;
-    const S = [];
-    for (; i; )
-      S.unshift(i), i = i.parent;
-    return S;
-  }, []), y = k(
-    (c) => [...p(c), c].map(a).map((S) => S.name).join(" / "),
-    [a, p]
-  ), b = k((c) => (c == null ? void 0 : c.split(",")) || [], []), m = k((c = []) => {
-    if (c != null && c.length)
-      return c.join(",");
-  }, []), x = N(() => l.labels.map(a), [l.labels, a]), z = N(() => ({
-    loading: l.loading,
-    labels: l.labels || [],
-    updateLabels: () => o((c) => ({ ...c, updateCounter: ++l.updateCounter })),
-    getLabelsById: u,
-    parseLabelIds: b,
-    stringifyLabelIds: m,
-    localizedLabels: x,
-    flattenedLabels: B(x || []),
-    getFullLabelName: y
-  }), [l, u, b, m, x, y]);
-  return /* @__PURE__ */ r(K.Provider, { value: z, children: t });
+    [locale]
+  );
+  const getLabelsById = useCallback(
+    (ids) => ids.filter(Boolean).map((item) => labelsKeyById[item]).map(localeTransformer),
+    [labelsKeyById, localeTransformer]
+  );
+  const getParents = useCallback((label) => {
+    let { parent } = label;
+    const parents = [];
+    while (parent) {
+      parents.unshift(parent);
+      parent = parent.parent;
+    }
+    return parents;
+  }, []);
+  const getFullLabelName = useCallback(
+    (label) => {
+      const parents = [...getParents(label), label].map(localeTransformer);
+      return parents.map((item) => item.name).join(" / ");
+    },
+    [localeTransformer, getParents]
+  );
+  const parseLabelIds = useCallback((labelIdsStr) => {
+    return (labelIdsStr == null ? void 0 : labelIdsStr.split(",")) || [];
+  }, []);
+  const stringifyLabelIds = useCallback((labelIds = []) => {
+    if (!(labelIds == null ? void 0 : labelIds.length)) {
+      return void 0;
+    }
+    return labelIds.join(",");
+  }, []);
+  const localizedLabels = useMemo(() => labels.map(localeTransformer), [labels, localeTransformer]);
+  const value = useMemo(() => {
+    return {
+      loading,
+      labels: labels || [],
+      updateLabels: () => setUpdateCounter((prev) => prev + 1),
+      getLabelsById,
+      parseLabelIds,
+      stringifyLabelIds,
+      localizedLabels,
+      flattenedLabels: flatten(localizedLabels || []),
+      getFullLabelName
+    };
+  }, [loading, labels, getLabelsById, parseLabelIds, stringifyLabelIds, localizedLabels, getFullLabelName]);
+  return /* @__PURE__ */ jsx(LabelsContext.Provider, { value, children: /* @__PURE__ */ jsx(LabelsContainer.Provider, { initialState: { loading, data }, children }) });
 }
-const Fe = (e) => {
+const getContrastTextColor = (bgcolor) => {
   try {
-    return me(e, "#fff") > 3.5 ? "#fff" : "#111";
+    const ratio = getContrastRatio(bgcolor, "#fff");
+    return ratio > 3.5 ? "#fff" : "#111";
   } catch {
     return "#111";
   }
-}, We = (e, t) => {
+};
+const getAlphaColor = (color, alpha$1) => {
   try {
-    if (e)
-      return ge(e, t);
+    if (color) {
+      return alpha(color, alpha$1);
+    }
   } catch {
-    return e;
+    return color;
   }
-  return e;
+  return color;
 };
-function ct({ labels: e, editable: t, onChange: s, sx: l, renderLabel: o }) {
-  const n = !(e != null && e.length), { labels: a, loading: u, getLabelsById: p, getFullLabelName: y } = Q(), [b, m] = A(!1);
-  if (u || !t && n)
+function Labels({ labels, editable, onChange, sx, renderLabel }) {
+  const isEmpty = !(labels == null ? void 0 : labels.length);
+  const { labels: allLabels, loading, getLabelsById, getFullLabelName } = useLabelsContext();
+  const [editing, setEditing] = useState(false);
+  if (loading || !editable && isEmpty) {
     return null;
-  const x = (i) => {
-    s == null || s(i), setTimeout(() => {
-      m(!1);
+  }
+  const handleOnChange = (v) => {
+    onChange == null ? void 0 : onChange(v);
+    setTimeout(() => {
+      setEditing(false);
     }, 300);
   };
-  if (b)
-    return /* @__PURE__ */ r(de, { onClickAway: () => b && m(!1), children: /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(Oe, { data: a, value: e || [], onChange: x }) }) });
-  const z = p(e || []), c = [
+  if (editing) {
+    return /* @__PURE__ */ jsx(ClickAwayListener$1, { onClickAway: () => editing && setEditing(false), children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(LabelPicker, { data: allLabels, value: labels || [], onChange: handleOnChange }) }) });
+  }
+  const labelObjects = getLabelsById(labels || []).filter((x) => !x.id.startsWith("system:"));
+  const mergedSx = [
     { display: "flex", gap: 1, alignItems: "center", flexWrap: "wrap" },
-    ...Array.isArray(l) ? l : [l]
+    ...Array.isArray(sx) ? sx : [sx]
   ];
-  return /* @__PURE__ */ C(ue, { sx: c, children: [
-    z.map((i) => i ? o ? o(i) : /* @__PURE__ */ r(
-      he,
-      {
-        label: y(i),
-        variant: "filled",
-        size: "small",
-        sx: {
-          height: 20,
-          borderRadius: 1,
-          fontSize: 12,
-          bgcolor: We(i.color, 0.8),
-          color: Fe(i.color)
-        }
-      },
-      i.id
-    ) : null),
-    t && !n && /* @__PURE__ */ r(pe, { color: "inherit", size: "small", onClick: () => m(!0), sx: { color: "grey.400" }, children: /* @__PURE__ */ r(Y, { sx: { fontSize: 20 } }) }),
-    t && n && /* @__PURE__ */ r(fe, { color: "inherit", variant: "outlined", startIcon: /* @__PURE__ */ r(X, {}), onClick: () => m(!0), children: "Edit labels" })
+  return /* @__PURE__ */ jsxs(Box$1, { sx: mergedSx, children: [
+    labelObjects.map((item) => {
+      if (!item) {
+        return null;
+      }
+      if (renderLabel) {
+        return renderLabel(item);
+      }
+      return /* @__PURE__ */ jsx(
+        Chip,
+        {
+          label: getFullLabelName(item),
+          variant: "filled",
+          size: "small",
+          sx: {
+            height: 20,
+            borderRadius: 1,
+            fontSize: 12,
+            bgcolor: getAlphaColor(item.color, 0.8),
+            color: getContrastTextColor(item.color)
+          }
+        },
+        item.id
+      );
+    }),
+    editable && !isEmpty && /* @__PURE__ */ jsx(IconButton$1, { color: "inherit", size: "small", onClick: () => setEditing(true), sx: { color: "grey.400" }, children: /* @__PURE__ */ jsx(Edit, { sx: { fontSize: 20 } }) }),
+    editable && isEmpty && /* @__PURE__ */ jsx(Button$1, { color: "inherit", variant: "outlined", startIcon: /* @__PURE__ */ jsx(LabelOutlined, {}), onClick: () => setEditing(true), children: "Edit labels" })
   ] });
 }
 export {
-  at as LabelManager,
-  Oe as LabelPicker,
-  F as LabelTree,
-  ct as Labels,
-  it as LabelsProvider,
-  ke as transformLabels,
-  Q as useLabelsContext,
-  st as useLabelsUpdateOnDestroy
+  LabelManager,
+  LabelPicker,
+  LabelTree,
+  Labels,
+  LabelsContainer,
+  LabelsProvider,
+  useLabelsContext,
+  useLabelsUpdateOnDestroy
 };