@bizapps/design-system-testing 1.10.1 → 1.12.0

package/dist/main.js

@@ -1,10 +1,10 @@
 "use client";
-import { SearchIcon, BellIcon, CircleHelpIcon, ChevronDownIcon, ChevronLeftIcon, MoreHorizontalIcon, ChevronRightIcon, MinusIcon, CheckIcon, LoaderCircle, ChevronUpIcon, X, ChevronLeft, ChevronRight, ExternalLinkIcon, ChevronsUpDownIcon, XIcon, UploadIcon, Loader2Icon, LoaderIcon, PipetteIcon, CalendarIcon, MenuIcon, Pencil, Clock, Funnel, ArrowUp, ArrowDown, ArrowUpDown, Ellipsis, Rows2, Eye, Search, BrushCleaning, House, Plane, Wallet, LayoutDashboardIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, CircleCheckIcon } from 'lucide-react';
+import { SearchIcon, BellIcon, CircleHelpIcon, ChevronDownIcon, ChevronLeftIcon, MoreHorizontalIcon, ChevronRightIcon, MinusIcon, CheckIcon, LoaderCircle, ChevronUpIcon, X, ChevronLeft, ChevronRight, ExternalLinkIcon, ChevronsUpDownIcon, XIcon, UploadIcon, Loader2Icon, LoaderIcon, PipetteIcon, CalendarIcon, MenuIcon, Pencil, Clock, Funnel, ArrowUp, ArrowDown, ArrowUpDown, Ellipsis, Rows2, Eye, Search, ChevronsLeft, Menu, ChevronDown, Star, BrushCleaning, House, Plane, Wallet, LayoutDashboardIcon, CircleDashed, LayoutGrid, PanelRightClose, InfoIcon, TriangleAlertIcon, OctagonXIcon, CircleCheckIcon, ArrowRight, CircleAlert, ArrowUpRight, Lock } from 'lucide-react';
 import { cva } from 'class-variance-authority';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
-import { createContext, memo, useRef, useState, useMemo, useCallback, useEffect, forwardRef, Fragment, useId, useContext, useLayoutEffect, isValidElement, useImperativeHandle, cloneElement } from 'react';
+import { createContext, memo, useRef, useState, useMemo, useCallback, useEffect, forwardRef, Fragment, useId, useContext, useLayoutEffect, isValidElement, useReducer, useImperativeHandle, cloneElement, useSyncExternalStore, use } from 'react';
 import { Avatar as Avatar$1, Checkbox as Checkbox$1, Slot, Select as Select$1, Label as Label$1, Popover as Popover$1, Toggle as Toggle$1, ToggleGroup, Separator as Separator$1, Progress as Progress$1, Slider as Slider$1, Switch as Switch$1, Tabs as Tabs$1, Tooltip as Tooltip$1, Dialog as Dialog$1, AlertDialog as AlertDialog$1, Accordion as Accordion$1, DropdownMenu as DropdownMenu$1, RadioGroup as RadioGroup$1, NavigationMenu as NavigationMenu$1 } from 'radix-ui';
 import { isSameDay, isToday, format, addDays } from 'date-fns';
 import useEmblaCarousel from 'embla-carousel-react';
@@ -28,6 +28,7 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import confetti from 'canvas-confetti';
 import { flexRender, useReactTable, getFilteredRowModel, getSortedRowModel, getCoreRowModel } from '@tanstack/react-table';
 export { createColumnHelper } from '@tanstack/react-table';
+import { createPortal } from 'react-dom';
 import SignaturePadLib from 'signature_pad';
 
 // src/components/ui/Alert/alert.tsx
