@umodeapporg/ui 0.3.0 → 0.4.1

package/dist/components/Shell/SidebarMenu.js

@@ -0,0 +1,204 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import ControlledButton from "../Form/ControlledButton.js";
+import { useUiNavigation } from "../Navigation/UiNavigationContext.js";
+import { MaterialSymbol } from "../UI/MaterialSymbol/index.js";
+const resolveSidebarItemId = (item) => item.id ?? `${item.to}:${item.text}`;
+const matchesRoute = (location, target, end = false) => {
+  if (!target || target === "#") return false;
+  if (target.includes("?")) {
+    const [pathPart, queryPart] = target.split("?");
+    const samePath = end ? location.pathname === pathPart : location.pathname === pathPart || location.pathname.startsWith(`${pathPart}/`);
+    if (!samePath) return false;
+    const currentParams = new URLSearchParams(location.search);
+    const expectedParams = new URLSearchParams(queryPart);
+    return Array.from(expectedParams.entries()).every(([key, value]) => currentParams.get(key) === value);
+  }
+  return end ? location.pathname === target : location.pathname === target || location.pathname.startsWith(`${target}/`);
+};
+const containsActiveRoute = (item, location) => item.children?.length ? item.children.some((child) => containsActiveRoute(child, location)) : matchesRoute(location, item.to, item.end);
+const SidebarMenuRow = ({
+  item,
+  isOpen,
+  collapsed,
+  onToggle,
+  activeClass,
+  activeIconClass,
+  onNavigate,
+  level
+}) => {
+  const { location, Link: NavigationLink } = useUiNavigation();
+  const contentRef = useRef(null);
+  const [maxHeight, setMaxHeight] = useState("0px");
+  const hasChildren = Boolean(item.children?.length);
+  const isActive = hasChildren ? containsActiveRoute(item, location) : matchesRoute(location, item.to, item.end);
+  const submenuOpen = isOpen && !collapsed;
+  useEffect(() => {
+    const content = contentRef.current;
+    if (!content) return;
+    if (!submenuOpen) {
+      setMaxHeight("0px");
+      return;
+    }
+    const updateHeight = () => setMaxHeight(`${content.scrollHeight}px`);
+    updateHeight();
+    const observer = new ResizeObserver(updateHeight);
+    observer.observe(content);
+    return () => observer.disconnect();
+  }, [submenuOpen]);
+  const rowClassName = classNames(
+    "relative flex h-9 w-full items-center gap-x-3 rounded-lg px-3 text-left transition-colors duration-base",
+    isActive ? activeClass : "text-foreground-muted hover:bg-muted-hover hover:text-foreground"
+  );
+  const iconClassName = classNames(
+    "shrink-0",
+    isActive ? activeIconClass ?? "text-brand-emphasis" : "text-foreground-muted"
+  );
+  const activeBar = isActive ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "absolute left-0 top-1/2 h-5 w-0.5 -translate-y-1/2 rounded-full bg-brand" }) : null;
+  const icon = /* @__PURE__ */ jsx(MaterialSymbol, { icon: item.icon, size: 20, weight: item.weight || 400, className: iconClassName });
+  const label = /* @__PURE__ */ jsx("span", { className: classNames("sidebar-label text-sm", { "is-collapsed": collapsed }), children: item.text });
+  if (item.externalUrl) {
+    return /* @__PURE__ */ jsx("li", { className: "flex flex-col", children: /* @__PURE__ */ jsxs(
+      "a",
+      {
+        href: item.externalUrl,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: rowClassName,
+        onClick: onNavigate,
+        children: [
+          activeBar,
+          icon,
+          label
+        ]
+      }
+    ) });
+  }
+  if (hasChildren) {
+    return /* @__PURE__ */ jsxs("li", { className: "flex flex-col", children: [
+      /* @__PURE__ */ jsxs(ControlledButton, { defaultHtmlButton: true, onClick: onToggle, "aria-expanded": submenuOpen, className: rowClassName, children: [
+        activeBar,
+        icon,
+        label,
+        /* @__PURE__ */ jsx(
+          MaterialSymbol,
+          {
+            icon: "chevron_right",
+            size: 18,
+            className: classNames("sidebar-chevron ml-auto shrink-0 text-foreground-subtle", {
+              "is-collapsed": collapsed,
+              "is-open": submenuOpen
+            })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("div", { style: { maxHeight }, className: classNames("sidebar-submenu", { "mt-1": submenuOpen }), children: /* @__PURE__ */ jsx("div", { ref: contentRef, className: "pl-5", children: /* @__PURE__ */ jsx(
+        SidebarMenu,
+        {
+          items: item.children ?? [],
+          collapsed,
+          activeClass,
+          activeIconClass,
+          onNavigate,
+          level: level + 1
+        }
+      ) }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsx("li", { className: "flex flex-col", children: /* @__PURE__ */ jsxs(NavigationLink, { to: item.to, className: rowClassName, onClick: onNavigate, children: [
+    activeBar,
+    icon,
+    label
+  ] }) });
+};
+const SECTION_LABEL_KEYS = {
+  management: "sidebar.sections.management",
+  registration: "sidebar.sections.registration"
+};
+const SidebarSectionHeader = ({ section, collapsed, withDivider }) => {
+  const { t } = useTranslation("ui");
+  if (collapsed) {
+    if (!withDivider) return null;
+    return /* @__PURE__ */ jsx("li", { "aria-hidden": true, className: "flex flex-col px-3", children: /* @__PURE__ */ jsx("span", { className: "border-t border-border/70" }) });
+  }
+  return /* @__PURE__ */ jsxs("li", { className: classNames("flex flex-col", withDivider ? "mt-2" : "mt-1"), children: [
+    withDivider && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "mx-3 mb-2 border-t border-border/70" }),
+    /* @__PURE__ */ jsx("span", { className: "px-3 pb-0.5 text-xxs font-semibold uppercase tracking-wide text-foreground-subtle", children: t(SECTION_LABEL_KEYS[section]) })
+  ] });
+};
+const SECTION_ORDER = ["management", "registration"];
+const groupItemsBySection = (items) => {
+  const itemsWithoutSection = (items ?? []).filter((item) => !item.section);
+  const sectionGroups = SECTION_ORDER.map((section) => ({
+    section,
+    items: (items ?? []).filter((item) => item.section === section)
+  })).filter((group) => group.items.length > 0);
+  return itemsWithoutSection.length ? [{ section: null, items: itemsWithoutSection }, ...sectionGroups] : sectionGroups;
+};
+const SidebarMenu = ({
+  items,
+  activeClass,
+  collapsed,
+  activeIconClass,
+  onNavigate,
+  level = 0
+}) => {
+  const { location } = useUiNavigation();
+  const activeKey = items.filter((item) => Boolean(item.children?.length) && containsActiveRoute(item, location)).map(resolveSidebarItemId)[0] ?? null;
+  const [openKey, setOpenKey] = useState(activeKey);
+  const previousActiveKey = useRef(activeKey);
+  useEffect(() => {
+    if (activeKey && activeKey !== previousActiveKey.current) {
+      setOpenKey(activeKey);
+    }
+    previousActiveKey.current = activeKey;
+  }, [activeKey]);
+  const handleToggle = (key) => {
+    setOpenKey((current) => current === key ? null : key);
+  };
+  const showSections = level === 0;
+  const groups = showSections ? groupItemsBySection(items) : [{ section: null, items: items ?? [] }];
+  return /* @__PURE__ */ jsx("ul", { className: classNames("flex flex-col", level === 0 ? "gap-y-2" : "gap-y-1"), children: groups.flatMap((group, groupIndex) => {
+    const rows = [];
+    if (group.section) {
+      rows.push(
+        /* @__PURE__ */ jsx(
+          SidebarSectionHeader,
+          {
+            section: group.section,
+            collapsed,
+            withDivider: groupIndex > 0
+          },
+          `section-${group.section}`
+        )
+      );
+    }
+    group.items.forEach((item) => {
+      const itemId = resolveSidebarItemId(item);
+      rows.push(
+        /* @__PURE__ */ jsx(
+          SidebarMenuRow,
+          {
+            item,
+            isOpen: openKey === itemId,
+            collapsed,
+            onToggle: () => handleToggle(itemId),
+            activeClass,
+            activeIconClass,
+            onNavigate,
+            level
+          },
+          itemId
+        )
+      );
+    });
+    return rows;
+  }) });
+};
+export {
+  SidebarMenu as default,
+  resolveSidebarItemId
+};
+//# sourceMappingURL=SidebarMenu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarMenu.js","sources":["../../../src/components/Shell/SidebarMenu.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport { useUiNavigation } from '@/components/Navigation/UiNavigationContext';\nimport { MaterialSymbol, MaterialSymbolWeight, SymbolCodepoints } from '@/components/UI/MaterialSymbol';\n\nexport type TUiSidebarSection = 'management' | 'registration';\n\nexport interface ISidebarMenuItem {\n  id?: string;\n  weight?: MaterialSymbolWeight;\n  icon: SymbolCodepoints;\n  text: string;\n  to: string;\n  externalUrl?: string;\n  end?: boolean;\n  section?: TUiSidebarSection;\n  children?: Array<ISidebarMenuItem>;\n}\n\nexport const resolveSidebarItemId = (item: ISidebarMenuItem): string => item.id ?? `${item.to}:${item.text}`;\n\ninterface ISidebarLocation {\n  pathname: string;\n  search: string;\n}\n\ninterface ISidebarMenuProps {\n  items: Array<ISidebarMenuItem>;\n  activeClass: string;\n  collapsed: boolean;\n  activeIconClass?: string;\n  onNavigate?: () => void;\n  level?: number;\n}\n\nconst matchesRoute = (location: ISidebarLocation, target: string, end = false): boolean => {\n  if (!target || target === '#') return false;\n\n  if (target.includes('?')) {\n    const [pathPart, queryPart] = target.split('?');\n    const samePath = end\n      ? location.pathname === pathPart\n      : location.pathname === pathPart || location.pathname.startsWith(`${pathPart}/`);\n    if (!samePath) return false;\n\n    const currentParams = new URLSearchParams(location.search);\n    const expectedParams = new URLSearchParams(queryPart);\n\n    return Array.from(expectedParams.entries()).every(([key, value]) => currentParams.get(key) === value);\n  }\n\n  return end\n    ? location.pathname === target\n    : location.pathname === target || location.pathname.startsWith(`${target}/`);\n};\n\nconst containsActiveRoute = (item: ISidebarMenuItem, location: ISidebarLocation): boolean =>\n  item.children?.length\n    ? item.children.some((child) => containsActiveRoute(child, location))\n    : matchesRoute(location, item.to, item.end);\n\ninterface ISidebarMenuRowProps {\n  item: ISidebarMenuItem;\n  isOpen: boolean;\n  collapsed: boolean;\n  onToggle: () => void;\n  activeClass: string;\n  activeIconClass?: string;\n  onNavigate?: () => void;\n  level: number;\n}\n\nconst SidebarMenuRow: React.FC<ISidebarMenuRowProps> = ({\n  item,\n  isOpen,\n  collapsed,\n  onToggle,\n  activeClass,\n  activeIconClass,\n  onNavigate,\n  level,\n}) => {\n  const { location, Link: NavigationLink } = useUiNavigation();\n  const contentRef = useRef<HTMLDivElement>(null);\n  const [maxHeight, setMaxHeight] = useState('0px');\n\n  const hasChildren = Boolean(item.children?.length);\n  const isActive = hasChildren ? containsActiveRoute(item, location) : matchesRoute(location, item.to, item.end);\n  const submenuOpen = isOpen && !collapsed;\n\n  useEffect(() => {\n    const content = contentRef.current;\n    if (!content) return;\n\n    if (!submenuOpen) {\n      setMaxHeight('0px');\n      return;\n    }\n\n    const updateHeight = () => setMaxHeight(`${content.scrollHeight}px`);\n    updateHeight();\n\n    const observer = new ResizeObserver(updateHeight);\n    observer.observe(content);\n\n    return () => observer.disconnect();\n  }, [submenuOpen]);\n\n  const rowClassName = classNames(\n    'relative flex h-9 w-full items-center gap-x-3 rounded-lg px-3 text-left transition-colors duration-base',\n    isActive ? activeClass : 'text-foreground-muted hover:bg-muted-hover hover:text-foreground',\n  );\n\n  const iconClassName = classNames(\n    'shrink-0',\n    isActive ? (activeIconClass ?? 'text-brand-emphasis') : 'text-foreground-muted',\n  );\n\n  const activeBar = isActive ? (\n    <span aria-hidden className=\"absolute left-0 top-1/2 h-5 w-0.5 -translate-y-1/2 rounded-full bg-brand\" />\n  ) : null;\n\n  const icon = <MaterialSymbol icon={item.icon} size={20} weight={item.weight || 400} className={iconClassName} />;\n  const label = <span className={classNames('sidebar-label text-sm', { 'is-collapsed': collapsed })}>{item.text}</span>;\n\n  if (item.externalUrl) {\n    return (\n      <li className=\"flex flex-col\">\n        <a\n          href={item.externalUrl}\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          className={rowClassName}\n          onClick={onNavigate}\n        >\n          {activeBar}\n          {icon}\n          {label}\n        </a>\n      </li>\n    );\n  }\n\n  if (hasChildren) {\n    return (\n      <li className=\"flex flex-col\">\n        <ControlledButton defaultHtmlButton onClick={onToggle} aria-expanded={submenuOpen} className={rowClassName}>\n          {activeBar}\n          {icon}\n          {label}\n          <MaterialSymbol\n            icon=\"chevron_right\"\n            size={18}\n            className={classNames('sidebar-chevron ml-auto shrink-0 text-foreground-subtle', {\n              'is-collapsed': collapsed,\n              'is-open': submenuOpen,\n            })}\n          />\n        </ControlledButton>\n\n        <div style={{ maxHeight }} className={classNames('sidebar-submenu', { 'mt-1': submenuOpen })}>\n          <div ref={contentRef} className=\"pl-5\">\n            <SidebarMenu\n              items={item.children ?? []}\n              collapsed={collapsed}\n              activeClass={activeClass}\n              activeIconClass={activeIconClass}\n              onNavigate={onNavigate}\n              level={level + 1}\n            />\n          </div>\n        </div>\n      </li>\n    );\n  }\n\n  return (\n    <li className=\"flex flex-col\">\n      <NavigationLink to={item.to} className={rowClassName} onClick={onNavigate}>\n        {activeBar}\n        {icon}\n        {label}\n      </NavigationLink>\n    </li>\n  );\n};\n\nconst SECTION_LABEL_KEYS: Record<TUiSidebarSection, string> = {\n  management: 'sidebar.sections.management',\n  registration: 'sidebar.sections.registration',\n};\n\ninterface ISidebarSectionHeaderProps {\n  section: TUiSidebarSection;\n  collapsed: boolean;\n  withDivider: boolean;\n}\n\nconst SidebarSectionHeader: React.FC<ISidebarSectionHeaderProps> = ({ section, collapsed, withDivider }) => {\n  const { t } = useTranslation('ui');\n\n  if (collapsed) {\n    if (!withDivider) return null;\n    return (\n      <li aria-hidden className=\"flex flex-col px-3\">\n        <span className=\"border-t border-border/70\" />\n      </li>\n    );\n  }\n\n  return (\n    <li className={classNames('flex flex-col', withDivider ? 'mt-2' : 'mt-1')}>\n      {withDivider && <span aria-hidden className=\"mx-3 mb-2 border-t border-border/70\" />}\n      <span className=\"px-3 pb-0.5 text-xxs font-semibold uppercase tracking-wide text-foreground-subtle\">\n        {t(SECTION_LABEL_KEYS[section])}\n      </span>\n    </li>\n  );\n};\n\nconst SECTION_ORDER: Array<TUiSidebarSection> = ['management', 'registration'];\n\ninterface ISidebarMenuGroup {\n  section: TUiSidebarSection | null;\n  items: Array<ISidebarMenuItem>;\n}\n\nconst groupItemsBySection = (items: Array<ISidebarMenuItem>): Array<ISidebarMenuGroup> => {\n  const itemsWithoutSection = (items ?? []).filter((item) => !item.section);\n  const sectionGroups = SECTION_ORDER.map((section) => ({\n    section,\n    items: (items ?? []).filter((item) => item.section === section),\n  })).filter((group) => group.items.length > 0);\n\n  return itemsWithoutSection.length ? [{ section: null, items: itemsWithoutSection }, ...sectionGroups] : sectionGroups;\n};\n\nconst SidebarMenu: React.FC<ISidebarMenuProps> = ({\n  items,\n  activeClass,\n  collapsed,\n  activeIconClass,\n  onNavigate,\n  level = 0,\n}) => {\n  const { location } = useUiNavigation();\n\n  const activeKey =\n    items\n      .filter((item) => Boolean(item.children?.length) && containsActiveRoute(item, location))\n      .map(resolveSidebarItemId)[0] ?? null;\n\n  const [openKey, setOpenKey] = useState<string | null>(activeKey);\n  const previousActiveKey = useRef(activeKey);\n\n  useEffect(() => {\n    if (activeKey && activeKey !== previousActiveKey.current) {\n      setOpenKey(activeKey);\n    }\n    previousActiveKey.current = activeKey;\n  }, [activeKey]);\n\n  const handleToggle = (key: string) => {\n    setOpenKey((current) => (current === key ? null : key));\n  };\n\n  const showSections = level === 0;\n  const groups = showSections ? groupItemsBySection(items) : [{ section: null, items: items ?? [] }];\n\n  return (\n    <ul className={classNames('flex flex-col', level === 0 ? 'gap-y-2' : 'gap-y-1')}>\n      {groups.flatMap((group, groupIndex) => {\n        const rows: Array<React.ReactElement> = [];\n\n        if (group.section) {\n          rows.push(\n            <SidebarSectionHeader\n              key={`section-${group.section}`}\n              section={group.section}\n              collapsed={collapsed}\n              withDivider={groupIndex > 0}\n            />,\n          );\n        }\n\n        group.items.forEach((item) => {\n          const itemId = resolveSidebarItemId(item);\n\n          rows.push(\n            <SidebarMenuRow\n              key={itemId}\n              item={item}\n              isOpen={openKey === itemId}\n              collapsed={collapsed}\n              onToggle={() => handleToggle(itemId)}\n              activeClass={activeClass}\n              activeIconClass={activeIconClass}\n              onNavigate={onNavigate}\n              level={level}\n            />,\n          );\n        });\n\n        return rows;\n      })}\n    </ul>\n  );\n};\n\nexport default SidebarMenu;\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,11 @@
+export type TUiThemePreference = 'light' | 'system' | 'dark';
+interface IThemeToggleProps {
+    preference: TUiThemePreference;
+    onChange: (preference: TUiThemePreference) => void;
+}
+/**
+ * Three-state control: an explicit light/dark choice, or `system` to follow the OS. The host
+ * owns the preference (persistence + writing `data-theme` on <html>); this renders the knob.
+ */
+declare const ThemeToggle: React.FC<IThemeToggleProps>;
+export default ThemeToggle;

package/dist/components/Shell/ThemeToggle.js

@@ -0,0 +1,55 @@
+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_SHELL_CLASS, HEADER_CONTROL_SIZE_REM } from "./headerControlStyles.js";
+const OPTION_SIZE_REM = HEADER_CONTROL_SIZE_REM;
+const OPTIONS = [
+  { value: "light", icon: "light_mode", labelKey: "theme.light" },
+  { value: "system", icon: "computer", labelKey: "theme.system" },
+  { value: "dark", icon: "dark_mode", labelKey: "theme.dark" }
+];
+const ThemeToggle = ({ preference, onChange }) => {
+  const { t } = useTranslation("ui");
+  const activeIndex = Math.max(
+    0,
+    OPTIONS.findIndex((option) => option.value === preference)
+  );
+  return /* @__PURE__ */ jsx("div", { role: "group", "aria-label": t("theme.toggle"), className: HEADER_CONTROL_SHELL_CLASS, children: /* @__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_SIZE_REM}rem`,
+          height: `${OPTION_SIZE_REM}rem`,
+          transform: `translateX(${activeIndex * OPTION_SIZE_REM}rem)`
+        }
+      }
+    ),
+    OPTIONS.map((option) => {
+      const isActive = option.value === preference;
+      return /* @__PURE__ */ jsx(ControlledTooltip, { content: t(option.labelKey), children: /* @__PURE__ */ jsx(
+        ControlledButton,
+        {
+          defaultHtmlButton: true,
+          "aria-pressed": isActive,
+          onClick: () => onChange(option.value),
+          className: classNames(
+            "relative z-10 flex shrink-0 items-center justify-center rounded-full leading-none transition-colors duration-base",
+            isActive ? "text-brand-emphasis" : "text-foreground-faint hover:text-foreground-muted"
+          ),
+          style: { width: `${OPTION_SIZE_REM}rem`, height: `${OPTION_SIZE_REM}rem` },
+          children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: option.icon, size: 15, fill: isActive })
+        }
+      ) }, option.value);
+    })
+  ] }) });
+};
+export {
+  ThemeToggle as default
+};
+//# sourceMappingURL=ThemeToggle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeToggle.js","sources":["../../../src/components/Shell/ThemeToggle.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, SymbolCodepoints } from '@/components/UI/MaterialSymbol';\n\nimport { HEADER_CONTROL_SHELL_CLASS, HEADER_CONTROL_SIZE_REM } from './headerControlStyles';\n\nconst OPTION_SIZE_REM = HEADER_CONTROL_SIZE_REM;\n\nexport type TUiThemePreference = 'light' | 'system' | 'dark';\n\nconst OPTIONS: Array<{ value: TUiThemePreference; icon: SymbolCodepoints; labelKey: string }> = [\n  { value: 'light', icon: 'light_mode', labelKey: 'theme.light' },\n  { value: 'system', icon: 'computer', labelKey: 'theme.system' },\n  { value: 'dark', icon: 'dark_mode', labelKey: 'theme.dark' },\n];\n\ninterface IThemeToggleProps {\n  preference: TUiThemePreference;\n  onChange: (preference: TUiThemePreference) => void;\n}\n\n/**\n * Three-state control: an explicit light/dark choice, or `system` to follow the OS. The host\n * owns the preference (persistence + writing `data-theme` on <html>); this renders the knob.\n */\nconst ThemeToggle: React.FC<IThemeToggleProps> = ({ preference, onChange }) => {\n  const { t } = useTranslation('ui');\n\n  const activeIndex = Math.max(\n    0,\n    OPTIONS.findIndex((option) => option.value === preference),\n  );\n\n  return (\n    <div role=\"group\" aria-label={t('theme.toggle')} className={HEADER_CONTROL_SHELL_CLASS}>\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_SIZE_REM}rem`,\n            height: `${OPTION_SIZE_REM}rem`,\n            transform: `translateX(${activeIndex * OPTION_SIZE_REM}rem)`,\n          }}\n        />\n\n        {OPTIONS.map((option) => {\n          const isActive = option.value === preference;\n\n          return (\n            <ControlledTooltip key={option.value} content={t(option.labelKey)}>\n              <ControlledButton\n                defaultHtmlButton\n                aria-pressed={isActive}\n                onClick={() => onChange(option.value)}\n                className={classNames(\n                  'relative z-10 flex shrink-0 items-center justify-center rounded-full leading-none transition-colors duration-base',\n                  isActive ? 'text-brand-emphasis' : 'text-foreground-faint hover:text-foreground-muted',\n                )}\n                style={{ width: `${OPTION_SIZE_REM}rem`, height: `${OPTION_SIZE_REM}rem` }}\n              >\n                <MaterialSymbol icon={option.icon} size={15} fill={isActive} />\n              </ControlledButton>\n            </ControlledTooltip>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nexport default ThemeToggle;\n"],"names":[],"mappings":";;;;;;;AASA,MAAM,kBAAkB;AAIxB,MAAM,UAA0F;AAAA,EAC9F,EAAE,OAAO,SAAS,MAAM,cAAc,UAAU,cAAA;AAAA,EAChD,EAAE,OAAO,UAAU,MAAM,YAAY,UAAU,eAAA;AAAA,EAC/C,EAAE,OAAO,QAAQ,MAAM,aAAa,UAAU,aAAA;AAChD;AAWA,MAAM,cAA2C,CAAC,EAAE,YAAY,eAAe;AAC7E,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AAEjC,QAAM,cAAc,KAAK;AAAA,IACvB;AAAA,IACA,QAAQ,UAAU,CAAC,WAAW,OAAO,UAAU,UAAU;AAAA,EAAA;AAG3D,SACE,oBAAC,OAAA,EAAI,MAAK,SAAQ,cAAY,EAAE,cAAc,GAAG,WAAW,4BAC1D,UAAA,qBAAC,OAAA,EAAI,WAAU,8BACb,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAW;AAAA,QACX,WAAU;AAAA,QACV,OAAO;AAAA,UACL,OAAO,GAAG,eAAe;AAAA,UACzB,QAAQ,GAAG,eAAe;AAAA,UAC1B,WAAW,cAAc,cAAc,eAAe;AAAA,QAAA;AAAA,MACxD;AAAA,IAAA;AAAA,IAGD,QAAQ,IAAI,CAAC,WAAW;AACvB,YAAM,WAAW,OAAO,UAAU;AAElC,iCACG,mBAAA,EAAqC,SAAS,EAAE,OAAO,QAAQ,GAC9D,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,mBAAiB;AAAA,UACjB,gBAAc;AAAA,UACd,SAAS,MAAM,SAAS,OAAO,KAAK;AAAA,UACpC,WAAW;AAAA,YACT;AAAA,YACA,WAAW,wBAAwB;AAAA,UAAA;AAAA,UAErC,OAAO,EAAE,OAAO,GAAG,eAAe,OAAO,QAAQ,GAAG,eAAe,MAAA;AAAA,UAEnE,UAAA,oBAAC,kBAAe,MAAM,OAAO,MAAM,MAAM,IAAI,MAAM,SAAA,CAAU;AAAA,QAAA;AAAA,MAAA,EAC/D,GAZsB,OAAO,KAa/B;AAAA,IAEJ,CAAC;AAAA,EAAA,EAAA,CACH,EAAA,CACF;AAEJ;"}

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

@@ -0,0 +1,10 @@
+/**
+ * Every control on the right side of the header (workspace actions, theme, language) lives
+ * inside the same pill shell, so they read as one family instead of three unrelated widgets.
+ * The size is a constant because the theme/language knobs travel by exactly one option width:
+ * any drift between the knob and the buttons puts the highlight off the icon.
+ */
+export declare const HEADER_CONTROL_SIZE_REM = 1.75;
+export declare const HEADER_CONTROL_SHELL_CLASS = "flex items-center rounded-full border border-border bg-muted p-[3px]";
+export declare const HEADER_ICON_ACTION_CLASS = "interactive relative flex size-7 shrink-0 items-center justify-center rounded-full text-foreground-subtle hover:bg-surface hover:text-foreground hover:shadow-elevation1";
+export declare const HEADER_ICON_ACTION_SIZE = 18;

package/dist/components/Shell/headerControlStyles.js

@@ -0,0 +1,11 @@
+const HEADER_CONTROL_SIZE_REM = 1.75;
+const HEADER_CONTROL_SHELL_CLASS = "flex items-center rounded-full border border-border bg-muted p-[3px]";
+const HEADER_ICON_ACTION_CLASS = "interactive relative flex size-7 shrink-0 items-center justify-center rounded-full text-foreground-subtle hover:bg-surface hover:text-foreground hover:shadow-elevation1";
+const HEADER_ICON_ACTION_SIZE = 18;
+export {
+  HEADER_CONTROL_SHELL_CLASS,
+  HEADER_CONTROL_SIZE_REM,
+  HEADER_ICON_ACTION_CLASS,
+  HEADER_ICON_ACTION_SIZE
+};
+//# sourceMappingURL=headerControlStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"headerControlStyles.js","sources":["../../../src/components/Shell/headerControlStyles.ts"],"sourcesContent":["/**\n * Every control on the right side of the header (workspace actions, theme, language) lives\n * inside the same pill shell, so they read as one family instead of three unrelated widgets.\n * The size is a constant because the theme/language knobs travel by exactly one option width:\n * any drift between the knob and the buttons puts the highlight off the icon.\n */\nexport const HEADER_CONTROL_SIZE_REM = 1.75;\n\nexport const HEADER_CONTROL_SHELL_CLASS = 'flex items-center rounded-full border border-border bg-muted p-[3px]';\n\nexport const HEADER_ICON_ACTION_CLASS =\n  'interactive relative flex size-7 shrink-0 items-center justify-center rounded-full text-foreground-subtle hover:bg-surface hover:text-foreground hover:shadow-elevation1';\n\nexport const HEADER_ICON_ACTION_SIZE = 18;\n"],"names":[],"mappings":"AAMO,MAAM,0BAA0B;AAEhC,MAAM,6BAA6B;AAEnC,MAAM,2BACX;AAEK,MAAM,0BAA0B;"}

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

@@ -0,0 +1,14 @@
+export interface ISidebarState {
+    isMobile: boolean;
+    isVisible: boolean;
+    isExpanded: boolean;
+    isDocked: boolean;
+    isOverlayOnMobile: boolean;
+    showRail: boolean;
+    toggleLabelKey: string;
+    togglePrimary: () => void;
+    onHoverEnter: () => void;
+    onHoverLeave: () => void;
+    closeMobileDrawer: () => void;
+}
+export declare const useSidebarState: () => ISidebarState;

package/dist/components/Shell/useSidebarState.js

@@ -0,0 +1,106 @@
+import { useState, useRef, useCallback, useEffect } from "react";
+import { writeUiPreference, readUiPreference } from "../../helpers/uiPreferences.js";
+import { useMobile } from "../../hooks/useMobile.js";
+const HOVER_OPEN_DELAY_MS = 250;
+const HOVER_CLOSE_DELAY_MS = 250;
+const PIN_STORAGE_KEY = "sidebar_pinned";
+const TOGGLE_SHORTCUT_KEY = "\\";
+const readPinnedPreference = () => readUiPreference(PIN_STORAGE_KEY) ?? false;
+const useSidebarState = () => {
+  const isMobile = useMobile();
+  const [isPinned, setIsPinned] = useState(readPinnedPreference);
+  const [isHovering, setIsHovering] = useState(false);
+  const [isMobileOpen, setIsMobileOpen] = useState(false);
+  const openTimerRef = useRef(null);
+  const closeTimerRef = useRef(null);
+  const clearOpenTimer = useCallback(() => {
+    if (openTimerRef.current !== null) {
+      window.clearTimeout(openTimerRef.current);
+      openTimerRef.current = null;
+    }
+  }, []);
+  const clearCloseTimer = useCallback(() => {
+    if (closeTimerRef.current !== null) {
+      window.clearTimeout(closeTimerRef.current);
+      closeTimerRef.current = null;
+    }
+  }, []);
+  const clearTimers = useCallback(() => {
+    clearOpenTimer();
+    clearCloseTimer();
+  }, [clearOpenTimer, clearCloseTimer]);
+  const persistPinned = useCallback((next) => {
+    setIsPinned(next);
+    writeUiPreference(PIN_STORAGE_KEY, next);
+  }, []);
+  const togglePrimary = useCallback(() => {
+    clearTimers();
+    if (isMobile) {
+      setIsMobileOpen((open) => !open);
+      return;
+    }
+    setIsHovering(false);
+    persistPinned(!isPinned);
+  }, [clearTimers, isMobile, isPinned, persistPinned]);
+  const onHoverEnter = useCallback(() => {
+    if (isMobile || isPinned) return;
+    clearCloseTimer();
+    if (isHovering || openTimerRef.current !== null) return;
+    openTimerRef.current = window.setTimeout(() => {
+      openTimerRef.current = null;
+      setIsHovering(true);
+    }, HOVER_OPEN_DELAY_MS);
+  }, [clearCloseTimer, isHovering, isMobile, isPinned]);
+  const onHoverLeave = useCallback(() => {
+    if (isMobile || isPinned) return;
+    clearOpenTimer();
+    if (closeTimerRef.current !== null) return;
+    closeTimerRef.current = window.setTimeout(() => {
+      closeTimerRef.current = null;
+      setIsHovering(false);
+    }, HOVER_CLOSE_DELAY_MS);
+  }, [clearOpenTimer, isMobile, isPinned]);
+  const closeMobileDrawer = useCallback(() => {
+    setIsMobileOpen(false);
+  }, []);
+  useEffect(() => {
+    const handleKeyDown = (event) => {
+      if ((event.ctrlKey || event.metaKey) && event.key === TOGGLE_SHORTCUT_KEY) {
+        event.preventDefault();
+        togglePrimary();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [togglePrimary]);
+  useEffect(() => {
+    clearTimers();
+    setIsHovering(false);
+    setIsMobileOpen(false);
+  }, [isMobile, clearTimers]);
+  useEffect(() => clearTimers, [clearTimers]);
+  const isDocked = !isMobile && isPinned;
+  const isExpanded = isMobile ? isMobileOpen : isPinned || isHovering;
+  const isVisible = isMobile ? isMobileOpen : true;
+  const showRail = !isMobile && !isExpanded;
+  const isOverlayOnMobile = isMobile && isMobileOpen;
+  const willCollapse = isMobile ? isMobileOpen : isPinned;
+  const toggleLabelKey = willCollapse ? "sidebar.collapseSidebar" : "sidebar.openSidebar";
+  return {
+    isMobile,
+    isVisible,
+    isExpanded,
+    isDocked,
+    isOverlayOnMobile,
+    showRail,
+    toggleLabelKey,
+    togglePrimary,
+    onHoverEnter,
+    onHoverLeave,
+    closeMobileDrawer
+  };
+};
+export {
+  useSidebarState
+};
+//# sourceMappingURL=useSidebarState.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useSidebarState.js","sources":["../../../src/components/Shell/useSidebarState.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { readUiPreference, writeUiPreference } from '@/helpers/uiPreferences';\nimport { useMobile } from '@/hooks/useMobile';\n\nconst HOVER_OPEN_DELAY_MS = 250;\nconst HOVER_CLOSE_DELAY_MS = 250;\nconst PIN_STORAGE_KEY = 'sidebar_pinned';\nconst TOGGLE_SHORTCUT_KEY = '\\\\';\n\nconst readPinnedPreference = (): boolean => readUiPreference<boolean>(PIN_STORAGE_KEY) ?? false;\n\nexport interface ISidebarState {\n  isMobile: boolean;\n  isVisible: boolean;\n  isExpanded: boolean;\n  isDocked: boolean;\n  isOverlayOnMobile: boolean;\n  showRail: boolean;\n  toggleLabelKey: string;\n  togglePrimary: () => void;\n  onHoverEnter: () => void;\n  onHoverLeave: () => void;\n  closeMobileDrawer: () => void;\n}\n\nexport const useSidebarState = (): ISidebarState => {\n  const isMobile = useMobile();\n\n  const [isPinned, setIsPinned] = useState<boolean>(readPinnedPreference);\n  const [isHovering, setIsHovering] = useState(false);\n  const [isMobileOpen, setIsMobileOpen] = useState(false);\n\n  const openTimerRef = useRef<number | null>(null);\n  const closeTimerRef = useRef<number | null>(null);\n\n  const clearOpenTimer = useCallback(() => {\n    if (openTimerRef.current !== null) {\n      window.clearTimeout(openTimerRef.current);\n      openTimerRef.current = null;\n    }\n  }, []);\n\n  const clearCloseTimer = useCallback(() => {\n    if (closeTimerRef.current !== null) {\n      window.clearTimeout(closeTimerRef.current);\n      closeTimerRef.current = null;\n    }\n  }, []);\n\n  const clearTimers = useCallback(() => {\n    clearOpenTimer();\n    clearCloseTimer();\n  }, [clearOpenTimer, clearCloseTimer]);\n\n  const persistPinned = useCallback((next: boolean) => {\n    setIsPinned(next);\n    writeUiPreference(PIN_STORAGE_KEY, next);\n  }, []);\n\n  const togglePrimary = useCallback(() => {\n    clearTimers();\n    if (isMobile) {\n      setIsMobileOpen((open) => !open);\n      return;\n    }\n    setIsHovering(false);\n    persistPinned(!isPinned);\n  }, [clearTimers, isMobile, isPinned, persistPinned]);\n\n  const onHoverEnter = useCallback(() => {\n    if (isMobile || isPinned) return;\n    clearCloseTimer();\n    if (isHovering || openTimerRef.current !== null) return;\n    openTimerRef.current = window.setTimeout(() => {\n      openTimerRef.current = null;\n      setIsHovering(true);\n    }, HOVER_OPEN_DELAY_MS);\n  }, [clearCloseTimer, isHovering, isMobile, isPinned]);\n\n  const onHoverLeave = useCallback(() => {\n    if (isMobile || isPinned) return;\n    clearOpenTimer();\n    if (closeTimerRef.current !== null) return;\n    closeTimerRef.current = window.setTimeout(() => {\n      closeTimerRef.current = null;\n      setIsHovering(false);\n    }, HOVER_CLOSE_DELAY_MS);\n  }, [clearOpenTimer, isMobile, isPinned]);\n\n  const closeMobileDrawer = useCallback(() => {\n    setIsMobileOpen(false);\n  }, []);\n\n  useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if ((event.ctrlKey || event.metaKey) && event.key === TOGGLE_SHORTCUT_KEY) {\n        event.preventDefault();\n        togglePrimary();\n      }\n    };\n\n    window.addEventListener('keydown', handleKeyDown);\n    return () => window.removeEventListener('keydown', handleKeyDown);\n  }, [togglePrimary]);\n\n  useEffect(() => {\n    clearTimers();\n    setIsHovering(false);\n    setIsMobileOpen(false);\n  }, [isMobile, clearTimers]);\n\n  useEffect(() => clearTimers, [clearTimers]);\n\n  const isDocked = !isMobile && isPinned;\n  const isExpanded = isMobile ? isMobileOpen : isPinned || isHovering;\n  const isVisible = isMobile ? isMobileOpen : true;\n  const showRail = !isMobile && !isExpanded;\n  const isOverlayOnMobile = isMobile && isMobileOpen;\n  const willCollapse = isMobile ? isMobileOpen : isPinned;\n  const toggleLabelKey = willCollapse ? 'sidebar.collapseSidebar' : 'sidebar.openSidebar';\n\n  return {\n    isMobile,\n    isVisible,\n    isExpanded,\n    isDocked,\n    isOverlayOnMobile,\n    showRail,\n    toggleLabelKey,\n    togglePrimary,\n    onHoverEnter,\n    onHoverLeave,\n    closeMobileDrawer,\n  };\n};\n"],"names":[],"mappings":";;;AAKA,MAAM,sBAAsB;AAC5B,MAAM,uBAAuB;AAC7B,MAAM,kBAAkB;AACxB,MAAM,sBAAsB;AAE5B,MAAM,uBAAuB,MAAe,iBAA0B,eAAe,KAAK;AAgBnF,MAAM,kBAAkB,MAAqB;AAClD,QAAM,WAAW,UAAA;AAEjB,QAAM,CAAC,UAAU,WAAW,IAAI,SAAkB,oBAAoB;AACtE,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAClD,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AAEtD,QAAM,eAAe,OAAsB,IAAI;AAC/C,QAAM,gBAAgB,OAAsB,IAAI;AAEhD,QAAM,iBAAiB,YAAY,MAAM;AACvC,QAAI,aAAa,YAAY,MAAM;AACjC,aAAO,aAAa,aAAa,OAAO;AACxC,mBAAa,UAAU;AAAA,IACzB;AAAA,EACF,GAAG,CAAA,CAAE;AAEL,QAAM,kBAAkB,YAAY,MAAM;AACxC,QAAI,cAAc,YAAY,MAAM;AAClC,aAAO,aAAa,cAAc,OAAO;AACzC,oBAAc,UAAU;AAAA,IAC1B;AAAA,EACF,GAAG,CAAA,CAAE;AAEL,QAAM,cAAc,YAAY,MAAM;AACpC,mBAAA;AACA,oBAAA;AAAA,EACF,GAAG,CAAC,gBAAgB,eAAe,CAAC;AAEpC,QAAM,gBAAgB,YAAY,CAAC,SAAkB;AACnD,gBAAY,IAAI;AAChB,sBAAkB,iBAAiB,IAAI;AAAA,EACzC,GAAG,CAAA,CAAE;AAEL,QAAM,gBAAgB,YAAY,MAAM;AACtC,gBAAA;AACA,QAAI,UAAU;AACZ,sBAAgB,CAAC,SAAS,CAAC,IAAI;AAC/B;AAAA,IACF;AACA,kBAAc,KAAK;AACnB,kBAAc,CAAC,QAAQ;AAAA,EACzB,GAAG,CAAC,aAAa,UAAU,UAAU,aAAa,CAAC;AAEnD,QAAM,eAAe,YAAY,MAAM;AACrC,QAAI,YAAY,SAAU;AAC1B,oBAAA;AACA,QAAI,cAAc,aAAa,YAAY,KAAM;AACjD,iBAAa,UAAU,OAAO,WAAW,MAAM;AAC7C,mBAAa,UAAU;AACvB,oBAAc,IAAI;AAAA,IACpB,GAAG,mBAAmB;AAAA,EACxB,GAAG,CAAC,iBAAiB,YAAY,UAAU,QAAQ,CAAC;AAEpD,QAAM,eAAe,YAAY,MAAM;AACrC,QAAI,YAAY,SAAU;AAC1B,mBAAA;AACA,QAAI,cAAc,YAAY,KAAM;AACpC,kBAAc,UAAU,OAAO,WAAW,MAAM;AAC9C,oBAAc,UAAU;AACxB,oBAAc,KAAK;AAAA,IACrB,GAAG,oBAAoB;AAAA,EACzB,GAAG,CAAC,gBAAgB,UAAU,QAAQ,CAAC;AAEvC,QAAM,oBAAoB,YAAY,MAAM;AAC1C,oBAAgB,KAAK;AAAA,EACvB,GAAG,CAAA,CAAE;AAEL,YAAU,MAAM;AACd,UAAM,gBAAgB,CAAC,UAAyB;AAC9C,WAAK,MAAM,WAAW,MAAM,YAAY,MAAM,QAAQ,qBAAqB;AACzE,cAAM,eAAA;AACN,sBAAA;AAAA,MACF;AAAA,IACF;AAEA,WAAO,iBAAiB,WAAW,aAAa;AAChD,WAAO,MAAM,OAAO,oBAAoB,WAAW,aAAa;AAAA,EAClE,GAAG,CAAC,aAAa,CAAC;AAElB,YAAU,MAAM;AACd,gBAAA;AACA,kBAAc,KAAK;AACnB,oBAAgB,KAAK;AAAA,EACvB,GAAG,CAAC,UAAU,WAAW,CAAC;AAE1B,YAAU,MAAM,aAAa,CAAC,WAAW,CAAC;AAE1C,QAAM,WAAW,CAAC,YAAY;AAC9B,QAAM,aAAa,WAAW,eAAe,YAAY;AACzD,QAAM,YAAY,WAAW,eAAe;AAC5C,QAAM,WAAW,CAAC,YAAY,CAAC;AAC/B,QAAM,oBAAoB,YAAY;AACtC,QAAM,eAAe,WAAW,eAAe;AAC/C,QAAM,iBAAiB,eAAe,4BAA4B;AAElE,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ;"}

package/dist/index.d.ts

@@ -16,6 +16,10 @@ export { default as PageTitle } from './components/Navigation/PageTitle';
 export * from './components/Navigation/PageTitleNavigationContext';
 export * from './components/Navigation/UiNavigationContext';
 export { default as UnifiedSearchBar } from './components/Search/UnifiedSearchBar';
+export { default as AppShell } from './components/Shell/AppShell';
+export { default as ShellLanguageToggle } from './components/Shell/LanguageToggle';
+export * from './components/Shell/SidebarMenu';
+export { default as ShellThemeToggle } from './components/Shell/ThemeToggle';
 export * from './components/UI/access/UiAccessContext';
 export { default as BaseDataCard } from './components/UI/BaseDataCard';
 export { default as OutlinedChip } from './components/UI/Chips/OutlinedChip';

package/dist/index.js

@@ -16,26 +16,30 @@ import { default as default15 } from "./components/Navigation/PageTitle.js";
 import { PageTitleNavigationProvider, usePageTitleNavigation } from "./components/Navigation/PageTitleNavigationContext.js";
 import { UiNavigationProvider, useUiNavigation } from "./components/Navigation/UiNavigationContext.js";
 import { default as default16 } from "./components/Search/UnifiedSearchBar.js";
+import { default as default17 } from "./components/Shell/AppShell.js";
+import { default as default18 } from "./components/Shell/LanguageToggle.js";
+import { resolveSidebarItemId } from "./components/Shell/SidebarMenu.js";
+import { default as default19 } from "./components/Shell/ThemeToggle.js";
 import { UiAccessProvider, useUiAccess } from "./components/UI/access/UiAccessContext.js";
-import { default as default17 } from "./components/UI/BaseDataCard.js";
-import { default as default18 } from "./components/UI/Chips/OutlinedChip.js";
-import { default as default19 } from "./components/UI/Colors.js";
-import { default as default20 } from "./components/UI/ColorSwatch.js";
-import { default as default21 } from "./components/UI/ControlledAccordion.js";
-import { default as default22 } from "./components/UI/ControlledCollapse.js";
-import { default as default23 } from "./components/UI/ControlledMenu.js";
-import { default as default24 } from "./components/UI/ControlledPopover.js";
-import { default as default25 } from "./components/UI/ControlledProgress.js";
-import { default as default26 } from "./components/UI/ControlledSlider.js";
-import { default as default27 } from "./components/UI/ControlledTooltip.js";
-import { default as default28 } from "./components/UI/CustomBadge.js";
-import { default as default29 } from "./components/UI/CustomCard.js";
-import { default as default30 } from "./components/UI/InformationCard.js";
-import { default as default31 } from "./components/UI/LoadingSpinner.js";
+import { default as default20 } from "./components/UI/BaseDataCard.js";
+import { default as default21 } from "./components/UI/Chips/OutlinedChip.js";
+import { default as default22 } from "./components/UI/Colors.js";
+import { default as default23 } from "./components/UI/ColorSwatch.js";
+import { default as default24 } from "./components/UI/ControlledAccordion.js";
+import { default as default25 } from "./components/UI/ControlledCollapse.js";
+import { default as default26 } from "./components/UI/ControlledMenu.js";
+import { default as default27 } from "./components/UI/ControlledPopover.js";
+import { default as default28 } from "./components/UI/ControlledProgress.js";
+import { default as default29 } from "./components/UI/ControlledSlider.js";
+import { default as default30 } from "./components/UI/ControlledTooltip.js";
+import { default as default31 } from "./components/UI/CustomBadge.js";
+import { default as default32 } from "./components/UI/CustomCard.js";
+import { default as default33 } from "./components/UI/InformationCard.js";
+import { default as default34 } from "./components/UI/LoadingSpinner.js";
 import { MaterialSymbol, combineClasses } from "./components/UI/MaterialSymbol/index.js";
-import { default as default32 } from "./components/UI/NoDataFound/index.js";
-import { default as default33 } from "./components/UI/SkeletonLoading.js";
-import { default as default34 } from "./components/UI/UserMenu.js";
+import { default as default35 } from "./components/UI/NoDataFound/index.js";
+import { default as default36 } from "./components/UI/SkeletonLoading.js";
+import { default as default37 } from "./components/UI/UserMenu.js";
 import { composeRefs } from "./helpers/composeRefs.js";
 import { isPressOnLayeredSurface } from "./helpers/layeredSurfaces.js";
 import { readThemeToken, useThemeChartTokens } from "./helpers/themeTokens.js";
@@ -52,46 +56,49 @@ import { uiLocales } from "./locales/index.js";
 import { collapseVariants, createDrawerVariants, dialogVariants, fadeVariants, floatingVariants, scrimVariants, tooltipVariants } from "./motion/motionPresets.js";
 import { MOTION_OFFSET_PX, enterTransition, exitTransition, motionDuration, motionEase } from "./motion/motionTokens.js";
 export {
+  default17 as AppShell,
   BREAKPOINTS,
-  default17 as BaseDataCard,
-  default20 as ColorSwatch,
-  default19 as Colors,
-  default21 as ControlledAccordion,
+  default20 as BaseDataCard,
+  default23 as ColorSwatch,
+  default22 as Colors,
+  default24 as ControlledAccordion,
   default13 as ControlledBreadcrumb,
   default2 as ControlledButton,
   default3 as ControlledCheckbox,
-  default22 as ControlledCollapse,
+  default25 as ControlledCollapse,
   default4 as ControlledDialog,
   default5 as ControlledDrawer,
   default6 as ControlledImage,
   default7 as ControlledInput,
-  default23 as ControlledMenu,
-  default24 as ControlledPopover,
-  default25 as ControlledProgress,
+  default26 as ControlledMenu,
+  default27 as ControlledPopover,
+  default28 as ControlledProgress,
   default8 as ControlledRadio,
   ControlledSelect,
-  default26 as ControlledSlider,
+  default29 as ControlledSlider,
   default9 as ControlledSwitch,
   default10 as ControlledTabs,
   default11 as ControlledTextarea,
-  default27 as ControlledTooltip,
+  default30 as ControlledTooltip,
   default12 as ControlledViewToggle,
-  default28 as CustomBadge,
-  default29 as CustomCard,
+  default31 as CustomBadge,
+  default32 as CustomCard,
   default14 as ErrorPage,
-  default30 as InformationCard,
-  default31 as LoadingSpinner,
+  default33 as InformationCard,
+  default34 as LoadingSpinner,
   MOTION_OFFSET_PX,
   MaterialSymbol,
-  default32 as NoDataFound,
-  default18 as OutlinedChip,
+  default35 as NoDataFound,
+  default21 as OutlinedChip,
   default15 as PageTitle,
   PageTitleNavigationProvider,
-  default33 as SkeletonLoading,
+  default18 as ShellLanguageToggle,
+  default19 as ShellThemeToggle,
+  default36 as SkeletonLoading,
   UiAccessProvider,
   UiNavigationProvider,
   default16 as UnifiedSearchBar,
-  default34 as UserMenu,
+  default37 as UserMenu,
   collapseVariants,
   combineClasses,
   composeRefs,
@@ -108,6 +115,7 @@ export {
   motionEase,
   readThemeToken,
   readUiPreference,
+  resolveSidebarItemId,
   resolveUiPreferenceScopeId,
   scrimVariants,
   tooltipVariants,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}