@umodeapporg/ui 0.3.0 → 0.4.1

package/dist/assets/umode-ui.css

@@ -72,6 +72,154 @@
 .controlled-select-container input:hover {
   outline: none !important;
 }
+/* Sidebar expand/collapse motion.
+   Kept as plain CSS so the transitions are explicit and not affected by
+   Tailwind's transition-property utilities (which bundle their own duration). */
+
+.sidebar-aside {
+  width: 16rem;
+  transition: width 180ms ease-out;
+}
+
+.sidebar-aside.is-rail {
+  width: 4.5rem;
+}
+
+/* Floating overlay: while expanded by hover (not pinned) the panel sits above the
+   content instead of pushing it. This is the ONLY sidebar state where glass is honest,
+   because it is the only one with page content behind it; docked, the sidebar pushes the
+   layout and there is nothing to see through. */
+.sidebar-aside.is-floating,
+.sidebar-aside.is-mobile {
+  background-color: rgb(var(--glass-bg) / var(--glass-alpha));
+  backdrop-filter: blur(20px) saturate(var(--glass-saturate-strong));
+  -webkit-backdrop-filter: blur(20px) saturate(var(--glass-saturate-strong));
+  box-shadow:
+    var(--shadow-lg),
+    inset 0 1px 0 0 rgb(var(--glass-highlight) / var(--glass-highlight-alpha));
+}
+
+@media (max-width: 639px) {
+  .sidebar-aside.is-mobile {
+    backdrop-filter: blur(12px) saturate(var(--glass-saturate-strong));
+    -webkit-backdrop-filter: blur(12px) saturate(var(--glass-saturate-strong));
+  }
+}
+
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  .sidebar-aside.is-floating,
+  .sidebar-aside.is-mobile {
+    background-color: rgb(var(--color-surface-overlay));
+  }
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  .sidebar-aside.is-floating,
+  .sidebar-aside.is-mobile {
+    background-color: rgb(var(--color-surface-overlay));
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+}
+
+.sidebar-aside.is-mobile {
+  width: 16rem;
+  transition: transform 180ms ease-out;
+}
+
+.sidebar-aside.is-mobile.is-hidden {
+  transform: translateX(-100%);
+}
+
+.sidebar-content {
+  padding-left: 16rem;
+  transition: padding-left 180ms ease-out;
+}
+
+.sidebar-content.is-rail {
+  padding-left: 4.5rem;
+}
+
+.sidebar-content.is-mobile {
+  padding-left: 0;
+}
+
+.sidebar-rail-slot {
+  width: 4.5rem;
+}
+
+.sidebar-label {
+  white-space: nowrap;
+  transition:
+    opacity 150ms ease-out 60ms,
+    transform 150ms ease-out 60ms;
+}
+
+.sidebar-label.is-collapsed {
+  opacity: 0;
+  transform: translateX(-4px);
+  pointer-events: none;
+  transition:
+    opacity 120ms ease-out,
+    transform 120ms ease-out;
+}
+
+.sidebar-chevron {
+  transition:
+    opacity 150ms ease-out 60ms,
+    transform 180ms ease-out;
+}
+
+.sidebar-chevron.is-collapsed {
+  opacity: 0;
+}
+
+.sidebar-chevron.is-open {
+  transform: rotate(90deg);
+}
+
+.sidebar-submenu {
+  overflow: hidden;
+  transition: max-height 200ms ease-out;
+}
+
+/* Delicate Notion-style scrollbar: thin, semi-transparent, no visible track,
+   revealed on hover of the panel. The gutter is reserved so content never
+   shifts when the thumb appears. */
+.sidebar-scroll {
+  scrollbar-gutter: stable;
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+}
+
+.sidebar-scroll:hover,
+.sidebar-scroll:focus-within {
+  scrollbar-color: rgb(var(--color-border-strong) / 0.55) transparent;
+}
+
+.sidebar-scroll::-webkit-scrollbar {
+  width: 6px;
+}
+
+.sidebar-scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.sidebar-scroll::-webkit-scrollbar-thumb {
+  background-color: transparent;
+  border-radius: 9999px;
+  -webkit-transition: background-color 200ms ease-out;
+  transition: background-color 200ms ease-out;
+}
+
+.sidebar-scroll:hover::-webkit-scrollbar-thumb,
+.sidebar-scroll:focus-within::-webkit-scrollbar-thumb {
+  background-color: rgb(var(--color-border-strong) / 0.55);
+}
+
+.sidebar-scroll::-webkit-scrollbar-thumb:hover {
+  background-color: rgb(var(--color-border-strong) / 0.85);
+}
 /* Custom Toast Styles - Material Design style */
 
 .Toastify__toast {

package/dist/components/Shell/AppHeader.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+interface IAppHeaderProps {
+    toggleSidebar: () => void;
+    isSidebarOpen: boolean;
+    toggleLabelKey: string;
+    homePath: string;
+    /** Replaces the uMode logo; the header stays the same. */
+    logo?: ReactNode;
+    /** App tools rendered inside the pill shell (workspace, notifications...). */
+    toolsSlot?: ReactNode;
+    /** Theme/language knobs (usually the lib's ThemeToggle + LanguageToggle wired by the host). */
+    controlsSlot?: ReactNode;
+    /** The account surface (usually the lib's UserMenu wired by the host). */
+    userMenuSlot?: ReactNode;
+    onHoverEnter: () => void;
+    onHoverLeave: () => void;
+}
+declare const AppHeader: React.FC<IAppHeaderProps>;
+export default AppHeader;

package/dist/components/Shell/AppHeader.js

@@ -0,0 +1,64 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import { useUiNavigation } from "../Navigation/UiNavigationContext.js";
+import ControlledTooltip from "../UI/ControlledTooltip.js";
+import { MaterialSymbol } from "../UI/MaterialSymbol/index.js";
+import UmodeLogo from "../UI/UmodeLogo.js";
+import { HEADER_CONTROL_SHELL_CLASS } from "./headerControlStyles.js";
+const AppHeader = ({
+  toggleSidebar,
+  isSidebarOpen,
+  toggleLabelKey,
+  homePath,
+  logo,
+  toolsSlot,
+  controlsSlot,
+  userMenuSlot,
+  onHoverEnter,
+  onHoverLeave
+}) => {
+  const { t } = useTranslation("ui");
+  const { Link: NavigationLink } = useUiNavigation();
+  return /* @__PURE__ */ jsxs("header", { className: "fixed top-0 z-50 flex h-16 w-full select-none items-center justify-between border-x-0 border-t-0 py-2 pr-4 glass-subtle", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex cursor-pointer items-center gap-x-2", children: [
+      /* @__PURE__ */ jsx("div", { className: "sidebar-rail-slot flex shrink-0 items-center justify-center", children: /* @__PURE__ */ jsx(
+        MaterialSymbol,
+        {
+          icon: isSidebarOpen ? "menu_open" : "menu",
+          size: 22,
+          weight: 400,
+          onClick: toggleSidebar,
+          onMouseEnter: onHoverEnter,
+          onMouseLeave: onHoverLeave,
+          "aria-label": t(toggleLabelKey),
+          className: classNames(
+            "rounded-lg p-1 transition-colors duration-base",
+            isSidebarOpen ? "text-brand-emphasis hover:bg-brand-soft" : "text-foreground-muted hover:bg-muted-hover hover:text-foreground"
+          )
+        }
+      ) }),
+      /* @__PURE__ */ jsx(ControlledTooltip, { content: t("sidebar.home"), children: /* @__PURE__ */ jsx(
+        NavigationLink,
+        {
+          to: homePath,
+          "aria-label": t("sidebar.home"),
+          className: "interactive hidden shrink-0 rounded-lg px-1 text-foreground hover:opacity-70 tablet:block",
+          children: logo ?? /* @__PURE__ */ jsx(UmodeLogo, { className: "h-5 w-auto" })
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2", children: [
+      toolsSlot && /* @__PURE__ */ jsx("div", { className: HEADER_CONTROL_SHELL_CLASS, children: toolsSlot }),
+      controlsSlot,
+      userMenuSlot && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { className: "mx-1 h-6 w-px shrink-0 bg-border", "aria-hidden": true }),
+        userMenuSlot
+      ] })
+    ] })
+  ] });
+};
+export {
+  AppHeader as default
+};
+//# sourceMappingURL=AppHeader.js.map

