@umodeapporg/ui 0.0.0-canary.ca10e69

package/dist/components/Shell/AppShell.js

@@ -0,0 +1,146 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useId, useEffect } from "react";
+import classNames from "classnames";
+import { getTabbableElements } from "../Form/ControlledDialogPrimitives.js";
+import { useUiNavigation } from "../Navigation/UiNavigationContext.js";
+import AppHeader from "./AppHeader.js";
+import AppSidebar from "./AppSidebar.js";
+import { useSidebarState } from "./useSidebarState.js";
+/* empty css                       */
+const setInert = (element, inert) => {
+  if (!element) return;
+  if (inert) element.setAttribute("inert", "");
+  else element.removeAttribute("inert");
+};
+const AppShell = ({
+  items,
+  homePath,
+  logo,
+  toolsSlot,
+  controlsSlot,
+  userMenuSlot,
+  footerItems,
+  onLogout,
+  children
+}) => {
+  const { location } = useUiNavigation();
+  const scrollRef = useRef(null);
+  const sidebarRef = useRef(null);
+  const toggleRef = useRef(null);
+  const wasMobileOpenRef = useRef(false);
+  const sidebarId = useId();
+  const {
+    isMobile,
+    isVisible,
+    isDocked,
+    isOverlayOnMobile,
+    showRail,
+    toggleLabelKey,
+    togglePrimary,
+    onHoverEnter,
+    onHoverLeave,
+    closeMobileDrawer
+  } = useSidebarState();
+  const isSidebarHidden = isMobile && !isVisible;
+  const wasSidebarHiddenRef = useRef(isSidebarHidden);
+  useEffect(() => {
+    scrollRef.current?.scrollTo({ top: 0, behavior: "smooth" });
+  }, [location.pathname]);
+  useEffect(() => {
+    const sidebar = sidebarRef.current;
+    const wasOpen = wasMobileOpenRef.current;
+    const wasHidden = wasSidebarHiddenRef.current;
+    wasMobileOpenRef.current = isOverlayOnMobile;
+    wasSidebarHiddenRef.current = isSidebarHidden;
+    if (sidebar && isSidebarHidden && !wasHidden) {
+      const active = document.activeElement;
+      const isFocusLost = sidebar.contains(active) || wasOpen && (!active || active === document.body);
+      if (isFocusLost) toggleRef.current?.focus();
+    }
+    setInert(sidebar, isSidebarHidden);
+    setInert(scrollRef.current, isOverlayOnMobile);
+    if (sidebar && isOverlayOnMobile && !wasOpen) getTabbableElements(sidebar)[0]?.focus();
+  }, [isSidebarHidden, isOverlayOnMobile]);
+  useEffect(() => {
+    if (!isOverlayOnMobile) return void 0;
+    const handleKeyDown = (event) => {
+      if (event.key !== "Escape" || event.defaultPrevented) return;
+      const active = document.activeElement;
+      const ownsFocus = !active || active === document.body || active === toggleRef.current || sidebarRef.current?.contains(active);
+      if (!ownsFocus) return;
+      event.preventDefault();
+      closeMobileDrawer();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isOverlayOnMobile, closeMobileDrawer]);
+  return /* @__PURE__ */ jsxs("div", { className: "h-screen w-full bg-surface", children: [
+    /* @__PURE__ */ jsx(
+      AppHeader,
+      {
+        toggleSidebar: togglePrimary,
+        isSidebarOpen: isDocked,
+        toggleLabelKey,
+        toggleRef,
+        mobileSidebar: isMobile ? { id: sidebarId, open: isOverlayOnMobile } : void 0,
+        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,
+            {
+              id: sidebarId,
+              sidebarRef,
+              items,
+              isMobile,
+              isVisible,
+              collapsed: showRail,
+              isFloating: !isMobile && !showRail && !isDocked,
+              onHoverEnter,
+              onHoverLeave,
+              onNavigate: isMobile ? closeMobileDrawer : void 0,
+              footerItems,
+              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, useId, useRef } from 'react';\nimport classNames from 'classnames';\n\nimport { getTabbableElements } from '@/components/Form/ControlledDialogPrimitives';\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 rows pinned to the foot, above the sign-out row (profile, settings, help). */\n  footerItems?: Array<ISidebarMenuItem>;\n  /** Sidebar footer sign-out row; hidden when absent. */\n  onLogout?: () => void;\n  children: ReactNode;\n}\n\nconst setInert = (element: HTMLElement | null, inert: boolean) => {\n  if (!element) return;\n  if (inert) element.setAttribute('inert', '');\n  else element.removeAttribute('inert');\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  footerItems,\n  onLogout,\n  children,\n}) => {\n  const { location } = useUiNavigation();\n  const scrollRef = useRef<HTMLDivElement>(null);\n  const sidebarRef = useRef<HTMLElement>(null);\n  const toggleRef = useRef<HTMLElement>(null);\n  const wasMobileOpenRef = useRef(false);\n  const sidebarId = useId();\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  const isSidebarHidden = isMobile && !isVisible;\n  const wasSidebarHiddenRef = useRef(isSidebarHidden);\n\n  useEffect(() => {\n    scrollRef.current?.scrollTo({ top: 0, behavior: 'smooth' });\n  }, [location.pathname]);\n\n  /* The closed mobile drawer only slides off-screen, so it can animate out: `inert` takes it\n     out of the Tab order and the accessibility tree, and the open drawer makes the page behind\n     its scrim inert instead. Set through the DOM because React 18 does not type the attribute.\n     Focus leaves the sidebar BEFORE it goes inert, and only when it is actually being hidden\n     (drawer closing, or a desktop resize down to mobile): a drawer that becomes the visible\n     desktop sidebar keeps the focus where it is. */\n  useEffect(() => {\n    const sidebar = sidebarRef.current;\n    const wasOpen = wasMobileOpenRef.current;\n    const wasHidden = wasSidebarHiddenRef.current;\n    wasMobileOpenRef.current = isOverlayOnMobile;\n    wasSidebarHiddenRef.current = isSidebarHidden;\n\n    if (sidebar && isSidebarHidden && !wasHidden) {\n      const active = document.activeElement;\n      const isFocusLost = sidebar.contains(active) || (wasOpen && (!active || active === document.body));\n      if (isFocusLost) toggleRef.current?.focus();\n    }\n\n    setInert(sidebar, isSidebarHidden);\n    setInert(scrollRef.current, isOverlayOnMobile);\n\n    if (sidebar && isOverlayOnMobile && !wasOpen) getTabbableElements(sidebar)[0]?.focus();\n  }, [isSidebarHidden, isOverlayOnMobile]);\n\n  useEffect(() => {\n    if (!isOverlayOnMobile) return undefined;\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key !== 'Escape' || event.defaultPrevented) return;\n      const active = document.activeElement;\n      const ownsFocus =\n        !active || active === document.body || active === toggleRef.current || sidebarRef.current?.contains(active);\n      if (!ownsFocus) return;\n      event.preventDefault();\n      closeMobileDrawer();\n    };\n\n    document.addEventListener('keydown', handleKeyDown);\n    return () => document.removeEventListener('keydown', handleKeyDown);\n  }, [isOverlayOnMobile, closeMobileDrawer]);\n\n  return (\n    <div className=\"h-screen w-full bg-surface\">\n      <AppHeader\n        toggleSidebar={togglePrimary}\n        isSidebarOpen={isDocked}\n        toggleLabelKey={toggleLabelKey}\n        toggleRef={toggleRef}\n        mobileSidebar={isMobile ? { id: sidebarId, open: isOverlayOnMobile } : undefined}\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          id={sidebarId}\n          sidebarRef={sidebarRef}\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          footerItems={footerItems}\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":";;;;;;;;;AA2BA,MAAM,WAAW,CAAC,SAA6B,UAAmB;AAChE,MAAI,CAAC,QAAS;AACd,MAAI,MAAO,SAAQ,aAAa,SAAS,EAAE;AAAA,MACtC,SAAQ,gBAAgB,OAAO;AACtC;AAOA,MAAM,WAAqC,CAAC;AAAA,EAC1C;AAAA,EACA;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;AAC7C,QAAM,aAAa,OAAoB,IAAI;AAC3C,QAAM,YAAY,OAAoB,IAAI;AAC1C,QAAM,mBAAmB,OAAO,KAAK;AACrC,QAAM,YAAY,MAAA;AAElB,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,QAAM,kBAAkB,YAAY,CAAC;AACrC,QAAM,sBAAsB,OAAO,eAAe;AAElD,YAAU,MAAM;AACd,cAAU,SAAS,SAAS,EAAE,KAAK,GAAG,UAAU,UAAU;AAAA,EAC5D,GAAG,CAAC,SAAS,QAAQ,CAAC;AAQtB,YAAU,MAAM;AACd,UAAM,UAAU,WAAW;AAC3B,UAAM,UAAU,iBAAiB;AACjC,UAAM,YAAY,oBAAoB;AACtC,qBAAiB,UAAU;AAC3B,wBAAoB,UAAU;AAE9B,QAAI,WAAW,mBAAmB,CAAC,WAAW;AAC5C,YAAM,SAAS,SAAS;AACxB,YAAM,cAAc,QAAQ,SAAS,MAAM,KAAM,YAAY,CAAC,UAAU,WAAW,SAAS;AAC5F,UAAI,YAAa,WAAU,SAAS,MAAA;AAAA,IACtC;AAEA,aAAS,SAAS,eAAe;AACjC,aAAS,UAAU,SAAS,iBAAiB;AAE7C,QAAI,WAAW,qBAAqB,CAAC,6BAA6B,OAAO,EAAE,CAAC,GAAG,MAAA;AAAA,EACjF,GAAG,CAAC,iBAAiB,iBAAiB,CAAC;AAEvC,YAAU,MAAM;AACd,QAAI,CAAC,kBAAmB,QAAO;AAE/B,UAAM,gBAAgB,CAAC,UAAyB;AAC9C,UAAI,MAAM,QAAQ,YAAY,MAAM,iBAAkB;AACtD,YAAM,SAAS,SAAS;AACxB,YAAM,YACJ,CAAC,UAAU,WAAW,SAAS,QAAQ,WAAW,UAAU,WAAW,WAAW,SAAS,SAAS,MAAM;AAC5G,UAAI,CAAC,UAAW;AAChB,YAAM,eAAA;AACN,wBAAA;AAAA,IACF;AAEA,aAAS,iBAAiB,WAAW,aAAa;AAClD,WAAO,MAAM,SAAS,oBAAoB,WAAW,aAAa;AAAA,EACpE,GAAG,CAAC,mBAAmB,iBAAiB,CAAC;AAEzC,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,eAAe,WAAW,EAAE,IAAI,WAAW,MAAM,sBAAsB;AAAA,QACvE;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,IAAI;AAAA,cACJ;AAAA,cACA;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,cACA;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,20 @@
+import { Ref } from 'react';
+import { ISidebarMenuItem } from './SidebarMenu';
+interface IAppSidebarProps {
+    id?: string;
+    sidebarRef?: Ref<HTMLElement>;
+    items: Array<ISidebarMenuItem>;
+    isMobile: boolean;
+    isVisible: boolean;
+    collapsed: boolean;
+    isFloating: boolean;
+    onHoverEnter: () => void;
+    onHoverLeave: () => void;
+    onNavigate?: () => void;
+    /** Rows pinned to the foot of the sidebar, above the sign-out row. */
+    footerItems?: Array<ISidebarMenuItem>;
+    /** 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,93 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import ControlledButton from "../Form/ControlledButton.js";
+import { MaterialSymbol } from "../UI/MaterialSymbol/index.js";
+import { SidebarFavoritesProvider, useSidebarFavorites, buildFavoriteMenuItems } from "./sidebarFavorites.js";
+import SidebarMenu from "./SidebarMenu.js";
+const ACTIVE_CLASS = "text-brand-emphasis bg-brand-soft";
+const ACTIVE_ICON_CLASS = "text-brand-emphasis";
+const SidebarMenuWithFavorites = ({ items, collapsed, onNavigate }) => {
+  const { favoriteKeys } = useSidebarFavorites();
+  const menuItems = useMemo(
+    () => [...buildFavoriteMenuItems(items, favoriteKeys), ...items ?? []],
+    [favoriteKeys, items]
+  );
+  return /* @__PURE__ */ jsx(
+    SidebarMenu,
+    {
+      items: menuItems,
+      collapsed,
+      activeClass: ACTIVE_CLASS,
+      activeIconClass: ACTIVE_ICON_CLASS,
+      onNavigate
+    }
+  );
+};
+const AppSidebar = ({
+  id,
+  sidebarRef,
+  items,
+  isMobile,
+  isVisible,
+  collapsed,
+  isFloating,
+  onHoverEnter,
+  onHoverLeave,
+  onNavigate,
+  footerItems,
+  onLogout
+}) => {
+  const { t } = useTranslation("ui");
+  const hasFooterItems = Boolean(footerItems?.length);
+  return /* @__PURE__ */ jsx(
+    "aside",
+    {
+      id,
+      ref: sidebarRef,
+      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(SidebarFavoritesProvider, { children: /* @__PURE__ */ jsx(SidebarMenuWithFavorites, { items, collapsed, onNavigate }) }),
+        (hasFooterItems || onLogout) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-2 text-foreground-muted", children: [
+          hasFooterItems && /* @__PURE__ */ jsx(
+            SidebarMenu,
+            {
+              items: footerItems ?? [],
+              collapsed,
+              activeClass: ACTIVE_CLASS,
+              activeIconClass: ACTIVE_ICON_CLASS,
+              onNavigate
+            }
+          ),
+          onLogout && /* @__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 { Ref, useMemo } from 'react';\nimport classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport { MaterialSymbol } from '@/components/UI/MaterialSymbol';\n\nimport { buildFavoriteMenuItems, SidebarFavoritesProvider, useSidebarFavorites } from './sidebarFavorites';\nimport SidebarMenu, { ISidebarMenuItem } from './SidebarMenu';\n\ninterface IAppSidebarProps {\n  id?: string;\n  sidebarRef?: Ref<HTMLElement>;\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  /** Rows pinned to the foot of the sidebar, above the sign-out row. */\n  footerItems?: Array<ISidebarMenuItem>;\n  /** Hides the footer sign-out row when absent. */\n  onLogout?: () => void;\n}\n\ninterface ISidebarMenuWithFavoritesProps {\n  items: Array<ISidebarMenuItem>;\n  collapsed: boolean;\n  onNavigate?: () => void;\n}\n\nconst ACTIVE_CLASS = 'text-brand-emphasis bg-brand-soft';\nconst ACTIVE_ICON_CLASS = 'text-brand-emphasis';\n\nconst SidebarMenuWithFavorites: React.FC<ISidebarMenuWithFavoritesProps> = ({ items, collapsed, onNavigate }) => {\n  const { favoriteKeys } = useSidebarFavorites();\n\n  const menuItems = useMemo(\n    () => [...buildFavoriteMenuItems(items, favoriteKeys), ...(items ?? [])],\n    [favoriteKeys, items],\n  );\n\n  return (\n    <SidebarMenu\n      items={menuItems}\n      collapsed={collapsed}\n      activeClass={ACTIVE_CLASS}\n      activeIconClass={ACTIVE_ICON_CLASS}\n      onNavigate={onNavigate}\n    />\n  );\n};\n\nconst AppSidebar: React.FC<IAppSidebarProps> = ({\n  id,\n  sidebarRef,\n  items,\n  isMobile,\n  isVisible,\n  collapsed,\n  isFloating,\n  onHoverEnter,\n  onHoverLeave,\n  onNavigate,\n  footerItems,\n  onLogout,\n}) => {\n  const { t } = useTranslation('ui');\n  const hasFooterItems = Boolean(footerItems?.length);\n\n  return (\n    <aside\n      id={id}\n      ref={sidebarRef}\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        <SidebarFavoritesProvider>\n          <SidebarMenuWithFavorites items={items} collapsed={collapsed} onNavigate={onNavigate} />\n        </SidebarFavoritesProvider>\n\n        {(hasFooterItems || onLogout) && (\n          <div className=\"flex flex-col gap-y-2 text-foreground-muted\">\n            {/* Outside the favorites provider on purpose: a row that is always in sight takes no star. */}\n            {hasFooterItems && (\n              <SidebarMenu\n                items={footerItems ?? []}\n                collapsed={collapsed}\n                activeClass={ACTIVE_CLASS}\n                activeIconClass={ACTIVE_ICON_CLASS}\n                onNavigate={onNavigate}\n              />\n            )}\n\n            {onLogout && (\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            )}\n          </div>\n        )}\n      </nav>\n    </aside>\n  );\n};\n\nexport default AppSidebar;\n"],"names":[],"mappings":";;;;;;;;AAiCA,MAAM,eAAe;AACrB,MAAM,oBAAoB;AAE1B,MAAM,2BAAqE,CAAC,EAAE,OAAO,WAAW,iBAAiB;AAC/G,QAAM,EAAE,aAAA,IAAiB,oBAAA;AAEzB,QAAM,YAAY;AAAA,IAChB,MAAM,CAAC,GAAG,uBAAuB,OAAO,YAAY,GAAG,GAAI,SAAS,EAAG;AAAA,IACvE,CAAC,cAAc,KAAK;AAAA,EAAA;AAGtB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,MACP;AAAA,MACA,aAAa;AAAA,MACb,iBAAiB;AAAA,MACjB;AAAA,IAAA;AAAA,EAAA;AAGN;AAEA,MAAM,aAAyC,CAAC;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;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,iBAAiB,QAAQ,aAAa,MAAM;AAElD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,KAAK;AAAA,MACL,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,oBAAC,4BACC,UAAA,oBAAC,0BAAA,EAAyB,OAAc,WAAsB,YAAwB,GACxF;AAAA,SAEE,kBAAkB,aAClB,qBAAC,OAAA,EAAI,WAAU,+CAEZ,UAAA;AAAA,UAAA,kBACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,OAAO,eAAe,CAAA;AAAA,cACtB;AAAA,cACA,aAAa;AAAA,cACb,iBAAiB;AAAA,cACjB;AAAA,YAAA;AAAA,UAAA;AAAA,UAIH,YACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,mBAAiB;AAAA,cACjB,SAAS;AAAA,cACT,WAAU;AAAA,cAEV,UAAA;AAAA,gBAAA,oBAAC,gBAAA,EAAe,MAAK,UAAS,MAAM,IAAI,QAAQ,KAAK,WAAU,WAAA,CAAW;AAAA,gBAC1E,oBAAC,QAAA,EAAK,WAAW,WAAW,yBAAyB,EAAE,gBAAgB,UAAA,CAAW,GAC/E,UAAA,EAAE,gBAAgB,EAAA,CACrB;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACF,EAAA,CAEJ;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-subtle 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-subtle 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/PumpkinGlyph.d.ts

@@ -0,0 +1,13 @@
+interface IPumpkinGlyphProps {
+    /** Same unit as `MaterialSymbol`: pixels at the default root size, rendered in rem. */
+    size: number;
+    /** Mirrors the FILL axis of the icon font: solid while its option is the active one. */
+    filled?: boolean;
+}
+/**
+ * The icon font has no pumpkin, so the Halloween option draws its own. It is a single-ink
+ * glyph on the 24-unit grid of the font and takes `currentColor`, which keeps it in step with
+ * the other positions of the knob: outlined at rest, solid with a carved face while active.
+ */
+declare const PumpkinGlyph: React.FC<IPumpkinGlyphProps>;
+export default PumpkinGlyph;

package/dist/components/Shell/PumpkinGlyph.js

@@ -0,0 +1,29 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+const STEM_PATH = "M11 6.8c0-1.9.7-3.3 2.2-4.3l1.1 1.3c-.9.7-1.3 1.7-1.3 3z";
+const BODY_PATH = "M3 14a9 7.5 0 1 0 18 0a9 7.5 0 1 0-18 0z";
+const FACE_PATH = "M7.2 13.2h3l-1.5-2.8zM13.8 13.2h3l-1.5-2.8zM7 15.6l2 1 1.5-1 1.5 1 1.5-1 1.5 1 2-1c-.8 2.6-2.7 4-5 4s-4.2-1.4-5-4z";
+const PumpkinGlyph = ({ size, filled = false }) => {
+  const sizeInRem = `${size / 16}rem`;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      "aria-hidden": true,
+      focusable: "false",
+      fill: "currentColor",
+      className: "shrink-0",
+      style: { width: sizeInRem, height: sizeInRem },
+      children: [
+        /* @__PURE__ */ jsx("path", { d: STEM_PATH }),
+        filled ? /* @__PURE__ */ jsx("path", { d: `${BODY_PATH}${FACE_PATH}`, fillRule: "evenodd" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("path", { d: BODY_PATH, fill: "none", stroke: "currentColor", strokeWidth: 1.5 }),
+          /* @__PURE__ */ jsx("path", { d: FACE_PATH })
+        ] })
+      ]
+    }
+  );
+};
+export {
+  PumpkinGlyph as default
+};
+//# sourceMappingURL=PumpkinGlyph.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PumpkinGlyph.js","sources":["../../../src/components/Shell/PumpkinGlyph.tsx"],"sourcesContent":["interface IPumpkinGlyphProps {\n  /** Same unit as `MaterialSymbol`: pixels at the default root size, rendered in rem. */\n  size: number;\n  /** Mirrors the FILL axis of the icon font: solid while its option is the active one. */\n  filled?: boolean;\n}\n\nconst STEM_PATH = 'M11 6.8c0-1.9.7-3.3 2.2-4.3l1.1 1.3c-.9.7-1.3 1.7-1.3 3z';\nconst BODY_PATH = 'M3 14a9 7.5 0 1 0 18 0a9 7.5 0 1 0-18 0z';\nconst FACE_PATH =\n  'M7.2 13.2h3l-1.5-2.8zM13.8 13.2h3l-1.5-2.8zM7 15.6l2 1 1.5-1 1.5 1 1.5-1 1.5 1 2-1c-.8 2.6-2.7 4-5 4s-4.2-1.4-5-4z';\n\n/**\n * The icon font has no pumpkin, so the Halloween option draws its own. It is a single-ink\n * glyph on the 24-unit grid of the font and takes `currentColor`, which keeps it in step with\n * the other positions of the knob: outlined at rest, solid with a carved face while active.\n */\nconst PumpkinGlyph: React.FC<IPumpkinGlyphProps> = ({ size, filled = false }) => {\n  const sizeInRem = `${size / 16}rem`;\n\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      aria-hidden\n      focusable=\"false\"\n      fill=\"currentColor\"\n      className=\"shrink-0\"\n      style={{ width: sizeInRem, height: sizeInRem }}\n    >\n      <path d={STEM_PATH} />\n      {filled ? (\n        <path d={`${BODY_PATH}${FACE_PATH}`} fillRule=\"evenodd\" />\n      ) : (\n        <>\n          <path d={BODY_PATH} fill=\"none\" stroke=\"currentColor\" strokeWidth={1.5} />\n          <path d={FACE_PATH} />\n        </>\n      )}\n    </svg>\n  );\n};\n\nexport default PumpkinGlyph;\n"],"names":[],"mappings":";AAOA,MAAM,YAAY;AAClB,MAAM,YAAY;AAClB,MAAM,YACJ;AAOF,MAAM,eAA6C,CAAC,EAAE,MAAM,SAAS,YAAY;AAC/E,QAAM,YAAY,GAAG,OAAO,EAAE;AAE9B,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,eAAW;AAAA,MACX,WAAU;AAAA,MACV,MAAK;AAAA,MACL,WAAU;AAAA,MACV,OAAO,EAAE,OAAO,WAAW,QAAQ,UAAA;AAAA,MAEnC,UAAA;AAAA,QAAA,oBAAC,QAAA,EAAK,GAAG,UAAA,CAAW;AAAA,QACnB,SACC,oBAAC,QAAA,EAAK,GAAG,GAAG,SAAS,GAAG,SAAS,IAAI,UAAS,UAAA,CAAU,IAExD,qBAAA,UAAA,EACE,UAAA;AAAA,UAAA,oBAAC,QAAA,EAAK,GAAG,WAAW,MAAK,QAAO,QAAO,gBAAe,aAAa,IAAA,CAAK;AAAA,UACxE,oBAAC,QAAA,EAAK,GAAG,UAAA,CAAW;AAAA,QAAA,EAAA,CACtB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}

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

@@ -0,0 +1,29 @@
+import { MaterialSymbolWeight, SymbolCodepoints } from '../UI/MaterialSymbol';
+export type TUiSidebarSection = 'favorites' | 'management' | 'registration';
+export interface ISidebarMenuItem {
+    id?: string;
+    weight?: MaterialSymbolWeight;
+    icon: SymbolCodepoints;
+    text: string;
+    to: string;
+    externalUrl?: string;
+    end?: boolean;
+    section?: TUiSidebarSection;
+    /**
+     * A group of the product's own: rows sharing this text sit under a header showing it as
+     * written, in the order they first appear, after the fixed sections. `section` wins.
+     */
+    sectionLabel?: string;
+    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;