@umodeapporg/ui 0.0.0-canary.ca10e69

package/dist/components/Shell/SidebarMenu.js

@@ -0,0 +1,254 @@
+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 ControlledTooltip from "../UI/ControlledTooltip.js";
+import { MaterialSymbol } from "../UI/MaterialSymbol/index.js";
+import { useSidebarFavorites, resolveSidebarFavoriteKey } from "./sidebarFavorites.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 SidebarFavoriteToggle = ({ favoriteKey }) => {
+  const { t } = useTranslation("ui");
+  const { isFavorite, toggleFavorite } = useSidebarFavorites();
+  const favorite = isFavorite(favoriteKey);
+  return /* @__PURE__ */ jsx(ControlledTooltip, { content: t(favorite ? "sidebar.favorites.remove" : "sidebar.favorites.add"), placement: "right", children: /* @__PURE__ */ jsx(
+    ControlledButton,
+    {
+      "aria-label": t(favorite ? "sidebar.favorites.remove" : "sidebar.favorites.add"),
+      defaultHtmlButton: true,
+      onClick: () => toggleFavorite(favoriteKey),
+      "aria-pressed": favorite,
+      className: classNames(
+        "absolute right-1 top-1/2 flex size-7 -translate-y-1/2 items-center justify-center rounded-md transition-interactive duration-fast hover:bg-muted-active focus-visible:opacity-100 group-hover/row:opacity-100 [@media(hover:none)]:opacity-100",
+        favorite ? "text-warning-emphasis opacity-0" : "text-foreground-subtle opacity-0 hover:text-foreground"
+      ),
+      children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: "star", size: 16, fill: favorite })
+    }
+  ) });
+};
+const SidebarMenuRow = ({
+  item,
+  isOpen,
+  collapsed,
+  onToggle,
+  activeClass,
+  activeIconClass,
+  onNavigate,
+  level
+}) => {
+  const { location, Link: NavigationLink } = useUiNavigation();
+  const { canFavorite } = useSidebarFavorites();
+  const contentRef = useRef(null);
+  const submenuRef = 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 submenu = submenuRef.current;
+    if (!submenu) return;
+    if (submenuOpen) submenu.removeAttribute("inert");
+    else submenu.setAttribute("inert", "");
+  }, [submenuOpen]);
+  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", { ref: submenuRef, 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
+        }
+      ) }) })
+    ] });
+  }
+  const favoriteKey = canFavorite && !collapsed ? resolveSidebarFavoriteKey(item) : null;
+  return /* @__PURE__ */ jsxs("li", { className: "group/row relative flex flex-col", children: [
+    /* @__PURE__ */ jsxs(NavigationLink, { to: item.to, className: classNames(rowClassName, { "pr-9": favoriteKey }), onClick: onNavigate, children: [
+      activeBar,
+      icon,
+      label
+    ] }),
+    favoriteKey && /* @__PURE__ */ jsx(SidebarFavoriteToggle, { favoriteKey })
+  ] });
+};
+const SECTION_LABEL_KEYS = {
+  favorites: "sidebar.sections.favorites",
+  management: "sidebar.sections.management",
+  registration: "sidebar.sections.registration"
+};
+const SidebarSectionHeader = ({ section, label, 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" }) });
+  }
+  if (section === null) {
+    return /* @__PURE__ */ jsx("li", { className: "mt-3 flex min-w-0 flex-col", children: /* @__PURE__ */ jsx("span", { className: "truncate px-3 pb-0.5 text-xs font-semibold text-brand-emphasis", children: label }) });
+  }
+  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 = ["favorites", "management", "registration"];
+const groupItemsBySection = (items) => {
+  const rows = items ?? [];
+  const ungrouped = rows.filter((item) => !item.section && !item.sectionLabel);
+  const sectionGroups = SECTION_ORDER.map((section) => ({
+    section,
+    label: null,
+    items: rows.filter((item) => item.section === section)
+  })).filter((group) => group.items.length > 0);
+  const named = rows.filter((item) => !item.section && item.sectionLabel);
+  const labelGroups = [...new Set(named.map((item) => item.sectionLabel ?? ""))].map((label) => ({
+    section: null,
+    label,
+    items: named.filter((item) => item.sectionLabel === label)
+  }));
+  return [
+    ...ungrouped.length ? [{ section: null, label: null, items: ungrouped }] : [],
+    ...sectionGroups,
+    ...labelGroups
+  ];
+};
+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, label: 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 || group.label) {
+      rows.push(
+        /* @__PURE__ */ jsx(
+          SidebarSectionHeader,
+          {
+            section: group.section,
+            label: group.label,
+            collapsed,
+            withDivider: groupIndex > 0
+          },
+          `section-${group.section ?? group.label}`
+        )
+      );
+    }
+    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 ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport { MaterialSymbol, MaterialSymbolWeight, SymbolCodepoints } from '@/components/UI/MaterialSymbol';\n\nimport { resolveSidebarFavoriteKey, useSidebarFavorites } from './sidebarFavorites';\n\nexport type TUiSidebarSection = 'favorites' | '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  /**\n   * A group of the product's own: rows sharing this text sit under a header showing it as\n   * written, in the order they first appear, after the fixed sections. `section` wins.\n   */\n  sectionLabel?: string;\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\ninterface ISidebarFavoriteToggleProps {\n  favoriteKey: string;\n}\n\nconst SidebarFavoriteToggle: React.FC<ISidebarFavoriteToggleProps> = ({ favoriteKey }) => {\n  const { t } = useTranslation('ui');\n  const { isFavorite, toggleFavorite } = useSidebarFavorites();\n  const favorite = isFavorite(favoriteKey);\n\n  return (\n    <ControlledTooltip content={t(favorite ? 'sidebar.favorites.remove' : 'sidebar.favorites.add')} placement=\"right\">\n      <ControlledButton\n        aria-label={t(favorite ? 'sidebar.favorites.remove' : 'sidebar.favorites.add')}\n        defaultHtmlButton\n        onClick={() => toggleFavorite(favoriteKey)}\n        aria-pressed={favorite}\n        className={classNames(\n          'absolute right-1 top-1/2 flex size-7 -translate-y-1/2 items-center justify-center rounded-md transition-interactive duration-fast hover:bg-muted-active focus-visible:opacity-100 group-hover/row:opacity-100 [@media(hover:none)]:opacity-100',\n          favorite ? 'text-warning-emphasis opacity-0' : 'text-foreground-subtle opacity-0 hover:text-foreground',\n        )}\n      >\n        <MaterialSymbol icon=\"star\" size={16} fill={favorite} />\n      </ControlledButton>\n    </ControlledTooltip>\n  );\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 { canFavorite } = useSidebarFavorites();\n  const contentRef = useRef<HTMLDivElement>(null);\n  const submenuRef = 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  /* `max-height: 0` hides the links but leaves them in the Tab order, so the keyboard lands on rows\n     nobody can see. Set through the DOM because React 18 does not type the attribute. */\n  useEffect(() => {\n    const submenu = submenuRef.current;\n    if (!submenu) return;\n    if (submenuOpen) submenu.removeAttribute('inert');\n    else submenu.setAttribute('inert', '');\n  }, [submenuOpen]);\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 ref={submenuRef} 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  const favoriteKey = canFavorite && !collapsed ? resolveSidebarFavoriteKey(item) : null;\n\n  return (\n    <li className=\"group/row relative flex flex-col\">\n      <NavigationLink to={item.to} className={classNames(rowClassName, { 'pr-9': favoriteKey })} onClick={onNavigate}>\n        {activeBar}\n        {icon}\n        {label}\n      </NavigationLink>\n      {favoriteKey && <SidebarFavoriteToggle favoriteKey={favoriteKey} />}\n    </li>\n  );\n};\n\nconst SECTION_LABEL_KEYS: Record<TUiSidebarSection, string> = {\n  favorites: 'sidebar.sections.favorites',\n  management: 'sidebar.sections.management',\n  registration: 'sidebar.sections.registration',\n};\n\ninterface ISidebarSectionHeaderProps {\n  section: TUiSidebarSection | null;\n  label: string | null;\n  collapsed: boolean;\n  withDivider: boolean;\n}\n\nconst SidebarSectionHeader: React.FC<ISidebarSectionHeaderProps> = ({ section, label, 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  // A product's own label is a phrase read as written: the words carry the group, no line above it.\n  if (section === null) {\n    return (\n      <li className=\"mt-3 flex min-w-0 flex-col\">\n        <span className=\"truncate px-3 pb-0.5 text-xs font-semibold text-brand-emphasis\">{label}</span>\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> = ['favorites', 'management', 'registration'];\n\ninterface ISidebarMenuGroup {\n  section: TUiSidebarSection | null;\n  label: string | null;\n  items: Array<ISidebarMenuItem>;\n}\n\nconst groupItemsBySection = (items: Array<ISidebarMenuItem>): Array<ISidebarMenuGroup> => {\n  const rows = items ?? [];\n  const ungrouped = rows.filter((item) => !item.section && !item.sectionLabel);\n  const sectionGroups = SECTION_ORDER.map((section) => ({\n    section,\n    label: null,\n    items: rows.filter((item) => item.section === section),\n  })).filter((group) => group.items.length > 0);\n  const named = rows.filter((item) => !item.section && item.sectionLabel);\n  const labelGroups = [...new Set(named.map((item) => item.sectionLabel ?? ''))].map((label) => ({\n    section: null,\n    label,\n    items: named.filter((item) => item.sectionLabel === label),\n  }));\n\n  return [\n    ...(ungrouped.length ? [{ section: null, label: null, items: ungrouped }] : []),\n    ...sectionGroups,\n    ...labelGroups,\n  ];\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: Array<ISidebarMenuGroup> = showSections\n    ? groupItemsBySection(items)\n    : [{ section: null, label: 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 || group.label) {\n          rows.push(\n            <SidebarSectionHeader\n              key={`section-${group.section ?? group.label}`}\n              section={group.section}\n              label={group.label}\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,18 @@
+import { TUiThemeSkin } from '../../helpers/themeSkins';
+export type TUiThemePreference = 'light' | 'system' | 'dark';
+/** A skin is one more position of the knob: choosing it is choosing its scheme, re-coloured. */
+export type TUiThemeToggleOption = TUiThemePreference | TUiThemeSkin;
+interface IThemeToggleProps<TOption extends TUiThemeToggleOption = TUiThemePreference> {
+    preference: TOption;
+    onChange: (preference: TOption) => void;
+    /** Positions of the knob, in order. Defaults to light, system and dark; the host adds a
+        skin for as long as it is on offer and drops it again when the season ends. */
+    options?: ReadonlyArray<TOption>;
+}
+/**
+ * The theme control: an explicit light/dark choice, `system` to follow the OS, and any skin
+ * the host is offering. The host owns the preference (persistence + writing `data-theme` and
+ * `data-theme-skin` on <html>); this renders the knob.
+ */
+declare const ThemeToggle: <TOption extends TUiThemeToggleOption = TUiThemePreference>({ preference, onChange, options, }: IThemeToggleProps<TOption>) => import("react").JSX.Element;
+export default ThemeToggle;

package/dist/components/Shell/ThemeToggle.js

@@ -0,0 +1,68 @@
+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";
+import PumpkinGlyph from "./PumpkinGlyph.js";
+const OPTION_SIZE_REM = HEADER_CONTROL_SIZE_REM;
+const OPTION_ICON_SIZE = 15;
+const renderSymbol = (icon) => (isActive) => /* @__PURE__ */ jsx(MaterialSymbol, { icon, size: OPTION_ICON_SIZE, fill: isActive });
+const OPTION_PRESENTATION = {
+  light: { labelKey: "theme.light", renderIcon: renderSymbol("light_mode") },
+  system: { labelKey: "theme.system", renderIcon: renderSymbol("computer") },
+  dark: { labelKey: "theme.dark", renderIcon: renderSymbol("dark_mode") },
+  halloween: {
+    labelKey: "theme.halloween",
+    renderIcon: (isActive) => /* @__PURE__ */ jsx(PumpkinGlyph, { size: OPTION_ICON_SIZE, filled: isActive })
+  }
+};
+const DEFAULT_OPTIONS = ["light", "system", "dark"];
+const ThemeToggle = ({
+  preference,
+  onChange,
+  options
+}) => {
+  const { t } = useTranslation("ui");
+  const requestedOptions = Array.isArray(options) && options.length > 0 ? options : DEFAULT_OPTIONS;
+  const visibleOptions = requestedOptions.filter((option) => Boolean(OPTION_PRESENTATION[option]));
+  const activeIndex = visibleOptions.indexOf(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: [
+    activeIndex >= 0 && /* @__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)`
+        }
+      }
+    ),
+    visibleOptions.map((option) => {
+      const isActive = option === preference;
+      const presentation = OPTION_PRESENTATION[option];
+      return /* @__PURE__ */ jsx(ControlledTooltip, { content: t(presentation.labelKey), children: /* @__PURE__ */ jsx(
+        ControlledButton,
+        {
+          "aria-label": t(presentation.labelKey),
+          defaultHtmlButton: true,
+          "aria-pressed": isActive,
+          onClick: () => onChange(option),
+          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-subtle hover:text-foreground-muted"
+          ),
+          style: { width: `${OPTION_SIZE_REM}rem`, height: `${OPTION_SIZE_REM}rem` },
+          children: presentation.renderIcon(isActive)
+        }
+      ) }, option);
+    })
+  ] }) });
+};
+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 { ReactNode } from 'react';\nimport 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';\nimport { TUiThemeSkin } from '@/helpers/themeSkins';\n\nimport { HEADER_CONTROL_SHELL_CLASS, HEADER_CONTROL_SIZE_REM } from './headerControlStyles';\nimport PumpkinGlyph from './PumpkinGlyph';\n\nconst OPTION_SIZE_REM = HEADER_CONTROL_SIZE_REM;\nconst OPTION_ICON_SIZE = 15;\n\nexport type TUiThemePreference = 'light' | 'system' | 'dark';\n\n/** A skin is one more position of the knob: choosing it is choosing its scheme, re-coloured. */\nexport type TUiThemeToggleOption = TUiThemePreference | TUiThemeSkin;\n\ninterface IOptionPresentation {\n  labelKey: string;\n  renderIcon: (isActive: boolean) => ReactNode;\n}\n\nconst renderSymbol = (icon: SymbolCodepoints) => (isActive: boolean) => (\n  <MaterialSymbol icon={icon} size={OPTION_ICON_SIZE} fill={isActive} />\n);\n\nconst OPTION_PRESENTATION: Record<TUiThemeToggleOption, IOptionPresentation> = {\n  light: { labelKey: 'theme.light', renderIcon: renderSymbol('light_mode') },\n  system: { labelKey: 'theme.system', renderIcon: renderSymbol('computer') },\n  dark: { labelKey: 'theme.dark', renderIcon: renderSymbol('dark_mode') },\n  halloween: {\n    labelKey: 'theme.halloween',\n    renderIcon: (isActive) => <PumpkinGlyph size={OPTION_ICON_SIZE} filled={isActive} />,\n  },\n};\n\nconst DEFAULT_OPTIONS: ReadonlyArray<TUiThemePreference> = ['light', 'system', 'dark'];\n\ninterface IThemeToggleProps<TOption extends TUiThemeToggleOption = TUiThemePreference> {\n  preference: TOption;\n  onChange: (preference: TOption) => void;\n  /** Positions of the knob, in order. Defaults to light, system and dark; the host adds a\n      skin for as long as it is on offer and drops it again when the season ends. */\n  options?: ReadonlyArray<TOption>;\n}\n\n/**\n * The theme control: an explicit light/dark choice, `system` to follow the OS, and any skin\n * the host is offering. The host owns the preference (persistence + writing `data-theme` and\n * `data-theme-skin` on <html>); this renders the knob.\n */\nconst ThemeToggle = <TOption extends TUiThemeToggleOption = TUiThemePreference>({\n  preference,\n  onChange,\n  options,\n}: IThemeToggleProps<TOption>) => {\n  const { t } = useTranslation('ui');\n\n  const requestedOptions = (\n    Array.isArray(options) && options.length > 0 ? options : DEFAULT_OPTIONS\n  ) as ReadonlyArray<TOption>;\n  const visibleOptions = requestedOptions.filter((option) => Boolean(OPTION_PRESENTATION[option]));\n  const activeIndex = visibleOptions.indexOf(preference);\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        {activeIndex >= 0 && (\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\n        {visibleOptions.map((option) => {\n          const isActive = option === preference;\n          const presentation = OPTION_PRESENTATION[option];\n\n          return (\n            <ControlledTooltip key={option} content={t(presentation.labelKey)}>\n              <ControlledButton\n                aria-label={t(presentation.labelKey)}\n                defaultHtmlButton\n                aria-pressed={isActive}\n                onClick={() => onChange(option)}\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-subtle hover:text-foreground-muted',\n                )}\n                style={{ width: `${OPTION_SIZE_REM}rem`, height: `${OPTION_SIZE_REM}rem` }}\n              >\n                {presentation.renderIcon(isActive)}\n              </ControlledButton>\n            </ControlledTooltip>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nexport default ThemeToggle;\n"],"names":[],"mappings":";;;;;;;;AAYA,MAAM,kBAAkB;AACxB,MAAM,mBAAmB;AAYzB,MAAM,eAAe,CAAC,SAA2B,CAAC,aAChD,oBAAC,gBAAA,EAAe,MAAY,MAAM,kBAAkB,MAAM,SAAA,CAAU;AAGtE,MAAM,sBAAyE;AAAA,EAC7E,OAAO,EAAE,UAAU,eAAe,YAAY,aAAa,YAAY,EAAA;AAAA,EACvE,QAAQ,EAAE,UAAU,gBAAgB,YAAY,aAAa,UAAU,EAAA;AAAA,EACvE,MAAM,EAAE,UAAU,cAAc,YAAY,aAAa,WAAW,EAAA;AAAA,EACpE,WAAW;AAAA,IACT,UAAU;AAAA,IACV,YAAY,CAAC,aAAa,oBAAC,gBAAa,MAAM,kBAAkB,QAAQ,SAAA,CAAU;AAAA,EAAA;AAEtF;AAEA,MAAM,kBAAqD,CAAC,SAAS,UAAU,MAAM;AAerF,MAAM,cAAc,CAA4D;AAAA,EAC9E;AAAA,EACA;AAAA,EACA;AACF,MAAkC;AAChC,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AAEjC,QAAM,mBACJ,MAAM,QAAQ,OAAO,KAAK,QAAQ,SAAS,IAAI,UAAU;AAE3D,QAAM,iBAAiB,iBAAiB,OAAO,CAAC,WAAW,QAAQ,oBAAoB,MAAM,CAAC,CAAC;AAC/F,QAAM,cAAc,eAAe,QAAQ,UAAU;AAErD,SACE,oBAAC,OAAA,EAAI,MAAK,SAAQ,cAAY,EAAE,cAAc,GAAG,WAAW,4BAC1D,UAAA,qBAAC,OAAA,EAAI,WAAU,8BACZ,UAAA;AAAA,IAAA,eAAe,KACd;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,IAIH,eAAe,IAAI,CAAC,WAAW;AAC9B,YAAM,WAAW,WAAW;AAC5B,YAAM,eAAe,oBAAoB,MAAM;AAE/C,iCACG,mBAAA,EAA+B,SAAS,EAAE,aAAa,QAAQ,GAC9D,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,cAAY,EAAE,aAAa,QAAQ;AAAA,UACnC,mBAAiB;AAAA,UACjB,gBAAc;AAAA,UACd,SAAS,MAAM,SAAS,MAAM;AAAA,UAC9B,WAAW;AAAA,YACT;AAAA,YACA,WAAW,wBAAwB;AAAA,UAAA;AAAA,UAErC,OAAO,EAAE,OAAO,GAAG,eAAe,OAAO,QAAQ,GAAG,eAAe,MAAA;AAAA,UAElE,UAAA,aAAa,WAAW,QAAQ;AAAA,QAAA;AAAA,MAAA,KAZb,MAcxB;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/sidebarFavorites.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+import { ISidebarMenuItem } from './SidebarMenu';
+/** A favorite is a destination, so only rows that open something (no children) can be one. */
+export declare const resolveSidebarFavoriteKey: (item: ISidebarMenuItem) => string | null;
+interface ISidebarFavoritesContext {
+    canFavorite: boolean;
+    favoriteKeys: Array<string>;
+    isFavorite: (favoriteKey: string) => boolean;
+    toggleFavorite: (favoriteKey: string) => void;
+}
+export declare const SidebarFavoritesProvider: React.FC<{
+    children: ReactNode;
+}>;
+export declare const useSidebarFavorites: () => ISidebarFavoritesContext;
+/**
+ * The rows of the Favorites section, in the order the user starred them. A favorite the menu no
+ * longer offers (service turned off, permission revoked) is simply not rendered, and comes back
+ * on its own when the entry does.
+ */
+export declare const buildFavoriteMenuItems: (items: Array<ISidebarMenuItem>, favoriteKeys: Array<string>) => Array<ISidebarMenuItem>;
+export {};

