@layers-app/shared 0.4.1 → 0.4.3

package/dist/components/ColorPicker/ColorPickerToolbar.js

@@ -1,149 +1,157 @@
-import { jsxs as S, jsx as r } from "react/jsx-runtime";
-import { forwardRef as T, useState as y, useCallback as w, useMemo as H } from "react";
-import { useMantineColorScheme as j, Box as h, Flex as B, Tooltip as P, UnstyledButton as U } from "@mantine/core";
-import { TextColorIcon as K, HighlightSwatch as z } from "./icons.js";
-import { normalizeColorItem as $, isDefaultColor as q } from "./types.js";
-import { useRecentColors as E } from "./useRecentColors.js";
-import c from "./ColorPicker.module.css.js";
-function k({
-  isActive: s,
-  round: m,
+import { jsxs as g, jsx as r } from "react/jsx-runtime";
+import { forwardRef as H, useState as j, useCallback as S, useMemo as P } from "react";
+import { useTranslation as U } from "react-i18next";
+import { useMantineColorScheme as q, Box as h, Flex as B, Tooltip as E, UnstyledButton as G } from "@mantine/core";
+import { TextColorIcon as K, HighlightSwatch as T } from "./icons.js";
+import { normalizeColorItem as w, resolveColorLabel as z, isDefaultColor as J } from "./types.js";
+import { useRecentColors as O } from "./useRecentColors.js";
+import n from "./ColorPicker.module.css.js";
+function v({
+  isActive: a,
+  round: d,
   disabled: u,
-  onClick: d,
+  onClick: f,
   children: i,
-  tooltipLabel: f
+  tooltipLabel: p
 }) {
-  const v = /* @__PURE__ */ r(
-    U,
+  const b = /* @__PURE__ */ r(
+    G,
     {
       type: "button",
-      className: `${c.inlineSwatch}${m ? ` ${c.inlineSwatchRound}` : ""}${s ? ` ${c.inlineSwatchActive}` : ""}`,
-      onMouseDown: (C) => C.preventDefault(),
-      onClick: d,
+      className: `${n.inlineSwatch}${d ? ` ${n.inlineSwatchRound}` : ""}${a ? ` ${n.inlineSwatchActive}` : ""}`,
+      onMouseDown: (m) => m.preventDefault(),
+      onClick: f,
       disabled: u,
       children: i
     }
   );
-  return f ? /* @__PURE__ */ r(P, { label: f, withArrow: !0, zIndex: 300, children: v }) : v;
+  return p ? /* @__PURE__ */ r(E, { label: p, withArrow: !0, zIndex: 300, children: b }) : b;
 }
-const Y = T(({ sections: s, onChange: m, withRecentColors: u, maxRecentColors: d = 9, disabled: i, recentColorsLabel: f = "Recently used" }, v) => {
-  const { colorScheme: C } = j(), x = C === "dark", { recentColors: D, addRecent: F } = E({ maxItems: d }), [L, I] = y(D), p = w(
-    (e, o, t) => {
-      u && (F(e, o, t), I((l) => {
-        const n = l.filter(
-          (a) => !(a.value === e && a.sectionKey === o)
-        );
-        return [{ value: e, sectionKey: o, border: t }, ...n].slice(0, d);
-      })), m(e, o);
-    },
-    [m, u, F]
-  ), g = H(() => {
-    const e = {};
-    for (const o of s) e[o.key] = o;
-    return e;
-  }, [s]), M = w(
-    (e, o) => {
-      if (!o) return;
-      const t = g[o];
-      if (!t) return;
-      const l = t.colors.find((b) => $(b).value === e);
-      if (!l) return;
-      const { label: n, value: a } = $(l);
-      return n || a;
-    },
-    [g]
-  ), N = w(
-    (e) => q(e) ? x ? "#FFFFFF" : "#000000" : e,
-    [x]
-  );
-  return /* @__PURE__ */ S(h, { ref: v, children: [
-    u && L.length > 0 && /* @__PURE__ */ S(h, { className: c.inlineSection, children: [
-      /* @__PURE__ */ r(h, { className: c.inlineSectionLabel, children: f }),
-      /* @__PURE__ */ r(B, { className: c.inlineRow, gap: 2, children: L.map((e, o) => {
-        const t = e.sectionKey ? g[e.sectionKey] : void 0, l = t?.key === "textColor" || t?.key === "color" || e.sectionKey === "color", n = M(e.value, e.sectionKey);
-        return l ? /* @__PURE__ */ r(
-          k,
-          {
-            isActive: !1,
-            disabled: i,
-            tooltipLabel: n,
-            onClick: () => p(e.value, e.sectionKey ?? ""),
-            children: /* @__PURE__ */ r(
-              K,
-              {
-                size: 20,
-                color: N(e.value),
-                showBorder: !0
-              }
-            )
-          },
-          `${e.sectionKey}-${e.value}-${o}`
-        ) : /* @__PURE__ */ r(
-          k,
-          {
-            isActive: !1,
-            round: !0,
-            disabled: i,
-            tooltipLabel: n,
-            onClick: () => p(e.value, e.sectionKey ?? ""),
-            children: /* @__PURE__ */ r(
-              z,
-              {
-                bgColor: e.value,
-                borderColor: e.border || "var(--mantine-color-default-border)"
-              }
-            )
-          },
-          `${e.sectionKey}-${e.value}-${o}`
-        );
-      }) })
-    ] }),
-    s.map((e) => {
-      const o = e.key === "highlight" || e.key === "background" || e.key === "textHighlight";
-      return /* @__PURE__ */ S(h, { className: c.inlineSection, children: [
-        e.label && /* @__PURE__ */ r(h, { className: c.inlineSectionLabel, children: e.label }),
-        /* @__PURE__ */ r(B, { className: c.inlineRow, gap: 2, children: e.colors.map((t) => {
-          const { value: l, border: n, label: a } = $(t), b = l === e.value, R = N(l), A = a || l;
-          return o ? /* @__PURE__ */ r(
-            k,
+const oe = H(
+  ({
+    sections: a,
+    onChange: d,
+    withRecentColors: u,
+    maxRecentColors: f = 9,
+    disabled: i,
+    recentColorsLabel: p = "Recently used"
+  }, b) => {
+    const { t: m } = U("ui"), { colorScheme: D } = q(), x = D === "dark", { recentColors: I, addRecent: $ } = O({
+      maxItems: f
+    }), [L, M] = j(I), k = S(
+      (e, o, c) => {
+        u && ($(e, o, c), M((l) => {
+          const t = l.filter(
+            (s) => !(s.value === e && s.sectionKey === o)
+          );
+          return [{ value: e, sectionKey: o, border: c }, ...t].slice(
+            0,
+            f
+          );
+        })), d(e, o);
+      },
+      [d, u, $]
+    ), C = P(() => {
+      const e = {};
+      for (const o of a) e[o.key] = o;
+      return e;
+    }, [a]), y = S(
+      (e, o) => {
+        const l = (o ? C[o] : void 0)?.colors.find(
+          (s) => w(s).value === e
+        ), t = l ? w(l).label : void 0;
+        return z(m, e, t);
+      },
+      [C, m]
+    ), F = S(
+      (e) => J(e) ? x ? "#FFFFFF" : "#000000" : e,
+      [x]
+    );
+    return /* @__PURE__ */ g(h, { ref: b, children: [
+      u && L.length > 0 && /* @__PURE__ */ g(h, { className: n.inlineSection, children: [
+        /* @__PURE__ */ r(h, { className: n.inlineSectionLabel, children: p }),
+        /* @__PURE__ */ r(B, { className: n.inlineRow, gap: 2, children: L.map((e, o) => {
+          const c = e.sectionKey ? C[e.sectionKey] : void 0, l = c?.key === "textColor" || c?.key === "color" || e.sectionKey === "color", t = y(
+            e.value,
+            e.sectionKey
+          );
+          return l ? /* @__PURE__ */ r(
+            v,
             {
-              isActive: b,
-              round: !0,
+              isActive: !1,
               disabled: i,
-              tooltipLabel: A,
-              onClick: () => p(l, e.key, n),
+              tooltipLabel: t,
+              onClick: () => k(e.value, e.sectionKey ?? ""),
               children: /* @__PURE__ */ r(
-                z,
+                K,
                 {
-                  bgColor: l,
-                  borderColor: n || R
+                  size: 20,
+                  color: F(e.value),
+                  showBorder: !0
                 }
               )
             },
-            l
+            `${e.sectionKey}-${e.value}-${o}`
           ) : /* @__PURE__ */ r(
-            k,
+            v,
             {
-              isActive: b,
+              isActive: !1,
+              round: !0,
               disabled: i,
-              tooltipLabel: A,
-              onClick: () => p(l, e.key),
+              tooltipLabel: t,
+              onClick: () => k(e.value, e.sectionKey ?? ""),
               children: /* @__PURE__ */ r(
-                K,
+                T,
                 {
-                  size: 20,
-                  color: R,
-                  showBorder: !0
+                  bgColor: e.value,
+                  borderColor: e.border || "var(--mantine-color-default-border)"
                 }
               )
             },
-            l
+            `${e.sectionKey}-${e.value}-${o}`
           );
         }) })
-      ] }, e.key);
-    })
-  ] });
-});
+      ] }),
+      a.map((e) => {
+        const o = e.key === "highlight" || e.key === "background" || e.key === "textHighlight";
+        return /* @__PURE__ */ g(h, { className: n.inlineSection, children: [
+          e.label && /* @__PURE__ */ r(h, { className: n.inlineSectionLabel, children: e.label }),
+          /* @__PURE__ */ r(B, { className: n.inlineRow, gap: 2, children: e.colors.map((c) => {
+            const { value: l, border: t, label: s } = w(c), N = l === e.value, R = F(l), A = z(m, l, s);
+            return o ? /* @__PURE__ */ r(
+              v,
+              {
+                isActive: N,
+                round: !0,
+                disabled: i,
+                tooltipLabel: A,
+                onClick: () => k(l, e.key, t),
+                children: /* @__PURE__ */ r(
+                  T,
+                  {
+                    bgColor: l,
+                    borderColor: t || R
+                  }
+                )
+              },
+              l
+            ) : /* @__PURE__ */ r(
+              v,
+              {
+                isActive: N,
+                disabled: i,
+                tooltipLabel: A,
+                onClick: () => k(l, e.key),
+                children: /* @__PURE__ */ r(K, { size: 20, color: R, showBorder: !0 })
+              },
+              l
+            );
+          }) })
+        ] }, e.key);
+      })
+    ] });
+  }
+);
 export {
-  Y as ColorPickerToolbar
+  oe as ColorPickerToolbar
 };

package/dist/components/ColorPicker/icons.js

@@ -21,7 +21,7 @@ function s({
             width: "19",
             height: "19",
             rx: "5.5",
-            stroke: "var(--mantine-color-default-border)",
+            stroke: "var(--mantine-color-gray-4)",
             strokeWidth: "1",
             fill: "none"
           }
@@ -37,7 +37,7 @@ function s({
     }
   );
 }
-function d({
+function w({
   size: t = 24,
   bgColor: r,
   borderColor: e
@@ -66,6 +66,6 @@ function d({
   );
 }
 export {
-  d as HighlightSwatch,
+  w as HighlightSwatch,
   s as TextColorIcon
 };

package/dist/components/ColorPicker/types.d.ts

@@ -1,4 +1,5 @@
 import type { FlexProps } from '@mantine/core';
+import type { TFunction } from 'i18next';
 export type ColorItem = string | {
     value: string;
     label?: string;
@@ -41,9 +42,10 @@ export interface ColorPickerCompactProps extends Omit<ColorPickerBaseProps, 'sec
 }
 export declare function normalizeColorItem(item: ColorItem): {
     value: string;
-    label: string;
+    label?: string;
     border?: string;
     bg?: string;
 };
 export declare function isDefaultColor(value: string): boolean;
+export declare const resolveColorLabel: (t: TFunction, value: string | null | undefined, explicitLabel?: string) => string;
 //# sourceMappingURL=types.d.ts.map

package/dist/components/ColorPicker/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/ColorPicker/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE/C,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEjG,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;CAC7B;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,MAAM,mBAAmB,GAAG,CAChC,KAAK,EAAE,MAAM,EACb,UAAU,CAAC,EAAE,MAAM,KAChB,IAAI,CAAC;AAEV,MAAM,WAAW,oBAAoB;IACnC,MAAM,CAAC,EAAE,SAAS,EAAE,CAAC;IACrB,QAAQ,CAAC,EAAE,YAAY,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,mBAAmB,CAAC;IAC/B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,sBACf,SAAQ,oBAAoB,EAC1B,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IAC7B,WAAW,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAClC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,MAAM,WAAW,oBAAqB,SAAQ,oBAAoB;IAChE,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,uBACf,SAAQ,IAAI,CAAC,oBAAoB,EAAE,UAAU,GAAG,kBAAkB,CAAC,EACjE,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IAC7B,WAAW,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;CACnC;AAED,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,SAAS,GAAG;IACnD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAKA;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAErD"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/ColorPicker/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,MAAM,MAAM,SAAS,GACjB,MAAM,GACN;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEpE,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;CAC7B;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,MAAM,mBAAmB,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;AAE/E,MAAM,WAAW,oBAAoB;IACnC,MAAM,CAAC,EAAE,SAAS,EAAE,CAAC;IACrB,QAAQ,CAAC,EAAE,YAAY,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,mBAAmB,CAAC;IAC/B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,sBACf,SAAQ,oBAAoB,EAC1B,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IAC7B,WAAW,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAClC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,MAAM,WAAW,oBAAqB,SAAQ,oBAAoB;IAChE,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,uBACf,SAAQ,IAAI,CAAC,oBAAoB,EAAE,UAAU,GAAG,kBAAkB,CAAC,EACjE,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IAC7B,WAAW,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;CACnC;AAED,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,SAAS,GAAG;IACnD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAEA;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAErD;AAED,eAAO,MAAM,iBAAiB,GAC5B,GAAG,SAAS,EACZ,OAAO,MAAM,GAAG,IAAI,GAAG,SAAS,EAChC,gBAAgB,MAAM,KACrB,MAIF,CAAC"}

package/dist/components/ColorPicker/types.js

@@ -1,10 +1,16 @@
-function n(r) {
-  return typeof r == "string" ? { value: r, label: r } : { label: r.value, ...r };
+function f(r) {
+  return typeof r == "string" ? { value: r } : r;
 }
-function l(r) {
+function e(r) {
   return r === "inherit" || r === "" || r === "default";
 }
+const s = (r, o, n) => {
+  if (n) return n;
+  const t = !o || e(o) ? "standard" : o;
+  return r(`colorPicker.colors.${t}`, { defaultValue: o || "" });
+};
 export {
-  l as isDefaultColor,
-  n as normalizeColorItem
+  e as isDefaultColor,
+  f as normalizeColorItem,
+  s as resolveColorLabel
 };

package/dist/components/CommentComposer/CommentEditorHotkeys.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CommentEditorHotkeys.d.ts","sourceRoot":"","sources":["../../../src/components/CommentComposer/CommentEditorHotkeys.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAIjD,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAI/C,eAAO,MAAM,oBAAoB,GAAI,8GAWlC;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,EAAE,KAAK,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC;IACvC,iBAAiB,EAAE,KAAK,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC;IAC/C,YAAY,EAAE;QACZ,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,oBAAoB,CAAC,iBAAiB,EAAE,CAAC;KACjD,CAAC;IACF,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,OAAO,CAAC;IACpB,EAAE,EAAE,MAAM,CAAC;CACZ,4CAwJA,CAAC"}
+{"version":3,"file":"CommentEditorHotkeys.d.ts","sourceRoot":"","sources":["../../../src/components/CommentComposer/CommentEditorHotkeys.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAIjD,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAI/C,eAAO,MAAM,oBAAoB,GAAI,8GAWlC;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,EAAE,KAAK,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC;IACvC,iBAAiB,EAAE,KAAK,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC;IAC/C,YAAY,EAAE;QACZ,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,oBAAoB,CAAC,iBAAiB,EAAE,CAAC;KACjD,CAAC;IACF,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,OAAO,CAAC;IACpB,EAAE,EAAE,MAAM,CAAC;CACZ,4CA2KA,CAAC"}

package/dist/components/CommentComposer/CommentEditorHotkeys.js

@@ -1,63 +1,72 @@
 import { jsx as S } from "react/jsx-runtime";
-import { useRef as x, useEffect as m } from "react";
-import { useTranslation as D } from "react-i18next";
-import { openRemoveConfirmModal as g } from "../modals/RemoveConfirmModal.js";
+import { useRef as C, useEffect as u } from "react";
+import { useTranslation as k } from "react-i18next";
+import { openRemoveConfirmModal as P } from "../modals/RemoveConfirmModal.js";
 import w from "./CommentComposer.module.css.js";
-const W = ({
-  children: y,
-  onSubmit: v,
-  editorRef: a,
-  commentDraft: l,
+const M = ({
+  children: b,
+  onSubmit: E,
+  editorRef: m,
+  commentDraft: f,
   onBlur: c,
-  inputContainerRef: C,
-  isFloat: f,
+  inputContainerRef: p,
+  isFloat: v,
   isEdit: i,
   hasChanges: s,
-  ns: P
+  ns: y
 }) => {
-  const p = x(null), L = i || f, { t: r } = D(P);
-  return m(() => {
-    const o = (e) => {
+  const d = C(null), L = i || v, { t: r } = k(y);
+  return u(() => {
+    const t = (e) => {
       if (e.code === "Enter" && !e.shiftKey) {
         if (e.stopPropagation(), i ? s : !s) return;
-        p.current && p.current.contains(document.activeElement) && (e.preventDefault(), v());
+        d.current && d.current.contains(document.activeElement) && (e.preventDefault(), E());
       }
     };
-    return document.addEventListener("keydown", o), () => document.removeEventListener("keydown", o);
-  }, [v, i, s]), m(() => {
+    return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
+  }, [E, i, s]), u(() => {
     if (!L) return;
-    const o = a.current;
-    o && setTimeout(() => {
-      o.focus(() => ({ defaultSelection: "rootEnd" }));
+    const t = m.current;
+    t && setTimeout(() => {
+      t.focus(() => ({ defaultSelection: "rootEnd" }));
     }, 100);
-  }, []), m(() => {
-    const o = a.current;
-    if (!o) return;
+  }, []), u(() => {
+    const t = m.current;
+    if (!t) return;
     const e = () => setTimeout(() => {
-      o.focus(() => ({ defaultSelection: "rootEnd" }));
-    }, 0), t = (u) => {
-      const n = u.target;
+      t.focus(() => ({ defaultSelection: "rootEnd" }));
+    }, 0), o = (a) => {
+      const n = a.target;
       if (!n || n.closest("button") || n.closest("[data-no-focus]")) return;
       if (n.closest("[data-editor-spacer='true']")) {
         e();
         return;
       }
-      const d = n.closest(`.${w.commentComposerWrapper}`);
-      if (!d) return;
-      const E = d.querySelector("[data-comment-footer]");
-      if (!E || !E.contains(n)) return;
-      d.querySelector(`.${w.imagePreviewWrapper}`) || d.querySelector(`.${w.filePreviewWrapper}`) || e();
+      const l = n.closest(`.${w.commentComposerWrapper}`);
+      if (!l) return;
+      const g = l.querySelector("[data-comment-footer]");
+      if (!g || !g.contains(n)) return;
+      l.querySelector(`.${w.imagePreviewWrapper}`) || l.querySelector(`.${w.filePreviewWrapper}`) || e();
     };
-    return document.addEventListener("mousedown", t), () => document.removeEventListener("mousedown", t);
-  }, [a]), m(() => {
-    const o = (e) => {
-      const t = e.target;
-      if (!t) return;
-      const u = C.current;
-      if (u && !u.contains(t) && !(t.closest(".mantine-Modal-root") || t.closest(".floating-text-format-popup") || t.closest('[data-test-id="floating-link-dropdown"]'))) {
+    return document.addEventListener("mousedown", o), () => document.removeEventListener("mousedown", o);
+  }, [m]), u(() => {
+    const t = d.current;
+    if (!t) return;
+    const e = () => {
+      requestAnimationFrame(() => {
+        p.current?.scrollIntoView({ block: "nearest" });
+      });
+    };
+    return t.addEventListener("paste", e), () => t.removeEventListener("paste", e);
+  }, [p]), u(() => {
+    const t = (e) => {
+      const o = e.target;
+      if (!o) return;
+      const a = p.current;
+      if (a && !a.contains(o) && !(o.closest(".mantine-Modal-root") || o.closest(".floating-text-format-popup") || o.closest('[data-test-id="floating-link-dropdown"]'))) {
         if (i) {
           if (!s) {
-            e.stopPropagation(), e.preventDefault(), g({
+            e.stopPropagation(), e.preventDefault(), P({
               title: r("composer.discardTitle"),
               children: r("composer.discardDescription"),
               labels: {
@@ -75,9 +84,9 @@ const W = ({
           c?.();
           return;
         }
-        if (f) {
-          if (l.text.trim() !== "" || (l.files?.length ?? 0) > 0) {
-            e.stopPropagation(), e.preventDefault(), g({
+        if (v) {
+          if (f.text.trim() !== "" || (f.files?.length ?? 0) > 0) {
+            e.stopPropagation(), e.preventDefault(), P({
               title: r("editor.composer.discardCommentTitle"),
               children: r("editor.composer.discardCommentDescription"),
               labels: {
@@ -93,11 +102,12 @@ const W = ({
           c?.();
           return;
         }
+        o.closest('button, [role="button"]') && (window.getSelection()?.removeAllRanges(), document.activeElement?.blur());
       }
     };
-    return document.addEventListener("mousedown", o), () => document.removeEventListener("mousedown", o);
-  }, [i, f, s, l, c]), /* @__PURE__ */ S("div", { ref: p, children: y });
+    return document.addEventListener("mousedown", t), () => document.removeEventListener("mousedown", t);
+  }, [i, v, s, f, c]), /* @__PURE__ */ S("div", { ref: d, children: b });
 };
 export {
-  W as CommentEditorHandler
+  M as CommentEditorHandler
 };

package/dist/components/EmojiPicker/EmojiPanel.js

@@ -3,8 +3,8 @@ import { useState as d, useRef as p, useEffect as R, useCallback as K } from "re
 import { useTranslation as L } from "react-i18next";
 import { Search01Icon as U, ShuffleIcon as V, Clock01Icon as W, SmileIcon as X, Pizza01Icon as Z, FootballIcon as _, Airplane01Icon as ee, BulbIcon as te, Asterisk02Icon as oe, Flag02Icon as re } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon as c } from "@hugeicons/react";
-import { Stack as v, FocusTrap as ne, Flex as z, TextInput as ie, Tooltip as ce, ActionIcon as A, Paper as F, Text as q, SimpleGrid as N } from "@mantine/core";
-import { useEvent as se } from "draggable-ui";
+import { useEvent as ne } from "@layers-app/draggable-ui";
+import { Stack as v, FocusTrap as ie, Flex as z, TextInput as ce, Tooltip as se, ActionIcon as A, Paper as F, Text as q, SimpleGrid as N } from "@mantine/core";
 import ae from "fuse.js";
 import le from "../../assets/svg/dog.svg.js";
 import { pickRandomEmoji as fe } from "../../helpers/pickRandomEmoji.js";
@@ -80,7 +80,7 @@ const he = [
       }
     },
     [a]
-  ), D = se((e) => {
+  ), D = ne((e) => {
     const o = e.currentTarget.getAttribute("data-icon");
     o && (C?.(
       de.stringify({
@@ -114,7 +114,7 @@ const he = [
     }), r !== x.current && (x.current = r, k(r));
   }, J = typeof m == "string";
   return /* @__PURE__ */ y(v, { gap: 0, h: "100%", children: [
-    /* @__PURE__ */ t(ne, { active: !0, children: /* @__PURE__ */ y(
+    /* @__PURE__ */ t(ie, { active: !0, children: /* @__PURE__ */ y(
       z,
       {
         my: "sm",
@@ -125,7 +125,7 @@ const he = [
         h: 38,
         children: [
           /* @__PURE__ */ t(
-            ie,
+            ce,
             {
               leftSection: /* @__PURE__ */ t(c, { size: 16, icon: U }),
               value: S,
@@ -142,7 +142,7 @@ const he = [
               radius: "var(--mantine-radius-default)"
             }
           ),
-          /* @__PURE__ */ t(ce, { withArrow: !0, label: u?.random || G("random"), children: /* @__PURE__ */ t(
+          /* @__PURE__ */ t(se, { withArrow: !0, label: u?.random || G("random"), children: /* @__PURE__ */ t(
             A,
             {
               h: 36,

package/dist/components/EmojiPicker/IconsPanel.js

@@ -3,8 +3,8 @@ import { memo as M, useState as x, useEffect as U, useCallback as V, useMemo as
 import { useTranslation as G } from "react-i18next";
 import { Search01Icon as Q, ShuffleIcon as Y } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon as L } from "@hugeicons/react";
-import { useMantineTheme as _, parseThemeColor as J, darken as K, Stack as y, Text as b, Flex as z, FocusTrap as W, TextInput as X, Tooltip as Z, ActionIcon as ee, Box as oe, Paper as E, SimpleGrid as N } from "@mantine/core";
-import { useEvent as te } from "draggable-ui";
+import { useEvent as _ } from "@layers-app/draggable-ui";
+import { useMantineTheme as J, parseThemeColor as K, darken as W, Stack as y, Text as b, Flex as z, FocusTrap as X, TextInput as Z, Tooltip as ee, ActionIcon as oe, Box as te, Paper as E, SimpleGrid as N } from "@mantine/core";
 import { groupBy as re } from "lodash-es";
 import { DEFAULT_VALUES as ie } from "../../constants.js";
 import { ColorPicker as ne } from "../ColorPicker/ColorPicker.js";
@@ -31,7 +31,7 @@ const Ce = M(
     project: r,
     keepOpenOnRandom: C = !1
   }) => {
-    const w = _(), [f, R] = x(""), { t: k } = G("ui"), [P, $] = x(
+    const w = J(), [f, R] = x(""), { t: k } = G("ui"), [P, $] = x(
       []
     );
     U(() => {
@@ -57,7 +57,7 @@ const Ce = M(
         S(v.map((d) => d.n));
       },
       [r]
-    ), i = I.parse(u), g = te((o) => {
+    ), i = I.parse(u), g = _((o) => {
       const t = o.currentTarget.getAttribute("data-icon");
       t && (l?.(
         I.stringify({
@@ -66,7 +66,7 @@ const Ce = M(
           type: i?.type || A.FILLED
         })
       ), a || p());
-    }), n = J({
+    }), n = K({
       color: i?.color || ie.COLORS[0],
       theme: w
     }), O = j(() => n.isThemeColor ? {
@@ -74,7 +74,7 @@ const Ce = M(
       "--icon-color-hover": `var(--mantine-color-${n.color}-filled-hover)`
     } : {
       "--icon-color": n.value,
-      "--icon-color-hover": K(n.value, 0.2)
+      "--icon-color-hover": W(n.value, 0.2)
     }, [n]), q = async () => {
       const o = await ae(r);
       S([]), l?.(I.stringify({ icon: o, color: i?.color })), !a && !C && p();
@@ -112,8 +112,8 @@ const Ce = M(
         )
       ] }),
       /* @__PURE__ */ m(z, { w: "100%", justify: "space-between", gap: 4, px: 8, h: 38, children: [
-        /* @__PURE__ */ e(W, { active: !0, children: /* @__PURE__ */ e(
-          X,
+        /* @__PURE__ */ e(X, { active: !0, children: /* @__PURE__ */ e(
+          Z,
           {
             leftSection: /* @__PURE__ */ e(L, { size: 16, icon: Q }),
             value: f,
@@ -130,8 +130,8 @@ const Ce = M(
             radius: "var(--mantine-radius-default)"
           }
         ) }),
-        /* @__PURE__ */ e(Z, { withArrow: !0, label: c?.random || k("random"), children: /* @__PURE__ */ e(
-          ee,
+        /* @__PURE__ */ e(ee, { withArrow: !0, label: c?.random || k("random"), children: /* @__PURE__ */ e(
+          oe,
           {
             h: 36,
             w: 36,
@@ -150,7 +150,7 @@ const Ce = M(
           }
         ) })
       ] }),
-      /* @__PURE__ */ e(oe, { h: "100%", pl: 8, pt: 4, style: O, children: /* @__PURE__ */ e(
+      /* @__PURE__ */ e(te, { h: "100%", pl: 8, pt: 4, style: O, children: /* @__PURE__ */ e(
         y,
         {
           mah: "210px",

package/dist/components/FilePicker/FilePicker.d.ts

@@ -1,4 +1,5 @@
 import { PropsWithChildren } from 'react';
+import { type IconSvgElement } from '@hugeicons/react';
 import { FlexProps, FloatingPosition, PopoverProps } from '@mantine/core';
 import { DropzoneProps, FileWithPath } from '@mantine/dropzone';
 import type { BreadcrumbItem, MediaFile } from '../MediaLibrary/types';
@@ -56,7 +57,8 @@ export type FilePickerProps = PropsWithChildren<{
     };
     inline?: boolean;
     tab?: TabType | string;
+    uploadIcon?: IconSvgElement;
 }>;
-export declare const FilePicker: ({ onChange, onRemove, onUpload, uploading, showTabs, children, width, position, readOnly, hasImage, giphyToken: _giphyToken, unsplashClientId: _unsplashClientId, type, galleryCollection, isValidMediaUrl, popoverProps, dropZoneProps, targetProps, onOpenedChange, googleDrive, mediaLibrary, inline, tab: tabProp, }: PropsWithChildren<FilePickerProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const FilePicker: ({ onChange, onRemove, onUpload, uploading, showTabs, children, width, position, readOnly, hasImage, giphyToken: _giphyToken, unsplashClientId: _unsplashClientId, type, galleryCollection, isValidMediaUrl, popoverProps, dropZoneProps, targetProps, onOpenedChange, googleDrive, mediaLibrary, inline, tab: tabProp, uploadIcon, }: PropsWithChildren<FilePickerProps>) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=FilePicker.d.ts.map