@layers-app/shared 0.4.4 → 0.4.6

package/dist/components/AnimatedFigurePage/AnimatedFigurePage.module.css.js

@@ -1,11 +1,11 @@
-const e = "_page_q8c84_3", g = "_figureContainer_q8c84_16", _ = "_figure_q8c84_16", a = "_figureA_q8c84_29", r = "_figureB_q8c84_33", c = "_grainOverlay_q8c84_115", n = "_badgeWrap_q8c84_127", i = "_badge0_q8c84_155", t = "_badge1_q8c84_160", d = "_badge2_q8c84_169", o = "_badge3_q8c84_178", b = {
+const e = "_page_4n9uu_5", u = "_figureContainer_4n9uu_31", g = "_figure_4n9uu_31", _ = "_figureA_4n9uu_57", a = "_figureB_4n9uu_65", n = "_grainOverlay_4n9uu_229", r = "_badgeWrap_4n9uu_253", i = "_badge0_4n9uu_309", t = "_badge1_4n9uu_319", d = "_badge2_4n9uu_337", o = "_badge3_4n9uu_355", b = {
   page: e,
-  figureContainer: g,
-  figure: _,
-  figureA: a,
-  figureB: r,
-  grainOverlay: c,
-  badgeWrap: n,
+  figureContainer: u,
+  figure: g,
+  figureA: _,
+  figureB: a,
+  grainOverlay: n,
+  badgeWrap: r,
   badge0: i,
   badge1: t,
   badge2: d,
@@ -16,12 +16,12 @@ export {
   t as badge1,
   d as badge2,
   o as badge3,
-  n as badgeWrap,
+  r as badgeWrap,
   b as default,
-  _ as figure,
-  a as figureA,
-  r as figureB,
-  g as figureContainer,
-  c as grainOverlay,
+  g as figure,
+  _ as figureA,
+  a as figureB,
+  u as figureContainer,
+  n as grainOverlay,
   e as page
 };

package/dist/components/AppContainer/AppContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppContainer.d.ts","sourceRoot":"","sources":["../../../src/components/AppContainer/AppContainer.tsx"],"names":[],"mappings":"AAsBA,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAI5C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,UAAU,CAAC,EAAE,OAAO,CAAC;QACrB,WAAW,CAAC,EAAE,OAAO,CAAC;KACvB;CACF;AAwGD,eAAO,MAAM,YAAY,uNAnFtB,iBAAiB;;;;;;;;CAsFlB,CAAC"}
+{"version":3,"file":"AppContainer.d.ts","sourceRoot":"","sources":["../../../src/components/AppContainer/AppContainer.tsx"],"names":[],"mappings":"AAsBA,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAE5C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,UAAU,CAAC,EAAE,OAAO,CAAC;QACrB,WAAW,CAAC,EAAE,OAAO,CAAC;KACvB;CACF;AA+FD,eAAO,MAAM,YAAY,uNA1EtB,iBAAiB;;;;;;;;CA6ElB,CAAC"}

package/dist/components/AppContainer/AppContainer.js

@@ -1,100 +1,93 @@
-import { jsxs as o, jsx as e } from "react/jsx-runtime";
-import { useEffect as E } from "react";
-import { useMantineColorScheme as F, Stack as O, Flex as $ } from "@mantine/core";
-import { isAppMode as K } from "../../helpers/isAppMode.js";
-import { useQueryParam as Q } from "../../hooks/useNumberQueryParam.js";
-import { AppShell as t } from "../AppShell/AppShell.js";
-import { useMeetWidget as R } from "./MeetWidgetContext.js";
-import { AppsSidebar as V } from "./components/AppsSidebar/AppsSidebar.js";
-import { Header as _ } from "./components/Header.js";
-import { Main as q } from "./components/Main.js";
-import z from "./components/NavbarContent.js";
-import { RightSidebar as G } from "./components/RightSidebar.js";
-import { ToolSidebar as I } from "./components/ToolSidebar.js";
-import { ToolbarNewButton as J } from "./components/ToolbarNewButton.js";
-import { useAppContainerDataStore as L } from "./hooks/useAppContainerDataStore.js";
-import { appContainerStore as U } from "./hooks/useAppContainerStore.js";
-import X from "./AppContainer.module.css.js";
-const Y = ({
-  header: h,
-  content: f,
-  toolbar: n,
-  navbarTitle: u,
-  footer: s,
-  onTitleChange: S,
-  trashMenu: b,
-  rightbar: a,
-  onInviteClick: g,
-  showAppsSidebar: x = !0,
-  headerBorderless: w = !1,
-  withBg: C = !1,
-  isBeta: M = !1,
-  hideHeader: A = !1,
-  showSearch: T = !0,
-  showMore: v = !0,
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { useEffect as N } from "react";
+import { useMantineColorScheme as P, Stack as E, Flex as O } from "@mantine/core";
+import { isAppMode as $ } from "../../helpers/isAppMode.js";
+import { useQueryParam as F } from "../../hooks/useNumberQueryParam.js";
+import { AppShell as o } from "../AppShell/AppShell.js";
+import { useMeetWidget as K } from "./MeetWidgetContext.js";
+import { AppsSidebar as Q } from "./components/AppsSidebar/AppsSidebar.js";
+import { Header as R } from "./components/Header.js";
+import { Main as _ } from "./components/Main.js";
+import q from "./components/NavbarContent.js";
+import { RightSidebar as z } from "./components/RightSidebar.js";
+import { ToolSidebar as G } from "./components/ToolSidebar.js";
+import { ToolbarNewButton as I } from "./components/ToolbarNewButton.js";
+import { useAppContainerDataStore as J } from "./hooks/useAppContainerDataStore.js";
+import { appContainerStore as L } from "./hooks/useAppContainerStore.js";
+const U = ({
+  header: l,
+  content: d,
+  toolbar: i,
+  navbarTitle: h,
+  footer: n,
+  onTitleChange: c,
+  trashMenu: f,
+  rightbar: m,
+  onInviteClick: u,
+  showAppsSidebar: S = !0,
+  headerBorderless: b = !1,
+  withBg: x = !1,
+  isBeta: g = !1,
+  hideHeader: w = !1,
+  showSearch: C = !0,
+  showMore: A = !0,
   showBorders: y = !0,
-  showLogo: W = !1
+  showLogo: M = !1
 }) => {
-  const {
-    toolbarWidth: k,
-    rightbarWidth: N,
-    layout: l,
-    showToolbar: j
-  } = U.useStore(), B = L((P) => P.user), m = K(B.mode, "DESKTOP"), { setColorScheme: p } = F(), r = Q("theme"), i = R();
-  E(() => {
-    !m && (r === "dark" || r === "light") && p(r);
-  }, [r, p, m]);
-  const D = {
-    "--toolbar-width": `${k}px`,
-    "--rightbar-width": `${N}px`
-  }, H = l !== "nothing" && !A, d = l === "default" && !!n, c = !d || !j;
-  return /* @__PURE__ */ o(t, { style: D, children: [
-    x && /* @__PURE__ */ e(t.Section, { w: "var(--apps-sidebar-width)", children: /* @__PURE__ */ e(
-      V,
+  const { toolbarWidth: W, rightbarWidth: k, layout: s } = L.useStore(), v = J((H) => H.user), a = $(v.mode, "DESKTOP"), { setColorScheme: p } = P(), t = F("theme"), T = K();
+  N(() => {
+    !a && (t === "dark" || t === "light") && p(t);
+  }, [t, p, a]);
+  const j = {
+    "--toolbar-width": `${W}px`,
+    "--rightbar-width": `${k}px`
+  }, B = s !== "nothing" && !w, D = s === "default" && !!i;
+  return /* @__PURE__ */ r(o, { style: j, children: [
+    S && /* @__PURE__ */ e(o.Section, { w: "var(--apps-sidebar-width)", children: /* @__PURE__ */ e(
+      Q,
       {
-        onInviteClick: g,
-        trashMenu: b,
-        showSearch: T,
-        showMore: v,
+        onInviteClick: u,
+        trashMenu: f,
+        showSearch: C,
+        showMore: A,
         showBorders: y,
-        showLogo: W
+        showLogo: M
       }
     ) }),
-    /* @__PURE__ */ o(t.Section, { flex: 1, display: "flex", pos: "relative", children: [
-      d && /* @__PURE__ */ e(
-        I,
+    /* @__PURE__ */ r(o.Section, { flex: 1, display: "flex", pos: "relative", children: [
+      D && /* @__PURE__ */ e(
+        G,
         {
-          isBeta: M,
-          onTitleChange: S,
-          navbarTitle: u,
-          bottomSlot: c ? null : i,
-          children: n
+          isBeta: g,
+          onTitleChange: c,
+          navbarTitle: h,
+          children: i
         }
       ),
-      i && c && /* @__PURE__ */ e("div", { className: X.floatingMeetSlot, children: i }),
-      /* @__PURE__ */ o(O, { mih: 0, gap: 0, h: "100%", flex: 2, miw: 0, children: [
-        H && /* @__PURE__ */ e(
-          t.Header,
+      T,
+      /* @__PURE__ */ r(E, { mih: 0, gap: 0, h: "100%", flex: 2, miw: 0, children: [
+        B && /* @__PURE__ */ e(
+          o.Header,
           {
             px: "sm",
-            style: w ? { borderBottom: "none" } : void 0,
-            children: /* @__PURE__ */ e(_, { children: h })
+            style: b ? { borderBottom: "none" } : void 0,
+            children: /* @__PURE__ */ e(R, { children: l })
           }
         ),
-        /* @__PURE__ */ o($, { mih: 0, gap: 0, h: "100%", children: [
-          /* @__PURE__ */ e(t.WorkContent, { children: /* @__PURE__ */ o(q, { withBg: C, children: [
-            f,
-            s && /* @__PURE__ */ e("footer", { children: s })
+        /* @__PURE__ */ r(O, { mih: 0, gap: 0, h: "100%", children: [
+          /* @__PURE__ */ e(o.WorkContent, { children: /* @__PURE__ */ r(_, { withBg: x, children: [
+            d,
+            n && /* @__PURE__ */ e("footer", { children: n })
           ] }) }),
-          a && /* @__PURE__ */ e(G, { children: a })
+          m && /* @__PURE__ */ e(z, { children: m })
         ] })
       ] })
     ] })
   ] });
-}, Se = Object.assign(Y, {
-  NavbarContent: z,
-  NewButton: J
+}, he = Object.assign(U, {
+  NavbarContent: q,
+  NewButton: I
 });
 export {
-  Se as AppContainer
+  he as AppContainer
 };

package/dist/components/AppContainer/AppContainer.module.css.js

@@ -1,17 +1,17 @@
-const t = "_toolTitleInput_103nq_19", n = "_appSidebarButton_103nq_34", o = "_slideContainer_103nq_55", e = "_slideContent_103nq_61", i = "_main_103nq_76", l = "_floatingMeetSlot_103nq_85", a = {
+const t = "_toolTitleInput_1nq45_37", n = "_appSidebarButton_1nq45_67", e = "_sidebarSyncStatus_1nq45_109", o = "_slideContainer_1nq45_121", s = "_slideContent_1nq45_133", i = "_main_1nq45_163", a = {
   toolTitleInput: t,
   appSidebarButton: n,
+  sidebarSyncStatus: e,
   slideContainer: o,
-  slideContent: e,
-  main: i,
-  floatingMeetSlot: l
+  slideContent: s,
+  main: i
 };
 export {
   n as appSidebarButton,
   a as default,
-  l as floatingMeetSlot,
   i as main,
+  e as sidebarSyncStatus,
   o as slideContainer,
-  e as slideContent,
+  s as slideContent,
   t as toolTitleInput
 };

package/dist/components/AppContainer/components/AppsSidebar/TopSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TopSection.d.ts","sourceRoot":"","sources":["../../../../../src/components/AppContainer/components/AppsSidebar/TopSection.tsx"],"names":[],"mappings":"AAcA,eAAO,MAAM,UAAU,GAAI,2BAGxB;IACD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,4CAoEA,CAAC"}
+{"version":3,"file":"TopSection.d.ts","sourceRoot":"","sources":["../../../../../src/components/AppContainer/components/AppsSidebar/TopSection.tsx"],"names":[],"mappings":"AAcA,eAAO,MAAM,UAAU,GAAI,2BAGxB;IACD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,4CAsEA,CAAC"}

package/dist/components/AppContainer/components/AppsSidebar/TopSection.js

@@ -1,9 +1,9 @@
-import { jsxs as s, jsx as o } from "react/jsx-runtime";
+import { jsxs as s, jsx as i } from "react/jsx-runtime";
 import { useTranslation as u } from "react-i18next";
-import { Search01Icon as b, Notification02Icon as v } from "@hugeicons/core-free-icons";
+import { Search01Icon as b, Notification02Icon as g } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon as p } from "@hugeicons/react";
-import { Stack as w, ActionIcon as g, Tooltip as n, Menu as a } from "@mantine/core";
-import { isFeature as k } from "../../../../helpers/feature.js";
+import { Stack as w, ActionIcon as k, Tooltip as a, Menu as n } from "@mantine/core";
+import { isFeature as v } from "../../../../helpers/feature.js";
 import { openSearchModal as y } from "../../../../store/searchModal.js";
 import { Notification as A } from "../../../Notification/Notification.js";
 import { WorkspaceAvatar as l } from "../../../WorkspaceAvatar/WorkspaceAvatar.js";
@@ -14,62 +14,64 @@ const H = ({
   showSearch: d = !0,
   showLogo: h = !1
 }) => {
-  const { t: i } = u("appContainer"), { workspaceMenu: r, isAnonym: t, publicMode: c, navbarDisplayFormat: f } = z(), e = f === "iconsAndLabels";
+  const { t: o } = u("appContainer"), { workspaceMenu: r, isAnonym: t, publicMode: c, navbarDisplayFormat: f } = z(), e = f === "iconsAndLabels";
   return /* @__PURE__ */ s(w, { gap: 8, align: "center", pb: 8, children: [
-    h ? /* @__PURE__ */ o(l, { size: 36 }) : /* @__PURE__ */ o(
+    h ? /* @__PURE__ */ i(l, { size: 36 }) : /* @__PURE__ */ i(
       S,
       {
         ...r,
         isAnonym: t,
         publicMode: c,
-        children: /* @__PURE__ */ o(
-          g,
+        children: /* @__PURE__ */ i(
+          k,
           {
+            "data-cy": "workspace-menu-trigger",
+            "data-testid": "workspace-menu-trigger",
             size: "lg",
             variant: "transparent",
             style: { overflow: "visible" },
-            children: /* @__PURE__ */ o(
-              n,
+            children: /* @__PURE__ */ i(
+              a,
               {
                 label: r.active?.workspaceName,
                 disabled: !r.active?.workspaceName,
                 openDelay: 400,
                 position: "right",
                 withArrow: !0,
-                children: /* @__PURE__ */ o(l, { workspace: r.active, size: 36 })
+                children: /* @__PURE__ */ i(l, { workspace: r.active, size: 36 })
               }
             )
           }
         )
       }
     ),
-    d && !t && !c && /* @__PURE__ */ o(n, { label: i("search"), position: "right", disabled: e, children: /* @__PURE__ */ o(
+    d && !t && !c && /* @__PURE__ */ i(a, { label: o("search"), position: "right", disabled: e, children: /* @__PURE__ */ i(
       m,
       {
-        title: e ? i("search") : null,
-        icon: /* @__PURE__ */ o(p, { icon: b, size: 20 }),
+        title: e ? o("search") : null,
+        icon: /* @__PURE__ */ i(p, { icon: b, size: 20 }),
         onClick: () => {
           y();
         }
       }
     ) }),
-    k() && !t && /* @__PURE__ */ s(a, { position: "right-start", children: [
-      /* @__PURE__ */ o(a.Target, { children: /* @__PURE__ */ o(
-        n,
+    v() && !t && /* @__PURE__ */ s(n, { position: "right-start", children: [
+      /* @__PURE__ */ i(n.Target, { children: /* @__PURE__ */ i(
+        a,
         {
-          label: i("activity"),
+          label: o("activity"),
           position: "right",
           disabled: e,
-          children: /* @__PURE__ */ o(
+          children: /* @__PURE__ */ i(
             m,
             {
-              title: e ? i("activity") : null,
-              icon: /* @__PURE__ */ o(p, { icon: v, size: 20 })
+              title: e ? o("activity") : null,
+              icon: /* @__PURE__ */ i(p, { icon: g, size: 20 })
             }
           )
         }
       ) }),
-      /* @__PURE__ */ o(a.Dropdown, { px: 4, py: 0, w: 440, children: /* @__PURE__ */ o(A, {}) })
+      /* @__PURE__ */ i(n.Dropdown, { px: 4, py: 0, w: 440, children: /* @__PURE__ */ i(A, {}) })
     ] })
   ] });
 };

package/dist/components/AppContainer/components/AppsSidebar/UserSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UserSection.d.ts","sourceRoot":"","sources":["../../../../../src/components/AppContainer/components/AppsSidebar/UserSection.tsx"],"names":[],"mappings":"AAuBA,eAAO,MAAM,WAAW,GAAI,4CAIzB;IACD,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,4CAyGA,CAAC"}
+{"version":3,"file":"UserSection.d.ts","sourceRoot":"","sources":["../../../../../src/components/AppContainer/components/AppsSidebar/UserSection.tsx"],"names":[],"mappings":"AAwBA,eAAO,MAAM,WAAW,GAAI,4CAIzB;IACD,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,4CAoHA,CAAC"}

package/dist/components/AppContainer/components/AppsSidebar/UserSection.js

@@ -1,27 +1,35 @@
 import { jsxs as n, jsx as o } from "react/jsx-runtime";
-import { useTranslation as v } from "react-i18next";
+import { useTranslation as M } from "react-i18next";
 import { Link as x } from "react-router-dom";
 import { Delete03Icon as A, UserAdd02Icon as D, HelpCircleIcon as z } from "@hugeicons/core-free-icons";
-import { HugeiconsIcon as p } from "@hugeicons/react";
-import { Stack as a, Menu as r, Tooltip as t, ActionIcon as C } from "@mantine/core";
-import { IconUserCircle as S } from "@tabler/icons-react";
-import { usePlatform as U } from "../../../../hooks/usePlatform.js";
-import { useTrashModalStore as y, openTrashModal as L, closeTrashModal as j } from "../../../../store/trashModal.js";
-import { useAppContainerDataStore as H } from "../../hooks/useAppContainerDataStore.js";
-import { AppSidebarButton as c } from "../AppSidebarButton.js";
-import { HelpMenu as k } from "../menus/HelpMenu/HelpMenu.js";
-import { MenuUserDropdown as B } from "../menus/UserMenu/MenuUserDropdown.js";
-const X = ({
+import { HugeiconsIcon as a } from "@hugeicons/react";
+import { Stack as c, Menu as r, Tooltip as s, ActionIcon as C } from "@mantine/core";
+import { IconUserCircle as U } from "@tabler/icons-react";
+import { usePlatform as L } from "../../../../hooks/usePlatform.js";
+import { useTrashModalStore as j, openTrashModal as H, closeTrashModal as k } from "../../../../store/trashModal.js";
+import { useAppContainerDataStore as B } from "../../hooks/useAppContainerDataStore.js";
+import F from "../../AppContainer.module.css.js";
+import { AppSidebarButton as p } from "../AppSidebarButton.js";
+import { HelpMenu as G } from "../menus/HelpMenu/HelpMenu.js";
+import { MenuUserDropdown as N } from "../menus/UserMenu/MenuUserDropdown.js";
+const $ = ({
   trashMenu: d,
   onInviteClick: h,
-  showBorders: g = !0
+  showBorders: S = !0
 }) => {
-  const { t: e } = v("appContainer"), b = U(), { user: m, isAnonym: l, userMenuItems: w, publicMode: T, navbarDisplayFormat: I } = H(), M = y((s) => s.opened), f = !l && !T && m.role !== "mG" && d, u = !l && b.has("inviteUsers") && h, i = I === "iconsAndLabels";
+  const { t: e } = M("appContainer"), w = L(), {
+    user: m,
+    isAnonym: t,
+    userMenuItems: T,
+    publicMode: f,
+    navbarDisplayFormat: v,
+    syncStatusSlot: u
+  } = B(), y = j((l) => l.opened), g = !t && !f && m.role !== "mG" && d, b = !t && w.has("inviteUsers") && h, i = v === "iconsAndLabels", I = !t && !f && u;
   return /* @__PURE__ */ n(
-    a,
+    c,
     {
       style: {
-        borderTop: g ? "1px solid var(--app-shell-border)" : void 0
+        borderTop: S ? "1px solid var(--app-shell-border)" : void 0
       },
       flex: 1,
       pt: 8,
@@ -29,34 +37,34 @@ const X = ({
       align: "center",
       children: [
         /* @__PURE__ */ n(
-          a,
+          c,
           {
-            justify: !f && !u ? "end" : "space-between",
+            justify: !g && !b ? "end" : "space-between",
             gap: 8,
             flex: 1,
             children: [
-              f && /* @__PURE__ */ n(
+              g && /* @__PURE__ */ n(
                 r,
                 {
                   position: "right",
                   offset: 6,
                   width: 360,
-                  opened: M,
-                  onChange: (s) => {
-                    s ? L() : j();
+                  opened: y,
+                  onChange: (l) => {
+                    l ? H() : k();
                   },
                   children: [
                     /* @__PURE__ */ o(r.Target, { children: /* @__PURE__ */ o(
-                      t,
+                      s,
                       {
                         label: e("trash"),
                         position: "right",
                         disabled: i,
                         children: /* @__PURE__ */ o(
-                          c,
+                          p,
                           {
                             title: i ? e("trash") : null,
-                            icon: /* @__PURE__ */ o(p, { icon: A, size: 20 })
+                            icon: /* @__PURE__ */ o(a, { icon: A, size: 20 })
                           }
                         )
                       }
@@ -65,34 +73,35 @@ const X = ({
                   ]
                 }
               ),
-              /* @__PURE__ */ n(a, { gap: 8, children: [
-                u && /* @__PURE__ */ o(t, { label: e("invite"), position: "right", disabled: i, children: /* @__PURE__ */ o(
-                  c,
+              /* @__PURE__ */ n(c, { gap: 8, children: [
+                b && /* @__PURE__ */ o(s, { label: e("invite"), position: "right", disabled: i, children: /* @__PURE__ */ o(
+                  p,
                   {
                     title: i ? e("invite") : null,
-                    icon: /* @__PURE__ */ o(p, { icon: D, size: 20 }),
+                    icon: /* @__PURE__ */ o(a, { icon: D, size: 20 }),
                     onClick: h
                   }
                 ) }),
                 /* @__PURE__ */ n(r, { position: "right-end", offset: 6, width: 260, children: [
-                  /* @__PURE__ */ o(r.Target, { children: /* @__PURE__ */ o(t, { label: e("help"), position: "right", disabled: i, children: /* @__PURE__ */ o(
-                    c,
+                  /* @__PURE__ */ o(r.Target, { children: /* @__PURE__ */ o(s, { label: e("help"), position: "right", disabled: i, children: /* @__PURE__ */ o(
+                    p,
                     {
                       title: i ? e("help") : null,
-                      icon: /* @__PURE__ */ o(p, { icon: z, size: 20 })
+                      icon: /* @__PURE__ */ o(a, { icon: z, size: 20 })
                     }
                   ) }) }),
-                  /* @__PURE__ */ o(r.Dropdown, { children: /* @__PURE__ */ o(k, {}) })
-                ] })
+                  /* @__PURE__ */ o(r.Dropdown, { children: /* @__PURE__ */ o(G, {}) })
+                ] }),
+                I && /* @__PURE__ */ o("div", { className: F.sidebarSyncStatus, children: u })
               ] })
             ]
           }
         ),
-        l ? /* @__PURE__ */ o(x, { to: "/login", children: /* @__PURE__ */ o(t, { label: "Log in", position: "right", children: /* @__PURE__ */ o(C, { size: "lg", variant: "light", children: /* @__PURE__ */ o(S, { size: 20 }) }) }) }) : /* @__PURE__ */ o(
-          B,
+        t ? /* @__PURE__ */ o(x, { to: "/login", children: /* @__PURE__ */ o(s, { label: "Log in", position: "right", children: /* @__PURE__ */ o(C, { size: "lg", variant: "light", children: /* @__PURE__ */ o(U, { size: 20 }) }) }) }) : /* @__PURE__ */ o(
+          N,
           {
             user: m,
-            menuItems: w,
+            menuItems: T,
             position: "right-end"
           }
         )
@@ -101,5 +110,5 @@ const X = ({
   );
 };
 export {
-  X as UserSection
+  $ as UserSection
 };

package/dist/components/AppContainer/components/Header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../src/components/AppContainer/components/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAI1C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,UAAU,CAAC,EAAE,OAAO,CAAC;QACrB,WAAW,CAAC,EAAE,OAAO,CAAC;KACvB;CACF;AAED,eAAO,MAAM,MAAM,GAAI,cAAc,iBAAiB,4CAOrD,CAAC"}
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../src/components/AppContainer/components/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAM1C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,UAAU,CAAC,EAAE,OAAO,CAAC;QACrB,WAAW,CAAC,EAAE,OAAO,CAAC;KACvB;CACF;AAED,eAAO,MAAM,MAAM,GAAI,cAAc,iBAAiB,4CAOrD,CAAC"}

package/dist/components/AppContainer/components/Header.js

@@ -1,9 +1,10 @@
-import { jsxs as e, Fragment as o, jsx as t } from "react/jsx-runtime";
-import { SidebarToggleButton as n } from "./SidebarToggleButton.js";
-const p = ({ children: r }) => /* @__PURE__ */ e(o, { children: [
-  /* @__PURE__ */ t(n, { forOpen: !0 }),
+import { jsxs as e, jsx as o } from "react/jsx-runtime";
+import { Flex as t } from "@mantine/core";
+import { SidebarToggleButton as i } from "./SidebarToggleButton.js";
+const a = ({ children: r }) => /* @__PURE__ */ e(t, { align: "center", gap: 8, h: "100%", w: "100%", miw: 0, children: [
+  /* @__PURE__ */ o(i, { forOpen: !0 }),
   r
 ] });
 export {
-  p as Header
+  a as Header
 };

package/dist/components/AppContainer/components/Main.js

@@ -1,16 +1,16 @@
 import { jsx as e } from "react/jsx-runtime";
 import { appContainerStore as n } from "../hooks/useAppContainerStore.js";
 import s from "../AppContainer.module.css.js";
-const p = ({ children: o, withBg: a = !1 }) => {
-  const r = n.useStore((t) => t.showToolbar);
+const p = ({ children: o, withBg: r = !1 }) => {
+  const a = n.useStore((t) => t.showToolbar);
   return /* @__PURE__ */ e(
     "main",
     {
       className: s.main,
-      "data-tool-sidebar-opened": r,
+      "data-tool-sidebar-opened": a,
       "data-app-container": !0,
       style: {
-        backgroundColor: a ? "light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5))" : "unset"
+        backgroundColor: r ? "light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5))" : "unset"
       },
       children: o
     }

package/dist/components/AppContainer/components/SidebarToggleButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarToggleButton.d.ts","sourceRoot":"","sources":["../../../../src/components/AppContainer/components/SidebarToggleButton.tsx"],"names":[],"mappings":"AASA,eAAO,MAAM,mBAAmB,GAAI,aAAa;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,mDAkBrE,CAAC"}
+{"version":3,"file":"SidebarToggleButton.d.ts","sourceRoot":"","sources":["../../../../src/components/AppContainer/components/SidebarToggleButton.tsx"],"names":[],"mappings":"AAWA,eAAO,MAAM,mBAAmB,GAAI,aAAa;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,mDAyBrE,CAAC"}

package/dist/components/AppContainer/components/SidebarToggleButton.js

@@ -1,27 +1,36 @@
 import { jsx as r } from "react/jsx-runtime";
-import { SidebarLeft01Icon as i, SidebarRight01Icon as n } from "@hugeicons/core-free-icons";
-import { HugeiconsIcon as c } from "@hugeicons/react";
-import { ActionIcon as a } from "@mantine/core";
-import { appContainerStore as t } from "../hooks/useAppContainerStore.js";
-const g = ({ forOpen: e }) => {
-  const { showToolbar: o } = t.useStore();
-  return e && o ? null : /* @__PURE__ */ r(
-    a,
+import { useTranslation as n } from "react-i18next";
+import { SidebarLeft01Icon as a, SidebarRight01Icon as l } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon as p } from "@hugeicons/react";
+import { Tooltip as c, ActionIcon as m } from "@mantine/core";
+import { appContainerStore as e } from "../hooks/useAppContainerStore.js";
+const h = ({ forOpen: i }) => {
+  const { t } = n("appContainer"), { showToolbar: o } = e.useStore();
+  return i && o ? null : /* @__PURE__ */ r(
+    c,
     {
-      variant: "subtle",
-      size: "md",
-      color: "gray",
-      onClick: t.api.toggleToolbar,
+      label: t(o ? "hideSidebar" : "showSidebar"),
+      withArrow: !0,
+      openDelay: 400,
       children: /* @__PURE__ */ r(
-        c,
+        m,
         {
-          icon: o ? i : n,
-          size: 20
+          variant: "subtle",
+          size: "md",
+          color: "gray",
+          onClick: e.api.toggleToolbar,
+          children: /* @__PURE__ */ r(
+            p,
+            {
+              icon: o ? a : l,
+              size: 20
+            }
+          )
         }
       )
     }
   );
 };
 export {
-  g as SidebarToggleButton
+  h as SidebarToggleButton
 };

package/dist/components/AppContainer/components/SlideAnimation.js

@@ -3,13 +3,13 @@ import { useIsFirstRender as a } from "@mantine/hooks";
 import { AnimatePresence as m, motion as d } from "framer-motion";
 import t from "../AppContainer.module.css.js";
 const u = ({
-  children: s,
-  show: n,
+  children: n,
+  show: s,
   width: e,
   position: r
 }) => {
   const o = a();
-  return /* @__PURE__ */ i(m, { children: n && /* @__PURE__ */ i(
+  return /* @__PURE__ */ i(m, { children: s && /* @__PURE__ */ i(
     d.div,
     {
       className: t.slideContainer,
@@ -32,7 +32,7 @@ const u = ({
           className: t.slideContent,
           style: { width: e },
           "data-position": r,
-          children: s
+          children: n
         }
       )
     }