package/dist/components/Shell/sidebarFavorites.js

@@ -0,0 +1,69 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useState, useCallback, useMemo, useContext } from "react";
+import { resolveUiPreferenceScopeId, writeUiPreference, readUiPreference } from "../../helpers/uiPreferences.js";
+const FAVORITES_STORAGE_KEY = "sidebar_favorites";
+const readFavoritesStore = () => {
+  const store = readUiPreference(FAVORITES_STORAGE_KEY);
+  return store && typeof store === "object" ? store : {};
+};
+const readScopedFavorites = (scopeId) => {
+  if (!scopeId) return [];
+  const favorites = readFavoritesStore()[scopeId];
+  return Array.isArray(favorites) ? favorites.filter((favoriteKey) => typeof favoriteKey === "string") : [];
+};
+const resolveSidebarFavoriteKey = (item) => item.children?.length ? null : (item.externalUrl ?? item.to) || null;
+const SidebarFavoritesContext = createContext({
+  canFavorite: false,
+  favoriteKeys: [],
+  isFavorite: () => false,
+  toggleFavorite: () => void 0
+});
+const SidebarFavoritesProvider = ({ children }) => {
+  const [scopeId] = useState(resolveUiPreferenceScopeId);
+  const [favoriteKeys, setFavoriteKeys] = useState(() => readScopedFavorites(scopeId));
+  const toggleFavorite = useCallback(
+    (favoriteKey) => {
+      if (!scopeId) return;
+      setFavoriteKeys((currentKeys) => {
+        const nextKeys = currentKeys.includes(favoriteKey) ? currentKeys.filter((currentKey) => currentKey !== favoriteKey) : [...currentKeys, favoriteKey];
+        writeUiPreference(FAVORITES_STORAGE_KEY, { ...readFavoritesStore(), [scopeId]: nextKeys });
+        return nextKeys;
+      });
+    },
+    [scopeId]
+  );
+  const value = useMemo(
+    () => ({
+      canFavorite: Boolean(scopeId),
+      favoriteKeys,
+      isFavorite: (favoriteKey) => favoriteKeys.includes(favoriteKey),
+      toggleFavorite
+    }),
+    [favoriteKeys, scopeId, toggleFavorite]
+  );
+  return /* @__PURE__ */ jsx(SidebarFavoritesContext.Provider, { value, children });
+};
+const useSidebarFavorites = () => useContext(SidebarFavoritesContext);
+const collectFavoritableItems = (items, itemsByFavoriteKey) => {
+  (items ?? []).forEach((item) => {
+    const favoriteKey = resolveSidebarFavoriteKey(item);
+    if (favoriteKey && !itemsByFavoriteKey.has(favoriteKey)) itemsByFavoriteKey.set(favoriteKey, item);
+    collectFavoritableItems(item.children ?? [], itemsByFavoriteKey);
+  });
+  return itemsByFavoriteKey;
+};
+const buildFavoriteMenuItems = (items, favoriteKeys) => {
+  const itemsByFavoriteKey = collectFavoritableItems(items, /* @__PURE__ */ new Map());
+  return favoriteKeys.reduce((favoriteItems, favoriteKey) => {
+    const item = itemsByFavoriteKey.get(favoriteKey);
+    if (item) favoriteItems.push({ ...item, id: `favorite:${favoriteKey}`, section: "favorites" });
+    return favoriteItems;
+  }, []);
+};
+export {
+  SidebarFavoritesProvider,
+  buildFavoriteMenuItems,
+  resolveSidebarFavoriteKey,
+  useSidebarFavorites
+};
+//# sourceMappingURL=sidebarFavorites.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sidebarFavorites.js","sources":["../../../src/components/Shell/sidebarFavorites.tsx"],"sourcesContent":["import { createContext, ReactNode, useCallback, useContext, useMemo, useState } from 'react';\n\nimport { readUiPreference, resolveUiPreferenceScopeId, writeUiPreference } from '@/helpers/uiPreferences';\n\nimport type { ISidebarMenuItem } from './SidebarMenu';\n\n// One consolidated entry for every user on the browser profile, keyed by the preference scope,\n// so a shared machine never mixes two people's favorites. Without a scope nothing is persisted.\nconst FAVORITES_STORAGE_KEY = 'sidebar_favorites';\n\ntype TSidebarFavoritesStore = Record<string, Array<string>>;\n\nconst readFavoritesStore = (): TSidebarFavoritesStore => {\n  const store = readUiPreference<TSidebarFavoritesStore>(FAVORITES_STORAGE_KEY);\n\n  return store && typeof store === 'object' ? store : {};\n};\n\nconst readScopedFavorites = (scopeId: string | null): Array<string> => {\n  if (!scopeId) return [];\n\n  const favorites = readFavoritesStore()[scopeId];\n\n  return Array.isArray(favorites) ? favorites.filter((favoriteKey) => typeof favoriteKey === 'string') : [];\n};\n\n/** A favorite is a destination, so only rows that open something (no children) can be one. */\nexport const resolveSidebarFavoriteKey = (item: ISidebarMenuItem): string | null =>\n  item.children?.length ? null : (item.externalUrl ?? item.to) || null;\n\ninterface ISidebarFavoritesContext {\n  canFavorite: boolean;\n  favoriteKeys: Array<string>;\n  isFavorite: (favoriteKey: string) => boolean;\n  toggleFavorite: (favoriteKey: string) => void;\n}\n\nconst SidebarFavoritesContext = createContext<ISidebarFavoritesContext>({\n  canFavorite: false,\n  favoriteKeys: [],\n  isFavorite: () => false,\n  toggleFavorite: () => undefined,\n});\n\nexport const SidebarFavoritesProvider: React.FC<{ children: ReactNode }> = ({ children }) => {\n  const [scopeId] = useState(resolveUiPreferenceScopeId);\n  const [favoriteKeys, setFavoriteKeys] = useState<Array<string>>(() => readScopedFavorites(scopeId));\n\n  const toggleFavorite = useCallback(\n    (favoriteKey: string) => {\n      if (!scopeId) return;\n\n      setFavoriteKeys((currentKeys) => {\n        const nextKeys = currentKeys.includes(favoriteKey)\n          ? currentKeys.filter((currentKey) => currentKey !== favoriteKey)\n          : [...currentKeys, favoriteKey];\n\n        writeUiPreference(FAVORITES_STORAGE_KEY, { ...readFavoritesStore(), [scopeId]: nextKeys });\n\n        return nextKeys;\n      });\n    },\n    [scopeId],\n  );\n\n  const value = useMemo<ISidebarFavoritesContext>(\n    () => ({\n      canFavorite: Boolean(scopeId),\n      favoriteKeys,\n      isFavorite: (favoriteKey) => favoriteKeys.includes(favoriteKey),\n      toggleFavorite,\n    }),\n    [favoriteKeys, scopeId, toggleFavorite],\n  );\n\n  return <SidebarFavoritesContext.Provider value={value}>{children}</SidebarFavoritesContext.Provider>;\n};\n\nexport const useSidebarFavorites = (): ISidebarFavoritesContext => useContext(SidebarFavoritesContext);\n\nconst collectFavoritableItems = (\n  items: Array<ISidebarMenuItem>,\n  itemsByFavoriteKey: Map<string, ISidebarMenuItem>,\n): Map<string, ISidebarMenuItem> => {\n  (items ?? []).forEach((item) => {\n    const favoriteKey = resolveSidebarFavoriteKey(item);\n\n    if (favoriteKey && !itemsByFavoriteKey.has(favoriteKey)) itemsByFavoriteKey.set(favoriteKey, item);\n\n    collectFavoritableItems(item.children ?? [], itemsByFavoriteKey);\n  });\n\n  return itemsByFavoriteKey;\n};\n\n/**\n * The rows of the Favorites section, in the order the user starred them. A favorite the menu no\n * longer offers (service turned off, permission revoked) is simply not rendered, and comes back\n * on its own when the entry does.\n */\nexport const buildFavoriteMenuItems = (\n  items: Array<ISidebarMenuItem>,\n  favoriteKeys: Array<string>,\n): Array<ISidebarMenuItem> => {\n  const itemsByFavoriteKey = collectFavoritableItems(items, new Map());\n\n  return favoriteKeys.reduce<Array<ISidebarMenuItem>>((favoriteItems, favoriteKey) => {\n    const item = itemsByFavoriteKey.get(favoriteKey);\n\n    if (item) favoriteItems.push({ ...item, id: `favorite:${favoriteKey}`, section: 'favorites' });\n\n    return favoriteItems;\n  }, []);\n};\n"],"names":[],"mappings":";;;AAQA,MAAM,wBAAwB;AAI9B,MAAM,qBAAqB,MAA8B;AACvD,QAAM,QAAQ,iBAAyC,qBAAqB;AAE5E,SAAO,SAAS,OAAO,UAAU,WAAW,QAAQ,CAAA;AACtD;AAEA,MAAM,sBAAsB,CAAC,YAA0C;AACrE,MAAI,CAAC,QAAS,QAAO,CAAA;AAErB,QAAM,YAAY,mBAAA,EAAqB,OAAO;AAE9C,SAAO,MAAM,QAAQ,SAAS,IAAI,UAAU,OAAO,CAAC,gBAAgB,OAAO,gBAAgB,QAAQ,IAAI,CAAA;AACzG;AAGO,MAAM,4BAA4B,CAAC,SACxC,KAAK,UAAU,SAAS,QAAQ,KAAK,eAAe,KAAK,OAAO;AASlE,MAAM,0BAA0B,cAAwC;AAAA,EACtE,aAAa;AAAA,EACb,cAAc,CAAA;AAAA,EACd,YAAY,MAAM;AAAA,EAClB,gBAAgB,MAAM;AACxB,CAAC;AAEM,MAAM,2BAA8D,CAAC,EAAE,eAAe;AAC3F,QAAM,CAAC,OAAO,IAAI,SAAS,0BAA0B;AACrD,QAAM,CAAC,cAAc,eAAe,IAAI,SAAwB,MAAM,oBAAoB,OAAO,CAAC;AAElG,QAAM,iBAAiB;AAAA,IACrB,CAAC,gBAAwB;AACvB,UAAI,CAAC,QAAS;AAEd,sBAAgB,CAAC,gBAAgB;AAC/B,cAAM,WAAW,YAAY,SAAS,WAAW,IAC7C,YAAY,OAAO,CAAC,eAAe,eAAe,WAAW,IAC7D,CAAC,GAAG,aAAa,WAAW;AAEhC,0BAAkB,uBAAuB,EAAE,GAAG,mBAAA,GAAsB,CAAC,OAAO,GAAG,UAAU;AAEzF,eAAO;AAAA,MACT,CAAC;AAAA,IACH;AAAA,IACA,CAAC,OAAO;AAAA,EAAA;AAGV,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL,aAAa,QAAQ,OAAO;AAAA,MAC5B;AAAA,MACA,YAAY,CAAC,gBAAgB,aAAa,SAAS,WAAW;AAAA,MAC9D;AAAA,IAAA;AAAA,IAEF,CAAC,cAAc,SAAS,cAAc;AAAA,EAAA;AAGxC,SAAO,oBAAC,wBAAwB,UAAxB,EAAiC,OAAe,SAAA,CAAS;AACnE;AAEO,MAAM,sBAAsB,MAAgC,WAAW,uBAAuB;AAErG,MAAM,0BAA0B,CAC9B,OACA,uBACkC;AAClC,GAAC,SAAS,CAAA,GAAI,QAAQ,CAAC,SAAS;AAC9B,UAAM,cAAc,0BAA0B,IAAI;AAElD,QAAI,eAAe,CAAC,mBAAmB,IAAI,WAAW,EAAG,oBAAmB,IAAI,aAAa,IAAI;AAEjG,4BAAwB,KAAK,YAAY,CAAA,GAAI,kBAAkB;AAAA,EACjE,CAAC;AAED,SAAO;AACT;AAOO,MAAM,yBAAyB,CACpC,OACA,iBAC4B;AAC5B,QAAM,qBAAqB,wBAAwB,OAAO,oBAAI,KAAK;AAEnE,SAAO,aAAa,OAAgC,CAAC,eAAe,gBAAgB;AAClF,UAAM,OAAO,mBAAmB,IAAI,WAAW;AAE/C,QAAI,KAAM,eAAc,KAAK,EAAE,GAAG,MAAM,IAAI,YAAY,WAAW,IAAI,SAAS,YAAA,CAAa;AAE7F,WAAO;AAAA,EACT,GAAG,CAAA,CAAE;AACP;"}

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;