@@ -2217,10 +2218,10 @@ function createStore() {
     listeners: [],
     add(item, id) {
       const toastId = id ?? Math.random().toString(36).slice(2);
-      const exists = store.toasts.find((t) => t.id === toastId);
+      const exists = store.toasts.find((t2) => t2.id === toastId);
       if (exists) {
         store.toasts = store.toasts.map(
-          (t) => t.id === toastId ? { ...t, ...item, id: toastId } : t
+          (t2) => t2.id === toastId ? { ...t2, ...item, id: toastId } : t2
         );
       } else {
         store.toasts = [{ id: toastId, ...item }, ...store.toasts].slice(0, MAX_TOASTS);
@@ -2235,7 +2236,7 @@ function createStore() {
     remove(id) {
       clearTimeout(timers.get(id));
       timers.delete(id);
-      store.toasts = store.toasts.filter((t) => t.id !== id);
+      store.toasts = store.toasts.filter((t2) => t2.id !== id);
       store.listeners.forEach((l) => l([...store.toasts]));
     },
     subscribe(listener) {
@@ -2379,7 +2380,7 @@ function Toaster({ position = "bottom-right", children }) {
           "pointer-events-none fixed z-[100] flex flex-col gap-2",
           positionStyles[position]
         ),
-        children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "sync", initial: false, children: toasts.map((t) => /* @__PURE__ */ jsx("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsx(ToastCard, { ...t }) }, t.id)) })
+        children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "sync", initial: false, children: toasts.map((t2) => /* @__PURE__ */ jsx("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsx(ToastCard, { ...t2 }) }, t2.id)) })
       }
     )
   ] });
@@ -5160,13 +5161,11 @@ function AbilityProvider({ children, permissions }) {
     setImperativelyResolved(true);
   }, []);
   const permissionKey = permissions === void 0 ? null : [...permissions].sort().join("|");
-  const syncedKey = useRef(permissionKey);
-  useEffect(() => {
-    if (permissionKey === null) return;
-    if (permissionKey === syncedKey.current) return;
-    syncedKey.current = permissionKey;
+  const [syncedKey, setSyncedKey] = useState(permissionKey);
+  if (permissionKey !== null && permissionKey !== syncedKey) {
+    setSyncedKey(permissionKey);
     setPermissionSet(new Set(permissions));
-  }, [permissionKey, permissions]);
+  }
   const value = useMemo(
     () => ({ can: can2, setAbilities, clearAbilities, status }),
     [can2, setAbilities, clearAbilities, status]
@@ -5180,6 +5179,9 @@ function useAbility() {
   }
   return context;
 }
+function useOptionalAbility() {
+  return useContext(AbilityContext);
+}
 function useCan(permissions, mode = "any") {
   const { can: can2 } = useAbility();
   return can2(permissions, mode);
@@ -5403,10 +5405,11 @@ function SheetContent({
   children,
   side = "right",
   showCloseButton = true,
+  overlayClassName,
   ...props
 }) {
   return /* @__PURE__ */ jsxs(SheetPortal, { children: [
-    /* @__PURE__ */ jsx(SheetOverlay, {}),
+    /* @__PURE__ */ jsx(SheetOverlay, { className: overlayClassName }),
     /* @__PURE__ */ jsxs(
       Dialog$1.Content,
       {
@@ -9174,6 +9177,2362 @@ function BottomNavTabsList({ items, className }) {
     }
   );
 }
+var DEFAULT_LABELS = {
+  navigation: "Modules navigation",
+  title: "Modules",
+  collapse: "Collapse menu",
+  expand: "Expand menu",
+  openMenu: "Open menu",
+  closeMenu: "Close menu",
+  currentPageSuffix: " (contains the current page)",
+  searchPlaceholder: () => "Filter links\u2026",
+  searchLabel: (moduleLabel) => `Filter links of ${moduleLabel}`,
+  clearSearch: "Clear search",
+  noMatchesTitle: "No matches",
+  noMatches: (moduleLabel, query) => `No links in ${moduleLabel} match \u201C${query}\u201D.`,
+  flyoutNoMatches: (query) => `No links match \u201C${query}\u201D.`,
+  emptyModule: "No links in this module yet.",
+  addFavorite: (itemLabel) => `Add to favorites: ${itemLabel}`,
+  removeFavorite: (itemLabel) => `Remove from favorites: ${itemLabel}`
+};
+var EASE = "cubic-bezier(.2,.8,.2,1)";
+var MOTION_MS = 240;
+var FADE_MS = MOTION_MS / 2;
+var MORPH_MS = 360;
+var MORPH_EASE = "cubic-bezier(.65,0,.35,1)";
+var BOUNCE_KEYFRAMES = [
+  { transform: "translateY(0) scale(1)" },
+  { transform: "translateY(-3px) scale(1.06)", offset: 0.35 },
+  { transform: "translateY(0) scale(0.97)", offset: 0.65 },
+  { transform: "translateY(0) scale(1)" }
+];
+var BOUNCE_MS = 420;
+var SUBTLE_SCROLLBAR = "[scrollbar-color:var(--floating-sidebar-scrollbar-thumb)_var(--floating-sidebar-scrollbar-track)]! [&::-webkit-scrollbar]:w-2.5! [&::-webkit-scrollbar-track]:bg-floating-sidebar-scrollbar-track! [&::-webkit-scrollbar-thumb]:rounded-full! [&::-webkit-scrollbar-thumb]:border-2! [&::-webkit-scrollbar-thumb]:border-solid! [&::-webkit-scrollbar-thumb]:border-floating-sidebar-scrollbar-track! [&::-webkit-scrollbar-thumb]:bg-floating-sidebar-scrollbar-thumb! [&::-webkit-scrollbar-thumb:hover]:bg-floating-sidebar-scrollbar-thumb-hover!";
+var MORPH_SETTLE_MS = 120;
+function morphBox(element) {
+  const rect = element.getBoundingClientRect();
+  const computed = getComputedStyle(element);
+  const drawer = element.closest('[data-slot="sheet-content"]');
+  const drawerRect = drawer?.getBoundingClientRect();
+  const offsetX = drawer && drawerRect ? drawerRect.left - drawer.offsetLeft : 0;
+  const offsetY = drawer && drawerRect ? drawerRect.top - drawer.offsetTop : 0;
+  const borderWidth = parseFloat(computed.borderTopWidth) || 0;
+  return {
+    left: rect.left - offsetX,
+    top: rect.top - offsetY,
+    width: rect.width,
+    height: rect.height,
+    // `rounded-full` resolves to an enormous radius that would not interpolate visibly;
+    // half the height draws the same pill.
+    borderRadius: `${Math.min(parseFloat(computed.borderTopLeftRadius) || 0, rect.height / 2)}px`,
+    borderWidth: `${borderWidth}px`,
+    borderColor: borderWidth > 0 ? computed.borderTopColor : "transparent",
+    backgroundColor: computed.backgroundColor,
+    boxShadow: computed.boxShadow
+  };
+}
+var morphStyle = (b) => ({
+  left: `${b.left}px`,
+  top: `${b.top}px`,
+  width: `${b.width}px`,
+  height: `${b.height}px`,
+  borderRadius: b.borderRadius,
+  borderWidth: b.borderWidth,
+  borderColor: b.borderColor,
+  backgroundColor: b.backgroundColor,
+  boxShadow: b.boxShadow
+});
+var sameBox = (a, b) => Math.abs(a.left - b.left) < 0.5 && Math.abs(a.top - b.top) < 0.5 && Math.abs(a.width - b.width) < 0.5 && Math.abs(a.height - b.height) < 0.5;
+function MobileMorph({ morph, side, ghostRef, getTarget, onDone }) {
+  const chevronsRef = useRef(null);
+  const menuRef = useRef(null);
+  const onDoneRef = useRef(onDone);
+  useLayoutEffect(() => {
+    onDoneRef.current = onDone;
+  });
+  useLayoutEffect(() => {
+    const ghost = ghostRef.current;
+    if (!ghost) return;
+    let frame = 0;
+    let tries = 0;
+    const animations = [];
+    const options = {
+      duration: MORPH_MS,
+      easing: MORPH_EASE,
+      fill: "forwards"
+    };
+    const start = () => {
+      const target = getTarget();
+      if (!target) {
+        if (tries++ < 10) frame = requestAnimationFrame(start);
+        else onDoneRef.current();
+        return;
+      }
+      const to = morphBox(target);
+      const chevrons = morph.to === "open" ? 1 : 0;
+      animations.push(
+        ghost.animate([morphStyle(morph.from), morphStyle(to)], options),
+        chevronsRef.current.animate(
+          [{ opacity: morph.chevrons }, { opacity: chevrons }],
+          options
+        ),
+        menuRef.current.animate(
+          [{ opacity: 1 - morph.chevrons }, { opacity: 1 - chevrons }],
+          options
+        )
+      );
+      animations[0].onfinish = () => {
+        const settled = getTarget();
+        const end = settled && morphBox(settled);
+        if (!end || sameBox(end, to)) return onDoneRef.current();
+        const settle = ghost.animate([morphStyle(to), morphStyle(end)], {
+          ...options,
+          duration: MORPH_SETTLE_MS
+        });
+        animations.push(settle);
+        settle.onfinish = () => onDoneRef.current();
+      };
+    };
+    start();
+    return () => {
+      cancelAnimationFrame(frame);
+      animations.forEach((animation2) => animation2.cancel());
+    };
+  }, [morph, getTarget, ghostRef]);
+  return createPortal(
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: ghostRef,
+        "aria-hidden": "true",
+        "data-slot": "floating-sidebar-morph",
+        "data-state": morph.to,
+        className: "text-primary pointer-events-none fixed z-[60] flex items-center justify-center overflow-hidden border-solid",
+        style: morphStyle(morph.from),
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              ref: chevronsRef,
+              "data-slot": "floating-sidebar-morph-chevrons",
+              className: "absolute flex",
+              style: {
+                opacity: morph.chevrons,
+                // Same direction as the close button's chevrons in the drawer.
+                transform: side === "right" ? "rotate(180deg)" : void 0
+              },
+              children: /* @__PURE__ */ jsx(ChevronsLeft, { className: "size-5", strokeWidth: 1.5 })
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { ref: menuRef, className: "absolute flex", style: { opacity: 1 - morph.chevrons }, children: /* @__PURE__ */ jsx(Menu, { className: "size-5", strokeWidth: 1.5 }) })
+        ]
+      }
+    ),
+    document.body
+  );
+}
+var DEFAULT_WIDTH = 305;
+var DEFAULT_COLLAPSED_WIDTH = 48;
+var TILE_ICON_SIZE = 22;
+var MIN_COLLAPSED_WIDTH = 40;
+var t = (prop, ms = 300, delay = 0) => `${prop} ${ms}ms ${EASE} ${delay}ms`;
+function transition2(reduced, ...parts) {
+  const kept = reduced ? parts.filter((part) => /^(opacity|visibility|background|color|box-shadow)/.test(part)) : parts;
+  return kept.join(", ") || "none";
+}
+function useControllableState2(value, defaultValue, onChange) {
+  const [internal, setInternal] = useState(defaultValue);
+  const isControlled = value !== void 0;
+  const current = isControlled ? value : internal;
+  const setValue = useCallback(
+    (next) => {
+      if (!isControlled) setInternal(next);
+      onChange?.(next);
+    },
+    [isControlled, onChange]
+  );
+  return [current, setValue];
+}
+var normalize = (value) => value.normalize("NFD").replace(/[̀-ͯ]/g, "").toLowerCase();
+function filterItems(items, query) {
+  const needle = normalize(query.trim());
+  return needle ? items.filter((item) => normalize(item.label).includes(needle)) : items;
+}
+var lastUsedSidebar = null;
+var SHORTCUT_SIDEBAR = '[data-slot="floating-sidebar"][data-shortcut]';
+function isEditableTarget(target) {
+  if (!(target instanceof HTMLElement)) return false;
+  if (target.closest('[data-slot="floating-sidebar-search"]')) return false;
+  return target.closest('[contenteditable]:not([contenteditable="false"])') !== null || target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.tagName === "SELECT";
+}
+var ICON_SIZES = {
+  sm: "[&>svg]:size-[18px]",
+  md: "[&>svg]:size-5",
+  lg: "[&>svg]:size-[22px]"
+};
+function SidebarIcon({
+  icon,
+  resolveIcon,
+  size = "md"
+}) {
+  const resolved = typeof icon === "string" ? resolveIcon?.(icon) : icon;
+  const sizeClass2 = cn(
+    ICON_SIZES[size],
+    "[&>svg]:transition-[width,height] [&>svg]:duration-240 [&>svg]:ease-[cubic-bezier(.2,.8,.2,1)] motion-reduce:[&>svg]:transition-none"
+  );
+  if (resolved === void 0 || resolved === null) {
+    return /* @__PURE__ */ jsx("span", { "data-slot": "floating-sidebar-fallback-icon", className: cn("flex", sizeClass2), children: /* @__PURE__ */ jsx(CircleDashed, { "aria-hidden": "true", strokeWidth: 1.5 }) });
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "floating-sidebar-icon",
+      className: cn("flex [&>svg]:stroke-[1.5]", sizeClass2),
+      children: resolved
+    }
+  );
+}
+function FloatingSidebar({
+  modules,
+  resolveIcon,
+  renderLink,
+  open: openProp,
+  defaultOpen = true,
+  onOpenChange,
+  side = "left",
+  width = DEFAULT_WIDTH,
+  collapsedWidth = DEFAULT_COLLAPSED_WIDTH,
+  type = "single",
+  openModuleIds: openModulesProp,
+  defaultOpenModuleIds = [],
+  onOpenModulesChange,
+  hideEmptyModules = true,
+  activeItemId: activeItemProp,
+  defaultActiveItemId = null,
+  onItemSelect,
+  favoriteIds: favoritesProp,
+  defaultFavoriteIds = [],
+  onFavoritesChange,
+  showFavorites = true,
+  loading = false,
+  emptyState,
+  mobileOpen: mobileOpenProp,
+  defaultMobileOpen = false,
+  onMobileOpenChange,
+  shortcut = true,
+  labels: labelsProp,
+  className,
+  ref,
+  style,
+  onPointerDownCapture,
+  onFocusCapture,
+  ...navProps
+}) {
+  const labels = { ...DEFAULT_LABELS, ...labelsProp };
+  const reduced = useMediaQuery("(prefers-reduced-motion: reduce)");
+  const isMobile = useIsMobile();
+  const baseId = useId();
+  const [open, setOpen] = useControllableState2(openProp, defaultOpen, onOpenChange);
+  const [rawOpenModuleIds, setOpenModuleIds] = useControllableState2(
+    openModulesProp,
+    defaultOpenModuleIds,
+    onOpenModulesChange
+  );
+  const railWidth = Math.max(MIN_COLLAPSED_WIDTH, collapsedWidth);
+  const [activeItemId, setActiveItemId] = useControllableState2(
+    activeItemProp,
+    defaultActiveItemId
+  );
+  const [favoriteIds, setFavoriteIds] = useControllableState2(
+    favoritesProp,
+    defaultFavoriteIds,
+    onFavoritesChange
+  );
+  const [mobileOpen, setMobileOpen] = useControllableState2(
+    mobileOpenProp,
+    defaultMobileOpen,
+    onMobileOpenChange
+  );
+  const morphEnabled = isMobile && mobileOpenProp === void 0 && !reduced;
+  const triggerRef = useRef(null);
+  const toggleRef = useRef(null);
+  const morphGhostRef = useRef(null);
+  const deferredFocus = useRef(null);
+  const [morph, setMorph] = useState(null);
+  if (morph && !morphEnabled) setMorph(null);
+  const prevMobileOpen = useRef(mobileOpen);
+  useLayoutEffect(() => {
+    if (prevMobileOpen.current === mobileOpen) return;
+    prevMobileOpen.current = mobileOpen;
+    const ghost = morphGhostRef.current;
+    const source = ghost ?? (mobileOpen ? triggerRef.current : toggleRef.current);
+    deferredFocus.current = null;
+    if (!morphEnabled || !source || typeof source.animate !== "function") return;
+    deferredFocus.current = mobileOpen ? "toggle" : "trigger";
+    const chevrons = ghost?.querySelector(
+      '[data-slot="floating-sidebar-morph-chevrons"]'
+    );
+    setMorph((current) => ({
+      to: mobileOpen ? "open" : "closed",
+      from: morphBox(source),
+      chevrons: chevrons ? parseFloat(getComputedStyle(chevrons).opacity) : mobileOpen ? 0 : 1,
+      key: (current?.key ?? 0) + 1
+    }));
+  }, [mobileOpen, morphEnabled]);
+  const getMorphTarget = useCallback(
+    () => morph?.to === "open" ? toggleRef.current : triggerRef.current,
+    [morph?.to]
+  );
+  const endMorph = useCallback(() => setMorph(null), []);
+  useLayoutEffect(() => {
+    if (morph) return;
+    const pending = deferredFocus.current;
+    deferredFocus.current = null;
+    const active = document.activeElement;
+    if (pending === "toggle") {
+      const toggle2 = toggleRef.current;
+      if (toggle2 && active === toggle2.closest('[data-slot="sheet-content"]')) toggle2.focus();
+    } else if (pending === "trigger" && (!active || active === document.body)) {
+      triggerRef.current?.focus();
+    }
+  }, [morph]);
+  const morphing = morphEnabled && morph !== null;
+  const finePointer = useMediaQuery("(hover: hover) and (pointer: fine)");
+  const [queries, setQueries] = useState({});
+  const [flyoutId, setFlyoutId] = useState(null);
+  const [hoverId, setHoverId] = useState(null);
+  const collapsed = !isMobile && !open;
+  const [prevCollapsed, setPrevCollapsed] = useState(collapsed);
+  const [settling, setSettling] = useState(false);
+  if (prevCollapsed !== collapsed) {
+    setPrevCollapsed(collapsed);
+    setSettling(collapsed);
+    setFlyoutId(null);
+    setHoverId(null);
+  }
+  useEffect(() => {
+    if (!settling) return;
+    const timer = setTimeout(() => setSettling(false), MOTION_MS);
+    return () => clearTimeout(timer);
+  }, [settling]);
+  const toggle = useCallback(() => setOpen(!open), [open, setOpen]);
+  const navRef = useRef(null);
+  useEffect(() => {
+    if (!shortcut) return;
+    const onKeyDown = (event) => {
+      if (event.defaultPrevented || isEditableTarget(event.target)) return;
+      if ((event.ctrlKey || event.metaKey) && !event.shiftKey && !event.altKey && event.key.toLowerCase() === "b") {
+        const owner = event.target instanceof Element ? event.target.closest(SHORTCUT_SIDEBAR) : null;
+        const nav2 = navRef.current;
+        if (owner && owner !== nav2) return;
+        if (!owner) {
+          const fallback = lastUsedSidebar?.isConnected && lastUsedSidebar.matches(SHORTCUT_SIDEBAR) ? lastUsedSidebar : document.querySelector(SHORTCUT_SIDEBAR);
+          if (fallback && fallback !== nav2) return;
+        }
+        event.preventDefault();
+        if (isMobile) setMobileOpen(!mobileOpen);
+        else toggle();
+      }
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [shortcut, toggle, isMobile, mobileOpen, setMobileOpen]);
+  const selectItem = (item, module, navigates) => {
+    if (navigates) setActiveItemId(item.id);
+    setFlyoutId(null);
+    if (isMobile) setMobileOpen(false);
+    onItemSelect?.(item, module);
+  };
+  const toggleFavorite = (itemId) => setFavoriteIds(
+    favoriteIds.includes(itemId) ? favoriteIds.filter((id) => id !== itemId) : [...favoriteIds, itemId]
+  );
+  const list = {
+    activeItemId,
+    favoriteIds: showFavorites ? favoriteIds : null,
+    reduced,
+    labels,
+    resolveIcon,
+    renderLink,
+    onToggleFavorite: toggleFavorite
+  };
+  const toggleLabel = isMobile ? labels.closeMenu : collapsed ? labels.expand : labels.collapse;
+  const ability = useOptionalAbility();
+  const usesPermissions = modules.some(
+    (module) => module.permission || module.items.some((item) => item.permission)
+  );
+  const permissionsPending = usesPermissions && ability?.status === "loading";
+  const isAllowed = (entry) => !entry.permission || ability?.status === "ready" && ability.can(entry.permission, entry.permissionMode);
+  const authorizedModules = usesPermissions ? modules.filter(isAllowed).flatMap((module) => {
+    const items = module.items.filter(isAllowed);
+    return items.length > 0 || module.items.length === 0 ? [{ ...module, items }] : [];
+  }) : modules;
+  const showSkeletons = loading || permissionsPending;
+  const visibleModules = hideEmptyModules ? authorizedModules.filter((module) => module.items.length > 0) : authorizedModules;
+  const visibleModuleIds = new Set(visibleModules.map((module) => module.id));
+  const openModuleIds = type === "single" ? rawOpenModuleIds.filter((id) => visibleModuleIds.has(id)).slice(0, 1) : rawOpenModuleIds;
+  const toggleModule = (moduleId) => {
+    const isOpen = openModuleIds.includes(moduleId);
+    if (type === "multiple") {
+      setOpenModuleIds(
+        isOpen ? openModuleIds.filter((id) => id !== moduleId) : [...openModuleIds, moduleId]
+      );
+    } else {
+      setOpenModuleIds(isOpen ? [] : [moduleId]);
+    }
+  };
+  const nav = /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      ...navProps,
+      ref: (node) => {
+        navRef.current = node;
+        if (typeof ref === "function") return ref(node);
+        if (ref) ref.current = node;
+      },
+      onPointerDownCapture: (event) => {
+        lastUsedSidebar = event.currentTarget;
+        onPointerDownCapture?.(event);
+      },
+      onFocusCapture: (event) => {
+        lastUsedSidebar = event.currentTarget;
+        onFocusCapture?.(event);
+      },
+      "data-slot": "floating-sidebar",
+      "data-shortcut": shortcut ? "" : void 0,
+      "data-state": collapsed ? "collapsed" : "expanded",
+      "data-side": side,
+      "aria-label": labels.navigation,
+      "aria-busy": showSkeletons || void 0,
+      className: cn(
+        "flex h-full min-h-0 flex-col gap-3",
+        // useIsMobile only resolves after mount; hide the inline layout on phones with CSS
+        // so the first paint never shows it before the drawer takes over.
+        !isMobile && "max-md:hidden",
+        className
+      ),
+      style: isMobile ? style : {
+        ...style,
+        width: collapsed ? railWidth : width,
+        transition: transition2(reduced, t("width", MOTION_MS))
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-slot": "floating-sidebar-header",
+            className: cn(
+              "flex h-10 shrink-0 items-center",
+              side === "right" && "flex-row-reverse"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  title: labels.title,
+                  className: "text-muted-foreground overflow-hidden pl-1.5 text-[11px] font-medium tracking-[.12em] text-ellipsis whitespace-nowrap uppercase",
+                  style: {
+                    opacity: collapsed ? 0 : 1,
+                    maxWidth: collapsed ? 0 : 200,
+                    transition: transition2(
+                      reduced,
+                      t("opacity", FADE_MS, collapsed ? 0 : FADE_MS),
+                      t("max-width", MOTION_MS)
+                    )
+                  },
+                  children: labels.title
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  ref: toggleRef,
+                  type: "button",
+                  "data-slot": "floating-sidebar-toggle",
+                  "aria-label": toggleLabel,
+                  "aria-expanded": isMobile ? void 0 : !collapsed,
+                  title: shortcut && (!isMobile || finePointer) ? `${toggleLabel} (Ctrl/\u2318 + B)` : toggleLabel,
+                  onClick: isMobile ? () => setMobileOpen(false) : toggle,
+                  className: cn(
+                    "text-primary focus-visible:ring-primary bg-sidebar border-floating-sidebar-card-border hover:bg-floating-sidebar-toggle-hover flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-full border shadow-[0_2px_6px_color-mix(in_srgb,var(--color-primary)_6%,transparent)] outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+                    side === "right" ? "mr-auto" : "ml-auto"
+                  ),
+                  style: {
+                    // Hidden, and out of reach of a stray tap, while the mobile morph stands in
+                    // for it.
+                    opacity: morphing ? 0 : void 0,
+                    pointerEvents: morphing ? "none" : void 0,
+                    // The auto margin keeps the toggle on the edge while the width animates;
+                    // only the outer margin changes, to center it on the collapsed rail.
+                    // (`auto` cannot be interpolated, so animating it made the toggle jump.)
+                    [side === "right" ? "marginLeft" : "marginRight"]: collapsed ? (railWidth - 32) / 2 : 0,
+                    transition: transition2(
+                      reduced,
+                      t(side === "right" ? "margin-left" : "margin-right", MOTION_MS)
+                    )
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "flex",
+                      style: {
+                        // The chevrons point towards the edge when they collapse the sidebar.
+                        transform: collapsed !== (side === "right") ? "rotate(180deg)" : "rotate(0deg)",
+                        transition: transition2(reduced, t("transform", MOTION_MS))
+                      },
+                      children: /* @__PURE__ */ jsx(ChevronsLeft, { "aria-hidden": "true", className: "size-5", strokeWidth: 1.5 })
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-slot": "floating-sidebar-modules",
+            className: "flex min-h-0 flex-1 flex-col",
+            style: {
+              gap: collapsed ? 8 : 12,
+              transition: transition2(reduced, t("gap", MOTION_MS))
+            },
+            children: [
+              showSkeletons && Array.from({ length: 4 }, (_, index) => /* @__PURE__ */ jsx("div", { "data-slot": "floating-sidebar-skeleton", children: /* @__PURE__ */ jsx(
+                Skeleton,
+                {
+                  className: collapsed ? "rounded-[14px]" : "h-[58px] w-full rounded-2xl",
+                  style: collapsed ? { width: railWidth, height: railWidth } : void 0
+                }
+              ) }, index)),
+              !showSkeletons && visibleModules.length === 0 && emptyState,
+              !showSkeletons && visibleModules.map((module) => /* @__PURE__ */ jsx(
+                ModuleCard,
+                {
+                  tileSize: railWidth,
+                  module,
+                  regionId: `${baseId}-${module.id}`,
+                  flyoutRegionId: `${baseId}-${module.id}-flyout`,
+                  bodyWidth: isMobile ? void 0 : width - 2,
+                  collapsed,
+                  side,
+                  open: !collapsed && openModuleIds.includes(module.id),
+                  flyoutOpen: collapsed && flyoutId === module.id,
+                  anyFlyoutOpen: collapsed && flyoutId !== null,
+                  settling,
+                  tooltipOpen: collapsed && hoverId === module.id && !flyoutId,
+                  onTooltipOpenChange: (next) => setHoverId(
+                    (current) => next ? module.id : current === module.id ? null : current
+                  ),
+                  onFlyoutClose: () => setFlyoutId((current) => current === module.id ? null : current),
+                  list,
+                  query: queries[module.id] ?? "",
+                  onQueryChange: (query) => setQueries((current) => ({ ...current, [module.id]: query })),
+                  onHeaderClick: () => {
+                    if (collapsed) {
+                      setHoverId(null);
+                      setFlyoutId(flyoutId === module.id ? null : module.id);
+                    } else {
+                      toggleModule(module.id);
+                    }
+                  },
+                  onSelect: (item, navigates) => selectItem(item, module, navigates)
+                },
+                module.id
+              ))
+            ]
+          }
+        )
+      ]
+    }
+  );
+  if (isMobile) {
+    return /* @__PURE__ */ jsxs(TooltipProvider, { delayDuration: 300, children: [
+      /* @__PURE__ */ jsxs(Sheet, { open: mobileOpen, onOpenChange: setMobileOpen, children: [
+        mobileOpenProp === void 0 && /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            ref: triggerRef,
+            type: "button",
+            "data-slot": "floating-sidebar-mobile-trigger",
+            "aria-label": labels.openMenu,
+            style: {
+              opacity: morphing ? 0 : void 0,
+              pointerEvents: morphing ? "none" : void 0
+            },
+            className: "text-primary focus-visible:ring-primary bg-sidebar hover:bg-sidebar-accent flex size-10 cursor-pointer items-center justify-center rounded-[10px] shadow-[0_8px_24px_color-mix(in_srgb,var(--color-primary)_8%,transparent)] outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+            children: /* @__PURE__ */ jsx(Menu, { "aria-hidden": "true", className: "size-5", strokeWidth: 1.5 })
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(
+          SheetContent,
+          {
+            side,
+            "aria-describedby": void 0,
+            showCloseButton: false,
+            overlayClassName: "bg-primary/20",
+            className: "bg-transparent p-3 pt-2 shadow-none data-[side=left]:border-r-0 data-[side=right]:border-l-0",
+            style: { width: width + 24, maxWidth: "100%" },
+            onOpenAutoFocus: (event) => {
+              if (deferredFocus.current !== "toggle") return;
+              event.preventDefault();
+              event.currentTarget?.focus();
+            },
+            onCloseAutoFocus: (event) => {
+              if (deferredFocus.current === "trigger") event.preventDefault();
+            },
+            onEscapeKeyDown: (event) => {
+              const active = document.activeElement;
+              if (active instanceof HTMLInputElement && active.value && active.closest('[data-slot="floating-sidebar-search"]')) {
+                event.preventDefault();
+              }
+            },
+            children: [
+              /* @__PURE__ */ jsx(SheetTitle, { className: "sr-only", children: labels.title }),
+              nav
+            ]
+          }
+        )
+      ] }),
+      morphing && /* @__PURE__ */ jsx(
+        MobileMorph,
+        {
+          morph,
+          side,
+          ghostRef: morphGhostRef,
+          getTarget: getMorphTarget,
+          onDone: endMorph
+        },
+        morph.key
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 300, children: nav });
+}
+function ModuleSearch({
+  moduleLabel,
+  query,
+  focusable,
+  labels,
+  onQueryChange,
+  className
+}) {
+  const tabIndex = focusable ? 0 : -1;
+  const inputRef = useRef(null);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "floating-sidebar-search",
+      className: cn(
+        "text-muted-foreground border-floating-sidebar-search-border bg-floating-sidebar-search flex h-[38px] items-center gap-2 rounded-[10px] border pr-1 pl-3",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Search, { "aria-hidden": "true", className: "size-4 shrink-0", strokeWidth: 1.5 }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            type: "search",
+            "aria-label": labels.searchLabel(moduleLabel),
+            placeholder: labels.searchPlaceholder(moduleLabel),
+            tabIndex,
+            value: query,
+            onChange: (event) => onQueryChange(event.target.value),
+            onKeyDown: (event) => {
+              if (event.key === "Escape" && query) {
+                event.stopPropagation();
+                onQueryChange("");
+              }
+            },
+            className: "text-foreground placeholder:text-muted-foreground h-[34px] min-w-0 flex-1 border-0 bg-transparent p-0 text-[13px] outline-none [&::-webkit-search-cancel-button]:appearance-none"
+          }
+        ),
+        query && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": labels.clearSearch,
+            tabIndex,
+            onClick: () => {
+              onQueryChange("");
+              inputRef.current?.focus();
+            },
+            className: "focus-visible:ring-primary hover:bg-accent/60 flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-lg border-0 bg-transparent outline-none focus-visible:ring-2",
+            children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true", className: "size-4", strokeWidth: 1.5 })
+          }
+        )
+      ]
+    }
+  );
+}
+function NoMatches({
+  show,
+  moduleLabel,
+  query,
+  labels,
+  compact
+}) {
+  return /* @__PURE__ */ jsx("div", { role: "status", "data-slot": "floating-sidebar-no-matches", children: show && /* @__PURE__ */ jsx(
+    NoMatchesMessage,
+    {
+      moduleLabel,
+      query,
+      labels,
+      compact
+    }
+  ) });
+}
+function NoMatchesMessage({
+  moduleLabel,
+  query,
+  labels,
+  compact = false
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col items-center text-center",
+        compact ? "gap-1 px-3 py-4" : "gap-1.5 px-3 py-5"
+      ),
+      children: [
+        !compact && /* @__PURE__ */ jsx(
+          Search,
+          {
+            "aria-hidden": "true",
+            className: "text-muted-foreground size-5",
+            strokeWidth: 1.5
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "text-primary text-sm font-semibold", children: labels.noMatchesTitle }),
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-[13px] leading-[1.4]", children: compact ? labels.flyoutNoMatches(query) : labels.noMatches(moduleLabel, query) })
+      ]
+    }
+  );
+}
+function ModuleCard({
+  module,
+  tileSize,
+  regionId,
+  flyoutRegionId,
+  bodyWidth,
+  side,
+  collapsed,
+  open,
+  flyoutOpen,
+  anyFlyoutOpen,
+  settling,
+  tooltipOpen,
+  onTooltipOpenChange,
+  onFlyoutClose,
+  list,
+  query,
+  onQueryChange,
+  onHeaderClick,
+  onSelect
+}) {
+  const { activeItemId, reduced, labels, resolveIcon } = list;
+  const hasActive = module.items.some((item) => item.id === activeItemId);
+  const tileActive = collapsed && hasActive;
+  const tileSelected = anyFlyoutOpen ? flyoutOpen : tileActive;
+  const fillAfterCollapse = tileSelected && tileActive && settling && !reduced;
+  const fillTransition = fillAfterCollapse ? `0ms linear ${MOTION_MS}ms` : `${FADE_MS}ms linear 0ms`;
+  const iconFlipDelay = fillAfterCollapse ? MOTION_MS : FADE_MS / 2;
+  const tilePadding = (tileSize - 2 - TILE_ICON_SIZE) / 2;
+  const iconHighlighted = collapsed ? tileSelected : open;
+  const cardRef = useRef(null);
+  const wasCollapsed = useRef(collapsed);
+  useEffect(() => {
+    const justCollapsed = collapsed && !wasCollapsed.current;
+    wasCollapsed.current = collapsed;
+    if (!justCollapsed || !hasActive || reduced) return;
+    const animation2 = cardRef.current?.animate?.(BOUNCE_KEYFRAMES, {
+      duration: BOUNCE_MS,
+      delay: MOTION_MS,
+      easing: "ease-out"
+    });
+    return () => animation2?.cancel();
+  }, [collapsed, hasActive, reduced]);
+  const items = filterItems(module.items, query);
+  const isEmpty = module.items.length === 0;
+  const emptyMessage = /* @__PURE__ */ jsx(
+    "p",
+    {
+      "data-slot": "floating-sidebar-empty-module",
+      className: "text-muted-foreground px-3 py-4 text-center text-[13px] leading-[1.4]",
+      children: labels.emptyModule
+    }
+  );
+  const tileRef = useRef(null);
+  const closedFromOutside = useRef(false);
+  const skipNextTooltip = useRef(false);
+  return /* @__PURE__ */ jsx(Popover, { open: flyoutOpen, onOpenChange: (next) => !next && onFlyoutClose(), children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: cardRef,
+      "data-slot": "floating-sidebar-module",
+      "data-module-id": module.id,
+      "data-state": open ? "open" : "closed",
+      "data-active": hasActive ? "true" : void 0,
+      className: cn(
+        "relative flex min-h-0 w-full flex-col",
+        "border",
+        collapsed ? "rounded-[14px]" : "rounded-2xl",
+        tileSelected ? "border-primary bg-primary" : "bg-sidebar border-floating-sidebar-card-border",
+        open ? "shadow-[0_4px_14px_color-mix(in_srgb,var(--color-primary)_3%,transparent)]" : "shadow-[0_1px_4px_color-mix(in_srgb,var(--color-primary)_3%,transparent)]"
+      ),
+      style: {
+        flex: open ? "0 1 auto" : "0 0 auto",
+        transition: transition2(
+          reduced,
+          t("border-radius", MOTION_MS),
+          `background-color ${fillTransition}`,
+          `border-color ${fillTransition}`,
+          t("box-shadow", MOTION_MS)
+        )
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          Tooltip,
+          {
+            open: tooltipOpen,
+            onOpenChange: (next) => {
+              if (next && skipNextTooltip.current) return;
+              onTooltipOpenChange(collapsed && next);
+            },
+            children: [
+              /* @__PURE__ */ jsx(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  ref: tileRef,
+                  type: "button",
+                  "data-slot": "floating-sidebar-module-trigger",
+                  "aria-label": collapsed && hasActive ? module.label + labels.currentPageSuffix : module.label,
+                  "aria-expanded": collapsed ? flyoutOpen : open,
+                  "aria-controls": collapsed ? flyoutOpen ? flyoutRegionId : void 0 : regionId,
+                  onClick: onHeaderClick,
+                  className: cn(
+                    "group/head focus-visible:ring-primary relative flex w-full shrink-0 cursor-pointer items-center gap-3 overflow-hidden border-0 bg-transparent text-left outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+                    collapsed ? "rounded-[14px]" : "h-[58px] rounded-2xl",
+                    tileSelected ? "text-primary-foreground" : "text-primary"
+                  ),
+                  style: {
+                    // Collapsed: a square tile (border included) with the icon centered.
+                    ...collapsed && { height: tileSize - 2 },
+                    paddingLeft: collapsed ? tilePadding : 20,
+                    paddingRight: collapsed ? tilePadding : 20,
+                    transition: transition2(
+                      reduced,
+                      t("height", MOTION_MS),
+                      t("padding", MOTION_MS),
+                      `color 0ms linear ${iconFlipDelay}ms`,
+                      t("border-radius", MOTION_MS)
+                    )
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        "aria-hidden": "true",
+                        "data-slot": "floating-sidebar-module-hover",
+                        className: cn(
+                          "pointer-events-none absolute transition-colors duration-180 ease-out",
+                          // Inset on expanded cards; edge to edge on collapsed tiles.
+                          collapsed ? "inset-0 rounded-[inherit]" : "inset-1.5 rounded-[10px]",
+                          !open && (tileSelected ? "group-hover/head:bg-primary-foreground/12" : "group-hover/head:bg-floating-sidebar-hover")
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        "data-slot": "floating-sidebar-module-icon",
+                        className: cn(
+                          "relative flex shrink-0 items-center justify-center",
+                          !iconHighlighted && "text-muted-foreground"
+                        ),
+                        style: {
+                          transition: transition2(
+                            reduced,
+                            `color 0ms linear ${iconFlipDelay}ms`
+                          )
+                        },
+                        children: /* @__PURE__ */ jsx(
+                          SidebarIcon,
+                          {
+                            icon: module.icon,
+                            resolveIcon,
+                            size: collapsed ? "lg" : "md"
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        "data-slot": "floating-sidebar-module-label",
+                        "aria-hidden": collapsed || void 0,
+                        className: "relative min-w-0 flex-1 text-sm font-medium whitespace-nowrap",
+                        style: {
+                          opacity: collapsed ? 0 : 1,
+                          transition: transition2(
+                            reduced,
+                            t("opacity", FADE_MS, collapsed ? 0 : FADE_MS)
+                          )
+                        },
+                        children: module.label
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        "data-slot": "floating-sidebar-module-chevron",
+                        "aria-hidden": "true",
+                        className: cn(
+                          "relative flex shrink-0",
+                          !tileSelected && "text-muted-foreground"
+                        ),
+                        style: {
+                          opacity: collapsed ? 0 : 1,
+                          transform: open ? "rotate(180deg)" : "rotate(0deg)",
+                          transition: transition2(
+                            reduced,
+                            t("transform", 220),
+                            t("opacity", FADE_MS, collapsed ? 0 : FADE_MS)
+                          )
+                        },
+                        children: /* @__PURE__ */ jsx(ChevronDown, { className: "size-3.5", strokeWidth: 1.5 })
+                      }
+                    )
+                  ]
+                }
+              ) }) }),
+              collapsed && /* @__PURE__ */ jsx(
+                TooltipContent,
+                {
+                  side: side === "right" ? "left" : "right",
+                  sideOffset: 12,
+                  "data-slot": "floating-sidebar-tooltip",
+                  children: module.label
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "grid min-h-0 flex-[1_1_auto]",
+            style: {
+              gridTemplateRows: open ? "1fr" : "0fr",
+              transition: transition2(reduced, t("grid-template-rows", MOTION_MS))
+            },
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                id: regionId,
+                "data-slot": "floating-sidebar-module-content",
+                "data-state": open ? "open" : "closed",
+                "data-scroll": "muted",
+                className: cn("min-h-0 overflow-x-hidden", SUBTLE_SCROLLBAR),
+                style: {
+                  overflowY: open ? "auto" : "hidden",
+                  visibility: open ? "visible" : "hidden",
+                  transition: open ? "visibility 0s" : `visibility 0s linear ${MOTION_MS}ms`
+                },
+                children: /* @__PURE__ */ jsxs("div", { "data-slot": "floating-sidebar-module-body", style: { width: bodyWidth }, children: [
+                  isEmpty && emptyMessage,
+                  !isEmpty && /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      "data-slot": "floating-sidebar-search-bar",
+                      className: "bg-sidebar sticky top-0 z-[2] px-3 pb-3",
+                      children: /* @__PURE__ */ jsx(
+                        ModuleSearch,
+                        {
+                          moduleLabel: module.label,
+                          query,
+                          focusable: open,
+                          labels,
+                          onQueryChange
+                        }
+                      )
+                    }
+                  ),
+                  !isEmpty && /* @__PURE__ */ jsx(
+                    "ul",
+                    {
+                      "data-slot": "floating-sidebar-item-list",
+                      className: "flex flex-col gap-0.5 px-3 pb-3",
+                      children: items.map((item, index) => /* @__PURE__ */ jsx(
+                        ItemRow,
+                        {
+                          item,
+                          list,
+                          visible: open,
+                          staggerIndex: index,
+                          onSelect: (navigates) => onSelect(item, navigates)
+                        },
+                        item.id
+                      ))
+                    }
+                  ),
+                  !isEmpty && /* @__PURE__ */ jsx(
+                    NoMatches,
+                    {
+                      show: items.length === 0,
+                      moduleLabel: module.label,
+                      query,
+                      labels
+                    }
+                  )
+                ] })
+              }
+            )
+          }
+        ),
+        collapsed && /* @__PURE__ */ jsxs(
+          PopoverContent,
+          {
+            id: flyoutRegionId,
+            role: "group",
+            "aria-label": module.label,
+            "data-slot": "floating-sidebar-flyout",
+            "data-side": side,
+            side: side === "right" ? "left" : "right",
+            align: "start",
+            sideOffset: 16,
+            collisionPadding: 8,
+            className: "ring-floating-sidebar-card-border max-h-(--radix-popover-content-available-height) w-[268px] gap-0 rounded-2xl px-2 pt-4 pb-2",
+            onEscapeKeyDown: (event) => {
+              if (!query) return;
+              event.preventDefault();
+              onQueryChange("");
+            },
+            onInteractOutside: (event) => {
+              if (tileRef.current?.contains(event.target)) {
+                event.preventDefault();
+                return;
+              }
+              closedFromOutside.current = true;
+            },
+            onCloseAutoFocus: (event) => {
+              event.preventDefault();
+              if (!closedFromOutside.current) {
+                skipNextTooltip.current = true;
+                tileRef.current?.focus();
+                skipNextTooltip.current = false;
+              }
+              closedFromOutside.current = false;
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "data-slot": "floating-sidebar-flyout-title",
+                  className: "text-muted-foreground px-3 pb-2.5 text-[11px] font-medium tracking-[.1em] uppercase",
+                  children: module.label
+                }
+              ),
+              isEmpty && emptyMessage,
+              !isEmpty && /* @__PURE__ */ jsx(
+                ModuleSearch,
+                {
+                  moduleLabel: module.label,
+                  query,
+                  focusable: flyoutOpen,
+                  labels,
+                  onQueryChange,
+                  className: "mx-2 mb-2"
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  "data-slot": "floating-sidebar-flyout-list",
+                  "data-scroll": "muted",
+                  className: cn(
+                    // Clip x: items nudge 2px right on hover, and a y-only scroller
+                    // would then scroll sideways.
+                    "max-h-[420px] min-h-0 overflow-x-hidden overflow-y-auto",
+                    SUBTLE_SCROLLBAR
+                  ),
+                  children: [
+                    !isEmpty && /* @__PURE__ */ jsx(
+                      "ul",
+                      {
+                        "data-slot": "floating-sidebar-item-list",
+                        className: "flex flex-col gap-0.5",
+                        children: items.map((item) => /* @__PURE__ */ jsx(
+                          ItemRow,
+                          {
+                            item,
+                            list,
+                            visible: flyoutOpen,
+                            onSelect: (navigates) => onSelect(item, navigates)
+                          },
+                          item.id
+                        ))
+                      }
+                    ),
+                    !isEmpty && /* @__PURE__ */ jsx(
+                      NoMatches,
+                      {
+                        show: items.length === 0,
+                        moduleLabel: module.label,
+                        query,
+                        labels,
+                        compact: true
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  ) });
+}
+function ItemRow({ item, list, visible, staggerIndex, onSelect }) {
+  const { activeItemId, favoriteIds, reduced, labels, resolveIcon, renderLink } = list;
+  const active = item.id === activeItemId;
+  const favorite = favoriteIds?.includes(item.id) ?? false;
+  const tabIndex = visible ? 0 : -1;
+  const staggered = staggerIndex !== void 0;
+  const delay = staggered && visible ? Math.min(staggerIndex * 20, FADE_MS) : 0;
+  const rowStyle = staggered ? {
+    opacity: visible ? 1 : 0,
+    transition: transition2(
+      reduced,
+      t("opacity", FADE_MS, delay),
+      "background-color 180ms ease-out"
+    )
+  } : { transition: "background-color 180ms ease-out" };
+  const className = cn(
+    "focus-visible:ring-primary flex min-h-[46px] min-w-0 flex-1 cursor-pointer items-start gap-3 rounded-[10px] border-0 bg-transparent py-[13px] pr-1 pl-3 text-left text-[13px] leading-5 transition-transform duration-180 ease-[cubic-bezier(.2,.8,.2,1)] outline-none hover:text-primary focus-visible:ring-2 focus-visible:ring-inset disabled:cursor-not-allowed disabled:opacity-50",
+    active ? "text-primary font-bold" : "font-normal text-floating-sidebar-item-foreground hover:translate-x-0.5 motion-reduce:hover:translate-x-0"
+  );
+  const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn("flex shrink-0", active ? "text-primary" : "text-muted-foreground"),
+        children: /* @__PURE__ */ jsx(SidebarIcon, { icon: item.icon, resolveIcon, size: "sm" })
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "min-w-0 [overflow-wrap:anywhere]", children: item.label })
+  ] });
+  const common = {
+    className,
+    tabIndex,
+    "aria-current": active ? "page" : void 0,
+    "data-slot": "floating-sidebar-item",
+    "data-active": active ? "true" : void 0
+  };
+  let control;
+  if (item.href && !item.disabled) {
+    const linkProps = {
+      ...common,
+      href: item.href,
+      children: content,
+      // Only a plain click on an in-app link moves the current page; external links and
+      // modifier or middle clicks open elsewhere and leave this tab where it is.
+      onClick: (event) => onSelect(
+        !item.external && event.button === 0 && !(event.ctrlKey || event.metaKey || event.shiftKey || event.altKey)
+      ),
+      ...item.external ? { target: "_blank", rel: "noopener noreferrer" } : {}
+    };
+    control = renderLink ? renderLink(linkProps, item) : /* @__PURE__ */ jsx("a", { ...linkProps });
+  } else {
+    control = /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        ...common,
+        disabled: item.disabled,
+        onClick: () => onSelect(false),
+        children: content
+      }
+    );
+  }
+  const favoriteLabel = favorite ? labels.removeFavorite(item.label) : labels.addFavorite(item.label);
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      "data-slot": "floating-sidebar-item-row",
+      className: cn(
+        "group/row relative flex shrink-0 items-start rounded-[10px]",
+        active ? "bg-accent/70" : "hover:bg-floating-sidebar-hover"
+      ),
+      style: rowStyle,
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            "data-slot": "floating-sidebar-item-indicator",
+            className: "bg-floating-sidebar-indicator absolute top-3.5 bottom-3.5 left-0 w-[3px] rounded-r-[3px]",
+            style: { opacity: active ? 1 : 0, transition: "opacity 160ms ease-out" }
+          }
+        ),
+        control,
+        favoriteIds && item.favoritable !== false && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "data-slot": "floating-sidebar-favorite",
+            "data-favorite": favorite ? "true" : void 0,
+            "aria-pressed": favorite,
+            "aria-label": favoriteLabel,
+            title: favoriteLabel,
+            tabIndex,
+            onClick: (event) => {
+              event.stopPropagation();
+              if (!reduced) {
+                event.currentTarget.animate?.(
+                  [
+                    { transform: "scale(1)" },
+                    { transform: "scale(1.3)" },
+                    { transform: "scale(1)" }
+                  ],
+                  { duration: 220, easing: "ease-out" }
+                );
+              }
+              list.onToggleFavorite(item.id);
+            },
+            className: cn(
+              "focus-visible:ring-primary hover:bg-primary/6 mt-[9px] mr-1.5 flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-lg border-0 bg-transparent outline-none focus-visible:ring-2",
+              "hover:text-secondary",
+              // Stars stay hidden until their row is hovered or focused, unless favorited.
+              favorite ? "text-secondary opacity-100" : (
+                // Revealed on row hover or focus; always shown on touch, where there is no hover.
+                "text-muted-foreground opacity-0 group-focus-within/row:opacity-100 group-hover/row:opacity-100 [@media(hover:none)]:opacity-100"
+              )
+            ),
+            style: {
+              transition: "color 120ms ease-out, background 120ms ease-out, opacity 120ms ease-out"
+            },
+            children: /* @__PURE__ */ jsx(
+              Star,
+              {
+                "aria-hidden": "true",
+                className: cn("size-3.5", favorite && "fill-secondary/10"),
+                strokeWidth: 1.5
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+var AppHubContext = createContext(null);
+function useAppHubContext() {
+  const context = use(AppHubContext);
+  if (!context) throw new Error("AppHub parts must be rendered inside <AppHub>.");
+  return context;
+}
+
+// src/components/compounds/AppHub/app-hub.constants.ts
+var DEFAULT_APP_HUB_ID = "app-hub";
+var DEFAULT_STORAGE_KEY = "tcce-app-hub:open";
+var OPEN_CHANGE_EVENT = "tcce-app-hub:open-change";
+var ITEM_SELECTOR = "[data-app-hub-item]";
+var ENTRY_SELECTOR = "[data-app-hub-entry]";
+var FOCUS_RING = "outline-hidden focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-3 focus-visible:outline-main-blue-primary";
+var TOOLTIP_CLASS = "rounded-lg px-2.75 py-1.75 text-[11px] leading-none font-semibold shadow-black-button motion-reduce:animate-none";
+var DEFAULT_APP_HUB_LABELS = {
+  navigation: "Applications",
+  allApps: "All applications",
+  sheetTitle: "Applications",
+  hideDock: "Hide dock",
+  showDock: "show applications dock",
+  tab: "Apps",
+  fab: "Apps",
+  pending: (count) => `${count} pending`,
+  leaves: (appName) => `leaves ${appName}`,
+  current: "Current",
+  noAccess: "No access \xB7 ask your manager",
+  searchLabel: "Search applications",
+  searchPlaceholder: "Search apps",
+  clearSearch: "Clear search",
+  resultCount: (count) => count === 1 ? "1 application found" : `${count} applications found`,
+  loading: "Loading applications",
+  empty: "No applications found",
+  noMatch: (query) => `No apps match \u201C${query}\u201D`,
+  noMatchDescription: "Check the spelling or clear the search.",
+  error: "Couldn\u2019t load applications",
+  errorDescription: "The apps in the dock still work.",
+  retry: "Try again",
+  directory: "View all applications",
+  close: "Close",
+  dockHidden: "Applications dock hidden. Use the Apps tab on the right edge to show it again.",
+  dockShown: "Applications dock shown"
+};
+
+// src/components/compounds/AppHub/app-hub.utils.ts
+function mergeLabels(defaults, overrides = {}) {
+  const defined = Object.entries(overrides).filter(([, value]) => value !== void 0);
+  return { ...defaults, ...Object.fromEntries(defined) };
+}
+function areLabelsEqual(a, b) {
+  const keys = Object.keys(a);
+  return keys.every((key) => Object.is(a[key], b[key]));
+}
+function normalizePending(pending) {
+  return typeof pending === "number" && Number.isFinite(pending) && pending >= 1 ? Math.floor(pending) : 0;
+}
+function formatPendingCount(count) {
+  return count > 9 ? "9+" : String(count);
+}
+function sumPending(apps) {
+  return apps.reduce((total, app) => total + (app.locked ? 0 : normalizePending(app.pending)), 0);
+}
+function getAppAccessibleName(app, labels, appName) {
+  const pending = normalizePending(app.pending);
+  return [
+    app.label,
+    pending > 0 && labels.pending(pending),
+    app.external && labels.leaves(appName)
+  ].filter(Boolean).join(", ");
+}
+function getEntryElement(container) {
+  return container?.querySelector(ENTRY_SELECTOR) ?? container?.querySelector(ITEM_SELECTOR) ?? null;
+}
+function groupApps(apps) {
+  const sections = /* @__PURE__ */ new Map([[void 0, []]]);
+  for (const app of apps) {
+    const key = app.group || void 0;
+    sections.set(key, [...sections.get(key) ?? [], app]);
+  }
+  return [...sections].filter(([, items]) => items.length > 0).map(([heading, items]) => ({ heading, apps: items }));
+}
+function filterApps(apps, query) {
+  const needle = query.trim().toLowerCase();
+  if (!needle) return apps;
+  return apps.filter(
+    (app) => `${app.label} ${app.description ?? ""}`.toLowerCase().includes(needle)
+  );
+}
+var appHubIconVariants = cva("relative flex shrink-0 items-center justify-center", {
+  variants: {
+    tone: {
+      green: "bg-green-100 text-green-800",
+      yellow: "bg-yellow-200 text-yellow-800",
+      navy: "bg-main-blue-primary/10 text-main-blue-primary",
+      orange: "bg-orange-100 text-orange-800",
+      purple: "bg-purple-100 text-purple-600",
+      grey: "bg-light-200 text-main-grey"
+    },
+    size: {
+      tile: "size-12 rounded-2xl [&_svg]:size-5",
+      row: "size-9 rounded-xl [&_svg]:size-4.5",
+      sheet: "size-10 rounded-xl [&_svg]:size-5"
+    },
+    // Declared last so `cn()` keeps the current fill over the tone.
+    current: { true: "bg-main-blue-primary text-main-white", false: "" }
+  },
+  defaultVariants: { tone: "grey", size: "tile", current: false }
+});
+function AppHubLink({
+  app,
+  afterNavigate,
+  onClick,
+  ...props
+}) {
+  const { renderLink, onNavigate } = useAppHubContext();
+  const linkProps = {
+    ...props,
+    href: app.href,
+    onClick: (event) => {
+      onClick?.(event);
+      const modified = event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
+      if (modified) return;
+      onNavigate?.(app, event);
+      afterNavigate?.();
+    }
+  };
+  return renderLink ? renderLink(linkProps, app) : /* @__PURE__ */ jsx("a", { ...linkProps });
+}
+function AppHubCounter({ count, className }) {
+  if (count <= 0) return null;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      "data-slot": "app-hub-counter",
+      className: cn(
+        "bg-main-orange-primary text-background ring-background absolute -top-1 -right-1 flex h-4.5 min-w-4.5 items-center justify-center rounded-full px-1 text-[11px] font-bold ring-2",
+        className
+      ),
+      children: formatPendingCount(count)
+    }
+  );
+}
+function AppHubTile({ app, current = false }) {
+  const { labels, appName } = useAppHubContext();
+  const name = getAppAccessibleName(app, labels, appName);
+  const tone = app.tone ?? "grey";
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, "aria-describedby": void 0, children: /* @__PURE__ */ jsxs(
+      AppHubLink,
+      {
+        app,
+        "aria-label": name,
+        "aria-current": current ? "page" : void 0,
+        "data-slot": "app-hub-tile",
+        "data-variant": tone,
+        "data-current": current ? "" : void 0,
+        "data-app-hub-item": "",
+        "data-app-hub-entry": current ? "" : void 0,
+        className: cn(
+          appHubIconVariants({ tone, size: "tile", current }),
+          "hover:shadow-black-button transition-[translate,box-shadow] hover:-translate-y-0.5 active:translate-y-px active:shadow-none motion-reduce:transition-none",
+          "data-current:before:bg-main-orange-primary data-current:before:absolute data-current:before:-left-2.5 data-current:before:h-5 data-current:before:w-0.75 data-current:before:rounded-full",
+          FOCUS_RING
+        ),
+        children: [
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "contents", children: app.icon }),
+          /* @__PURE__ */ jsx(AppHubCounter, { count: normalizePending(app.pending) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      TooltipContent,
+      {
+        "aria-hidden": "true",
+        side: "left",
+        variant: "primary",
+        size: "sm",
+        className: TOOLTIP_CLASS,
+        children: app.label
+      }
+    )
+  ] });
+}
+var NAV_KEYS = /* @__PURE__ */ new Set(["ArrowDown", "ArrowUp", "Home", "End"]);
+function useArrowNavigation(containerRef) {
+  return useCallback(
+    (event) => {
+      const container = containerRef.current;
+      const target = event.target;
+      if (event.defaultPrevented || !container || !NAV_KEYS.has(event.key)) return;
+      if (!(target instanceof Element) || !container.contains(target)) return;
+      const current = target.closest(ITEM_SELECTOR);
+      if (!current) return;
+      const items = Array.from(container.querySelectorAll(ITEM_SELECTOR)).filter(
+        (item) => !item.closest("[inert]")
+      );
+      const index = items.indexOf(current);
+      if (index === -1) return;
+      event.preventDefault();
+      const last = items.length - 1;
+      const next = event.key === "Home" ? 0 : event.key === "End" ? last : event.key === "ArrowDown" ? (index + 1) % items.length : (index - 1 + items.length) % items.length;
+      items[next]?.focus();
+    },
+    [containerRef]
+  );
+}
+var SKELETON_ROWS = [
+  ["w-[58%]", "w-[82%]"],
+  ["w-[44%]", "w-[70%]"],
+  ["w-[64%]", "w-[76%]"]
+];
+function AppHubRow({
+  app,
+  current,
+  variant,
+  onActivate
+}) {
+  const { labels, appName } = useAppHubContext();
+  const descId = useId();
+  const locked = app.locked === true;
+  const pending = normalizePending(app.pending);
+  const className = cn(
+    "hover:bg-light-200 flex w-full items-center gap-3 rounded-xl p-2 text-left",
+    variant === "panel" ? "min-h-13" : "min-h-14",
+    current && "bg-light-200",
+    FOCUS_RING
+  );
+  const body = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: appHubIconVariants({
+          tone: locked ? "grey" : app.tone ?? "grey",
+          size: variant === "panel" ? "row" : "sheet"
+        }),
+        children: app.icon
+      }
+    ),
+    /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [
+      /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: cn(
+            "text-light-1000 flex items-center gap-1.5 font-medium",
+            variant === "panel" ? "text-sm" : "text-[15px]"
+          ),
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "truncate", children: app.label }),
+            app.external && /* @__PURE__ */ jsx(
+              ArrowUpRight,
+              {
+                "aria-hidden": "true",
+                className: "text-main-grey size-3.25 shrink-0"
+              }
+            )
+          ]
+        }
+      ),
+      locked ? /* @__PURE__ */ jsxs("span", { className: "text-main-grey flex items-center gap-1 text-xs", children: [
+        /* @__PURE__ */ jsx(Lock, { "aria-hidden": "true", className: "size-3" }),
+        labels.noAccess
+      ] }) : app.description && /* @__PURE__ */ jsx(
+        "span",
+        {
+          id: descId,
+          className: cn(
+            "text-main-grey truncate",
+            variant === "panel" ? "text-xs" : "text-[13px]"
+          ),
+          children: app.description
+        }
+      )
+    ] }),
+    current && /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "bg-main-blue-primary text-main-white shrink-0 rounded-full px-2 py-0.5 text-[11px] leading-tight font-semibold",
+        children: labels.current
+      }
+    ),
+    pending > 0 && !locked && /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        "data-slot": "app-hub-row-counter",
+        className: cn(
+          "bg-main-orange-primary text-background flex shrink-0 items-center justify-center rounded-full font-bold",
+          variant === "panel" ? "h-5 min-w-5 px-1.5 text-[11px]" : "h-5.5 min-w-5.5 px-1.75 text-xs"
+        ),
+        children: formatPendingCount(pending)
+      }
+    )
+  ] });
+  if (locked) {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-disabled": "true",
+        "data-slot": "app-hub-row",
+        "data-app-hub-item": "",
+        className: cn(className, "text-main-grey cursor-not-allowed"),
+        children: body
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    AppHubLink,
+    {
+      app,
+      afterNavigate: onActivate,
+      "aria-label": getAppAccessibleName(app, labels, appName),
+      "aria-current": current ? "page" : void 0,
+      "aria-describedby": app.description ? descId : void 0,
+      "data-slot": "app-hub-row",
+      "data-app-hub-item": "",
+      className,
+      children: body
+    }
+  );
+}
+function AppHubCatalog({
+  variant,
+  apps,
+  currentAppId,
+  status,
+  onRetry,
+  directoryHref,
+  searchThreshold,
+  onActivate
+}) {
+  const { labels, renderLink } = useAppHubContext();
+  const rootRef = useRef(null);
+  const onKeyDown = useArrowNavigation(rootRef);
+  const searchId = useId();
+  const searchRef = useRef(null);
+  const [query, setQuery] = useState("");
+  const directoryProps = {
+    href: directoryHref ?? "",
+    "data-slot": "app-hub-directory",
+    "data-app-hub-item": "",
+    onClick: () => onActivate?.(),
+    className: cn(
+      "text-main-blue-primary flex items-center gap-2 font-semibold",
+      variant === "panel" ? "border-light-200 hover:bg-light-200 justify-between border-t px-4 py-3 text-[13px]" : "border-light-300 mx-4 mb-4 min-h-13 justify-center rounded-full border text-sm",
+      FOCUS_RING
+    ),
+    children: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+      labels.directory,
+      /* @__PURE__ */ jsx(ArrowRight, { "aria-hidden": "true", className: "size-4 shrink-0" })
+    ] })
+  };
+  const ready = status === "ready";
+  const searchVisible = variant === "panel" && ready && apps.length >= searchThreshold;
+  if (!searchVisible && query) setQuery("");
+  const activeQuery = searchVisible ? query : "";
+  const filtered = filterApps(apps, activeQuery);
+  const message = status === "loading" ? labels.loading : activeQuery && labels.resultCount(filtered.length);
+  const [live, setLive] = useState("");
+  useEffect(() => setLive(message), [message]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      "data-slot": "app-hub-catalog",
+      "data-variant": variant,
+      tabIndex: -1,
+      onKeyDown,
+      className: "flex min-h-0 flex-1 flex-col outline-none",
+      children: [
+        searchVisible && /* @__PURE__ */ jsxs("div", { "data-slot": "app-hub-search", className: "relative shrink-0 px-3 pt-3", children: [
+          /* @__PURE__ */ jsx("label", { htmlFor: searchId, className: "sr-only", children: labels.searchLabel }),
+          /* @__PURE__ */ jsx(
+            Search,
+            {
+              "aria-hidden": "true",
+              className: "text-main-grey pointer-events-none absolute top-[calc(50%+6px)] left-6 size-4 -translate-y-1/2"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              ref: searchRef,
+              id: searchId,
+              type: "search",
+              value: query,
+              placeholder: labels.searchPlaceholder,
+              onChange: (event) => setQuery(event.target.value),
+              className: "border-main-grey/70 bg-background h-10 rounded-lg px-9 text-sm [&::-webkit-search-cancel-button]:appearance-none"
+            }
+          ),
+          query && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": labels.clearSearch,
+              onClick: () => {
+                setQuery("");
+                searchRef.current?.focus();
+              },
+              className: cn(
+                "text-main-grey hover:bg-light-200 absolute top-[calc(50%+6px)] right-4 flex size-8 -translate-y-1/2 items-center justify-center rounded-lg [&_svg]:size-3.5",
+                FOCUS_RING
+              ),
+              children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-slot": "app-hub-catalog-scroll",
+            className: cn(
+              "flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto p-2",
+              variant === "panel" && "max-h-74"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("div", { role: "status", className: "sr-only", children: live }),
+              status === "loading" && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "data-slot": "app-hub-loading",
+                  "aria-hidden": "true",
+                  className: "flex flex-col gap-1",
+                  children: SKELETON_ROWS.map(([first, second]) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 p-2", children: [
+                    /* @__PURE__ */ jsx("span", { className: "bg-light-200 size-9 shrink-0 rounded-xl" }),
+                    /* @__PURE__ */ jsxs("span", { className: "flex flex-1 flex-col gap-1.5", children: [
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: cn("bg-light-200 h-2.5 rounded-[5px]", first)
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("span", { className: cn("bg-light-200 h-2 rounded-sm", second) })
+                    ] })
+                  ] }, first))
+                }
+              ),
+              status === "error" && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  role: "alert",
+                  "data-slot": "app-hub-error",
+                  className: "flex flex-col items-start gap-2.5 px-2 pt-3 pb-2",
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        "aria-hidden": "true",
+                        className: "flex size-9 items-center justify-center rounded-xl bg-red-100 text-red-800",
+                        children: /* @__PURE__ */ jsx(CircleAlert, { className: "size-4.5" })
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs("span", { className: "flex flex-col gap-1", children: [
+                      /* @__PURE__ */ jsx("span", { className: "text-light-1000 text-sm font-semibold", children: labels.error }),
+                      /* @__PURE__ */ jsx("span", { className: "text-main-grey text-[13px] leading-snug", children: labels.errorDescription })
+                    ] }),
+                    onRetry && /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        size: "sm",
+                        variant: "outline",
+                        "data-app-hub-item": "",
+                        onClick: () => {
+                          rootRef.current?.focus();
+                          onRetry();
+                        },
+                        children: labels.retry
+                      }
+                    )
+                  ]
+                }
+              ),
+              ready && filtered.length === 0 && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  "data-slot": "app-hub-empty",
+                  className: "flex flex-col items-start gap-1.5 px-2 pt-4 pb-2",
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "text-light-1000 text-sm font-semibold", children: activeQuery ? labels.noMatch(activeQuery) : labels.empty }),
+                    activeQuery && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+                      /* @__PURE__ */ jsx("span", { className: "text-main-grey text-[13px] leading-snug", children: labels.noMatchDescription }),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          "data-app-hub-item": "",
+                          onClick: () => {
+                            setQuery("");
+                            searchRef.current?.focus();
+                          },
+                          className: cn(
+                            "text-main-blue-primary mt-1 rounded-sm py-1.5 text-[13px] font-semibold underline underline-offset-3",
+                            FOCUS_RING
+                          ),
+                          children: labels.clearSearch
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              ),
+              ready && groupApps(filtered).map((section) => /* @__PURE__ */ jsxs("section", { className: "flex flex-col gap-1", children: [
+                section.heading && /* @__PURE__ */ jsx("h3", { className: "text-main-grey px-2 text-[11px] font-semibold uppercase", children: section.heading }),
+                /* @__PURE__ */ jsx("ul", { role: "list", className: "flex flex-col gap-1", children: section.apps.map((app) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                  AppHubRow,
+                  {
+                    app,
+                    current: app.id === currentAppId,
+                    variant,
+                    onActivate
+                  }
+                ) }, app.id)) })
+              ] }, section.heading ?? ""))
+            ]
+          }
+        ),
+        directoryHref && /* @__PURE__ */ jsx(Fragment$1, { children: renderLink ? renderLink(directoryProps, void 0) : /* @__PURE__ */ jsx("a", { ...directoryProps }) })
+      ]
+    }
+  );
+}
+function AppHubPanel({
+  id,
+  open,
+  onOpenChange,
+  onCloseAutoFocus,
+  ...catalog
+}) {
+  const { labels } = useAppHubContext();
+  const titleId = useId();
+  const contentRef = useRef(null);
+  const [tooltipOpen, setTooltipOpen] = useState(false);
+  if (open && tooltipOpen) setTooltipOpen(false);
+  const quietRef = useRef(false);
+  useEffect(() => {
+    if (open) return () => void (quietRef.current = true);
+  }, [open]);
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsxs(
+      Tooltip,
+      {
+        open: tooltipOpen,
+        onOpenChange: (next) => setTooltipOpen(next && !open && !quietRef.current),
+        children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, "aria-describedby": void 0, children: /* @__PURE__ */ jsx(
+            PopoverTrigger,
+            {
+              "aria-label": labels.allApps,
+              "aria-controls": id,
+              "data-slot": "app-hub-panel-trigger",
+              onPointerEnter: () => void (quietRef.current = false),
+              onBlur: () => void (quietRef.current = false),
+              "data-app-hub-item": "",
+              className: cn(
+                appHubIconVariants({ tone: "grey", size: "tile" }),
+                // Both triggers write `data-state` through `asChild` and the tooltip's value
+                // wins, so the open tint keys off `aria-expanded` instead.
+                "aria-expanded:bg-main-blue-primary/10 aria-expanded:text-main-blue-primary",
+                FOCUS_RING
+              ),
+              children: /* @__PURE__ */ jsx(LayoutGrid, { "aria-hidden": "true" })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            TooltipContent,
+            {
+              "aria-hidden": "true",
+              side: "left",
+              variant: "primary",
+              size: "sm",
+              className: TOOLTIP_CLASS,
+              children: labels.allApps
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      PopoverContent,
+      {
+        ref: contentRef,
+        id,
+        side: "left",
+        align: "center",
+        sideOffset: 22,
+        collisionPadding: 8,
+        "aria-labelledby": titleId,
+        "data-slot": "app-hub-panel",
+        onCloseAutoFocus,
+        onOpenAutoFocus: (event) => {
+          event.preventDefault();
+          const content = contentRef.current;
+          (content?.querySelector('input[type="search"]') ?? content?.querySelector(ITEM_SELECTOR) ?? content)?.focus();
+        },
+        className: "border-light-300 shadow-black-card max-h-(--radix-popover-content-available-height) w-75 gap-0 rounded-2xl border p-0 motion-reduce:data-[state=closed]:animate-none motion-reduce:data-[state=open]:animate-none",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 pt-3 pb-1", children: [
+            /* @__PURE__ */ jsx(
+              "h2",
+              {
+                id: titleId,
+                className: "font-heading text-main-blue-primary text-base leading-tight font-bold",
+                children: labels.allApps
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": labels.close,
+                onClick: () => onOpenChange(false),
+                className: cn(
+                  "text-main-grey hover:bg-light-200 flex size-8 items-center justify-center rounded-xl [&_svg]:size-4",
+                  FOCUS_RING
+                ),
+                children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            AppHubCatalog,
+            {
+              variant: "panel",
+              onActivate: () => onOpenChange(false),
+              ...catalog
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function AppHubRail({
+  id,
+  apps,
+  currentAppId,
+  open,
+  onHide,
+  railRef,
+  panel
+}) {
+  const { labels } = useAppHubContext();
+  const onKeyDown = useArrowNavigation(railRef);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: railRef,
+      id,
+      "data-slot": "app-hub-rail",
+      "data-state": open ? "open" : "closed",
+      inert: !open,
+      onKeyDown,
+      className: cn(
+        "pointer-events-auto flex flex-col items-center gap-2 px-2.5 py-3",
+        "border-light-200 bg-background/95 shadow-black-card rounded-l-4xl border border-r-0",
+        "transition-transform duration-300 data-[state=closed]:translate-x-[150%] motion-reduce:transition-none"
+      ),
+      children: [
+        /* @__PURE__ */ jsx("ul", { role: "list", className: "flex flex-col items-center gap-2", children: apps.map((app) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(AppHubTile, { app, current: app.id === currentAppId }) }, app.id)) }),
+        /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "bg-light-300 my-0.5 h-px w-6.5" }),
+        panel,
+        /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "bg-light-300 my-0.5 h-px w-6.5" }),
+        /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, "aria-describedby": void 0, children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": labels.hideDock,
+              "aria-expanded": "true",
+              "aria-controls": id,
+              "data-slot": "app-hub-hide",
+              "data-app-hub-item": "",
+              onClick: onHide,
+              className: cn(
+                "text-main-grey hover:bg-light-200 hover:text-main-blue-primary flex size-8 items-center justify-center rounded-xl [&_svg]:size-4",
+                FOCUS_RING
+              ),
+              children: /* @__PURE__ */ jsx(PanelRightClose, { "aria-hidden": "true" })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            TooltipContent,
+            {
+              "aria-hidden": "true",
+              side: "left",
+              variant: "primary",
+              size: "sm",
+              className: TOOLTIP_CLASS,
+              children: labels.hideDock
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function AppHubTab({ railId, open, pending, onShow, tabRef }) {
+  const { labels } = useAppHubContext();
+  const name = [`${labels.tab}, ${labels.showDock}`, pending > 0 && labels.pending(pending)].filter(Boolean).join(", ");
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "app-hub-tab-wrapper",
+      "data-state": open ? "open" : "closed",
+      inert: open,
+      className: "pointer-events-auto transition-transform duration-300 data-[state=open]:translate-x-[150%] motion-reduce:transition-none",
+      children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          ref: tabRef,
+          type: "button",
+          "aria-label": name,
+          "aria-expanded": "false",
+          "aria-controls": railId,
+          "data-slot": "app-hub-tab",
+          "data-app-hub-entry": "",
+          onClick: onShow,
+          className: cn(
+            "border-light-300 bg-background/95 text-main-blue-primary flex w-10 flex-col items-center gap-2 rounded-l-2xl border border-r-0 py-3.5",
+            FOCUS_RING
+          ),
+          children: [
+            /* @__PURE__ */ jsx(LayoutGrid, { "aria-hidden": "true", className: "size-4.5" }),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: "text-main-grey text-[11px] leading-none font-semibold tracking-[0.12em] uppercase [writing-mode:vertical-rl]",
+                children: labels.tab
+              }
+            ),
+            pending > 0 && /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": "true",
+                "data-slot": "app-hub-counter",
+                className: "bg-main-orange-primary text-background flex h-4.5 min-w-4.5 items-center justify-center rounded-full px-1.25 text-[11px] leading-none font-bold",
+                children: formatPendingCount(pending)
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+function AppHubSheet({ pending, ...catalog }) {
+  const { labels } = useAppHubContext();
+  const [open, setOpen] = useState(false);
+  return /* @__PURE__ */ jsxs(Sheet, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxs(
+      SheetTrigger,
+      {
+        "data-slot": "app-hub-fab",
+        "data-app-hub-entry": "",
+        className: cn(
+          // Bottom-right, in the thumb zone and out of the reading area (the rail centers instead).
+          "bg-main-blue-primary text-main-white shadow-black-button pointer-events-auto mr-4 mb-4 flex h-12 items-center gap-2 self-end rounded-full pr-4.5 pl-4 text-sm font-semibold",
+          FOCUS_RING
+        ),
+        children: [
+          /* @__PURE__ */ jsx(LayoutGrid, { "aria-hidden": "true", className: "size-4.5" }),
+          labels.fab,
+          pending > 0 && /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+            ", ",
+            labels.pending(pending)
+          ] }),
+          pending > 0 && /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              "data-slot": "app-hub-counter",
+              className: "bg-main-orange-primary text-background flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-[11px] leading-none font-bold",
+              children: formatPendingCount(pending)
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      SheetContent,
+      {
+        side: "bottom",
+        "aria-modal": "true",
+        "aria-describedby": void 0,
+        showCloseButton: false,
+        onOpenAutoFocus: (event) => {
+          event.preventDefault();
+          event.currentTarget.querySelector('[data-slot="app-hub-sheet-close"]')?.focus();
+        },
+        className: "max-h-[85dvh] rounded-t-3xl motion-reduce:transition-none motion-reduce:data-closed:animate-none motion-reduce:data-open:animate-none",
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": "true",
+              className: "bg-light-300 mx-auto mt-2 h-1 w-10 rounded-full"
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 pt-2", children: [
+            /* @__PURE__ */ jsx(SheetTitle, { className: "font-heading text-main-blue-primary text-xl leading-tight font-bold", children: labels.sheetTitle }),
+            /* @__PURE__ */ jsx(
+              SheetClose,
+              {
+                "data-slot": "app-hub-sheet-close",
+                "aria-label": labels.close,
+                className: cn(
+                  "text-main-grey hover:bg-light-200 flex size-11 items-center justify-center rounded-xl [&_svg]:size-5",
+                  FOCUS_RING
+                ),
+                children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(AppHubCatalog, { ...catalog, variant: "sheet", onActivate: () => setOpen(false) })
+        ]
+      }
+    )
+  ] });
+}
+var noopSubscribe = () => () => {
+};
+var nullSnapshot = () => null;
+function useAppHubOpen({
+  open: controlledOpen,
+  defaultOpen,
+  onOpenChange,
+  storageKey: storageKey2,
+  layoutDefault
+}) {
+  const controlled = controlledOpen !== void 0;
+  const persistedKey = !controlled ? storageKey2 : null;
+  const fallback = defaultOpen ?? layoutDefault;
+  const [memoryOpen, setMemoryOpen] = useState(void 0);
+  const [sessionOverride, setSessionOverride] = useState(void 0);
+  const store = useMemo(() => {
+    if (persistedKey === null) return { subscribe: noopSubscribe, getSnapshot: nullSnapshot };
+    const subscribe2 = (notify) => {
+      const onStorage = (event) => {
+        if (event.key === null || event.key === persistedKey) notify();
+      };
+      const onChange = (event) => {
+        if (event.detail?.key === persistedKey) notify();
+      };
+      window.addEventListener("storage", onStorage);
+      window.addEventListener(OPEN_CHANGE_EVENT, onChange);
+      return () => {
+        window.removeEventListener("storage", onStorage);
+        window.removeEventListener(OPEN_CHANGE_EVENT, onChange);
+      };
+    };
+    const getSnapshot2 = () => {
+      try {
+        const value = window.localStorage.getItem(persistedKey);
+        return value === "true" ? true : value === "false" ? false : null;
+      } catch {
+        return null;
+      }
+    };
+    return { subscribe: subscribe2, getSnapshot: getSnapshot2 };
+  }, [persistedKey]);
+  const stored = useSyncExternalStore(store.subscribe, store.getSnapshot, nullSnapshot);
+  const setOpen = useCallback(
+    (next) => {
+      onOpenChange?.(next);
+      if (controlled) return;
+      if (storageKey2 === null) {
+        setMemoryOpen(next);
+        return;
+      }
+      try {
+        window.localStorage.setItem(storageKey2, String(next));
+        setSessionOverride(void 0);
+      } catch {
+        setSessionOverride(next);
+      }
+      window.dispatchEvent(
+        new CustomEvent(OPEN_CHANGE_EVENT, { detail: { key: storageKey2 } })
+      );
+    },
+    [controlled, onOpenChange, storageKey2]
+  );
+  let open;
+  if (controlled) open = controlledOpen;
+  else if (storageKey2 === null) open = memoryOpen ?? fallback;
+  else open = sessionOverride ?? stored ?? fallback;
+  return { open, setOpen };
+}
+var DESKTOP_QUERY = "(min-width: 1024px)";
+var TABLET_QUERY = "(min-width: 768px)";
+function hasMatchMedia() {
+  return typeof window !== "undefined" && typeof window.matchMedia === "function";
+}
+function subscribe(notify) {
+  if (!hasMatchMedia()) return () => {
+  };
+  const lists = [DESKTOP_QUERY, TABLET_QUERY].map((query) => window.matchMedia(query));
+  lists.forEach((list) => list.addEventListener("change", notify));
+  return () => lists.forEach((list) => list.removeEventListener("change", notify));
+}
+function getSnapshot() {
+  if (!hasMatchMedia()) return "desktop";
+  if (window.matchMedia(DESKTOP_QUERY).matches) return "desktop";
+  return window.matchMedia(TABLET_QUERY).matches ? "tablet" : "mobile";
+}
+var getServerSnapshot = () => "desktop";
+function useAppHubViewport() {
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
+function AppHub({
+  apps,
+  appName,
+  currentAppId,
+  catalogStatus = "ready",
+  onRetry,
+  directoryHref,
+  layout = "auto",
+  searchThreshold = 7,
+  position = "fixed",
+  open: openProp,
+  defaultOpen,
+  onOpenChange,
+  storageKey: storageKey2 = DEFAULT_STORAGE_KEY,
+  onNavigate,
+  renderLink,
+  labels: labelOverrides,
+  id = DEFAULT_APP_HUB_ID,
+  className
+}) {
+  const merged = mergeLabels(DEFAULT_APP_HUB_LABELS, labelOverrides);
+  const [stableLabels, setStableLabels] = useState(merged);
+  const labels = areLabelsEqual(stableLabels, merged) ? stableLabels : merged;
+  if (labels !== stableLabels) setStableLabels(labels);
+  const viewport = useAppHubViewport();
+  const family = layout === "auto" ? viewport === "mobile" ? "sheet" : "dock" : layout;
+  const { open, setOpen } = useAppHubOpen({
+    open: openProp,
+    defaultOpen,
+    onOpenChange,
+    storageKey: storageKey2,
+    // Tablet starts collapsed only when the layout follows the viewport.
+    layoutDefault: !(layout === "auto" && viewport === "tablet")
+  });
+  const [panelOpen, setPanelOpen] = useState(false);
+  if (!open && panelOpen) setPanelOpen(false);
+  const [announcement, setAnnouncement] = useState("");
+  const [, requestRender] = useReducer((count) => count + 1, 0);
+  const previousOpenRef = useRef(open);
+  const railRef = useRef(null);
+  const tabRef = useRef(null);
+  const focusIntentRef = useRef(null);
+  const railId = `${id}-rail`;
+  useLayoutEffect(() => {
+    const intent = focusIntentRef.current;
+    focusIntentRef.current = null;
+    if (previousOpenRef.current === open) return;
+    previousOpenRef.current = open;
+    setAnnouncement(intent === open ? open ? labels.dockShown : labels.dockHidden : "");
+    const entry = open ? getEntryElement(railRef.current) : tabRef.current;
+    if (intent === open) {
+      entry?.focus();
+      return;
+    }
+    const active = document.activeElement;
+    const stranded = open ? [tabRef.current] : [railRef.current, document.getElementById(`${id}-panel`)];
+    if (active && stranded.some((element) => element?.contains(active))) entry?.focus();
+  });
+  function toggle(next) {
+    focusIntentRef.current = next;
+    setOpen(next);
+    requestRender();
+  }
+  const context = useMemo(
+    () => ({ labels, appName, renderLink, onNavigate }),
+    [labels, appName, renderLink, onNavigate]
+  );
+  return /* @__PURE__ */ jsx(AppHubContext, { value: context, children: /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      id,
+      "aria-label": labels.navigation,
+      "data-slot": "app-hub",
+      "data-layout": family,
+      "data-state": open ? "open" : "closed",
+      "data-position": position,
+      className: cn(
+        // `overflow-x-clip` keeps the slid-out form from creating scrollable overflow
+        // (a scrollIntoView would otherwise shift the host); `pl-8` leaves room for the shadow.
+        "pointer-events-none inset-y-0 right-0 z-40 grid items-center justify-items-end overflow-x-clip pl-8 *:col-start-1 *:row-start-1",
+        position === "fixed" ? "fixed" : "absolute",
+        className
+      ),
+      children: [
+        family === "sheet" ? /* @__PURE__ */ jsx(
+          AppHubSheet,
+          {
+            apps,
+            currentAppId,
+            status: catalogStatus,
+            onRetry,
+            directoryHref,
+            searchThreshold,
+            pending: sumPending(apps)
+          }
+        ) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+          /* @__PURE__ */ jsx(
+            AppHubRail,
+            {
+              id: railId,
+              apps: apps.filter((app) => app.inRail && !app.locked),
+              currentAppId,
+              open,
+              onHide: () => toggle(false),
+              railRef,
+              panel: /* @__PURE__ */ jsx(
+                AppHubPanel,
+                {
+                  id: `${id}-panel`,
+                  open: panelOpen,
+                  onOpenChange: setPanelOpen,
+                  onCloseAutoFocus: (event) => {
+                    if (open) return;
+                    event.preventDefault();
+                    const active = document.activeElement;
+                    if (!active || active === document.body)
+                      tabRef.current?.focus();
+                  },
+                  apps,
+                  currentAppId,
+                  status: catalogStatus,
+                  onRetry,
+                  directoryHref,
+                  searchThreshold
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            AppHubTab,
+            {
+              railId,
+              open,
+              pending: sumPending(apps),
+              onShow: () => toggle(true),
+              tabRef
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "status",
+            "aria-live": "polite",
+            "aria-atomic": "true",
+            "data-slot": "app-hub-live",
+            className: "sr-only",
+            children: announcement
+          }
+        )
+      ]
+    }
+  ) });
+}
+function getLiveEntry(root) {
+  const live = [...root?.querySelectorAll("[data-slot]") ?? []].find(
+    (region) => !region.closest("[inert]") && getEntryElement(region) !== null
+  );
+  return getEntryElement(live ?? root);
+}
+function AppHubSkipLink({
+  targetId = DEFAULT_APP_HUB_ID,
+  children = "Skip to applications",
+  className,
+  onClick,
+  ...props
+}) {
+  function handleClick(event) {
+    onClick?.(event);
+    if (event.defaultPrevented) return;
+    const entry = getLiveEntry(document.getElementById(targetId));
+    if (!entry) return;
+    event.preventDefault();
+    entry.focus();
+  }
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      ...props,
+      href: `#${targetId}`,
+      "data-slot": "app-hub-skip-link",
+      onClick: handleClick,
+      className: cn(
+        "bg-main-blue-primary text-main-white sr-only rounded-md px-4 py-2 text-sm font-semibold",
+        "focus:not-sr-only focus:fixed focus:top-2 focus:left-2 focus:z-50",
+        "focus-visible:outline-main-orange-primary outline-hidden focus-visible:outline-2 focus-visible:outline-offset-2",
+        className
+      ),
+      children
+    }
+  );
+}
 var DrawerContext = createContext({ isOpen: false, modal: true });
 function Drawer({ children, open, onOpenChange, modal = true, ...props }) {
   const [internalOpen, setInternalOpen] = useState(props.defaultOpen ?? false);
@@ -9602,6 +11961,6 @@ function TCCEProvider({
   return /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: tooltipDelayDuration, children: /* @__PURE__ */ jsx(AbilityProvider, { permissions, children: /* @__PURE__ */ jsx(Toaster, { position: toasterPosition, children }) }) });
 }
 
-export { AbilityProvider, Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppShell, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge2 as Badge, BottomNav, BottomNavTabs, BottomNavTabsContent, BottomNavTabsList, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, CONFETTI_COLORS, Can, CanNot, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Checkbox, ColorPicker, ColorPickerAlpha, ColorPickerEyeDropper, ColorPickerFormat, ColorPickerHue, ColorPickerOutput, ColorPickerPresets, ColorPickerSelection, Combobox, DataTable, DataTableCardView, DataTableColumnFilter, DataTableFooter, DataTableHeaderCell, DataTableRowActions, DataTableSearch, DataTableSkeleton, DataTableToolbar, DatePicker, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Dropzone, DropzoneContent, DropzoneEmptyState, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, EventCalendar, Field, FieldDescription, FieldError, FieldGroup, FieldLabel, FilterOption, Input, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, KNOWN_PERMISSIONS, Label, Link, Logo, MiniCalendar, MiniCalendarDay, MiniCalendarDays, MiniCalendarNavigation, Navbar, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PhoneField, PinInput, Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, SegmentedControl, SegmentedControlItem, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, SignaturePad, Skeleton, Slider, Spinner, SpinnerDots, SpinnerLoader, Status, StatusIndicator, StatusLabel, Switch, TCCEProvider, TEXT_SIZES, TEXT_WEIGHTS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TablePagination, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Text, Textarea, Toaster, Toggle, ToggleGroup2 as ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, alertVariants, animation, avatarVariants, badgeVariants2 as badgeVariants, buttonVariants, columnFiltersToArrayQueryParams, columnFiltersToJsonString, columnFiltersToQueryParams, columnFiltersToRecord, createBackendParams, createBackendParamsWithFilters, duration, ease, fadeIn, fireConfetti, getActiveFilterCount, getActiveFilterValues, getColumnValueCounts, getUniqueColumnValues, hasActiveFilters, linkVariants, logos, matchPermission, mergeFilters, multiSelectFilter, navigationMenuTriggerStyle, parseJsonToFilters, parseQueryParamsToFilters, progressIndicatorVariants, progressVariants, resetConfetti, scaleIn, searchInArray, skeletonVariants, slideRight, slideUp, sortRecordToSortingState, sortingStateToJsonString, sortingStateToRecord, spinnerDotsVariants, spinnerLoaderVariants, spinnerVariants, spring, stagger, toggleVariants, tooltipContentVariants, transition, useAbility, useAbilityStatus, useAppForm, useCan, useCarousel, useColorPicker, useColumnFilter, useSidebar, useTableContext, useTableData, useTableFiltering, useTableGlobalFilter, useTableSizing, useTableSorting, useTableVisibility, useToast, validatePhone };
+export { AbilityProvider, Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppHub, AppHubSkipLink, AppShell, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge2 as Badge, BottomNav, BottomNavTabs, BottomNavTabsContent, BottomNavTabsList, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, CONFETTI_COLORS, Can, CanNot, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Checkbox, ColorPicker, ColorPickerAlpha, ColorPickerEyeDropper, ColorPickerFormat, ColorPickerHue, ColorPickerOutput, ColorPickerPresets, ColorPickerSelection, Combobox, DataTable, DataTableCardView, DataTableColumnFilter, DataTableFooter, DataTableHeaderCell, DataTableRowActions, DataTableSearch, DataTableSkeleton, DataTableToolbar, DatePicker, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Dropzone, DropzoneContent, DropzoneEmptyState, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, EventCalendar, Field, FieldDescription, FieldError, FieldGroup, FieldLabel, FilterOption, FloatingSidebar, Input, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, KNOWN_PERMISSIONS, Label, Link, Logo, MiniCalendar, MiniCalendarDay, MiniCalendarDays, MiniCalendarNavigation, Navbar, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PhoneField, PinInput, Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, SegmentedControl, SegmentedControlItem, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, SignaturePad, Skeleton, Slider, Spinner, SpinnerDots, SpinnerLoader, Status, StatusIndicator, StatusLabel, Switch, TCCEProvider, TEXT_SIZES, TEXT_WEIGHTS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TablePagination, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Text, Textarea, Toaster, Toggle, ToggleGroup2 as ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, alertVariants, animation, avatarVariants, badgeVariants2 as badgeVariants, buttonVariants, columnFiltersToArrayQueryParams, columnFiltersToJsonString, columnFiltersToQueryParams, columnFiltersToRecord, createBackendParams, createBackendParamsWithFilters, duration, ease, fadeIn, fireConfetti, getActiveFilterCount, getActiveFilterValues, getColumnValueCounts, getUniqueColumnValues, hasActiveFilters, linkVariants, logos, matchPermission, mergeFilters, multiSelectFilter, navigationMenuTriggerStyle, parseJsonToFilters, parseQueryParamsToFilters, progressIndicatorVariants, progressVariants, resetConfetti, scaleIn, searchInArray, skeletonVariants, slideRight, slideUp, sortRecordToSortingState, sortingStateToJsonString, sortingStateToRecord, spinnerDotsVariants, spinnerLoaderVariants, spinnerVariants, spring, stagger, toggleVariants, tooltipContentVariants, transition, useAbility, useAbilityStatus, useAppForm, useCan, useCarousel, useColorPicker, useColumnFilter, useSidebar, useTableContext, useTableData, useTableFiltering, useTableGlobalFilter, useTableSizing, useTableSorting, useTableVisibility, useToast, validatePhone };
 //# sourceMappingURL=main.js.map
 //# sourceMappingURL=main.js.map