package/dist/components/Shell/AppHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppHeader.js","sources":["../../../src/components/Shell/AppHeader.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\n\nimport { useUiNavigation } from '@/components/Navigation/UiNavigationContext';\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport { MaterialSymbol } from '@/components/UI/MaterialSymbol';\nimport UmodeLogo from '@/components/UI/UmodeLogo';\n\nimport { HEADER_CONTROL_SHELL_CLASS } from './headerControlStyles';\n\ninterface IAppHeaderProps {\n  toggleSidebar: () => void;\n  isSidebarOpen: boolean;\n  toggleLabelKey: string;\n  homePath: string;\n  /** Replaces the uMode logo; the header stays the same. */\n  logo?: ReactNode;\n  /** App tools rendered inside the pill shell (workspace, notifications...). */\n  toolsSlot?: ReactNode;\n  /** Theme/language knobs (usually the lib's ThemeToggle + LanguageToggle wired by the host). */\n  controlsSlot?: ReactNode;\n  /** The account surface (usually the lib's UserMenu wired by the host). */\n  userMenuSlot?: ReactNode;\n  onHoverEnter: () => void;\n  onHoverLeave: () => void;\n}\n\nconst AppHeader: React.FC<IAppHeaderProps> = ({\n  toggleSidebar,\n  isSidebarOpen,\n  toggleLabelKey,\n  homePath,\n  logo,\n  toolsSlot,\n  controlsSlot,\n  userMenuSlot,\n  onHoverEnter,\n  onHoverLeave,\n}) => {\n  const { t } = useTranslation('ui');\n  const { Link: NavigationLink } = useUiNavigation();\n\n  return (\n    <header className=\"fixed top-0 z-50 flex h-16 w-full select-none items-center justify-between border-x-0 border-t-0 py-2 pr-4 glass-subtle\">\n      <div className=\"flex cursor-pointer items-center gap-x-2\">\n        <div className=\"sidebar-rail-slot flex shrink-0 items-center justify-center\">\n          <MaterialSymbol\n            icon={isSidebarOpen ? 'menu_open' : 'menu'}\n            size={22}\n            weight={400}\n            onClick={toggleSidebar}\n            onMouseEnter={onHoverEnter}\n            onMouseLeave={onHoverLeave}\n            aria-label={t(toggleLabelKey)}\n            className={classNames(\n              'rounded-lg p-1 transition-colors duration-base',\n              isSidebarOpen\n                ? 'text-brand-emphasis hover:bg-brand-soft'\n                : 'text-foreground-muted hover:bg-muted-hover hover:text-foreground',\n            )}\n          />\n        </div>\n\n        <ControlledTooltip content={t('sidebar.home')}>\n          <NavigationLink\n            to={homePath}\n            aria-label={t('sidebar.home')}\n            className=\"interactive hidden shrink-0 rounded-lg px-1 text-foreground hover:opacity-70 tablet:block\"\n          >\n            {logo ?? <UmodeLogo className=\"h-5 w-auto\" />}\n          </NavigationLink>\n        </ControlledTooltip>\n      </div>\n\n      <div className=\"flex items-center gap-x-2\">\n        {toolsSlot && <div className={HEADER_CONTROL_SHELL_CLASS}>{toolsSlot}</div>}\n        {controlsSlot}\n\n        {userMenuSlot && (\n          <>\n            <div className=\"mx-1 h-6 w-px shrink-0 bg-border\" aria-hidden />\n            {userMenuSlot}\n          </>\n        )}\n      </div>\n    </header>\n  );\n};\n\nexport default AppHeader;\n"],"names":[],"mappings":";;;;;;;;AA4BA,MAAM,YAAuC,CAAC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AACjC,QAAM,EAAE,MAAM,eAAA,IAAmB,gBAAA;AAEjC,SACE,qBAAC,UAAA,EAAO,WAAU,2HAChB,UAAA;AAAA,IAAA,qBAAC,OAAA,EAAI,WAAU,4CACb,UAAA;AAAA,MAAA,oBAAC,OAAA,EAAI,WAAU,+DACb,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAM,gBAAgB,cAAc;AAAA,UACpC,MAAM;AAAA,UACN,QAAQ;AAAA,UACR,SAAS;AAAA,UACT,cAAc;AAAA,UACd,cAAc;AAAA,UACd,cAAY,EAAE,cAAc;AAAA,UAC5B,WAAW;AAAA,YACT;AAAA,YACA,gBACI,4CACA;AAAA,UAAA;AAAA,QACN;AAAA,MAAA,GAEJ;AAAA,MAEA,oBAAC,mBAAA,EAAkB,SAAS,EAAE,cAAc,GAC1C,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI;AAAA,UACJ,cAAY,EAAE,cAAc;AAAA,UAC5B,WAAU;AAAA,UAET,UAAA,QAAQ,oBAAC,WAAA,EAAU,WAAU,aAAA,CAAa;AAAA,QAAA;AAAA,MAAA,EAC7C,CACF;AAAA,IAAA,GACF;AAAA,IAEA,qBAAC,OAAA,EAAI,WAAU,6BACZ,UAAA;AAAA,MAAA,aAAa,oBAAC,OAAA,EAAI,WAAW,4BAA6B,UAAA,WAAU;AAAA,MACpE;AAAA,MAEA,gBACC,qBAAA,UAAA,EACE,UAAA;AAAA,QAAA,oBAAC,OAAA,EAAI,WAAU,oCAAmC,eAAW,MAAC;AAAA,QAC7D;AAAA,MAAA,EAAA,CACH;AAAA,IAAA,EAAA,CAEJ;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/Shell/AppShell.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+import { ISidebarMenuItem } from './SidebarMenu';
+interface IAppShellProps {
+    items: Array<ISidebarMenuItem>;
+    homePath: string;
+    logo?: ReactNode;
+    toolsSlot?: ReactNode;
+    controlsSlot?: ReactNode;
+    userMenuSlot?: ReactNode;
+    /** Sidebar footer sign-out row; hidden when absent. */
+    onLogout?: () => void;
+    children: ReactNode;
+}
+/**
+ * The uMode application chrome: fixed glass header, rail/dock/hover sidebar (pin persisted
+ * through uiPreferences, Ctrl+\ shortcut) and the scroll container every page renders into.
+ * Everything app-shaped (menu items, tools, account surface, logout) arrives as props/slots.
+ */
+declare const AppShell: React.FC<IAppShellProps>;
+export default AppShell;

package/dist/components/Shell/AppShell.js

@@ -0,0 +1,100 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+import classNames from "classnames";
+import { useUiNavigation } from "../Navigation/UiNavigationContext.js";
+import AppHeader from "./AppHeader.js";
+import AppSidebar from "./AppSidebar.js";
+import { useSidebarState } from "./useSidebarState.js";
+/* empty css                       */
+const AppShell = ({
+  items,
+  homePath,
+  logo,
+  toolsSlot,
+  controlsSlot,
+  userMenuSlot,
+  onLogout,
+  children
+}) => {
+  const { location } = useUiNavigation();
+  const scrollRef = useRef(null);
+  const {
+    isMobile,
+    isVisible,
+    isDocked,
+    isOverlayOnMobile,
+    showRail,
+    toggleLabelKey,
+    togglePrimary,
+    onHoverEnter,
+    onHoverLeave,
+    closeMobileDrawer
+  } = useSidebarState();
+  useEffect(() => {
+    scrollRef.current?.scrollTo({ top: 0, behavior: "smooth" });
+  }, [location.pathname]);
+  return /* @__PURE__ */ jsxs("div", { className: "h-screen w-full bg-surface", children: [
+    /* @__PURE__ */ jsx(
+      AppHeader,
+      {
+        toggleSidebar: togglePrimary,
+        isSidebarOpen: isDocked,
+        toggleLabelKey,
+        homePath,
+        logo,
+        toolsSlot,
+        controlsSlot,
+        userMenuSlot,
+        onHoverEnter,
+        onHoverLeave
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "main",
+      {
+        className: classNames("sidebar-content flex h-screen w-full", {
+          "is-rail": !isMobile && !isDocked,
+          "is-mobile": isMobile
+        }),
+        children: [
+          isOverlayOnMobile && /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": true,
+              className: "fixed inset-0 z-40 bg-scrim motion-reduce:transition-none",
+              onClick: closeMobileDrawer
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            AppSidebar,
+            {
+              items,
+              isMobile,
+              isVisible,
+              collapsed: showRail,
+              isFloating: !isMobile && !showRail && !isDocked,
+              onHoverEnter,
+              onHoverLeave,
+              onNavigate: isMobile ? closeMobileDrawer : void 0,
+              onLogout
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              id: "scrollableDiv",
+              ref: scrollRef,
+              className: "z-30 h-screen w-full px-4 pt-24 tablet:px-6",
+              style: { overflow: "auto" },
+              children
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+export {
+  AppShell as default
+};
+//# sourceMappingURL=AppShell.js.map

package/dist/components/Shell/AppShell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppShell.js","sources":["../../../src/components/Shell/AppShell.tsx"],"sourcesContent":["import { ReactNode, useEffect, useRef } from 'react';\nimport classNames from 'classnames';\n\nimport { useUiNavigation } from '@/components/Navigation/UiNavigationContext';\n\nimport AppHeader from './AppHeader';\nimport AppSidebar from './AppSidebar';\nimport { ISidebarMenuItem } from './SidebarMenu';\nimport { useSidebarState } from './useSidebarState';\n\nimport '../../styles/sidebar.css';\n\ninterface IAppShellProps {\n  items: Array<ISidebarMenuItem>;\n  homePath: string;\n  logo?: ReactNode;\n  toolsSlot?: ReactNode;\n  controlsSlot?: ReactNode;\n  userMenuSlot?: ReactNode;\n  /** Sidebar footer sign-out row; hidden when absent. */\n  onLogout?: () => void;\n  children: ReactNode;\n}\n\n/**\n * The uMode application chrome: fixed glass header, rail/dock/hover sidebar (pin persisted\n * through uiPreferences, Ctrl+\\ shortcut) and the scroll container every page renders into.\n * Everything app-shaped (menu items, tools, account surface, logout) arrives as props/slots.\n */\nconst AppShell: React.FC<IAppShellProps> = ({\n  items,\n  homePath,\n  logo,\n  toolsSlot,\n  controlsSlot,\n  userMenuSlot,\n  onLogout,\n  children,\n}) => {\n  const { location } = useUiNavigation();\n  const scrollRef = useRef<HTMLDivElement>(null);\n\n  const {\n    isMobile,\n    isVisible,\n    isDocked,\n    isOverlayOnMobile,\n    showRail,\n    toggleLabelKey,\n    togglePrimary,\n    onHoverEnter,\n    onHoverLeave,\n    closeMobileDrawer,\n  } = useSidebarState();\n\n  useEffect(() => {\n    scrollRef.current?.scrollTo({ top: 0, behavior: 'smooth' });\n  }, [location.pathname]);\n\n  return (\n    <div className=\"h-screen w-full bg-surface\">\n      <AppHeader\n        toggleSidebar={togglePrimary}\n        isSidebarOpen={isDocked}\n        toggleLabelKey={toggleLabelKey}\n        homePath={homePath}\n        logo={logo}\n        toolsSlot={toolsSlot}\n        controlsSlot={controlsSlot}\n        userMenuSlot={userMenuSlot}\n        onHoverEnter={onHoverEnter}\n        onHoverLeave={onHoverLeave}\n      />\n\n      <main\n        className={classNames('sidebar-content flex h-screen w-full', {\n          'is-rail': !isMobile && !isDocked,\n          'is-mobile': isMobile,\n        })}\n      >\n        {isOverlayOnMobile && (\n          <div\n            aria-hidden\n            className=\"fixed inset-0 z-40 bg-scrim motion-reduce:transition-none\"\n            onClick={closeMobileDrawer}\n          />\n        )}\n\n        <AppSidebar\n          items={items}\n          isMobile={isMobile}\n          isVisible={isVisible}\n          collapsed={showRail}\n          isFloating={!isMobile && !showRail && !isDocked}\n          onHoverEnter={onHoverEnter}\n          onHoverLeave={onHoverLeave}\n          onNavigate={isMobile ? closeMobileDrawer : undefined}\n          onLogout={onLogout}\n        />\n\n        <div\n          id=\"scrollableDiv\"\n          ref={scrollRef}\n          className=\"z-30 h-screen w-full px-4 pt-24 tablet:px-6\"\n          style={{ overflow: 'auto' }}\n        >\n          {children}\n        </div>\n      </main>\n    </div>\n  );\n};\n\nexport default AppShell;\n"],"names":[],"mappings":";;;;;;;;AA6BA,MAAM,WAAqC,CAAC;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,SAAA,IAAa,gBAAA;AACrB,QAAM,YAAY,OAAuB,IAAI;AAE7C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE,gBAAA;AAEJ,YAAU,MAAM;AACd,cAAU,SAAS,SAAS,EAAE,KAAK,GAAG,UAAU,UAAU;AAAA,EAC5D,GAAG,CAAC,SAAS,QAAQ,CAAC;AAEtB,SACE,qBAAC,OAAA,EAAI,WAAU,8BACb,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAe;AAAA,QACf,eAAe;AAAA,QACf;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IAAA;AAAA,IAGF;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,WAAW,wCAAwC;AAAA,UAC5D,WAAW,CAAC,YAAY,CAAC;AAAA,UACzB,aAAa;AAAA,QAAA,CACd;AAAA,QAEA,UAAA;AAAA,UAAA,qBACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,eAAW;AAAA,cACX,WAAU;AAAA,cACV,SAAS;AAAA,YAAA;AAAA,UAAA;AAAA,UAIb;AAAA,YAAC;AAAA,YAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cACA,WAAW;AAAA,cACX,YAAY,CAAC,YAAY,CAAC,YAAY,CAAC;AAAA,cACvC;AAAA,cACA;AAAA,cACA,YAAY,WAAW,oBAAoB;AAAA,cAC3C;AAAA,YAAA;AAAA,UAAA;AAAA,UAGF;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAG;AAAA,cACH,KAAK;AAAA,cACL,WAAU;AAAA,cACV,OAAO,EAAE,UAAU,OAAA;AAAA,cAElB;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}

package/dist/components/Shell/AppSidebar.d.ts

@@ -0,0 +1,15 @@
+import { ISidebarMenuItem } from './SidebarMenu';
+interface IAppSidebarProps {
+    items: Array<ISidebarMenuItem>;
+    isMobile: boolean;
+    isVisible: boolean;
+    collapsed: boolean;
+    isFloating: boolean;
+    onHoverEnter: () => void;
+    onHoverLeave: () => void;
+    onNavigate?: () => void;
+    /** Hides the footer sign-out row when absent. */
+    onLogout?: () => void;
+}
+declare const AppSidebar: React.FC<IAppSidebarProps>;
+export default AppSidebar;

package/dist/components/Shell/AppSidebar.js

@@ -0,0 +1,63 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import ControlledButton from "../Form/ControlledButton.js";
+import { MaterialSymbol } from "../UI/MaterialSymbol/index.js";
+import SidebarMenu from "./SidebarMenu.js";
+const AppSidebar = ({
+  items,
+  isMobile,
+  isVisible,
+  collapsed,
+  isFloating,
+  onHoverEnter,
+  onHoverLeave,
+  onNavigate,
+  onLogout
+}) => {
+  const { t } = useTranslation("ui");
+  return /* @__PURE__ */ jsx(
+    "aside",
+    {
+      onMouseEnter: onHoverEnter,
+      onMouseLeave: onHoverLeave,
+      className: classNames(
+        "sidebar-aside fixed left-0 top-0 z-40 h-full overflow-hidden border-r border-border bg-muted",
+        {
+          "is-rail": !isMobile && collapsed,
+          "is-mobile": isMobile,
+          "is-floating": isFloating,
+          "is-hidden pointer-events-none": isMobile && !isVisible
+        }
+      ),
+      children: /* @__PURE__ */ jsxs("nav", { className: "sidebar-scroll flex h-full flex-col justify-between gap-y-5 overflow-y-auto overflow-x-hidden px-3 py-5 pt-20", children: [
+        /* @__PURE__ */ jsx(
+          SidebarMenu,
+          {
+            items,
+            collapsed,
+            activeClass: "text-brand-emphasis bg-brand-soft",
+            activeIconClass: "text-brand-emphasis",
+            onNavigate
+          }
+        ),
+        onLogout && /* @__PURE__ */ jsx("div", { className: "text-foreground-muted", children: /* @__PURE__ */ jsxs(
+          ControlledButton,
+          {
+            defaultHtmlButton: true,
+            onClick: onLogout,
+            className: "flex h-9 w-full items-center gap-x-3 rounded-lg px-3 text-left text-foreground-muted transition-colors duration-base hover:bg-muted-hover hover:text-foreground",
+            children: [
+              /* @__PURE__ */ jsx(MaterialSymbol, { icon: "logout", size: 20, weight: 400, className: "shrink-0" }),
+              /* @__PURE__ */ jsx("span", { className: classNames("sidebar-label text-sm", { "is-collapsed": collapsed }), children: t("sidebar.logout") })
+            ]
+          }
+        ) })
+      ] })
+    }
+  );
+};
+export {
+  AppSidebar as default
+};
+//# sourceMappingURL=AppSidebar.js.map

package/dist/components/Shell/AppSidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppSidebar.js","sources":["../../../src/components/Shell/AppSidebar.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport { MaterialSymbol } from '@/components/UI/MaterialSymbol';\n\nimport SidebarMenu, { ISidebarMenuItem } from './SidebarMenu';\n\ninterface IAppSidebarProps {\n  items: Array<ISidebarMenuItem>;\n  isMobile: boolean;\n  isVisible: boolean;\n  collapsed: boolean;\n  isFloating: boolean;\n  onHoverEnter: () => void;\n  onHoverLeave: () => void;\n  onNavigate?: () => void;\n  /** Hides the footer sign-out row when absent. */\n  onLogout?: () => void;\n}\n\nconst AppSidebar: React.FC<IAppSidebarProps> = ({\n  items,\n  isMobile,\n  isVisible,\n  collapsed,\n  isFloating,\n  onHoverEnter,\n  onHoverLeave,\n  onNavigate,\n  onLogout,\n}) => {\n  const { t } = useTranslation('ui');\n\n  return (\n    <aside\n      onMouseEnter={onHoverEnter}\n      onMouseLeave={onHoverLeave}\n      className={classNames(\n        'sidebar-aside fixed left-0 top-0 z-40 h-full overflow-hidden border-r border-border bg-muted',\n        {\n          'is-rail': !isMobile && collapsed,\n          'is-mobile': isMobile,\n          'is-floating': isFloating,\n          'is-hidden pointer-events-none': isMobile && !isVisible,\n        },\n      )}\n    >\n      <nav className=\"sidebar-scroll flex h-full flex-col justify-between gap-y-5 overflow-y-auto overflow-x-hidden px-3 py-5 pt-20\">\n        <SidebarMenu\n          items={items}\n          collapsed={collapsed}\n          activeClass=\"text-brand-emphasis bg-brand-soft\"\n          activeIconClass=\"text-brand-emphasis\"\n          onNavigate={onNavigate}\n        />\n\n        {onLogout && (\n          <div className=\"text-foreground-muted\">\n            <ControlledButton\n              defaultHtmlButton\n              onClick={onLogout}\n              className=\"flex h-9 w-full items-center gap-x-3 rounded-lg px-3 text-left text-foreground-muted transition-colors duration-base hover:bg-muted-hover hover:text-foreground\"\n            >\n              <MaterialSymbol icon=\"logout\" size={20} weight={400} className=\"shrink-0\" />\n              <span className={classNames('sidebar-label text-sm', { 'is-collapsed': collapsed })}>\n                {t('sidebar.logout')}\n              </span>\n            </ControlledButton>\n          </div>\n        )}\n      </nav>\n    </aside>\n  );\n};\n\nexport default AppSidebar;\n"],"names":[],"mappings":";;;;;;AAqBA,MAAM,aAAyC,CAAC;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AAEjC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,cAAc;AAAA,MACd,cAAc;AAAA,MACd,WAAW;AAAA,QACT;AAAA,QACA;AAAA,UACE,WAAW,CAAC,YAAY;AAAA,UACxB,aAAa;AAAA,UACb,eAAe;AAAA,UACf,iCAAiC,YAAY,CAAC;AAAA,QAAA;AAAA,MAChD;AAAA,MAGF,UAAA,qBAAC,OAAA,EAAI,WAAU,iHACb,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA,aAAY;AAAA,YACZ,iBAAgB;AAAA,YAChB;AAAA,UAAA;AAAA,QAAA;AAAA,QAGD,YACC,oBAAC,OAAA,EAAI,WAAU,yBACb,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,mBAAiB;AAAA,YACjB,SAAS;AAAA,YACT,WAAU;AAAA,YAEV,UAAA;AAAA,cAAA,oBAAC,gBAAA,EAAe,MAAK,UAAS,MAAM,IAAI,QAAQ,KAAK,WAAU,WAAA,CAAW;AAAA,cAC1E,oBAAC,QAAA,EAAK,WAAW,WAAW,yBAAyB,EAAE,gBAAgB,UAAA,CAAW,GAC/E,UAAA,EAAE,gBAAgB,EAAA,CACrB;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA,EACF,CACF;AAAA,MAAA,EAAA,CAEJ;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/Shell/LanguageToggle.d.ts

@@ -0,0 +1,8 @@
+export type TUiLanguage = 'pt' | 'en';
+interface ILanguageToggleProps {
+    language: TUiLanguage;
+    onChange: (language: TUiLanguage) => void;
+}
+/** PT/EN knob; the host owns the i18n instance and persistence. */
+declare const LanguageToggle: React.FC<ILanguageToggleProps>;
+export default LanguageToggle;

package/dist/components/Shell/LanguageToggle.js

@@ -0,0 +1,59 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import ControlledButton from "../Form/ControlledButton.js";
+import ControlledTooltip from "../UI/ControlledTooltip.js";
+import { MaterialSymbol } from "../UI/MaterialSymbol/index.js";
+import { HEADER_CONTROL_SIZE_REM, HEADER_CONTROL_SHELL_CLASS } from "./headerControlStyles.js";
+const OPTION_WIDTH_REM = 2.25;
+const LanguageToggle = ({ language, onChange }) => {
+  const { t } = useTranslation("ui");
+  const isPT = language === "pt";
+  const optionClass = (isActive) => classNames(
+    "relative z-10 flex shrink-0 items-center justify-center rounded-full text-[0.6875rem] font-semibold leading-none tracking-wide transition-colors duration-base",
+    isActive ? "text-brand-emphasis" : "text-foreground-faint hover:text-foreground-muted"
+  );
+  return /* @__PURE__ */ jsx(ControlledTooltip, { content: t("language.toggle"), children: /* @__PURE__ */ jsxs("div", { className: classNames(HEADER_CONTROL_SHELL_CLASS, "gap-x-1.5 pl-2.5"), children: [
+    /* @__PURE__ */ jsx(MaterialSymbol, { icon: "language", size: 15, className: "shrink-0 text-foreground-faint" }),
+    /* @__PURE__ */ jsxs("div", { className: "relative flex items-center", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-hidden": true,
+          className: "pointer-events-none absolute left-0 top-0 rounded-full bg-surface shadow-elevation1 ring-1 ring-border transition-transform duration-base ease-enter",
+          style: {
+            width: `${OPTION_WIDTH_REM}rem`,
+            height: `${HEADER_CONTROL_SIZE_REM}rem`,
+            transform: `translateX(${isPT ? 0 : OPTION_WIDTH_REM}rem)`
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ControlledButton,
+        {
+          defaultHtmlButton: true,
+          "aria-pressed": isPT,
+          onClick: () => onChange("pt"),
+          className: optionClass(isPT),
+          style: { width: `${OPTION_WIDTH_REM}rem`, height: `${HEADER_CONTROL_SIZE_REM}rem` },
+          children: t("language.pt_short")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ControlledButton,
+        {
+          defaultHtmlButton: true,
+          "aria-pressed": !isPT,
+          onClick: () => onChange("en"),
+          className: optionClass(!isPT),
+          style: { width: `${OPTION_WIDTH_REM}rem`, height: `${HEADER_CONTROL_SIZE_REM}rem` },
+          children: t("language.en_short")
+        }
+      )
+    ] })
+  ] }) });
+};
+export {
+  LanguageToggle as default
+};
+//# sourceMappingURL=LanguageToggle.js.map

package/dist/components/Shell/LanguageToggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LanguageToggle.js","sources":["../../../src/components/Shell/LanguageToggle.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport { MaterialSymbol } from '@/components/UI/MaterialSymbol';\n\nimport { HEADER_CONTROL_SHELL_CLASS, HEADER_CONTROL_SIZE_REM } from './headerControlStyles';\n\nconst OPTION_WIDTH_REM = 2.25;\n\nexport type TUiLanguage = 'pt' | 'en';\n\ninterface ILanguageToggleProps {\n  language: TUiLanguage;\n  onChange: (language: TUiLanguage) => void;\n}\n\n/** PT/EN knob; the host owns the i18n instance and persistence. */\nconst LanguageToggle: React.FC<ILanguageToggleProps> = ({ language, onChange }) => {\n  const { t } = useTranslation('ui');\n\n  const isPT = language === 'pt';\n\n  const optionClass = (isActive: boolean) =>\n    classNames(\n      'relative z-10 flex shrink-0 items-center justify-center rounded-full text-[0.6875rem] font-semibold leading-none tracking-wide transition-colors duration-base',\n      isActive ? 'text-brand-emphasis' : 'text-foreground-faint hover:text-foreground-muted',\n    );\n\n  return (\n    <ControlledTooltip content={t('language.toggle')}>\n      <div className={classNames(HEADER_CONTROL_SHELL_CLASS, 'gap-x-1.5 pl-2.5')}>\n        <MaterialSymbol icon=\"language\" size={15} className=\"shrink-0 text-foreground-faint\" />\n\n        <div className=\"relative flex items-center\">\n          <div\n            aria-hidden\n            className=\"pointer-events-none absolute left-0 top-0 rounded-full bg-surface shadow-elevation1 ring-1 ring-border transition-transform duration-base ease-enter\"\n            style={{\n              width: `${OPTION_WIDTH_REM}rem`,\n              height: `${HEADER_CONTROL_SIZE_REM}rem`,\n              transform: `translateX(${isPT ? 0 : OPTION_WIDTH_REM}rem)`,\n            }}\n          />\n\n          <ControlledButton\n            defaultHtmlButton\n            aria-pressed={isPT}\n            onClick={() => onChange('pt')}\n            className={optionClass(isPT)}\n            style={{ width: `${OPTION_WIDTH_REM}rem`, height: `${HEADER_CONTROL_SIZE_REM}rem` }}\n          >\n            {t('language.pt_short')}\n          </ControlledButton>\n\n          <ControlledButton\n            defaultHtmlButton\n            aria-pressed={!isPT}\n            onClick={() => onChange('en')}\n            className={optionClass(!isPT)}\n            style={{ width: `${OPTION_WIDTH_REM}rem`, height: `${HEADER_CONTROL_SIZE_REM}rem` }}\n          >\n            {t('language.en_short')}\n          </ControlledButton>\n        </div>\n      </div>\n    </ControlledTooltip>\n  );\n};\n\nexport default LanguageToggle;\n"],"names":[],"mappings":";;;;;;;AASA,MAAM,mBAAmB;AAUzB,MAAM,iBAAiD,CAAC,EAAE,UAAU,eAAe;AACjF,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AAEjC,QAAM,OAAO,aAAa;AAE1B,QAAM,cAAc,CAAC,aACnB;AAAA,IACE;AAAA,IACA,WAAW,wBAAwB;AAAA,EAAA;AAGvC,SACE,oBAAC,mBAAA,EAAkB,SAAS,EAAE,iBAAiB,GAC7C,UAAA,qBAAC,OAAA,EAAI,WAAW,WAAW,4BAA4B,kBAAkB,GACvE,UAAA;AAAA,IAAA,oBAAC,kBAAe,MAAK,YAAW,MAAM,IAAI,WAAU,kCAAiC;AAAA,IAErF,qBAAC,OAAA,EAAI,WAAU,8BACb,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,eAAW;AAAA,UACX,WAAU;AAAA,UACV,OAAO;AAAA,YACL,OAAO,GAAG,gBAAgB;AAAA,YAC1B,QAAQ,GAAG,uBAAuB;AAAA,YAClC,WAAW,cAAc,OAAO,IAAI,gBAAgB;AAAA,UAAA;AAAA,QACtD;AAAA,MAAA;AAAA,MAGF;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,mBAAiB;AAAA,UACjB,gBAAc;AAAA,UACd,SAAS,MAAM,SAAS,IAAI;AAAA,UAC5B,WAAW,YAAY,IAAI;AAAA,UAC3B,OAAO,EAAE,OAAO,GAAG,gBAAgB,OAAO,QAAQ,GAAG,uBAAuB,MAAA;AAAA,UAE3E,YAAE,mBAAmB;AAAA,QAAA;AAAA,MAAA;AAAA,MAGxB;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,mBAAiB;AAAA,UACjB,gBAAc,CAAC;AAAA,UACf,SAAS,MAAM,SAAS,IAAI;AAAA,UAC5B,WAAW,YAAY,CAAC,IAAI;AAAA,UAC5B,OAAO,EAAE,OAAO,GAAG,gBAAgB,OAAO,QAAQ,GAAG,uBAAuB,MAAA;AAAA,UAE3E,YAAE,mBAAmB;AAAA,QAAA;AAAA,MAAA;AAAA,IACxB,EAAA,CACF;AAAA,EAAA,EAAA,CACF,EAAA,CACF;AAEJ;"}

package/dist/components/Shell/SidebarMenu.d.ts

@@ -0,0 +1,24 @@
+import { MaterialSymbolWeight, SymbolCodepoints } from '../UI/MaterialSymbol';
+export type TUiSidebarSection = 'management' | 'registration';
+export interface ISidebarMenuItem {
+    id?: string;
+    weight?: MaterialSymbolWeight;
+    icon: SymbolCodepoints;
+    text: string;
+    to: string;
+    externalUrl?: string;
+    end?: boolean;
+    section?: TUiSidebarSection;
+    children?: Array<ISidebarMenuItem>;
+}
+export declare const resolveSidebarItemId: (item: ISidebarMenuItem) => string;
+interface ISidebarMenuProps {
+    items: Array<ISidebarMenuItem>;
+    activeClass: string;
+    collapsed: boolean;
+    activeIconClass?: string;
+    onNavigate?: () => void;
+    level?: number;
+}
+declare const SidebarMenu: React.FC<ISidebarMenuProps>;
+export default SidebarMenu;